/* CryptoTerminal PRO - Professional AI Crypto Analyst
   Architected & Developed by Error 404 */

:root {
  --bg-primary: #070b14;
  --bg-secondary: #0d1322;
  --bg-card: #131c31;
  --bg-card-hover: #1a2744;
  --bg-card-active: #22345a;
  --border-color: #1f2e4d;
  --border-active: #3b82f6;

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --accent-blue: #3b82f6;
  --accent-cyan: #06b6d4;
  --accent-purple: #8b5cf6;
  --accent-gold: #f59e0b;

  --signal-buy: #10b981;
  --signal-buy-bg: rgba(16, 185, 129, 0.15);
  --signal-buy-border: rgba(16, 185, 129, 0.4);

  --signal-sell: #ef4444;
  --signal-sell-bg: rgba(239, 68, 68, 0.15);
  --signal-sell-border: rgba(239, 68, 68, 0.4);

  --signal-neutral: #eab308;
  --signal-neutral-bg: rgba(234, 179, 8, 0.15);
  --signal-neutral-border: rgba(234, 179, 8, 0.4);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Vazirmatn", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
  height: auto;
  display: flex;
  flex-direction: column;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Top Header */
.top-header {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 50;
  flex-shrink: 0;
  height: 66px;
  min-height: 66px;
  box-sizing: border-box;
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap !important;
}

.brand-icon {
  width: 38px;
  height: 38px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brand-icon .brand-logo-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.45));
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-icon:hover .brand-logo-img {
  transform: scale(1.08);
  filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.75));
}

.footer-brand-logo {
  width: 42px;
  height: 42px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.footer-brand-logo .footer-logo-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.4));
  transition: transform 0.25s ease, filter 0.25s ease;
}

.footer-brand-logo:hover .footer-logo-img {
  transform: scale(1.06);
  filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.7));
}

.brand-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  white-space: nowrap !important;
}

h1.brand-title,
.brand-title {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap !important;
  line-height: 1.2;
}

/* Accessible Screen Reader & SEO Heading utility (W3C Standard) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


.brand-badge-pro {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  font-size: 9px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 4px;
  color: #fff;
  line-height: 1.1;
  letter-spacing: 0.5px;
  white-space: nowrap !important;
}

.brand-subtitle {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-cyan);
  white-space: nowrap !important;
  line-height: 1.25;
}

.dev-badge {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap !important;
  line-height: 1.25;
}

.dev-badge strong {
  color: #38bdf8;
  font-weight: 700;
}

/* Ticker Bar */
.ticker-bar {
  display: flex;
  align-items: center;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  height: 40px;
  gap: 14px;
  flex-shrink: 0;
  white-space: nowrap !important;
  box-sizing: border-box;
}

.ticker-item {
  display: flex;
  flex-direction: column;
}

.ticker-label {
  font-size: 8.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}

.ticker-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.ticker-value.up { color: var(--signal-buy); }
.ticker-value.down { color: var(--signal-sell); }

/* ========================================================
   Asset Selector: Luxury Glassmorphism Dropdown & Rank Badges
   ======================================================== */
.coin-selector-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 100;
  flex-shrink: 0;
  white-space: nowrap !important;
}

.custom-coin-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 35px !important;
  max-height: 35px !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.95));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 8px;
  padding: 0 10px;
  min-width: 175px;
  max-width: 220px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden !important;
  flex-shrink: 0;
  white-space: nowrap !important;
}

.custom-coin-trigger:hover {
  border-color: #38bdf8;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.custom-coin-trigger.active {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25), 0 8px 24px rgba(0, 0, 0, 0.4);
}

.custom-coin-trigger .trigger-left {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  height: 100%;
}

/* Unified Dark Steel Minimal Rank Badges for all 100 coins */
.trigger-rank-badge, .rank-badge, .rank-steel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', 'Segoe UI', monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 5px;
  white-space: nowrap;
  letter-spacing: -0.2px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  min-width: 24px;
  height: 20px;
  text-align: center;
  box-sizing: border-box;
}

/* Strict Official Crypto Logo Styles - Never allow size blowout */
.coin-logo-wrapper {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.trigger-coin-logo,
.custom-coin-trigger img,
#trigger-coin-logo {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  display: inline-block;
  vertical-align: middle !important;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.35) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.coin-logo,
.coin-menu-item img,
.coin-item-left img {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  display: inline-block;
  vertical-align: middle !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.coin-logo-hidden,
img.coin-logo-hidden,
.coin-logo.coin-logo-hidden {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.coin-logo-fallback {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
  color: #fff !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  text-transform: uppercase !important;
  box-sizing: border-box !important;
}

.coin-logo-fallback.show {
  display: inline-flex !important;
}

.trigger-coin-symbol {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.3px;
}

.trigger-coin-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}

.trigger-chevron {
  width: 14px;
  height: 14px;
  color: #38bdf8;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.custom-coin-trigger.active .trigger-chevron {
  transform: rotate(180deg);
}

/* Custom Dropdown Menu Window */
.custom-coin-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 320px;
  max-width: 90vw;
  background: rgba(13, 19, 34, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 20px rgba(56, 189, 248, 0.15);
  overflow: hidden;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  animation: coinMenuSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes coinMenuSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.coin-menu-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(31, 46, 77, 0.8);
  background: rgba(15, 23, 42, 0.6);
}

.coin-menu-search-wrap .search-icon {
  position: absolute;
  left: 20px;
  width: 15px;
  height: 15px;
  color: #64748b;
  pointer-events: none;
}

.coin-menu-search-wrap input {
  width: 100%;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  padding: 7px 10px 7px 32px;
  font-size: 12px;
  color: #fff;
  outline: none;
  transition: all 0.2s ease;
}

.coin-menu-search-wrap input:focus {
  border-color: #38bdf8;
  background: rgba(30, 41, 59, 0.95);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.coin-menu-search-wrap input::placeholder {
  color: #64748b;
  font-size: 11.5px;
}

.coin-menu-list {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.coin-menu-list::-webkit-scrollbar {
  width: 6px;
}
.coin-menu-list::-webkit-scrollbar-track {
  background: transparent;
}
.coin-menu-list::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.25);
  border-radius: 4px;
}
.coin-menu-list::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.5);
}

.coin-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.coin-menu-item:hover {
  background: rgba(56, 189, 248, 0.12);
  transform: translateX(2px);
}

.coin-menu-item.active {
  background: rgba(37, 99, 235, 0.25);
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.coin-item-left {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.coin-item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.coin-item-symbol {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.coin-item-name {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
  line-height: 1.2;
}

.coin-item-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.coin-item-price {
  font-size: 11px;
  font-weight: 600;
  color: #e2e8f0;
}

.coin-item-check {
  width: 14px;
  height: 14px;
  color: #10b981;
}

.coin-menu-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

/* Timeframe Group (including 2H) */
.tf-group {
  display: flex;
  align-items: center;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 2px;
  height: 38px;
  box-sizing: border-box;
  flex-shrink: 0;
  white-space: nowrap !important;
}

.tf-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  padding: 0 8px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap !important;
}

.tf-btn:hover { color: #fff; }
.tf-btn.active {
  background-color: var(--accent-blue);
  color: #fff;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

/* Header Action Buttons */
.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  height: 40px;
  white-space: nowrap !important;
}

/* ====================================================
   Unified Institutional Header Action Buttons (Dark Glass)
   ==================================================== */
.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  height: 35px;
  box-sizing: border-box;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #cbd5e1;
  backdrop-filter: blur(8px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap !important;
  flex-shrink: 0;
  line-height: 1;
}

.btn-action:hover {
  background: rgba(30, 41, 67, 0.92);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}

.btn-action:active {
  transform: translateY(0);
}

.btn-signals {
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(217, 70, 239, 0.28) !important;
  color: #e2e8f0 !important;
}

.btn-signals:hover {
  background: rgba(35, 20, 52, 0.92) !important;
  border-color: rgba(217, 70, 239, 0.6) !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(217, 70, 239, 0.22) !important;
}

.btn-pricing {
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(6, 182, 212, 0.35) !important;
  color: #38bdf8 !important;
}

.btn-pricing:hover {
  background: rgba(6, 182, 212, 0.12) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.3) !important;
}

.btn-auth {
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
}

.btn-auth:hover {
  background: rgba(30, 41, 67, 0.95) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

.btn-profile {
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
}

.btn-profile:hover {
  background: rgba(30, 41, 67, 0.95) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

.btn-admin-unlocked {
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  color: #fbbf24 !important;
}

.btn-admin-unlocked:hover {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
}

.btn-export, .btn-excel {
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #34d399 !important;
}

.btn-export:hover, .btn-excel:hover {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.3) !important;
}

/* ====================================================
   Main Grid Layout
   ==================================================== */
.main-layout {
  display: grid;
  grid-template-columns: 1fr 525px;
  gap: 12px;
  padding: 10px 14px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  height: calc(100vh - 66px);
}

.left-pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  overflow-y: auto;
  padding-right: 4px;
}

.chart-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  height: 520px;
  min-height: 520px;
  overflow: visible;
  position: relative;
  flex-shrink: 0;
}

.chart-header {
  padding: 0 14px;
  height: 48px;
  min-height: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(11, 15, 25, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  gap: 12px;
  position: relative;
  z-index: 60;
  box-sizing: border-box;
}

/* Left: Symbol & Timeframe Selector */
.chart-title-area {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

.chart-pair {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.2px;
  font-family: -apple-system, BlinkMacSystemFont, 'Plus Jakarta Sans', sans-serif;
}

/* Minimalist Institutional Timeframe Dropdown Toggle */
.chart-tf-dropdown-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.chart-tf-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 35px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, 'Plus Jakarta Sans', sans-serif;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: none;
}

.chart-tf-dropdown-btn:hover {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

.chart-tf-dropdown-wrap.open .chart-tf-dropdown-btn {
  background: rgba(56, 189, 248, 0.12);
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

.chart-tf-current-label {
  font-weight: 700;
  letter-spacing: 0.2px;
}

.tf-chevron-icon {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.75;
}

.chart-tf-dropdown-wrap.open .tf-chevron-icon {
  transform: rotate(180deg);
  opacity: 1;
}

/* Institutional Timeframe Dropdown Menu (3-Column Layout: Minutes | Hours | Days) */
.chart-tf-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1000;
  background: rgba(11, 17, 32, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: flex;
  gap: 10px;
  animation: tfMenuFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tfMenuFadeIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.tf-dropdown-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tf-col-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #475569;
  padding: 0 4px 2px 4px;
}

.tf-col-buttons {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tf-dropdown-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 1px;
}

.tf-menu-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 4px;
  color: #94a3b8;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, 'Plus Jakarta Sans', sans-serif;
  cursor: pointer;
  text-align: center;
  min-width: 44px;
  transition: all 0.12s ease;
  user-select: none;
}

.tf-menu-item:hover {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.25);
}

.tf-menu-item.active {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(2, 132, 199, 0.95));
  color: #ffffff;
  font-weight: 700;
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

/* Center Area: Seamless Institutional Ticker Strip */
.chart-ticker-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 0 12px;
  background: transparent;
  white-space: nowrap;
}

.chart-ticker-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chart-ticker-price-group {
  gap: 7px;
}

.chart-ticker-price-val {
  font-size: 14.5px;
  font-weight: 800;
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  transition: color 0.2s ease;
}

.chart-change-pill {
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  padding: 1.5px 7px;
  border-radius: 4px;
  letter-spacing: -0.1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 18px;
}

.chart-change-pill:not(.up):not(.down),
.chart-change-pill.loading {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.chart-change-pill.up {
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.chart-change-pill.down {
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.25);
}

.chart-ticker-divider {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.chart-ticker-lbl {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.2px;
}

.chart-ticker-val {
  font-size: 11.5px;
  font-weight: 600;
  color: #cbd5e1;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}

/* Right Actions Area */
.chart-actions-area {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

.btn-chart-tool {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #94a3b8;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}

.btn-chart-tool:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #f1f5f9;
}

.btn-chart-tool.active {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.2);
}

.tv-engine-tag {
  font-size: 9.5px;
  color: #475569;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding-left: 2px;
}

@media (max-width: 1250px) {
  .chart-ticker-stat-sec,
  .chart-ticker-divider.chart-ticker-stat-sec {
    display: none !important;
  }
}

@media (max-width: 950px) {
  .chart-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
    height: auto;
    min-height: auto;
  }
  .chart-ticker-strip {
    order: 3;
    width: 100%;
    justify-content: space-around;
  }
}

/* TradingView-Style Dynamic Strategy / Indicator Overlay Legend (Top-Left of Chart Canvas) */
.active-overlay-pill {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 15;
  display: none;
  align-items: center;
  gap: 7px;
  padding: 3px 8px 3px 9px;
  border-radius: 6px;
  background: rgba(13, 20, 36, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55), 0 0 12px rgba(56, 189, 248, 0.15);
  color: #e2e8f0;
  font-family: -apple-system, BlinkMacSystemFont, 'Plus Jakarta Sans', 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.15px;
  max-width: calc(100% - 120px);
  pointer-events: auto;
  user-select: none;
  animation: fadeInOverlayPill 0.18s ease-out;
}

@keyframes fadeInOverlayPill {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.active-overlay-pill .dot {
  width: 7px;
  height: 7px;
  background-color: #38bdf8;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px #38bdf8;
  animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 8px #38bdf8;
  }
  50% {
    opacity: 0.6;
    transform: scale(0.85);
    box-shadow: 0 0 4px #38bdf8;
  }
}

#active-overlay-name {
  color: #cbd5e1;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
}

.btn-clear-overlay {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  width: 17px;
  height: 17px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 2px;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.btn-clear-overlay:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.6);
  color: #fca5a5;
  transform: scale(1.1);
}

.btn-chart-tool {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-chart-tool:hover {
  color: #fff;
  border-color: var(--accent-blue);
}

.btn-chart-tool.active {
  background: rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
  color: #60a5fa;
}

.chart-container {
  flex: 1;
  width: 100%;
  height: 100%;
}

/* ====================================================
   Inspector: Extended Bilingual Analysis (Persian + English)
   Requirement 10: At least 4-5 lines Persian + 4-5 lines English with increased spacing
   ==================================================== */
.inspector-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  box-shadow: var(--shadow-lg);
  border-left: 4px solid var(--accent-blue);
  transition: all 0.25s ease;
}

.inspector-card.signal-buy-border { border-left-color: var(--signal-buy); }
.inspector-card.signal-sell-border { border-left-color: var(--signal-sell); }
.inspector-card.signal-neutral-border { border-left-color: var(--signal-neutral); }

.inspector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.inspector-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inspector-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background-color: var(--bg-card);
  color: var(--accent-cyan);
}

.inspector-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.inspector-category {
  font-size: 11px;
  color: var(--text-muted);
}

.inspector-badges {
  display: flex;
  align-items: center;
  gap: 6px;
}

.inspector-reading {
  font-size: 12px;
  font-weight: 600;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 3px 8px;
  border-radius: 4px;
  color: var(--text-primary);
}

.signal-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
}

.signal-badge.buy {
  background-color: var(--signal-buy-bg);
  border: 1px solid var(--signal-buy-border);
  color: var(--signal-buy);
}

.signal-badge.sell {
  background-color: var(--signal-sell-bg);
  border: 1px solid var(--signal-sell-border);
  color: var(--signal-sell);
}

.signal-badge.neutral {
  background-color: var(--signal-neutral-bg);
  border: 1px solid var(--signal-neutral-border);
  color: var(--signal-neutral);
}

.confidence-meter {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.confidence-bar {
  width: 50px;
  height: 5px;
  background-color: var(--bg-card);
  border-radius: 3px;
  overflow: hidden;
}

.confidence-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}

/* Bilingual Containers with distinct spacing */
.bilingual-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px; /* prominent spacing between Persian & English */
}

.persian-section {
  direction: rtl;
  text-align: right;
  background: rgba(14, 23, 42, 0.65);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 8px;
  padding: 12px 14px;
}

.section-label-fa {
  font-size: 10.5px;
  font-weight: 800;
  color: #38bdf8;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.persian-text {
  font-size: 13px;
  line-height: 1.85;
  color: #e2e8f0;
  font-family: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
}

.english-section {
  direction: ltr;
  text-align: left;
  background: rgba(10, 15, 29, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 14px;
}

.section-label-en {
  font-size: 10.5px;
  font-weight: 800;
  color: #a5b4fc;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}

.english-text {
  font-size: 12px;
  line-height: 1.7;
  color: #94a3b8;
}

/* ====================================================
   Inspector Educational & AI Diagnostic Cards
   ==================================================== */
.inspector-edu-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-right: 3px solid #38bdf8;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.inspector-edu-card.en-card {
  border-right: 1px solid rgba(56, 189, 248, 0.28);
  border-left: 3px solid #38bdf8;
}

.inspector-edu-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #38bdf8;
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}

.inspector-edu-body {
  font-size: 12.5px;
  line-height: 1.9;
  color: #cbd5e1;
}

.inspector-ai-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-right: 3px solid #10b981;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.inspector-ai-card.en-card {
  border-right: 1px solid rgba(16, 185, 129, 0.28);
  border-left: 3px solid #10b981;
}

.inspector-ai-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #34d399;
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}

.inspector-ai-body {
  font-size: 12.5px;
  line-height: 1.9;
  color: #f1f5f9;
}

.inspector-extra {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-source-direct-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(59, 130, 246, 0.22));
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  width: fit-content;
}

.btn-source-direct-link:hover {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.28), rgba(59, 130, 246, 0.38));
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
  color: #ffffff;
  transform: translateY(-1px);
}

.inspector-source-box-fa {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px dashed rgba(56, 189, 248, 0.35);
  border-radius: 6px;
  font-size: 12px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 8px;
}

.inspector-source-box-en {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px dashed rgba(165, 180, 252, 0.35);
  border-radius: 6px;
  font-size: 11.5px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ====================================================
   Requirement 4: Dedicated Signals Box below Rationale
   ==================================================== */
.signals-dock-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  box-shadow: var(--shadow-lg);
  border-left: 4px solid #ec4899;
}

.signals-dock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.signals-dock-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
}

.signals-dock-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}

.signal-dock-item {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s;
}

.signal-dock-item:hover {
  border-color: #ec4899;
}

.signal-dock-item.highlighted {
  border-color: #ec4899;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.3);
  background-color: var(--bg-card-active);
}

.signal-dock-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.signal-dock-strat {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
}

.signal-dock-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  background-color: rgba(7, 11, 20, 0.6);
  padding: 6px;
  border-radius: 4px;
  text-align: center;
}

.signal-dock-grid .lbl {
  font-size: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 700;
}

.signal-dock-grid .val {
  font-size: 11px;
  font-weight: 700;
}

/* Right Section: Verdict & Tabs */
.right-pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  overflow: hidden;
}

.master-verdict-card {
  background: linear-gradient(145deg, #0e1628, #16223b);
  border: 1px solid #283a5a;
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-lg);
  flex-shrink: 0;
}

.verdict-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.verdict-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-cyan);
  letter-spacing: 0.6px;
}

.verdict-badge {
  font-size: 12px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 5px;
}

.verdict-badge.signal-strong-buy {
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.verdict-badge.signal-buy {
  background: rgba(16, 185, 129, 0.25);
  border: 1px solid var(--signal-buy);
  color: var(--signal-buy);
}

.verdict-badge.signal-strong-sell {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: #fff;
}

.verdict-badge.signal-sell {
  background: rgba(239, 68, 68, 0.25);
  border: 1px solid var(--signal-sell);
  color: var(--signal-sell);
}

.verdict-badge.signal-neutral {
  background: rgba(234, 179, 8, 0.25);
  border: 1px solid var(--signal-neutral);
  color: var(--signal-neutral);
}

.confluence-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.confluence-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.confluence-track {
  height: 6px;
  background-color: var(--bg-primary);
  border-radius: 3px;
  overflow: hidden;
}

.confluence-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #3b82f6, #10b981);
  transition: width 0.4s;
}

.pillar-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  transition: all 0.25s ease;
}

.pillar-stats.btc-mode {
  grid-template-columns: repeat(4, 1fr);
}

.pillar-stat-box {
  background-color: rgba(7, 11, 20, 0.6);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Active Pro styling for BTC S2F (only when Pro subscriber) */
.pillar-stat-box.btc-s2f-active {
  border-color: rgba(245, 158, 11, 0.5) !important;
  background: linear-gradient(145deg, rgba(245, 158, 11, 0.1), rgba(7, 11, 20, 0.7)) !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.18) !important;
}

.pillar-stat-box.btc-s2f-active .pillar-name {
  color: #f59e0b !important;
}

/* Active Highlight for Fundamental Pillar (when Guest / Basic sole contributor) */
.pillar-stat-box.active-pillar-fund {
  border-color: rgba(16, 185, 129, 0.65) !important;
  background: linear-gradient(145deg, rgba(16, 185, 129, 0.12), rgba(7, 11, 20, 0.75)) !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.22), inset 0 0 8px rgba(16, 185, 129, 0.1) !important;
  position: relative;
}

.pillar-stat-box.active-pillar-fund .pillar-name {
  color: #34d399 !important; /* Soft bright emerald green */
}

.pillar-stat-box.active-pillar-fund .pillar-score {
  color: #10b981 !important;
  font-weight: 800 !important;
}

.pillar-name {
  font-size: 8.5px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
}

.pillar-score {
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pillar-count {
  font-size: 8.5px;
  color: var(--text-secondary);
  text-align: center;
  width: 100%;
}

.pillar-stat-box.is-locked {
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.pillar-stat-box.is-locked:hover {
  border-color: rgba(245, 158, 11, 0.5);
  background-color: rgba(15, 23, 42, 0.9);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.tactical-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background-color: rgba(13, 19, 34, 0.8);
  border-radius: 5px;
  padding: 5px;
  font-size: 9.5px;
  transition: all 0.2s ease;
  text-align: center;
}

.tactical-strip.is-locked {
  cursor: pointer;
}

.tactical-strip.is-locked:hover {
  border: 1px dashed rgba(245, 158, 11, 0.45);
  background-color: rgba(15, 23, 42, 0.95);
}

.tactical-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.tactical-item .lbl {
  color: var(--text-muted);
  font-size: 7.5px;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
}

.tactical-item .val {
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tabs Card */
.tabs-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.tabs-nav {
  display: flex;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(10, 15, 28, 0.98) 100%);
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  padding: 4px;
  gap: 3px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.tab-nav-btn {
  flex: 1 1 0;
  min-width: 0;
  background: rgba(30, 41, 59, 0.4);
  border: 1px solid rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  padding: 0 4px;
  height: 29px;
  font-size: 9.5px;
  font-weight: 700;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap !important;
  box-sizing: border-box;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.15px;
  overflow: hidden !important;
  position: relative;
}

.tab-nav-btn > span:first-child,
.tab-nav-btn #tab-label-btcs2f {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.tab-nav-btn .tab-count-pill {
  flex-shrink: 0;
}

.tab-nav-btn:hover {
  color: #ffffff;
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.35);
}

.tab-nav-btn.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(37, 99, 235, 0.24)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
  border-bottom: 2px solid #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25) !important;
}

.tab-nav-btn[data-tab="strategies"].active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.24), rgba(236, 72, 153, 0.2)) !important;
  border-color: rgba(139, 92, 246, 0.55) !important;
  border-bottom: 2px solid #8b5cf6 !important;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.35) !important;
}
.tab-nav-btn[data-tab="strategies"].active .tab-count-pill {
  background-color: #8b5cf6 !important;
  color: #ffffff !important;
}

/* ====================================================
   BTC S2F Distinctive Institutional Styling
   ==================================================== */
.tab-nav-btn[data-tab="btcs2f"] {
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  background: rgba(245, 158, 11, 0.08) !important;
  color: #f8fafc !important;
  padding: 0 5px !important;
}

.tab-nav-btn[data-tab="btcs2f"]:hover {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}

.tab-nav-btn[data-tab="btcs2f"] #tab-label-btcs2f {
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.1px;
  font-size: 9.5px;
}

.tab-nav-btn[data-tab="btcs2f"] .tab-count-pill {
  background-color: rgba(245, 158, 11, 0.25) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
  font-weight: 800;
}

/* Active State: Rich Gold Gradient */
.tab-nav-btn[data-tab="btcs2f"].active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(217, 119, 6, 0.4)) !important;
  border: 1px solid #f59e0b !important;
  border-bottom: 2px solid #fbbf24 !important;
  color: #ffffff !important;
  box-shadow: inset 0 -2px 8px rgba(245, 158, 11, 0.3), 0 0 14px rgba(245, 158, 11, 0.45) !important;
}

