/* ==========================================================================
   PSX PORTFOLIO TRACKER — DESIGN SYSTEM & STYLESHEET
   Modern, Dark Mode, High-End Financial Dashboard
   ========================================================================== */

:root {
  /* =====================================================
     NEUMORPHISM DESIGN SYSTEM TOKENS (Soft UI Financial)
     ===================================================== */

  /* Neumorphic Dark Slate Surfaces & Canvas */
  --bg-app: #1e222a;
  /* Neumorphic dark canvas */
  --bg-surface: #1e222a;
  /* Base extruded surface */
  --bg-surface-elevated: #222630;
  /* Elevated neumorphic surface */
  --bg-card: #1e222a;
  /* Neumorphic card body */
  --bg-card-hover: #222631;
  /* Subtle hover response */
  --border-subtle: rgba(255, 255, 255, 0.035);
  --border-light: rgba(255, 255, 255, 0.06);
  --border-accent: rgba(0, 102, 255, 0.4);

  /* Neumorphic Shadows (Dark Slate: dual light/dark shadows) */
  --neu-flat: 7px 7px 16px rgba(0, 0, 0, 0.55), -5px -5px 14px rgba(255, 255, 255, 0.045);
  --neu-flat-sm: 4px 4px 9px rgba(0, 0, 0, 0.5), -3px -3px 8px rgba(255, 255, 255, 0.045);
  --neu-flat-lg: 12px 12px 28px rgba(0, 0, 0, 0.65), -9px -9px 22px rgba(255, 255, 255, 0.05);
  --neu-pressed: inset 4px 4px 8px rgba(0, 0, 0, 0.6), inset -3px -3px 7px rgba(255, 255, 255, 0.045);
  --neu-pressed-sm: inset 2px 2px 6px rgba(0, 0, 0, 0.58), inset -2px -2px 5px rgba(255, 255, 255, 0.04);
  --neu-convex: linear-gradient(145deg, #21252f, #1b1e25);
  --neu-concave: linear-gradient(145deg, #1a1d24, #222631);

  /* Primary Brand: Coinbase & Electric Accents */
  --coinbase-blue: #0066ff;
  --coinbase-blue-active: #0052cc;
  --coinbase-blue-subtle: rgba(0, 102, 255, 0.15);
  --coinbase-blue-glow: rgba(0, 102, 255, 0.35);

  --psx-green: #00e676;
  /* Vibrant Emerald Up */
  --psx-green-glow: rgba(0, 230, 118, 0.25);
  --psx-green-subtle: rgba(0, 230, 118, 0.12);

  /* Financial Indicators */
  --color-pos: #00e676;
  --color-pos-bg: rgba(0, 230, 118, 0.14);
  --color-pos-glow: rgba(0, 230, 118, 0.3);

  --color-neg: #ff5252;
  --color-neg-bg: rgba(255, 82, 82, 0.14);
  --color-neg-glow: rgba(255, 82, 82, 0.3);

  --color-neutral: #94a3b8;
  --color-warning: #f59e0b;
  --color-info: #38bdf8;

  /* Typography */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Coinbase Mono', monospace;

  /* Text Colors (High Contrast on Neumorphic Slate) */
  --text-primary: #ffffff;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-inverse: #1e222a;

  /* Layout & Spacing */
  --header-height: 68px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 100px;
  --radius-full: 9999px;

  /* Shadows mapped to Neumorphic dual shadows */
  --shadow-sm: var(--neu-flat-sm);
  --shadow-md: var(--neu-flat);
  --shadow-lg: var(--neu-flat-lg);
  --shadow-glow: 0 0 16px var(--coinbase-blue-glow);
}

/* ==========================================================================
   LIGHT THEME DESIGN SYSTEM (Neumorphic Soft Grey Aesthetic)
   ========================================================================== */
body.theme-light,
[data-theme="light"] {
  /* Color Palette */
  --bg-app: #e2e8f0;
  --bg-surface: #e2e8f0;
  --bg-surface-elevated: #e6ecf4;
  --bg-card: #e2e8f0;
  --bg-card-hover: #e6edf7;
  --border-subtle: rgba(255, 255, 255, 0.5);
  --border-light: rgba(255, 255, 255, 0.7);
  --border-accent: rgba(0, 102, 255, 0.3);

  /* Neumorphic Light Mode Shadows */
  --neu-flat: 8px 8px 18px #c2c9d6, -8px -8px 18px #ffffff;
  --neu-flat-sm: 4px 4px 10px #c2c9d6, -4px -4px 10px #ffffff;
  --neu-flat-lg: 14px 14px 28px #bac1ce, -14px -14px 28px #ffffff;
  --neu-pressed: inset 4px 4px 8px #c2c9d6, inset -4px -4px 8px #ffffff;
  --neu-pressed-sm: inset 2px 2px 5px #c2c9d6, inset -2px -2px 5px #ffffff;
  --neu-convex: linear-gradient(145deg, #f2f8ff, #d8dfea);
  --neu-concave: linear-gradient(145deg, #d8dfea, #f2f8ff);

  /* Primary Brand */
  --psx-green: #059669;
  --psx-green-glow: rgba(5, 150, 105, 0.2);
  --psx-green-subtle: rgba(5, 150, 105, 0.1);

  /* Financial Indicators */
  --color-pos: #059669;
  --color-pos-bg: rgba(5, 150, 105, 0.12);
  --color-pos-glow: rgba(5, 150, 105, 0.2);

  --color-neg: #dc2626;
  --color-neg-bg: rgba(220, 38, 38, 0.1);
  --color-neg-glow: rgba(220, 38, 38, 0.2);

  --color-neutral: #64748b;
  --color-warning: #d97706;
  --color-info: #0284c7;

  /* Typography */
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-inverse: #ffffff;

  /* Shadows */
  --shadow-sm: var(--neu-flat-sm);
  --shadow-md: var(--neu-flat);
  --shadow-lg: var(--neu-flat-lg);
  --shadow-glow: 0 0 16px var(--coinbase-blue-glow);
}

/* Light Theme Root Body Overrides */
body.theme-light {
  background-color: var(--bg-app);
  color: var(--text-primary);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(0, 135, 90, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(2, 132, 199, 0.04) 0%, transparent 35%);
}

/* Header & Navigation in Light Mode */
body.theme-light .app-header {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

body.theme-light .brand-title {
  color: #0f172a;
}

body.theme-light .kse100-ticker {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

body.theme-light .kse-tag {
  background: rgba(15, 23, 42, 0.06);
  color: #334155;
}

body.theme-light .market-time-pill {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  color: #475569;
  box-shadow: var(--shadow-sm);
}

/* Buttons in Light Mode */
body.theme-light .btn-secondary {
  background: #ffffff;
  border-color: var(--border-subtle);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

body.theme-light .btn-secondary:hover {
  background: #f8fafc;
  border-color: var(--border-light);
}

body.theme-light .btn-outline {
  background: #ffffff;
  border-color: var(--border-subtle);
  color: #334155;
  box-shadow: var(--shadow-sm);
}

body.theme-light .btn-outline:hover {
  background: #f1f5f9;
  border-color: var(--border-light);
  color: var(--text-primary);
}

body.theme-light .btn-primary {
  background: linear-gradient(135deg, #00875a 0%, #00704a 100%);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 135, 90, 0.25);
}

body.theme-light .btn-primary:hover {
  background: linear-gradient(135deg, #009664 0%, #007d53 100%);
  box-shadow: 0 4px 16px rgba(0, 135, 90, 0.35);
}

body.theme-light .btn-investify {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.25);
}

/* KPI Cards in Light Mode */
body.theme-light .kpi-card {
  background: #ffffff;
  border-color: var(--border-subtle);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

body.theme-light .kpi-card:hover {
  border-color: var(--border-light);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

body.theme-light .kpi-card.highlight-card {
  background: linear-gradient(145deg, #f0fdf4 0%, #ffffff 100%);
  border-color: rgba(0, 135, 90, 0.25);
  box-shadow: 0 4px 16px rgba(0, 135, 90, 0.08);
}

body.theme-light .pkr-pill {
  background: rgba(15, 23, 42, 0.06);
  color: #64748b;
}

/* Tabs in Light Mode */
body.theme-light .tab-btn {
  color: #64748b;
}

body.theme-light .tab-btn:hover {
  color: #0f172a;
}

body.theme-light .tab-btn.active {
  color: var(--psx-green);
  border-bottom-color: var(--psx-green);
}

body.theme-light .tab-count {
  background: rgba(15, 23, 42, 0.06);
  color: #475569;
}

body.theme-light .tab-btn.active .tab-count {
  background: rgba(0, 135, 90, 0.12);
  color: var(--psx-green);
}

/* Panels & Controls in Light Mode */
body.theme-light .panel-title {
  color: #0f172a;
}

body.theme-light .search-box {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

body.theme-light .select-filter,
body.theme-light .select-sm {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

/* Data Tables in Light Mode */
body.theme-light .table-container {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

body.theme-light .data-table th {
  background: #f8fafc;
  color: #475569;
  border-bottom: 1px solid var(--border-subtle);
}

body.theme-light .data-table th.sortable:hover {
  color: #0f172a;
}

body.theme-light .data-table tbody tr:hover {
  background: #f8fafc;
}

body.theme-light .data-table tfoot td {
  background: #f8fafc;
  color: #0f172a;
  border-top: 2px solid rgba(15, 23, 42, 0.1);
}

body.theme-light .symbol-badge {
  background: rgba(0, 135, 90, 0.1);
  color: var(--psx-green);
  border: 1px solid rgba(0, 135, 90, 0.25);
}

body.theme-light .sector-badge {
  background: rgba(15, 23, 42, 0.05);
  color: #334155;
  border: 1px solid rgba(15, 23, 42, 0.09);
}

body.theme-light .weight-bar {
  background: rgba(15, 23, 42, 0.08);
}

body.theme-light .btn-table-action {
  background: #ffffff;
  border-color: var(--border-subtle);
  color: #475569;
}

body.theme-light .btn-table-action:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: var(--border-light);
}

/* Modals & Dialogs in Light Mode */
body.theme-light .modal-backdrop {
  background: rgba(15, 23, 42, 0.55);
}

body.theme-light .modal-dialog {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16);
}

body.theme-light .modal-header {
  border-bottom: 1px solid var(--border-subtle);
}

body.theme-light .modal-title {
  color: #0f172a;
}

body.theme-light .modal-close:hover {
  color: #0f172a;
}

body.theme-light .modal-footer {
  background: #f8fafc;
  border-top: 1px solid var(--border-subtle);
}

body.theme-light .form-input,
body.theme-light .form-select,
body.theme-light .form-textarea,
body.theme-light .input-text {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.15);
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

body.theme-light .form-input:focus,
body.theme-light .form-select:focus,
body.theme-light .form-textarea:focus,
body.theme-light .input-text:focus {
  border-color: var(--psx-green);
  box-shadow: 0 0 0 3px rgba(0, 135, 90, 0.15);
}

/* Dropdowns in Light Mode */
body.theme-light .dropdown-menu {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
}

body.theme-light .dropdown-item {
  color: #0f172a;
}

body.theme-light .dropdown-item:hover {
  background: #f1f5f9;
}

/* Analytics, Dividends, CGT & Leaderboard Cards in Light Mode */
body.theme-light .cgt-section,
body.theme-light .dividend-summary-card,
body.theme-light .analysis-card,
body.theme-light .benchmark-stat-card,
body.theme-light .chart-card,
body.theme-light .card {
  background: #ffffff;
  border-color: var(--border-subtle);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

body.theme-light .cgt-box,
body.theme-light .stat-tile,
body.theme-light .modal-stat-box,
body.theme-light .metric-item,
body.theme-light .screener-card,
body.theme-light .side-card-item,
body.theme-light .leaderboard-pod,
body.theme-light .caps-stock-list,
body.theme-light .cap-radar-card {
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

body.theme-light .side-card-item:hover {
  background: #f1f5f9;
}

body.theme-light .cgt-box-val,
body.theme-light .screener-card-val,
body.theme-light .stat-tile-val,
body.theme-light .m-val {
  color: #0f172a;
}

body.theme-light .stock-chart-interactive-wrap {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

body.theme-light .chart-loading {
  background: rgba(255, 255, 255, 0.88);
}

body.theme-light .mode-pill {
  color: #64748b;
}

body.theme-light .mode-pill:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.05);
}

body.theme-light .mode-pill.active {
  background: #0f172a;
  color: #ffffff;
}

body.theme-light .tf-btn {
  color: #64748b;
}

body.theme-light .tf-btn:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.06);
}

body.theme-light .tf-btn.active {
  background: #0f172a;
  color: #ffffff;
}

body.theme-light .btn-group {
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, 0.1);
}

body.theme-light .btn-toggle {
  color: #475569;
}

body.theme-light .btn-toggle.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

body.theme-light .toast {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
}

body.theme-light .rank-badge.rank-default {
  background: rgba(15, 23, 42, 0.05);
  color: #475569;
  border: 1px solid rgba(15, 23, 42, 0.1);
}

/* Base Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ----------------------------------------------------
   Layout
   ---------------------------------------------------- */
.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-main {
  flex: 1;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 28px 48px;
}

/* ----------------------------------------------------
   Header (Coinbase Top-Nav Dark)
   ---------------------------------------------------- */
.app-header {
  height: var(--header-height);
  background: var(--bg-app);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 48px;
  z-index: 100;
  max-width: 100%;
  box-sizing: border-box;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex-shrink: 1;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-logo {
  position: relative;
  width: 40px;
  height: 40px;
  background: var(--neu-convex);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--coinbase-blue);
  box-shadow: var(--neu-flat-sm);
  border: 1px solid var(--border-subtle);
}

.pak-badge {
  position: absolute;
  bottom: -4px;
  right: -6px;
  background: #004d26;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  letter-spacing: 0.5px;
}

.brand-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #ffffff;
  line-height: 1.1;
}

.brand-title span {
  color: var(--psx-green);
}

.brand-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* KSE-100 Widget in Header */
.kse100-ticker {
  background: var(--bg-app);
  box-shadow: var(--neu-pressed-sm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 7px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s;
}

.kse100-ticker:hover {
  box-shadow: var(--neu-pressed);
}

.kse-label-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kse-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-secondary);
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-neutral);
  display: inline-block;
}

.status-indicator.open {
  background-color: var(--color-pos);
  box-shadow: 0 0 8px var(--color-pos);
  animation: pulse-dot 2s infinite;
}

.status-indicator.closed {
  background-color: var(--color-neg);
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.15);
    opacity: 1;
  }

  100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
}

.status-text {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.kse-values {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.kse-points {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.kse-change {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}

.kse-change.pos,
.pos-text {
  color: var(--color-pos);
}

.kse-change.neg,
.neg-text {
  color: var(--color-neg);
}

.market-time-pill {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-app);
  box-shadow: var(--neu-flat-sm);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 6px;
}

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

/* ----------------------------------------------------
   Buttons & Controls (Neumorphic Extruded & Inset Pill Geometry)
   ---------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid transparent;
  outline: none;
  white-space: nowrap;
}

.btn:active {
  box-shadow: var(--neu-pressed-sm) !important;
  transform: scale(0.98);
}

.btn-primary {
  background: linear-gradient(135deg, #0066ff, #004ecc);
  color: #ffffff;
  font-weight: 600;
  border-radius: var(--radius-pill);
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.45), -3px -3px 9px rgba(255, 255, 255, 0.08), 0 0 16px rgba(0, 102, 255, 0.35);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0f73ff, #0056e0);
  box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.5), -4px -4px 12px rgba(255, 255, 255, 0.1), 0 0 22px rgba(0, 102, 255, 0.5);
  transform: translateY(-1px);
}

.btn-primary:active {
  box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.6), inset -2px -2px 6px rgba(255, 255, 255, 0.15) !important;
}

.btn-secondary {
  background: var(--bg-card);
  box-shadow: var(--neu-flat-sm);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
}

.btn-secondary:hover {
  box-shadow: var(--neu-flat);
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-secondary:active {
  box-shadow: var(--neu-pressed-sm) !important;
}

.btn-outline {
  background: var(--bg-app);
  box-shadow: var(--neu-flat-sm);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
}

.btn-outline:hover {
  box-shadow: var(--neu-flat);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.btn-outline:active {
  box-shadow: var(--neu-pressed-sm) !important;
}

.btn-outline strong {
  color: var(--coinbase-blue);
  font-family: var(--font-mono);
}

.btn-icon-only {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-app);
  box-shadow: var(--neu-flat-sm);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon-only:hover {
  box-shadow: var(--neu-flat);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.btn-icon-only:active {
  box-shadow: var(--neu-pressed-sm) !important;
}

.theme-toggle-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.theme-toggle-btn:hover {
  transform: scale(1.06);
}

.theme-toggle-btn svg {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

/* In Dark Mode: Show Sun icon (click to switch to light) */
body.theme-dark .theme-icon-moon,
html:not([data-theme="light"]) body:not(.theme-light) .theme-icon-moon {
  display: none !important;
}

body.theme-dark .theme-icon-sun,
html:not([data-theme="light"]) body:not(.theme-light) .theme-icon-sun {
  display: block !important;
  color: #fbbf24;
}

/* In Light Mode: Show Moon icon (click to switch to dark) */
body.theme-light .theme-icon-sun,
html[data-theme="light"] .theme-icon-sun {
  display: none !important;
}

body.theme-light .theme-icon-moon,
html[data-theme="light"] .theme-icon-moon {
  display: block !important;
  color: #6366f1;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.last-sync {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 400;
  font-family: var(--font-mono);
}

.spin-icon.spinning {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

/* Dropdown Menu */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 6px;
  min-width: 210px;
  box-shadow: var(--shadow-lg);
  display: none;
  flex-direction: column;
  z-index: 1000;
}

.dropdown-menu.show {
  display: flex !important;
}

/* Dedicated Single Trade Dropdown Menu */
.trade-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 230px;
  background: #181f2f;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
  padding: 6px 0;
  z-index: 999999;
  display: none;
  flex-direction: column;
}

.trade-dropdown-menu.show {
  display: flex !important;
}

.trade-dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: 13px;
  color: #f8fafc;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.trade-dropdown-menu .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.dropdown-item {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
}

.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.dropdown-item.text-danger {
  color: var(--color-neg);
}

.dropdown-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 0;
}

/* ----------------------------------------------------
   KPI Summary Section - Compact & Space-Efficient
   ---------------------------------------------------- */
.summary-section {
  margin-bottom: 12px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1024px) {
  .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
}

.kpi-card-cash {
  background: var(--neu-convex);
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow: var(--neu-flat), 0 0 16px rgba(56, 189, 248, 0.08);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s, border-color 0.2s;
}

.kpi-card-cash:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: var(--neu-flat-lg), 0 0 20px rgba(56, 189, 248, 0.18);
}

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  padding: 8px 11px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--neu-flat);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s;
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--neu-flat-lg);
}

