:root {
  --ox-font-family: "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ox-bg-app: #191C1F;
  --ox-bg-topbar: #22262A;
  --ox-bg-sidebar: #202428;
  --ox-surface-1: #292E32;
  --ox-surface-2: #30363A;
  --ox-surface-3: #363C40;
  --ox-surface-hover: #363C40;
  --ox-input-bg: #24292D;
  --ox-border-subtle: #363C40;
  --ox-border-default: #41484D;
  --ox-border-strong: #596268;
  --ox-accent: #F2C94C;
  --ox-accent-soft: rgba(242, 201, 76, 0.14);
  --ox-blue-400: var(--ox-accent);
  --ox-blue-500: var(--ox-accent);
  --ox-blue-600: var(--ox-accent);
  --ox-blue-700: var(--ox-accent);
  --ox-blue-soft: var(--ox-accent-soft);
  --ox-blue-soft-strong: rgba(242, 201, 76, 0.22);
  --ox-text-primary: #F2F2EE;
  --ox-text-secondary: #AFB5B5;
  --ox-text-muted: #9BA3A5;
  --ox-text-disabled: #788185;
  --ox-success: #17D98A;
  --ox-success-soft: rgba(23, 217, 138, 0.14);
  --ox-danger: #FF6B75;
  --ox-danger-soft: rgba(255, 107, 117, 0.14);
  --ox-warning: #E5A54B;
  --ox-warning-soft: rgba(229, 165, 75, 0.14);
  --ox-focus: #F2C94C;
  --ox-shadow-soft: 0 20px 45px rgba(0, 0, 0, 0.28);
}

body {
  background: var(--ox-bg-app);
  color: var(--ox-text-primary);
}

body.dark-bg,
body.dashboard-bg {
  background: var(--ox-bg-app);
  color: var(--ox-text-primary);
}

.top-navbar,
.navbar-dashboard,
.sidebar,
.dashboard-card,
.stat-card,
.chart-card,
.page-header,
.bot-card,
.modal-content,
.subscription-plan,
.live-logs-container,
.subscription-plans-container,
.empty-state,
.panel-card,
.card,
.info-banner,
.content-panel,
.summary-card,
.filter-bar,
.toolbar,
.form-panel,
.settings-card,
.account-card {
  background: var(--ox-surface-1);
  border: 1px solid var(--ox-border-default);
  box-shadow: var(--ox-shadow-soft);
}

.top-navbar {
  background: var(--ox-bg-topbar);
  border-bottom: 1px solid var(--ox-border-subtle);
}