.tab-nav-btn[data-tab="btcs2f"].active #tab-label-btcs2f {
  color: #ffffff !important;
}

.tab-nav-btn[data-tab="btcs2f"].active .tab-count-pill {
  background-color: #f59e0b !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.7) !important;
}

/* Locked tab state when coin != BTC (Clear, Crisp, High-Contrast Gold Theme) */
.tab-nav-btn.locked,
.tab-nav-btn[data-tab="btcs2f"].locked {
  opacity: 0.9 !important;
  cursor: pointer;
  position: relative;
  background-color: rgba(18, 24, 38, 0.8) !important;
  border: 1px dashed rgba(245, 158, 11, 0.55) !important;
  box-sizing: border-box;
  color: #e2e8f0 !important;
}

.tab-nav-btn.locked:hover,
.tab-nav-btn[data-tab="btcs2f"].locked:hover {
  opacity: 1 !important;
  background-color: rgba(245, 158, 11, 0.18) !important;
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35) !important;
}

.tab-nav-btn.locked #tab-label-btcs2f,
.tab-nav-btn[data-tab="btcs2f"].locked #tab-label-btcs2f {
  color: #fbbf24 !important;
  opacity: 0.95;
  font-weight: 700;
}

.tab-nav-btn.locked .tab-count-pill,
.tab-nav-btn[data-tab="btcs2f"].locked .tab-count-pill {
  background-color: rgba(245, 158, 11, 0.25) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.55) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 3.5px;
}

.tab-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  color: #f59e0b;
}

.tab-count-pill {
  font-size: 8px;
  font-weight: 800;
  padding: 0.5px 3.5px;
  border-radius: 5px;
  background-color: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  line-height: 14px;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
  box-sizing: border-box;
}

.tab-nav-btn.active .tab-count-pill {
  background-color: #38bdf8;
  color: #0f172a;
  font-weight: 900;
}

/* Dynamic Tab Count Loading Spinners */
.tab-spinner {
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1.6px solid rgba(148, 163, 184, 0.35);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: tabSpinnerRotate 0.65s linear infinite;
  vertical-align: middle;
  box-sizing: border-box;
}

.tab-spinner-sm {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1.4px solid rgba(148, 163, 184, 0.35);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: tabSpinnerRotate 0.65s linear infinite;
  vertical-align: middle;
  box-sizing: border-box;
}

.ticker-spinner-price {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.8px solid rgba(56, 189, 248, 0.25);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: tabSpinnerRotate 0.65s linear infinite;
  vertical-align: middle;
  box-sizing: border-box;
  margin: 0 4px;
}

@keyframes tabSpinnerRotate {
  to { transform: rotate(360deg); }
}

.filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-color);
  background-color: rgba(13, 19, 34, 0.5);
  font-size: 10.5px;
  flex-shrink: 0;
}

.filter-pills { display: flex; gap: 3px; }
.filter-pill {
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.filter-pill:hover { color: #fff; }
.filter-pill.active {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  color: #fff;
}

.tab-content-area {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: auto;
}

/* Tab Pagination Bar (Institutional Clean Paging for Sub-items) */
.tab-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11.5px;
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.55);
  border-radius: 6px;
}

.tab-pagination-info {
  font-size: 11px;
  color: #94a3b8;
  font-family: 'JetBrains Mono', monospace;
}

.tab-pagination-info strong {
  color: #38bdf8;
  font-weight: 700;
}

.tab-pagination-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tab-page-btn {
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 600;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.tab-page-btn:hover:not(.disabled) {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  color: #ffffff;
}

.tab-page-btn.active {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  border-color: #38bdf8;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}

.tab-page-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.indicator-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.indicator-card:hover {
  background-color: var(--bg-card-hover);
  border-color: #3b82f6;
}

.indicator-card.active {
  background-color: var(--bg-card-active);
  border-color: #3b82f6;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.25);
}

.indicator-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.indicator-title-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.indicator-num {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 24px;
  flex-shrink: 0;
  line-height: 1.4;
  padding-top: 1px;
}

.indicator-name {
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.indicator-top .signal-badge {
  flex-shrink: 0;
  margin-top: 1px;
}

.indicator-values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
}

.indicator-val-text {
  font-weight: 600;
  color: var(--accent-cyan);
}

.indicator-level-text {
  color: var(--text-muted);
}

.indicator-meta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 4px;
  margin-top: 2px;
}

.indicator-source-badge {
  color: #38bdf8;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.indicator-source-badge:hover {
  text-decoration: underline;
  color: #60a5fa;
}

.indicator-time-badge {
  color: #94a3b8;
  font-size: 9.5px;
  white-space: nowrap;
}

.inspector-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.25);
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Modals */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(3, 7, 18, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-container {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9);
  max-width: 940px;
  width: 92%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalPop 0.25s ease-out;
}

@keyframes modalPop {
  from { transform: scale(0.96); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-header {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg-primary);
}

.modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ========================================================================= */
/* UNIVERSAL MODAL CLOSE BUTTON STYLING                                      */
/* ========================================================================= */
.btn-close-modal,
.btn-modal-close,
.launcher-modal-close,
#btn-close-backtest,
#btn-close-iceberg,
#btn-close-sybil {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  background: rgba(30, 41, 59, 0.65) !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  color: #94a3b8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  flex-shrink: 0 !important;
  outline: none !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  user-select: none !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 16px !important;
  text-decoration: none !important;
}

.btn-close-modal:hover,
.btn-modal-close:hover,
.launcher-modal-close:hover,
#btn-close-backtest:hover,
#btn-close-iceberg:hover,
#btn-close-sybil:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.65) !important;
  color: #ef4444 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.4) !important;
  transform: translateY(-1px) scale(1.05) !important;
}

.btn-close-modal:active,
.btn-modal-close:active,
.launcher-modal-close:active,
#btn-close-backtest:active,
#btn-close-iceberg:active,
#btn-close-sybil:active {
  transform: translateY(0) scale(0.95) !important;
  background: rgba(239, 68, 68, 0.3) !important;
}

.btn-close-modal svg,
.btn-modal-close svg,
.launcher-modal-close svg,
#btn-close-backtest svg,
#btn-close-iceberg svg,
#btn-close-sybil svg {
  width: 15px !important;
  height: 15px !important;
  stroke: currentColor !important;
  stroke-width: 2.3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
  pointer-events: none !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-close-modal:hover svg,
.btn-modal-close:hover svg,
.launcher-modal-close:hover svg,
#btn-close-backtest:hover svg,
#btn-close-iceberg:hover svg,
#btn-close-sybil:hover svg {
  transform: rotate(90deg) !important;
}

.modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}

/* Signals Hub Modal Grid */
.signals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 12px;
}

.signal-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-lg);
}

.signal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.signal-card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}

.signal-targets-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  background-color: rgba(7, 11, 20, 0.6);
  padding: 8px;
  border-radius: var(--radius-sm);
  text-align: center;
}

.target-item { display: flex; flex-direction: column; }
.target-label { font-size: 8px; color: var(--text-muted); text-transform: uppercase; font-weight: 700; }
.target-val { font-size: 11px; font-weight: 700; color: #fff; }
.target-val.entry { color: var(--accent-cyan); }
.target-val.tp { color: var(--signal-buy); }
.target-val.sl { color: var(--signal-sell); }

/* Admin Panel Table - Foundation */
.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  text-align: left;
}

.admin-table th {
  white-space: nowrap !important;
}

.admin-table td {
  white-space: nowrap !important;
}

/* Pricing Grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 10px;
  align-items: stretch;
}

.pricing-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
  position: relative;
}

.pricing-card.popular {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 24px rgba(6, 182, 212, 0.25);
}

.pricing-card.pro {
  border-color: #8b5cf6;
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.3);
}

.pricing-tier { font-size: 14px; font-weight: 700; color: #fff; margin-top: 4px; }
.pricing-price { font-size: 24px; font-weight: 800; color: var(--accent-cyan); margin: 6px 0; }
.pricing-price span { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }

.pricing-features {
  text-align: left;
  font-size: 11px;
  line-height: 1.5;
  color: #94a3b8;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 18px 0;
  direction: ltr;
  flex: 1 1 auto;
}

.pricing-features .feature-item {
  display: block;
  direction: ltr;
  text-align: left;
  font-size: 10.5px;
}
.pricing-features .feature-item.positive { color: #cbd5e1; }
.pricing-features .feature-item.positive strong { color: #38bdf8; }
.pricing-features .feature-item.negative { color: #f87171; opacity: 0.85; }

.pricing-card .btn-subscribe {
  margin-top: auto;
  height: 42px;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.15px;
  white-space: nowrap !important;
  padding: 0 6px !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-subscribe {
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  color: #fff;
  border: none;
  padding: 8px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-subscribe:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

/* Plan Badges in Admin and Profile */
.plan-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.plan-tag.basic {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
}
.plan-tag.plus {
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.4);
}
.plan-tag.pro {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
}
.plan-tag.admin {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

/* Tab Locked by Plan */
.tab-nav-btn.plan-locked {
  opacity: 0.92;
  cursor: pointer;
  position: relative;
  background-color: rgba(18, 24, 38, 0.7);
  border: 1px dashed rgba(245, 158, 11, 0.45);
  box-sizing: border-box;
  color: #e2e8f0;
}
.tab-nav-btn.plan-locked:hover {
  background-color: rgba(245, 158, 11, 0.16);
  border-color: #f59e0b;
  color: #fbbf24;
  opacity: 1;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}
.tab-nav-btn.plan-locked .tab-count-pill {
  background-color: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 4px;
  flex-shrink: 0;
}

/* ==========================================================================
   Guest Mode Tab Styling (When User is Not Logged In)
   ========================================================================== */

/* 1. Hide subcategory count pills when user is not logged in - Only lock icon shown (Requirement 1) */
body.is-guest-user .tab-nav-btn .tab-count-pill {
  display: none !important;
}

/* 2. Soft Blue Hover when user is not logged in - Exactly identical to logged-in hover! (Requirement 2) */
body.is-guest-user .tab-nav-btn:not(.active),
body.is-guest-user .tab-nav-btn.plan-locked:not(.active),
body.is-guest-user .tab-nav-btn[data-tab="btcs2f"]:not(.active),
body.is-guest-user .tab-nav-btn[data-tab="btcs2f"].locked:not(.active) {
  background: rgba(30, 41, 59, 0.4) !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
}

body.is-guest-user .tab-nav-btn:not(.active):hover,
body.is-guest-user .tab-nav-btn.plan-locked:not(.active):hover,
body.is-guest-user .tab-nav-btn[data-tab="btcs2f"]:not(.active):hover,
body.is-guest-user .tab-nav-btn.locked:not(.active):hover,
body.is-guest-user .tab-nav-btn[data-tab="btcs2f"].locked:not(.active):hover {
  color: #ffffff !important;
  background: rgba(56, 189, 248, 0.08) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  border-style: solid !important;
  box-shadow: none !important;
}

body.is-guest-user .tab-nav-btn #tab-label-btcs2f {
  color: #94a3b8 !important;
}

body.is-guest-user .tab-nav-btn:hover #tab-label-btcs2f {
  color: #ffffff !important;
}

body.is-guest-user .tab-nav-btn.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(37, 99, 235, 0.22)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  border-bottom: 2px solid #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2) !important;
}

body.is-guest-user .tab-nav-btn.active:hover {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(37, 99, 235, 0.3)) !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3) !important;
}

/* Guest Lock Icon - Clean and subtle, matching the tab color palette */
body.is-guest-user .tier-lock-tag {
  background: rgba(148, 163, 184, 0.12) !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  color: #cbd5e1 !important;
  font-size: 8px !important;
  padding: 1px 3px !important;
  border-radius: 3px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.is-guest-user .tab-nav-btn:hover .tier-lock-tag {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  color: #ffffff !important;
}

.tier-lock-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.5px;
  font-size: 7.5px;
  font-weight: 800;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.45);
  padding: 0 3px;
  height: 14px;
  border-radius: 3px;
  margin-left: 1px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1;
}

.admin-tier-select {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: #fff;
  border-radius: 4px;
  font-size: 10.5px;
  padding: 2px 4px;
  font-weight: 700;
}

/* ====================================================
   Guest Blur Lock (Unauthenticated User Barrier)
   ==================================================== */
.guest-blurred {
  position: relative !important;
  overflow: hidden !important;
}

.guest-blurred > * {
  filter: blur(5.5px) grayscale(45%) !important;
  user-select: none !important;
  pointer-events: none !important;
  transition: filter 0.3s ease;
}

.guest-blurred::after {
  content: "🔒 Please sign in to access";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 15, 29, 0.65);
  backdrop-filter: blur(3px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  z-index: 50;
  border-radius: inherit;
  transition: all 0.25s ease;
  padding: 16px;
  text-align: center;
  box-sizing: border-box;
}

.guest-blurred:hover::after {
  content: "🔒 Please sign in to access (Click to Register / Sign In)";
  background: rgba(10, 15, 29, 0.85);
  color: var(--accent-cyan);
  box-shadow: inset 0 0 25px rgba(6, 182, 212, 0.25);
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: var(--bg-card);
  border: 1px solid var(--signal-buy);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  z-index: 1000;
}

/* ====================================================
   User Profile & Header Authentication Action Buttons
   ==================================================== */
.btn-profile {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(139, 92, 246, 0.35));
  border: 1px solid #60a5fa;
  color: #93c5fd;
  font-weight: 700;
}

.btn-profile:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(139, 92, 246, 0.5));
  color: #fff;
  border-color: #93c5fd;
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.4);
}

.btn-signout {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
  font-weight: 600;
}

.btn-signout:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
  color: #fff;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

.password-hint-text {
  font-size: 10.5px;
  color: #94a3b8;
  margin-top: 4px;
  line-height: 1.4;
  direction: ltr;
  text-align: left;
  font-style: italic;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.profile-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--border-color);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
}

.profile-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
  text-transform: uppercase;
}

.profile-input {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: #fff;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 12px;
  transition: all 0.2s;
}

.profile-input:focus {
  border-color: var(--accent-blue);
  outline: none;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

.profile-input-readonly {
  width: 100%;
  background: rgba(15, 23, 42, 0.5);
  border: 1px dashed rgba(148, 163, 184, 0.25);
  color: #94a3b8;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: not-allowed;
}

.password-display-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  padding: 6px 10px;
  border-radius: 4px;
}

.password-obscured-dots {
  font-size: 14px;
  letter-spacing: 3px;
  color: #94a3b8;
}

.btn-toggle-pwd {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #60a5fa;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-toggle-pwd:hover {
  background: rgba(59, 130, 246, 0.3);
  color: #fff;
}

.password-change-container {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-meta-info-box {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

/* ====================================================
   TRADINGVIEW-STYLE DRAWING TOOLBAR & CANVAS OVERLAY
   ==================================================== */
.chart-workspace {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 480px;
  position: relative;
  background: #0d1322;
  overflow: hidden;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.tv-drawing-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 3px;
  background: rgba(13, 19, 34, 0.95);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  width: 44px;
  flex-shrink: 0;
  z-index: 5;
  user-select: none;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
  scrollbar-width: none;
}

.tv-drawing-toolbar::-webkit-scrollbar {
  display: none;
}

/* Live Price Radar & Ticker Flash */
.live-pulse-dot {
  width: 7px;
  height: 7px;
  background-color: #10b981;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  box-shadow: 0 0 8px #10b981;
  animation: liveDotPulse 1.4s infinite ease-in-out;
}

@keyframes liveDotPulse {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes tickFlashUp {
  0% { color: #10b981; text-shadow: 0 0 10px rgba(16, 185, 129, 0.7); }
  100% { color: var(--text-primary); text-shadow: none; }
}

@keyframes tickFlashDown {
  0% { color: #ef4444; text-shadow: 0 0 10px rgba(239, 68, 68, 0.7); }
  100% { color: var(--text-primary); text-shadow: none; }
}

.price-tick-up {
  animation: tickFlashUp 0.8s ease-out;
}

.price-tick-down {
  animation: tickFlashDown 0.8s ease-out;
}

.tv-tool-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.tv-tool-btn svg {
  width: 17px;
  height: 17px;
  transition: transform 0.15s ease;
}

.tv-tool-btn:hover {
  background: rgba(59, 130, 246, 0.18);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.35);
}

.tv-tool-btn:hover svg {
  transform: scale(1.1);
}

.tv-tool-btn.active {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.3), rgba(59, 130, 246, 0.4));
  color: #38bdf8;
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.tv-tool-separator {
  width: 22px;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 2px 0;
}

.chart-canvas-wrapper {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 360px;
  align-self: stretch;
}

.chart-canvas-wrapper .chart-container {
  width: 100%;
  height: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#tv-drawing-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

#tv-drawing-canvas.drawing-active {
  pointer-events: auto;
  cursor: crosshair;
}

.tv-tool-status-pill {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid #38bdf8;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  color: #38bdf8;
  z-index: 18;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 10px rgba(56, 189, 248, 0.3);
  pointer-events: none;
  animation: pulse-glow 2s infinite ease-in-out;
  white-space: nowrap;
}

@keyframes pulse-glow {
  0%, 100% { border-color: #38bdf8; box-shadow: 0 0 8px rgba(56, 189, 248, 0.4); }
  50% { border-color: #818cf8; box-shadow: 0 0 14px rgba(129, 140, 248, 0.6); }
}

/* TradingView Chart Bottom-Right Scale Controls (Auto & Log) - Positioned in the Time Section outside the candle plot */
.tv-scale-controls {
  position: absolute;
  bottom: 3px;
  right: 4px;
  display: flex;
  align-items: center;
  gap: 2px;
  z-index: 25;
  background: rgba(13, 19, 34, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(31, 46, 77, 0.85);
  border-radius: 3px;
  padding: 1px 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  user-select: none;
  height: 20px;
  box-sizing: border-box;
}

.tv-scale-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-family: 'JetBrains Mono', 'Segoe UI', monospace;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 16px;
  text-transform: lowercase;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tv-scale-btn:hover {
  color: #fff;
  background: rgba(56, 189, 248, 0.15);
}

.tv-scale-btn.active {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 0 6px rgba(37, 99, 235, 0.5);
}

/* ====================================================
   EXCEL EXPORT CUSTOMIZATION MODAL STYLES
   ==================================================== */
.export-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(2, 132, 199, 0.15));
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 12px 14px;
  border-radius: 8px;
}

.export-badge-asset {
  background: #0f172a;
  border: 1px solid #38bdf8;
  color: #38bdf8;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.export-choice-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border-color);
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.export-choice-card:hover {
  border-color: rgba(56, 189, 248, 0.5);
  background: rgba(15, 23, 42, 0.85);
}

.export-chk {
  width: 18px;
  height: 18px;
  accent-color: #10b981;
  margin-top: 3px;
  cursor: pointer;
  flex-shrink: 0;
}

.choice-content {
  flex: 1;
}

.choice-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.choice-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}

.choice-count {
  font-size: 10px;
  font-weight: 700;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

.choice-desc {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.6;
  margin-top: 4px;
  direction: rtl;
  text-align: right;
  font-family: 'Vazirmatn', sans-serif;
}

.export-meta-note {
  font-size: 11px;
  color: #cbd5e1;
  background: rgba(0, 0, 0, 0.35);
  border-left: 3px solid #10b981;
  padding: 8px 12px;
  border-radius: 4px;
  direction: rtl;
  text-align: right;
  font-family: 'Vazirmatn', sans-serif;
  line-height: 1.6;
}

/* ====================================================
   OBJECT-ORIENTED RESPONSIVE DESIGN (DESKTOP / LAPTOP / TABLET / MOBILE)
   ==================================================== */

/* Medium Desktops & Laptops (1025px to 1279px): Keep Header Single-Line */
@media (max-width: 1279px) and (min-width: 1025px) {
  .top-header {
    padding: 0 14px;
    gap: 8px;
  }
  .ticker-stat-secondary {
    display: none !important;
  }
  .ticker-bar {
    padding: 0 10px;
    gap: 10px;
  }
  .tf-btn {
    padding: 0 6px;
    font-size: 10px;
  }
  .btn-action {
    padding: 0 9px;
    font-size: 11px;
    gap: 3px;
  }
  .custom-coin-trigger {
    min-width: 165px;
    max-width: 195px;
    padding: 0 8px;
  }
}

/* Tablets & Small Laptops (769px to 1024px) */
@media (max-width: 1024px) {
  body {
    height: auto !important;
    min-height: 100vh;
    overflow-y: auto !important;
    overflow-x: hidden;
  }

  .top-header {
    height: auto !important;
    min-height: 66px;
    padding: 12px 16px;
    flex-wrap: wrap;
    row-gap: 12px;
    column-gap: 10px;
    justify-content: space-between;
    align-items: center;
  }

  /* Row 1: Brand on Left, Actions on Right */
  .brand-section {
    order: 1;
    flex-shrink: 0;
  }

  .header-actions {
    order: 2;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* Top Header clean responsive flow */

  .ticker-stat-secondary {
    display: none !important;
  }

  .main-layout {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    padding: 12px;
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
    gap: 14px;
  }

  .left-pane, .right-pane {
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .chart-card {
    height: 480px;
    min-height: 480px;
  }

  .chart-workspace {
    height: 420px;
  }
}

/* Mobile Devices (<= 768px): Strict Object-Oriented Stack as Requested */
@media (max-width: 768px) {
  body {
    height: auto !important;
    min-height: 100vh;
    overflow-y: auto !important;
    overflow-x: hidden;
  }

  .top-header {
    height: auto !important;
    min-height: 66px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
  }

  /* Header Top Row: Brand centered */
  .brand-section {
    order: 1;
    width: 100%;
    justify-content: center;
    gap: 10px;
  }

  /* Chart Header Coin Selector on Mobile */
  .coin-selector-container {
    width: auto;
    overflow: visible;
  }

  .custom-coin-trigger {
    min-width: 155px;
    max-width: 200px;
    height: 35px !important;
    box-sizing: border-box !important;
  }

  .custom-coin-menu {
    width: 310px;
    max-width: 90vw;
  }

  .tf-btn {
    flex: 1;
    padding: 0 4px;
    font-size: 10.5px;
    height: 34px;
    text-align: center;
  }

  /* Box 3 (Third Box): Price and 24h Change Data */
  .ticker-bar {
    order: 4;
    width: 100%;
    height: auto;
    min-height: 44px;
    padding: 8px 12px;
    justify-content: space-between;
    overflow-x: auto;
    box-sizing: border-box;
  }

  .ticker-stat-secondary {
    display: flex !important;
  }

  /* Box 4: Action Hub Buttons */
  .header-actions {
    order: 5;
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
  }

  .btn-action {
    flex: 1 1 auto;
    min-width: 85px;
    height: 38px;
    font-size: 11px;
    padding: 0 8px;
  }

  .main-layout {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    padding: 10px 8px;
    gap: 12px;
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
  }

  .chart-card {
    height: 420px;
    min-height: 420px;
  }

  .chart-workspace {
    height: 360px;
  }

  .tv-drawing-toolbar {
    width: 36px;
    padding: 4px 1px;
  }

  .tv-tool-btn {
    width: 28px;
    height: 28px;
  }

  .tv-tool-btn svg {
    width: 15px;
    height: 15px;
  }

  .modal-container {
    max-width: 96vw !important;
    margin: 6px;
    max-height: 92vh;
  }

  .signals-grid {
    grid-template-columns: 1fr;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .bilingual-wrapper {
    gap: 10px;
  }
}

/* Small Smartphone Optimization (<= 480px) */
@media (max-width: 480px) {
  .top-header {
    padding: 10px 8px;
    gap: 8px;
  }

  .chart-card {
    height: 380px;
    min-height: 380px;
  }

  .chart-workspace {
    height: 320px;
  }

  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .brand-title {
    font-size: 14.5px;
  }

  .brand-subtitle {
    font-size: 9.5px;
  }

  .dev-badge {
    font-size: 8.5px;
  }

  .tf-btn {
    font-size: 9.5px;
    padding: 0 2px;
  }

  .btn-action {
    font-size: 10.5px;
    padding: 0 6px;
    min-width: 75px;
  }

  .pillar-stats.btc-mode {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   MASTER AI STRATEGIES & PRO LOCK STYLES
   ========================================================================== */
.master-strategies-card {
  margin-top: 10px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(139, 92, 246, 0.25);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.6);
}

.pro-tag-pill {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  font-size: 8.5px;
  font-weight: 900;
  padding: 1.5px 6px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
  display: inline-block;
}

.strategies-pro-lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 15, 29, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  padding: 12px;
  border: 1px dashed rgba(245, 158, 11, 0.4);
  animation: fadeInLock 0.25s ease-out;
}

@keyframes fadeInLock {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.pro-lock-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}

.pro-lock-badge {
  font-size: 9.5px;
  font-weight: 900;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 2px 9px;
  border-radius: 9999px;
  letter-spacing: 0.5px;
}

.pro-lock-title {
  font-size: 13px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.pro-lock-desc {
  font-size: 10.5px;
  color: #cbd5e1;
  line-height: 1.5;
  max-width: 310px;
  text-align: center;
}

.btn-unlock-pro-strat {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  border: none;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 7px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 3px;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

.btn-unlock-pro-strat:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.55);
}

#strat-pillar-stats {
  grid-template-columns: repeat(3, 1fr) !important;
}

#strat-pillar-stats .pillar-count {
  direction: ltr !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ==========================================================================
   INSTITUTIONAL LIQUIDATION HEATMAP & ORDERBOOK DEPTH COMPONENT
   ========================================================================== */

/* Header Trigger Button */
.btn-liquidation {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(245, 158, 11, 0.22)) !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  color: #fbbf24 !important;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.25s ease;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.15);
}

.btn-liquidation:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.32), rgba(245, 158, 11, 0.38)) !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);
}

.btn-liquidation.plan-locked {
  background: rgba(30, 41, 59, 0.45) !important;
  border: 1px dashed rgba(148, 163, 184, 0.3) !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  opacity: 0.65;
  cursor: pointer;
}

.btn-liquidation.plan-locked:hover {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  color: #fbbf24 !important;
  opacity: 0.95;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2) !important;
}

.liq-btn-tag {
  background: linear-gradient(135deg, #ef4444, #f59e0b);
  color: #ffffff;
  font-size: 8px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}

/* Chart Toolbar Button */
#btn-toggle-liq-overlay.active {
  background: linear-gradient(135deg, #f59e0b, #ef4444) !important;
  color: #ffffff !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.45);
}

#btn-toggle-liq-overlay.plan-locked {
  opacity: 0.6;
  background: rgba(15, 23, 42, 0.4) !important;
  border: 1px dashed rgba(148, 163, 184, 0.3) !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  cursor: pointer;
}

#btn-toggle-liq-overlay.plan-locked:hover {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  color: #fbbf24 !important;
  opacity: 0.95;
}