.kpi-card.highlight-card {
  background: var(--neu-convex);
  border: 1px solid rgba(0, 102, 255, 0.25);
  box-shadow: var(--neu-flat), 0 0 16px rgba(0, 102, 255, 0.1);
}

.kpi-card.highlight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, #0066ff, #00e676);
}

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

.kpi-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.1px;
}

.kpi-pill {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  letter-spacing: 0.4px;
}

.pkr-pill {
  background: var(--psx-green-subtle);
  color: var(--psx-green);
  border: 1px solid rgba(0, 230, 118, 0.3);
}

.kpi-icon {
  font-size: 12px;
  flex-shrink: 0;
}

.kpi-value {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.1vw, 15.5px);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.3px;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.2;
}

.kpi-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  gap: 4px;
  margin-top: 1px;
}

.kpi-sub {
  color: #cbd5e1;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  letter-spacing: 0.2px;
  box-shadow: var(--neu-flat-sm);
  flex-shrink: 0;
  line-height: 1.2;
}
  flex-shrink: 0;
}

.kpi-badge.pos {
  background: rgba(0, 230, 118, 0.18);
  color: #00e676;
  border: 1px solid rgba(0, 230, 118, 0.4);
}

.kpi-badge.neg {
  background: rgba(255, 82, 82, 0.18);
  color: #ff5252;
  border: 1px solid rgba(255, 82, 82, 0.4);
}

.kpi-meta {
  color: #f8fafc;
  font-weight: 600;
  font-size: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ----------------------------------------------------
   Navigation Tabs (Neumorphic Inset Pill Switcher)
   ---------------------------------------------------- */
.app-tabs {
  margin-bottom: 28px;
  border-bottom: none;
  background: var(--bg-app);
  padding: 6px;
  border-radius: var(--radius-pill);
  box-shadow: var(--neu-pressed-sm);
  display: inline-flex;
  max-width: 100%;
  overflow-x: auto;
}

.tabs-list {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  align-items: center;
}

.tab-btn[data-tab="tab-sync"] {
  color: #38bdf8;
}

.tab-btn[data-tab="tab-sync"].active {
  color: #38bdf8;
}

.tab-btn[data-tab="tab-dividends"] {
  color: #f59e0b;
}

.tab-btn[data-tab="tab-dividends"].active {
  color: #f59e0b;
}

.tab-btn[data-tab="tab-bullish"] {
  color: #00e676;
}

.tab-btn[data-tab="tab-bullish"].active {
  color: #00e676;
}

.filter-group {
  display: flex;
  gap: 6px;
  background: var(--bg-app);
  padding: 4px;
  border-radius: var(--radius-pill);
  box-shadow: var(--neu-pressed-sm);
}

.filter-group .btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  transition: all 0.15s ease;
}

.filter-group .btn:hover {
  color: var(--text-primary);
}

.filter-group .btn.active {
  background: var(--bg-card);
  box-shadow: var(--neu-flat-sm);
  color: #f59e0b;
  font-weight: 700;
}

.tab-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.tab-btn:hover {
  color: var(--text-primary);
}

.tab-btn.active {
  background: var(--bg-card);
  box-shadow: var(--neu-flat-sm);
  color: var(--coinbase-blue);
  font-weight: 700;
}

.tab-count {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  box-shadow: var(--neu-pressed-sm);
}

.tab-btn.active .tab-count {
  background: var(--coinbase-blue-subtle);
  color: var(--coinbase-blue);
  box-shadow: none;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-pos);
  box-shadow: 0 0 6px var(--color-pos);
  display: inline-block;
  animation: pulse-dot 1.5s infinite;
}

/* Tab Content Visibility */
.tab-content {
  display: none;
  animation: fadeIn 0.2s ease-in-out;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----------------------------------------------------
   Panel Headers & Controls
   ---------------------------------------------------- */
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 16px;
}

.panel-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}

.panel-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.panel-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.search-box {
  background: var(--bg-app);
  box-shadow: var(--neu-pressed-sm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 250px;
  transition: all 0.2s;
}

.search-box:focus-within {
  box-shadow: var(--neu-pressed), 0 0 0 2px var(--coinbase-blue-glow);
}

.search-box input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  width: 100%;
}

.search-box svg {
  color: var(--text-muted);
}

