/* ==========================================================================
   Stocks Developer WebX - Professional Financial Trading Terminal Design System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --bg-dark: transparent;
  --bg-surface: rgba(15, 23, 42, 0.72);
  --bg-card: rgba(20, 24, 36, 0.68);
  --bg-card-hover: rgba(30, 41, 59, 0.82);
  --bg-nav: rgba(11, 14, 22, 0.88);
  --border-color: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.14);

  --text-main: #e2e8f0;
  --text-muted: #8896b0;
  --text-dim: #5a6782;
  --text-white: #ffffff;

  --color-blue: #29b6f6;
  --color-blue-dark: #0288d1;
  --color-blue-hover: #039be5;
  --color-blue-glow: rgba(41, 182, 246, 0.25);

  --color-green: #00e676;
  --color-green-dark: #00b248;
  --color-green-bg: rgba(0, 230, 118, 0.12);
  --color-green-border: rgba(0, 230, 118, 0.35);

  --color-red: #ff5252;
  --color-red-dark: #d50000;
  --color-red-bg: rgba(255, 82, 82, 0.12);
  --color-red-border: rgba(255, 82, 82, 0.35);

  --color-gold: #ffd54f;
  --color-gold-bg: rgba(255, 213, 79, 0.12);
  --color-gold-border: rgba(255, 213, 79, 0.35);

  --color-cyan: #00e5ff;
  --color-purple: #b388ff;
  --color-orange: #ff9100;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 15px rgba(41, 182, 246, 0.3);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

[data-theme='light'] {
  --bg-dark: #f0f4f9;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-nav: #ffffff;
  --border-color: #dce3ed;
  --border-light: #cbd5e1;

  --text-main: #1e293b;
  --text-muted: #64748b;
  --text-dim: #94a3b8;
  --text-white: #0f172a;

  --color-blue: #0288d1;
  --color-green: #16a34a;
  --color-red: #dc2626;
  --color-gold: #d97706;
}

/* Reset & Base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background-color: #070913;
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

.card, .table-card, .kpi-card, .controls-bar, .sub-tabs-bar, .left-sidebar-nav, .top-navbar, .trading-panel, .desync-alerts-container {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-light);
}

/* Typography & Helpers */
.font-mono {
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}

.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }

.text-green { color: var(--color-green) !important; }
.text-red { color: var(--color-red) !important; }
.text-blue { color: var(--color-blue) !important; }
.text-cyan { color: var(--color-cyan) !important; }
.text-gold { color: var(--color-gold) !important; }
.text-purple { color: var(--color-purple) !important; }
.text-white { color: var(--text-white) !important; }
.text-muted { color: var(--text-muted) !important; }

.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease-in-out;
  outline: none;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary, .btn-blue {
  background-color: #0288d1;
  color: #ffffff;
  border-color: #0277bd;
}
.btn-primary:hover, .btn-blue:hover {
  background-color: #039be5;
  box-shadow: 0 0 8px rgba(3, 155, 229, 0.4);
}

.btn-red, .btn-danger {
  background-color: rgba(255, 82, 82, 0.15);
  color: var(--color-red);
  border-color: var(--color-red);
}
.btn-red:hover, .btn-danger:hover {
  background-color: var(--color-red);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 82, 82, 0.4);
}

.btn-green, .btn-success {
  background-color: rgba(0, 230, 118, 0.15);
  color: var(--color-green);
  border-color: var(--color-green);
}
.btn-green:hover, .btn-success:hover {
  background-color: var(--color-green);
  color: #0a0e17;
  box-shadow: 0 0 10px rgba(0, 230, 118, 0.4);
}

.btn-ghost {
  background-color: transparent;
  color: var(--text-muted);
  border-color: var(--border-color);
}
.btn-ghost:hover {
  background-color: var(--bg-card-hover);
  color: var(--text-main);
  border-color: var(--border-light);
}

.btn-sm {
  padding: 4px 8px;
  font-size: 11px;
}

.pulse {
  animation: pulse-glow 1.5s infinite;
}

@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(255, 82, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0); }
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.badge-web {
  background: linear-gradient(135deg, #0d47a1, #1976d2);
  color: #e3f2fd;
  border: 1px solid #42a5f5;
  box-shadow: 0 0 6px rgba(33, 150, 243, 0.3);
}

.badge-demo {
  background-color: rgba(255, 213, 79, 0.15);
  color: var(--color-gold);
  border: 1px solid var(--color-gold-border);
}

.badge-active, .badge-success, .badge-complete {
  background-color: var(--color-green-bg);
  color: var(--color-green);
  border: 1px solid var(--color-green-border);
}

.badge-rejected, .badge-error, .badge-failed {
  background-color: var(--color-red-bg);
  color: var(--color-red);
  border: 1px solid var(--color-red-border);
}

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

.badge-master {
  background-color: rgba(179, 136, 255, 0.15);
  color: var(--color-purple);
  border: 1px solid rgba(179, 136, 255, 0.35);
}

.badge-child {
  background-color: rgba(0, 229, 255, 0.15);
  color: var(--color-cyan);
  border: 1px solid rgba(0, 229, 255, 0.35);
}

.badge-standalone {
  background-color: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

/* Pulse Dot */
.pulse-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-green);
  box-shadow: 0 0 6px var(--color-green);
  animation: dot-pulse 1.8s infinite;
}

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

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

/* Top Navbar */
.top-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg-nav);
  border-bottom: 1px solid var(--border-color);
  padding: 0 16px;
  height: 48px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.brand-name {
  font-weight: 800;
  font-size: 15px;
  color: var(--text-white);
  letter-spacing: 0.2px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-item {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  padding: 13px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
}

.nav-item:hover {
  color: var(--text-main);
}

.nav-item.active {
  color: var(--color-blue);
  border-bottom-color: var(--color-blue);
  font-weight: 600;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* User Profile */
.user-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  position: relative;
}

.user-profile:hover {
  background-color: var(--bg-card);
  border-color: var(--border-color);
}

.avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0288d1, #00e5ff);
  color: #0a0e17;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 220px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px 0;
  z-index: 200;
}

.profile-dropdown-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
}

.profile-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: var(--text-main);
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}

.profile-dropdown-item:hover {
  background-color: var(--bg-card-hover);
  color: var(--color-blue);
}

/* Controls Bar */
.controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  padding: 6px 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.account-selector-wrapper select {
  background-color: var(--bg-dark);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
}

.account-selector-wrapper select:focus {
  border-color: var(--color-blue);
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Sub-Tabs Bar */
.sub-tabs-bar {
  background-color: var(--bg-nav);
  border-bottom: 1px solid var(--border-color);
  padding: 0 16px;
  overflow-x: auto;
  position: sticky;
  top: 48px;
  z-index: 90;
}

.tabs-scroll {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: max-content;
}

.sub-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.sub-tab:hover {
  color: var(--text-main);
}

.sub-tab.active {
  color: var(--color-blue);
  border-bottom-color: var(--color-blue);
  font-weight: 600;
}

.sub-tab.highlight-tab {
  color: var(--color-cyan);
}
.sub-tab.highlight-tab:hover {
  color: #ffffff;
}

/* Status Alert Banner */
.alert-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(13, 19, 34, 0.7);
  border-bottom: 1px solid var(--border-color);
  padding: 5px 16px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.alert-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Main Body */
.main-body {
  padding: 16px;
  flex: 1;
  max-width: 1680px;
  margin: 0 auto;
  width: 100%;
}

/* KPI Cards Grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.kpi-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s ease;
  min-height: 84px;
}

.kpi-card:hover {
  border-color: var(--border-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.kpi-card-clickable {
  cursor: pointer;
  position: relative;
  user-select: none;
}

.kpi-card-clickable:hover {
  border-color: var(--color-blue);
  box-shadow: 0 4px 16px rgba(41, 182, 246, 0.15);
  transform: translateY(-2px);
}

.kpi-card-clickable:active {
  transform: translateY(0);
}

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

.kpi-title {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kpi-value {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.kpi-subtext {
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 4px;
}

/* Table Cards & Grouped Tables */
.table-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 16px;
}

.table-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  background-color: rgba(21, 29, 48, 0.7);
  flex-wrap: wrap;
  gap: 10px;
}

.card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-white);
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.btn-table-action {
  background-color: var(--bg-dark);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-table-action:hover {
  background-color: var(--bg-card-hover);
  color: var(--text-main);
  border-color: var(--border-light);
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: var(--bg-dark);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
}

.search-input-wrapper input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-main);
  font-size: 11.5px;
  width: 140px;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Data Table Precision Styles */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
}

.data-table th, .data-table td {
  padding: 7px 10px;
  border: 1px solid var(--border-color);
}

.data-table thead th {
  background-color: #121826;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.3px;
  user-select: none;
}

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

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

.data-table tbody td {
  font-family: var(--font-mono);
  color: var(--text-main);
}

.data-table tbody td.col-text {
  font-family: var(--font-sans);
}

.data-table tfoot tr {
  background-color: #101624;
  font-weight: 700;
  border-top: 2px solid var(--border-light);
}

.data-table tfoot td {
  font-family: var(--font-mono);
  padding: 8px 10px;
}

/* Column Filter Inputs Row */
.filter-input-row td {
  padding: 3px 4px !important;
  background-color: #0b101a !important;
}

.col-filter-input {
  width: 100%;
  min-width: 60px;
  background-color: #161e2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  color: var(--text-main);
  font-size: 10.5px;
  padding: 2px 4px;
  outline: none;
  font-family: var(--font-sans);
}

.col-filter-input:focus {
  border-color: var(--color-blue);
  background-color: #1a2332;
}

.row-selected {
  background-color: rgba(3, 169, 244, 0.12) !important;
}

/* Group Headers */
.grouped-table .header-group-row th {
  text-align: center;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.6px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border-color);
}