/* Modal Layout */
.modal-liq-container {
  max-width: 1420px !important;
  width: 98vw !important;
  height: 94vh !important;
  max-height: 940px !important;
  display: flex !important;
  flex-direction: column !important;
  background: radial-gradient(circle at 10% 10%, #0d1527 0%, #060913 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 45px rgba(245, 158, 11, 0.15) !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  padding: 0 !important;
}

.liq-modal-header {
  padding: 12px 22px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(10, 15, 28, 0.95) 100%);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.liq-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.liq-header-icon {
  font-size: 26px;
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.7));
}

.liq-header-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.liq-title {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.3px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.liq-badge-pro {
  font-size: 8px;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(245, 158, 11, 0.35));
  color: #facc15;
  border: 1px solid rgba(245, 158, 11, 0.55);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.6px;
  font-family: 'JetBrains Mono', monospace;
}

.liq-subtitle {
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 3px;
  font-family: 'Vazirmatn', sans-serif !important;
  line-height: 1.6;
}

.liq-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.liq-pair-pill {
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
}

.liq-price-pill {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #10b981;
  font-size: 12.5px;
  font-weight: 800;
  padding: 4px 13px;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
  font-family: 'JetBrains Mono', monospace;
}

.liq-modal-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden !important;
  overflow-x: hidden !important;
  padding: 0;
  width: 100% !important;
  min-width: 0 !important;
}