.select-filter,
.select-sm {
  background: var(--bg-app);
  box-shadow: var(--neu-flat-sm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  outline: none;
  cursor: pointer;
  transition: all 0.2s;
}

.select-filter:focus,
.select-sm:focus {
  box-shadow: var(--neu-pressed-sm);
}

/* ----------------------------------------------------
   Data Tables (Neumorphic Extruded Slab)
   ---------------------------------------------------- */
.table-container {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  overflow-x: auto;
  box-shadow: var(--neu-flat);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}

.data-table th {
  background: rgba(22, 26, 33, 0.7);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.data-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.data-table th.sortable:hover {
  color: var(--text-primary);
}

.data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.data-table tbody tr {
  transition: background 0.15s ease;
}

.data-table tbody tr:hover {
  background: var(--bg-card-hover);
}

.data-table td.right,
.data-table th.right {
  text-align: right;
}

.data-table tfoot td {
  padding: 14px 16px;
  background: rgba(15, 21, 35, 0.85);
  border-top: 2px solid var(--border-subtle);
  border-bottom: none;
  font-weight: 700;
  white-space: nowrap;
}

.data-table td.center,
.data-table th.center {
  text-align: center;
}

/* Symbol & Company Column */
.symbol-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.symbol-badge {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  background: rgba(0, 220, 130, 0.1);
  color: var(--psx-green);
  border: 1px solid rgba(0, 220, 130, 0.2);
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.symbol-badge:hover {
  transform: translateY(-1px);
  filter: brightness(1.2);
  box-shadow: 0 2px 8px rgba(0, 220, 130, 0.25);
}

.company-info {
  display: flex;
  flex-direction: column;
}

.company-name {
  font-weight: 600;
  color: var(--text-primary);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color 0.15s ease;
}

.company-name:hover {
  color: var(--psx-green) !important;
  text-decoration: underline;
}

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

/* Sector Badges */
.sector-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  display: inline-block;
}

/* Price & Mono Cells */
.mono-val {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
}

.weight-bar-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.weight-bar {
  width: 48px;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.weight-fill {
  height: 100%;
  background: var(--psx-green);
  border-radius: 3px;
}

/* Table Row Action Buttons */
.table-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-table-action {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-table-action:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: var(--border-light);
}

.btn-table-action.btn-buy {
  background: var(--coinbase-blue-subtle);
  color: var(--coinbase-blue);
  border-color: rgba(0, 82, 255, 0.35);
}

.btn-table-action.btn-buy:hover {
  background: var(--coinbase-blue);
  color: #ffffff;
  border-color: var(--coinbase-blue);
  box-shadow: 0 2px 8px rgba(0, 82, 255, 0.3);
}

.btn-table-action.btn-sell:hover {
  background: var(--color-neg-bg);
  color: var(--color-neg);
  border-color: rgba(207, 32, 47, 0.4);
}

/* Empty State */
.empty-state {
  padding: 60px 20px;
  text-align: center;
}

.empty-state.hidden {
  display: none;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-state h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.empty-state p {
  color: var(--text-muted);
  font-size: 13px;
  max-width: 440px;
  margin: 0 auto 20px;
}

.empty-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* ----------------------------------------------------
   Analytics & CGT Tax Section
   ---------------------------------------------------- */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 22px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}

.card-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.chart-container {
  position: relative;
  height: 280px;
  width: 100%;
}

.donut-wrap {
  height: 240px;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-secondary);
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* CGT Box */
.cgt-section {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.cgt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.cgt-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
}

.cgt-box-title {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.cgt-box-val {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.cgt-box-val.highlight-tax {
  color: var(--color-warning);
}

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

.psx-rules-callout {
  background: rgba(56, 189, 248, 0.05);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  gap: 14px;
  font-size: 12px;
  line-height: 1.6;
}

.rules-icon {
  font-size: 20px;
}

.rules-content strong {
  color: var(--color-info);
  display: block;
  margin-bottom: 6px;
}

.rules-content ul {
  padding-left: 18px;
  color: var(--text-secondary);
}

/* ----------------------------------------------------
   Button Toggles & Group
   ---------------------------------------------------- */
.btn-group {
  display: inline-flex;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 4px;
}

.btn-toggle {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 1;
  text-align: center;
}

.btn-toggle.active {
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.w-100 {
  width: 100%;
}

/* ----------------------------------------------------
   Modals
   ---------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  overflow-y: auto;
}

.modal-backdrop.show {
  display: flex;
}

.modal-dialog {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 28px;
  width: 100%;
  max-width: 520px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.75), -12px -12px 35px rgba(255, 255, 255, 0.045);
  animation: modalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.modal-dialog.modal-lg {
  max-width: 980px;
  width: 94vw;
}

@keyframes modalPop {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  padding: 22px 26px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
}

.modal-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.modal-close {
  background: var(--bg-app);
  box-shadow: var(--neu-flat-sm);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
  padding: 6px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: var(--text-primary);
  box-shadow: var(--neu-flat);
  transform: translateY(-1px);
}

.modal-close:active {
  box-shadow: var(--neu-pressed-sm) !important;
}

.modal-body {
  padding: 24px 26px;
  max-height: calc(85vh - 140px);
  overflow-y: auto;
}

.modal-footer {
  padding: 18px 26px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: var(--bg-app);
}

/* Form Controls */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.btn-link {
  background: transparent;
  border: none;
  color: var(--coinbase-blue);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.form-input {
  width: 100%;
  background: var(--bg-app);
  box-shadow: var(--neu-pressed-sm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 11px 16px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
}

.form-input:focus {
  box-shadow: var(--neu-pressed), 0 0 0 2px var(--coinbase-blue-glow);
  border-color: transparent;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.input-helper {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.clickable {
  color: var(--psx-green);
  cursor: pointer;
  text-decoration: underline;
}

/* Radio Selector */
.trade-type-selector {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.radio-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-app);
  box-shadow: var(--neu-flat-sm);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.18s;
}

.radio-label input {
  display: none;
}

.radio-label:has(input:checked) {
  box-shadow: var(--neu-pressed-sm);
  background: rgba(0, 230, 118, 0.12);
  color: var(--psx-green);
  border-color: rgba(0, 230, 118, 0.3);
}

.radio-label.sell-opt:has(input:checked) {
  box-shadow: var(--neu-pressed-sm);
  background: rgba(255, 82, 82, 0.12);
  color: var(--color-neg);
  border-color: rgba(255, 82, 82, 0.3);
}

.radio-label.div-opt:has(input:checked) {
  box-shadow: var(--neu-pressed-sm);
  background: rgba(56, 189, 248, 0.12);
  color: var(--color-info);
  border-color: rgba(56, 189, 248, 0.3);
}

/* Autocomplete Box */
.input-autocomplete-wrap {
  position: relative;
}

.autocomplete-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: var(--neu-flat-lg);
}

.autocomplete-list.hidden {
  display: none;
}

.autocomplete-item {
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.15s;
}

.autocomplete-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.company-sub-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Order Summary Box */
.order-summary-box {
  background: var(--bg-app);
  box-shadow: var(--neu-pressed-sm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-top: 16px;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.summary-line strong {
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.summary-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 8px 0;
}

.summary-line.highlight {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0;
}

.summary-line.highlight strong {
  color: var(--psx-green);
  font-size: 16px;
}

/* Stock Details Modal */
.stock-modal-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stock-badge-sym {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
  background: var(--psx-green-subtle);
  color: var(--psx-green);
  border: 1px solid rgba(0, 220, 130, 0.3);
  padding: 6px 12px;
  border-radius: var(--radius-md);
}

.stock-sector-pill {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.stock-quote-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.quote-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.quote-currency {
  font-size: 18px;
  color: var(--text-secondary);
  font-weight: 600;
}

.quote-price {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 800;
  color: #ffffff;
}

.quote-change {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  margin-left: 8px;
}

.chart-timeframe-btns {
  display: flex;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 3px;
}

.mode-pill {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.mode-pill:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.mode-pill.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  font-weight: 700;
}

.tf-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tf-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.tf-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Highcharts Stock custom dark theme overrides */
.highcharts-container {
  font-family: var(--font-body) !important;
}

.highcharts-credits {
  display: none !important;
}

.highcharts-navigator-handle {
  fill: #38bdf8 !important;
  stroke: #0f172a !important;
}

.highcharts-navigator-outline {
  stroke: rgba(255, 255, 255, 0.1) !important;
}

.highcharts-scrollbar {
  display: none !important;
}

.stock-chart-interactive-wrap {
  position: relative;
  min-height: 380px;
  background: rgba(10, 15, 29, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 20px;
}

.hidden {
  display: none !important;
}

.chart-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 15, 29, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  z-index: 20;
  transition: opacity 0.2s ease;
}

.chart-loading.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.stock-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.metric-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
}

.m-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.m-val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.text-accent {
  color: var(--psx-green);
}

/* Cash Modal Specific */
.cash-current-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  margin-bottom: 18px;
}

.c-label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.c-val {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
  color: var(--psx-green);
}

/* Dividend Preview */
.dividend-net-preview {
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--color-info);
  margin-bottom: 14px;
}

.dividend-net-preview strong {
  color: #ffffff;
}

/* ----------------------------------------------------
   Toast Notifications
   ---------------------------------------------------- */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2000;
}

.toast {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  min-width: 280px;
  animation: toastSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.toast-success {
  border-left: 4px solid var(--color-pos);
}

.toast.toast-error {
  border-left: 4px solid var(--color-neg);
}

.toast.toast-info {
  border-left: 4px solid var(--color-info);
}

@keyframes toastSlide {
  from {
    transform: translateX(50px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ----------------------------------------------------
   Footer
   ---------------------------------------------------- */
.app-footer {
  border-top: 1px solid var(--border-subtle);
  background: rgba(15, 21, 35, 0.6);
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
}

/* ----------------------------------------------------
   Comprehensive Mobile & Tablet Responsive Design System
   ---------------------------------------------------- */

/* Tablet & Smaller Laptops (<= 1024px) */
@media (max-width: 1024px) {
  .app-header {
    padding: 0 18px;
    height: auto;
    min-height: 64px;
  }

  .app-main {
    padding: 20px 18px 40px;
  }

  .header-left,
  .header-right {
    gap: 14px;
  }

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

/* Mobile Devices (<= 768px) */
@media (max-width: 768px) {

  /* Layout & Header */
  .app-header {
    height: auto;
    padding: 10px 14px;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .header-left {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 8px;
  }

  .header-right {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 3px;
    scrollbar-width: none;
  }

  .header-right::-webkit-scrollbar {
    display: none;
  }

  .brand-logo {
    width: 36px;
    height: 36px;
  }

  .brand-logo svg {
    width: 22px;
    height: 22px;
  }

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

  .brand-sub {
    display: none;
    /* Hide verbose subtitle for clean mobile header */
  }

  .kse100-ticker {
    padding: 4px 8px;
    gap: 6px;
    border-radius: var(--radius-sm);
  }

  .kse-points {
    font-size: 13px;
  }

  .kse-change {
    font-size: 11px;
  }

  .market-time-pill {
    display: none;
    /* Saved for header horizontal space */
  }

  .header-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
  }

  .header-actions .btn {
    padding: 7px 11px;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 8px;
  }

  .header-actions .last-sync {
    display: none;
  }

  .app-main {
    padding: 12px 10px 36px;
    width: 100%;
  }

  /* Navigation Tabs: Fluid Horizontal Swipe */
  .app-tabs {
    margin-bottom: 14px;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .app-tabs::-webkit-scrollbar {
    display: none;
  }

  .tabs-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 2px 2px 6px;
    width: max-content;
  }

  .tab-btn {
    padding: 8px 12px;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 8px;
  }

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

  .tab-count {
    font-size: 10px;
    padding: 1px 5px;
  }

  /* Overview KPI Cards: 2x2 Grid */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  .kpi-card {
    padding: 12px 10px !important;
    border-radius: var(--radius-md) !important;
  }

  .kpi-header {
    margin-bottom: 6px;
  }

  .kpi-label {
    font-size: 11px;
  }

  .kpi-value {
    font-size: 18px !important;
    margin-bottom: 4px !important;
    line-height: 1.2;
  }

  .kpi-footer {
    font-size: 11px;
    gap: 6px;
  }

  .kpi-badge {
    font-size: 11px;
    padding: 2px 8px;
  }

  /* Panels, Search & Filters */
  .panel-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .panel-title {
    font-size: 16px;
  }

  .panel-desc {
    font-size: 11px;
  }

  .panel-controls {
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .panel-controls .search-box {
    width: 100% !important;
    max-width: 100% !important;
  }

  .panel-controls .select-filter,
  .panel-controls .select-sm,
  .panel-controls .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Horizontal Grid Containers Overrides */
  .circuit-caps-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #gainers-side-by-side-view>div {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #bullish-dossiers-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .analytics-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Tables & Touch Scrolling */
  .table-container {
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    overflow-x: auto;
    position: relative;
    box-shadow: inset -8px 0 8px -6px rgba(0, 0, 0, 0.5);
  }

  .data-table th,
  .data-table td {
    padding: 8px 10px;
    font-size: 11.5px;
  }

  .data-table tfoot td {
    padding: 10px 10px;
    font-size: 12px;
  }

  .symbol-cell {
    gap: 8px;
  }

  .symbol-badge {
    font-size: 11px;
    padding: 2px 6px;
  }

  /* Modals: App-like Bottom Sheet */
  .modal-backdrop {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .modal-dialog,
  .modal-dialog.modal-lg {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: 94vh !important;
    margin: 0 !important;
  }

  .modal-header {
    padding: 12px 14px;
  }

  .modal-body {
    padding: 12px 14px;
    max-height: calc(94vh - 120px) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-footer {
    padding: 12px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .modal-footer .btn {
    flex: 1;
    min-width: 110px;
    justify-content: center;
  }

  /* Stock Detail Modal Controls */
  .stock-modal-title-group {
    gap: 8px;
    max-width: calc(100% - 36px);
  }

  .stock-modal-title-group .stock-badge-sym {
    font-size: 13px;
    padding: 4px 8px;
  }

  .stock-modal-title-group .modal-title {
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .stock-chart-top-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .stock-chart-main-title {
    font-size: 15px !important;
  }

  .chart-mode-pill-group {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 3px !important;
    gap: 3px !important;
  }

  .chart-mode-pill-group::-webkit-scrollbar {
    display: none;
  }

  .chart-mode-pill-group .mode-pill {
    flex-shrink: 0;
    padding: 5px 10px;
    font-size: 11px;
    white-space: nowrap;
  }

  .stock-chart-timeframe-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .chart-timeframe-pills {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 3px !important;
  }

  .chart-timeframe-pills::-webkit-scrollbar {
    display: none;
  }

  .chart-timeframe-pills .tf-btn {
    flex: 1;
    min-width: 30px;
    padding: 5px 2px;
    font-size: 11px;
    text-align: center;
  }

  .stock-chart-interactive-wrap {
    min-height: 400px !important;
    padding: 8px 6px !important;
    margin-bottom: 14px !important;
  }

  #stockDetailInteractiveChart {
    height: 380px !important;
  }

  .stock-metrics-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .metric-item {
    padding: 8px 10px !important;
  }

  .metric-label {
    font-size: 10px !important;
  }

  .metric-value {
    font-size: 13px !important;
  }

  /* Support & Resistance Grid on Mobile */
  .sr-levels-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Forms & Touch Targets */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
    /* Prevents auto-zoom on iOS */
  }

  .form-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* Compact Mobile Devices (<= 480px) */
@media (max-width: 480px) {
  .app-header {
    padding: 8px 10px;
  }

  .brand-logo {
    width: 32px;
    height: 32px;
  }

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

  .kse100-ticker {
    padding: 3px 6px;
    gap: 4px;
  }

  .kse-tag {
    font-size: 9px;
  }

  .kse-points {
    font-size: 12px;
  }

  .kse-change {
    font-size: 10px;
  }

  .header-actions .btn {
    padding: 5px 8px;
    font-size: 11px;
  }

  .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .kpi-card.highlight-card {
    grid-column: 1 / -1;
    padding: 14px 12px !important;
  }

  .kpi-card.highlight-card .kpi-value {
    font-size: 20px !important;
  }

  .kpi-card {
    padding: 10px 10px !important;
    min-width: 0;
  }

  .kpi-label {
    font-size: 10.5px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kpi-value {
    font-size: 14.5px !important;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kpi-footer {
    font-size: 10px !important;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
  }

  .kpi-sub {
    font-size: 9.5px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kpi-badge {
    font-size: 9.5px !important;
    padding: 1px 5px !important;
  }

  .kpi-card-cash .btn-manage-cash,
  .kpi-card-cash .kpi-badge {
    font-size: 9.5px !important;
    padding: 2px 6px !important;
  }

  .stock-chart-interactive-wrap {
    min-height: 290px !important;
    padding: 6px 4px !important;
    margin-bottom: 12px !important;
  }

  #stockDetailInteractiveChart {
    height: 275px !important;
  }

  .stock-metrics-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .metric-item {
    padding: 6px 8px !important;
  }
}

@media (max-width: 360px) {
  .kpi-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .kpi-card.highlight-card {
    grid-column: auto;
  }

  .kpi-value {
    font-size: 17px !important;
  }
}

/* ----------------------------------------------------
   Investify.pk Integration Styles
   ---------------------------------------------------- */
.btn-investify {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
  color: #ffffff;
  font-weight: 700;
  border-color: rgba(14, 165, 233, 0.4);
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-investify:hover {
  background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4);
}

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

.investify-header-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.investify-logo-badge {
  font-size: 22px;
  width: 40px;
  height: 40px;
  background: rgba(14, 165, 233, 0.15);
  border: 1px solid rgba(14, 165, 233, 0.3);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sync-instructions-box {
  background: rgba(14, 165, 233, 0.06);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.5;
}

.sync-instructions-box strong {
  color: #38bdf8;
}

.sync-instructions-box ol {
  margin-top: 6px;
  padding-left: 20px;
  color: var(--text-secondary);
}

.sync-instructions-box kbd {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.form-textarea {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s;
}

.form-textarea:focus {
  border-color: #0ea5e9;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.file-dropzone {
  border: 2px dashed rgba(14, 165, 233, 0.3);
  border-radius: var(--radius-lg);
  padding: 40px 20px;
  text-align: center;
  background: rgba(14, 165, 233, 0.03);
  cursor: pointer;
  transition: all 0.2s;
}

.file-dropzone:hover {
  border-color: #0ea5e9;
  background: rgba(14, 165, 233, 0.06);
}

.drop-icon {
  font-size: 36px;
  margin-bottom: 12px;
}

.file-drop-sub {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.preview-header h4 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

.preview-cash {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--psx-green);
  font-weight: 700;
}

.sync-options-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}

.radio-group-inline {
  display: flex;
  gap: 16px;
}

.radio-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

.radio-inline input {
  accent-color: #0ea5e9;
}

.mb-3 {
  margin-bottom: 12px;
}

.mb-4 {
  margin-bottom: 16px;
}

.inv-tab-panel.hidden {
  display: none;
}

/* ====================================================
   Bullish Screener & Dossier Cards Styling
   ==================================================== */
.badge-strong-buy {
  background: rgba(0, 220, 130, 0.18);
  color: #00dc82;
  border: 1px solid rgba(0, 220, 130, 0.4);
  font-weight: 700;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-buy {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  font-weight: 700;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-accumulate {
  background: rgba(234, 179, 8, 0.18);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.4);
  font-weight: 700;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.category-pill {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: inline-block;
}

.dossier-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.dossier-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 220, 130, 0.35);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.dossier-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.dossier-symbol-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dossier-company-name {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.dossier-score-badge {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.dossier-score-num {
  font-size: 22px;
  font-weight: 900;
  color: #00dc82;
  font-family: var(--font-mono, monospace);
  line-height: 1;
}

.dossier-metrics-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: rgba(0, 0, 0, 0.25);
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.dossier-metric-item {
  display: flex;
  flex-direction: column;
}

.dossier-metric-label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 2px;
}

.dossier-metric-val {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-mono, monospace);
}

.dossier-thesis {
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.02);
  padding: 10px 14px;
  border-left: 3px solid #00dc82;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.dossier-section-title {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dossier-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dossier-bullets li {
  font-size: 12px;
  color: #94a3b8;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}

.dossier-bullets li::before {
  content: "•";
  color: #00dc82;
  font-size: 16px;
  line-height: 1;
}

.catalysts-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.catalyst-chip {
  background: rgba(56, 189, 248, 0.1);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.25);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.dossier-footer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}

/* 52-Week Range Visual Progress Bar & Proximity */
.range-bar-wrapper {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 140px;
}

.range-bar-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

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

.range-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
}

.badge-floor-proximity {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
}

.badge-floor-ultra {
  background: rgba(0, 220, 130, 0.18);
  color: #00dc82;
  border: 1px solid rgba(0, 220, 130, 0.35);
}

.badge-floor-mid {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.badge-floor-soft {
  background: rgba(234, 179, 8, 0.18);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.35);
}

/* Support & Resistance Styling */
.sr-table-cell {
  min-width: 175px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--font-mono, monospace);
}

.sr-row-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  gap: 6px;
}

.sr-badge-sup {
  color: #00dc82;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sr-badge-res {
  color: #ff5252;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sr-pct-pill {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}

.sr-pct-pill.sup {
  color: #00dc82;
  background: rgba(0, 220, 130, 0.15);
  border: 1px solid rgba(0, 220, 130, 0.35);
}

.sr-pct-pill.res {
  color: #ff5252;
  background: rgba(255, 82, 82, 0.15);
  border: 1px solid rgba(255, 82, 82, 0.35);
}

/* Board Meetings Calendar Styles */
.badge-bm-timing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.badge-bm-timing.badge-today {
  background: rgba(234, 179, 8, 0.2);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.5);
  animation: pulse-border 2s infinite;
}

.badge-bm-timing.badge-tomorrow {
  background: rgba(14, 165, 233, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.4);
}

.badge-bm-timing.badge-urgent {
  background: rgba(249, 115, 22, 0.2);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.4);
}

.badge-bm-timing.badge-upcoming {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.badge-bm-timing.badge-past {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.badge-holding-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(168, 85, 247, 0.18);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
  margin-left: 6px;
}

.badge-freefloat {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

body.theme-light .badge-freefloat {
  color: #0284c7;
  background: rgba(2, 132, 199, 0.1);
  border: 1px solid rgba(2, 132, 199, 0.25);
}

.tag-agenda {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 4px;
  margin-top: 2px;
}

.tag-agenda.results {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.tag-agenda.dividend {
  background: rgba(0, 220, 130, 0.15);
  color: #00dc82;
  border: 1px solid rgba(0, 220, 130, 0.3);
}

.tag-agenda.closed-period {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.tag-agenda.general {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

/* ==========================================================================
   TOP 10 GAINERS LEADERBOARD STYLES
   ========================================================================== */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
  font-family: var(--font-display);
}

.rank-badge.rank-1 {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35) 0%, rgba(217, 119, 6, 0.2) 100%);
  color: #fde047;
  border: 1.5px solid rgba(250, 204, 21, 0.6);
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.3);
}

.rank-badge.rank-2 {
  background: linear-gradient(135deg, rgba(226, 232, 240, 0.3) 0%, rgba(148, 163, 184, 0.15) 100%);
  color: #f8fafc;
  border: 1.5px solid rgba(226, 232, 240, 0.5);
  box-shadow: 0 0 10px rgba(226, 232, 240, 0.2);
}

.rank-badge.rank-3 {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.3) 0%, rgba(194, 65, 12, 0.15) 100%);
  color: #fdba74;
  border: 1.5px solid rgba(251, 146, 60, 0.5);
  box-shadow: 0 0 10px rgba(251, 146, 60, 0.2);
}

.rank-badge.rank-default {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

.gain-pct-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.16);
  color: var(--psx-green);
  border: 1px solid rgba(16, 185, 129, 0.35);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.15);
}

.side-card-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.side-card-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(16, 185, 129, 0.3);
  transform: translateX(3px);
}

.base-price-tag {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.base-price-tag .period-date {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   AUTHENTICATION & PORTFOLIO GATING STYLES
   ========================================================================== */

/* Header Guest Actions */
.guest-auth-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Header User Profile Chip */
.user-profile-dropdown {
  position: relative;
  display: inline-block;
}

.btn-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  padding: 4px 12px 4px 5px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-user-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(0, 220, 130, 0.4);
  transform: translateY(-1px);
}

.user-avatar-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00dc82, #0284c7);
  color: #0b1120;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 220, 130, 0.35);
}

.user-name-text {
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-dropdown-header {
  padding: 12px 16px 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.user-dropdown-header strong {
  font-size: 14px;
  color: var(--text-primary);
}

.user-dropdown-header span {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* Guest Portfolio Hero Card */
.portfolio-guest-card {
  position: relative;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(11, 17, 32, 0.95) 100%);
  border: 1px solid rgba(0, 220, 130, 0.25);
  border-radius: 16px;
  padding: 48px 40px;
  margin-bottom: 30px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4), 0 0 35px rgba(0, 220, 130, 0.08);
  overflow: hidden;
  text-align: center;
}

.theme-light .portfolio-guest-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-color: rgba(0, 135, 90, 0.25);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06), 0 0 25px rgba(0, 135, 90, 0.06);
}

.guest-card-glow {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 220px;
  background: radial-gradient(circle, rgba(0, 220, 130, 0.2) 0%, rgba(2, 132, 199, 0.1) 50%, transparent 80%);
  filter: blur(45px);
  pointer-events: none;
}

.guest-card-content {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
}

.guest-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 9999px;
  background: rgba(0, 220, 130, 0.12);
  border: 1px solid rgba(0, 220, 130, 0.3);
  color: var(--psx-green);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 18px;
}

.guest-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--psx-green);
  box-shadow: 0 0 8px var(--psx-green);
}

.guest-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 14px;
}

.guest-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto 30px auto;
}

.guest-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 40px;
}

.guest-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  text-align: left;
  border-top: 1px solid var(--border-subtle);
  padding-top: 30px;
}

.guest-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.theme-light .guest-feature-item {
  background: rgba(15, 23, 42, 0.02);
}

.guest-feature-item:hover {
  border-color: rgba(0, 220, 130, 0.35);
  transform: translateY(-2px);
}

.guest-feature-icon {
  font-size: 22px;
  line-height: 1;
}

.guest-feature-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.guest-feature-text strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.guest-feature-text span {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Guest Lock Tab Box */
.guest-lock-tab {
  padding: 60px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.guest-lock-box {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 40px 32px;
  text-align: center;
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}

.guest-lock-icon {
  font-size: 44px;
  display: inline-block;
  margin-bottom: 16px;
  filter: drop-shadow(0 0 16px rgba(0, 220, 130, 0.4));
}

.guest-lock-box h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.guest-lock-box p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 24px;
}

.guest-lock-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Auth Modal Styles */
.modal-auth-dialog {
  max-width: 440px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  margin: auto;
}

.auth-header-tabs {
  display: flex;
  gap: 8px;
}

.auth-tab-btn {
  background: transparent;
  border: none;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-tab-btn.active {
  color: var(--psx-green);
  background: rgba(0, 220, 130, 0.1);
}

.auth-modal-body {
  padding: 20px 24px 24px;
  overflow-y: auto;
  max-height: calc(100vh - 100px);
}

.modal-auth-dialog .form-group {
  margin-bottom: 12px;
}

.auth-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
  font-size: 13px;
  margin-bottom: 18px;
}

.auth-alert.success {
  background: rgba(0, 220, 130, 0.12);
  border-color: rgba(0, 220, 130, 0.35);
  color: var(--psx-green);
}

.auth-intro h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.auth-intro p {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 18px;
  line-height: 1.4;
}

.btn-auth-submit {
  margin-top: 10px;
  height: 44px;
  font-size: 14px;
  font-weight: 700;
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 18px 0;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border-subtle);
}

.auth-divider span {
  padding: 0 10px;
}

.auth-switch-text {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 18px;
  margin-bottom: 0;
}

.auth-switch-text a {
  color: var(--psx-green);
  font-weight: 700;
  text-decoration: none;
}

.auth-switch-text a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Top Point Contributors Section (Investify / Sarmaaya Dual Baseline Chart)
   ========================================================================== */
.contributors-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contributors-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.contributors-heading-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contributors-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}

.contrib-badge {
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  font-weight: 700;
}

.contributors-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0 0;
}

.contributors-toggle-group {
  display: inline-flex;
  background: var(--bg-surface);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  gap: 2px;
}

.contrib-toggle-btn {
  padding: 6px 16px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
  color: var(--text-secondary);
}

.contrib-toggle-btn:hover {
  color: var(--text-primary);
}

.contrib-toggle-btn.active {
  background: #0f172a;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .contrib-toggle-btn.active {
  background: #1e293b;
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.2);
}