.group-account { background-color: rgba(33, 150, 243, 0.08) !important; color: #90caf9 !important; }
.group-position { background-color: rgba(0, 230, 118, 0.08) !important; color: #69f0ae !important; }
.group-margin { background-color: rgba(255, 213, 79, 0.08) !important; color: #ffe082 !important; }
.group-orders { background-color: rgba(179, 136, 255, 0.08) !important; color: #d1c4e9 !important; }
.group-holdings { background-color: rgba(0, 229, 255, 0.08) !important; color: #80deea !important; }

/* Modals & Overlays */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.modal-container {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-in 0.2s ease-out;
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(-10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

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

.modal-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-white);
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}

.modal-close:hover {
  color: var(--text-white);
  background-color: var(--bg-card-hover);
}

.modal-body {
  padding: 18px;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-card);
}

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

.form-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.form-input, .form-select {
  width: 100%;
  background-color: var(--bg-dark);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--text-main);
  font-size: 12.5px;
  outline: none;
  transition: border-color 0.15s ease;
}

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

/* Authentication Screen (Matches Reference Platform Exactly) */
.auth-shell {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background-color: #070a12;
}

.auth-brand {
  flex: 1.1;
  background: radial-gradient(circle at 20% 30%, #102347 0%, #080d1a 100%);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px;
  position: relative;
  overflow: hidden;
}

.auth-brand__inner {
  max-width: 520px;
  z-index: 2;
}

.auth-brand__title {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.auth-brand__sub {
  font-size: 15px;
  line-height: 1.6;
  color: #94a3b8;
  margin-bottom: 28px;
}

.auth-brand__pills {
  display: flex;
  gap: 10px;
  list-style: none;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.auth-brand__pills li {
  background: rgba(41, 182, 246, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.auth-brand__contact {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #64748b;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 20px;
  flex-wrap: wrap;
}

.auth-brand__contact a {
  color: var(--color-blue);
  text-decoration: none;
}

.auth-spark {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 140px;
  stroke: rgba(41, 182, 246, 0.25);
  stroke-width: 2;
  fill: none;
  z-index: 1;
}

.auth-panel {
  flex: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background-color: #0c111e;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 36px 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.auth-card__eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-blue);
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}

.auth-card__title {
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
}

.auth-card__lead {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.auth-field {
  position: relative;
  margin-bottom: 18px;
}

.auth-input {
  width: 100%;
  background-color: var(--bg-dark);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: #ffffff;
  font-size: 13.5px;
  outline: none;
  transition: all 0.2s ease;
}

.auth-input:focus {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 2px var(--color-blue-glow);
}

.auth-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}

.auth-password-toggle:hover {
  color: var(--text-main);
}

.auth-meta {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.auth-link {
  color: var(--color-blue);
  font-size: 12px;
  text-decoration: none;
}
.auth-link:hover {
  text-decoration: underline;
}

.auth-btn {
  width: 100%;
  background: linear-gradient(135deg, #0288d1, #039be5);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(2, 136, 209, 0.35);
  transition: all 0.2s ease;
}

.auth-btn:hover {
  background: linear-gradient(135deg, #039be5, #29b6f6);
  box-shadow: 0 6px 16px rgba(2, 136, 209, 0.5);
  transform: translateY(-1px);
}

.auth-btn--ghost {
  display: block;
  text-align: center;
  width: 100%;
  background: transparent;
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.auth-btn--ghost:hover {
  background-color: var(--bg-card-hover);
  border-color: var(--border-light);
}

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

.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border-color);
}
.auth-divider::before { margin-right: 12px; }
.auth-divider::after { margin-left: 12px; }

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

.toast {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 280px;
  max-width: 420px;
  animation: toast-in 0.25s ease;
}

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

/* Responsive Media Queries */
@media (max-width: 1024px) {
  .auth-shell {
    flex-direction: column;
  }
  .auth-brand {
    padding: 36px 24px;
    flex: auto;
  }
  .auth-brand__title {
    font-size: 28px;
  }
  .auth-panel {
    padding: 30px 16px;
    flex: auto;
  }
  .top-navbar {
    padding: 0 12px;
  }
  .main-nav .nav-item {
    padding: 12px 8px;
    font-size: 11.5px;
  }
}

@media (max-width: 768px) {
  .top-navbar {
    height: 52px !important;
    padding: 0 10px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }
  .nav-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }
  .nav-left .brand-name {
    font-size: 13.5px !important;
    letter-spacing: 0.2px !important;
  }
  .nav-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }
  .nav-text-mobile {
    display: none !important;
  }
  .nav-hide-mobile {
    display: none !important;
  }
  .top-navbar .btn-sm {
    padding: 6px 8px !important;
    font-size: 12px !important;
    min-width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .top-navbar .avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }

  .controls-bar {
    padding: 8px 10px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .account-selector-wrapper {
    width: 100% !important;
  }
  .account-selector-wrapper select {
    width: 100% !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
  .action-buttons {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }
  .action-buttons .btn {
    flex: 1 !important;
    justify-content: center !important;
    font-size: 11px !important;
    padding: 6px 4px !important;
  }

  .alert-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  .alert-banner .alert-content {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
  .alert-banner .timestamp-label {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    font-size: 11px !important;
  }
  .alert-banner .controls-date-picker-box {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .alert-banner .date-picker-inner {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 1 !important;
    min-width: 130px !important;
  }
  .alert-banner .date-picker-inner input[type="date"] {
    width: 100% !important;
    font-size: 11px !important;
  }
  .alert-banner .date-picker-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .sub-tabs-bar {
    padding: 0 8px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .sub-tabs-bar::-webkit-scrollbar {
    display: none !important;
  }
  .sub-tab {
    padding: 9px 10px !important;
    font-size: 11.5px !important;
    flex-shrink: 0 !important;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .main-body {
    padding: 10px 8px !important;
  }

  .table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 560px) {
  .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .embedded-trade-card {
    border-radius: 8px !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .embedded-trade-body {
    padding: 8px !important;
  }
  .trade-ticket-container {
    padding: 10px 8px !important;
  }
  .trade-form-grid,
  .trade-form-grid-symbol {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .form-group {
    width: 100% !important;
    min-width: 0 !important;
  }
  .form-select, .form-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 12.5px !important;
  }
  .auth-card {
    padding: 24px 18px;
  }
}

/* ==========================================================================
   LANDING PAGE STYLING (Inspired by StocksDeveloper & Financial Terminal UI)
   ========================================================================== */

.landing-root {
  min-height: 100vh;
  background-color: #070a12;
  color: #f1f5f9;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  position: relative;
}

/* 1. Landing Navigation */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 10, 18, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 0;
}

.landing-nav__container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landing-nav__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.landing-brand-logo {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.landing-badge-web {
  background: linear-gradient(135deg, #0288d1, #039be5);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.landing-badge-by {
  font-size: 11px;
  color: #64748b;
  margin-left: 4px;
  font-weight: 500;
}

.landing-nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
}

.landing-nav__links a {
  color: #94a3b8;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.landing-nav__links a:hover {
  color: #38bdf8;
}

.landing-nav__cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.landing-btn-login {
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px 16px;
}

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

.landing-btn-trial {
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(135deg, #0288d1, #039be5);
  box-shadow: 0 4px 14px rgba(2, 136, 209, 0.4);
  border-radius: 8px;
  padding: 8px 18px;
}

/* 2. Landing Hero */
.landing-hero {
  position: relative;
  padding: 80px 24px 60px;
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}

.landing-hero__atmosphere {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
  height: 500px;
  pointer-events: none;
  z-index: 0;
}

.landing-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.35;
}

.landing-glow-blue {
  top: -60px;
  left: 20%;
  width: 480px;
  height: 380px;
  background: #0288d1;
}

.landing-glow-gold {
  top: -40px;
  right: 25%;
  width: 380px;
  height: 320px;
  background: #f59e0b;
  opacity: 0.18;
}

.landing-hero__content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
}

.landing-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 30px;
  margin-bottom: 24px;
}

.landing-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.landing-hero__title {
  font-size: 54px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin-bottom: 20px;
}

.landing-gradient-text {
  background: linear-gradient(135deg, #38bdf8 0%, #60a5fa 50%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-hero__subtitle {
  font-size: 17px;
  line-height: 1.6;
  color: #94a3b8;
  max-width: 680px;
  margin: 0 auto 36px;
}

.landing-hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.landing-hero__primary-cta {
  font-size: 15px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(2, 136, 209, 0.45);
}

.landing-hero__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 12.5px;
  color: #cbd5e1;
  flex-wrap: wrap;
}

.landing-hero__meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Hero Mock Window */
.landing-hero__preview-wrapper {
  position: relative;
  z-index: 2;
  margin-top: 50px;
}

.landing-terminal-window {
  background: #0d1322;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(56, 189, 248, 0.15);
  overflow: hidden;
  text-align: left;
}

.landing-terminal-header {
  background: #080d1a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landing-terminal-dots {
  display: flex;
  gap: 6px;
}

.landing-terminal-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dot-red { background: #ef4444; }
.dot-yellow { background: #f59e0b; }
.dot-green { background: #10b981; }

.landing-terminal-title {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
}

.landing-mock-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px;
  background: #090e1a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mock-kpi-card {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px 14px;
}

.mock-kpi-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.mock-kpi-value {
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
}

.mock-kpi-sub {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

.landing-mock-table-wrap {
  padding: 12px 16px 20px;
  overflow-x: auto;
}

.landing-mock-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.landing-mock-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

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

/* 3. Trial Strip */
.landing-trial-strip {
  background: linear-gradient(90deg, rgba(2, 136, 209, 0.15), rgba(56, 189, 248, 0.05));
  border-top: 1px solid rgba(56, 189, 248, 0.25);
  border-bottom: 1px solid rgba(56, 189, 248, 0.25);
  padding: 24px 0;
  margin: 40px 0;
}

.landing-trial-strip__container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.landing-trial-strip__left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.landing-trial-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.landing-trial-strip__left h3 {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
}

.landing-trial-strip__left p {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
}

/* 4. Sections Generic */
.landing-section {
  padding: 80px 24px;
  max-width: 1240px;
  margin: 0 auto;
}

.landing-section--darker {
  background-color: #060910;
  max-width: 100%;
  padding-left: calc((100% - 1240px) / 2 + 24px);
  padding-right: calc((100% - 1240px) / 2 + 24px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.landing-section__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 50px;
}

.landing-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.landing-section__title {
  font-size: 36px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.landing-section__desc {
  font-size: 15px;
  color: #94a3b8;
  line-height: 1.6;
}

/* Feature Cards Grid */
.landing-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.landing-feature-card {
  background: #0d1322;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 30px 24px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.landing-feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248, 0.35);
}

.landing-feature-icon {
  font-size: 26px;
  margin-bottom: 18px;
}

.landing-feature-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
}

.landing-feature-card p {
  font-size: 13.5px;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0;
}

/* Interactive Tabs */
.landing-tab-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.landing-tab-btn {
  background: #0d1322;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.landing-tab-btn.active {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #38bdf8;
}

.landing-showcase-box {
  background: #0d1322;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 36px;
  max-width: 980px;
  margin: 0 auto;
}

.showcase-content {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  align-items: center;
}

.showcase-text h3 {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 12px;
}

.showcase-text p {
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 20px;
}

.showcase-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: #cbd5e1;
}

.showcase-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.showcase-card-preview {
  background: #080d1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 20px;
}

.preview-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13px;
}

.preview-stat-row span { color: #64748b; }
.preview-stat-row strong { color: #ffffff; font-family: 'JetBrains Mono', monospace; }

/* Brokers Search & Grid */
.landing-broker-search {
  max-width: 460px;
  margin: 24px auto 0;
  position: relative;
}

.landing-broker-search i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 13px;
}

.landing-broker-search input {
  width: 100%;
  background: #0d1322;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 30px;
  padding: 12px 20px 12px 42px;
  color: #ffffff;
  font-size: 13px;
  outline: none;
}

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

.landing-brokers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.landing-broker-card {
  background: #0d1322;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
}

.landing-broker-card:hover {
  background: #111a2e;
  border-color: rgba(56, 189, 248, 0.3);
}

.landing-broker-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  font-size: 15px;
}

.landing-broker-info h4 {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 2px;
}

/* Comparison Table */
.landing-compare-table-wrapper {
  max-width: 960px;
  margin: 0 auto;
  background: #0d1322;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

.landing-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.landing-compare-table th {
  background: #080d1a;
  padding: 16px 20px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-compare-table td {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
}

.highlight-column {
  background: rgba(56, 189, 248, 0.05);
  font-weight: 600;
}

/* Pricing Grid */
.landing-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}

.landing-price-card {
  background: #0d1322;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 36px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.landing-price-card.featured-trial {
  border-color: #38bdf8;
  box-shadow: 0 10px 30px rgba(2, 136, 209, 0.25);
  background: linear-gradient(180deg, #0d182b 0%, #0d1322 100%);
}

.price-tag-ribbon {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #0288d1, #039be5);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 4px 14px;
  border-radius: 20px;
}

.price-plan-name {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
}

.price-plan-desc {
  font-size: 12.5px;
  color: #94a3b8;
  margin-bottom: 24px;
  min-height: 38px;
}

.price-amount {
  display: flex;
  align-items: baseline;
  margin-bottom: 28px;
}

.price-amount .currency {
  font-size: 22px;
  font-weight: 700;
  color: #94a3b8;
  margin-right: 4px;
}

.price-amount .value {
  font-size: 44px;
  font-weight: 900;
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
}

.price-amount .duration {
  font-size: 13px;
  color: #64748b;
  margin-left: 8px;
}

.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
  color: #cbd5e1;
  flex: 1;
}

.price-features li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-block {
  width: 100%;
  padding: 12px;
  font-size: 13.5px;
  font-weight: 700;
}

/* FAQ Accordion */
.landing-faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.landing-faq-item {
  background: #0d1322;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.landing-faq-item.open {
  border-color: rgba(56, 189, 248, 0.35);
}

.landing-faq-question {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

.landing-faq-answer {
  padding: 0 20px 18px;
  font-size: 13.5px;
  color: #94a3b8;
  line-height: 1.6;
}

/* Bottom CTA */
.landing-bottom-cta {
  padding: 80px 24px;
  background: radial-gradient(circle at 50% 50%, #0d2242 0%, #070a12 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.landing-bottom-cta__inner {
  max-width: 720px;
  margin: 0 auto;
}

.landing-bottom-cta__inner h2 {
  font-size: 38px;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 12px;
}

.landing-bottom-cta__inner p {
  font-size: 16px;
  color: #94a3b8;
  margin-bottom: 30px;
}

/* Footer */
.landing-footer {
  background: #05080e;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 60px 24px 30px;
}

.landing-footer__container {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 40px;
}

.landing-footer__links {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col h5 {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.footer-col a {
  color: #64748b;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-col a:hover {
  color: #38bdf8;
}

.landing-footer__bottom {
  max-width: 1240px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #475569;
  flex-wrap: wrap;
  gap: 10px;
}

/* Responsive Breakpoints & Mobile Navbars */
.landing-mobile-toggle,
.navbar-mobile-toggle {
  display: none;
}

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

.landing-mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: rgba(7, 10, 18, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85);
  z-index: 999;
  padding: 16px 20px 24px;
  animation: slideDown 0.2s ease-out;
}

.landing-mobile-menu__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.landing-mobile-menu__links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 8px;
  color: #cbd5e1;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}

.landing-mobile-menu__links a:hover {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
}

.landing-mobile-menu__cta {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar-mobile-drawer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: #0b1329;
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.8);
  z-index: 999;
  padding: 10px 14px 16px;
  animation: slideDown 0.2s ease-out;
}

.navbar-mobile-drawer__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drawer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.drawer-item:hover,
.drawer-item.active {
  background: rgba(41, 182, 246, 0.15);
  color: var(--color-blue);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .landing-hero__title { font-size: 42px; }
  .landing-features-grid { grid-template-columns: repeat(2, 1fr); }
  .landing-brokers-grid { grid-template-columns: repeat(3, 1fr); }
  .landing-pricing-grid { grid-template-columns: 1fr; }
  .showcase-content { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .landing-nav__links { display: none !important; }
  .landing-nav__cta .landing-btn-login,
  .landing-nav__cta .landing-btn-trial { display: none !important; }
  
  .landing-mobile-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .landing-mobile-toggle:hover {
    background: rgba(56, 189, 248, 0.2);
    border-color: rgba(56, 189, 248, 0.4);
    color: #38bdf8;
  }

  .main-nav { display: none !important; }
  .navbar-mobile-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
  }
  .nav-hide-mobile { display: none !important; }
}

@media (max-width: 768px) {
  .landing-hero__title { font-size: 32px; }
  .landing-features-grid { grid-template-columns: 1fr; }
  .landing-brokers-grid { grid-template-columns: repeat(2, 1fr); }
  .landing-mock-kpis { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .nav-text-mobile { display: none !important; }
  .landing-brand-logo { font-size: 16px; }
  .landing-badge-by { display: none; }
  .brand-name { font-size: 13px; }
  .top-navbar { padding: 0 10px; height: 48px; }
  .nav-left { gap: 8px; }
  .nav-right { gap: 6px; }
}

/* Broker Badges & Gold Button */
.btn-gold {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #0f172a !important;
  font-weight: 700;
  border: 1px solid #fbbf24;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
  transition: all 0.2s ease;
}

.btn-gold:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
  transform: translateY(-1px);
}

.badge-zerodha {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
  font-weight: 700;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
}

.badge-upstox {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
  font-weight: 700;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
}

/* ==========================================================================
   Left Sidebar Navigation & Mobile Responsiveness
   ========================================================================== */
.app-layout-with-sidebar {
  display: flex;
  flex: 1;
  min-height: calc(100vh - 48px);
  position: relative;
  background-color: var(--bg-dark);
}

.left-sidebar-nav {
  position: sticky;
  top: 48px;
  height: calc(100vh - 48px);
  overflow-y: auto;
  flex-shrink: 0;
}

.sidebar-brand-mobile {
  display: none !important;
}

.app-main-workspace {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Mobile Hamburger in Top Navbar */
.main-nav {
  display: none !important;
}

@media (max-width: 992px) {
  .topbar-mobile-hamburger {
    display: inline-flex !important;
  }

  .left-sidebar-nav {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    transform: translateX(-100%);
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.85);
    z-index: 1050 !important;
  }

  .left-sidebar-nav.sidebar-open {
    transform: translateX(0) !important;
  }

  .sidebar-brand-mobile {
    display: flex !important;
  }
}




/* ══════════════════════════════════════════════════════════════════
   COSMIC STARFIELD BACKGROUND (ANIMATED DOTS) FROM LANDING PAGE
   ══════════════════════════════════════════════════════════════════ */
/* From Uiverse.io by jaykdoe */ 
.container.stars-container, .stars-bg-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;

  height: 100%;
  width: 100%;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
}

#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow:
    501px 811px #fff,
    1450px 1324px #fff,
    1093px 1780px #fff,
    1469px 678px #fff,
    904px 741px #fff,
    1160px 781px #fff,
    1841px 1962px #fff,
    1630px 1667px #fff,
    1788px 676px #fff,
    367px 1734px #fff,
    1343px 156px #fff,
    1283px 1142px #fff,
    1062px 378px #fff,
    1395px 467px #fff,
    1017px 1891px #fff,
    137px 1114px #fff,
    1767px 1403px #fff,
    1543px 11px #fff,
    1078px 181px #fff,
    1189px 1574px #fff,
    1697px 1551px #fff,
    439px 472px #fff,
    1491px 677px #fff,
    1364px 599px #fff,
    34px 382px #fff,
    1221px 1584px #fff,
    1266px 1499px #fff,
    169px 1907px #fff,
    1219px 1125px #fff,
    659px 18px #fff,
    1731px 1959px #fff,
    332px 1216px #fff,
    1913px 788px #fff,
    80px 712px #fff,
    326px 1605px #fff,
    574px 1502px #fff,
    473px 1653px #fff,
    404px 975px #fff,
    322px 1797px #fff,
    425px 1321px #fff,
    1121px 1797px #fff,
    731px 647px #fff,
    891px 1584px #fff,
    1523px 109px #fff,
    1379px 244px #fff,
    865px 1064px #fff,
    493px 956px #fff,
    624px 1380px #fff,
    440px 619px #fff,
    1630px 767px #fff,
    955px 1196px #fff,
    62px 729px #fff,
    126px 946px #fff,
    1256px 896px #fff,
    1444px 256px #fff,
    661px 1628px #fff,
    1078px 1716px #fff,
    300px 737px #fff,
    1734px 413px #fff,
    1296px 129px #fff,
    1771px 1678px #fff,
    977px 1764px #fff,
    1879px 549px #fff,
    665px 1531px #fff,
    89px 701px #fff,
    1084px 1183px #fff,
    1597px 1576px #fff,
    1354px 1774px #fff,
    554px 1471px #fff,
    1469px 287px #fff,
    887px 106px #fff,
    1962px 766px #fff,
    638px 805px #fff,
    1651px 741px #fff,
    1517px 1826px #fff,
    24px 1152px #fff,
    507px 558px #fff,
    1262px 652px #fff,
    246px 1048px #fff,
    1077px 421px #fff,
    1866px 1847px #fff,
    1986px 1561px #fff,
    704px 632px #fff,
    1991px 1875px #fff,
    1227px 395px #fff,
    45px 1116px #fff,
    247px 786px #fff,
    890px 607px #fff,
    787px 1235px #fff,
    557px 524px #fff,
    1582px 1285px #fff,
    1725px 1366px #fff,
    952px 747px #fff,
    251px 458px #fff,
    1500px 1250px #fff,
    1999px 1734px #fff,
    1336px 1955px #fff,
    1705px 1464px #fff,
    728px 697px #fff,
    594px 510px #fff,
    1345px 1990px #fff,
    1919px 1803px #fff,
    1117px 966px #fff,
    1629px 97px #fff,
    1046px 1196px #fff,
    810px 1092px #fff,
    722px 976px #fff,
    406px 18px #fff,
    1665px 1860px #fff,
    1758px 1628px #fff,
    1183px 463px #fff,
    564px 239px #fff,
    13px 1767px #fff,
    1482px 1472px #fff,
    1700px 347px #fff,
    1362px 244px #fff,
    1141px 1708px #fff,
    22px 885px #fff,
    374px 1309px #fff,
    1034px 1037px #fff,
    1725px 1086px #fff,
    1343px 1921px #fff,
    596px 903px #fff,
    1061px 478px #fff,
    18px 1409px #fff,
    729px 1364px #fff,
    264px 911px #fff,
    677px 1442px #fff,
    123px 33px #fff,
    1303px 646px #fff,
    1945px 792px #fff,
    1305px 938px #fff,
    918px 1536px #fff,
    620px 948px #fff,
    183px 646px #fff,
    695px 687px #fff,
    881px 272px #fff,
    1521px 1212px #fff,
    1423px 1022px #fff,
    1545px 1271px #fff,
    1393px 348px #fff,
    685px 1910px #fff,
    1446px 856px #fff,
    73px 1201px #fff,
    736px 999px #fff,
    673px 796px #fff,
    469px 850px #fff,
    1912px 142px #fff,
    1278px 664px #fff,
    184px 1990px #fff,
    1173px 1312px #fff,
    782px 1879px #fff,
    323px 1035px #fff,
    611px 908px #fff,
    565px 1449px #fff,
    748px 1713px #fff,
    1047px 490px #fff,
    1040px 1872px #fff,
    1818px 1659px #fff,
    1806px 1327px #fff,
    386px 575px #fff,
    1550px 463px #fff,
    148px 687px #fff,
    651px 1683px #fff,
    1588px 1194px #fff,
    1831px 2px #fff,
    581px 876px #fff,
    1396px 1743px #fff,
    1212px 1810px #fff,
    421px 1920px #fff,
    658px 1461px #fff,
    1859px 1809px #fff,
    1456px 388px #fff,
    186px 1627px #fff,
    1528px 1145px #fff,
    171px 97px #fff,
    674px 1072px #fff,
    676px 1052px #fff,
    1165px 1131px #fff,
    1088px 781px #fff,
    1231px 948px #fff,
    330px 257px #fff,
    426px 1046px #fff,
    549px 652px #fff,
    1338px 74px #fff,
    1749px 364px #fff,
    931px 369px #fff,
    383px 1428px #fff,
    1558px 389px #fff,
    927px 133px #fff,
    234px 1888px #fff,
    1785px 1617px #fff,
    556px 643px #fff,
    401px 275px #fff,
    406px 1644px #fff,
    1253px 1852px #fff,
    1599px 883px #fff,
    744px 1721px #fff,
    524px 1297px #fff,
    1226px 1177px #fff,
    1679px 55px #fff,
    874px 1811px #fff,
    838px 790px #fff,
    1241px 430px #fff,
    1676px 652px #fff,
    1191px 568px #fff,
    53px 1990px #fff,
    1163px 237px #fff,
    61px 223px #fff,
    592px 456px #fff,
    1844px 271px #fff,
    1324px 1488px #fff,
    1373px 717px #fff,
    1822px 709px #fff,
    1464px 941px #fff,
    1445px 1118px #fff,
    991px 1414px #fff,
    1964px 1076px #fff,
    108px 172px #fff,
    641px 1722px #fff,
    1539px 427px #fff,
    1697px 45px #fff,
    1301px 1353px #fff,
    1060px 329px #fff,
    967px 1396px #fff,
    493px 301px #fff,
    1228px 1406px #fff,
    1211px 1653px #fff,
    444px 1822px #fff,
    1746px 353px #fff,
    1449px 381px #fff,
    671px 887px #fff,
    650px 138px #fff,
    30px 1839px #fff,
    1094px 1405px #fff,
    273px 796px #fff,
    1618px 1964px #fff,
    1045px 1849px #fff,
    1472px 1155px #fff,
    1529px 1312px #fff,
    728px 448px #fff,
    44px 1908px #fff,
    691px 818px #fff,
    254px 293px #fff,
    1981px 1133px #fff,
    1307px 375px #fff,
    196px 316px #fff,
    1241px 1975px #fff,
    1138px 1706px #fff,
    1769px 463px #fff,
    1768px 1428px #fff,
    1730px 590px #fff,
    1780px 523px #fff,
    1862px 1526px #fff,
    1613px 909px #fff,
    1266px 1781px #fff,
    470px 352px #fff,
    699px 1682px #fff,
    1002px 614px #fff,
    1209px 133px #fff,
    1842px 518px #fff,
    1422px 1836px #fff,
    1720px 1901px #fff,
    470px 1788px #fff,
    1355px 1387px #fff,
    146px 1162px #fff,
    933px 80px #fff,
    681px 1063px #fff,
    313px 1341px #fff,
    740px 1498px #fff,
    168px 1014px #fff,
    345px 1355px #fff,
    1498px 1562px #fff,
    1626px 1358px #fff,
    890px 403px #fff,
    663px 562px #fff,
    1481px 168px #fff,
    22px 719px #fff,
    774px 1041px #fff,
    1899px 829px #fff,
    430px 158px #fff,
    430px 361px #fff,
    1592px 1334px #fff,
    224px 323px #fff,
    1639px 1131px #fff,
    7px 271px #fff,
    1646px 1514px #fff,
    1605px 1444px #fff,
    1820px 1665px #fff,
    1549px 1641px #fff,
    1609px 1377px #fff,
    486px 1098px #fff,
    229px 613px #fff,
    542px 1694px #fff,
    318px 256px #fff,
    1861px 918px #fff,
    889px 892px #fff,
    442px 1524px #fff,
    19px 422px #fff,
    1935px 1908px #fff,
    828px 109px #fff,
    862px 1248px #fff,
    1275px 560px #fff,
    906px 63px #fff,
    337px 1605px #fff,
    1691px 918px #fff,
    1414px 679px #fff,
    1726px 749px #fff,
    1540px 1149px #fff,
    1337px 1466px #fff,
    446px 430px #fff,
    676px 1616px #fff,
    840px 326px #fff,
    976px 977px #fff,
    1840px 642px #fff,
    1273px 804px #fff,
    1071px 928px #fff,
    1292px 1675px #fff,
    29px 1148px #fff,
    1585px 135px #fff,
    1007px 563px #fff,
    1035px 78px #fff,
    1174px 574px #fff,
    120px 1304px #fff,
    845px 1292px #fff,
    861px 540px #fff,
    234px 232px #fff,
    1940px 1367px #fff,
    759px 639px #fff,
    1775px 1381px #fff,
    906px 372px #fff,
    1104px 1165px #fff,
    1524px 911px #fff,
    1882px 330px #fff,
    1389px 700px #fff,
    300px 1629px #fff,
    220px 1614px #fff,
    563px 140px #fff,
    1611px 1586px #fff,
    793px 1316px #fff,
    325px 1070px #fff,
    1722px 1462px #fff,
    1406px 1120px #fff,
    1169px 1768px #fff,
    1956px 1053px #fff,
    959px 1587px #fff,
    585px 1566px #fff,
    370px 204px #fff,
    1606px 1416px #fff,
    443px 1606px #fff,
    1499px 1102px #fff,
    1943px 105px #fff,
    1121px 1594px #fff,
    1512px 32px #fff,
    871px 1425px #fff,
    433px 100px #fff,
    294px 1471px #fff,
    1688px 1755px #fff,
    1666px 591px #fff,
    1034px 300px #fff,
    734px 1178px #fff,
    1342px 313px #fff,
    1616px 1590px #fff,
    1763px 1472px #fff,
    632px 1935px #fff,
    1708px 872px #fff,
    1871px 915px #fff,
    1829px 1020px #fff,
    1599px 578px #fff,
    42px 585px #fff,
    1163px 1382px #fff,
    1744px 1272px #fff,
    984px 1426px #fff,
    1786px 1584px #fff,
    1813px 379px #fff,
    1867px 1127px #fff,
    97px 567px #fff,
    626px 988px #fff,
    1178px 79px #fff,
    1703px 211px #fff,
    961px 1785px #fff,
    110px 975px #fff,
    953px 1941px #fff,
    1027px 1790px #fff,
    1665px 107px #fff,
    11px 964px #fff,
    1718px 1147px #fff,
    21px 1728px #fff,
    1358px 1922px #fff,
    872px 65px #fff,
    1191px 1635px #fff,
    762px 681px #fff,
    1519px 1033px #fff,
    906px 566px #fff,
    1074px 657px #fff,
    1093px 415px #fff,
    51px 198px #fff,
    1075px 1418px #fff,
    1547px 1070px #fff,
    225px 920px #fff,
    850px 1974px #fff,
    981px 595px #fff,
    1425px 131px #fff,
    460px 917px #fff,
    56px 495px #fff,
    714px 428px #fff,
    920px 493px #fff,
    470px 1521px #fff,
    532px 821px #fff,
    1905px 71px #fff,
    883px 1501px #fff,
    294px 196px #fff,
    381px 1999px #fff,
    332px 793px #fff,
    1246px 408px #fff,
    233px 149px #fff,
    315px 231px #fff,
    1594px 1302px #fff,
    696px 1585px #fff,
    791px 136px #fff,
    479px 199px #fff,
    1627px 1413px #fff,
    1824px 924px #fff,
    1631px 342px #fff,
    1251px 1151px #fff,
    284px 1781px #fff,
    497px 1052px #fff,
    204px 1161px #fff,
    646px 1499px #fff,
    1762px 558px #fff,
    854px 1833px #fff,
    883px 945px #fff,
    44px 982px #fff,
    1101px 834px #fff,
    515px 1748px #fff,
    1578px 1435px #fff,
    819px 1258px #fff,
    776px 670px #fff,
    115px 385px #fff,
    1478px 434px #fff,
    885px 20px #fff,
    192px 1513px #fff,
    78px 1129px #fff,
    1774px 1105px #fff,
    955px 1149px #fff,
    1817px 1929px #fff,
    1106px 1832px #fff,
    1107px 1997px #fff,
    94px 23px #fff,
    243px 982px #fff,
    43px 1972px #fff,
    1798px 673px #fff,
    1131px 1589px #fff,
    841px 14px #fff,
    826px 345px #fff,
    687px 56px #fff,
    1084px 32px #fff,
    1887px 1878px #fff,
    153px 526px #fff,
    1828px 253px #fff,
    1947px 1105px #fff,
    886px 700px #fff,
    1307px 1723px #fff,
    1274px 651px #fff,
    1530px 837px #fff,
    1699px 1637px #fff,
    1703px 1331px #fff,
    1929px 1557px #fff,
    1763px 737px #fff,
    1118px 1680px #fff,
    1545px 692px #fff,
    1462px 1092px #fff,
    208px 1667px #fff,
    1393px 859px #fff,
    186px 1794px #fff,
    351px 1199px #fff,
    642px 1995px #fff,
    1061px 1726px #fff,
    1708px 115px #fff,
    1233px 1305px #fff,
    637px 1786px #fff,
    1730px 603px #fff,
    75px 1240px #fff,
    1704px 1326px #fff,
    584px 346px #fff,
    438px 1554px #fff,
    561px 513px #fff,
    1382px 225px #fff,
    467px 1674px #fff,
    1403px 815px #fff,
    1546px 1835px #fff,
    127px 1119px #fff,
    276px 591px #fff,
    688px 1458px #fff,
    765px 646px #fff,
    474px 984px #fff,
    171px 361px #fff,
    94px 1480px #fff,
    1962px 1666px #fff,
    909px 1037px #fff,
    1725px 222px #fff,
    253px 1355px #fff,
    1892px 1901px #fff,
    275px 1847px #fff,
    28px 1184px #fff,
    1725px 1382px #fff,
    882px 647px #fff,
    1935px 1046px #fff,
    10px 344px #fff,
    292px 1328px #fff,
    127px 1352px #fff,
    752px 929px #fff,
    1589px 384px #fff,
    284px 1829px #fff,
    381px 820px #fff,
    1229px 1125px #fff,
    777px 429px #fff,
    1811px 1499px #fff,
    1573px 287px #fff,
    295px 756px #fff,
    389px 616px #fff,
    781px 41px #fff,
    1092px 333px #fff,
    794px 1588px #fff,
    386px 1847px #fff,
    1802px 710px #fff,
    662px 60px #fff,
    640px 264px #fff,
    463px 746px #fff,
    1859px 799px #fff,
    763px 37px #fff,
    639px 396px #fff,
    357px 1071px #fff,
    1190px 1430px #fff,
    1814px 257px #fff,
    1382px 235px #fff,
    606px 1304px #fff,
    1939px 1470px #fff,
    1124px 349px #fff,
    307px 1567px #fff,
    310px 1323px #fff,
    1145px 922px #fff,
    1196px 1922px #fff,
    1647px 544px #fff,
    788px 1337px #fff,
    257px 632px #fff,
    1413px 414px #fff,
    590px 620px #fff,
    582px 794px #fff,
    1702px 1481px #fff,
    1055px 53px #fff,
    157px 346px #fff,
    50px 1901px #fff,
    1038px 1369px #fff,
    796px 1941px #fff,
    215px 194px #fff,
    1567px 1538px #fff,
    367px 800px #fff,
    1044px 489px #fff,
    1109px 1712px #fff,
    524px 327px #fff,
    525px 1252px #fff,
    1475px 1240px #fff,
    529px 436px #fff,
    795px 834px #fff,
    122px 1371px #fff,
    79px 482px #fff,
    520px 1249px #fff,
    336px 1878px #fff,
    188px 944px #fff,
    325px 1259px #fff,
    1491px 1942px #fff,
    620px 1054px #fff,
    1606px 1153px #fff,
    1448px 502px #fff,
    53px 1381px #fff,
    107px 1670px #fff,
    1380px 618px #fff,
    967px 1557px #fff,
    1116px 1722px #fff,
    1174px 1044px #fff,
    1805px 717px #fff,
    663px 394px #fff,
    1848px 1007px #fff,
    389px 802px #fff,
    49px 392px #fff,
    1650px 852px #fff,
    1678px 1012px #fff,
    335px 1009px #fff,
    1818px 1631px #fff,
    1568px 742px #fff,
    1162px 1991px #fff,
    52px 1190px #fff,
    1401px 928px #fff,
    119px 1549px #fff,
    537px 1529px #fff,
    2px 1709px #fff,
    122px 387px #fff,
    543px 2px #fff,
    27px 1971px #fff,
    507px 1377px #fff,
    1362px 1080px #fff,
    1031px 1544px #fff,
    1631px 1174px #fff,
    1603px 312px #fff,
    1626px 1422px #fff,
    1430px 615px #fff,
    1958px 1431px #fff,
    1946px 1412px #fff,
    1848px 247px #fff,
    984px 1808px #fff,
    1396px 225px #fff,
    319px 717px #fff,
    1252px 875px #fff,
    1619px 156px #fff,
    951px 1971px #fff,
    386px 355px #fff,
    1406px 1151px #fff,
    273px 1538px #fff,
    844px 1570px #fff,
    947px 151px #fff,
    1363px 525px #fff,
    209px 307px #fff,
    1923px 1718px #fff,
    993px 1741px #fff,
    1513px 353px #fff,
    1353px 61px #fff,
    664px 352px #fff,
    1382px 359px #fff,
    1487px 1707px #fff,
    657px 1045px #fff,
    1107px 490px #fff,
    1834px 1176px #fff,
    837px 1438px #fff,
    1947px 448px #fff,
    1196px 333px #fff,
    151px 555px #fff,
    18px 992px #fff,
    458px 748px #fff,
    1801px 890px #fff,
    1093px 1012px #fff,
    315px 1101px #fff,
    194px 323px #fff,
    754px 292px #fff,
    1737px 7px #fff,
    40px 840px #fff,
    1170px 805px #fff,
    176px 1753px #fff,
    805px 1148px #fff,
    1578px 1271px #fff,
    367px 1494px #fff,
    363px 1111px #fff,
    1955px 243px #fff,
    1451px 1093px #fff,
    375px 617px #fff,
    1223px 720px #fff,
    1178px 13px #fff,
    1456px 865px #fff,
    1440px 49px #fff,
    186px 1569px #fff,
    320px 1853px #fff,
    300px 539px #fff,
    1559px 509px #fff,
    1985px 1108px #fff,
    1588px 828px #fff,
    525px 1432px #fff,
    831px 363px #fff,
    141px 281px #fff,
    1319px 402px #fff,
    40px 456px #fff,
    1955px 478px #fff,
    1758px 818px #fff,
    1924px 688px #fff,
    1030px 953px #fff,
    1982px 210px #fff,
    917px 1401px #fff,
    1051px 1837px #fff,
    1045px 463px #fff,
    1744px 573px #fff,
    529px 1530px #fff,
    542px 469px #fff,
    1982px 324px #fff,
    1902px 1422px #fff,
    1968px 782px #fff,
    1666px 1561px #fff,
    955px 304px #fff,
    323px 778px #fff,
    272px 443px #fff,
    485px 581px #fff,
    1353px 1058px #fff,
    1257px 131px #fff,
    434px 98px #fff,
    1587px 1953px #fff,
    1749px 68px #fff,
    1984px 839px #fff,
    1518px 183px #fff,
    1071px 855px #fff,
    1662px 1994px #fff,
    1111px 106px #fff,
    1954px 838px #fff;
  animation: animStar 50s linear infinite;
}
#stars:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow:
    501px 811px #fff,
    1450px 1324px #fff,
    1093px 1780px #fff,
    1469px 678px #fff,
    904px 741px #fff,
    1160px 781px #fff,
    1841px 1962px #fff,
    1630px 1667px #fff,
    1788px 676px #fff,
    367px 1734px #fff,
    1343px 156px #fff,
    1283px 1142px #fff,
    1062px 378px #fff,
    1395px 467px #fff,
    1017px 1891px #fff,
    137px 1114px #fff,
    1767px 1403px #fff,
    1543px 11px #fff,
    1078px 181px #fff,
    1189px 1574px #fff,
    1697px 1551px #fff,
    439px 472px #fff,
    1491px 677px #fff,
    1364px 599px #fff,
    34px 382px #fff,
    1221px 1584px #fff,
    1266px 1499px #fff,
    169px 1907px #fff,
    1219px 1125px #fff,
    659px 18px #fff,
    1731px 1959px #fff,
    332px 1216px #fff,
    1913px 788px #fff,
    80px 712px #fff,
    326px 1605px #fff,
    574px 1502px #fff,
    473px 1653px #fff,
    404px 975px #fff,
    322px 1797px #fff,
    425px 1321px #fff,
    1121px 1797px #fff,
    731px 647px #fff,
    891px 1584px #fff,
    1523px 109px #fff,
    1379px 244px #fff,
    865px 1064px #fff,
    493px 956px #fff,
    624px 1380px #fff,
    440px 619px #fff,
    1630px 767px #fff,
    955px 1196px #fff,
    62px 729px #fff,
    126px 946px #fff,
    1256px 896px #fff,
    1444px 256px #fff,
    661px 1628px #fff,
    1078px 1716px #fff,
    300px 737px #fff,
    1734px 413px #fff,
    1296px 129px #fff,
    1771px 1678px #fff,
    977px 1764px #fff,
    1879px 549px #fff,
    665px 1531px #fff,
    89px 701px #fff,
    1084px 1183px #fff,
    1597px 1576px #fff,
    1354px 1774px #fff,
    554px 1471px #fff,
    1469px 287px #fff,
    887px 106px #fff,
    1962px 766px #fff,
    638px 805px #fff,
    1651px 741px #fff,
    1517px 1826px #fff,
    24px 1152px #fff,
    507px 558px #fff,
    1262px 652px #fff,
    246px 1048px #fff,
    1077px 421px #fff,
    1866px 1847px #fff,
    1986px 1561px #fff,
    704px 632px #fff,
    1991px 1875px #fff,
    1227px 395px #fff,
    45px 1116px #fff,
    247px 786px #fff,
    890px 607px #fff,
    787px 1235px #fff,
    557px 524px #fff,
    1582px 1285px #fff,
    1725px 1366px #fff,
    952px 747px #fff,
    251px 458px #fff,
    1500px 1250px #fff,
    1999px 1734px #fff,
    1336px 1955px #fff,
    1705px 1464px #fff,
    728px 697px #fff,
    594px 510px #fff,
    1345px 1990px #fff,
    1919px 1803px #fff,
    1117px 966px #fff,
    1629px 97px #fff,
    1046px 1196px #fff,
    810px 1092px #fff,
    722px 976px #fff,
    406px 18px #fff,
    1665px 1860px #fff,
    1758px 1628px #fff,
    1183px 463px #fff,
    564px 239px #fff,
    13px 1767px #fff,
    1482px 1472px #fff,
    1700px 347px #fff,
    1362px 244px #fff,
    1141px 1708px #fff,
    22px 885px #fff,
    374px 1309px #fff,
    1034px 1037px #fff,
    1725px 1086px #fff,
    1343px 1921px #fff,
    596px 903px #fff,
    1061px 478px #fff,
    18px 1409px #fff,
    729px 1364px #fff,
    264px 911px #fff,
    677px 1442px #fff,
    123px 33px #fff,
    1303px 646px #fff,
    1945px 792px #fff,
    1305px 938px #fff,
    918px 1536px #fff,
    620px 948px #fff,
    183px 646px #fff,
    695px 687px #fff,
    881px 272px #fff,
    1521px 1212px #fff,
    1423px 1022px #fff,
    1545px 1271px #fff,
    1393px 348px #fff,
    685px 1910px #fff,
    1446px 856px #fff,
    73px 1201px #fff,
    736px 999px #fff,
    673px 796px #fff,
    469px 850px #fff,
    1912px 142px #fff,
    1278px 664px #fff,
    184px 1990px #fff,
    1173px 1312px #fff,
    782px 1879px #fff,
    323px 1035px #fff,
    611px 908px #fff,
    565px 1449px #fff,
    748px 1713px #fff,
    1047px 490px #fff,
    1040px 1872px #fff,
    1818px 1659px #fff,
    1806px 1327px #fff,
    386px 575px #fff,
    1550px 463px #fff,
    148px 687px #fff,
    651px 1683px #fff,
    1588px 1194px #fff,
    1831px 2px #fff,
    581px 876px #fff,
    1396px 1743px #fff,
    1212px 1810px #fff,
    421px 1920px #fff,
    658px 1461px #fff,
    1859px 1809px #fff,
    1456px 388px #fff,
    186px 1627px #fff,
    1528px 1145px #fff,
    171px 97px #fff,
    674px 1072px #fff,
    676px 1052px #fff,
    1165px 1131px #fff,
    1088px 781px #fff,
    1231px 948px #fff,
    330px 257px #fff,
    426px 1046px #fff,
    549px 652px #fff,
    1338px 74px #fff,
    1749px 364px #fff,
    931px 369px #fff,
    383px 1428px #fff,
    1558px 389px #fff,
    927px 133px #fff,
    234px 1888px #fff,
    1785px 1617px #fff,
    556px 643px #fff,
    401px 275px #fff,
    406px 1644px #fff,
    1253px 1852px #fff,
    1599px 883px #fff,
    744px 1721px #fff,
    524px 1297px #fff,
    1226px 1177px #fff,
    1679px 55px #fff,
    874px 1811px #fff,
    838px 790px #fff,
    1241px 430px #fff,
    1676px 652px #fff,
    1191px 568px #fff,
    53px 1990px #fff,
    1163px 237px #fff,
    61px 223px #fff,
    592px 456px #fff,
    1844px 271px #fff,
    1324px 1488px #fff,
    1373px 717px #fff,
    1822px 709px #fff,
    1464px 941px #fff,
    1445px 1118px #fff,
    991px 1414px #fff,
    1964px 1076px #fff,
    108px 172px #fff,
    641px 1722px #fff,
    1539px 427px #fff,
    1697px 45px #fff,
    1301px 1353px #fff,
    1060px 329px #fff,
    967px 1396px #fff,
    493px 301px #fff,
    1228px 1406px #fff,
    1211px 1653px #fff,
    444px 1822px #fff,
    1746px 353px #fff,
    1449px 381px #fff,
    671px 887px #fff,
    650px 138px #fff,
    30px 1839px #fff,
    1094px 1405px #fff,
    273px 796px #fff,
    1618px 1964px #fff,
    1045px 1849px #fff,
    1472px 1155px #fff,
    1529px 1312px #fff,
    728px 448px #fff,
    44px 1908px #fff,
    691px 818px #fff,
    254px 293px #fff,
    1981px 1133px #fff,
    1307px 375px #fff,
    196px 316px #fff,
    1241px 1975px #fff,
    1138px 1706px #fff,
    1769px 463px #fff,
    1768px 1428px #fff,
    1730px 590px #fff,
    1780px 523px #fff,
    1862px 1526px #fff,
    1613px 909px #fff,
    1266px 1781px #fff,
    470px 352px #fff,
    699px 1682px #fff,
    1002px 614px #fff,
    1209px 133px #fff,
    1842px 518px #fff,
    1422px 1836px #fff,
    1720px 1901px #fff,
    470px 1788px #fff,
    1355px 1387px #fff,
    146px 1162px #fff,
    933px 80px #fff,
    681px 1063px #fff,
    313px 1341px #fff,
    740px 1498px #fff,
    168px 1014px #fff,
    345px 1355px #fff,
    1498px 1562px #fff,
    1626px 1358px #fff,
    890px 403px #fff,
    663px 562px #fff,
    1481px 168px #fff,
    22px 719px #fff,
    774px 1041px #fff,
    1899px 829px #fff,
    430px 158px #fff,
    430px 361px #fff,
    1592px 1334px #fff,
    224px 323px #fff,
    1639px 1131px #fff,
    7px 271px #fff,
    1646px 1514px #fff,
    1605px 1444px #fff,
    1820px 1665px #fff,
    1549px 1641px #fff,
    1609px 1377px #fff,
    486px 1098px #fff,
    229px 613px #fff,
    542px 1694px #fff,
    318px 256px #fff,
    1861px 918px #fff,
    889px 892px #fff,
    442px 1524px #fff,
    19px 422px #fff,
    1935px 1908px #fff,
    828px 109px #fff,
    862px 1248px #fff,
    1275px 560px #fff,
    906px 63px #fff,
    337px 1605px #fff,
    1691px 918px #fff,
    1414px 679px #fff,
    1726px 749px #fff,
    1540px 1149px #fff,
    1337px 1466px #fff,
    446px 430px #fff,
    676px 1616px #fff,
    840px 326px #fff,
    976px 977px #fff,
    1840px 642px #fff,
    1273px 804px #fff,
    1071px 928px #fff,
    1292px 1675px #fff,
    29px 1148px #fff,
    1585px 135px #fff,
    1007px 563px #fff,
    1035px 78px #fff,
    1174px 574px #fff,
    120px 1304px #fff,
    845px 1292px #fff,
    861px 540px #fff,
    234px 232px #fff,
    1940px 1367px #fff,
    759px 639px #fff,
    1775px 1381px #fff,
    906px 372px #fff,
    1104px 1165px #fff,
    1524px 911px #fff,
    1882px 330px #fff,
    1389px 700px #fff,
    300px 1629px #fff,
    220px 1614px #fff,
    563px 140px #fff,
    1611px 1586px #fff,
    793px 1316px #fff,
    325px 1070px #fff,
    1722px 1462px #fff,
    1406px 1120px #fff,
    1169px 1768px #fff,
    1956px 1053px #fff,
    959px 1587px #fff,
    585px 1566px #fff,
    370px 204px #fff,
    1606px 1416px #fff,
    443px 1606px #fff,
    1499px 1102px #fff,
    1943px 105px #fff,
    1121px 1594px #fff,
    1512px 32px #fff,
    871px 1425px #fff,
    433px 100px #fff,
    294px 1471px #fff,
    1688px 1755px #fff,
    1666px 591px #fff,
    1034px 300px #fff,
    734px 1178px #fff,
    1342px 313px #fff,
    1616px 1590px #fff,
    1763px 1472px #fff,
    632px 1935px #fff,
    1708px 872px #fff,
    1871px 915px #fff,
    1829px 1020px #fff,
    1599px 578px #fff,
    42px 585px #fff,
    1163px 1382px #fff,
    1744px 1272px #fff,
    984px 1426px #fff,
    1786px 1584px #fff,
    1813px 379px #fff,
    1867px 1127px #fff,
    97px 567px #fff,
    626px 988px #fff,
    1178px 79px #fff,
    1703px 211px #fff,
    961px 1785px #fff,
    110px 975px #fff,
    953px 1941px #fff,
    1027px 1790px #fff,
    1665px 107px #fff,
    11px 964px #fff,
    1718px 1147px #fff,
    21px 1728px #fff,
    1358px 1922px #fff,
    872px 65px #fff,
    1191px 1635px #fff,
    762px 681px #fff,
    1519px 1033px #fff,
    906px 566px #fff,
    1074px 657px #fff,
    1093px 415px #fff,
    51px 198px #fff,
    1075px 1418px #fff,
    1547px 1070px #fff,
    225px 920px #fff,
    850px 1974px #fff,
    981px 595px #fff,
    1425px 131px #fff,
    460px 917px #fff,
    56px 495px #fff,
    714px 428px #fff,
    920px 493px #fff,
    470px 1521px #fff,
    532px 821px #fff,
    1905px 71px #fff,
    883px 1501px #fff,
    294px 196px #fff,
    381px 1999px #fff,
    332px 793px #fff,
    1246px 408px #fff,
    233px 149px #fff,
    315px 231px #fff,
    1594px 1302px #fff,
    696px 1585px #fff,
    791px 136px #fff,
    479px 199px #fff,
    1627px 1413px #fff,
    1824px 924px #fff,
    1631px 342px #fff,
    1251px 1151px #fff,
    284px 1781px #fff,
    497px 1052px #fff,
    204px 1161px #fff,
    646px 1499px #fff,
    1762px 558px #fff,
    854px 1833px #fff,
    883px 945px #fff,
    44px 982px #fff,
    1101px 834px #fff,
    515px 1748px #fff,
    1578px 1435px #fff,
    819px 1258px #fff,
    776px 670px #fff,
    115px 385px #fff,
    1478px 434px #fff,
    885px 20px #fff,
    192px 1513px #fff,
    78px 1129px #fff,
    1774px 1105px #fff,
    955px 1149px #fff,
    1817px 1929px #fff,
    1106px 1832px #fff,
    1107px 1997px #fff,
    94px 23px #fff,
    243px 982px #fff,
    43px 1972px #fff,
    1798px 673px #fff,
    1131px 1589px #fff,
    841px 14px #fff,
    826px 345px #fff,
    687px 56px #fff,
    1084px 32px #fff,
    1887px 1878px #fff,
    153px 526px #fff,
    1828px 253px #fff,
    1947px 1105px #fff,
    886px 700px #fff,
    1307px 1723px #fff,
    1274px 651px #fff,
    1530px 837px #fff,
    1699px 1637px #fff,
    1703px 1331px #fff,
    1929px 1557px #fff,
    1763px 737px #fff,
    1118px 1680px #fff,
    1545px 692px #fff,
    1462px 1092px #fff,
    208px 1667px #fff,
    1393px 859px #fff,
    186px 1794px #fff,
    351px 1199px #fff,
    642px 1995px #fff,
    1061px 1726px #fff,
    1708px 115px #fff,
    1233px 1305px #fff,
    637px 1786px #fff,
    1730px 603px #fff,
    75px 1240px #fff,
    1704px 1326px #fff,
    584px 346px #fff,
    438px 1554px #fff,
    561px 513px #fff,
    1382px 225px #fff,
    467px 1674px #fff,
    1403px 815px #fff,
    1546px 1835px #fff,
    127px 1119px #fff,
    276px 591px #fff,
    688px 1458px #fff,
    765px 646px #fff,
    474px 984px #fff,
    171px 361px #fff,
    94px 1480px #fff,
    1962px 1666px #fff,
    909px 1037px #fff,
    1725px 222px #fff,
    253px 1355px #fff,
    1892px 1901px #fff,
    275px 1847px #fff,
    28px 1184px #fff,
    1725px 1382px #fff,
    882px 647px #fff,
    1935px 1046px #fff,
    10px 344px #fff,
    292px 1328px #fff,
    127px 1352px #fff,
    752px 929px #fff,
    1589px 384px #fff,
    284px 1829px #fff,
    381px 820px #fff,
    1229px 1125px #fff,
    777px 429px #fff,
    1811px 1499px #fff,
    1573px 287px #fff,
    295px 756px #fff,
    389px 616px #fff,
    781px 41px #fff,
    1092px 333px #fff,
    794px 1588px #fff,
    386px 1847px #fff,
    1802px 710px #fff,
    662px 60px #fff,
    640px 264px #fff,
    463px 746px #fff,
    1859px 799px #fff,
    763px 37px #fff,
    639px 396px #fff,
    357px 1071px #fff,
    1190px 1430px #fff,
    1814px 257px #fff,
    1382px 235px #fff,
    606px 1304px #fff,
    1939px 1470px #fff,
    1124px 349px #fff,
    307px 1567px #fff,
    310px 1323px #fff,
    1145px 922px #fff,
    1196px 1922px #fff,
    1647px 544px #fff,
    788px 1337px #fff,
    257px 632px #fff,
    1413px 414px #fff,
    590px 620px #fff,
    582px 794px #fff,
    1702px 1481px #fff,
    1055px 53px #fff,
    157px 346px #fff,
    50px 1901px #fff,
    1038px 1369px #fff,
    796px 1941px #fff,
    215px 194px #fff,
    1567px 1538px #fff,
    367px 800px #fff,
    1044px 489px #fff,
    1109px 1712px #fff,
    524px 327px #fff,
    525px 1252px #fff,
    1475px 1240px #fff,
    529px 436px #fff,
    795px 834px #fff,
    122px 1371px #fff,
    79px 482px #fff,
    520px 1249px #fff,
    336px 1878px #fff,
    188px 944px #fff,
    325px 1259px #fff,
    1491px 1942px #fff,
    620px 1054px #fff,
    1606px 1153px #fff,
    1448px 502px #fff,
    53px 1381px #fff,
    107px 1670px #fff,
    1380px 618px #fff,
    967px 1557px #fff,
    1116px 1722px #fff,
    1174px 1044px #fff,
    1805px 717px #fff,
    663px 394px #fff,
    1848px 1007px #fff,
    389px 802px #fff,
    49px 392px #fff,
    1650px 852px #fff,
    1678px 1012px #fff,
    335px 1009px #fff,
    1818px 1631px #fff,
    1568px 742px #fff,
    1162px 1991px #fff,
    52px 1190px #fff,
    1401px 928px #fff,
    119px 1549px #fff,
    537px 1529px #fff,
    2px 1709px #fff,
    122px 387px #fff,
    543px 2px #fff,
    27px 1971px #fff,
    507px 1377px #fff,
    1362px 1080px #fff,
    1031px 1544px #fff,
    1631px 1174px #fff,
    1603px 312px #fff,
    1626px 1422px #fff,
    1430px 615px #fff,
    1958px 1431px #fff,
    1946px 1412px #fff,
    1848px 247px #fff,
    984px 1808px #fff,
    1396px 225px #fff,
    319px 717px #fff,
    1252px 875px #fff,
    1619px 156px #fff,
    951px 1971px #fff,
    386px 355px #fff,
    1406px 1151px #fff,
    273px 1538px #fff,
    844px 1570px #fff,
    947px 151px #fff,
    1363px 525px #fff,
    209px 307px #fff,
    1923px 1718px #fff,
    993px 1741px #fff,
    1513px 353px #fff,
    1353px 61px #fff,
    664px 352px #fff,
    1382px 359px #fff,
    1487px 1707px #fff,
    657px 1045px #fff,
    1107px 490px #fff,
    1834px 1176px #fff,
    837px 1438px #fff,
    1947px 448px #fff,
    1196px 333px #fff,
    151px 555px #fff,
    18px 992px #fff,
    458px 748px #fff,
    1801px 890px #fff,
    1093px 1012px #fff,
    315px 1101px #fff,
    194px 323px #fff,
    754px 292px #fff,
    1737px 7px #fff,
    40px 840px #fff,
    1170px 805px #fff,
    176px 1753px #fff,
    805px 1148px #fff,
    1578px 1271px #fff,
    367px 1494px #fff,
    363px 1111px #fff,
    1955px 243px #fff,
    1451px 1093px #fff,
    375px 617px #fff,
    1223px 720px #fff,
    1178px 13px #fff,
    1456px 865px #fff,
    1440px 49px #fff,
    186px 1569px #fff,
    320px 1853px #fff,
    300px 539px #fff,
    1559px 509px #fff,
    1985px 1108px #fff,
    1588px 828px #fff,
    525px 1432px #fff,
    831px 363px #fff,
    141px 281px #fff,
    1319px 402px #fff,
    40px 456px #fff,
    1955px 478px #fff,
    1758px 818px #fff,
    1924px 688px #fff,
    1030px 953px #fff,
    1982px 210px #fff,
    917px 1401px #fff,
    1051px 1837px #fff,
    1045px 463px #fff,
    1744px 573px #fff,
    529px 1530px #fff,
    542px 469px #fff,
    1982px 324px #fff,
    1902px 1422px #fff,
    1968px 782px #fff,
    1666px 1561px #fff,
    955px 304px #fff,
    323px 778px #fff,
    272px 443px #fff,
    485px 581px #fff,
    1353px 1058px #fff,
    1257px 131px #fff,
    434px 98px #fff,
    1587px 1953px #fff,
    1749px 68px #fff,
    1984px 839px #fff,
    1518px 183px #fff,
    1071px 855px #fff,
    1662px 1994px #fff,
    1111px 106px #fff,
    1954px 838px #fff;
}

#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow:
    1925px 1320px #fff,
    693px 1778px #fff,
    1016px 711px #fff,
    1171px 563px #fff,
    661px 1919px #fff,
    1610px 44px #fff,
    1275px 140px #fff,
    1208px 1802px #fff,
    1473px 1587px #fff,
    11px 1117px #fff,
    853px 1757px #fff,
    1149px 937px #fff,
    1353px 428px #fff,
    270px 279px #fff,
    258px 1404px #fff,
    417px 1188px #fff,
    286px 561px #fff,
    393px 1765px #fff,
    147px 881px #fff,
    666px 1097px #fff,
    1425px 1278px #fff,
    806px 156px #fff,
    1252px 561px #fff,
    218px 52px #fff,
    1371px 1980px #fff,
    171px 745px #fff,
    1424px 89px #fff,
    137px 244px #fff,
    939px 1922px #fff,
    137px 1080px #fff,
    1757px 50px #fff,
    904px 536px #fff,
    1938px 1001px #fff,
    1172px 440px #fff,
    72px 1475px #fff,
    102px 121px #fff,
    804px 1671px #fff,
    1314px 270px #fff,
    440px 1341px #fff,
    1216px 511px #fff,
    1061px 1523px #fff,
    97px 274px #fff,
    704px 1318px #fff,
    52px 1872px #fff,
    1962px 296px #fff,
    111px 289px #fff,
    1157px 1236px #fff,
    1347px 1451px #fff,
    820px 286px #fff,
    1389px 1169px #fff,
    644px 841px #fff,
    1286px 522px #fff,
    955px 659px #fff,
    428px 1805px #fff,
    237px 557px #fff,
    1689px 1058px #fff,
    636px 1882px #fff,
    1349px 1664px #fff,
    1548px 432px #fff,
    1841px 504px #fff,
    302px 252px #fff,
    827px 1765px #fff,
    620px 123px #fff,
    207px 748px #fff,
    1454px 1234px #fff,
    1967px 1790px #fff,
    542px 33px #fff,
    742px 1214px #fff,
    255px 1402px #fff,
    74px 1772px #fff,
    699px 475px #fff,
    980px 1253px #fff,
    534px 1676px #fff,
    909px 202px #fff,
    1498px 1251px #fff,
    1796px 120px #fff,
    1409px 1263px #fff,
    1627px 995px #fff,
    969px 710px #fff,
    1674px 676px #fff,
    1832px 759px #fff,
    1623px 563px #fff,
    251px 1790px #fff,
    96px 1688px #fff,
    886px 239px #fff,
    778px 150px #fff,
    1767px 430px #fff,
    765px 1259px #fff,
    1189px 877px #fff,
    444px 1629px #fff,
    1560px 324px #fff,
    1952px 1097px #fff,
    712px 1173px #fff,
    541px 911px #fff,
    827px 1420px #fff,
    1233px 285px #fff,
    784px 546px #fff,
    645px 285px #fff,
    1273px 1255px #fff,
    1821px 174px #fff,
    221px 1795px #fff,
    1004px 456px #fff,
    1298px 941px #fff,
    274px 387px #fff,
    174px 376px #fff,
    1491px 258px #fff,
    1489px 1946px #fff,
    1134px 1382px #fff,
    1289px 1145px #fff,
    464px 358px #fff,
    1249px 1842px #fff,
    1665px 831px #fff,
    1982px 84px #fff,
    541px 774px #fff,
    1994px 523px #fff,
    762px 1644px #fff,
    1730px 867px #fff,
    1951px 1287px #fff,
    911px 1691px #fff,
    1454px 725px #fff,
    1287px 1940px #fff,
    70px 564px #fff,
    1980px 638px #fff,
    1674px 1774px #fff,
    1720px 116px #fff,
    1747px 182px #fff,
    1040px 450px #fff,
    1795px 375px #fff,
    857px 1471px #fff,
    1326px 1730px #fff,
    915px 274px #fff,
    1224px 358px #fff,
    1808px 60px #fff,
    43px 1870px #fff,
    1810px 1536px #fff,
    1564px 1719px #fff,
    731px 1388px #fff,
    1953px 1967px #fff,
    1744px 1119px #fff,
    794px 1384px #fff,
    959px 714px #fff,
    18px 1932px #fff,
    1358px 1437px #fff,
    355px 939px #fff,
    1355px 1648px #fff,
    608px 719px #fff,
    383px 758px #fff,
    1164px 1681px #fff,
    1045px 253px #fff,
    424px 1279px #fff,
    1899px 359px #fff,
    379px 488px #fff,
    214px 465px #fff,
    179px 905px #fff,
    830px 1993px #fff,
    448px 1077px #fff,
    1880px 1354px #fff,
    1973px 347px #fff,
    745px 1025px #fff,
    788px 1007px #fff,
    1377px 883px #fff,
    6px 290px #fff,
    1312px 407px #fff,
    1398px 622px #fff,
    1405px 339px #fff,
    1198px 1709px #fff,
    988px 1226px #fff,
    87px 1459px #fff,
    1113px 1698px #fff,
    997px 732px #fff,
    708px 331px #fff,
    1876px 1112px #fff,
    1729px 1797px #fff,
    719px 703px #fff,
    1295px 522px #fff,
    758px 1061px #fff,
    1309px 1014px #fff,
    1327px 1365px #fff,
    854px 1317px #fff,
    531px 1001px #fff,
    1751px 1040px #fff,
    1354px 190px #fff,
    800px 1538px #fff,
    88px 1455px #fff,
    668px 39px #fff,
    1379px 41px #fff,
    892px 524px #fff,
    54px 649px #fff,
    1289px 730px #fff,
    727px 488px #fff,
    181px 842px #fff,
    1230px 64px #fff,
    3px 857px #fff,
    292px 1201px #fff,
    1343px 673px #fff,
    1096px 1412px #fff,
    1520px 292px #fff,
    104px 1683px #fff,
    934px 1387px #fff,
    314px 739px #fff;
  animation: animStar 100s linear infinite;
}
#stars2:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow:
    1925px 1320px #fff,
    693px 1778px #fff,
    1016px 711px #fff,
    1171px 563px #fff,
    661px 1919px #fff,
    1610px 44px #fff,
    1275px 140px #fff,
    1208px 1802px #fff,
    1473px 1587px #fff,
    11px 1117px #fff,
    853px 1757px #fff,
    1149px 937px #fff,
    1353px 428px #fff,
    270px 279px #fff,
    258px 1404px #fff,
    417px 1188px #fff,
    286px 561px #fff,
    393px 1765px #fff,
    147px 881px #fff,
    666px 1097px #fff,
    1425px 1278px #fff,
    806px 156px #fff,
    1252px 561px #fff,
    218px 52px #fff,
    1371px 1980px #fff,
    171px 745px #fff,
    1424px 89px #fff,
    137px 244px #fff,
    939px 1922px #fff,
    137px 1080px #fff,
    1757px 50px #fff,
    904px 536px #fff,
    1938px 1001px #fff,
    1172px 440px #fff,
    72px 1475px #fff,
    102px 121px #fff,
    804px 1671px #fff,
    1314px 270px #fff,
    440px 1341px #fff,
    1216px 511px #fff,
    1061px 1523px #fff,
    97px 274px #fff,
    704px 1318px #fff,
    52px 1872px #fff,
    1962px 296px #fff,
    111px 289px #fff,
    1157px 1236px #fff,
    1347px 1451px #fff,
    820px 286px #fff,
    1389px 1169px #fff,
    644px 841px #fff,
    1286px 522px #fff,
    955px 659px #fff,
    428px 1805px #fff,
    237px 557px #fff,
    1689px 1058px #fff,
    636px 1882px #fff,
    1349px 1664px #fff,
    1548px 432px #fff,
    1841px 504px #fff,
    302px 252px #fff,
    827px 1765px #fff,
    620px 123px #fff,
    207px 748px #fff,
    1454px 1234px #fff,
    1967px 1790px #fff,
    542px 33px #fff,
    742px 1214px #fff,
    255px 1402px #fff,
    74px 1772px #fff,
    699px 475px #fff,
    980px 1253px #fff,
    534px 1676px #fff,
    909px 202px #fff,
    1498px 1251px #fff,
    1796px 120px #fff,
    1409px 1263px #fff,
    1627px 995px #fff,
    969px 710px #fff,
    1674px 676px #fff,
    1832px 759px #fff,
    1623px 563px #fff,
    251px 1790px #fff,
    96px 1688px #fff,
    886px 239px #fff,
    778px 150px #fff,
    1767px 430px #fff,
    765px 1259px #fff,
    1189px 877px #fff,
    444px 1629px #fff,
    1560px 324px #fff,
    1952px 1097px #fff,
    712px 1173px #fff,
    541px 911px #fff,
    827px 1420px #fff,
    1233px 285px #fff,
    784px 546px #fff,
    645px 285px #fff,
    1273px 1255px #fff,
    1821px 174px #fff,
    221px 1795px #fff,
    1004px 456px #fff,
    1298px 941px #fff,
    274px 387px #fff,
    174px 376px #fff,
    1491px 258px #fff,
    1489px 1946px #fff,
    1134px 1382px #fff,
    1289px 1145px #fff,
    464px 358px #fff,
    1249px 1842px #fff,
    1665px 831px #fff,
    1982px 84px #fff,
    541px 774px #fff,
    1994px 523px #fff,
    762px 1644px #fff,
    1730px 867px #fff,
    1951px 1287px #fff,
    911px 1691px #fff,
    1454px 725px #fff,
    1287px 1940px #fff,
    70px 564px #fff,
    1980px 638px #fff,
    1674px 1774px #fff,
    1720px 116px #fff,
    1747px 182px #fff,
    1040px 450px #fff,
    1795px 375px #fff,
    857px 1471px #fff,
    1326px 1730px #fff,
    915px 274px #fff,
    1224px 358px #fff,
    1808px 60px #fff,
    43px 1870px #fff,
    1810px 1536px #fff,
    1564px 1719px #fff,
    731px 1388px #fff,
    1953px 1967px #fff,
    1744px 1119px #fff,
    794px 1384px #fff,
    959px 714px #fff,
    18px 1932px #fff,
    1358px 1437px #fff,
    355px 939px #fff,
    1355px 1648px #fff,
    608px 719px #fff,
    383px 758px #fff,
    1164px 1681px #fff,
    1045px 253px #fff,
    424px 1279px #fff,
    1899px 359px #fff,
    379px 488px #fff,
    214px 465px #fff,
    179px 905px #fff,
    830px 1993px #fff,
    448px 1077px #fff,
    1880px 1354px #fff,
    1973px 347px #fff,
    745px 1025px #fff,
    788px 1007px #fff,
    1377px 883px #fff,
    6px 290px #fff,
    1312px 407px #fff,
    1398px 622px #fff,
    1405px 339px #fff,
    1198px 1709px #fff,
    988px 1226px #fff,
    87px 1459px #fff,
    1113px 1698px #fff,
    997px 732px #fff,
    708px 331px #fff,
    1876px 1112px #fff,
    1729px 1797px #fff,
    719px 703px #fff,
    1295px 522px #fff,
    758px 1061px #fff,
    1309px 1014px #fff,
    1327px 1365px #fff,
    854px 1317px #fff,
    531px 1001px #fff,
    1751px 1040px #fff,
    1354px 190px #fff,
    800px 1538px #fff,
    88px 1455px #fff,
    668px 39px #fff,
    1379px 41px #fff,
    892px 524px #fff,
    54px 649px #fff,
    1289px 730px #fff,
    727px 488px #fff,
    181px 842px #fff,
    1230px 64px #fff,
    3px 857px #fff,
    292px 1201px #fff,
    1343px 673px #fff,
    1096px 1412px #fff,
    1520px 292px #fff,
    104px 1683px #fff,
    934px 1387px #fff,
    314px 739px #fff;
}

#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow:
    200px 981px #fff,
    1731px 521px #fff,
    132px 1039px #fff,
    1888px 1547px #fff,
    899px 1226px #fff,
    1887px 580px #fff,
    1548px 1092px #fff,
    1626px 689px #fff,
    254px 1072px #fff,
    1684px 1211px #fff,
    672px 1267px #fff,
    939px 668px #fff,
    1969px 645px #fff,
    1126px 983px #fff,
    457px 568px #fff,
    476px 876px #fff,
    829px 1896px #fff,
    1364px 1846px #fff,
    1507px 1120px #fff,
    936px 1948px #fff,
    1833px 832px #fff,
    1424px 285px #fff,
    1377px 1596px #fff,
    432px 153px #fff,
    1348px 1410px #fff,
    1529px 954px #fff,
    1102px 387px #fff,
    264px 297px #fff,
    811px 977px #fff,
    1931px 673px #fff,
    1734px 978px #fff,
    1772px 1567px #fff,
    1197px 1400px #fff,
    764px 282px #fff,
    1103px 822px #fff,
    872px 1803px #fff,
    1057px 1763px #fff,
    52px 1299px #fff,
    1312px 1236px #fff,
    235px 1082px #fff,
    299px 1086px #fff,
    1017px 1602px #fff,
    1950px 626px #fff,
    1306px 132px #fff,
    1358px 1618px #fff,
    1873px 1718px #fff,
    1447px 940px #fff,
    1888px 1195px #fff,
    1704px 1765px #fff,
    872px 1357px #fff,
    1555px 1120px #fff,
    250px 1415px #fff,
    450px 415px #fff,
    492px 901px #fff,
    170px 1641px #fff,
    56px 1129px #fff,
    627px 1514px #fff,
    1221px 500px #fff,
    324px 1895px #fff,
    1397px 1775px #fff,
    1966px 598px #fff,
    1550px 763px #fff,
    326px 1605px #fff,
    261px 969px #fff,
    890px 281px #fff,
    736px 544px #fff,
    589px 1262px #fff,
    1581px 368px #fff,
    1900px 1132px #fff,
    1914px 585px #fff,
    1864px 1517px #fff,
    241px 217px #fff,
    859px 787px #fff,
    996px 1729px #fff,
    741px 121px #fff,
    418px 414px #fff,
    142px 967px #fff,
    387px 896px #fff,
    703px 562px #fff,
    968px 1136px #fff,
    1682px 332px #fff,
    1287px 846px #fff,
    256px 1427px #fff,
    1885px 432px #fff,
    1739px 1458px #fff,
    345px 1769px #fff,
    1140px 1612px #fff,
    192px 1921px #fff,
    920px 471px #fff,
    834px 881px #fff,
    917px 1803px #fff,
    466px 1266px #fff,
    483px 1108px #fff,
    689px 986px #fff,
    1279px 786px #fff,
    458px 910px #fff,
    1250px 870px #fff,
    785px 1654px #fff,
    1543px 1757px #fff,
    287px 1272px #fff;
  animation: animStar 150s linear infinite;
}
#stars3:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow:
    200px 981px #fff,
    1731px 521px #fff,
    132px 1039px #fff,
    1888px 1547px #fff,
    899px 1226px #fff,
    1887px 580px #fff,
    1548px 1092px #fff,
    1626px 689px #fff,
    254px 1072px #fff,
    1684px 1211px #fff,
    672px 1267px #fff,
    939px 668px #fff,
    1969px 645px #fff,
    1126px 983px #fff,
    457px 568px #fff,
    476px 876px #fff,
    829px 1896px #fff,
    1364px 1846px #fff,
    1507px 1120px #fff,
    936px 1948px #fff,
    1833px 832px #fff,
    1424px 285px #fff,
    1377px 1596px #fff,
    432px 153px #fff,
    1348px 1410px #fff,
    1529px 954px #fff,
    1102px 387px #fff,
    264px 297px #fff,
    811px 977px #fff,
    1931px 673px #fff,
    1734px 978px #fff,
    1772px 1567px #fff,
    1197px 1400px #fff,
    764px 282px #fff,
    1103px 822px #fff,
    872px 1803px #fff,
    1057px 1763px #fff,
    52px 1299px #fff,
    1312px 1236px #fff,
    235px 1082px #fff,
    299px 1086px #fff,
    1017px 1602px #fff,
    1950px 626px #fff,
    1306px 132px #fff,
    1358px 1618px #fff,
    1873px 1718px #fff,
    1447px 940px #fff,
    1888px 1195px #fff,
    1704px 1765px #fff,
    872px 1357px #fff,
    1555px 1120px #fff,
    250px 1415px #fff,
    450px 415px #fff,
    492px 901px #fff,
    170px 1641px #fff,
    56px 1129px #fff,
    627px 1514px #fff,
    1221px 500px #fff,
    324px 1895px #fff,
    1397px 1775px #fff,
    1966px 598px #fff,
    1550px 763px #fff,
    326px 1605px #fff,
    261px 969px #fff,
    890px 281px #fff,
    736px 544px #fff,
    589px 1262px #fff,
    1581px 368px #fff,
    1900px 1132px #fff,
    1914px 585px #fff,
    1864px 1517px #fff,
    241px 217px #fff,
    859px 787px #fff,
    996px 1729px #fff,
    741px 121px #fff,
    418px 414px #fff,
    142px 967px #fff,
    387px 896px #fff,
    703px 562px #fff,
    968px 1136px #fff,
    1682px 332px #fff,
    1287px 846px #fff,
    256px 1427px #fff,
    1885px 432px #fff,
    1739px 1458px #fff,
    345px 1769px #fff,
    1140px 1612px #fff,
    192px 1921px #fff,
    920px 471px #fff,
    834px 881px #fff,
    917px 1803px #fff,
    466px 1266px #fff,
    483px 1108px #fff,
    689px 986px #fff,
    1279px 786px #fff,
    458px 910px #fff,
    1250px 870px #fff,
    785px 1654px #fff,
    1543px 1757px #fff,
    287px 1272px #fff;
}

#title {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  color: #fff;
  text-align: center;
  font-family: "lato", sans-serif;
  font-weight: 300;
  font-size: 50px;
  letter-spacing: 10px;
  margin-top: -60px;
  padding-left: 10px;
  opacity: 0;
  transform: translateY(30px);
  animation: introFadeUp 1.2s ease-out forwards;
}
#title span {
  background: -webkit-linear-gradient(white, #38495a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

@keyframes introFadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.stars-bg-container { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }


.stars-bg-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
}

.app-container {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

.auth-page, .auth-layout, .auth-card {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════════
   STOP LOSS & TARGET PROTECTION TOGGLE SWITCH
   ══════════════════════════════════════════════════════════════════ */
.protection-switch-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.25);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.protection-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
  margin: 0;
}

.protection-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.protection-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.18);
  transition: .3s;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.protection-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 2px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

.protection-switch input:checked + .protection-slider {
  background-color: #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
  border-color: #34d399;
}

.protection-switch input:checked + .protection-slider:before {
  transform: translateX(20px);
}

/* ══════════════════════════════════════════════════════════════════
   DESYNCED POSITION RECONCILIATION WARNING BANNER
   ══════════════════════════════════════════════════════════════════ */
.desync-warning-banner {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.15) 0%, rgba(239, 68, 68, 0.15) 100%);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  animation: pulseDesync 3s ease infinite;
}

@keyframes pulseDesync {
  0%, 100% { box-shadow: 0 0 0 rgba(245, 158, 11, 0); }
  50% { box-shadow: 0 0 14px rgba(245, 158, 11, 0.35); }
}

/* ══════════════════════════════════════════════════════════════════
   TEAR-OFF COUPON (From Uiverse.io by dexter-st)
   ══════════════════════════════════════════════════════════════════ */
.coupon-wrapper {
  --width: 200px;
  --paper-width-multiplier: 0.95;
  --paper-height: 140px;
  --cut-size: 5px;
  --perspective: 200px;
  --paper-color: #ffeeb8;
  --text-color: #837e7d;

  position: relative;
  display: grid;
  place-items: center;

  width: var(--width);
  height: 55px;
  margin: 0.5rem auto;

  user-select: none;
}

.cutout-wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  height: 55px;
  transform-style: preserve-3d;
  perspective: var(--perspective);
}

.cutout {
  position: absolute;
  width: 100%;
  height: 55px;
  transform: rotateX(-10deg);
  box-sizing: border-box;

  border: 1px solid #0004;
  box-shadow:
    inset 0 1px 1px 0px #0017,
    inset 0 2px 2px 0px #0017,
    inset 0 4px 4px 0px #0017,
    inset 0 12px 12px 0px #0017,
    inset 0 24px 24px 0px #0017;
}

.paper-wrapper {
  position: absolute;
  width: calc(var(--width) * var(--paper-width-multiplier));
  height: var(--paper-height);
  top: 2px;
  filter: drop-shadow(0 1px 1px #0003) drop-shadow(0 6px 3px #0004)
    drop-shadow(0 16px 16px #0003);
  overflow: hidden;
}

.paper {
  position: absolute;
  width: 100%;
  height: 100%;

  border: none;

  background-color: var(--paper-color);
  background-image: repeating-linear-gradient(
    #00000020 calc(0.25 * var(--paper-height)),
    #00000035 calc(0.45 * var(--paper-height)),
    #0000 calc(0.75 * var(--paper-height)),
    #00000020 var(--paper-height)
  );
  background-position: 0 0;

  mask-image: linear-gradient(
      #000 calc(var(--paper-height) - var(--cut-size)),
      #0000 calc(var(--paper-height) - var(--cut-size) + 2px)
    ),
    conic-gradient(#000 135deg, #0000 135.5deg, #0000 224.5deg, #000 225deg);
  mask-position:
    0,
    0 calc(var(--paper-height) - var(--cut-size));
  mask-repeat: no-repeat, repeat-x;
  mask-size:
    100%,
    var(--cut-size) var(--cut-size);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  box-sizing: border-box;

  cursor: pointer;
  pointer-events: all;

  transition:
    transform 500ms ease,
    background-position 700ms ease;
}

.coupon-sec {
  height: 100%;
  transform: translateY(calc(-1 * var(--paper-height) + 48px));
  animation: couponWiggle 2.75s ease infinite;
}

.shadow-wrapper {
  position: absolute;
  width: 100%;
  height: 28px;
  top: 0;

  transform-style: preserve-3d;
  perspective: calc(var(--perspective) / 1.33);
}

.shadow {
  position: absolute;
  top: 1px;
  width: 100%;
  height: 28px;
  background-color: #0005;
  background-image: linear-gradient(#000, #0000 8px);
  mask-image: linear-gradient(#000 0, #0000 70%);
  transform: rotateX(-10deg);
}

.coupon-txt {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02rem;
  color: var(--text-color);
  text-shadow:
    0 0.5px 1px #fffa,
    0 -0.5px 0.5px #0009;
  transition: opacity 250ms ease;
}

.paper:hover {
  transform: translateY(42px);
  background-position: 0 18px;
}

.paper:hover .hov {
  opacity: 0;
}

.paper:focus, .paper.copied-active {
  transform: translateY(78px);
  background-position: 0 10px;
}

.paper:focus .hov, .paper.copied-active .hov {
  opacity: 0;
}
.paper:focus .coupon, .paper.copied-active .coupon {
  opacity: 0;
}

.paper-wrapper:has(.paper:hover) .coupon-sec,
.paper-wrapper:has(.paper:focus) .coupon-sec {
  animation-iteration-count: 1;
}

@keyframes couponWiggle {
  8%,
  27% {
    transform: translateY(calc(-1 * var(--paper-height) + 48px));
  }
  20% {
    transform: translateY(calc(-1 * var(--paper-height) + 56px));
  }
}

.cutter-wrapper {
  position: absolute;
  width: 100%;
  height: 28px;
  top: 0;
  transform-style: preserve-3d;
  perspective: calc(var(--perspective) / 1.33);
  mix-blend-mode: screen;
}

.cutter {
  position: absolute;
  top: 1px;
  width: 100%;
  height: calc(var(--cut-size) + 3px);
  background-color: #ddd;
  background-image: linear-gradient(#000, #0000 8px);
  mask-image: linear-gradient(
      #000 calc(calc(var(--cut-size) + 3px) - var(--cut-size)),
      #0000 calc(calc(var(--cut-size) + 3px) - var(--cut-size) + 2px)
    ),
    conic-gradient(#000 135deg, #0000 135.5deg, #0000 224.5deg, #000 225deg);
  mask-position:
    0,
    calc(var(--cut-size) / 2) 3px;
  mask-repeat: no-repeat, repeat-x;
  mask-size:
    100%,
    var(--cut-size) var(--cut-size);

  transform: rotateX(-10deg);
}

/* ═══ DEDICATED PROFILE PAGE STYLES ═══ */
.profile-page-container {
  animation: fadeIn 0.25s ease-in-out;
}

@media (max-width: 768px) {
  .profile-page-container {
    padding: 10px 4px !important;
    gap: 14px !important;
  }
}

/* ═══ SUPER ADMIN CLEAN LAYOUT & MOBILE RESPONSIVENESS ═══ */
.admin-workspace-full {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.admin-layout-clean {
  display: block !important;
  width: 100% !important;
}

@media (max-width: 992px) {
  .super-admin-container {
    flex-direction: column !important;
  }
  .super-admin-container > aside {
    width: 100% !important;
    min-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 12px 14px !important;
  }
  .super-admin-container > aside nav {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 6px !important;
  }
  .super-admin-container > aside nav button {
    flex-shrink: 0 !important;
    padding: 8px 12px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LIVE CHARTS STYLES & TRADINGVIEW CONTAINER
   ══════════════════════════════════════════════════════════════════ */
.live-charts-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.live-chart-header-card {
  padding: 10px 14px;
}

.live-chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.chart-asset-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.chart-toolbar-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-white);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.chart-asset-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100%;
}
.chart-asset-pills::-webkit-scrollbar {
  display: none;
}

.chart-pill-btn {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid;
  font-size: 11.5px;
  white-space: nowrap;
  transition: all 0.2s ease;
  cursor: pointer;
}

.chart-pill-btn:hover {
  transform: translateY(-1px);
}

.chart-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.interval-buttons-wrapper {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(0, 0, 0, 0.25);
  padding: 3px 5px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.chart-trade-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chart-meta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.live-chart-container-card {
  padding: 4px;
  overflow: hidden;
  background-color: #0a0e1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.chart-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  background: #0a0e1a !important;
  padding: 6px !important;
  height: 100vh !important;
  width: 100vw !important;
}

@media (max-width: 768px) {
  .live-chart-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .chart-asset-selector {
    width: 100%;
    justify-content: space-between;
  }
  .chart-actions-group {
    width: 100%;
    justify-content: space-between;
  }
  .chart-meta-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .chart-meta-tip {
    display: none;
  }
  .live-tradingview-iframe {
    height: 440px !important;
    min-height: 400px !important;
  }
}