/* Executive HUD Metrics Strip */
.liq-hud-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(8, 12, 22, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.liq-hud-card {
  background: linear-gradient(180deg, rgba(20, 29, 50, 0.7) 0%, rgba(12, 17, 30, 0.85) 100%);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s ease;
}

.liq-hud-card:hover {
  border-color: rgba(56, 189, 248, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.liq-hud-card.accent-target { border-top: 3px solid #ec4899; }
.liq-hud-card.accent-bias { border-top: 3px solid #38bdf8; }
.liq-hud-card.accent-short { border-top: 3px solid #ef4444; }
.liq-hud-card.accent-long { border-top: 3px solid #10b981; }
.liq-hud-card.accent-imbalance { border-top: 3px solid #f59e0b; }

.hud-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.hud-lbl {
  font-size: 9.5px;
  font-weight: 700;
  color: #94a3b8;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.2px;
}

.hud-badge-tag {
  font-size: 7.5px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.4px;
}

.tag-short { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); }
.tag-long { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }
.tag-neutral { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4); }

.hud-val-lg {
  font-size: 14.5px;
  font-weight: 800;
  color: #ffffff;
  direction: ltr;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  margin: 3px 0;
  letter-spacing: -0.3px;
}

.hud-sub {
  font-size: 9px;
  color: #94a3b8;
  direction: ltr;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.1px;
}

/* Toolbar & Filters */
.liq-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 18px;
  background: rgba(13, 19, 35, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  gap: 12px;
}

.liq-view-tabs {
  display: flex;
  gap: 5px;
}

.liq-tab-btn {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.liq-tab-btn:hover {
  color: #fff;
  border-color: rgba(56, 189, 248, 0.5);
}

.liq-tab-btn.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(139, 92, 246, 0.25));
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

.liq-tier-filters {
  display: flex;
  align-items: center;
  gap: 4px;
}

.filter-lbl {
  font-size: 10px;
  color: var(--text-muted);
  font-family: 'Vazirmatn', sans-serif;
  margin-left: 2px;
}

.liq-filter-btn {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.liq-filter-btn:hover {
  color: #fff;
}

.liq-filter-btn.active {
  background: rgba(245, 158, 11, 0.25);
  border-color: #f59e0b;
  color: #facc15;
  font-weight: 800;
}

.liq-actions {
  display: flex;
  gap: 6px;
}

.btn-liq-action {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(6, 182, 212, 0.25));
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #34d399;
  font-size: 10.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-liq-action:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.4), rgba(6, 182, 212, 0.4));
  color: #fff;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
}

.btn-liq-action.btn-refresh {
  padding: 5px 8px;
}

/* Views Body */
.liq-views-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden !important;
  padding: 10px 18px;
  display: flex;
  flex-direction: column;
  width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.liq-view-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

/* Heatmap View Layout */
.heatmap-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px !important;
  gap: 16px;
  flex: 1;
  width: 100% !important;
  min-width: 0 !important;
}

.heatmap-canvas-container {
  background: rgba(7, 11, 20, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 9px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  justify-content: center;
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#liq-heatmap-canvas {
  width: 100%;
  height: 380px;
  display: block;
  cursor: crosshair;
}

.heatmap-thermal-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.legend-lbl {
  font-size: 9.5px;
  color: var(--text-muted);
  font-weight: 700;
}

.thermal-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #1e3a8a 0%, #7c3aed 30%, #ea580c 65%, #facc15 88%, #38bdf8 100%);
}

.thermal-scale {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: var(--text-muted);
  width: 200px;
}

/* Heatmap Sidebar */
.heatmap-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-box {
  background: linear-gradient(180deg, rgba(16, 24, 42, 0.8) 0%, rgba(10, 15, 27, 0.9) 100%);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 9px;
  padding: 10px 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.sidebar-box-title {
  font-size: 11.5px;
  font-weight: 800;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.2px;
}

.sidebar-cluster-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 3px;
}

.sidebar-cluster-list::-webkit-scrollbar {
  width: 4px;
}

.sidebar-cluster-list::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 2px;
}

/* Luxury Liquidation Tier Cards */
.liq-tier-card {
  background: linear-gradient(135deg, rgba(18, 26, 46, 0.85) 0%, rgba(11, 16, 29, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.liq-tier-card:hover {
  transform: translateX(-2px);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.liq-tier-card.short-tier {
  border-left: 3px solid #f43f5e;
}

.liq-tier-card.long-tier {
  border-left: 3px solid #10b981;
}

.tier-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tier-badge-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
}

.tier-id-pill {
  font-size: 9px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
}

.id-short {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.id-long {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.tier-lev-pill {
  font-size: 8.5px;
  font-weight: 800;
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
}

.tier-role-pill {
  font-size: 8px;
  font-weight: 600;
  color: #94a3b8;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.tier-dist-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  direction: ltr;
}

.dist-up {
  background: rgba(244, 63, 94, 0.15);
  color: #fda4af;
}

.dist-down {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}

.tier-card-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.tier-price-val {
  font-size: 13px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.2px;
}

.val-short {
  color: #fca5a5;
}

.val-long {
  color: #86efac;
}

.tier-vol-total {
  font-size: 10.5px;
  font-weight: 700;
  color: #38bdf8;
  font-family: 'JetBrains Mono', monospace;
}

.tier-progress-track {
  width: 100%;
  height: 3.5px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
  margin: 1px 0;
}

.tier-progress-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.bar-short {
  background: linear-gradient(90deg, #f43f5e, #fb923c);
}

.bar-long {
  background: linear-gradient(90deg, #06b6d4, #10b981);
}

.tier-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8.5px;
  color: #64748b;
  font-family: 'JetBrains Mono', monospace;
}

.tier-foot-lbl strong {
  color: #94a3b8;
  font-weight: 700;
}

.sidebar-box.info-box {
  border-right: 3px solid #38bdf8;
  border-left: none;
}

.sidebar-insight-text {
  font-size: 11px;
  color: #cbd5e1;
  line-height: 1.75;
  font-family: 'Vazirmatn', sans-serif !important;
  text-align: right;
  direction: rtl;
}

/* Depth Curve View Layout */
.depth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px !important;
  gap: 16px;
  flex: 1;
  width: 100% !important;
  min-width: 0 !important;
}

.depth-canvas-container {
  background: rgba(7, 11, 20, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 9px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.depth-canvas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

#liq-depth-canvas {
  width: 100% !important;
  height: 350px;
  display: block;
  box-sizing: border-box;
}

.whale-walls-sidebar {
  background: linear-gradient(180deg, rgba(16, 24, 42, 0.8) 0%, rgba(10, 15, 27, 0.9) 100%);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 9px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  min-width: 0 !important;
}

.whale-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.whale-tag {
  font-size: 8.5px;
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

.whale-walls-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  max-height: 350px;
  padding-right: 3px;
}

.whale-walls-list::-webkit-scrollbar {
  width: 4px;
}

.whale-walls-list::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 2px;
}

/* Luxury Whale Wall Cards */
.whale-wall-card, .whale-card {
  background: linear-gradient(135deg, rgba(18, 26, 46, 0.85) 0%, rgba(11, 16, 29, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.2s ease;
}

.whale-wall-card:hover, .whale-card:hover {
  transform: translateX(-2px);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.whale-wall-card.whale-bid, .whale-card.buy-wall {
  border-left: 3px solid #10b981;
}

.whale-wall-card.whale-ask, .whale-card.sell-wall {
  border-left: 3px solid #ef4444;
}

.whale-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.whale-type-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 3px;
}

.whale-type-badge.bid {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.whale-type-badge.ask {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.whale-distance {
  font-size: 9px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: #94a3b8;
  direction: ltr;
}

.whale-card-mid {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.whale-price {
  font-size: 13px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: #ffffff;
}

.whale-val {
  font-size: 11px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: #fbbf24;
}

.whale-card-bot {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  color: #64748b;
  font-family: 'JetBrains Mono', monospace;
}

.whale-tag-sub {
  color: #94a3b8;
  font-weight: 600;
}

/* Matrix Table View */
.matrix-table-container {
  background: rgba(7, 11, 20, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 9px;
  overflow-y: auto;
  max-height: 420px;
  width: 100%;
  box-sizing: border-box;
}

.liq-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  text-align: center;
}

.liq-matrix-table th {
  background: rgba(15, 23, 42, 0.98);
  color: #38bdf8;
  font-weight: 800;
  padding: 9px 12px;
  position: sticky;
  top: 0;
  border-bottom: 1px solid rgba(56, 189, 248, 0.3);
  z-index: 2;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.liq-matrix-table td {
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
  font-family: 'JetBrains Mono', monospace;
}

.liq-matrix-table tr:hover {
  background: rgba(30, 41, 59, 0.5);
}

.matrix-side-tag {
  font-size: 8.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
}

.matrix-tier-pill {
  font-size: 8.5px;
  font-weight: 800;
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  padding: 1px 6px;
  border-radius: 3px;
}

.matrix-risk-badge {
  font-size: 8.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
}

.risk-extreme { background: rgba(239, 68, 68, 0.25); color: #f87171; }
.risk-very-high { background: rgba(249, 115, 22, 0.25); color: #fb923c; }
.risk-high { background: rgba(245, 158, 11, 0.25); color: #facc15; }
.risk-moderate { background: rgba(56, 189, 248, 0.25); color: #38bdf8; }
.risk-institutional { background: rgba(129, 140, 248, 0.25); color: #a5b4fc; }

.matrix-meter-bar {
  width: 90px;
  height: 14px;
  background: rgba(15, 23, 42, 0.8);
  border-radius: 3px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  position: relative;
}

.matrix-meter-fill {
  height: 100%;
  border-radius: 3px;
  opacity: 0.6;
}

.matrix-meter-text {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 8.5px;
  font-weight: 800;
  color: #fff;
}

/* Live Rekt Tape View */
.rekt-tape-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  width: 100%;
  min-width: 0;
}

.rekt-tape-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.rekt-live-dot {
  font-size: 9px;
  color: #ef4444;
  animation: liqPulse 1.2s infinite;
  font-weight: 800;
}

.rekt-tape-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px;
  overflow-y: auto;
  max-height: 400px;
  width: 100%;
  min-width: 0;
}

.rekt-tape-card, .rekt-card {
  background: linear-gradient(135deg, rgba(18, 26, 46, 0.85) 0%, rgba(11, 16, 29, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.2s ease;
  min-width: 0;
}

.rekt-tape-card:hover, .rekt-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.rekt-tape-card.rekt-short-card, .rekt-card.rekt-short { border-top: 3px solid #ef4444; }
.rekt-tape-card.rekt-long-card, .rekt-card.rekt-long { border-top: 3px solid #10b981; }

.rekt-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rekt-side-pill {
  font-size: 8.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
}

.rekt-side-pill.short { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); }
.rekt-side-pill.long { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }

.rekt-time-stamp {
  font-size: 8.5px;
  color: #64748b;
  font-family: 'JetBrains Mono', monospace;
  direction: ltr;
}

.rekt-amount-val {
  font-size: 14px;
  font-weight: 800;
  direction: ltr;
  font-family: 'JetBrains Mono', monospace;
  color: #ffffff;
}

.rekt-meta-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 8.5px;
  color: #94a3b8;
  font-family: 'JetBrains Mono', monospace;
  direction: ltr;
}

.rekt-meta-row strong {
  color: #e2e8f0;
}

/* Bilingual Institutional Footer Layout */
.liq-bilingual-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 10px 20px 12px;
  background: linear-gradient(180deg, rgba(10, 15, 28, 0.95) 0%, rgba(6, 9, 18, 0.98) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.bilingual-fa-box {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.75) 0%, rgba(11, 17, 32, 0.9) 100%);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 8px;
  padding: 9px 13px;
  direction: rtl;
  text-align: right;
  font-family: 'Vazirmatn', sans-serif !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bilingual-fa-box .lang-tag {
  color: #38bdf8;
  font-weight: 800;
  font-size: 11.5px;
  font-family: 'Vazirmatn', sans-serif !important;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: normal;
}

.bilingual-en-box {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.75) 0%, rgba(11, 17, 32, 0.9) 100%);
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 8px;
  padding: 9px 13px;
  direction: ltr;
  text-align: left;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bilingual-en-box .lang-tag {
  color: #c084fc;
  font-weight: 800;
  font-size: 11px;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.3px;
}

.fa-structured-report, .en-structured-report {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.report-header-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  width: fit-content;
}

.badge-short-sq {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.badge-long-cas {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #86efac;
}

.badge-neutral-hunt {
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fde047;
}

.report-badge-dot {
  font-size: 8px;
  line-height: 1;
}

.report-tf-tag {
  font-size: 8.5px;
  opacity: 0.85;
  margin-right: 4px;
}

.report-narrative {
  font-size: 11px;
  line-height: 1.75;
  color: #cbd5e1;
}

.report-coinglass-strip {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  border-right: 2.5px solid #a855f7;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  line-height: 1.65;
  color: #94a3b8;
}

.bilingual-en-box .report-coinglass-strip {
  border-right: none;
  border-left: 2.5px solid #a855f7;
}

.cg-strip-icon {
  font-size: 11px;
  color: #c084fc;
}

.en-chip, .mono-chip {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  padding: 1px 4px;
  border-radius: 3px;
  display: inline-block;
  direction: ltr;
}

.highlight-price {
  color: #facc15;
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.25);
}

.highlight-confluence {
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.liq-skeleton-item {
  color: var(--text-muted);
  font-size: 10px;
  text-align: center;
  padding: 15px;
}

/* CoinGlass vs. Binance Cross-Platform Comparison Banner */
.cg-comparison-container {
  margin: 8px 18px 4px;
  background: linear-gradient(135deg, rgba(20, 27, 45, 0.85) 0%, rgba(13, 19, 33, 0.95) 100%);
  border: 1px solid rgba(168, 85, 247, 0.28);
  border-radius: 8px;
  padding: 8px 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.cg-banner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cg-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cg-platform-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.cg-platform-pill.binance-pill {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.cg-platform-pill.coinglass-pill {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #c084fc;
}

.cg-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.cg-dot.binance {
  background: #f59e0b;
  box-shadow: 0 0 6px #f59e0b;
}

.cg-dot.coinglass {
  background: #a855f7;
  box-shadow: 0 0 6px #a855f7;
}

.cg-vs-pill {
  font-size: 8.5px;
  font-weight: 900;
  color: #94a3b8;
  letter-spacing: 0.5px;
}

.cg-confluence-badge {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 9.5px;
  font-weight: 800;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.cg-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.cg-metric-col {
  background: rgba(11, 15, 25, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 5px 9px;
}

.cg-col-title {
  font-size: 8.5px;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 3px;
}

.cg-compare-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 11px;
}

.cg-compare-row .cg-lbl {
  color: #64748b;
  font-size: 8.5px;
  margin-right: 2px;
}

.cg-compare-row .cg-divider {
  color: #475569;
  font-weight: 300;
}

.val-binance {
  color: #fbbf24;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

.val-coinglass {
  color: #c084fc;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

.cg-col-sub {
  font-size: 8px;
  color: #64748b;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cg-share-bar-container {
  margin-top: 4px;
}

.cg-share-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 3px;
}

.cg-share-bar .bar-binance {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  transition: width 0.3s ease;
}

.cg-share-bar .bar-bybit {
  background: linear-gradient(90deg, #38bdf8, #0ea5e9);
  transition: width 0.3s ease;
}

.cg-share-bar .bar-okx {
  background: linear-gradient(90deg, #10b981, #059669);
  transition: width 0.3s ease;
}

.cg-share-labels {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #94a3b8;
  font-family: 'JetBrains Mono', monospace;
}

/* ====================================================
   Real-Time AI Sentiment NLP Badge (Indicator Cards)
   ==================================================== */
.indicator-nlp-badge {
  font-size: 8.5px;
  font-weight: 800;
  background: rgba(139, 92, 246, 0.18);
  color: #c084fc;
  border: 1px solid rgba(139, 92, 246, 0.35);
  padding: 1px 5px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.4px;
}

.nlp-pulse-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #a855f7;
  box-shadow: 0 0 6px #a855f7;
  display: inline-block;
  animation: pulse-dot 1.8s infinite;
}



/* ====================================================
   FEATURE #6: ON-CHAIN WHALE LIVE RADAR STYLES
   ==================================================== */

/* Header Whale Radar Button */
.btn-whale-radar {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(56, 189, 248, 0.22)) !important;
  border: 1px solid rgba(168, 85, 247, 0.5) !important;
  color: #e2e8f0 !important;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  transition: all 0.25s ease;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.25);
}

.btn-whale-radar:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(56, 189, 248, 0.35)) !important;
  border-color: #a855f7 !important;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.5);
  transform: translateY(-1px);
}

.whale-icon-pulse {
  font-size: 13px;
  display: inline-block;
  animation: whale-wiggle 3s infinite ease-in-out;
}

@keyframes whale-wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-8deg) scale(1.1); }
  75% { transform: rotate(8deg) scale(1.05); }
}

.whale-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
  animation: pulse-dot 1.4s infinite;
}

/* ==========================================================================
   Global Red Liquidity Shock Siren Alert Banner (Slim Single-Row Ribbon)
   ========================================================================== */
.whale-global-alert-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  padding: 0 12px;
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.22) 0%, rgba(185, 28, 28, 0.12) 40%, rgba(15, 23, 42, 0.95) 100%);
  border-bottom: 1px solid rgba(239, 68, 68, 0.5);
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
  z-index: 20;
  box-sizing: border-box;
  animation: red-siren-flash 2.5s infinite ease-in-out;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}

@keyframes red-siren-flash {
  0%, 100% {
    border-bottom-color: rgba(239, 68, 68, 0.85);
    background-color: rgba(220, 38, 38, 0.22);
    box-shadow: 0 2px 14px rgba(239, 68, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  50% {
    border-bottom-color: rgba(239, 68, 68, 0.4);
    background-color: rgba(185, 28, 28, 0.1);
    box-shadow: 0 1px 6px rgba(239, 68, 68, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  }
}

.whale-alert-left-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.whale-alert-top-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.whale-alert-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.whale-alert-siren {
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  animation: siren-pulse 1s infinite alternate;
}

@keyframes siren-pulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 2px #ef4444); }
  100% { transform: scale(1.2); filter: drop-shadow(0 0 8px #ef4444); }
}

.whale-alert-badge {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.6px;
  padding: 2.5px 7px;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
  white-space: nowrap;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.25);
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
}

.whale-alert-text {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  color: #f1f5f9;
  font-weight: 500;
  line-height: 1.2;
  direction: ltr;
  text-align: left;
  box-sizing: border-box;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.whale-alert-strong {
  color: #fca5a5;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.whale-highlight-amt {
  color: #ffffff;
  font-weight: 800;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
  background: rgba(239, 68, 68, 0.28);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(239, 68, 68, 0.45);
  display: inline-block;
  line-height: 1.2;
}

.whale-highlight-entity {
  color: #38bdf8;
  font-weight: 700;
}

.whale-alert-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-view-whale-radar {
  background: linear-gradient(135deg, #a855f7, #6366f1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  height: 24px;
  padding: 0 9px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}

.btn-view-whale-radar:hover {
  background: linear-gradient(135deg, #c084fc, #818cf8);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.55);
}

.btn-dismiss-whale-alert {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.2s ease;
  flex-shrink: 0;
  padding: 0;
}

.btn-dismiss-whale-alert:hover {
  color: #fff;
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.3);
  transform: scale(1.08);
}

/* TV & Ultra-Wide Displays (>= 1800px) */
@media (min-width: 1800px) {
  .whale-global-alert-banner {
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    padding: 0 16px;
    gap: 12px;
  }
  .whale-alert-siren {
    font-size: 15px;
  }
  .whale-alert-badge {
    font-size: 9.5px;
    padding: 3px 8px;
  }
  .whale-alert-text {
    font-size: 12px;
  }
  .btn-view-whale-radar {
    height: 25px;
    font-size: 11px;
    padding: 0 10px;
  }
  .btn-dismiss-whale-alert {
    width: 22px;
    height: 22px;
    font-size: 13px;
  }
}

/* Modal 8: Whale Radar Container */
.modal-whale-container {
  max-width: 1240px !important;
  width: 95vw !important;
  max-height: 92vh !important;
  background: rgba(11, 15, 25, 0.97) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(168, 85, 247, 0.18) !important;
}

.whale-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(20, 27, 45, 0.8) 0%, rgba(11, 15, 25, 0.95) 100%);
}

.whale-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.whale-header-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(56, 189, 248, 0.25));
  border: 1px solid rgba(168, 85, 247, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.3);
}

.whale-header-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.whale-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
}

/* User's Exact Roadmap Badge: ON-CHAIN RADAR */
.badge-whale-tag {
  background: #281b40;
  color: #c084fc;
  border: 1px solid #6b21a8;
  font-size: 10px;
  font-weight: 800;
  padding: 2.5px 8px;
  border-radius: 4px;
  letter-spacing: 0.6px;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.25);
}

.whale-subtitle {
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 2px;
  direction: rtl;
}

.whale-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.whale-pair-pill {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.whale-threshold-pill {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
}

.btn-whale-refresh {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.btn-whale-refresh:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: #38bdf8;
}

.whale-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  max-height: calc(92vh - 80px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 1. Modal Red Liquidity Alert Banner */
.whale-red-alert-banner {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.22) 0%, rgba(185, 28, 28, 0.12) 100%);
  border: 1.5px solid rgba(239, 68, 68, 0.7);
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
  animation: red-siren-flash 2.2s infinite ease-in-out;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.whale-red-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.whale-red-siren-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.whale-red-siren-icon {
  font-size: 18px;
  animation: siren-pulse 0.9s infinite alternate;
}

.whale-red-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #fee2e2;
}

.whale-red-badge-live {
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.whale-red-impact-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(239, 68, 68, 0.4);
  padding: 3px 10px;
  border-radius: 5px;
}

.whale-red-impact-lbl {
  font-size: 10.5px;
  color: #cbd5e1;
}

.whale-red-impact-val {
  font-size: 11px;
  font-weight: 800;
  color: #ef4444;
}

.whale-red-detail-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background: rgba(15, 23, 42, 0.5);
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 992px) {
  .whale-red-detail-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .whale-red-detail-row {
    grid-template-columns: 1fr;
  }
}

.whale-red-param {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(15, 23, 42, 0.6);
  padding: 8px 12px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.whale-red-param .param-lbl {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.whale-red-param .param-val {
  font-size: 12px;
  font-weight: 700;
  color: #f1f5f9;
  word-break: break-all;
}

.whale-red-param .param-val.highlight {
  color: #ef4444;
  font-size: 13px;
  font-weight: 800;
}

.whale-red-param .param-val.mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #38bdf8;
}

.whale-red-desc-box {
  font-size: 12px;
  color: #fee2e2;
  line-height: 1.55;
  direction: ltr;
  text-align: left;
  background: rgba(15, 23, 42, 0.6);
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

/* 2. Executive HUD Metrics Grid */
.whale-hud-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 900px) {
  .whale-hud-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 550px) {
  .whale-hud-grid {
    grid-template-columns: 1fr;
  }
}

.whale-hud-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s ease;
}

.whale-hud-card:hover {
  border-color: rgba(168, 85, 247, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.whale-hud-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.whale-hud-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.whale-hud-badge.purple {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.35);
}

.whale-hud-badge.cyan {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.35);
}

.whale-hud-badge.amber {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.35);
}

.whale-hud-val {
  font-size: 16px;
  font-weight: 800;
  color: #10b981;
  font-family: 'JetBrains Mono', sans-serif;
}

.whale-hud-val.purple { color: #c084fc; }
.whale-hud-val.amber { color: #fbbf24; }
.whale-hud-val.cyan { color: #38bdf8; }

.whale-hud-sub {
  font-size: 10.5px;
  color: #94a3b8;
  line-height: 1.3;
}

.whale-hud-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  margin: 4px 0 2px;
}

.whale-hud-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #10b981);
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* 3. Toolbar & View Tabs */
.whale-view-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: rgba(15, 23, 42, 0.5);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.whale-tab-group {
  display: flex;
  gap: 6px;
}

.whale-tab-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.whale-tab-btn:hover {
  color: #fff;
  border-color: rgba(168, 85, 247, 0.4);
}

.whale-tab-btn.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(56, 189, 248, 0.25));
  color: #fff;
  border-color: #a855f7;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}

.whale-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.whale-filter-lbl {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 600;
}

.whale-filter-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.whale-filter-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.whale-filter-btn.active {
  background: #38bdf8;
  color: #0b1120;
  border-color: #38bdf8;
  font-weight: 800;
}

/* 4. Canvas Container & Graph Overlay */
.whale-canvas-container {
  position: relative;
  width: 100%;
  height: 460px;
  background: radial-gradient(circle at 50% 50%, rgba(20, 27, 45, 0.8) 0%, rgba(10, 14, 23, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
}

#whale-network-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.whale-canvas-overlay-legend {
  position: absolute;
  bottom: 12px;
  left: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  background: rgba(11, 15, 25, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 12px;
  border-radius: 6px;
  pointer-events: none;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-dot.cyan { background-color: #38bdf8; box-shadow: 0 0 6px #38bdf8; }
.legend-dot.purple { background-color: #a855f7; box-shadow: 0 0 6px #a855f7; }
.legend-dot.amber { background-color: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
.legend-dot.green { background-color: #10b981; box-shadow: 0 0 6px #10b981; }

.legend-particle {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.legend-particle.red { background-color: #ef4444; box-shadow: 0 0 6px #ef4444; }
.legend-particle.green { background-color: #10b981; box-shadow: 0 0 6px #10b981; }

/* Canvas Hover Tooltip */
.whale-node-tooltip {
  position: absolute;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(56, 189, 248, 0.5);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 11px;
  color: #f8fafc;
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
  max-width: 280px;
  transform: translate(-50%, -120%);
  transition: opacity 0.15s ease;
}

/* 5. Live Whale Transactions Feed Table */
.whale-feed-container {
  max-height: 460px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.5);
}

.whale-feed-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  text-align: left;
}

.whale-feed-table th {
  background: rgba(20, 27, 45, 0.9);
  color: #94a3b8;
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.whale-feed-table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
}

.whale-feed-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

.whale-feed-table tr.critical-row td {
  background: rgba(239, 68, 68, 0.08);
}

.whale-tx-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  white-space: nowrap;
}

.whale-tx-badge.critical {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.whale-tx-badge.inflow {
  background: rgba(249, 115, 22, 0.2);
  color: #f97316;
  border: 1px solid rgba(249, 115, 22, 0.4);
}

.whale-tx-badge.outflow {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.whale-tx-badge.etf {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.whale-tx-badge.otc {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.whale-tx-badge.internal {
  background: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

/* 6. Bilingual Footer */
.whale-bilingual-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

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

.whale-bilingual-box {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.whale-bilingual-box.fa {
  direction: rtl;
  border-right: 3px solid #a855f7;
}

.whale-bilingual-box.en {
  direction: ltr;
  border-left: 3px solid #38bdf8;
}

.whale-lang-tag {
  font-size: 11px;
  font-weight: 800;
  color: #cbd5e1;
}

.whale-lang-text {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.6;
}

/* ====================================================
   FEATURE #10: NO-CODE AI STRATEGY BUILDER STUDIO (CUSTOM CREATOR)
   ==================================================== */

/* Header Trigger Button */
.btn-strategy-builder {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.2));
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #d8b4fe;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-strategy-builder:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.4));
  border-color: #c084fc;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.35);
  transform: translateY(-1px);
}

.builder-icon-puzzle {
  font-size: 13px;
  display: inline-block;
  transition: transform 0.25s ease;
}

.btn-strategy-builder:hover .builder-icon-puzzle {
  transform: rotate(20deg) scale(1.15);
}

.builder-custom-tag {
  background: linear-gradient(135deg, #7c3aed, #9333ea);
  color: #ffffff;
  font-size: 8.5px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  box-shadow: 0 0 8px rgba(147, 51, 234, 0.5);
}

/* Custom Creator Badge */
.badge-custom-creator {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(168, 85, 247, 0.35));
  color: #d8b4fe;
  border: 1px solid rgba(192, 132, 252, 0.5);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 10px;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
  display: inline-flex;
  align-items: center;
}

/* Modal Container for Studio */
.modal-builder-container {
  max-width: 1400px;
  width: 96vw;
  height: 92vh;
  display: flex;
  flex-direction: column;
  background: #090d16;
  border: 1px solid rgba(168, 85, 247, 0.3);
  box-shadow: 0 0 60px rgba(126, 34, 206, 0.25);
  border-radius: 12px;
  overflow: hidden;
}

.builder-modal-header {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.98), rgba(24, 18, 43, 0.98));
  border-bottom: 1px solid rgba(168, 85, 247, 0.2);
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.builder-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.builder-header-icon {
  font-size: 24px;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.3);
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.2);
}

.builder-header-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.builder-modal-title {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.2px;
}

.builder-modal-subtitle {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

.builder-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.builder-select-sm {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
  max-width: 210px;
}

.builder-select-sm:hover,
.builder-select-sm:focus {
  border-color: #a855f7;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.25);
}

.btn-builder-hdr {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.btn-builder-hdr:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-builder-hdr.save {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: 1px solid #a855f7;
  color: #fff;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.35);
}

.btn-builder-hdr.save:hover {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.5);
}

.btn-builder-hdr.danger {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
}

.btn-builder-hdr.danger:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #fff;
}

/* Modal Body & 3-Column Grid */
.builder-modal-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  overflow-y: auto;
}

.builder-studio-grid {
  display: grid;
  grid-template-columns: 290px 1fr 370px;
  gap: 14px;
  flex: 1;
  min-height: 540px;
}

@media (max-width: 1280px) {
  .builder-studio-grid {
    grid-template-columns: 260px 1fr 330px;
  }
}

@media (max-width: 1024px) {
  .builder-studio-grid {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
  }
}

/* ====================================================
   COLUMN 1: BLOCK PALETTE
   ==================================================== */
.builder-col-palette {
  background: rgba(13, 19, 33, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.builder-palette-header {
  padding: 12px 14px 10px;
  background: rgba(15, 23, 42, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.palette-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 800;
  color: #ffffff;
}

.palette-tag {
  font-size: 8.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.palette-sub {
  font-size: 10px;
  color: #94a3b8;
  margin: 3px 0 8px;
}

.palette-search-wrap input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(8, 12, 22, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 6px;
  outline: none;
  transition: all 0.2s ease;
}

.palette-search-wrap input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

.builder-palette-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.palette-category-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.palette-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 2px 2px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.palette-cat-badge {
  font-size: 8px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
}
.palette-cat-badge.tech { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.palette-cat-badge.onchain { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
.palette-cat-badge.sentiment { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }

.palette-block-card {
  background: rgba(20, 27, 45, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid #38bdf8;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.palette-block-card.onchain { border-left-color: #a855f7; }
.palette-block-card.sentiment { border-left-color: #f59e0b; }

.palette-block-card:hover {
  background: rgba(30, 41, 69, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateX(3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.palette-block-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.palette-block-name {
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 5px;
}

.palette-add-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.palette-block-card:hover .palette-add-btn {
  background: #38bdf8;
  color: #0b1120;
}

.palette-block-desc {
  font-size: 9.5px;
  color: #94a3b8;
  line-height: 1.35;
}

/* ====================================================
   COLUMN 2: VISUAL PUZZLE CANVAS
   ==================================================== */
.builder-col-canvas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

/* Strategy Configuration Card */
.builder-strat-config-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.config-top-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.config-name-wrap {
  flex: 1;
}

.builder-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.builder-input-name {
  width: 100%;
  box-sizing: border-box;
  background: rgba(8, 12, 22, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 6px;
  outline: none;
  transition: all 0.2s ease;
}

.builder-input-name:focus {
  border-color: #a855f7;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.3);
}

.config-dir-wrap {
  flex-shrink: 0;
}

.builder-dir-switch {
  display: flex;
  background: rgba(8, 12, 22, 0.9);
  padding: 3px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  gap: 4px;
}

.dir-btn {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dir-btn.active.long {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.dir-btn.active.short {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

.config-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 8px;
}

.config-item {
  flex: 1;
}

.builder-select-card {
  width: 100%;
  background: rgba(8, 12, 22, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  font-size: 10.5px;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: 5px;
  outline: none;
}

.builder-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: #cbd5e1;
  cursor: pointer;
  margin-top: 2px;
}

.builder-checkbox-label input[type="checkbox"] {
  accent-color: #a855f7;
  cursor: pointer;
}

/* Puzzle Canvas Assembly Area */
.builder-puzzle-canvas-area {
  background: radial-gradient(circle at top left, rgba(20, 27, 45, 0.5), rgba(10, 14, 25, 0.9));
  border: 1px dashed rgba(168, 85, 247, 0.25);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 250px;
  position: relative;
}

.puzzle-area-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.puzzle-area-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
}

.puzzle-count-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(168, 85, 247, 0.2);
  color: #d8b4fe;
}

.btn-clear-chain {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 9.5px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-clear-chain:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #f87171;
}

/* Interlocking Puzzle Chain */
.builder-puzzle-chain {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.builder-puzzle-empty {
  padding: 40px 20px;
  text-align: center;
  color: #64748b;
  font-size: 11.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.puzzle-empty-icon {
  font-size: 32px;
  opacity: 0.5;
}

/* Interlocking Condition Puzzle Card */
.puzzle-condition-card {
  width: 100%;
  background: linear-gradient(135deg, rgba(20, 27, 45, 0.95), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  position: relative;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.puzzle-condition-card:hover {
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Puzzle Interlocking Notch Decorator */
.puzzle-condition-card::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 8px;
  background: rgba(30, 41, 69, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
  border-radius: 0 0 6px 6px;
  z-index: 2;
}

.puzzle-condition-card.last-card::after {
  display: none;
}

.puzzle-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.puzzle-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  color: #ffffff;
}

.puzzle-type-tag {
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}
.puzzle-type-tag.tech { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.puzzle-type-tag.onchain { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
.puzzle-type-tag.sentiment { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }

.btn-remove-puzzle {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s ease;
}

.btn-remove-puzzle:hover {
  color: #ef4444;
}

.puzzle-controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.puzzle-control-group {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: #94a3b8;
}

.puzzle-input-sm {
  background: rgba(8, 12, 22, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 6px;
  border-radius: 4px;
  outline: none;
  width: 55px;
  text-align: center;
}

.puzzle-op-select {
  background: rgba(8, 12, 22, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 6px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

/* Interlocking Logic Connector Bridge */
.puzzle-logic-connector {
  position: relative;
  margin: 6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.logic-bridge-btn {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.25));
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #d8b4fe;
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 12px;
  cursor: pointer;
  letter-spacing: 0.5px;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
  transition: all 0.2s ease;
}

.logic-bridge-btn:hover {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.4);
}

/* Risk Management Card */
.builder-risk-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
}

.risk-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
}

.risk-badge {
  font-size: 8px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.risk-inputs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 768px) {
  .risk-inputs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.risk-input-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.risk-input-col label {
  font-size: 9.5px;
  font-weight: 700;
  color: #94a3b8;
}

.input-with-suffix {
  display: flex;
  align-items: center;
  background: rgba(8, 12, 22, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  padding: 0 8px;
}

.input-with-suffix input {
  width: 100%;
  background: transparent;
  border: none;
  color: #34d399;
  font-weight: 700;
  font-size: 11px;
  padding: 5px 0;
  outline: none;
}

.input-with-suffix.danger input {
  color: #f87171;
}

.input-with-suffix span {
  font-size: 10px;
  color: #64748b;
  font-weight: 700;
}

.risk-input-col select {
  background: rgba(8, 12, 22, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  font-size: 10px;
  padding: 5px 8px;
  border-radius: 5px;
  outline: none;
}

/* ====================================================
   COLUMN 3: INSTANT BACKTEST & SIMULATION HUB
   ==================================================== */
.builder-col-simulation {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.sim-actions-row {
  display: flex;
  gap: 8px;
}

.btn-builder-run-sim {
  flex: 1;
  background: linear-gradient(135deg, #6366f1, #9333ea);
  border: none;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 0 16px rgba(147, 51, 234, 0.4);
  transition: all 0.2s ease;
}

.btn-builder-run-sim:hover {
  background: linear-gradient(135deg, #4f46e5, #7e22ce);
  box-shadow: 0 0 24px rgba(147, 51, 234, 0.6);
  transform: translateY(-1px);
}

.btn-builder-project-chart {
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-size: 11px;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-builder-project-chart:hover {
  background: rgba(14, 165, 233, 0.25);
  border-color: #38bdf8;
  color: #fff;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.3);
}

/* Performance Scorecard Card */
.sim-scorecard-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scorecard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
}

.scorecard-bars-tag {
  font-size: 8.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
}

/* Win Rate Gauge & Metrics Grid */
.sim-winrate-gauge-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.winrate-gauge-container {
  width: 90px;
  height: 90px;
  position: relative;
  flex-shrink: 0;
}

.winrate-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.gauge-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 8;
}

.gauge-fill {
  fill: none;
  stroke: #10b981;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease, stroke 0.3s ease;
}

.gauge-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gauge-val {
  font-size: 15px;
  font-weight: 900;
  color: #ffffff;
  font-family: monospace;
}

.gauge-lbl {
  font-size: 7.5px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.5px;
}

.scorecard-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 1;
}

.metric-mini-tile {
  background: rgba(8, 12, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 6px 8px;
}

.tile-lbl {
  font-size: 8.5px;
  color: #94a3b8;
  font-weight: 600;
}

.tile-val {
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  font-family: monospace;
  margin-top: 2px;
}
.tile-val.green { color: #34d399; }
.tile-val.cyan { color: #38bdf8; }
.tile-val.red { color: #f87171; }

/* Win/Loss Ratio Bar */
.win-loss-ratio-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ratio-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  font-weight: 700;
}
.ratio-label-win { color: #34d399; }
.ratio-label-loss { color: #f87171; }

.ratio-track {
  display: flex;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.ratio-fill-win {
  background: #10b981;
  transition: width 0.4s ease;
}

.ratio-fill-loss {
  background: #ef4444;
  transition: width 0.4s ease;
}

/* Live Market Candle Confluence HUD */
.sim-live-hud-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.live-hud-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.live-hud-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  color: #ffffff;
}

.live-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulse-live-radar 1.5s infinite;
}

.live-status-pill {
  font-size: 8.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.live-status-pill.active-long { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }
.live-status-pill.active-short { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); }
.live-status-pill.neutral { background: rgba(148, 163, 184, 0.15); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.3); }

.live-hud-confluence-text {
  font-size: 10.5px;
  color: #cbd5e1;
  line-height: 1.4;
  background: rgba(8, 12, 22, 0.6);
  padding: 6px 8px;
  border-radius: 5px;
  border-left: 2px solid #38bdf8;
}

.live-levels-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.level-box {
  background: rgba(8, 12, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  padding: 5px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.level-box .lvl-title {
  font-size: 9px;
  color: #94a3b8;
}

.level-box .lvl-val {
  font-size: 10.5px;
  font-weight: 800;
  font-family: monospace;
  color: #ffffff;
}

.level-box.entry .lvl-val { color: #38bdf8; }
.level-box.tp .lvl-val { color: #34d399; }
.level-box.sl .lvl-val { color: #f87171; }

/* Historical Trades Log Table */
.sim-trades-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 220px;
}

.trades-card-header {
  padding: 8px 12px;
  background: rgba(20, 27, 45, 0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 800;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.trades-count-tag {
  font-size: 8.5px;
  font-weight: 700;
  color: #94a3b8;
}

.trades-table-scroll {
  overflow-y: auto;
  flex: 1;
}

.builder-trades-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5px;
  text-align: left;
}

.builder-trades-table th {
  background: rgba(15, 23, 42, 0.95);
  color: #94a3b8;
  font-weight: 700;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: sticky;
  top: 0;
  z-index: 2;
  font-size: 8.5px;
  text-transform: uppercase;
}

.builder-trades-table td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  color: #e2e8f0;
}

.builder-trades-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.trade-outcome-badge {
  font-size: 8px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
}
.trade-outcome-badge.win { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.trade-outcome-badge.loss { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.trade-outcome-badge.open { background: rgba(56, 189, 248, 0.2); color: #38bdf8; }

/* Studio Quick Templates Footer */
.builder-templates-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px 12px;
  flex-shrink: 0;
  overflow-x: auto;
}

.footer-templates-label {
  font-size: 10.5px;
  font-weight: 800;
  color: #d8b4fe;
  white-space: nowrap;
}

.footer-templates-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.template-chip-btn {
  background: rgba(20, 27, 45, 0.85);
  border: 1px solid rgba(168, 85, 247, 0.25);
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.template-chip-btn:hover {
  background: rgba(168, 85, 247, 0.2);
  border-color: #a855f7;
  color: #fff;
  transform: translateY(-1px);
}


/* ========================================================================= */
/* FEATURE #4: BACKTESTING & MONTE CARLO ENGINE (QUANT POWER) STYLING        */
/* ========================================================================= */

/* Header Trigger Button */
.btn-backtest {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(99, 102, 241, 0.2) 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  color: #38bdf8 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  position: relative;
  font-weight: 700;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.15);
}

.btn-backtest:hover {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.3) 0%, rgba(99, 102, 241, 0.35) 100%) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
  transform: translateY(-1px);
}

.backtest-icon-bolt {
  font-size: 13px;
  filter: drop-shadow(0 0 4px #38bdf8);
  animation: pulse-bolt 2s infinite ease-in-out;
}

@keyframes pulse-bolt {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); filter: drop-shadow(0 0 8px #38bdf8); }
}

.badge-quant-power {
  background: linear-gradient(135deg, #0284c7 0%, #4f46e5 100%);
  color: #ffffff;
  font-size: 8px;
  font-weight: 900;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  box-shadow: 0 1px 4px rgba(2, 132, 199, 0.4);
}

.badge-prop-firm {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: #ffffff;
  font-size: 8px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  box-shadow: 0 1px 4px rgba(16, 185, 129, 0.4);
}

/* Modal Backtest Dialog & Layout - Institutional Fixed Overlay */
.modal-backtest-engine,
#modal-backtest-engine {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(3, 7, 18, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 100040 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-backtest-engine.active,
#modal-backtest-engine.active {
  display: flex !important;
}

.modal-backtest-dialog {
  max-width: 1480px;
  width: 96vw;
  height: 92vh;
  margin: auto;
  display: flex;
  flex-direction: column;
}

.modal-backtest-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #080d19;
  border: 1px solid rgba(56, 189, 248, 0.3);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 45px rgba(14, 165, 233, 0.2);
  border-radius: 14px;
  overflow: hidden;
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Studio Header */
.backtest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: linear-gradient(180deg, #0f172a 0%, #0a1120 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.header-left-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.backtest-logo-badge {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(99, 102, 241, 0.3) 100%);
  border: 1px solid rgba(56, 189, 248, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
}

.backtest-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.backtest-title-row h2 {
  font-size: 15.5px;
  font-weight: 800;
  color: #f8fafc;
  margin: 0;
  letter-spacing: -0.2px;
}

.backtest-header-subtitle {
  font-size: 10.5px;
  color: #94a3b8;
  margin: 2px 0 0 0;
  line-height: 1.4;
}

/* Top Control Bar */
.backtest-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: rgba(15, 23, 42, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  gap: 16px;
  flex-shrink: 0;
}

.strat-picker-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.strat-picker-group .control-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  color: #cbd5e1;
  white-space: nowrap;
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  user-select: none;
}

.control-label-icon, .param-label-icon {
  font-size: 13px;
  filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.35));
}

.quant-select-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.quant-input-select {
  width: 100%;
  height: 38px;
  background-color: #0b1328;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 13px 13px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding: 0 14px 0 34px;
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.05);
}

.quant-input-select:hover {
  border-color: rgba(56, 189, 248, 0.6);
  background-color: #0e1935;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}

.quant-input-select:focus {
  border-color: #38bdf8;
  background-color: #101c3d;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.35);
}

.quant-input-select optgroup {
  background: #0b1328;
  color: #38bdf8;
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 800;
  padding: 6px 10px;
}

.quant-input-select option,
.param-select option,
.matrix-select option {
  background: #090e1d;
  color: #f1f5f9;
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  padding: 8px 12px;
}

/* Scope Tabs: Single Run vs Matrix Champion */
.backtest-scope-tabs {
  display: flex;
  gap: 6px;
  background: rgba(10, 15, 28, 0.85);
  padding: 4px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.scope-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.scope-tab:hover {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.04);
}

.scope-tab.active {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.25) 0%, rgba(99, 102, 241, 0.35) 100%);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 14px rgba(14, 165, 233, 0.3);
  font-weight: 800;
}

/* Parameters Toolbar */
.backtest-params-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: rgba(12, 19, 36, 0.65);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  gap: 16px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.params-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.param-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.param-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  user-select: none;
}

.param-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.param-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 33px;
  background-color: #0c1427;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 9px center;
  background-size: 12px 12px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #f1f5f9;
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  padding: 0 10px 0 28px;
  border-radius: 7px;
  outline: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.param-select:hover {
  border-color: rgba(56, 189, 248, 0.5);
  background-color: #0f1a34;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.15);
}

.param-select:focus {
  border-color: #38bdf8;
  background-color: #101c38;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
}

/* Capital Input with Currency Addon */
.param-input-addon-group {
  display: inline-flex;
  align-items: stretch;
  background: #0c1427;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 7px;
  overflow: hidden;
  direction: ltr;
  height: 33px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.param-input-addon-group:hover {
  border-color: rgba(56, 189, 248, 0.5);
}

.param-input-addon-group:focus-within {
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

.param-currency-addon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 13px;
  border-right: 1px solid rgba(56, 189, 248, 0.2);
  user-select: none;
}

.param-input {
  background: transparent;
  border: none;
  color: #38bdf8;
  font-size: 12px;
  font-weight: 700;
  padding: 0 10px;
  outline: none;
  font-family: 'JetBrains Mono', monospace;
  width: 85px;
  text-align: left;
}

/* Monte Carlo Toggle Switch */
.param-toggle-item {
  margin-right: 4px;
}

.param-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 4px 10px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.param-toggle-label:hover {
  background: rgba(14, 165, 233, 0.15);
  border-color: rgba(56, 189, 248, 0.45);
}

.param-toggle-label input {
  display: none;
}

.toggle-slider {
  width: 30px;
  height: 17px;
  background: #334155;
  border-radius: 20px;
  position: relative;
  transition: background 0.25s, box-shadow 0.25s;
  flex-shrink: 0;
}

.toggle-slider:before {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  left: 2px;
  top: 2px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.param-toggle-label input:checked + .toggle-slider {
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.param-toggle-label input:checked + .toggle-slider:before {
  transform: translateX(13px);
}

.toggle-text {
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #38bdf8;
  white-space: nowrap;
}

/* Action Buttons */
.params-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-quant-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  height: 34px;
  border-radius: 7px;
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  outline: none;
}

.btn-quant-run {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  border: 1px solid #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(2, 132, 199, 0.4);
}

.btn-quant-run:hover {
  background: linear-gradient(135deg, #0369a1 0%, #1d4ed8 100%);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.6);
  transform: translateY(-1px);
}

.btn-quant-run:active {
  transform: translateY(0);
}

.btn-quant-matrix {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.2) 0%, rgba(245, 158, 11, 0.3) 100%);
  border: 1px solid rgba(245, 158, 11, 0.6);
  color: #fbbf24;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

.btn-quant-matrix:hover {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.35) 0%, rgba(245, 158, 11, 0.5) 100%);
  border-color: #fbbf24;
  color: #ffffff;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.45);
  transform: translateY(-1px);
}

.btn-quant-matrix:active {
  transform: translateY(0);
}

.btn-quant-excel {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  border: 1px solid #10b981;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}

.btn-quant-excel:hover {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.55);
  transform: translateY(-1px);
}

.btn-quant-excel:active {
  transform: translateY(0);
}

/* ========================================================================= */
/* CHAMPION SPOTLIGHT CARD                                                   */
/* ========================================================================= */
.champion-spotlight-card {
  margin: 10px 20px 0 20px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(15, 23, 42, 0.95) 50%, rgba(16, 185, 129, 0.08) 100%);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 10px;
  padding: 10px 16px;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.12), inset 0 0 15px rgba(245, 158, 11, 0.04);
  position: relative;
  flex-shrink: 0;
}

.champion-badge-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #ffffff;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35);
}

.trophy-emoji {
  font-size: 12px;
  animation: bounce-trophy 2s infinite;
}

@keyframes bounce-trophy {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.champion-content-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.champion-asset-box {
  flex: 1;
  min-width: 220px;
}

.champ-label {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
}

.champ-pair {
  font-size: 18px;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: -0.3px;
  font-family: 'JetBrains Mono', monospace;
  margin: 1px 0;
}

.champ-desc {
  font-size: 9.5px;
  color: #64748b;
}

.champion-metrics-pills {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.champ-pill {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 5px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 85px;
}

.cp-lbl {
  font-size: 8.5px;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;
}

.cp-val {
  font-size: 13.5px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  margin-top: 2px;
  color: #f8fafc;
}

.cp-val.score-highlight {
  color: #38bdf8;
  font-weight: 900;
}

.cp-val.win {
  color: #34d399;
}

.cp-val.rr {
  color: #38bdf8;
}

.cp-val.ret {
  color: #34d399;
}

.cp-val.pf {
  color: #a78bfa;
}

.cp-val.dd {
  color: #f87171;
}

/* Studio Body Viewport */
.backtest-body-viewport {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.backtest-body-viewport::-webkit-scrollbar {
  width: 6px;
}

.backtest-body-viewport::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
}

.backtest-body-viewport::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.3);
  border-radius: 3px;
}

/* Quantitative Scorecard Grid */
.quant-scorecard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.quant-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.quant-card:hover {
  border-color: rgba(56, 189, 248, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.qc-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
}

.qc-icon {
  font-size: 11px;
}

.qc-title {
  font-size: 9.5px;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;
}

.qc-main-value {
  font-size: 18px;
  font-weight: 900;
  color: #f8fafc;
  font-family: 'JetBrains Mono', monospace;
  margin: 2px 0;
  letter-spacing: -0.5px;
}

.qc-main-value.positive {
  color: #34d399;
}

.qc-main-value.negative {
  color: #f87171;
}

.qc-main-value.highlight-cyan {
  color: #38bdf8;
}

.qc-sub-text {
  font-size: 8.5px;
  color: #64748b;
  line-height: 1.3;
}

.qc-progress-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}

.qc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #06b6d4 100%);
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* Monte Carlo Visualizer Card */
.monte-carlo-visualizer-card {
  background: #070c17;
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
}

.mc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.mc-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mc-cube-icon {
  font-size: 22px;
}

.mc-title {
  font-size: 13px;
  font-weight: 800;
  color: #f8fafc;
}

.mc-subtitle {
  font-size: 9.5px;
  color: #64748b;
  margin-top: 1px;
}

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

.mc-stat-pill {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.mc-p-label {
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
}

.mc-p-val {
  font-size: 10.5px;
  font-weight: 800;
  color: #38bdf8;
  font-family: 'JetBrains Mono', monospace;
}

.mc-stat-pill.success-pill .mc-p-val {
  color: #34d399;
}

.mc-stat-pill.warning-pill .mc-p-val {
  color: #fb7185;
}

.mc-stat-pill.gold-pill .mc-p-val {
  color: #fbbf24;
}

.mc-canvas-container {
  width: 100%;
  height: 230px;
  background: #040811;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}

#backtest-mc-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.mc-legend-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.mc-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  color: #94a3b8;
  font-weight: 600;
}

.legend-color {
  width: 12px;
  height: 4px;
  border-radius: 2px;
}

.legend-color.p95 { background: #10b981; }
.legend-color.p75 { background: #38bdf8; }
.legend-color.p50 { background: #f59e0b; }
.legend-color.p25 { background: #ec4899; }
.legend-color.p5  { background: #ef4444; }

/* Trades Log & Matrix Tables */
.backtest-trades-log-card, .matrix-table-scroll {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  overflow: hidden;
}

.bt-trades-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(10, 16, 30, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.bt-trades-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  color: #cbd5e1;
}

.bt-trades-count {
  font-size: 9.5px;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  padding: 1px 7px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}

.bt-trades-filters {
  display: flex;
  align-items: center;
  gap: 5px;
}

.bt-filter-caption {
  font-size: 9.5px;
  color: #64748b;
}

.bt-filter-btn {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #94a3b8;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.bt-filter-btn.active {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #ffffff;
}

.bt-trades-table-scroll, .matrix-table-scroll {
  max-height: 280px;
  overflow-y: auto;
}

.bt-trades-table, .quant-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  text-align: right;
}

.bt-trades-table th, .quant-matrix-table th {
  background: #090e1c;
  color: #94a3b8;
  font-weight: 800;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

.bt-trades-table td, .quant-matrix-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  color: #e2e8f0;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}

.bt-trades-table tr:hover, .quant-matrix-table tr:hover {
  background: rgba(56, 189, 248, 0.05);
}

.bt-empty-row {
  text-align: center !important;
  color: #64748b !important;
  padding: 30px !important;
  font-family: inherit !important;
}

/* Outcome Pills */
.bt-badge-win {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 800;
}

.bt-badge-loss {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 800;
}

/* Matrix Table Specifics */
.matrix-overview-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(15, 23, 42, 0.8) 100%);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 10px;
}

.mob-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mob-icon {
  font-size: 22px;
}

.mob-title {
  font-size: 13px;
  font-weight: 800;
  color: #f8fafc;
}

.mob-subtitle {
  font-size: 9.5px;
  color: #94a3b8;
  margin-top: 2px;
}

.mob-tested-badge {
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
}

.matrix-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 8px 14px;
  border-radius: 8px;
  flex-wrap: wrap;
}

.matrix-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mf-label {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  white-space: nowrap;
}

.matrix-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #0c1427;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 9px center;
  background-size: 11px 11px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #f8fafc;
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px 5px 28px;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.matrix-select:focus {
  border-color: #38bdf8;
  background-color: #101c38;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.matrix-select:hover {
  border-color: rgba(56, 189, 248, 0.5);
  background-color: #0e172e;
}

.matrix-row-champion {
  background: rgba(245, 158, 11, 0.12) !important;
  border-left: 3px solid #f59e0b;
}

.matrix-badge-champ {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #ffffff;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 900;
  font-size: 8.5px;
}

.matrix-badge-top {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 800;
}

.matrix-badge-profitable {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 800;
}

.matrix-badge-sub {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
}

.btn-matrix-apply {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-matrix-apply:hover {
  background: #0ea5e9;
  color: #ffffff;
}

/* Studio Footer */
.backtest-studio-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  background: #080d1a;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.footer-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-dot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulse-dot 1.8s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.status-msg {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
}

.footer-right-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-strat-tag {
  font-size: 10px;
  color: #cbd5e1;
  font-weight: 700;
}

.btn-footer-download-excel {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-footer-download-excel:hover {
  background: #10b981;
  color: #ffffff;
}


/* ========================================================================= */
/* DIAMOND SUBSCRIPTION TIER & HEADER LIVE TAG STYLING                       */
/* ========================================================================= */

.whale-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #f87171;
  font-size: 8px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.25);
  margin-left: 2px;
}

.pricing-grid-4 {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}

@media (max-width: 1100px) {
  .pricing-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .pricing-grid-4 {
    grid-template-columns: 1fr !important;
  }
}

.pricing-card.diamond {
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.12) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 0 25px rgba(6, 182, 212, 0.22), inset 0 0 15px rgba(56, 189, 248, 0.08) !important;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.pricing-card.diamond:hover {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 35px rgba(56, 189, 248, 0.35) !important;
  transform: translateY(-2px);
}

.pricing-card.diamond .pricing-tier {
  color: #38bdf8 !important;
  font-weight: 900;
}

.pricing-card.diamond .pricing-price {
  color: #f8fafc !important;
}

.badge-diamond {
  background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  font-weight: 800;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
}

/* ====================================================
   1. TradingView-Style Price Scale Countdown Badge
   ==================================================== */
/* Directly on the Right Price Axis at Live Price Line */
.tv-price-scale-countdown-badge {
  position: absolute;
  right: 0;
  width: auto;
  min-width: 66px;
  max-width: max-content;
  background-color: #10b981; /* Restored vibrant market color (Emerald Green for Bullish) */
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5px 6px;
  box-sizing: border-box;
  z-index: 25;
  pointer-events: none;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px 0 0 3px;
  transform: translateY(-50%);
  user-select: none;
  box-shadow: -3px 0 12px rgba(16, 185, 129, 0.45);
  line-height: 1.15;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  overflow: visible;
}

.tv-price-scale-countdown-badge.is-bearish {
  background-color: #ef4444; /* Restored vibrant market color (Coral Red for Bearish) */
  box-shadow: -3px 0 12px rgba(239, 68, 68, 0.45);
}

.tv-scale-price-val {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.2px;
  text-align: center;
  white-space: nowrap;
}

.tv-scale-countdown-val {
  font-family: 'JetBrains Mono', 'Roboto Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.3px;
  text-align: center;
  margin-top: 1.5px;
  white-space: nowrap;
}

/* ====================================================
   2. Institutional Intelligence Export Hub Modal
   ==================================================== */
.modal-export-container {
  background: linear-gradient(180deg, #0e1628 0%, #080d18 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(56, 189, 248, 0.15) !important;
  direction: ltr !important;
  text-align: left !important;
}

.export-hub-body {
  padding: 16px 20px 22px 20px;
}

.export-hub-meta-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
}

.export-meta-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.export-meta-col .meta-label {
  font-size: 10px;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.export-meta-col .meta-val {
  font-size: 13px;
  font-weight: 800;
  color: #e2e8f0;
}

.export-meta-col .meta-val.highlight {
  color: #38bdf8;
}

.export-meta-col .meta-val.tf-val {
  color: #f59e0b;
}

.export-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.export-card {
  display: flex;
  flex-direction: column;
  background: rgba(18, 26, 44, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  padding: 14px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.export-card:hover {
  background: rgba(22, 33, 56, 0.85);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.export-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.export-card-icon {
  font-size: 24px;
  line-height: 1;
}

.export-card-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
}

.export-card-badge {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #10b981;
  margin-top: 3px;
  letter-spacing: 0.5px;
}

.export-card-badge.purple {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.4);
  color: #c084fc;
}

.export-card-desc {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 12px;
  flex: 1;
}

.export-card-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #64748b;
  margin-bottom: 12px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.pdf-tf-status-box {
  margin-bottom: 12px;
  font-size: 10.5px;
  border-radius: 6px;
  padding: 8px 10px;
  line-height: 1.4;
}

.pdf-tf-status-box.valid {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.pdf-tf-status-box.invalid {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.btn-export-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 9px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-do-export-excel {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.btn-do-export-excel:hover {
  background: linear-gradient(135deg, #047857 0%, #059669 100%);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.5);
  transform: translateY(-1px);
}

.btn-do-export-pdf {
  background: linear-gradient(135deg, #0284c7 0%, #3b82f6 50%, #8b5cf6 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.btn-do-export-pdf:hover {
  box-shadow: 0 6px 18px rgba(139, 92, 246, 0.5);
  transform: translateY(-1px);
}

.btn-do-export-pdf.restricted {
  background: rgba(71, 85, 105, 0.5);
  color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-quick-switch-tf {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid #f59e0b;
  color: #fbbf24;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 6px;
  display: inline-block;
  transition: all 0.2s;
}

.btn-quick-switch-tf:hover {
  background: #f59e0b;
  color: #000;
}

/* ====================================================
   3. Institutional Full-Width Platform Footer
   ==================================================== */
.app-institutional-footer {
  background: linear-gradient(180deg, #0a1122 0%, #050812 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  margin-top: 12px;
  width: 100%;
  position: relative;
  z-index: 10;
}

.footer-top-accent-line {
  height: 2px;
  background: linear-gradient(90deg, #06b6d4 0%, #3b82f6 35%, #8b5cf6 70%, #f59e0b 100%);
  width: 100%;
}

.footer-inner-container {
  max-width: 1560px;
  margin: 0 auto;
  padding: 30px 24px 24px 24px;
  display: grid;
  grid-template-columns: 1.35fr 1.15fr 1.15fr 1.25fr;
  gap: 26px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-brand-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-brand-title {
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-badge-pro {
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.footer-brand-sub {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.footer-desc {
  font-size: 11.5px;
  line-height: 1.6;
  color: #94a3b8;
}

.footer-dev-credit {
  font-size: 11.5px;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-dev-credit strong {
  color: #38bdf8;
}

.footer-system-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #10b981;
  font-family: 'JetBrains Mono', monospace;
}

.footer-col-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #ffffff;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
}

.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.footer-links-list li a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 11.5px;
  transition: all 0.2s;
  display: inline-block;
}

.footer-links-list li a:hover {
  color: #38bdf8;
  transform: translateX(-3px);
}

.footer-contact-cards {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-contact-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 12px;
  transition: all 0.2s;
}

.footer-contact-card:hover {
  background: rgba(20, 30, 52, 0.8);
  border-color: rgba(56, 189, 248, 0.3);
}

.contact-card-icon {
  font-size: 18px;
}

.contact-card-info {
  flex: 1;
}

.contact-lbl {
  font-size: 10px;
  color: #64748b;
}

.contact-val {
  font-size: 12px;
  font-weight: 700;
  color: #38bdf8;
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
}

.contact-val:hover {
  text-decoration: underline;
}

.btn-copy-email {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 3px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.btn-copy-email:hover {
  opacity: 1;
}

.tg-live-pill {
  font-size: 9.5px;
  font-weight: 800;
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 2px 6px;
  border-radius: 4px;
}

.footer-sla-badge {
  font-size: 11px;
  color: #fbbf24;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  padding: 6px 10px;
  border-radius: 6px;
}

.footer-vip-badge {
  font-size: 11px;
  color: #38bdf8;
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.2);
  padding: 6px 10px;
  border-radius: 6px;
}

.footer-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.faq-item {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.2s;
}

.faq-item[open] {
  border-color: rgba(56, 189, 248, 0.3);
  background: rgba(20, 30, 52, 0.7);
}

.faq-summary {
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: #e2e8f0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-summary::after {
  content: "+";
  font-size: 14px;
  color: #38bdf8;
  font-weight: bold;
}

.faq-item[open] .faq-summary::after {
  content: "−";
}

.faq-content {
  padding: 0 12px 10px 12px;
  font-size: 11px;
  line-height: 1.55;
  color: #94a3b8;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  padding-top: 8px;
}

.footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 14px 24px;
  max-width: 1560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #64748b;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-bottom-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-version-tag {
  color: #cbd5e1;
}

.footer-dot-sep {
  color: #334155;
}

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

@media (max-width: 768px) {
  .footer-inner-container {
    grid-template-columns: 1fr;
  }
  .export-options-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================== */
/* 11. INSTITUTIONAL RESPONSIVE ARCHITECTURE & MODAL COMPONENT ENGINE         */
/* ========================================================================== */

/* --------------------------------------------------------------------------
   A. GLOBAL HEADER & ACTION HUB RESPONSIVENESS
   -------------------------------------------------------------------------- */
/* Laptops & Compact Desktops (1025px - 1380px) */
@media (max-width: 1380px) and (min-width: 1025px) {
  .top-header {
    padding: 0 12px;
    gap: 8px;
  }
  .header-actions {
    gap: 4px;
  }
  .btn-action {
    padding: 0 7px;
    font-size: 10.5px;
    height: 34px;
    gap: 3px;
  }
  .btn-action span {
    letter-spacing: normal;
  }
  .brand-title {
    font-size: 15px;
  }
  .brand-subtitle {
    font-size: 9.5px;
  }
  .dev-badge {
    font-size: 8.5px;
  }
}

/* Tablets (769px - 1024px) */
@media (max-width: 1024px) {
  .top-header {
    height: auto !important;
    min-height: 60px;
    padding: 10px 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .brand-section {
    order: 1;
    flex-shrink: 0;
  }
  .header-actions {
    order: 2;
    margin-left: auto;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    padding-bottom: 2px;
    gap: 6px;
  }
  .header-actions::-webkit-scrollbar {
    display: none;
  }
  .header-actions .btn-action {
    flex: 0 0 auto;
    padding: 0 9px;
    height: 35px;
    font-size: 11px;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   Smartphones & Mobile (<= 768px) Master Architecture
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* 1. Header & Brand Section Centering (Side-by-side centered in middle) */
  .top-header {
    height: auto !important;
    min-height: auto !important;
    padding: 12px 14px 10px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .brand-section {
    order: 1 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: left !important;
    gap: 12px !important;
    margin: 0 auto !important;
    padding: 0 0 2px 0 !important;
  }

  .brand-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .brand-icon .brand-logo-img {
    width: 38px !important;
    height: 34px !important;
    object-fit: contain !important;
  }

  .brand-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .brand-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
  }

  .brand-subtitle {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--accent-cyan) !important;
    line-height: 1.25 !important;
  }

  .dev-badge {
    font-size: 8.5px !important;
    color: var(--text-muted) !important;
    line-height: 1.25 !important;
  }

  /* 2. All Header Action Buttons Fully Visible in Adaptive Grid */
  .header-actions {
    order: 2 !important;
    width: 100% !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .header-actions .btn-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 0 8px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    white-space: nowrap !important;
    gap: 5px !important;
  }

  .header-actions .btn-action .whale-live-pill,
  .header-actions .btn-action .builder-custom-tag,
  .header-actions .btn-action .badge-quant-power {
    font-size: 7.5px !important;
    padding: 1px 4px !important;
    letter-spacing: 0.3px !important;
    margin-left: 2px !important;
  }

  /* Full width CTA on single odd buttons */
  .header-actions .btn-apps-launcher {
    grid-column: span 2 !important;
    height: 40px !important;
    font-size: 12.5px !important;
    justify-content: center !important;
  }
  .header-actions .btn-auth,
  .header-actions .btn-admin-unlocked {
    grid-column: span 2 !important;
  }

  /* 3. Main Chart Card & Workspace Mobile Dimensions */
  .chart-card {
    height: auto !important;
    min-height: 520px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .chart-workspace {
    flex: 1 1 auto !important;
    min-height: 440px !important;
    height: 440px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    position: relative !important;
  }

  .chart-canvas-wrapper {
    flex: 1 1 auto !important;
    min-height: 440px !important;
    height: 100% !important;
    align-self: stretch !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .chart-canvas-wrapper .chart-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  .tv-drawing-toolbar {
    height: 100% !important;
    max-height: 100% !important;
    align-self: stretch !important;
    overflow-y: auto !important;
  }

  /* 4. Chart Header: Multi-Row Zero-Collision Institutional Layout */
  .chart-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: auto !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .chart-title-area {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  .coin-selector-container {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .custom-coin-trigger {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 35px !important;
  }

  .chart-ticker-strip {
    order: 2 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 10px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  .chart-ticker-price-group {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .chart-ticker-price-val {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
  }

  .chart-change-pill {
    font-size: 10.5px !important;
    padding: 2px 6px !important;
  }

  .chart-ticker-stat-sec {
    display: none !important;
  }

  .chart-actions-area {
    order: 3 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  .btn-chart-tool {
    height: 30px !important;
    font-size: 10.5px !important;
    padding: 0 8px !important;
    flex: 1 !important;
    justify-content: center !important;
  }

  .tv-engine-tag {
    font-size: 9px !important;
    color: #64748b !important;
    white-space: nowrap !important;
    padding: 0 4px !important;
    margin-left: auto !important;
  }

  /* 5. Compact Whale Global Alert Banner (Mobile Adaptive) */
  .whale-global-alert-banner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 6px 10px !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .whale-alert-left-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .whale-alert-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  .whale-alert-siren {
    font-size: 13px !important;
  }

  .whale-alert-badge {
    font-size: 8.5px !important;
    padding: 2px 6px !important;
  }

  .whale-alert-text {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
    direction: ltr !important;
    display: block !important;
    margin: 0 !important;
    white-space: normal !important;
  }

  .whale-alert-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    gap: 6px !important;
  }

  .btn-view-whale-radar {
    font-size: 10px !important;
    padding: 3px 8px !important;
    height: 24px !important;
  }

  .btn-dismiss-whale-alert {
    width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
  }

  /* 6. Parameter Inspector Card Mobile Adaptation */
  .inspector-card {
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .inspector-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .inspector-title-group {
    width: 100% !important;
  }

  .inspector-title {
    font-size: 13.5px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .inspector-badges {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .inspector-meta-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 10px !important;
  }

  .bilingual-wrapper {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* Medium Tablets & Phablets (541px to 900px) */
@media (min-width: 541px) and (max-width: 900px) {
  .header-actions {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .header-actions .btn-auth,
  .header-actions .btn-admin-unlocked {
    grid-column: span 1 !important;
  }
}

/* Small Smartphone (<= 480px) Fine-Tuning */
@media (max-width: 480px) {
  .top-header {
    padding: 10px 10px 8px 10px !important;
    gap: 8px !important;
  }
  .brand-logo-img {
    width: 34px !important;
    height: 30px !important;
  }
  .brand-title {
    font-size: 15px !important;
  }
  .brand-subtitle {
    font-size: 9.5px !important;
  }
  .dev-badge {
    font-size: 8px !important;
  }
  .header-actions {
    gap: 5px !important;
  }
  .header-actions .btn-action {
    height: 36px !important;
    font-size: 10.5px !important;
    padding: 0 6px !important;
    gap: 4px !important;
  }
}

/* --------------------------------------------------------------------------
   B. GLOBAL MODAL CONTAINER & OVERLAY ARCHITECTURE
   -------------------------------------------------------------------------- */
.modal-overlay {
  padding: 16px;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .modal-overlay {
    padding: 6px !important;
  }
}

.modal-container {
  box-sizing: border-box;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .modal-container {
    width: 98vw !important;
    max-width: 98vw !important;
    max-height: 94vh !important;
    margin: auto !important;
    border-radius: 10px !important;
  }
  .modal-header {
    padding: 10px 14px !important;
    gap: 8px;
  }
  .modal-title {
    font-size: 13.5px !important;
    line-height: 1.3;
  }
  .modal-body {
    padding: 12px 14px !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* --------------------------------------------------------------------------
   1. ADMIN / USER PROFILE MODAL (#modal-profile)
   -------------------------------------------------------------------------- */
.modal-profile-container {
  max-width: 500px;
  width: 95vw;
}

@media (max-width: 480px) {
  .profile-card-header {
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 10px;
  }
  #prof-badge-plan {
    align-self: flex-start;
  }
  .profile-avatar {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
}

@media (max-width: 420px) {
  .password-display-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .btn-toggle-pwd {
    width: 100%;
    text-align: center;
    padding: 6px 10px;
  }
  .profile-meta-info-box {
    flex-direction: column;
    gap: 4px;
  }
}

/* --------------------------------------------------------------------------
   2. MASTER ADMIN CONTROL PANEL (#modal-admin)
   -------------------------------------------------------------------------- */
.modal-admin-container {
  max-width: 1360px !important;
  width: 96vw !important;
  max-height: 94vh !important;
  background: linear-gradient(180deg, rgba(13, 19, 36, 0.98) 0%, rgba(8, 12, 24, 0.99) 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(56, 189, 248, 0.1) !important;
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.admin-stat-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(20, 30, 55, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 72px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.admin-stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.admin-stat-card.card-total { border-top: 2px solid #3b82f6; }
.admin-stat-card.card-active { border-top: 2px solid #10b981; }
.admin-stat-card.card-basic { border-top: 2px solid #94a3b8; }
.admin-stat-card.card-plus { border-top: 2px solid #38bdf8; }
.admin-stat-card.card-pro { border-top: 2px solid #a855f7; }
.admin-stat-card.card-diamond {
  border-top: 2px solid #06b6d4;
  border-color: rgba(6, 182, 212, 0.35);
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.15);
}

.stat-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.stat-card-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
  white-space: nowrap !important;
}

.stat-card-icon {
  font-size: 13px;
  line-height: 1;
}

.stat-card-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1;
}

.stat-card-val.val-active {
  color: #10b981;
  text-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.stat-card-val.val-basic {
  color: #94a3b8;
}

.stat-card-val.val-plus {
  color: #38bdf8;
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

.stat-card-val.val-pro {
  color: #c084fc;
  text-shadow: 0 0 12px rgba(192, 132, 252, 0.4);
}

.stat-card-val.val-diamond {
  color: #06b6d4;
  text-shadow: 0 0 15px rgba(6, 182, 212, 0.5);
}

@media (max-width: 1100px) {
  .admin-stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

@media (max-width: 640px) {
  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

@media (max-width: 380px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.admin-table-subhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}

@media (max-width: 640px) {
  .admin-table-subhead {
    flex-direction: column;
    align-items: stretch;
  }
  #btn-admin-refresh {
    align-self: flex-start;
  }
}

.admin-table-scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  background: rgba(11, 17, 33, 0.75) !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
}

.admin-table {
  width: 100% !important;
  min-width: 1100px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 12px;
  text-align: left;
}

.admin-table th {
  background: rgba(15, 23, 42, 0.95) !important;
  color: #94a3b8 !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

.admin-table td {
  padding: 11px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  color: #cbd5e1 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  transition: background 0.15s ease;
}

.admin-table tbody tr:hover td {
  background: rgba(30, 41, 59, 0.45) !important;
}

.col-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #64748b !important;
}

.admin-user-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap !important;
}

.admin-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(99, 102, 241, 0.25));
  border: 1px solid rgba(56, 189, 248, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  color: #38bdf8;
  text-transform: uppercase;
  flex-shrink: 0;
}

.admin-user-meta {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.admin-user-name {
  font-weight: 700;
  color: #f8fafc;
  font-size: 12.5px;
  line-height: 1.2;
}

.admin-user-sub {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 500;
  margin-top: 1px;
}

.col-email {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px !important;
  color: #cbd5e1 !important;
}

.admin-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap !important;
}

.admin-role-badge.role-admin {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.2);
}

.admin-role-badge.role-user {
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #94a3b8;
}

.admin-tier-select {
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #f8fafc !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 24px 4px 8px !important;
  cursor: pointer !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 7px center !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.admin-tier-select:hover,
.admin-tier-select:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25) !important;
}

.col-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px !important;
  font-weight: 600;
  white-space: nowrap !important;
}

.col-start-date {
  color: #94a3b8 !important;
}

.col-expiry-date.date-active {
  color: #38bdf8 !important;
  font-weight: 700;
}

.col-expiry-date.date-expired {
  color: #ef4444 !important;
  font-weight: 700;
}

.admin-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap !important;
}

.admin-status-pill.status-active {
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}

.admin-status-pill.status-lifetime {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(59, 130, 246, 0.18));
  border: 1px solid rgba(6, 182, 212, 0.5);
  color: #38bdf8;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
}

.admin-status-pill.status-expired {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #ef4444;
}

/* User Action Buttons Bar */
.admin-actions-bar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.admin-act-btn {
  font-family: inherit;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.admin-act-btn:active {
  transform: scale(0.95);
}

.admin-act-btn.act-plus30 {
  background: rgba(2, 132, 199, 0.15) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  color: #38bdf8 !important;
}
.admin-act-btn.act-plus30:hover {
  background: #0284c7 !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.5) !important;
  border-color: #38bdf8 !important;
}

.admin-act-btn.act-plus90 {
  background: rgba(139, 92, 246, 0.15) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  color: #c084fc !important;
}
.admin-act-btn.act-plus90:hover {
  background: #8b5cf6 !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.5) !important;
  border-color: #c084fc !important;
}

.admin-act-btn.act-minus30 {
  background: rgba(244, 63, 94, 0.12) !important;
  border: 1px solid rgba(244, 63, 94, 0.35) !important;
  color: #fb7185 !important;
}
.admin-act-btn.act-minus30:hover {
  background: #e11d48 !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(225, 29, 72, 0.5) !important;
  border-color: #f43f5e !important;
}

.admin-act-btn.act-reset {
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  color: #fbbf24 !important;
}
.admin-act-btn.act-reset:hover {
  background: #d97706 !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(217, 119, 6, 0.5) !important;
  border-color: #f59e0b !important;
}

.admin-act-btn.act-delete {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  color: #ef4444 !important;
}
.admin-act-btn.act-delete:hover {
  background: #dc2626 !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.5) !important;
  border-color: #ef4444 !important;
}


/* --------------------------------------------------------------------------
   3. INSTITUTIONAL EXPORT HUB MODAL (#modal-export-hub)
   -------------------------------------------------------------------------- */
.modal-export-container {
  max-width: 680px;
  width: 95vw;
}

@media (max-width: 580px) {
  .export-hub-meta-card {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px;
  }
  .export-card-header {
    gap: 8px;
  }
  .export-card-title {
    font-size: 12px;
  }
  .btn-export-action {
    width: 100%;
    min-height: 42px;
    padding: 8px 12px;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   4. SUBSCRIPTIONS MODAL (#modal-pricing)
   -------------------------------------------------------------------------- */
.modal-pricing-container {
  max-width: 1380px !important;
  width: 96vw !important;
  max-height: 94vh;
}

.pricing-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}

@media (max-width: 1200px) {
  .pricing-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

@media (max-width: 720px) {
  .pricing-grid-4 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .pricing-card {
    padding: 16px 12px !important;
  }
  .pricing-features {
    font-size: 11px !important;
    gap: 5px !important;
  }
  .btn-subscribe {
    min-height: 42px;
    font-size: 11px !important;
    white-space: nowrap !important;
    padding: 0 6px !important;
  }
}

/* --------------------------------------------------------------------------
   5. AI SIGNALS HUB & DOCK (#modal-signals, #signals-dock-card)
   -------------------------------------------------------------------------- */
.modal-signals-container {
  max-width: 1120px;
  width: 96vw;
  max-height: 92vh;
}

.signals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr));
  gap: 12px;
}

@media (max-width: 768px) {
  .signals-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 460px) {
  .signal-targets-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 6px;
  }
  .target-val {
    font-size: 10px;
  }
  .signal-card {
    padding: 10px 12px;
    gap: 8px;
  }
}

@media (max-width: 600px) {
  .signals-dock-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .signals-dock-meta {
    width: 100%;
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   6. INSTITUTIONAL LIQUIDATION HEATMAP (#modal-liquidation)
   -------------------------------------------------------------------------- */
.modal-liq-container {
  max-width: 1440px !important;
  width: 98vw !important;
  height: 94vh !important;
  max-height: 940px !important;
}

@media (max-width: 992px) {
  .modal-liq-container {
    width: 98vw !important;
    height: 95vh !important;
    max-height: none !important;
  }
  .heatmap-layout {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  #liq-heatmap-canvas {
    height: 280px !important;
  }
}

@media (max-width: 850px) {
  .liq-modal-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 14px !important;
  }
  .liq-header-right {
    justify-content: space-between !important;
    width: 100% !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  .liq-title {
    font-size: 13.5px !important;
  }
  .liq-subtitle {
    font-size: 10px !important;
  }
}

@media (max-width: 1150px) {
  .liq-hud-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 8px 12px !important;
  }
}

@media (max-width: 768px) {
  .liq-hud-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  .hud-val-lg {
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .liq-hud-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 800px) {
  .liq-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 8px 12px !important;
  }
  .liq-view-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    padding-bottom: 2px;
  }
  .liq-tier-filters {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   7. BACKTEST STUDIO & MONTE CARLO (#modal-backtest-engine)
   -------------------------------------------------------------------------- */
.modal-backtest-dialog {
  max-width: 1480px;
  width: 96vw;
  height: 92vh;
  margin: 4vh auto;
}

@media (max-width: 768px) {
  .modal-backtest-dialog {
    width: 98vw !important;
    height: 96vh !important;
    margin: 2vh auto !important;
  }
  .backtest-header {
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .backtest-title-row h2 {
    font-size: 13.5px;
  }
  .backtest-header-subtitle {
    font-size: 9.5px;
  }
  .champion-spotlight-card {
    margin: 8px 10px 0;
    padding: 8px 12px;
  }
  .champion-content-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .champion-metrics-pills {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 3px;
    gap: 6px;
  }
  .mc-canvas-container {
    height: 180px;
  }
  .backtest-studio-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px 12px;
  }
}

@media (max-width: 900px) {
  .backtest-controls-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px 12px;
  }
  .strat-picker-group {
    width: 100%;
  }
  .backtest-scope-tabs {
    width: 100%;
    justify-content: center;
  }
  .backtest-params-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 8px 12px;
  }
  .params-left {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
  }
  .params-right {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 6px;
  }
}

@media (max-width: 550px) {
  .quant-scorecard-grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 6px;
  }
  .qc-main-value {
    font-size: 15px;
  }
}

/* --------------------------------------------------------------------------
   8. NO-CODE STRATEGY BUILDER STUDIO (#modal-strategy-builder)
   -------------------------------------------------------------------------- */
.modal-builder-container {
  max-width: 1400px;
  width: 96vw;
  height: 92vh;
}

@media (max-width: 768px) {
  .modal-builder-container {
    width: 98vw !important;
    height: 96vh !important;
  }
  .builder-modal-header {
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .builder-modal-title {
    font-size: 13.5px;
  }
}

@media (max-width: 1024px) {
  .builder-studio-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  .builder-col-palette {
    max-height: 380px;
    overflow-y: auto;
  }
  .builder-col-canvas {
    min-height: 420px;
  }
  .builder-col-preview {
    max-height: 420px;
    overflow-y: auto;
  }
}

/* --------------------------------------------------------------------------
   9. ON-CHAIN WHALE RADAR (#modal-whale-radar)
   -------------------------------------------------------------------------- */
.modal-whale-container {
  max-width: 1240px;
  width: 95vw;
  max-height: 92vh;
}

@media (max-width: 768px) {
  .modal-whale-container {
    width: 98vw !important;
    height: 96vh !important;
    max-height: 96vh !important;
  }
  .whale-canvas-container {
    height: 290px !important;
  }
}

@media (max-width: 850px) {
  .whale-modal-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 14px;
  }
  .whale-header-right {
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .whale-red-detail-row {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 6px;
  }
  .whale-view-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .whale-tab-group {
    overflow-x: auto;
    width: 100%;
  }
}

/* ==========================================================================
   ARCHITECTURE III: PALANTIR & RAYCAST MODULAR APP LAUNCHER (ALL APPS & LABS)
   ========================================================================== */

/* --- Top Header Triggers --- */
.btn-apps-launcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.16), rgba(99, 102, 241, 0.18)) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  cursor: pointer;
  position: relative;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-apps-launcher:hover {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.28), rgba(99, 102, 241, 0.3)) !important;
  border-color: rgba(56, 189, 248, 0.8) !important;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-1px);
}

.apps-launcher-grid-icon {
  display: grid;
  grid-template-columns: repeat(3, 3px);
  grid-template-rows: repeat(3, 3px);
  gap: 2.5px;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.apps-launcher-grid-icon span {
  width: 3px;
  height: 3px;
  background: #38bdf8;
  border-radius: 1px;
  box-shadow: 0 0 4px #38bdf8;
  transition: all 0.2s ease;
}

.btn-apps-launcher:hover .apps-launcher-grid-icon span {
  background: #ffffff;
  box-shadow: 0 0 6px #38bdf8;
  transform: scale(1.15);
}

.apps-launcher-label {
  font-size: 12px;
  letter-spacing: 0.3px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.apps-launcher-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 182, 212, 0.2);
  border: 1px solid rgba(6, 182, 212, 0.55);
  color: #22d3ee;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  padding: 1px 6px;
  min-width: 18px;
  font-family: 'JetBrains Mono', monospace;
}

.header-cmd-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  padding: 0 10px;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.header-cmd-search:hover {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(56, 189, 248, 0.5);
  color: #e2e8f0;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.15);
}

.header-cmd-search svg {
  color: #38bdf8;
  flex-shrink: 0;
}

.cmd-search-placeholder {
  font-size: 11.5px;
  font-family: 'Vazirmatn', sans-serif;
  color: #94a3b8;
  white-space: nowrap;
}

.cmd-kbd-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  color: #38bdf8;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}

/* --- Modular App Launcher Modal Container --- */
.modal-app-launcher-overlay {
  z-index: 100050 !important;
  background: rgba(4, 7, 15, 0.85) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-app-launcher-overlay.active {
  display: flex !important;
  opacity: 1 !important;
}

.launcher-modal-container {
  width: 95vw;
  max-width: 1180px;
  max-height: 88vh;
  height: 860px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.97) 0%, rgba(8, 12, 22, 0.99) 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  border-radius: 16px !important;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.85), 0 0 45px rgba(56, 189, 248, 0.12) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transform: scale(0.96);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  direction: ltr !important;
}

.modal-app-launcher-overlay.active .launcher-modal-container {
  transform: scale(1);
}

/* --- macOS Window Bar --- */
.launcher-window-bar {
  height: 36px;
  background: rgba(10, 15, 28, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  direction: ltr;
}

.launcher-mac-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.mac-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.85;
}

.mac-dot:hover {
  opacity: 1;
  transform: scale(1.1);
}

.mac-dot-close {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}

.mac-dot-min {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}

.mac-dot-max {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

.launcher-window-url {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #64748b;
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.launcher-window-url .url-protocol {
  color: #38bdf8;
}

.launcher-window-url .url-view-title {
  color: #e2e8f0;
}

.launcher-window-url .url-suite-tag {
  color: #c084fc;
}

.window-mode-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

/* --- Main Action Bar (Search & Header) --- */
.brand-section .btn-apps-launcher {
  margin-left: 14px;
  flex-shrink: 0;
}

.launcher-nav-bar {
  padding: 12px 18px;
  background: rgba(13, 20, 36, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 12px;
  direction: ltr !important;
}

.launcher-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  flex-shrink: 0;
  direction: ltr;
}

.launcher-user-avatar {
  font-size: 13px;
}

.launcher-suite-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: #38bdf8;
  white-space: nowrap;
  flex-shrink: 0;
  direction: ltr;
}

.suite-pill-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0284c7;
  color: #fff;
  border-radius: 50%;
  width: 17px;
  height: 17px;
  font-size: 10px;
  font-weight: 800;
}

.launcher-search-box {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 220px;
}

.launcher-search-svg {
  position: absolute;
  left: 14px;
  right: auto;
  color: #38bdf8;
  pointer-events: none;
}

.launcher-search-input {
  width: 100%;
  height: 40px;
  background: rgba(10, 15, 28, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  padding: 0 85px 0 38px;
  color: #ffffff;
  font-size: 13px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  direction: ltr;
  transition: all 0.2s ease;
}

.launcher-search-input:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.22);
  background: rgba(15, 23, 42, 0.95);
}

.launcher-search-kbd {
  position: absolute;
  right: 12px;
  left: auto;
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 10.5px;
  color: #38bdf8;
  font-family: 'JetBrains Mono', monospace;
  pointer-events: none;
}

.launcher-search-clear {
  position: absolute;
  right: 75px;
  left: auto;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
}

.launcher-search-clear:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.launcher-brand-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
  flex-shrink: 0;
  direction: ltr;
}

.brand-pro-chip {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #ffffff;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  letter-spacing: 0.5px;
}

.brand-name-chip {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  color: #cbd5e1;
}

.launcher-modal-close {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.launcher-modal-close:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #ef4444;
}

/* --- Ecosystem Subheader & Filter Bar --- */
.launcher-subheader {
  padding: 14px 20px;
  background: rgba(10, 15, 28, 0.65);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  direction: ltr !important;
  text-align: left;
}

.launcher-meta-titles {
  flex: 1 1 auto;
}

.launcher-title {
  font-size: 15px;
  font-weight: 800;
  color: #f8fafc;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.launcher-title-icon {
  font-size: 16px;
}

.launcher-desc {
  font-size: 12px;
  color: #94a3b8;
  margin: 4px 0 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.launcher-filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.launcher-filter-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.launcher-filter-btn:hover {
  background: rgba(51, 65, 85, 0.7);
  color: #ffffff;
  border-color: rgba(148, 163, 184, 0.35);
}

.launcher-filter-btn.active {
  background: rgba(56, 189, 248, 0.18) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.22);
}

.filter-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.dot-all { background: #38bdf8; box-shadow: 0 0 4px #38bdf8; }
.dot-basic { background: #94a3b8; box-shadow: 0 0 4px #94a3b8; }
.dot-diamond { background: #06b6d4; box-shadow: 0 0 4px #06b6d4; }
.dot-pro { background: #a855f7; box-shadow: 0 0 4px #a855f7; }
.dot-plus { background: #38bdf8; box-shadow: 0 0 4px #38bdf8; }
.dot-admin { background: #ef4444; box-shadow: 0 0 4px #ef4444; }

/* --- Modular Cards Grid & Body Scroller --- */
.launcher-body-scroller {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 20px;
  scroll-behavior: smooth;
  direction: ltr !important;
}

.launcher-body-scroller::-webkit-scrollbar {
  width: 6px;
}

.launcher-body-scroller::-webkit-scrollbar-track {
  background: rgba(10, 15, 28, 0.5);
}

.launcher-body-scroller::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.25);
  border-radius: 4px;
}

.launcher-body-scroller::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.5);
}

.launcher-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* --- App Card Architecture --- */
.launcher-app-card {
  background: linear-gradient(145deg, rgba(17, 24, 39, 0.72), rgba(10, 15, 28, 0.88));
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  direction: ltr;
  text-align: left;
}

.launcher-app-card:hover,
.launcher-app-card:focus-visible,
.launcher-app-card.keyboard-highlighted {
  transform: translateY(-3px);
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 22px rgba(56, 189, 248, 0.16);
  background: linear-gradient(145deg, rgba(24, 34, 53, 0.85), rgba(13, 20, 36, 0.95));
}

/* --- Hourglass Cursor on Hover for Coming Soon / Unreleased Quant Lab Tools --- */
.launcher-app-card.is-coming-soon,
.launcher-app-card[data-action="quant-lab"],
.launcher-app-card.is-coming-soon *,
.launcher-app-card[data-action="quant-lab"] * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22h14'/%3E%3Cpath d='M5 2h14'/%3E%3Cpath d='M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22'/%3E%3Cpath d='M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2'/%3E%3C/svg%3E") 11 11, wait !important;
}

.launcher-app-card.is-coming-soon:hover,
.launcher-app-card[data-action="quant-lab"]:hover {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22h14'/%3E%3Cpath d='M5 2h14'/%3E%3Cpath d='M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22'/%3E%3Cpath d='M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2'/%3E%3C/svg%3E") 11 11, wait !important;
}

.app-card-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.app-card-icon-squircle {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.launcher-app-card:hover .app-card-icon-squircle {
  transform: scale(1.08);
}

/* Squircle Gradients */
.icon-whale {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.25), rgba(59, 130, 246, 0.25));
  border: 1px solid rgba(6, 182, 212, 0.5);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.25);
}

.icon-iceberg {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.25), rgba(6, 182, 212, 0.25));
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.25);
}

.icon-liq {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.25), rgba(239, 68, 68, 0.25));
  border: 1px solid rgba(249, 115, 22, 0.5);
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.25);
}

.icon-gamma {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(139, 92, 246, 0.25));
  border: 1px solid rgba(168, 85, 247, 0.5);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
}

.icon-builder {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.25));
  border: 1px solid rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.icon-monte {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(79, 70, 229, 0.25));
  border: 1px solid rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.25);
}

.icon-mev {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.25), rgba(202, 138, 4, 0.25));
  border: 1px solid rgba(234, 179, 8, 0.5);
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.25);
}

.icon-sybil {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.25));
  border: 1px solid rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.25);
}

.icon-export {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.25), rgba(13, 148, 136, 0.25));
  border: 1px solid rgba(20, 184, 166, 0.5);
  box-shadow: 0 0 12px rgba(20, 184, 166, 0.25);
}

.icon-signals {
  background: linear-gradient(135deg, rgba(217, 70, 239, 0.25), rgba(192, 38, 211, 0.25));
  border: 1px solid rgba(217, 70, 239, 0.5);
  box-shadow: 0 0 12px rgba(217, 70, 239, 0.25);
}

.icon-admin {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(220, 38, 38, 0.25));
  border: 1px solid rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
}

.icon-pricing {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.25));
  border: 1px solid rgba(245, 158, 11, 0.5);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

.app-card-heading {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  direction: ltr;
  text-align: left;
}

.app-card-en-title {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.app-card-tier-row {
  display: flex;
  align-items: center;
  margin-top: 1px;
}

/* --- EXCLUSIVE: REQUIRED TIER BADGES --- */
.app-tier-badge {
  display: inline-flex;
  align-items: center;
  padding: 2.5px 7px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
  line-height: 1.2;
}

.app-tier-badge.tier-basic {
  background: rgba(148, 163, 184, 0.16);
  border: 1px solid rgba(148, 163, 184, 0.6);
  color: #cbd5e1;
  box-shadow: 0 0 10px rgba(148, 163, 184, 0.25);
}

.app-tier-badge.tier-diamond {
  background: rgba(6, 182, 212, 0.16);
  border: 1px solid rgba(6, 182, 212, 0.6);
  color: #22d3ee;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.25);
}

.app-tier-badge.tier-pro {
  background: rgba(168, 85, 247, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.6);
  color: #c084fc;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.25);
}

.app-tier-badge.tier-plus {
  background: rgba(56, 189, 248, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.6);
  color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

.app-tier-badge.tier-admin {
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.6);
  color: #f87171;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.25);
}

.app-tier-badge.tier-all {
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.6);
  color: #fbbf24;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}

.app-tier-badge.tier-soon {
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.65);
  color: #fbbf24;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
  letter-spacing: 0.8px;
}

.app-card-desc {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0 0 12px 0;
  flex: 1 1 auto;
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-align: left;
  direction: ltr;
}

.app-card-footer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  direction: ltr;
}

.card-launch-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: #38bdf8;
  transition: all 0.2s ease;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.card-launch-trigger .launch-icon {
  font-size: 13px;
  transition: transform 0.2s ease;
}

.launcher-app-card:hover .card-launch-trigger {
  color: #7dd3fc;
}

.launcher-app-card:hover .card-launch-trigger .launch-icon {
  transform: translate(2px, -2px);
}

.card-quant-lab-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 6px;
  padding: 2.5px 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.card-quant-lab-trigger .lab-icon {
  font-size: 11.5px;
}

/* --- Fallback when search has no results --- */
.launcher-no-results {
  text-align: center;
  padding: 48px 20px;
  color: #94a3b8;
}

.no-results-icon {
  font-size: 36px;
  margin-bottom: 12px;
}

.no-results-title {
  font-size: 15px;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.no-results-hint {
  font-size: 12px;
  color: #64748b;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* --- Institutional Footer Bar --- */
.launcher-footer-bar {
  height: 40px;
  padding: 0 18px;
  background: rgba(8, 12, 22, 0.96);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #64748b;
  user-select: none;
  direction: ltr !important;
}

.launcher-footer-shortcuts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.kbd-hint-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.launcher-footer-shortcuts kbd {
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 4px;
  padding: 1.5px 5px;
  font-size: 9.5px;
  color: #94a3b8;
  font-family: 'JetBrains Mono', monospace;
}

.footer-sep {
  color: #334155;
}

.launcher-footer-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #10b981;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  direction: ltr;
}

.status-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
  animation: pulse-launcher-dot 2s infinite ease-in-out;
}

@keyframes pulse-launcher-dot {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 10px #10b981; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

/* --- Responsive Media Queries for App Launcher --- */
@media (max-width: 1080px) {
  .launcher-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .launcher-brand-tag {
    display: none;
  }
}

@media (max-width: 768px) {
  .launcher-modal-container {
    width: 96vw;
    height: 92vh;
    max-height: 92vh;
  }
  .launcher-nav-bar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
  }
  .launcher-search-box {
    order: 3;
    width: 100%;
    min-width: 100%;
  }
  .launcher-suite-pill {
    order: 2;
  }
  .launcher-user-pill {
    order: 1;
  }
  .launcher-modal-close {
    order: 2;
    margin-right: auto;
  }
  .launcher-subheader {
    padding: 10px 14px;
    flex-direction: column;
    align-items: stretch;
  }
  .launcher-filter-bar {
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .launcher-cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .launcher-footer-bar {
    padding: 0 12px;
    height: auto;
    padding-top: 6px;
    padding-bottom: 6px;
    flex-direction: column;
    gap: 4px;
    align-items: center;
  }
  .launcher-footer-shortcuts {
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .launcher-window-url {
    display: none;
  }
  .launcher-footer-shortcuts .kbd-hint-group:not(:last-child) {
    display: none;
  }
}

/* ========================================================================= */
/* LEVEL-3 ICEBERG & DARK POOL ORDERFLOW RADAR (DIAMOND EXCLUSIVE)          */
/* ========================================================================= */

.modal-iceberg-engine,
#modal-iceberg-radar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(3, 7, 18, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.modal-iceberg-engine.active,
#modal-iceberg-radar.active {
  display: flex !important;
}

.modal-iceberg-dialog {
  max-width: 1540px;
  width: 96vw;
  height: 94vh;
  margin: auto;
  display: flex;
  flex-direction: column;
}

.modal-iceberg-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #060b16;
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.95), 0 0 50px rgba(14, 165, 233, 0.22);
  border-radius: 14px;
  overflow: hidden;
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* --- Header --- */
.iceberg-header {
  display: flex;
  flex-direction: column;
  padding: 12px 20px 10px;
  background: linear-gradient(180deg, #0e172a 0%, #080d1a 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  gap: 10px;
  position: relative;
}

.iceberg-header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
}

.iceberg-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.iceberg-logo-badge {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.3) 0%, rgba(99, 102, 241, 0.4) 100%);
  border: 1px solid rgba(56, 189, 248, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.3);
  flex-shrink: 0;
}

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

.iceberg-title-row h2 {
  font-size: 15px;
  font-weight: 800;
  color: #f8fafc;
  margin: 0;
  letter-spacing: -0.2px;
}

.badge-iceberg-diamond {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.3), rgba(99, 102, 241, 0.4));
  border: 1px solid rgba(6, 182, 212, 0.6);
  color: #38bdf8;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
}

.badge-iceberg-l3 {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #34d399;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
}

.badge-iceberg-grade {
  background: rgba(148, 163, 184, 0.15);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #cbd5e1;
  font-size: 8.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.iceberg-header-subtitle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 3px;
  flex-wrap: wrap;
}

.iceberg-val-pill {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 4px;
}

/* Header Controls Toolbar Row */
.iceberg-header-controls-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* Modal Body Scroller */
.iceberg-modal-body-scroller {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.iceberg-ctrl-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.iceberg-ctrl-label {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;
}

.iceberg-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 33px;
  background-color: #0c1427;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 9px center;
  background-size: 12px 12px;
  border: 1px solid rgba(56, 189, 248, 0.28);
  color: #f1f5f9;
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  padding: 0 10px 0 28px;
  border-radius: 7px;
  outline: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.iceberg-select:hover {
  border-color: rgba(56, 189, 248, 0.55);
  background-color: #0f1a34;
}

.iceberg-select:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

.iceberg-select option {
  background: #090e1d;
  color: #f1f5f9;
  padding: 6px 10px;
}

.btn-iceberg-sync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 33px;
  padding: 0 12px;
  background: rgba(14, 165, 233, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  border-radius: 7px;
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-iceberg-sync:hover {
  background: #0ea5e9;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(14, 165, 233, 0.4);
}

/* --- Diagram 1 Pipeline Processing Ribbon --- */
.iceberg-pipeline-container {
  padding: 10px 20px;
  background: rgba(10, 15, 28, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.pipeline-caption-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.p-cap-badge {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 4px;
}

.p-cap-text {
  font-size: 11.5px;
  font-weight: 800;
  color: #e2e8f0;
}

.p-cap-tech {
  font-size: 10px;
  color: #64748b;
  margin-right: auto;
  font-family: 'JetBrains Mono', monospace;
}

.pipeline-nodes-flow {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.pipeline-node {
  flex: 1;
  position: relative;
  padding: 10px 14px;
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: all 0.25s ease;
  direction: ltr;
  text-align: left;
}

.pipeline-node.node-cyan {
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.15);
}

.pipeline-node.node-gold {
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.15);
}

.pipeline-node.node-purple {
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.15);
}

.pipeline-node.node-crimson {
  border-color: rgba(244, 63, 94, 0.55);
  box-shadow: 0 0 18px rgba(244, 63, 94, 0.18);
}

.p-node-header {
  display: flex;
  align-items: center;
  gap: 8px;
  direction: ltr;
  text-align: left;
  margin-bottom: 3px;
}

.p-node-status-dot {
  position: static;
  width: 8px;
  height: 8px;
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.pulse-cyan {
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
  animation: pulse-dot-pipe 1.8s infinite;
}

.pulse-gold {
  background: #fbbf24;
  box-shadow: 0 0 8px #fbbf24;
  animation: pulse-dot-pipe 2.1s infinite;
}

.pulse-purple {
  background: #c084fc;
  box-shadow: 0 0 8px #c084fc;
  animation: pulse-dot-pipe 1.9s infinite;
}

.pulse-crimson {
  background: #f43f5e;
  box-shadow: 0 0 8px #f43f5e;
  animation: pulse-dot-pipe 1.7s infinite;
}

@keyframes pulse-dot-pipe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.p-node-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: -0.1px;
  line-height: 1.2;
  margin: 0;
}

.p-node-sub {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
  direction: ltr;
  text-align: left;
}

.p-node-metric {
  font-size: 9.5px;
  font-weight: 700;
  margin-top: 4px;
  color: #38bdf8;
  direction: ltr;
  text-align: left;
}

.node-gold .p-node-metric { color: #fbbf24; }
.node-purple .p-node-metric { color: #c084fc; }
.node-crimson .p-node-metric { color: #fb7185; }

.pipeline-arrow {
  display: flex;
  align-items: center;
  color: #64748b;
  font-size: 12px;
  flex-shrink: 0;
}

.arrow-line {
  width: 14px;
  height: 2px;
  background: rgba(148, 163, 184, 0.3);
}

/* --- HUD Cards Grid --- */
.iceberg-hud-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 12px 20px;
  background: rgba(8, 13, 25, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.iceberg-hud-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.ih-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ih-icon {
  font-size: 14px;
}

.ih-title {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
}

.ih-val-lg {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 800;
  color: #f8fafc;
  margin: 6px 0 4px;
}

.ih-val-md {
  font-size: 13.5px;
  font-weight: 800;
  color: #f1f5f9;
  margin: 6px 0 2px;
}

.ih-sub-bar-group {
  margin-top: 4px;
}

.ih-ratio-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  font-weight: 700;
  margin-bottom: 3px;
  font-family: 'JetBrains Mono', monospace;
}

.ih-buy-lbl { color: #34d399; }
.ih-sell-lbl { color: #f87171; }

.ih-bar-track {
  height: 5px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.9);
  display: flex;
  overflow: hidden;
}

.ih-bar-fill-buy {
  background: linear-gradient(90deg, #10b981, #059669);
  height: 100%;
}

.ih-bar-fill-sell {
  background: linear-gradient(90deg, #ef4444, #b91c1c);
  height: 100%;
}

.ih-sub-pill-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.ih-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
}

.ih-pill.buy {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.ih-pill.sell {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.ih-sub-desc {
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.4;
  margin-top: 2px;
}

.ih-sub-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: #94a3b8;
  margin-top: 4px;
}

.ih-tag-prime {
  background: rgba(99, 102, 241, 0.2);
  color: #818cf8;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 800;
  font-size: 8.5px;
}

/* --- Body Viewport (Canvas + Live Tape) --- */
.iceberg-body-viewport {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 12px;
  padding: 12px 20px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Left: Visualizer */
.iceberg-col-visualizer {
  background: rgba(10, 16, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.visualizer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(15, 23, 42, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  gap: 12px;
}

.vh-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vh-icon { font-size: 15px; }

.vh-title {
  font-size: 12px;
  font-weight: 800;
  color: #f1f5f9;
}

.vh-sub {
  font-size: 9.5px;
  color: #94a3b8;
  margin-top: 1px;
}

.vh-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-vh-toggle, .btn-vh-action {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #cbd5e1;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  font-family: inherit;
}

.btn-vh-toggle.active {
  background: rgba(14, 165, 233, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
}

.btn-vh-action:hover {
  background: #0ea5e9;
  color: #ffffff;
}

.iceberg-canvas-wrap {
  flex: 1;
  position: relative;
  background: #070c17;
  overflow: hidden;
}

#iceberg-depth-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.canvas-legend-floating {
  position: absolute;
  bottom: 8px;
  right: 12px;
  background: rgba(8, 13, 25, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 5px 10px;
  display: flex;
  gap: 12px;
  font-size: 9.5px;
  color: #94a3b8;
  backdrop-filter: blur(6px);
}

.leg-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.leg-box {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.leg-visible { background: rgba(148, 163, 184, 0.45); }
.leg-bid-phantom { background: #10b981; box-shadow: 0 0 6px #10b981; }
.leg-ask-phantom { background: #ef4444; box-shadow: 0 0 6px #ef4444; }
.leg-line { width: 14px; height: 2px; }
.leg-current { background: #fbbf24; }

/* Right: Tape */
.iceberg-col-tape {
  background: rgba(10, 16, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tape-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(15, 23, 42, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.th-title-group {
  display: flex;
  align-items: center;
  gap: 7px;
}

.tape-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulse-dot-pipe 1.6s infinite;
}

.th-title {
  font-size: 11.5px;
  font-weight: 800;
  color: #f1f5f9;
}

.tape-count-badge {
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}

.tape-table-scroll {
  flex: 1;
  overflow-y: auto;
  max-height: 330px;
}

.iceberg-tape-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  text-align: right;
}

.iceberg-tape-table th {
  background: #080e1c;
  color: #94a3b8;
  font-weight: 800;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

.iceberg-tape-table td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  color: #e2e8f0;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}

.iceberg-tape-table tr:hover {
  background: rgba(56, 189, 248, 0.06);
}

.tape-pill-buy {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 800;
}

.tape-pill-sell {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 800;
}

.tape-reload-tag {
  color: #fbbf24;
  font-size: 8.5px;
  font-weight: 800;
  margin-right: 3px;
}

/* --- Bottom Matrix Table --- */
.iceberg-matrix-container {
  padding: 0 20px 12px;
  flex-shrink: 0;
}

.matrix-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.7);
  border-radius: 8px 8px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: none;
}

.mth-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mth-icon { font-size: 15px; }

.mth-title {
  font-size: 12px;
  font-weight: 800;
  color: #f1f5f9;
}

.mth-sub {
  font-size: 9.5px;
  color: #94a3b8;
}

.mth-badge-champ {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.3));
  border: 1px solid rgba(245, 158, 11, 0.6);
  color: #fbbf24;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 5px;
}

.iceberg-walls-table-scroll {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0 0 8px 8px;
  background: rgba(9, 14, 26, 0.85);
}

.iceberg-walls-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10.5px;
  text-align: right;
}

.iceberg-walls-table th {
  background: #090e1c;
  color: #94a3b8;
  font-weight: 800;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

.iceberg-walls-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
  white-space: nowrap;
}

.iceberg-walls-table tr:hover {
  background: rgba(56, 189, 248, 0.05);
}

.wall-badge-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 9.5px;
}

.wall-badge-type.buy {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.wall-badge-type.sell {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.wall-multiplier-pill {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 9.5px;
}

.wall-algo-pill {
  color: #cbd5e1;
  font-size: 10px;
}

.wall-status-pill {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
}

.wall-status-pill.absorbing {
  background: rgba(14, 165, 233, 0.2);
  color: #38bdf8;
}

.wall-status-pill.near_swept {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

/* --- Action Pin Button in Walls Ledger --- */
.btn-pin-wall-row,
.btn-wall-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
  padding: 4px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.btn-pin-wall-row svg,
.btn-wall-pin svg {
  stroke: currentColor;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.btn-pin-wall-row:hover,
.btn-wall-pin:hover {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.28), rgba(6, 182, 212, 0.22));
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
  transform: translateY(-1px);
}

.btn-pin-wall-row:hover svg,
.btn-wall-pin:hover svg {
  transform: rotate(-12deg) scale(1.12);
}

.btn-pin-wall-row:active,
.btn-wall-pin:active {
  transform: translateY(0);
  box-shadow: 0 0 5px rgba(56, 189, 248, 0.25);
}

/* Side specific accent styling */
.wall-row.buy .btn-pin-wall-row {
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.35);
  color: #22d3ee;
}
.wall-row.buy .btn-pin-wall-row:hover {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.3), rgba(16, 185, 129, 0.25));
  border-color: #06b6d4;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.45);
}

.wall-row.sell .btn-pin-wall-row {
  background: rgba(244, 63, 94, 0.1);
  border-color: rgba(244, 63, 94, 0.35);
  color: #fb7185;
}
.wall-row.sell .btn-pin-wall-row:hover {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.3), rgba(239, 68, 68, 0.25));
  border-color: #f43f5e;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.45);
}

/* Pinned state */
.btn-pin-wall-row.is-pinned,
.btn-wall-pin.is-pinned {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.5) !important;
}

/* --- Footer --- */
.iceberg-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  background: #060b16;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  gap: 12px;
}

.iceberg-footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pulse-dot-emerald {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulse-dot-pipe 1.8s infinite;
}

.iceberg-footer-status-text {
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 600;
}

.iceberg-latency-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}

.iceberg-footer-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.iceberg-footer-biblio {
  font-size: 9.5px;
  color: #64748b;
  font-family: 'JetBrains Mono', monospace;
}

.btn-iceberg-refresh-foot {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-iceberg-refresh-foot:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #ffffff;
}

/* --- Responsive Media Queries for Iceberg Modal (Object-Oriented All Devices) --- */
@media (max-width: 1200px) {
  .iceberg-hud-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .pipeline-nodes-flow {
    gap: 6px;
  }
}

@media (max-width: 992px) {
  .modal-iceberg-engine {
    padding: 8px;
  }
  .modal-iceberg-dialog {
    width: 100vw;
    max-width: 100%;
    height: 100%;
    max-height: 100vh;
    margin: 0;
  }
  .modal-iceberg-content {
    border-radius: 10px;
    height: 100%;
  }
  .iceberg-header {
    padding: 10px 14px 8px;
    gap: 8px;
  }
  .iceberg-header-top-row {
    gap: 10px;
  }
  .iceberg-title-row h2 {
    font-size: 13.5px;
  }
  .iceberg-header-subtitle {
    font-size: 10px;
  }
  .iceberg-header-controls-row {
    gap: 8px;
  }
  .iceberg-ctrl-group {
    flex: 1 1 auto;
    min-width: 130px;
  }
  .iceberg-select {
    width: 100%;
    height: 31px;
    font-size: 11px;
  }
  .btn-iceberg-sync {
    height: 31px;
    padding: 0 10px;
    font-size: 10.5px;
  }

  /* Diagram 1 Pipeline: Compact 2x2 Grid Layout */
  .pipeline-nodes-flow {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .pipeline-arrow {
    display: none;
  }
  .pipeline-node {
    padding: 7px 10px;
  }
  .p-node-title {
    font-size: 11px;
  }
  .p-node-sub {
    font-size: 8.5px;
  }
  .p-node-metric {
    font-size: 8.5px;
    margin-top: 2px;
  }

  /* Body Viewport: Stacked Visualizer & Tape */
  .iceberg-body-viewport {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 14px 10px;
  }
  .iceberg-col-visualizer {
    width: 100%;
  }
  .iceberg-canvas-wrap {
    height: 250px;
  }
  .iceberg-col-tape {
    width: 100%;
  }
  .tape-table-scroll {
    max-height: 220px;
  }

  /* Matrix table */
  .iceberg-matrix-container {
    padding: 0 14px 10px;
  }
}

@media (max-width: 600px) {
  .iceberg-header {
    padding: 8px 10px 8px;
  }
  .iceberg-header-left {
    gap: 8px;
  }
  .iceberg-logo-badge {
    width: 32px;
    height: 32px;
    font-size: 16px;
    border-radius: 7px;
  }
  .iceberg-title-row {
    gap: 4px;
  }
  .iceberg-title-row h2 {
    font-size: 12px;
  }
  .badge-iceberg-diamond,
  .badge-iceberg-l3,
  .badge-iceberg-grade {
    font-size: 7.5px;
    padding: 1px 4px;
  }
  .iceberg-header-subtitle span:first-child {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .iceberg-ctrl-group {
    min-width: 110px;
  }
  .iceberg-ctrl-label {
    font-size: 10px;
  }
  .iceberg-select {
    height: 29px;
    font-size: 10px;
    padding: 0 6px 0 22px;
  }
  .btn-iceberg-sync {
    height: 29px;
    padding: 0 8px;
    font-size: 10px;
  }

  /* Pipeline container */
  .iceberg-pipeline-container {
    padding: 8px 10px;
  }
  .pipeline-caption-row {
    margin-bottom: 6px;
  }
  .p-cap-text {
    font-size: 9.5px;
  }
  .p-cap-tech {
    display: none;
  }
  .pipeline-nodes-flow {
    gap: 6px;
  }
  .pipeline-node {
    padding: 6px 8px;
  }
  .p-node-status-dot {
    width: 6.5px;
    height: 6.5px;
    min-width: 6.5px;
    min-height: 6.5px;
  }
  .p-node-title {
    font-size: 10px;
  }
  .p-node-sub {
    font-size: 8px;
  }
  .p-node-metric {
    font-size: 8px;
  }

  /* HUD grid: 2 columns on mobile */
  .iceberg-hud-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 8px 10px;
  }
  .iceberg-hud-card {
    padding: 8px;
  }
  .ih-title {
    font-size: 9.5px;
  }
  .ih-val-lg {
    font-size: 13.5px;
  }
  .ih-val-md {
    font-size: 11.5px;
  }

  /* Visualizer canvas height on small screens */
  .iceberg-canvas-wrap {
    height: 200px;
  }

  /* Footer */
  .iceberg-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 10px;
  }
  .iceberg-footer-left {
    justify-content: space-between;
  }
  .iceberg-footer-status-text {
    font-size: 9.5px;
  }
  .iceberg-footer-biblio {
    display: none;
  }
  .btn-iceberg-refresh-foot {
    width: 100%;
    justify-content: center;
    padding: 5px;
  }
}

/* =========================================================================
   SYBIL WALLET GRAPH CLUSTERING MODULE (DIAMOND EXCLUSIVE)
   Market Valuation: $500/Month (Arkham Enterprise / Chainalysis Reactor Grade)
   Diagram 3 Implementation: Master Whale -> Split Wallets -> Graph Engine -> Alert
   NetworkX & UTXO Co-Ownership Heuristics Visualization
   ========================================================================= */

.modal-sybil-clustering,
#modal-sybil-clustering {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(2, 6, 16, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10005;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
}

.modal-sybil-clustering.active,
#modal-sybil-clustering.active {
  display: flex !important;
}

.modal-sybil-dialog {
  max-width: 1560px;
  width: 96vw;
  height: 94vh;
  margin: auto;
  display: flex;
  flex-direction: column;
}

.modal-sybil-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #050a14;
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(6, 182, 212, 0.16), 0 25px 50px rgba(0, 0, 0, 0.9);
  position: relative;
}

/* Header */
.sybil-header {
  background: linear-gradient(180deg, #091224 0%, #060b17 100%);
  border-bottom: 1px solid rgba(56, 189, 248, 0.18);
  padding: 14px 20px 12px;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px;
  flex-shrink: 0;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.sybil-header-top-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-right: 48px;
}

.sybil-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 auto;
}

.sybil-logo-badge {
  width: 44px;
  height: 44px;
  background: radial-gradient(circle at 30% 30%, rgba(6, 182, 212, 0.25), rgba(15, 23, 42, 0.9));
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.25);
  flex-shrink: 0;
}

.sybil-title-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.sybil-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sybil-title-row h2 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  color: #f8fafc;
  font-family: 'Vazirmatn', -apple-system, sans-serif;
  letter-spacing: -0.2px;
}

.badge-sybil-diamond {
  background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2.5px 8px;
  border-radius: 5px;
  letter-spacing: 0.6px;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
}

.badge-sybil-arkham {
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.6);
  color: #fbbf24;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2.5px 8px;
  border-radius: 5px;
  letter-spacing: 0.4px;
}

.badge-sybil-graph {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.5);
  color: #c084fc;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2.5px 8px;
  border-radius: 5px;
  letter-spacing: 0.4px;
}

.sybil-header-subtitle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: #94a3b8;
  flex-wrap: wrap;
  line-height: 1.5;
}

.sybil-val-pill {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  font-size: 10px;
  font-weight: 600;
  padding: 1.5px 7px;
  border-radius: 10px;
}

/* Close button - Pinned with precision to the top-right corner */
#btn-close-sybil {
  position: absolute !important;
  top: 14px !important;
  right: 20px !important;
  z-index: 20 !important;
  margin: 0 !important;
}

/* Controls Toolbar */
.sybil-header-controls-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.sybil-ctrl-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sybil-ctrl-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #cbd5e1;
  white-space: nowrap;
}

.sybil-select {
  background: #091224;
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #f1f5f9;
  font-size: 11.5px;
  padding: 5px 10px;
  border-radius: 7px;
  outline: none;
  height: 32px;
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.sybil-select:hover,
.sybil-select:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

.btn-sybil-sync,
.btn-sybil-reset-cam {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(59, 130, 246, 0.15) 100%);
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  font-size: 11.5px;
  font-weight: 600;
  height: 32px;
  padding: 0 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-sybil-sync:hover,
.btn-sybil-reset-cam:hover {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.3) 0%, rgba(59, 130, 246, 0.3) 100%);
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.3);
  transform: translateY(-1px);
}

/* Scrollable Modal Body */
.sybil-modal-body-scroller {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px 20px;
  box-sizing: border-box;
}

.sybil-modal-body-scroller::-webkit-scrollbar {
  width: 6px;
}
.sybil-modal-body-scroller::-webkit-scrollbar-track {
  background: #050a14;
}
.sybil-modal-body-scroller::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.25);
  border-radius: 3px;
}
.sybil-modal-body-scroller::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.5);
}

/* Diagram 3 Pipeline Processing Status Ribbon */
.sybil-pipeline-container {
  background: linear-gradient(180deg, #091224 0%, #060e1d 100%);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.sybil-pipeline-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* HUD Cards Grid */
.sybil-hud-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.sybil-hud-card {
  background: linear-gradient(135deg, rgba(9, 18, 36, 0.85) 0%, rgba(6, 13, 26, 0.95) 100%);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.sybil-hud-card:hover {
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.15);
  transform: translateY(-2px);
}

.sybil-hud-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #06b6d4, #3b82f6);
}

.sybil-hud-card.card-splits-count::before {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.sybil-hud-card.card-confidence::before {
  background: linear-gradient(90deg, #10b981, #06b6d4);
}

.sybil-hud-card.card-intent::before {
  background: linear-gradient(90deg, #ef4444, #f43f5e);
}

.sh-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sh-icon {
  font-size: 16px;
}

.sh-title {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: -0.1px;
}

.sh-val-lg {
  font-size: 18px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.3px;
}

.sh-val-md {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
}

.sh-sub-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  color: #94a3b8;
  gap: 8px;
}

/* BiDi LTR Isolation for Percentages & Numbers */
.sybil-bidi-ltr,
.bidi-ltr-num {
  direction: ltr !important;
  display: inline-block !important;
  unicode-bidi: isolate !important;
  text-align: left !important;
}

#sybil-stat-stealth-score,
#sybil-pipe-metric-3,
#sybil-stat-confidence {
  unicode-bidi: isolate !important;
}

.sh-tag-prime,
.sh-tag-safe,
.sh-tag-math,
.sh-tag-alert {
  font-size: 9px;
  font-weight: 700;
  padding: 1.5px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

.sh-tag-prime {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.sh-tag-safe {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.sh-tag-math {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.sh-tag-alert {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #f87171;
  animation: pulse-border-red 1.8s infinite;
}

@keyframes pulse-border-red {
  0%, 100% { border-color: rgba(239, 68, 68, 0.5); }
  50% { border-color: rgba(239, 68, 68, 0.9); box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); }
}

/* Dual Column Layout (Graph Canvas + Evidence Log) */
.sybil-body-viewport {
  display: flex;
  gap: 14px;
}

.sybil-col-graph {
  flex: 65;
  background: #060b17;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.sybil-graph-header {
  padding: 10px 14px;
  background: linear-gradient(180deg, #091224 0%, #060b17 100%);
  border-bottom: 1px solid rgba(56, 189, 248, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sgh-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sgh-icon {
  font-size: 18px;
}

.sgh-title {
  font-size: 12px;
  font-weight: 700;
  color: #f1f5f9;
}

.sgh-sub {
  font-size: 10px;
  color: #94a3b8;
}

.sgh-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-sgh-toggle {
  background: #0b1528;
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #94a3b8;
  font-size: 10.5px;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-sgh-toggle.active {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(56, 189, 248, 0.5);
  color: #38bdf8;
}

.sgh-zoom-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-sgh-zoom {
  background: #0b1528;
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #cbd5e1;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-sgh-zoom:hover {
  background: rgba(56, 189, 248, 0.2);
  color: #ffffff;
}

/* Canvas Wrapper */
.sybil-canvas-wrap {
  position: relative;
  width: 100%;
  height: 400px;
  background: radial-gradient(circle at center, #071022 0%, #040814 100%);
  overflow: hidden;
  cursor: grab;
}

.sybil-canvas-wrap:active {
  cursor: grabbing;
}

#sybil-graph-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Floating Legend */
.sybil-floating-legend {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(6, 11, 23, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
  backdrop-filter: blur(4px);
  z-index: 10;
}

.sfl-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: #cbd5e1;
}

.sfl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
}

.sfl-master { background: #38bdf8; color: #38bdf8; }
.sfl-split { background: #fbbf24; color: #fbbf24; }
.sfl-relay { background: #a855f7; color: #a855f7; }
.sfl-target { background: #f43f5e; color: #f43f5e; }

/* Floating Tooltip */
.sybil-graph-tooltip {
  position: absolute;
  z-index: 30;
  background: #091428;
  border: 1px solid rgba(56, 189, 248, 0.5);
  border-radius: 8px;
  padding: 10px 14px;
  color: #f1f5f9;
  font-size: 11px;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 12px rgba(6, 182, 212, 0.25);
  max-width: 280px;
  transform: translate(-50%, -110%);
  transition: opacity 0.15s ease;
}

.sybil-canvas-hint {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(9, 18, 36, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 10px;
  color: #94a3b8;
  pointer-events: none;
  white-space: nowrap;
}

/* Right Column: Live Heuristic Evidence Log */
.sybil-col-evidence {
  flex: 35;
  background: #060b17;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.sybil-evidence-header {
  padding: 10px 14px;
  background: linear-gradient(180deg, #091224 0%, #060b17 100%);
  border-bottom: 1px solid rgba(56, 189, 248, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.seh-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.seh-icon {
  font-size: 17px;
}

.seh-title {
  font-size: 12px;
  font-weight: 700;
  color: #f1f5f9;
}

.seh-sub {
  font-size: 10px;
  color: #94a3b8;
}

.seh-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2.5px 7px;
  border-radius: 5px;
  letter-spacing: 0.5px;
}

.seh-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
  animation: pulse-dot-anim 1.5s infinite;
}

.sybil-evidence-list {
  flex: 1;
  max-height: 400px;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.sybil-evidence-list::-webkit-scrollbar {
  width: 5px;
}
.sybil-evidence-list::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.25);
  border-radius: 3px;
}

.sybil-ev-card {
  background: #081020;
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: all 0.15s ease;
}

.sybil-ev-card:hover {
  border-color: rgba(56, 189, 248, 0.45);
  background: #0a1428;
}

.sev-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.sev-time {
  font-size: 9.5px;
  font-family: 'JetBrains Mono', monospace;
  color: #64748b;
}

.sev-type {
  font-size: 10.5px;
  font-weight: 700;
  color: #38bdf8;
}

.sev-conf {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.sev-pair {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: #cbd5e1;
}

.sev-tag {
  background: #0f1c32;
  border: 1px solid rgba(148, 163, 184, 0.2);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}

.sev-arrow {
  color: #38bdf8;
  font-size: 10px;
}

.sev-proof {
  font-size: 10.5px;
  color: #94a3b8;
  line-height: 1.4;
  margin-top: 2px;
}

/* Bottom Section: Active Split Wallets Ledger Matrix */
.sybil-matrix-container {
  background: #060b17;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.sybil-matrix-header {
  padding: 10px 16px;
  background: linear-gradient(180deg, #091224 0%, #060b17 100%);
  border-bottom: 1px solid rgba(56, 189, 248, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.smh-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.smh-icon {
  font-size: 18px;
}

.smh-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #f1f5f9;
}

.smh-sub {
  font-size: 10px;
  color: #94a3b8;
}

.smh-badge-cluster {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
}

.sybil-wallets-table-scroll {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: auto;
}

.sybil-wallets-table-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.sybil-wallets-table-scroll::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.25);
  border-radius: 3px;
}

.sybil-wallets-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  text-align: right;
  direction: rtl;
}

.sybil-wallets-table thead th {
  background: #081020;
  color: #94a3b8;
  font-weight: 600;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(56, 189, 248, 0.2);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 5;
}

.sybil-wallets-table tbody tr {
  border-bottom: 1px solid rgba(56, 189, 248, 0.08);
  transition: background 0.15s ease;
}

.sybil-wallets-table tbody tr:hover {
  background: rgba(56, 189, 248, 0.06);
}

.sybil-wallets-table tbody td {
  padding: 8px 12px;
  color: #cbd5e1;
  white-space: nowrap;
  vertical-align: middle;
}

.sybil-role-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.role-master {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.5);
}

.role-split {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.role-relay {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.role-target {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.sybil-addr-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  background: #0b1528;
  border: 1px solid rgba(148, 163, 184, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  color: #93c5fd;
  direction: ltr;
  display: inline-block;
}

.btn-sybil-action-sm {
  background: #0f1c32;
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-sybil-action-sm:hover {
  background: rgba(56, 189, 248, 0.25);
  color: #ffffff;
}

/* Footer */
.sybil-footer {
  background: #060b17;
  border-top: 1px solid rgba(56, 189, 248, 0.18);
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  flex-shrink: 0;
}

.sybil-footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sybil-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulse-dot-anim 1.5s infinite;
}

.sybil-footer-status-text {
  color: #94a3b8;
  font-weight: 500;
}

.sybil-latency-badge {
  background: #091428;
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}

.sybil-footer-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sybil-footer-biblio {
  color: #64748b;
  font-size: 10px;
}

.btn-sybil-refresh-foot {
  background: #091428;
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #cbd5e1;
  font-size: 10.5px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-sybil-refresh-foot:hover {
  background: rgba(56, 189, 248, 0.2);
  color: #ffffff;
}

/* =========================================================================
   RESPONSIVE DESIGN FOR SYBIL GRAPH CLUSTERING (ALL DEVICE SIZES)
   ========================================================================= */

@media (max-width: 1200px) {
  .sybil-body-viewport {
    flex-direction: column;
  }
  .sybil-col-graph,
  .sybil-col-evidence {
    width: 100%;
  }
  .sybil-canvas-wrap {
    height: 350px;
  }
  .sybil-evidence-list {
    max-height: 250px;
  }
}

@media (max-width: 992px) {
  .modal-sybil-clustering {
    padding: 8px;
  }
  .modal-sybil-dialog {
    width: 100vw;
    max-width: 100%;
    height: 100%;
    max-height: 100vh;
    margin: 0;
  }
  .modal-sybil-content {
    border-radius: 10px;
  }
  .sybil-header {
    padding: 10px 14px 8px;
  }
  .sybil-header-top-row {
    padding-right: 44px;
  }
  #btn-close-sybil {
    top: 10px !important;
    right: 14px !important;
  }
  .sybil-title-row h2 {
    font-size: 14.5px;
  }
  .sybil-pipeline-flow {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .sybil-pipeline-flow .pipeline-arrow {
    display: none;
  }
  .sybil-hud-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .modal-sybil-clustering {
    padding: 0;
  }
  .modal-sybil-dialog {
    width: 100vw;
    height: 100vh;
  }
  .modal-sybil-content {
    border-radius: 0;
    border: none;
  }
  .sybil-header {
    padding: 8px 10px;
  }
  .sybil-header-top-row {
    padding-right: 40px;
  }
  #btn-close-sybil {
    top: 8px !important;
    right: 10px !important;
  }
  .sybil-title-row h2 {
    font-size: 13px;
  }
  .sybil-header-subtitle {
    font-size: 10px;
  }
  .sybil-val-pill {
    display: none;
  }
  .sybil-header-controls-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .sybil-ctrl-group {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
  }
  .sybil-select {
    width: 100%;
    height: 30px;
    font-size: 11px;
  }
  .btn-sybil-sync,
  .btn-sybil-reset-cam {
    width: 100%;
    justify-content: center;
    height: 30px;
  }
  .sybil-modal-body-scroller {
    padding: 10px;
    gap: 10px;
  }
  .sybil-hud-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .sybil-canvas-wrap {
    height: 280px;
  }
  .sybil-canvas-hint {
    display: none;
  }
  .sybil-footer {
    flex-direction: column;
    align-items: stretch;
    padding: 8px 10px;
  }
  .sybil-footer-left {
    justify-content: space-between;
  }
  .sybil-footer-biblio {
    display: none;
  }
  .btn-sybil-refresh-foot {
    width: 100%;
  }
}

/* ====================================================
   Modern Institutional Pricing Grid & Cards
   ==================================================== */
.pricing-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, rgba(10, 15, 30, 0.98) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 20px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: center !important;
  position: relative !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.pricing-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important;
}

.pricing-card.pro {
  border-color: rgba(139, 92, 246, 0.35) !important;
  box-shadow: 0 0 25px rgba(139, 92, 246, 0.15) !important;
}

.pricing-card.pro:hover {
  border-color: rgba(168, 85, 247, 0.6) !important;
  box-shadow: 0 0 35px rgba(139, 92, 246, 0.3) !important;
}

.pricing-card.diamond {
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.1) 0%, rgba(10, 15, 30, 0.98) 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 0 30px rgba(6, 182, 212, 0.22), inset 0 0 20px rgba(56, 189, 248, 0.05) !important;
}

.pricing-card.diamond:hover {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 40px rgba(6, 182, 212, 0.38) !important;
}

.pricing-card.is-active-tier {
  border-color: #10b981 !important;
  box-shadow: 0 0 32px rgba(16, 185, 129, 0.35) !important;
}

.pricing-card-header {
  margin-bottom: 0;
  text-align: center;
}

.pricing-badge-slot {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.tier-pill {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.2;
  white-space: nowrap;
}

.tier-pill-basic {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.tier-pill-plus {
  color: #38bdf8;
  background: rgba(2, 132, 199, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.tier-pill-pro {
  color: #c084fc;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.38);
}

.tier-pill-diamond {
  color: #ffffff;
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.4);
}

.tier-pill-active {
  color: #ffffff;
  background: linear-gradient(135deg, #059669, #10b981);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.5);
}

.active-pulse-dot {
  width: 6px;
  height: 6px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 6px #ffffff;
  animation: pulse-dot-active 1.8s infinite;
}

@keyframes pulse-dot-active {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.pricing-tier-title {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.2px;
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.tier-title-diamond {
  color: #38bdf8;
  text-shadow: 0 0 16px rgba(56, 189, 248, 0.45);
}

.pricing-tier-desc {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  margin: 0 0 8px 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.pricing-price-box {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  margin-bottom: 6px;
}

.pricing-price-box .price-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 34px;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1;
}

.pricing-price-box .price-cycle {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
}

.price-box-diamond .price-val {
  color: #38bdf8;
  text-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
}

.pricing-card-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
  margin: 16px 0;
}

.pricing-features {
  text-align: left;
  font-size: 11px;
  line-height: 1.5;
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 18px 0;
  direction: ltr;
  flex: 1 1 auto;
}

.pricing-features .feature-item {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
  word-break: break-word;
}

.pricing-features .feature-item:last-child {
  border-bottom: none;
}

.pricing-features .feature-item.positive {
  color: #cbd5e1;
}

.pricing-features .feature-item.positive strong {
  color: #38bdf8;
  font-weight: 700;
}

.pricing-features .feature-item.negative {
  color: #f87171;
  opacity: 0.75;
}

/* ====================================================
   High-Urgency 24-Hour Flash Sale Banner & 90% Badges
   ==================================================== */
.pricing-urgency-banner {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(245, 158, 11, 0.08) 50%, rgba(15, 23, 42, 0.85) 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.12), inset 0 0 15px rgba(245, 158, 11, 0.04);
  border-radius: 12px;
  padding: 14px 20px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.pricing-urgency-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  transform: skewX(-25deg);
  animation: shine-sweep 6s infinite;
  pointer-events: none;
}

@keyframes shine-sweep {
  0% { left: -100%; }
  30%, 100% { left: 200%; }
}

.urgency-left {
  flex: 1 1 540px;
  text-align: left;
}

.urgency-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}

.urgency-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
  animation: urgency-pulse 1.4s infinite;
}

@keyframes urgency-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}

.urgency-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.2px;
  margin-bottom: 3px;
  line-height: 1.3;
}

.urgency-desc {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.4;
}

.urgency-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.countdown-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #ef4444;
  text-transform: uppercase;
}

.countdown-timer-box {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

.timer-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 32px;
}

.timer-digits {
  font-family: 'JetBrains Mono', monospace;
  font-size: 19px;
  font-weight: 800;
  color: #f59e0b;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
  line-height: 1;
}

.timer-unit-lbl {
  font-size: 7.5px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.timer-colon {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 800;
  color: #94a3b8;
  margin: 0 1px 4px 1px;
}

/* Pricing Price Container & 90% Badges */
.pricing-price-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-bottom: 8px;
}

.pricing-discount-badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 22px;
}

.price-original-striked {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
}

.price-original-striked del {
  text-decoration: line-through;
  text-decoration-color: #ef4444;
  text-decoration-thickness: 2px;
}

.discount-pill-90 {
  background: linear-gradient(135deg, #ef4444, #f59e0b);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 1.5px 7px;
  border-radius: 6px;
  letter-spacing: 0.3px;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.45);
  line-height: 1.2;
}

.diamond-pill {
  background: linear-gradient(135deg, #06b6d4, #8b5cf6);
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.5);
}

.tier-pill-free-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.1);
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.pricing-save-subtext {
  font-size: 10px;
  font-weight: 700;
  color: #10b981;
  letter-spacing: 0.2px;
  line-height: 1.2;
}

.diamond-save {
  color: #38bdf8;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}

/* Strict Single-Line Upgrade Buttons */
.pricing-card .btn-subscribe,
.pricing-card .btn-upgrade-trigger {
  white-space: nowrap !important;
  font-size: clamp(9.8px, 0.8vw, 11px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.15px !important;
  padding: 0 6px !important;
  height: 42px !important;
  min-height: 42px !important;
  line-height: 42px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: keep-all !important;
}

/* ====================================================
   Crypto Subscription Checkout Modal & Payment Engine
   ==================================================== */
.modal-checkout-container {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(10, 15, 30, 0.99) 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 0 50px rgba(16, 185, 129, 0.18), 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

.checkout-summary-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(6, 182, 212, 0.08) 50%, rgba(15, 23, 42, 0.8) 100%);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.checkout-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #94a3b8;
  text-transform: uppercase;
  display: block;
  margin-bottom: 3px;
}

.checkout-tier-title {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.2px;
}

.checkout-tier-period {
  font-size: 11px;
  color: #10b981;
  font-weight: 600;
  margin-top: 2px;
}

.checkout-summary-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.checkout-amount-box {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.checkout-amount-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  font-weight: 800;
  color: #38bdf8;
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
  line-height: 1;
}

.checkout-amount-cur {
  font-size: 13px;
  font-weight: 800;
  color: #67e8f9;
}

.checkout-save-pill {
  font-size: 9.5px;
  font-weight: 800;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 1.5px 6px;
  border-radius: 4px;
  margin-top: 4px;
}

.checkout-step-title {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.checkout-step-title .step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #0284c7);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Step 1: Accepted Payment Cryptocurrency (Asset) Card */
.checkout-asset-card {
  background: linear-gradient(135deg, rgba(38, 161, 123, 0.12) 0%, rgba(15, 23, 42, 0.85) 100%);
  border: 1px solid rgba(38, 161, 123, 0.45);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
  box-shadow: 0 0 20px rgba(38, 161, 123, 0.1);
  transition: all 0.2s ease;
}

.checkout-asset-card:hover {
  border-color: rgba(38, 161, 123, 0.65);
  box-shadow: 0 0 25px rgba(38, 161, 123, 0.2);
}

.asset-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.asset-logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(38, 161, 123, 0.5));
}

.asset-details {
  display: flex;
  flex-direction: column;
  text-align: left;
}

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

.asset-name {
  font-size: 13.5px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.2px;
}

.asset-ticker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  color: #26A17B;
  background: rgba(38, 161, 123, 0.15);
  border: 1px solid rgba(38, 161, 123, 0.35);
  padding: 1px 6px;
  border-radius: 4px;
}

.asset-primary-badge {
  font-size: 9.5px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.asset-sub {
  font-size: 10.5px;
  color: #94a3b8;
  margin-top: 2px;
}

.asset-card-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.asset-active-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #10b981;
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.asset-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.checkout-network-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

@media (max-width: 600px) {
  .checkout-network-grid {
    grid-template-columns: 1fr;
  }
}

.network-card {
  position: relative;
  cursor: pointer;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px 14px;
  transition: all 0.2s ease;
  display: block;
}

.network-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.network-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(56, 189, 248, 0.05);
}

.network-card.active {
  border-color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.12) !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.22);
}

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

.network-name {
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
}

.network-badge-recommended {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: auto;
}

.network-sub {
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.3;
}

.checkout-payment-box {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  gap: 18px;
  align-items: center;
}

@media (max-width: 600px) {
  .checkout-payment-box {
    flex-direction: column;
    align-items: center;
  }
}

.checkout-qr-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.qr-container {
  background: #ffffff;
  padding: 6px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.checkout-qr-img {
  display: block;
  border-radius: 4px;
}

.qr-caption {
  font-size: 9.5px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.3px;
}

.checkout-addr-col {
  flex: 1;
  min-width: 0;
}

.addr-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.addr-lbl {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #94a3b8;
  text-transform: uppercase;
}

.usdt-only-tag {
  font-size: 9.5px;
  font-weight: 800;
  color: #f59e0b;
}

.addr-display-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 6px 10px;
}

.addr-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: #f8fafc;
  word-break: break-all;
  flex: 1;
  line-height: 1.3;
}

.btn-copy-addr {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  font-size: 10px;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-copy-addr:hover {
  background: #38bdf8;
  color: #0b0f19;
}

.checkout-fee-notice {
  display: flex;
  gap: 8px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 10px;
}

.fee-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.fee-text {
  font-size: 10.5px;
  color: #cbd5e1;
  line-height: 1.4;
}

.fee-text strong {
  color: #f59e0b;
}

.checkout-txid-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.txid-input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.txid-lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.checkout-txid-input {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  color: #ffffff !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

.checkout-txid-input:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.3) !important;
}

.txid-hint {
  font-size: 10px;
  color: #64748b;
  line-height: 1.3;
}

.btn-submit-payment {
  background: linear-gradient(135deg, #10b981 0%, #0284c7 100%) !important;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 11px !important;
  border-radius: 8px !important;
  cursor: pointer;
  border: none;
  color: #fff;
  transition: all 0.25s ease;
}

.btn-submit-payment:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(16, 185, 129, 0.55) !important;
}

.checkout-status-hud {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 10px;
  padding: 14px 18px;
  margin-top: 14px;
  animation: fadeInStatus 0.3s ease;
}

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

.status-hud-spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(16, 185, 129, 0.25);
  border-top-color: #10b981;
  border-radius: 50%;
  animation: hud-spin 0.9s linear infinite;
  flex-shrink: 0;
}

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

.status-hud-title {
  font-size: 13px;
  font-weight: 800;
  color: #10b981;
  margin-bottom: 2px;
}

.status-hud-msg {
  font-size: 11.5px;
  color: #cbd5e1;
  line-height: 1.4;
}

/* ====================================================
   Admin & Profile Tabs & Payment Tables
   ==================================================== */
.admin-tab-bar {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.admin-tab-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all 0.2s ease;
}

.admin-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.admin-tab-btn.active {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(37, 99, 235, 0.2));
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

.admin-tab-badge {
  background: #ef4444;
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.admin-view-panel, .prof-view-panel {
  animation: fadeInPanel 0.25s ease;
}

@keyframes fadeInPanel {
  from { opacity: 0; }
  to { opacity: 1; }
}

.pay-status-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pay-status-pill.pending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.pay-status-pill.confirmed {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.pay-status-pill.rejected {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.btn-pay-action {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.btn-pay-approve {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.btn-pay-approve:hover {
  background: #10b981;
  color: #fff;
}

.btn-pay-reject {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.btn-pay-reject:hover {
  background: #ef4444;
  color: #fff;
}

.btn-pay-recheck {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.btn-pay-recheck:hover {
  background: #38bdf8;
  color: #0b0f19;
}

/* ====================================================
   Master Admin Traffic & Visitor Intelligence Styles
   ==================================================== */
.live-pulse-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulse-beacon 1.8s infinite ease-in-out;
}

@keyframes pulse-beacon {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.35); opacity: 1; box-shadow: 0 0 12px #10b981; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.analytics-timeframe-bar {
  display: inline-flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.tf-pill-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.tf-pill-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.tf-pill-btn.active {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

.stat-card-sub {
  font-size: 10px;
  color: #64748b;
  margin-top: 4px;
  font-weight: 500;
}

.analytics-chart-panel {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px 18px 12px 18px;
  margin: 16px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.analytics-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}

.analytics-chart-title {
  font-size: 13px;
  font-weight: 800;
  color: #f8fafc;
  display: flex;
  align-items: center;
}

.analytics-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  font-weight: 600;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-item.legend-views { color: #38bdf8; }
.legend-item.legend-unique { color: #34d399; }

.legend-color-box {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legend-color-box.box-views {
  background: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

.legend-color-box.box-unique {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.analytics-canvas-wrapper {
  position: relative;
  width: 100%;
  height: 260px;
}

#adm-analytics-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.analytics-chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(11, 17, 33, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.4);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11px;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 15px rgba(56, 189, 248, 0.2);
  z-index: 20;
  transform: translate(-50%, -115%);
  white-space: nowrap;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.analytics-two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

@media (max-width: 900px) {
  .analytics-two-col-grid {
    grid-template-columns: 1fr;
  }
}

.analytics-box {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

.analytics-box-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: rgba(15, 23, 42, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.analytics-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-transform: uppercase;
}

.analytics-table-wrap {
  max-height: 280px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.analytics-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.analytics-mini-table th {
  background: rgba(11, 17, 33, 0.9);
  color: #64748b;
  padding: 8px 12px;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: sticky;
  top: 0;
  z-index: 2;
}

.analytics-mini-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  color: #cbd5e1;
  vertical-align: middle;
}

.analytics-mini-table tr:hover td {
  background: rgba(30, 41, 59, 0.35);
}

/* Country and IP badges */
.geo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #f1f5f9;
}

.geo-flag {
  font-size: 14px;
  line-height: 1;
}

.geo-code {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  letter-spacing: 0.5px;
}

.ip-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 2px 7px;
  border-radius: 5px;
  display: inline-block;
}

.geo-bar-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 3px;
}

.geo-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  transition: width 0.4s ease;
}