.contributors-body {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 0;
  scrollbar-width: thin;
}

.contributors-body::-webkit-scrollbar {
  height: 6px;
}

.contributors-body::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.contrib-cols-container {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: stretch;
  min-width: 740px;
  width: 100%;
  height: 380px;
  padding: 10px 4px;
}

.contrib-col {
  flex: 1 1 0;
  min-width: 62px;
  max-width: 95px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
  border-radius: 6px;
  padding: 2px;
  transition: transform 0.15s ease, background 0.15s ease;
}

.contrib-col:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.03);
}

.contrib-top-half {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

.contrib-top-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 6px;
  text-align: center;
  user-select: none;
}

.contrib-top-sym {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 78px;
}

.contrib-top-pts {
  font-size: 11px;
  font-weight: 800;
  color: #10b981;
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
}

.contrib-bar-pos {
  width: 42px;
  max-width: 82%;
  background: #10b981;
  border-radius: 4px 4px 0 0;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.15s ease;
  box-shadow: 0 -2px 8px rgba(16, 185, 129, 0.3);
}

.contrib-col:hover .contrib-bar-pos {
  filter: brightness(1.18);
  box-shadow: 0 -4px 14px rgba(16, 185, 129, 0.55);
}

.contrib-baseline {
  width: 100%;
  height: 1px;
  background: var(--border-color);
  opacity: 0.7;
  z-index: 2;
  flex-shrink: 0;
}

.contrib-bottom-half {
  flex: 1.25;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}

.contrib-bar-neg {
  width: 42px;
  max-width: 82%;
  background: #e11d48;
  border-radius: 0 0 4px 4px;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.15s ease;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.3);
}

.contrib-col:hover .contrib-bar-neg {
  filter: brightness(1.18);
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.55);
}

.contrib-bot-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6px;
  text-align: center;
  user-select: none;
}

.contrib-bot-sym {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 78px;
}

.contrib-bot-pts {
  font-size: 11px;
  font-weight: 800;
  color: #e11d48;
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
}

.contrib-loading {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.contrib-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ==========================================================================
   Stock Modal: PSX Dividend History Card (Investify / Sarmaaya Style)
   ========================================================================== */
.stock-div-history-card {
  margin-top: 18px;
  padding: 20px 22px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.div-hist-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 12px;
}

.div-hist-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.div-hist-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0 0;
}

.div-cal-link {
  color: #38bdf8;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}

.div-cal-link:hover {
  text-decoration: underline;
  color: #0284c7;
}

.btn-share-div {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-share-div:hover {
  border-color: var(--border-light);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.div-yearly-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  margin-bottom: 18px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.div-year-pill {
  white-space: nowrap;
}

.div-year-pill strong {
  color: var(--text-primary);
  font-weight: 700;
}

.div-year-pill .div-year-amt {
  color: var(--text-primary);
  font-weight: 600;
}

.div-year-pill .div-year-count {
  color: var(--text-muted);
}

.div-table-wrap {
  width: 100%;
}

.div-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
  letter-spacing: 0.02em;
}

.div-table-body {
  display: flex;
  flex-direction: column;
}

.div-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s ease;
}

.div-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.div-row-date {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.div-row-amount {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
}

.div-expand-footer {
  text-align: center;
  padding-top: 14px;
}

.btn-toggle-all-divs {
  background: transparent;
  border: none;
  color: #38bdf8;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 12px;
  transition: color 0.15s ease;
}

.btn-toggle-all-divs:hover {
  color: #0284c7;
  text-decoration: underline;
}

/* Highcharts Dividend Marker Flags styling */
.highcharts-flags-series path {
  transition: all 0.2s ease;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

.highcharts-flags-series text {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 900 !important;
  font-size: 9px !important;
  fill: #0f172a !important;
}

.highcharts-flags-series .highcharts-point:hover path {
  filter: drop-shadow(0 2px 8px rgba(250, 204, 21, 0.6));
}

#chart-dividend-badge {
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.25);
  animation: fadeInBadge 0.3s ease-out;
}

@keyframes fadeInBadge {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Highcharts Tooltip Contrast Enforcement */
.highcharts-tooltip-box {
  fill: #0b1120 !important;
  fill-opacity: 0.96 !important;
  stroke: rgba(255, 255, 255, 0.25) !important;
}

.highcharts-tooltip text,
.highcharts-tooltip tspan {
  color: #f8fafc !important;
  fill: #f8fafc !important;
}

.highcharts-tooltip {
  color: #f8fafc !important;
}

.highcharts-tooltip>span {
  background: transparent !important;
  color: #f8fafc !important;
}

[data-theme="light"] .highcharts-tooltip-box {
  fill: #ffffff !important;
  fill-opacity: 0.98 !important;
  stroke: rgba(15, 23, 42, 0.15) !important;
}

[data-theme="light"] .highcharts-tooltip text,
[data-theme="light"] .highcharts-tooltip tspan {
  color: #0f172a !important;
  fill: #0f172a !important;
}

[data-theme="light"] .highcharts-tooltip {
  color: #0f172a !important;
}

/* ===================================================
   Broker Memo Slip Scanner Styles
   =================================================== */
.file-dropzone.drag-over {
  border-color: #00dc82 !important;
  background: rgba(0, 220, 130, 0.12) !important;
  transform: scale(1.01);
  box-shadow: 0 0 20px rgba(0, 220, 130, 0.25);
}

.badge-trade-buy {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  font-weight: 700;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
}

.badge-trade-sell {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  font-weight: 700;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
}

/* ==========================================================================
   Trade Ledger & Profit/Loss Enhancements
   ========================================================================== */
#tx-summary-ribbon {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
}

#tx-summary-ribbon:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.trade-pnl-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.trade-pnl-live {
  font-size: 10px;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  padding: 1px 4px;
  border-radius: 3px;
  display: inline-block;
  margin-left: 2px;
}

/* ==========================================================================
   Realised by Stock View & Drawers (Investify / Sarmaaya Style)
   ========================================================================== */