.logo-text,
.gradient-text,
.page-header h1,
.welcome-section h1,
.user-card h2,
.hero-title,
.title-accent,
.dashboard-title,
.stat-value,
.stat-card .stat-value,
.card h3,
.chart-card h3,
.bot-card h3,
.plan-name,
.login-btn,
.btn-primary,
.primary-button,
.cta-primary,
.page-header .btn-primary,
.header-actions .btn-primary {
  background: linear-gradient(135deg, var(--ox-blue-400), var(--ox-blue-600));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo,
.nav-logo,
.navbar-dashboard .logo,
.top-navbar .logo {
  color: var(--ox-text-primary);
  letter-spacing: 0.04em;
}

.logo-text {
  background: linear-gradient(135deg, var(--ox-blue-400), var(--ox-blue-600));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-link:hover,
.menu-link:hover,
.menu-link.active,
.tab-btn.active,
.filter-btn.active,
.time-btn.active,
.toggle-btn.active,
.card-tab.active,
.active-header-tab {
  background: var(--ox-blue-soft);
  color: var(--ox-blue-400);
  border-color: rgba(242, 201, 76, 0.32);
}

.menu-link::before,
.nav-link.active::before,
.filter-btn.active::before,
.tab-btn.active::before,
.toggle-btn.active::before,
.card-tab.active::before {
  background: linear-gradient(180deg, var(--ox-blue-400), var(--ox-blue-600));
}

.btn-primary,
.card-button,
.plan-button,
.primary-button,
.cta-primary,
.login-btn,
.btn-toggle-bot,
.btn-toggle-bot-mini,
.action-btn.primary,
.apply-btn {
  background: var(--ox-accent);
  color: var(--ox-bg-app);
  -webkit-text-fill-color: currentColor;
  border: 1px solid var(--ox-accent);
  box-shadow: none;
}

.btn-primary:hover,
.card-button:hover,
.plan-button:hover,
.primary-button:hover,
.cta-primary:hover,
.login-btn:hover,
.btn-toggle-bot:hover,
.btn-toggle-bot-mini:hover,
.action-btn.primary:hover,
.apply-btn:hover {
  background: var(--ox-accent);
  box-shadow: none;
}

.btn-secondary,
.secondary-btn,
.action-btn.secondary,
.time-btn,
.filter-btn,
.tab-btn,
.toggle-btn,
.card-tab,
.header-button,
.btn-ghost {
  background: var(--ox-surface-1);
  color: var(--ox-text-secondary);
  border: 1px solid var(--ox-border-default);
}

.btn-secondary:hover,
.secondary-btn:hover,
.action-btn.secondary:hover,
.time-btn:hover,
.filter-btn:hover,
.tab-btn:hover,
.toggle-btn:hover,
.card-tab:hover,
.header-button:hover,
.btn-ghost:hover {
  border-color: var(--ox-accent);
  color: var(--ox-text-primary);
  background: var(--ox-surface-hover);
}

.btn-danger,
.action-btn.danger,
.danger-button,
.delete-btn {
  background: var(--ox-danger);
  color: var(--ox-bg-app);
  border: 1px solid var(--ox-danger);
}

.user-avatar {
  background: linear-gradient(135deg, var(--ox-blue-400), var(--ox-blue-600));
  color: #02111f;
  font-weight: 700;
}

.status-dot.running,
.status-indicator[data-status="active"],
.mini-status-online {
  background: var(--ox-success);
  box-shadow: 0 0 12px rgba(23, 217, 138, 0.52);
}

.status-dot.stopped,
.status-indicator[data-status="inactive"],
.mini-status-offline {
  background: var(--ox-text-muted);
}

.text-success,
.positive,
.profit,
.stat-change.positive,
.win-rate {
  color: var(--ox-success) !important;
}

.text-danger,
.negative,
.loss,
.stat-change.negative,
.loss-rate {
  color: var(--ox-danger) !important;
}

.text-muted,
.subtitle,
.welcome-text,
.meta,
.secondary,
.muted,
.stat-label,
.info-label,
.card-description,
.panel-subtitle {
  color: var(--ox-text-secondary) !important;
}

.form-control,
.input,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"] {
  background: var(--ox-input-bg);
  border: 1px solid var(--ox-border-default);
  color: var(--ox-text-primary);
}

.form-control:focus,
.input:focus,
select:focus,
textarea:focus,
input:focus {
  border-color: var(--ox-focus);
  box-shadow: 0 0 0 3px var(--ox-accent-soft);
  outline: none;
}

.table-container table,
.trading-table,
.data-table {
  border-color: var(--ox-border-default);
}

.table-container th,
.trading-table th,
.data-table th {
  color: var(--ox-text-secondary);
  background: var(--ox-surface-2);
  border-bottom: 1px solid var(--ox-border-subtle);
}

.table-container td,
.trading-table td,
.data-table td {
  color: var(--ox-text-primary);
  border-bottom: 1px solid var(--ox-border-subtle);
}

.table-container tbody tr:hover,
.trading-table tbody tr:hover,
.data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.025);
}

.chart-card,
.bot-card,
.page-header,
.empty-state,
.stat-card,
.panel-card,
.content-panel,
.summary-card {
  border-radius: 8px;
}

.chart-card .chart-card-header,
.card-header,
.section-header,
.panel-header {
  border-bottom: 1px solid var(--ox-border-subtle);
}

/* Fix old yellow values in app shell */
.wrapper,
.dashboard-shell,
.app-shell,
.app-surface,
.main-panel {
  background: var(--ox-bg-app);
}

@media (max-width: 768px) {
  .top-navbar,
  .navbar-dashboard {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sidebar {
    background: var(--ox-bg-sidebar);
  }
}