.realized-stock-row {
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.realized-stock-row:hover {
  background: rgba(255, 255, 255, 0.035) !important;
}

.realized-stock-row.expanded {
  background: rgba(255, 255, 255, 0.045) !important;
}

.realized-stock-row.expanded .realized-arrow {
  transform: rotate(90deg);
  color: var(--psx-green) !important;
}

.realized-drawer {
  animation: slideDrawerDown 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideDrawerDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Upcoming Dividends: Cards View Grid (Compact & Sleek)
   ========================================================================== */
.dividends-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.dividend-card {
  background: var(--bg-surface-elevated, #222630);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.dividend-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.dividend-card.is-holding {
  border-color: rgba(234, 179, 8, 0.45);
  background: linear-gradient(150deg, rgba(234, 179, 8, 0.05), var(--bg-surface-elevated, #222630) 70%);
}

.dividend-card.is-holding::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #eab308, #38bdf8);
}

/* ==========================================================================
   AI Bullish Predictor Bot Styles (Spacious, High-Readability & Fullscreen)
   ========================================================================== */

/* Header Trigger Button */
.btn-ai-bot {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(0, 220, 130, 0.14)) !important;
  border: 1px solid rgba(0, 220, 130, 0.35) !important;
  color: var(--psx-green, #00dc82) !important;
  font-weight: 600;
  position: relative;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-ai-bot:hover {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(0, 220, 130, 0.25)) !important;
  border-color: rgba(0, 220, 130, 0.6) !important;
  box-shadow: 0 0 16px rgba(0, 220, 130, 0.25);
  transform: translateY(-1px);
}

.bot-badge-hot {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  line-height: 1.2;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

/* Floating Bottom Launcher Button */
.floating-bot-trigger {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 990;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  border: 1.5px solid rgba(0, 220, 130, 0.5);
  border-radius: 999px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 220, 130, 0.25);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-bot-trigger:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: var(--psx-green, #00dc82);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7), 0 0 28px rgba(0, 220, 130, 0.4);
}

.floating-bot-icon {
  font-size: 20px;
  line-height: 1;
}

.floating-bot-label {
  font-weight: 700;
  font-size: 13px;
  color: #f8fafc;
  letter-spacing: -0.01em;
}

.floating-bot-pill {
  background: linear-gradient(135deg, #10b981, #06b6d4);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
}

.floating-bot-pulse {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 220, 130, 0.5);
  animation: botPulseWave 2.5s infinite;
  pointer-events: none;
}

@keyframes botPulseWave {
  0% { transform: scale(1); opacity: 0.8; }
  70% { transform: scale(1.15, 1.3); opacity: 0; }
  100% { transform: scale(1.15, 1.3); opacity: 0; }
}

/* Tab Banner Callout */
.bot-callout-banner {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(0, 220, 130, 0.12));
  border: 1px solid rgba(0, 220, 130, 0.3);
  border-radius: 12px;
  padding: 14px 20px;
  margin: 14px 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bot-callout-banner:hover {
  border-color: rgba(0, 220, 130, 0.55);
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(0, 220, 130, 0.18));
  box-shadow: 0 4px 20px rgba(0, 220, 130, 0.15);
}

.bot-banner-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bot-banner-icon {
  font-size: 32px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 220, 130, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 220, 130, 0.3);
}

.bot-banner-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.bot-banner-sub {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ==========================================================================
   Bot Modal Dialog: Spacious & Full-Height
   ========================================================================== */
.bot-modal-dialog {
  max-width: 1140px !important;
  width: 96vw !important;
  height: 94vh !important;
  max-height: 960px !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid rgba(0, 220, 130, 0.4) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), 0 0 50px rgba(0, 220, 130, 0.15) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Fullscreen Mode */
.bot-modal-dialog.fullscreen {
  max-width: 100vw !important;
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  border: none !important;
}

.bot-modal-header {
  padding: 14px 24px;
  background: linear-gradient(180deg, #0f172a, #131d33);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-expand-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
  width: 34px;
  height: 34px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.18s ease;
}

.modal-expand-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.bot-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bot-avatar-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.25), rgba(0, 220, 130, 0.25));
  border: 1.5px solid rgba(0, 220, 130, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  position: relative;
  box-shadow: 0 0 15px rgba(0, 220, 130, 0.25);
  flex-shrink: 0;
}

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

.bot-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.bot-engine-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--psx-green, #00dc82);
  background: rgba(0, 220, 130, 0.12);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0, 220, 130, 0.3);
}

.bot-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--psx-green, #00dc82);
  box-shadow: 0 0 8px var(--psx-green, #00dc82);
  animation: pulseLiveDot 1.6s infinite;
}

@keyframes pulseLiveDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.bot-modal-desc {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Modal Body: Must take ALL remaining vertical height with NO scrollbar here */
.bot-modal-dialog .bot-modal-body {
  max-height: none !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  position: relative;
}

/* Spotlight Top Section (Compact & Collapsible) */
.bot-spotlight-section {
  padding: 10px 22px;
  background: rgba(15, 23, 42, 0.65);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.bot-spotlight-section.collapsed .bot-spotlight-grid {
  display: none !important;
}

.bot-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.bot-spotlight-pill {
  font-size: 10px;
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.3);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
}

.bot-spotlight-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.btn-spotlight-toggle {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.15s ease;
}

.btn-spotlight-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.bot-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}

.bot-spotlight-card {
  background: var(--bg-surface-elevated, #1c2230);
  border: 1px solid rgba(0, 220, 130, 0.28);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bot-spotlight-card:hover {
  border-color: rgba(0, 220, 130, 0.6);
  background: rgba(0, 220, 130, 0.05);
  transform: translateY(-1px);
}

.bot-spotlight-prob {
  background: rgba(0, 220, 130, 0.15);
  color: var(--psx-green, #00dc82);
  border: 1px solid rgba(0, 220, 130, 0.35);
  font-weight: 800;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Strategy Chips Bar */
.bot-chips-bar {
  display: flex;
  gap: 8px;
  padding: 10px 22px;
  overflow-x: auto;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  scrollbar-width: none;
}

.bot-chips-bar::-webkit-scrollbar {
  display: none;
}

.bot-chip {
  background: var(--bg-surface-elevated, #1c2230);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.bot-chip:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

.bot-chip.active {
  background: rgba(0, 220, 130, 0.15);
  border-color: rgba(0, 220, 130, 0.55);
  color: var(--psx-green, #00dc82);
  font-weight: 700;
  box-shadow: 0 0 12px rgba(0, 220, 130, 0.2);
}

/* ==========================================================================
   Chat Container: Spacious, Scrollable, and High Readability
   ========================================================================== */
.bot-chat-container {
  flex: 1 1 auto !important;
  min-height: 420px !important;
  height: 100% !important;
  overflow-y: auto !important;
  padding: 24px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  background: rgba(8, 12, 22, 0.6);
}

.bot-chat-container::-webkit-scrollbar {
  width: 8px;
}

.bot-chat-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.bot-chat-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.bot-chat-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.bot-messages-stream {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bot-message-wrapper {
  display: flex;
  gap: 14px;
  max-width: 94%;
  animation: botFadeIn 0.25s ease-out;
}

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

.bot-msg-user {
  margin-left: auto;
  flex-direction: row-reverse;
}

.bot-msg-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 220, 130, 0.16);
  border: 1.5px solid rgba(0, 220, 130, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(0, 220, 130, 0.2);
}

.bot-msg-user .bot-msg-avatar {
  background: rgba(14, 165, 233, 0.25);
  border-color: rgba(14, 165, 233, 0.5);
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.2);
}

.bot-msg-bubble {
  background: var(--bg-surface-elevated, #1c2230);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 16px 22px;
  font-size: 15px !important;
  line-height: 1.68 !important;
  color: #f1f5f9;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}

.bot-msg-user .bot-msg-bubble {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff;
  border-color: transparent;
  font-size: 15px;
}

.bot-msg-text {
  font-size: 15px;
  line-height: 1.68;
  white-space: pre-line;
}

.bot-msg-text strong {
  color: #ffffff;
  font-weight: 700;
}

/* Rich Stock Signal Cards inside Bot Chat */
.bot-signals-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 14px;
}

.bot-signal-card {
  background: rgba(15, 23, 42, 0.92);
  border: 1.5px solid rgba(0, 220, 130, 0.35);
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.bot-signal-card:hover {
  border-color: rgba(0, 220, 130, 0.7);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 220, 130, 0.15);
}

.bot-signal-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  bottom: 0;
  background: var(--psx-green, #00dc82);
}

.bot-signal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.bot-signal-sym-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bot-signal-sym {
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 12px;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  transition: all 0.15s ease;
}

.bot-signal-sym:hover {
  background: rgba(0, 220, 130, 0.2);
  color: var(--psx-green, #00dc82);
  border-color: rgba(0, 220, 130, 0.5);
}

.bot-signal-name {
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}

.bot-signal-name:hover {
  color: var(--psx-green, #00dc82);
}

.bot-signal-prob-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bot-signal-prob-badge {
  background: linear-gradient(135deg, rgba(0, 220, 130, 0.22), rgba(14, 165, 233, 0.22));
  color: var(--psx-green, #00dc82);
  border: 1.5px solid rgba(0, 220, 130, 0.55);
  font-size: 13.5px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 0 10px rgba(0, 220, 130, 0.2);
}

.bot-signal-conviction {
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.18);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.bot-signal-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 18px;
  margin: 12px 0;
}

.bot-metric-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bot-metric-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.bot-metric-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
}

.bot-metric-val.green {
  color: var(--psx-green, #00dc82);
}

.bot-metric-val.red {
  color: var(--psx-red, #ff4343);
}

/* Catalysts Bullets */
.bot-signal-reasons {
  margin: 12px 0 14px;
  padding-left: 20px;
  font-size: 14px;
  color: #cbd5e1;
  line-height: 1.65;
}

.bot-signal-reasons li {
  margin-bottom: 6px;
}

.bot-signal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bot-signal-timeframe {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.bot-signal-btns {
  display: flex;
  gap: 10px;
}

.bot-signal-btns button {
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

/* Bottom Interactive Input Form */
.bot-input-form {
  padding: 14px 24px;
  background: #0f172a;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.bot-input-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-surface-elevated, #1c2230);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 4px 6px 4px 16px;
  transition: all 0.2s ease;
}

.bot-input-wrapper:focus-within {
  border-color: var(--psx-green, #00dc82);
  box-shadow: 0 0 16px rgba(0, 220, 130, 0.25);
}

.bot-input-icon {
  font-size: 18px;
  color: var(--text-muted);
}

.bot-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 15px;
  padding: 10px 4px;
}

.bot-input::placeholder {
  color: var(--text-muted);
  font-size: 14px;
}

.bot-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
}

.bot-reset-btn {
  padding: 7px 12px;
  font-size: 12px;
  color: var(--text-muted);
  border-radius: 8px;
}

.bot-reset-btn:hover {
  color: #fff;
}

.bot-loading-placeholder {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  color: var(--text-muted);
  font-size: 12px;
}

/* Light Theme Adjustments */
body.theme-light .btn-ai-bot {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(0, 180, 100, 0.1)) !important;
  border-color: rgba(0, 180, 100, 0.4) !important;
  color: #059669 !important;
}

body.theme-light .floating-bot-trigger {
  background: #ffffff;
  color: #0f172a;
  border-color: #10b981;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 0 15px rgba(16, 185, 129, 0.2);
}

body.theme-light .floating-bot-label {
  color: #0f172a;
}

body.theme-light .bot-modal-dialog {
  background: #ffffff !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

body.theme-light .bot-modal-header {
  background: #f8fafc;
  border-bottom-color: #e2e8f0;
}

body.theme-light .modal-expand-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

body.theme-light .bot-spotlight-section {
  background: #f1f5f9;
  border-bottom-color: #e2e8f0;
}

body.theme-light .bot-spotlight-card {
  background: #ffffff;
  border-color: #cbd5e1;
}

body.theme-light .bot-spotlight-card:hover {
  background: #f8fafc;
}

body.theme-light .bot-spotlight-sym {
  color: #0f172a;
}

body.theme-light .bot-chat-container {
  background: #f8fafc;
}

body.theme-light .bot-msg-bubble {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #0f172a;
}

body.theme-light .bot-signal-card {
  background: #ffffff;
  border-color: #cbd5e1;
}

body.theme-light .bot-signal-sym {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}

body.theme-light .bot-signal-name {
  color: #0f172a;
}

body.theme-light .bot-signal-metrics-grid {
  background: #f8fafc;
  border-color: #e2e8f0;
}

body.theme-light .bot-signal-reasons {
  color: #334155 !important;
}

body.theme-light .bot-input-form {
  background: #ffffff;
  border-top-color: #e2e8f0;
}

body.theme-light .bot-input-wrapper {
  background: #f8fafc;
  border-color: #cbd5e1;
}

body.theme-light .bot-input {
  color: #0f172a;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .bot-spotlight-grid {
    grid-template-columns: 1fr;
  }
  .bot-signal-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bot-chips-bar {
    padding: 8px 12px;
  }
  .floating-bot-label {
    display: none;
  }
  .floating-bot-trigger {
    padding: 10px;
    border-radius: 50%;
  }
  .floating-bot-pill {
    display: none;
  }
}

/* ==========================================================================
   Market Pulse: Market Breadth & Signals Today Widgets (Matching user UI)
   ========================================================================== */

.market-pulse-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.market-pulse-card {
  background: #14171f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.market-pulse-title {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.2px;
}

.market-pulse-meta {
  font-size: 13px;
  color: #64748b;
  font-weight: 400;
}

/* 1. Market Breadth Styles */
.market-breadth-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.market-breadth-bar-container {
  width: 100%;
  margin-bottom: 10px;
}

.market-breadth-bar {
  display: flex;
  width: 100%;
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: #1e293b;
  gap: 2px;
}

.breadth-seg {
  height: 100%;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.breadth-advancing {
  background: #00dc82;
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}

.breadth-unchanged {
  background: #475569;
}

.breadth-declining {
  background: #ef4444;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

.market-breadth-metrics {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
}

.breadth-metric-item {
  display: flex;
  align-items: center;
  gap: 3px;
}

.breadth-metric-item.text-success {
  color: #00dc82;
}

.breadth-metric-item.text-muted {
  color: #64748b;
  font-weight: 500;
}

.breadth-metric-item.text-danger {
  color: #ef4444;
}

.breadth-arrow {
  font-size: 9px;
}

/* 2. Signals Today Carousel Styles */
.signals-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

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

.signals-accent-pill {
  display: inline-block;
  width: 3.5px;
  height: 16px;
  background: #eab308;
  border-radius: 2px;
}

.signals-header-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.signals-nav-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.signals-nav-btn:hover {
  border-color: #eab308;
  color: #ffffff;
  background: rgba(234, 179, 8, 0.12);
}

.signals-counter {
  font-size: 13px;
  color: #94a3b8;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
  padding: 0 4px;
  user-select: none;
}

/* Content Box */
.signals-content-box {
  margin: 14px 0 10px 0;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.signals-content-box:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(234, 179, 8, 0.35);
  transform: translateY(-1px);
}

.signal-badge-call {
  border: 1px solid rgba(234, 179, 8, 0.45);
  background: rgba(234, 179, 8, 0.06);
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 170px;
  flex-shrink: 0;
}

.signal-call-title {
  color: #facc15;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
}

.signal-call-subtitle {
  color: #ca8a04;
  font-size: 11px;
  margin-top: 3px;
  line-height: 1.2;
}

.signal-symbol-info {
  flex: 1;
  min-width: 0;
}

.signal-symbol-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.signal-symbol {
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.3px;
}

.signal-company-name {
  color: #94a3b8;
  font-size: 13.5px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.signal-metrics-row {
  color: #64748b;
  font-size: 12px;
  margin-top: 4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
}

.signal-tag-row {
  color: #64748b;
  font-size: 12px;
  margin-top: 2px;
}

.signal-price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
}

.signal-price {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
}

.signal-return-pill {
  background: rgba(0, 220, 130, 0.15);
  color: #00dc82;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: 4px;
  white-space: nowrap;
}

.signal-return-pill.negative {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* Dots */
.signals-dots-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 12px 0 8px 0;
}

.signal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: all 0.25s ease;
}

.signal-dot:hover {
  background: rgba(255, 255, 255, 0.5);
}

.signal-dot.active {
  width: 22px;
  height: 5px;
  border-radius: 3px;
  background: #ffffff;
}

/* Footer */
.signals-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.signals-disclaimer {
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.4;
  flex: 1;
  min-width: 240px;
}

.signals-highlight {
  color: #eab308;
  font-weight: 600;
}

.signals-view-all-link {
  color: #eab308;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.signals-view-all-link:hover {
  color: #facc15;
  text-decoration: underline;
}

/* Light Theme Support */
body.theme-light .market-pulse-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

body.theme-light .market-pulse-title {
  color: #0f172a;
}

body.theme-light .market-pulse-meta {
  color: #64748b;
}

body.theme-light .market-breadth-bar {
  background: #e2e8f0;
}

body.theme-light .breadth-unchanged {
  background: #94a3b8;
}

body.theme-light .signals-content-box {
  background: #f8fafc;
  border-color: #e2e8f0;
}

body.theme-light .signals-content-box:hover {
  background: #f1f5f9;
  border-color: rgba(234, 179, 8, 0.5);
}

body.theme-light .signal-symbol {
  color: #0f172a;
}

body.theme-light .signal-price {
  color: #0f172a;
}

body.theme-light .signal-dot {
  background: rgba(0, 0, 0, 0.2);
}

body.theme-light .signal-dot.active {
  background: #0f172a;
}

body.theme-light .signals-nav-btn {
  border-color: #cbd5e1;
  color: #64748b;
}

body.theme-light .signals-nav-btn:hover {
  border-color: #eab308;
  color: #0f172a;
  background: rgba(234, 179, 8, 0.1);
}

/* Responsive */
/* ==========================================================================
   PSX Portal Top Navigation Bar (Matching user UI)
   ========================================================================== */

.portal-top-nav {
  height: 48px;
  background: #080b10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 0;
  z-index: 150;
  width: 100%;
  box-sizing: border-box;
}

.portal-nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 20px;
  max-width: 100%;
  box-sizing: border-box;
  gap: 12px;
}

/* Brand */
.portal-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
  text-decoration: none;
}

.portal-logo-badge {
  background: #facc15;
  color: #000000;
  width: 22px;
  height: 22px;
  border-radius: 4.5px;
  font-weight: 800;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 2px 6px rgba(250, 204, 21, 0.3);
}

.portal-brand-text {
  font-weight: 700;
  font-size: 15px;
  color: #ffffff;
  letter-spacing: -0.2px;
}

.portal-brand-highlight {
  color: #facc15;
}

/* Nav Links & Tab Switcher Bar - Compact, Sleek, No Scrolling Needed */
.portal-nav-items {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 8px;
  flex: 1;
  min-width: 0;
  overflow: visible;
}

.portal-nav-items::-webkit-scrollbar {
  display: none;
}

.portal-nav-link {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  user-select: none;
  flex-shrink: 0;
}

.portal-tab-svg {
  display: none !important; /* Hide heavy icons so all options fit cleanly in the bar */
}

.portal-nav-link:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.05);
}

/* Active State - Clean Minimalist Dark Pill */
.portal-nav-link.active {
  color: #ffffff;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Specific Accent Links (Unified to clean minimal palette) */
.portal-nav-link.portal-link-gold,
.portal-nav-link.portal-link-green,
.portal-nav-link.portal-link-sync {
  color: #94a3b8;
}

.portal-nav-link.portal-link-gold:hover,
.portal-nav-link.portal-link-green:hover,
.portal-nav-link.portal-link-sync:hover {
  color: #f1f5f9;
}

.portal-nav-link.portal-link-gold.active,
.portal-nav-link.portal-link-green.active,
.portal-nav-link.portal-link-sync.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

/* Portal Badges - Clean, Consistent, Monochrome Neutral Pill */
.portal-badge,
.portal-badge-blue,
.portal-badge-cyan,
.portal-badge-green,
.portal-badge-gold,
.portal-badge-purple,
.portal-badge-gray {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  padding: 0.5px 5.5px;
  line-height: 1.2;
  margin-left: 2px;
  background: rgba(255, 255, 255, 0.07);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.15s ease;
}

.portal-nav-link:hover .portal-badge,
.portal-nav-link:hover .portal-badge-blue,
.portal-nav-link:hover .portal-badge-cyan,
.portal-nav-link:hover .portal-badge-green,
.portal-nav-link:hover .portal-badge-gold,
.portal-nav-link:hover .portal-badge-purple,
.portal-nav-link:hover .portal-badge-gray {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.11);
}

.portal-nav-link.active .portal-badge,
.portal-nav-link.active .portal-badge-blue,
.portal-nav-link.active .portal-badge-cyan,
.portal-nav-link.active .portal-badge-green,
.portal-nav-link.active .portal-badge-gold,
.portal-nav-link.active .portal-badge-purple,
.portal-nav-link.active .portal-badge-gray {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.22);
}

.portal-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
  margin-left: 2px;
}

.portal-live-dot.portal-dot-blue {
  background: #0ea5e9;
  box-shadow: 0 0 8px #0ea5e9;
  animation: portalPulseBlue 1.8s infinite ease-in-out;
}

@keyframes portalPulseBlue {
  0%, 100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
    box-shadow: 0 0 12px #38bdf8;
  }
}

@keyframes portalPulse {
  0%, 100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
    box-shadow: 0 0 10px #00dc82;
  }
}

/* Dropdown */
.portal-dropdown-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.portal-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.portal-dropdown-arrow {
  font-size: 10px;
  margin-left: 2px;
  color: #94a3b8;
}

.portal-dropdown-content {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 210px;
  background: #141822;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  padding: 6px 0;
  z-index: 200;
}

.portal-user-dropdown {
  left: auto;
  right: 0;
  min-width: 220px;
}

.portal-dropdown-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: #cbd5e1;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
}

.portal-dropdown-row:hover {
  background: rgba(250, 204, 21, 0.08);
  color: #facc15;
}

.portal-dropdown-row.text-danger:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.portal-dropdown-icon {
  font-size: 14px;
}

.portal-dropdown-separator {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 6px 0;
}

.portal-user-menu-header {
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
}

.portal-user-menu-header strong {
  color: #ffffff;
  font-size: 13px;
}

.portal-user-menu-header span {
  color: #94a3b8;
  font-size: 11.5px;
}

/* Actions Right */
.portal-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.portal-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.portal-search-svg {
  position: absolute;
  left: 9px;
  color: #64748b;
  pointer-events: none;
}

.portal-search-field {
  height: 30px;
  width: 190px;
  background: #12161f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 0 24px 0 28px;
  color: #ffffff;
  font-size: 12px;
  outline: none;
  transition: all 0.2s ease;
  font-family: inherit;
}

.portal-search-field::placeholder {
  color: #64748b;
}

.portal-search-field:focus {
  width: 240px;
  border-color: #facc15;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.15);
}

.portal-search-reset {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
}

.portal-search-reset:hover {
  color: #ffffff;
}

.portal-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 310px;
  max-height: 380px;
  overflow-y: auto;
  background: #141822;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6);
  z-index: 220;
  padding: 4px 0;
}

.portal-search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s ease;
}

.portal-search-item:last-child {
  border-bottom: none;
}

.portal-search-item:hover {
  background: rgba(250, 204, 21, 0.08);
}

.portal-search-item-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.portal-search-symbol {
  font-weight: 700;
  font-size: 13.5px;
  color: #ffffff;
}

.portal-search-name {
  font-size: 11.5px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal-search-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: 8px;
}

.portal-search-price {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  font-family: monospace;
}

.portal-search-change {
  font-size: 11px;
  font-weight: 600;
}

.portal-auth-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.portal-theme-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.portal-theme-btn:hover {
  color: #facc15;
  border-color: rgba(250, 204, 21, 0.4);
  background: rgba(250, 204, 21, 0.08);
}

.portal-signin-link {
  background: transparent;
  border: none;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 6px;
  transition: color 0.15s ease;
  font-family: inherit;
}

.portal-signin-link:hover {
  color: #ffffff;
}

.portal-signup-btn {
  background: transparent;
  border: 1px solid #facc15;
  color: #facc15;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.portal-signup-btn:hover {
  background: #facc15;
  color: #000000;
}

.portal-user-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  color: #ffffff;
  font-size: 12.5px;
  font-family: inherit;
}

.portal-user-chip:hover {
  border-color: rgba(250, 204, 21, 0.4);
}

.portal-user-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0ea5e9;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portal-user-name {
  font-weight: 600;
}

/* Light Theme Portal Nav */
body.theme-light .portal-top-nav {
  background: #ffffff;
  border-bottom-color: #e2e8f0;
}

body.theme-light .portal-brand-text {
  color: #0f172a;
}

body.theme-light .portal-nav-link {
  color: #64748b;
}

body.theme-light .portal-nav-link:hover {
  color: #0f172a;
  background: rgba(0, 0, 0, 0.04);
}

body.theme-light .portal-nav-link.active {
  color: #0f172a;
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
}

body.theme-light .portal-badge {
  background: rgba(0, 0, 0, 0.06);
  color: #64748b;
  border-color: rgba(0, 0, 0, 0.08);
}

body.theme-light .portal-nav-link.active .portal-badge {
  background: rgba(0, 0, 0, 0.12);
  color: #0f172a;
}

body.theme-light .portal-search-field {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

body.theme-light .portal-search-dropdown,
body.theme-light .portal-dropdown-content {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

body.theme-light .portal-dropdown-row {
  color: #334155;
}

body.theme-light .portal-search-symbol {
  color: #0f172a;
}

body.theme-light .portal-search-price {
  color: #0f172a;
}

body.theme-light .portal-signin-link {
  color: #334155;
}

body.theme-light .portal-signin-link:hover {
  color: #0f172a;
}

/* Responsive Layout for Portal Top Nav:
   On screens <= 1260px (including 1024px), arrange into 2 clean rows:
   Row 1: Brand on Left, Search + Theme + Auth on Right.
   Row 2: Options Bar with FULL 100% width, NEVER scrolling horizontally!
*/
@media (max-width: 1260px) {
  .portal-top-nav {
    height: auto;
    min-height: 48px;
    position: sticky;
    top: 0;
    z-index: 150;
    padding: 6px 0 6px;
    background: #080b10;
  }

  .portal-nav-container {
    flex-wrap: wrap;
    padding: 0 16px;
    gap: 8px 12px;
    height: auto;
  }

  .portal-brand {
    order: 1;
  }

  .portal-nav-actions {
    order: 2;
    margin-left: auto;
    gap: 10px;
  }

  .portal-search-field {
    width: 150px;
    font-size: 11.5px;
    height: 28px;
  }

  .portal-search-field:focus {
    width: 190px;
  }

  /* Full-width Options Bar row - Never scroll horizontally */
  .portal-nav-items {
    order: 3;
    width: 100%;
    margin: 4px 0 0;
    padding: 4px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap; /* Wraps instead of scrolling! */
    overflow: visible;
  }

  .portal-nav-link {
    padding: 4px 8px;
    font-size: 11.5px;
    flex-shrink: 0;
  }

  .portal-badge {
    font-size: 9px;
    padding: 0.5px 4.5px;
  }

  .psx-ticker-tape {
    position: relative;
    top: auto;
  }

  .app-header {
    position: relative;
    top: auto;
  }
}

@media (max-width: 600px) {
  .portal-top-nav {
    padding: 5px 0 4px;
  }

  .portal-nav-container {
    padding: 0 10px;
    gap: 6px;
  }

  .portal-search-field {
    width: 115px;
  }

  .portal-search-field:focus {
    width: 145px;
  }

  .portal-nav-items {
    gap: 3px;
    padding-top: 3px;
  }

  .portal-nav-link {
    padding: 3.5px 6.5px;
    font-size: 11px;
  }
}

  .portal-nav-container {
    padding: 0 8px;
    gap: 6px;
  }

  .portal-brand-text {
    font-size: 13.5px;
  }

  .portal-logo-badge {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }

  .portal-search-field {
    width: 88px;
    height: 26px;
    font-size: 10.5px;
    padding: 0 16px 0 22px;
  }

  .portal-search-field:focus {
    width: 120px;
  }

  .portal-theme-btn {
    width: 28px;
    height: 28px;
  }

  .portal-user-chip {
    padding: 3px 6px;
    font-size: 11px;
    gap: 4px;
  }

  .portal-user-avatar {
    width: 20px;
    height: 20px;
    font-size: 9px;
  }

  .portal-nav-link {
    padding: 4px 8px;
    font-size: 11px;
    gap: 4px;
  }
}

/* ==========================================================================
   Compact Circuit Breaker Radar Cards (Upper Cap & Lower Cap)
   ========================================================================== */
.circuit-caps-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

@media (max-width: 860px) {
  .circuit-caps-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

.cap-radar-card {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: var(--neu-flat);
  position: relative;
  overflow: hidden;
}

.cap-radar-card.upper-cap-card {
  border: 1px solid rgba(0, 220, 130, 0.25);
  box-shadow: 0 4px 16px rgba(0, 220, 130, 0.05);
}

.cap-radar-card.lower-cap-card {
  border: 1px solid rgba(239, 68, 68, 0.25);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.05);
}

.cap-radar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.cap-radar-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cap-radar-icon {
  font-size: 15px;
  line-height: 1;
}

.cap-radar-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

.cap-radar-subtitle {
  font-size: 10px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.2;
}

.cap-list-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cap-row-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
  padding: 4.5px 8px;
  transition: background 0.15s ease, transform 0.15s ease;
}

.cap-row-upper {
  background: rgba(0, 220, 130, 0.05);
  border: 1px solid rgba(0, 220, 130, 0.14);
}

.cap-row-upper:hover {
  background: rgba(0, 220, 130, 0.09);
  border-color: rgba(0, 220, 130, 0.3);
}

.cap-row-lower {
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.14);
}

.cap-row-lower:hover {
  background: rgba(239, 68, 68, 0.09);
  border-color: rgba(239, 68, 68, 0.3);
}

.cap-row-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.cap-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1.5px 5px;
  border-radius: 3px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.cap-badge-upper {
  background: rgba(0, 220, 130, 0.15);
  color: #00dc82;
  border: 1px solid rgba(0, 220, 130, 0.3);
}

.cap-badge-lower {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.cap-name-box {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.cap-stock-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  line-height: 1.2;
}

.cap-stock-name:hover {
  color: #38bdf8;
}

.cap-limit-sub {
  font-size: 9px;
  color: #94a3b8;
  line-height: 1;
  margin-top: 1px;
}

.cap-row-right {
  text-align: right;
  flex-shrink: 0;
  margin-left: 8px;
}

.cap-price-val {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
}

.cap-price-upper {
  color: #00dc82;
}

.cap-price-lower {
  color: #ef4444;
}

.cap-status-pill {
  font-size: 8.5px;
  padding: 0.5px 4px;
  border-radius: 3px;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
}

.cap-pill-upper-lock {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.cap-pill-upper-fire {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.cap-pill-lower-floor {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

body.theme-light .cap-row-upper {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

body.theme-light .cap-row-lower {
  background: #fef2f2;
  border-color: #fecaca;
}

body.theme-light .cap-limit-sub {
  color: #64748b;
}

/* ==========================================================================
   Continuous Horizontal Marquee PSX Ticker Tape
   ========================================================================== */

.psx-ticker-tape {
  width: 100%;
  height: 32px;
  background: #090c12;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  position: sticky;
  top: 48px;
  z-index: 140;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.psx-ticker-inner {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: psxTickerLoop 45s linear infinite;
  will-change: transform;
}

.psx-ticker-inner:hover {
  animation-play-state: paused;
}

@keyframes psxTickerLoop {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  font-size: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.ticker-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.ticker-sym {
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.ticker-price {
  color: #cbd5e1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
}

.ticker-pct {
  font-weight: 600;
  font-size: 11.5px;
}

.ticker-pct.pos {
  color: #00dc82;
}

.ticker-pct.neg {
  color: #ef4444;
}

/* ==========================================================================
   Pakistan Stock Exchange Overview Dashboard & Indices Sparklines
   ========================================================================== */

.market-overview-wrapper {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.market-main-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 4px;
}

.market-header-left {
  flex: 1;
  min-width: 280px;
}

.market-main-title {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.4px;
  margin: 0 0 6px 0;
}

.market-main-subtitle {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.5;
}

.market-link-gold {
  color: #eab308;
  font-weight: 600;
  text-decoration: none;
  margin-left: 6px;
  transition: color 0.15s ease, text-decoration 0.15s ease;
}

.market-link-gold:hover {
  color: #facc15;
  text-decoration: underline;
}

.market-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.market-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 500;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #64748b;
}

.market-clock-pkt {
  font-size: 11.5px;
  color: #64748b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
}

/* 4 Indices Grid */
.indices-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.index-card {
  background: #141720;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 18px 12px 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.index-card:hover {
  border-color: rgba(0, 220, 130, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

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

.index-card-badge {
  color: #cbd5e1;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.index-card-change {
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.index-card-change.pos {
  background: rgba(0, 220, 130, 0.15);
  color: #00dc82;
}

.index-card-change.neg {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.index-card-val {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}

.index-card-sparkline {
  width: 100%;
  height: 38px;
  margin-top: auto;
}

.sparkline-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ==========================================================================
   Pre-Order Suggestions Section (Matching User Screenshot)
   ========================================================================== */

.pre-order-section-card {
  background: #141720;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.pre-order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

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

.pre-order-icon-badge {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 3px 10px rgba(234, 179, 8, 0.35);
  flex-shrink: 0;
}

.pre-order-title {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.2px;
}

.pre-order-sub {
  font-size: 12.5px;
  color: #94a3b8;
  margin: 2px 0 0 0;
}

.pre-order-as-of {
  font-size: 12px;
  color: #64748b;
}

/* Grid of Pre-Order Cards */
.pre-order-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.pre-order-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pre-order-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(234, 179, 8, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.pre-order-card-header {
  margin-bottom: 12px;
}

.pre-order-sym-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pre-order-sym {
  font-weight: 800;
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 0.3px;
}

.pre-order-sentiment {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.pre-order-sentiment.sideways {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}

.pre-order-sentiment.bullish {
  background: rgba(16, 185, 129, 0.18);
  color: #10b981;
}

.pre-order-shariah {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0, 220, 130, 0.12);
  color: #00dc82;
}

.pre-order-company {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Two Price Boxes */
.pre-order-price-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.pre-order-box {
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
}

.pre-order-box.current-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.pre-order-box.target-box {
  background: rgba(234, 179, 8, 0.06);
  border: 1px solid rgba(234, 179, 8, 0.45);
}

.pre-order-box-label {
  font-size: 10px;
  color: #64748b;
  font-weight: 600;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.pre-order-box-val {
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
}

.pre-order-box-val.gold {
  color: #facc15;
}

/* Proximity Bar */
.pre-order-bar-container {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}

.pre-order-bar {
  height: 100%;
  background: #facc15;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.pre-order-metrics-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  margin-bottom: 10px;
}

.pre-order-diff {
  color: #cbd5e1;
  font-weight: 500;
}

.pre-order-tested {
  color: #64748b;
}

.pre-order-note {
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Light theme support */
body.theme-light .psx-ticker-tape {
  background: #f1f5f9;
  border-bottom-color: #cbd5e1;
}

body.theme-light .ticker-sym {
  color: #0f172a;
}

body.theme-light .ticker-price {
  color: #334155;
}

body.theme-light .market-main-title {
  color: #0f172a;
}

body.theme-light .index-card,
body.theme-light .pre-order-section-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

body.theme-light .index-card-badge {
  color: #0f172a;
}

body.theme-light .index-card-val {
  color: #0f172a;
}

body.theme-light .pre-order-title {
  color: #0f172a;
}

body.theme-light .pre-order-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

body.theme-light .pre-order-sym {
  color: #0f172a;
}

body.theme-light .pre-order-box.current-box {
  background: #ffffff;
  border-color: #e2e8f0;
}

body.theme-light .pre-order-box-val {
  color: #0f172a;
}

/* Responsive */
@media (max-width: 1024px) {
  .indices-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pre-order-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .indices-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Stock Performance Section (Investify / Sarmaaya Return Strip)
   ========================================================================== */
.stock-perf-card {
  background: var(--bg-surface-elevated, #0f131f);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 10px);
  padding: 16px 18px;
  margin-bottom: 20px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.stock-perf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.stock-perf-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #f8fafc);
  letter-spacing: -0.2px;
  margin: 0;
}

.stock-perf-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 8px;
  width: 100%;
}

.perf-pill {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  transition: all 0.15s ease;
  min-width: 0;
}

.perf-pill:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.perf-tf {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.3px;
  line-height: 1;
}

.perf-val {
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  line-height: 1.1;
  white-space: nowrap;
}

.perf-val.pos {
  color: #00dc82;
}

.perf-val.neg {
  color: #ef4444;
}

.perf-val.zero {
  color: #94a3b8;
}

/* Light Theme overrides */
body.theme-light .stock-perf-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

body.theme-light .stock-perf-title {
  color: #0f172a;
}

body.theme-light .perf-pill {
  background: #f8fafc;
  border-color: #e2e8f0;
}

body.theme-light .perf-pill:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

body.theme-light .perf-tf {
  color: #64748b;
}

/* Responsive scrolling on small screens */
@media (max-width: 860px) {
  .stock-perf-card {
    padding: 12px 12px;
    margin-top: 14px;
    border-radius: 10px;
  }

  .stock-perf-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .stock-perf-grid {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
  }

  .stock-perf-grid::-webkit-scrollbar {
    display: none;
  }

  .perf-pill {
    flex: 0 0 60px;
    padding: 6px 4px;
    border-radius: 6px;
    text-align: center;
  }

  .perf-tf {
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 2px;
  }

  .perf-val {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: -0.2px;
  }
}

@media (max-width: 380px) {
  .perf-pill {
    flex: 0 0 54px;
    padding: 5px 3px;
  }
  .perf-tf {
    font-size: 9.5px;
  }
  .perf-val {
    font-size: 10.5px;
  }
}

/* ==========================================================================
   Support & Resistance Liquidity Ladder KPI (Investify / AI Calls Style)
   ========================================================================== */
.sr-ladder-card {
  background: var(--bg-surface-elevated, #0e121c);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 10px);
  padding: 16px 20px;
  margin-top: 20px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.sr-ladder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.sr-ladder-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #f8fafc);
  letter-spacing: -0.2px;
}

.sr-ladder-meta {
  font-size: 11.5px;
  color: #94a3b8;
  font-family: var(--font-mono, monospace);
  margin-left: auto;
}

.sr-ladder-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sr-ladder-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 26px;
}

.sr-ladder-tag {
  font-size: 13px;
  font-weight: 800;
  min-width: 38px;
  letter-spacing: 0.3px;
  line-height: 1;
}

.sr-ladder-tag.r-tag {
  color: #ef4444;
}

.sr-ladder-tag.now-tag {
  color: #facc15;
}

.sr-ladder-tag.s-tag {
  color: #22c55e;
}

.sr-ladder-track {
  flex: 1;
  height: 20px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 5px;
  padding: 0 2px;
  overflow: hidden;
}

.sr-ladder-bar {
  height: 17px;
  border-radius: 4px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.sr-ladder-bar.r-bar {
  background: #5a1e26;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.sr-ladder-bar.now-bar {
  background: #ba8c1c;
  border: 1px solid rgba(250, 204, 21, 0.45);
}

.sr-ladder-bar.s-bar {
  background: #14492d;
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.sr-ladder-values {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 220px;
  justify-content: flex-end;
  font-family: var(--font-mono, monospace);
}

.sr-val-price {
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
  min-width: 58px;
  text-align: right;
}

.sr-val-price.now-price {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
}

.sr-val-pct {
  font-size: 12px;
  font-weight: 600;
  min-width: 64px;
  text-align: right;
  color: #94a3b8;
}

.sr-val-touch {
  font-size: 11.5px;
  color: #64748b;
  min-width: 65px;
  text-align: right;
}

.sr-val-pct.empty,
.sr-val-touch.empty {
  visibility: hidden;
}

.sr-ladder-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.6;
}

.sr-ladder-link {
  color: #eab308;
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
}

.sr-ladder-link:hover {
  text-decoration: underline;
  color: #facc15;
}

/* Light Theme overrides */
body.theme-light .sr-ladder-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

body.theme-light .sr-ladder-title {
  color: #0f172a;
}

body.theme-light .sr-ladder-meta {
  color: #64748b;
}

body.theme-light .sr-ladder-track {
  background: #f1f5f9;
}

body.theme-light .sr-ladder-bar.r-bar {
  background: #fee2e2;
  border-color: #fca5a5;
}

body.theme-light .sr-ladder-bar.now-bar {
  background: #fef08a;
  border-color: #fde047;
}

body.theme-light .sr-ladder-bar.s-bar {
  background: #dcfce7;
  border-color: #86efac;
}

body.theme-light .sr-val-price {
  color: #0f172a;
}

body.theme-light .sr-val-price.now-price {
  color: #000000;
}

body.theme-light .sr-val-pct {
  color: #475569;
}

body.theme-light .sr-val-touch {
  color: #64748b;
}

body.theme-light .sr-ladder-footer {
  border-top-color: #e2e8f0;
  color: #64748b;
}

/* Responsive */
@media (max-width: 640px) {
  .sr-ladder-card {
    padding: 14px 12px;
    margin-top: 14px;
    border-radius: 10px;
  }

  .sr-ladder-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 12px;
  }

  .sr-ladder-meta {
    font-size: 10.5px;
    color: #64748b;
  }

  .sr-ladder-row {
    gap: 6px;
    height: 24px;
    margin-bottom: 5px;
  }

  .sr-ladder-tag {
    width: 28px;
    font-size: 11px;
    font-weight: 700;
  }

  .sr-ladder-track {
    flex: 1;
    height: 14px;
  }

  .sr-ladder-bar {
    height: 100%;
    border-radius: 3px;
  }

  .sr-ladder-values {
    min-width: 105px;
    gap: 4px;
    justify-content: flex-end;
  }

  .sr-val-price {
    font-size: 11.5px;
  }

  .sr-val-pct {
    font-size: 10px;
    min-width: 44px;
    text-align: right;
  }

  .sr-val-touch {
    display: none;
  }

  .sr-ladder-footer {
    font-size: 11px;
    line-height: 1.45;
    padding-top: 10px;
    margin-top: 10px;
  }
}

@media (max-width: 380px) {
  .sr-ladder-values {
    min-width: 92px;
    gap: 3px;
  }

  .sr-ladder-tag {
    width: 25px;
    font-size: 10px;
  }

  .sr-val-price {
    font-size: 10.5px;
  }

  .sr-val-pct {
    font-size: 9.5px;
    min-width: 38px;
  }
}

/* ==========================================================================
   Support, Resistance & Targets Card (Investify / AI Calls Style)
   ========================================================================== */
.sr-targets-card {
  background: var(--bg-surface-elevated, #0e121c);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 10px);
  padding: 18px 20px;
  margin-top: 20px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.sr-targets-header {
  margin-bottom: 18px;
}

.sr-targets-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #f8fafc);
  letter-spacing: -0.2px;
  margin: 0 0 10px 0;
}

.sr-targets-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.target-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #e2e8f0;
  letter-spacing: 0.2px;
}

.target-pill-regime {
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.target-pill-regime.regime-bearish {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #ef4444;
}

.target-pill-regime.regime-bullish {
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #22c55e;
}

.target-pill-regime.regime-neutral {
  background: rgba(234, 179, 8, 0.14);
  border: 1px solid rgba(234, 179, 8, 0.35);
  color: #facc15;
}

.sr-targets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 28px;
  margin-bottom: 16px;
}

.target-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

.target-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
  margin-bottom: 3px;
}

.target-icon {
  font-size: 13px;
}

.target-val {
  font-size: 14.5px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: #f8fafc;
  line-height: 1.2;
}

.target-val.text-green {
  color: #00dc82;
}

.target-val.text-red {
  color: #ef4444;
}

.target-score-explainer-wrap {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.target-score-toggle-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease;
}

.target-score-toggle-btn:hover {
  color: #f1f5f9;
}

.score-toggle-arrow {
  font-size: 10px;
  transition: transform 0.2s ease;
}

.score-toggle-arrow.open {
  transform: rotate(90deg);
}

.target-score-details {
  margin-top: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.6;
}

.target-score-details p {
  margin: 0 0 8px 0;
}

.target-score-details ul {
  margin: 0;
  padding-left: 18px;
}

.target-score-details li {
  margin-bottom: 4px;
}

/* Light theme overrides */
body.theme-light .sr-targets-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

body.theme-light .sr-targets-title {
  color: #0f172a;
}

body.theme-light .target-pill {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #334155;
}

body.theme-light .target-label {
  color: #64748b;
}

body.theme-light .target-val {
  color: #0f172a;
}

body.theme-light .target-score-explainer-wrap {
  border-top-color: #e2e8f0;
}

body.theme-light .target-score-details {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}

@media (max-width: 640px) {
  .sr-targets-card {
    padding: 14px 12px;
    margin-top: 14px;
    border-radius: 10px;
  }

  .sr-targets-title {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .sr-targets-pills {
    gap: 6px;
    margin-bottom: 12px;
  }

  .target-pill,
  .target-pill-regime {
    font-size: 10.5px;
    padding: 3px 8px;
  }

  .sr-targets-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .target-col {
    gap: 0;
  }

  .target-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .target-label {
    font-size: 11.5px;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .target-val {
    font-size: 12.5px;
    text-align: right;
  }

  .target-score-explainer-wrap {
    margin-top: 10px;
    padding-top: 10px;
  }

  .target-score-toggle-btn {
    font-size: 11.5px;
  }

  .target-score-details {
    font-size: 11px;
    padding: 10px 12px;
  }
}

body.theme-light .target-item {
  border-bottom-color: #f1f5f9;
}

/* ==========================================================================
   Stock Annual Financials & Margins Card (Capital Stake / PSX DPS Style)
   ========================================================================== */
.stock-financials-card {
  background: var(--bg-surface-elevated, #0e121c);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 10px);
  padding: 18px 20px;
  margin-top: 20px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.stock-financials-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.financials-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.financials-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #f8fafc);
  letter-spacing: -0.2px;
  margin: 0;
}

.financials-badge {
  font-size: 10.5px;
  font-weight: 600;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: 0.2px;
}

.financials-meta {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}

/* Top: 3 Bar Chart Clusters */
.financials-charts-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

.fin-chart-cluster {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
}

.fin-cluster-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.fin-cluster-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #f1f5f9;
}

.fin-cluster-unit {
  font-size: 10px;
  color: #64748b;
  font-weight: 500;
}

.fin-bars-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 125px;
  gap: 6px;
  padding-top: 14px;
}

.fin-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.fin-bar-val {
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: #f8fafc;
  margin-bottom: 6px;
  white-space: nowrap;
  line-height: 1;
}

.fin-bar-val.neg-text {
  color: #ef4444;
}

.fin-bar-track {
  width: 100%;
  max-width: 38px;
  height: 78px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px 4px 0 0;
}

.fin-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.fin-bar.gold {
  background: #facc15;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.2);
}

.fin-bar.green {
  background: #00dc82;
  box-shadow: 0 0 10px rgba(0, 220, 130, 0.2);
}

.fin-bar.neg {
  background: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}

.fin-bar-yr {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  margin-top: 6px;
}

/* Bottom: Financials & Margins Table */
.fin-table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.fin-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono, monospace);
  background: rgba(255, 255, 255, 0.015);
}

.fin-table th {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fin-table th.right,
.fin-table td.right {
  text-align: right;
}

.fin-table td {
  padding: 9px 14px;
  font-size: 12.5px;
  color: #f8fafc;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.fin-table tr:last-child td {
  border-bottom: none;
}

.fin-table tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}

.fin-row-label {
  text-align: left;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
  white-space: nowrap;
}

.fin-table .green-text {
  color: #00dc82;
  font-weight: 700;
}

.fin-table .neg-text {
  color: #ef4444;
  font-weight: 700;
}

.fin-table .muted-text {
  color: #64748b;
}

.fin-card-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  color: #64748b;
  line-height: 1.5;
}

/* Light Theme Overrides */
body.theme-light .stock-financials-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

body.theme-light .financials-title {
  color: #0f172a;
}

body.theme-light .fin-chart-cluster {
  background: #f8fafc;
  border-color: #e2e8f0;
}

body.theme-light .fin-cluster-title {
  color: #0f172a;
}

body.theme-light .fin-bar-val {
  color: #0f172a;
}

body.theme-light .fin-bar-track {
  background: #edf2f7;
}

body.theme-light .fin-bar-yr {
  color: #64748b;
}

body.theme-light .fin-table-container {
  border-color: #e2e8f0;
}

body.theme-light .fin-table {
  background: #ffffff;
}

body.theme-light .fin-table th {
  background: #f8fafc;
  border-bottom-color: #e2e8f0;
  color: #475569;
}

body.theme-light .fin-table td {
  border-bottom-color: #f1f5f9;
  color: #0f172a;
}

body.theme-light .fin-row-label {
  color: #334155;
}

body.theme-light .fin-card-footer {
  border-top-color: #e2e8f0;
  color: #64748b;
}

/* Responsive Styles for Financials Card */
@media (max-width: 768px) {
  .stock-financials-card {
    padding: 14px 12px;
    margin-top: 14px;
    border-radius: 10px;
  }

  .financials-title {
    font-size: 14px;
  }

  .financials-charts-row {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 4px;
  }

  .financials-charts-row::-webkit-scrollbar {
    display: none;
  }

  .fin-chart-cluster {
    flex: 0 0 240px;
    padding: 10px 12px;
  }

  .fin-bars-wrap {
    height: 115px;
  }

  .fin-bar-track {
    height: 70px;
  }

  .fin-table td,
  .fin-table th {
    padding: 8px 10px;
    font-size: 11.5px;
  }

  .fin-row-label {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .fin-chart-cluster {
    flex: 0 0 205px;
    padding: 8px 10px;
  }

  .fin-bars-wrap {
    height: 105px;
  }

  .fin-bar-track {
    height: 62px;
    max-width: 30px;
  }

  .fin-bar-val {
    font-size: 9.5px;
    margin-bottom: 4px;
  }

  .fin-bar-yr {
    font-size: 10px;
    margin-top: 4px;
  }

  .fin-card-footer {
    font-size: 10.5px;
  }
}

/* ==========================================================================
   Stock Recent Trading Sessions (OHLCV Table / Investify Style)
   ========================================================================== */
.stock-recent-sessions-card {
  background: var(--bg-surface-elevated, #0e121c);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 10px);
  padding: 18px 20px;
  margin-top: 20px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.recent-sessions-header {
  margin-bottom: 14px;
}

.recent-sessions-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #f8fafc);
  letter-spacing: -0.2px;
  margin: 0;
}

.recent-sessions-table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.recent-sessions-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono, monospace);
  background: rgba(255, 255, 255, 0.015);
}

.recent-sessions-table th {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.recent-sessions-table th.th-date {
  text-align: left;
}

.recent-sessions-table th.right,
.recent-sessions-table td.right {
  text-align: right;
}

.recent-sessions-table td {
  padding: 10px 14px;
  font-size: 12.5px;
  color: #f8fafc;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.recent-sessions-table tr:last-child td {
  border-bottom: none;
}

.recent-sessions-table tr:hover td {
  background: rgba(255, 255, 255, 0.035);
}

.recent-sessions-table .td-date {
  color: #cbd5e1;
  font-family: inherit;
  font-weight: 500;
  white-space: nowrap;
  text-align: left;
}

.session-date-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.session-date-text {
  white-space: nowrap;
}

.badge-xd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.25;
  cursor: help;
  text-transform: uppercase;
  transition: all 0.2s ease;
  user-select: none;
}

.badge-xd:hover {
  background: rgba(245, 158, 11, 0.28);
  border-color: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
}

.row-xd-session {
  background: rgba(245, 158, 11, 0.045);
}

.row-xd-session td {
  border-bottom-color: rgba(245, 158, 11, 0.15) !important;
}

body.theme-light .badge-xd {
  color: #b45309;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.4);
}

body.theme-light .row-xd-session {
  background: rgba(245, 158, 11, 0.05);
}

.recent-sessions-table .td-close {
  font-weight: 700;
}

.recent-sessions-table .td-volume {
  color: #cbd5e1;
}

.recent-sessions-table .muted-cell {
  color: #64748b;
}

.sess-change-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.2px;
  min-width: 62px;
}

.sess-change-pill.pos {
  color: #00dc82;
  background: rgba(0, 220, 130, 0.12);
  border: 1px solid rgba(0, 220, 130, 0.3);
}

.sess-change-pill.neg {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.sess-change-pill.zero {
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.recent-sessions-disclaimer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 11px;
  color: #64748b;
  line-height: 1.5;
}

/* Light Theme Overrides */
body.theme-light .stock-recent-sessions-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

body.theme-light .recent-sessions-title {
  color: #0f172a;
}

body.theme-light .recent-sessions-table-container {
  border-color: #e2e8f0;
}

body.theme-light .recent-sessions-table {
  background: #ffffff;
}

body.theme-light .recent-sessions-table th {
  background: #f8fafc;
  border-bottom-color: #e2e8f0;
  color: #64748b;
}

body.theme-light .recent-sessions-table td {
  border-bottom-color: #f1f5f9;
  color: #0f172a;
}

body.theme-light .recent-sessions-table .td-date {
  color: #334155;
}

body.theme-light .recent-sessions-table .td-volume {
  color: #475569;
}

body.theme-light .recent-sessions-disclaimer {
  border-top-color: #e2e8f0;
  color: #64748b;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .stock-recent-sessions-card {
    padding: 14px 12px;
    margin-top: 14px;
    border-radius: 10px;
  }

  .recent-sessions-title {
    font-size: 14px;
  }

  .recent-sessions-table td,
  .recent-sessions-table th {
    padding: 8px 10px;
    font-size: 11.5px;
  }

  .sess-change-pill {
    font-size: 10.5px;
    padding: 2px 6px;
    min-width: 54px;
  }
}

@media (max-width: 480px) {
  .recent-sessions-table td,
  .recent-sessions-table th {
    padding: 7px 8px;
    font-size: 11px;
  }

  .recent-sessions-disclaimer {
    font-size: 10.5px;
  }
}

/* ==========================================================================
   Upcoming Dividends Showcase Widget (Exact Match to Reference Design)
   ========================================================================== */
.upcoming-dividends-section {
  margin-top: 14px;
  margin-bottom: 22px;
}

.upcoming-div-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

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

.upcoming-div-accent-bar {
  width: 3px;
  height: 16px;
  background: #eab308;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

.upcoming-div-title {
  font-size: 15px;
  font-weight: 700;
  color: #f8fafc;
  margin: 0;
  letter-spacing: -0.2px;
}

.upcoming-div-badge {
  background: #1f2430;
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.25);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  line-height: 1.3;
}

.upcoming-div-cal-link {
  color: #eab308;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.upcoming-div-cal-link:hover {
  color: #facc15;
  text-decoration: underline;
}

/* Upcoming Dividends Grid (4 Columns on Desktop matching screenshot) */
.upcoming-div-grid,
.dividends-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 1200px) {
  .upcoming-div-grid,
  .dividends-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

/* Card Container */
.upcoming-div-card {
  background: #151821;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  position: relative;
  display: flex;
  flex-direction: column;
}

.upcoming-div-card:hover {
  transform: translateY(-2px);
  border-color: rgba(234, 179, 8, 0.4);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  background: #181d28;
}

/* Row 1: Symbol & Amount */
.upcoming-div-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.upcoming-div-symbol-group {
  display: flex;
  align-items: center;
  gap: 7px;
}

.upcoming-div-coin-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.upcoming-div-symbol {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.3px;
}

.upcoming-div-amount {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  font-family: var(--font-mono, monospace);
  text-align: right;
}

/* Row 2: Company Name */
.upcoming-div-company {
  font-size: 12px;
  color: #848e9c;
  margin-bottom: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Row 3: Price & Change Pill */
.upcoming-div-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.upcoming-div-price-group {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.upcoming-div-price-label {
  font-size: 12px;
  color: #848e9c;
  font-weight: 500;
}

.upcoming-div-price-val {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  font-family: var(--font-mono, monospace);
}

.upcoming-div-change-pill {
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  line-height: 1.3;
}

.upcoming-div-change-pill.positive {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.upcoming-div-change-pill.negative {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

/* Row 4: Dates & Status / Yield */
.upcoming-div-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: auto;
  padding-top: 4px;
}

.upcoming-div-dates-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.upcoming-div-ex-date {
  font-size: 11px;
  color: #848e9c;
  font-weight: 500;
}

.upcoming-div-bc-date {
  font-size: 11px;
  color: #848e9c;
  font-weight: 500;
}

.upcoming-div-status-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.upcoming-div-status-text {
  font-size: 11px;
  font-weight: 600;
  color: #848e9c;
}

.upcoming-div-status-text.status-today {
  color: #eab308;
  font-weight: 700;
}

.upcoming-div-yield-group {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: 11px;
}

.upcoming-div-yield-label {
  color: #848e9c;
  font-weight: 500;
}

.upcoming-div-yield-val {
  color: #ffffff;
  font-weight: 700;
}

/* Light Theme Overrides */
body.theme-light .upcoming-div-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

body.theme-light .upcoming-div-card:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

body.theme-light .upcoming-div-title {
  color: #0f172a;
}

body.theme-light .upcoming-div-badge {
  background: #fef3c7;
  color: #b45309;
  border-color: rgba(180, 83, 9, 0.25);
}

body.theme-light .upcoming-div-symbol,
body.theme-light .upcoming-div-amount,
body.theme-light .upcoming-div-price-val,
body.theme-light .upcoming-div-yield-val {
  color: #0f172a;
}

body.theme-light .upcoming-div-company,
body.theme-light .upcoming-div-price-label,
body.theme-light .upcoming-div-ex-date,
body.theme-light .upcoming-div-bc-date,
body.theme-light .upcoming-div-yield-label {
  color: #64748b;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .upcoming-div-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
    padding-bottom: 6px;
  }

  .upcoming-div-grid::-webkit-scrollbar {
    display: none;
  }

  .upcoming-div-grid .upcoming-div-card {
    flex: 0 0 260px;
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   Real-time Technical Events & Indicators Feed UI (Matching User Reference Image)
   ========================================================================== */
.tech-events-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.tech-filter-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tech-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #151821;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.tech-filter-pill:hover {
  background: #1f2430;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.22);
}

.tech-filter-pill.active {
  background: #ffffff !important;
  color: #0b0e14 !important;
  border-color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.15);
}

.tech-pill-badge {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.9;
}

.tech-events-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #151821;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 5px 14px;
  min-width: 240px;
}

.tech-events-search-box svg {
  color: #64748b;
  flex-shrink: 0;
}

.tech-events-search-box input {
  background: transparent;
  border: none;
  outline: none;
  color: #f1f5f9;
  font-size: 12.5px;
  width: 100%;
}

.tech-events-search-box input::placeholder {
  color: #64748b;
}

.tech-events-stream {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Individual Technical Event Card */
.tech-event-card {
  display: grid;
  grid-template-columns: 140px 1fr 120px;
  align-items: center;
  background: #0f131a;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 14px 20px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  gap: 20px;
}

.tech-event-card:hover {
  background: #141923;
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Accent Left Borders */
.tech-event-card.accent-green {
  border-left: 3.5px solid #00dc82 !important;
}

.tech-event-card.accent-gold {
  border-left: 3.5px solid #eab308 !important;
}

/* Column 1: Symbol & Price */
.tech-col-symbol {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tech-symbol-text {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.tech-price-text {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 500;
  margin-top: 4px;
}

/* Column 2: Events List with 1 or 2 events side by side */
.tech-col-events {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}

.tech-event-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tech-event-item.tech-event-spacer {
  visibility: hidden;
}

.tech-event-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.tech-event-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.tech-title-white {
  color: #ffffff;
}

.tech-title-green {
  color: #00dc82;
}

.tech-event-time {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

.tech-event-desc {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.35;
}

/* Column 3: Traded Turnover & Watchlist Star */
.tech-col-traded {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.tech-traded-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.tech-traded-label {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.8px;
  line-height: 1;
  margin-bottom: 3px;
}

.tech-traded-value {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  white-space: nowrap;
}

.tech-star-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: transform 0.15s ease, color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
}

.tech-star-btn:hover {
  transform: scale(1.15);
  color: #facc15;
}

.tech-star-btn.tech-star-active {
  color: #facc15;
}

/* Light Mode Overrides */
body.theme-light .tech-filter-pill {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}

body.theme-light .tech-filter-pill:hover {
  background: #e2e8f0;
  color: #0f172a;
}

body.theme-light .tech-filter-pill.active {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
}

body.theme-light .tech-events-search-box {
  background: #f8fafc;
  border-color: #e2e8f0;
}

body.theme-light .tech-events-search-box input {
  color: #0f172a;
}

body.theme-light .tech-event-card {
  background: #ffffff;
  border-color: #e2e8f0;
}

body.theme-light .tech-event-card:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

body.theme-light .tech-symbol-text,
body.theme-light .tech-title-white,
body.theme-light .tech-traded-value {
  color: #0f172a;
}

body.theme-light .tech-price-text,
body.theme-light .tech-event-desc {
  color: #64748b;
}

/* Mobile Responsiveness for Technical Events */
@media (max-width: 860px) {
  .tech-event-card {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "symbol traded"
      "events events";
    gap: 12px;
    padding: 12px 14px;
  }

  .tech-col-symbol {
    grid-area: symbol;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }

  .tech-col-traded {
    grid-area: traded;
  }

  .tech-col-events {
    grid-area: events;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }

  body.theme-light .tech-col-events {
    border-top-color: #e2e8f0;
  }

  .tech-event-item.tech-event-spacer {
    display: none;
  }
}

/* ==========================================================================
   Shariah Compliant Mosque Indicator (KMI-30 / KMI All Share)
   ========================================================================== */
.shariah-mosque,
.shariah-badge,
.pre-order-shariah {
  display: none !important;
}

/* ==========================================================================
   5-Year Monthly Seasonality & Up/Down Trend Matrix
   ========================================================================== */
.stock-seasonality-card {
  background: var(--bg-surface-elevated, #0f131f);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 10px);
  padding: 18px 20px;
  margin-bottom: 22px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.stock-seasonality-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.stock-seasonality-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-primary, #f8fafc);
  margin: 0;
  letter-spacing: -0.2px;
}

.season-badge-tag {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}

.stock-seasonality-sub {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  margin: 3px 0 0 0;
}

.stock-seasonality-insights {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.season-insight-pill {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  font-family: var(--font-mono, monospace);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.season-insight-pill.best {
  background: rgba(0, 220, 130, 0.12);
  color: #00dc82;
  border: 1px solid rgba(0, 220, 130, 0.3);
}

.season-insight-pill.worst {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.season-insight-pill.curr {
  background: rgba(234, 179, 8, 0.12);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.seasonality-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 14, 26, 0.6);
  margin-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}

.seasonality-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  text-align: center;
}

.seasonality-table th {
  background: rgba(15, 23, 42, 0.95);
  color: var(--text-secondary, #94a3b8);
  font-weight: 600;
  padding: 8px 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.seasonality-table th.th-year {
  text-align: left;
  padding-left: 12px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: rgba(15, 23, 42, 0.98);
}

.seasonality-table th.th-annual {
  background: rgba(20, 29, 50, 0.95);
  color: #f8fafc;
}

.seasonality-table td {
  padding: 5px 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.seasonality-table td.td-year {
  text-align: left;
  padding-left: 12px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: #cbd5e1;
  position: sticky;
  left: 0;
  z-index: 1;
  background: rgba(15, 23, 42, 0.95);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.seasonality-table td.td-annual {
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

/* Seasonality Cell Badges */
.season-cell {
  display: inline-block;
  min-width: 54px;
  padding: 4px 6px;
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  transition: transform 0.15s ease;
}

.season-cell:hover {
  transform: scale(1.06);
}

.season-cell.up {
  background: rgba(0, 220, 130, 0.14);
  color: #00dc82;
  border: 1px solid rgba(0, 220, 130, 0.28);
}

.season-cell.down {
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.28);
}

.season-cell.curr {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px dashed rgba(56, 189, 248, 0.6);
}

.season-cell.upcoming {
  color: #64748b;
  background: transparent;
}

/* Seasonality Footers */
.seasonality-table tfoot tr.tr-winrate td {
  background: rgba(15, 23, 42, 0.8);
  font-weight: 700;
  font-size: 11px;
  padding: 8px 3px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.seasonality-table tfoot tr.tr-avg td {
  background: rgba(15, 23, 42, 0.95);
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  padding: 7px 3px;
  border-bottom: none;
}

.winrate-val {
  font-family: var(--font-mono, monospace);
}

.winrate-val.high { color: #00dc82; }
.winrate-val.med { color: #facc15; }
.winrate-val.low { color: #ef4444; }

.seasonality-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  margin-top: 6px;
}

.leg-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.leg-box {
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
}

.leg-box.leg-up { background: rgba(0, 220, 130, 0.2); color: #00dc82; }
.leg-box.leg-down { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.leg-box.leg-curr { background: rgba(56, 189, 248, 0.2); color: #38bdf8; }
.leg-box.leg-upcom { background: rgba(255, 255, 255, 0.08); color: #94a3b8; }

/* ==========================================================================
   Analytics Tab: Seasonality & Monthly Gain Scanner
   ========================================================================== */
.analytics-subnav-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 20px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

.analytics-subnav-btn {
  background: transparent;
  color: var(--text-secondary, #94a3b8);
  border: none;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.analytics-subnav-btn:hover {
  color: var(--text-primary, #ffffff);
  background: rgba(255, 255, 255, 0.04);
}

.analytics-subnav-btn.active {
  background: var(--psx-green, #00dc82);
  color: #06111e;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0, 220, 130, 0.3);
}

.seasonality-scanner-panel {
  background: var(--bg-surface-elevated, #0f131f);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 12px);
  padding: 20px 22px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.seasonality-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.seasonality-panel-title-wrap h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #ffffff);
  margin: 0;
  letter-spacing: -0.3px;
}

.seasonality-panel-title-wrap p {
  font-size: 12.5px;
  color: var(--text-muted, #94a3b8);
  margin: 4px 0 0 0;
}

/* Month Selector Pills */
.season-month-pills-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 16px;
  scrollbar-width: none;
}

.season-month-pills-bar::-webkit-scrollbar {
  display: none;
}

.season-month-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary, #94a3b8);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.season-month-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.15);
}

.season-month-btn.active {
  background: rgba(0, 220, 130, 0.18);
  border-color: var(--psx-green, #00dc82);
  color: var(--psx-green, #00dc82);
  font-weight: 700;
}

.season-month-btn.current-month-btn::after {
  content: ' • Live';
  font-size: 10px;
  color: #38bdf8;
}

/* Scope & Search Bar */
.season-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.season-scope-group {
  display: flex;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 2px;
}

.season-scope-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary, #94a3b8);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.season-scope-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.season-search-input {
  background: rgba(10, 15, 29, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 7px 12px;
  font-size: 12.5px;
  border-radius: 6px;
  min-width: 240px;
}

.season-search-input:focus {
  outline: none;
  border-color: var(--psx-green, #00dc82);
}

/* Top Gainers Highlight Cards */
.season-highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.season-highlight-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(0, 220, 130, 0.2);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.season-highlight-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 220, 130, 0.45);
}

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

.season-hl-sym {
  font-size: 16px;
  font-weight: 800;
  color: var(--psx-green, #00dc82);
  font-family: var(--font-mono, monospace);
}

.season-hl-rank {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  background: rgba(234, 179, 8, 0.15);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.season-hl-name {
  font-size: 12.5px;
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10px;
}

.season-hl-stats {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
}

.season-hl-winrate {
  font-size: 13px;
  font-weight: 700;
  color: #00dc82;
  font-family: var(--font-mono, monospace);
}

.season-hl-avg {
  font-size: 13px;
  font-weight: 700;
  color: #38bdf8;
  font-family: var(--font-mono, monospace);
}

/* Seasonality Table in Analytics */
.track-record-pills {
  display: flex;
  align-items: center;
  gap: 4px;
}

.track-pill {
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  padding: 2px 5px;
  border-radius: 3px;
}

.track-pill.up { background: rgba(0, 220, 130, 0.18); color: #00dc82; }
.track-pill.down { background: rgba(239, 68, 68, 0.18); color: #ef4444; }
.track-pill.upcom { background: rgba(255, 255, 255, 0.05); color: #64748b; }

.trend-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.trend-badge.strong-bullish {
  background: rgba(0, 220, 130, 0.18);
  color: #00dc82;
  border: 1px solid rgba(0, 220, 130, 0.35);
}

.trend-badge.bullish {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.trend-badge.bearish {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.trend-badge.mixed {
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

/* Light Theme Overrides */
body.theme-light .stock-seasonality-card,
body.theme-light .seasonality-scanner-panel {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

body.theme-light .stock-seasonality-title,
body.theme-light .seasonality-panel-title-wrap h3 {
  color: #0f172a;
}

body.theme-light .seasonality-table-wrap {
  background: #f8fafc;
  border-color: #e2e8f0;
}

body.theme-light .seasonality-table th {
  background: #f1f5f9;
  color: #475569;
  border-bottom-color: #e2e8f0;
}

body.theme-light .seasonality-table th.th-year,
body.theme-light .seasonality-table td.td-year {
  background: #f8fafc;
  color: #0f172a;
  border-right-color: #e2e8f0;
}

body.theme-light .seasonality-table td {
  border-bottom-color: #f1f5f9;
}

body.theme-light .season-highlight-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

body.theme-light .season-hl-name {
  color: #334155;
}

body.theme-light .season-search-input {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}