/*
  Shared stylesheet for the trader prototype

  This file defines a central color palette via CSS custom properties, common
  component classes (cards, grids, tables, buttons) and responsive
  breakpoints.  All page‑specific inline styles have been consolidated here
  to avoid duplication and to make the site easier to maintain.  Media
  queries ensure that layouts adapt gracefully to smaller screens.
*/

/* =========================================
   THEME VARIABLES & ACCESSIBILITY
   ========================================= */
/* Default: Light Mode */
:root {
  --bg-main: #f8fafc;
  --bg-card: #ffffff;
  --bg-input: #f1f5f9;
  --border-color: #e2e8f0;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --accent-blue: #3b82f6;
  --accent-glow: rgba(59, 130, 246, 0.4);
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;

  /* Backward‑compatible aliases */
  --bg: var(--bg-main);
  --panel: var(--bg-card);
  --panel-2: var(--bg-input);
  --line: var(--border-color);
  --text: var(--text-main);
  --muted: var(--text-muted);
  --accent: var(--accent-blue);
  --green: var(--success);
  --green-text: #bbf7d0;
  --amber: var(--warning);
  --amber-text: #fde68a;
  --red: var(--danger);
  --red-text: #fecaca;
}

/* Dark Mode (Activates based on OS preference OR data-theme attribute) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-main: #0f172a;
    --bg-card: #1e293b;
    --bg-input: #334155;
    --border-color: #334155;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --accent-blue: #38bdf8;
  }
}

/* Explicit Dark Mode Override */
[data-theme="dark"] {
  --bg-main: #0f172a;
  --bg-card: #1e293b;
  --bg-input: #334155;
  --border-color: #334155;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --accent-blue: #38bdf8;
}

/* Keyboard Navigation Accessibility */
*:focus-visible {
  outline: 3px solid var(--accent-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reset & base typography */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-main);
  color: var(--text-main);
}

/* Generic container that centers content with a max‑width */
.wrap {
  width: min(1240px, 94vw);
  margin: 24px auto 60px;
  display: grid;
  gap: 18px;
}

/* Cards and panels */
/* Cards and panels
   Only the `.card` selector remains here.  The dashboard‑specific panel
   classes from the original project have been removed since this
   prototype doesn’t use them.  Removing unused selectors keeps the
   stylesheet lean and focused on the landing and legal pages. */
.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 14px 32px rgba(0,0,0,0.26);
}

/* Shared headings */
.section-head,
.hero-top,
.action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
 .hero h1,
h1,
h2,
h3 {
  margin: 0 0 8px;
}
 .hero p,
.sub,
.note,
.muted {
  color: var(--muted);
}

/* Buttons
   Base button styles with disabled state.  Variant classes for
   `.secondary` and `.ghost` have been removed because this prototype
   doesn’t use them. */
button {
  border: 0;
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  background: var(--accent);
  color: #082f49;
  transition: all 0.2s ease;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

/* Status boxes */
.status {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}

/* Pills for small status indicators */
.pill,
.table-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
}
.buy-now,
.triggered {
  background: rgba(20,83,45,0.45);
  color: var(--green-text);
}
.watch-for-breakout,
.near-entry,
.watch {
  background: rgba(120,53,15,0.45);
  color: var(--amber-text);
}
.skip,
.broken {
  background: rgba(127,29,29,0.42);
  color: var(--red-text);
}

/* Watch panel on the landing page */
.watch-panel {
  display: grid;
  gap: 8px;
  background: var(--panel-2);
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
}
.watch-line {
  font-size: 19px;
  line-height: 1.5;
}

/* Grid utilities */
.grid,
.mini-grid,
.chart-grid {
  /* Base grid utilities used by the landing page.  Each defines
     a responsive number of columns and a uniform gap between cards. */
  display: grid;
  gap: 14px;
}
.grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.mini-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top: 14px;
}
.chart-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Chart container on index */
.chart-box {
  height: 330px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0b1220;
}

/* Table styling */
.table-wrap {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Responsive typography tweaks */
@media (max-width: 720px) {
  .watch-line { font-size: 17px; }
  .value { font-size: 24px; }
}

/*
  The dashboard and control panel breakpoints from the original project
  have been removed here because this simplified prototype focuses on the
  landing page and legal pages.  Responsive behaviour for the landing
  page is handled via flexible grid definitions and a single 720px
  breakpoint for typography.  Additional breakpoints can be reintroduced
  if more complex layouts are needed in the future.
*/

/* === Legal page styles === */
/*
  The privacy and terms pages share the same structural wrapper.  These rules
  provide a central column, subtle borders and typography sizes tuned for
  readability.  They rely on the global colour variables defined above.
*/
.legal-wrap {
  max-width: 800px;
  margin: 60px auto;
  padding: 40px;
  background: var(--panel);
  border-radius: 16px;
  border: 1px solid var(--line);
}
.legal-wrap h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  color: var(--accent);
}
.legal-wrap h2 {
  font-size: 1.5rem;
  margin-top: 30px;
  margin-bottom: 15px;
  color: var(--text-main);
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
}
.legal-wrap p,
.legal-wrap li {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 15px;
}
.legal-wrap ul {
  margin-left: 20px;
  margin-bottom: 20px;
}
.legal-wrap strong {
  color: var(--text-main);
}
.last-updated {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 40px;
}

/* === Landing page components === */
/*
  The landing page uses a number of utility classes (e.g. `.action-box`,
  `.highlight-green`) previously defined inline.  They now live here so
  that other pages can reuse them and to avoid duplicate declarations.
*/
.action-box {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid var(--success);
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
}
.action-box.wait {
  background: rgba(245, 158, 11, 0.1);
  border-color: var(--warning);
}
.action-text {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--text-main);
}
.highlight-green {
  color: var(--success);
  font-weight: bold;
}
.highlight-red {
  color: var(--danger);
  font-weight: bold;
}
.tooltip-container {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--muted);
}
.tooltip-container:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
  z-index: 10;
  border: 1px solid var(--line);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

/* Mini score cards used in the engine room.  These definitions were
   originally part of the dashboard styles but are required for the
   landing page. */
.mini-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
}
.label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 12px;
}
.value {
  font-size: 28px;
  font-weight: 700;
  margin-top: 8px;
}
.symbol-box {
  font-size: 28px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}

/* Small subtitle text used in headings (e.g. the “Why we picked it”
   annotation on the engine room card). */
.subtitle {
  font-size: 0.9rem;
  font-weight: normal;
  color: var(--muted);
}

/* Margin utility class for adding top spacing without inline styles. */
.mt-15 {
  margin-top: 15px;
}

/* Indicator badge shown when live data is streaming.  Hidden by
   default; toggled via JavaScript by removing the `display: none`. */
.live-indicator {
  display: none;
  color: var(--success);
  font-size: 0.8rem;
  margin-left: 10px;
}

/* === Custom variants and navigation === */
/* Primary button used for the “Run Morning Scan” call‑to‑action.  It
   inherits from the base button styles but increases the font size,
   padding and sets the text colour to white. */
button.primary {
  font-size: 1.1rem;
  padding: 12px 24px;
  border-radius: 6px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
}

/* Simplified navigation bar used on the privacy and terms pages.  It
   leverages the existing .wrap utility and provides spacing and borders.
   The .nav-inner wrapper ensures proper alignment on small screens. */
.nav {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg-main);
}
.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
/* Logo styling in the nav.  Use <span> within the anchor to colour the
   accent portion separately. */
.logo {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--text-main);
  text-decoration: none;
}
.logo span {
  color: var(--accent);
}
/* Button link variant for nav actions such as “Back to Home”.  Apply
   shared padding, border and hover state without affecting button
   elements elsewhere. */
.btn.secondary {
  background: var(--panel-2);
  color: var(--text-main);
  border: 1px solid var(--line);
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-block;
}
.btn.secondary:hover {
  background: rgba(255,255,255,0.05);
}

/* Active navigation link highlights the current page with the accent colour */
.nav-link-active {
  color: var(--accent);
}

/* Footer wrapper used on marketing pages and elsewhere.  Provides padding,
   border and muted text colour. */
.footer {
  padding: 3rem 0;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.footer a {
  color: var(--accent);
  margin-right: 1.5rem;
  font-size: 0.85rem;
  text-decoration: none;
}
.footer a:last-child {
  margin-right: 0;
}

/* Flash message for error notifications on forms */
.flash-error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  border: 1px solid var(--danger);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  text-align: center;
  font-weight: bold;
}

/* ==========================================================================
   Marketing & Feature Pages
   ========================================================================== */
/* Containers for consistent horizontal spacing on marketing pages.  Use this
   instead of padding on individual elements so that content remains centred
   on large screens and flush on small screens. */
.container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Section padding for vertical spacing between bands of content. */
.section-pad {
  padding: 5rem 0;
}

/* Header at the top of feature pages.  Centres text and applies a subtle
   radial gradient behind the title for visual interest. */
.page-header {
  text-align: center;
  padding: 5rem 0 3rem;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at top, rgba(59,130,246,0.1) 0%, transparent 70%);
}
.page-header h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  margin-bottom: 1rem;
}
.page-header p {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.2rem;
  color: var(--muted);
}

/* Three-column grid used for listing features.  Auto‑fits down to one
   column on narrow screens using minmax(). */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

/* Feature card used on the marketing pages. */
.feature-box {
  background: var(--panel);
  padding: 2.5rem;
  border-radius: 16px;
  border: 1px solid var(--line);
}

/* Numbered steps on the “How it Works” page.  Colours are customised by
   adding a modifier class (e.g. .step-blue, .step-green) which controls
   the border and text colour. */
.step {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}
.step-number {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  flex-shrink: 0;
}
.step-blue {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid var(--accent);
  color: var(--accent);
}
.step-green {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid var(--success);
  color: var(--success);
}
.step-yellow {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--warning);
  color: var(--warning);
}

/* Generic call‑to‑action section aligned to the center. */
.cta {
  text-align: center;
}

/* Buttons for anchors on marketing pages.  Extend the base button styles to
   links by adding the `.btn` class.  Variants can be added via modifier
   classes (e.g. .primary, .secondary). */
a.btn,
button.btn {
  display: inline-block;
  text-align: center;
  border-radius: 8px;
  padding: 1rem 2rem;
  font-weight: 600;
  transition: all 0.2s ease;
}
a.btn.primary,
button.btn.primary {
  background-color: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.5);
}
a.btn.primary:hover,
button.btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}
a.btn.secondary,
button.btn.secondary {
  background-color: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
}
a.btn.secondary:hover,
button.btn.secondary:hover {
  background-color: rgba(255,255,255,0.05);
}

/* ==========================================================================
   Authentication Pages (Login & Signup)
   ========================================================================== */
/* Shared wrapper for login and signup forms. */
.auth-box {
  max-width: 450px;
  width: 90%;
  background: var(--panel);
  padding: 3rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
  margin: 0 auto;
}
.auth-box h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  text-align: center;
}
.auth-box p {
  color: var(--muted);
  margin-bottom: 2rem;
  font-size: 0.95rem;
  text-align: center;
}
.input-group {
  margin-bottom: 1.5rem;
}
.input-group label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.auth-input {
  width: 100%;
  background: var(--bg-main);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 1rem;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
}
.auth-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(59,130,246,0.1);
}
.forgot-pass {
  display: block;
  text-align: right;
  font-size: 0.85rem;
  color: var(--accent);
  margin-top: 0.5rem;
  font-weight: 600;
}
.forgot-pass:hover {
  text-decoration: underline;
}
.btn-auth {
  width: 100%;
  padding: 1rem;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 800;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
  display: block;
  text-align: center;
}
.btn-auth:hover {
  background: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}
.auth-footer {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}
.auth-footer a {
  color: var(--accent);
  font-weight: 600;
}
.auth-footer a:hover {
  text-decoration: underline;
}

/* Signup specific containers */
.auth-container {
  display: flex;
  width: 100%;
  max-width: 1000px;
  background: var(--panel);
  border-radius: 20px;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
  margin: 0 auto;
}
.auth-form-side {
  flex: 1;
  padding: 4rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}
.auth-marketing-side {
  flex: 1;
  background: linear-gradient(135deg, var(--bg-main) 0%, #0a1429 100%);
  padding: 4rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  color: var(--text);
}
.auth-marketing-side::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(59,130,246,0.1) 0%, transparent 70%);
}
.trust-box {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 10;
  backdrop-filter: blur(10px);
}
.trust-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.trust-title span {
  color: var(--success);
  font-size: 1.2rem;
}
.trust-desc {
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 850px) {
  .auth-marketing-side {
    display: none;
  }
  .auth-form-side {
    padding: 3rem 2rem;
  }
  body.auth-body {
    padding: 1rem;
  }
}

/* ==========================================================================
   Settings Page
   ========================================================================== */
/* Navigation for dashboard/settings pages */
.dash-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

/* Page container */
.settings-container {
  max-width: 800px;
  margin: 3rem auto;
  padding: 0 2rem;
}

.page-header {
  margin-bottom: 2rem;
}
.page-header h1 {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
}
.config-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
}
.panel-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
}
.config-panel .input-group {
  margin-bottom: 1.5rem;
}
.config-panel label {
  display: block;
  font-size: 0.95rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.text-input,
.config-input {
  width: 100%;
  background: var(--bg-main);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 1rem;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
}
.text-input:focus,
.config-input:focus {
  border-color: var(--accent);
}
.info-tip {
  position: relative;
  display: inline-block;
  margin-left: 6px;
  cursor: help;
  font-size: 0.75rem;
  color: var(--muted);
  transition: color 0.2s;
}
.info-tip:hover {
  color: var(--accent);
}
.info-tip .tip-text {
  visibility: hidden;
  width: 220px;
  background-color: var(--bg-main);
  color: var(--text);
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 10;
  bottom: 125%;
  left: 50%;
  margin-left: -110px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 0.75rem;
  line-height: 1.2;
  border: 1px solid var(--line);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.info-tip:hover .tip-text {
  visibility: visible;
  opacity: 1;
}

.mode-toggle {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.mode-label {
  flex: 1;
  text-align: center;
  background: var(--bg-main);
  border: 1px solid var(--line);
  padding: 1.25rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
}
.mode-label input {
  display: none;
}
#label-paper:has(input:checked) {
  background: rgba(16, 185, 129, 0.1);
  border-color: var(--success);
  color: var(--success);
}
#label-live:has(input:checked) {
  background: rgba(239, 68, 68, 0.1);
  border-color: var(--danger);
  color: var(--danger);
}
.status-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: bold;
  font-size: 0.9rem;
}
.status-connected {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
  border: 1px solid var(--success);
}
.status-disconnected {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
  border: 1px solid var(--warning);
}
.btn-outline {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: bold;
  display: inline-block;
}
/* Toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-input);
  transition: .4s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: var(--accent);
}
input:checked + .slider:before {
  transform: translateX(20px);
}

/* Setup Grade Badges */
.grade-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 8px;
  font-weight: 900;
  font-size: 1.4rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.grade-a-plus { background: linear-gradient(135deg, #10b981, #059669); color: white; box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); }
.grade-a { background: linear-gradient(135deg, #38bdf8, #2563eb); color: white; box-shadow: 0 0 15px rgba(56, 189, 248, 0.4); }
.grade-watch { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; }
.grade-none { background: var(--bg-input); color: var(--text-muted); }

/* ACTUAL MOBILE RESPONSIVENESS FIX */
@media (max-width: 992px) {
  /* Sticky Bottom Bar for the Scan Button */
  .control-panel {
    padding-bottom: 80px !important; /* Make room for the floating button */
  }

  .btn-scan {
    position: fixed;
    bottom: 20px;
    left: 5%;
    width: 90%;
    z-index: 1000;
    box-shadow: 0 10px 25px rgba(56, 189, 248, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    background: linear-gradient(135deg, var(--accent-blue), #2563eb);
    color: white;
  }
}

/* =========================================
   REAL-TIME TOAST NOTIFICATIONS
   ========================================= */
#toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none; /* Let clicks pass through to the app */
}

/* On mobile, bump it up so it doesn't block the sticky scan button */
@media (max-width: 992px) {
  #toast-container {
    bottom: 90px;
    right: 10px;
    left: 10px;
    align-items: center;
  }
}

.trade-toast {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 5px solid var(--accent-blue);
  border-radius: 8px;
  padding: 1rem 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  color: var(--text-main);
  min-width: 280px;
  max-width: 350px;
  animation: slideInRight 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  pointer-events: auto; /* Allow clicking the toast to dismiss */
  cursor: pointer;
}

.trade-toast.success { border-left-color: var(--success); }
.trade-toast.danger { border-left-color: var(--danger); }
.trade-toast.warning { border-left-color: #f59e0b; }

.toast-header { font-weight: bold; margin-bottom: 0.25rem; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.toast-body { color: var(--text-muted); font-size: 0.9rem; line-height: 1.4; }

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeOut {
  to { opacity: 0; transform: scale(0.9); }
}

/* =========================================
   COMMUNITY / IDEAS BOARD
   ========================================= */
.community-layout { display: grid; grid-template-columns: 1fr 350px; gap: 2rem; max-width: 1200px; margin: 2rem auto; padding: 0 1rem; }
@media (max-width: 992px) { .community-layout { grid-template-columns: 1fr; } }

.post-composer { background: var(--bg-card); padding: 1.5rem; border-radius: 12px; border: 1px solid var(--border-color); margin-bottom: 2rem; }
.post-composer textarea { width: 100%; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-main); padding: 1rem; border-radius: 8px; margin: 1rem 0; resize: vertical; min-height: 100px; }
.post-composer .composer-controls { display: flex; gap: 10px; align-items: center; }
.post-composer input, .post-composer select { background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-main); padding: 0.5rem 1rem; border-radius: 6px; }

.idea-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; display: flex; gap: 1rem; transition: transform 0.2s; }
.idea-card:hover { border-color: rgba(56, 189, 248, 0.4); }
.idea-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-blue), #2563eb); display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; flex-shrink: 0; }
.idea-content { flex-grow: 1; }
.idea-header { display: flex; justify-content: space-between; margin-bottom: 0.5rem; align-items: center; }
.idea-author { font-weight: bold; color: var(--text-main); }
.idea-time { color: var(--text-muted); font-size: 0.8rem; }
.idea-body { color: var(--text-muted); line-height: 1.5; margin: 1rem 0; }
.idea-footer { display: flex; gap: 15px; color: var(--text-muted); font-size: 0.9rem; }
.idea-footer span { cursor: pointer; transition: color 0.2s; }
.idea-footer span:hover { color: var(--accent-blue); }

.disclaimer-sidebar { background: rgba(245, 158, 11, 0.05); border: 1px solid rgba(245, 158, 11, 0.2); padding: 1.5rem; border-radius: 12px; height: fit-content; }
.disclaimer-sidebar h4 { color: #f59e0b; margin-bottom: 1rem; }
.disclaimer-sidebar p { color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; }


/* =========================================
   GAMIFICATION & FREEMIUM UI
   ========================================= */
.trader-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.trader-header { display: flex; align-items: center; gap: 15px; margin-bottom: 1.5rem; }
.trader-avatar { width: 50px; height: 50px; border-radius: 12px; background: linear-gradient(135deg, var(--accent-blue), #2563eb); display: flex; align-items: center; justify-content: center; font-weight: 900; color: white; font-size: 1.5rem; }
.trader-info { flex-grow: 1; }

.tier-badge { font-size: 0.7rem; font-weight: 900; padding: 2px 8px; border-radius: 4px; letter-spacing: 1px; }
.tier-badge.free { background: var(--bg-input); color: var(--text-muted); }
.tier-badge.pro { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; box-shadow: 0 0 10px rgba(245, 158, 11, 0.4); }

.btn-upgrade { background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: white; padding: 0.5rem 1rem; border-radius: 8px; font-weight: bold; font-size: 0.9rem; transition: transform 0.2s; box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4); text-decoration: none;}
.btn-upgrade:hover { transform: translateY(-2px); color: white; }

.gamification-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-box { background: var(--bg-input); border: 1px solid var(--border-color); padding: 1rem; border-radius: 8px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stat-box i { font-size: 1.5rem; margin-bottom: 0.5rem; }
.stat-box strong { font-size: 1.2rem; color: var(--text-main); }
.stat-box span { font-size: 0.8rem; color: var(--text-muted); }

.progress-track { height: 8px; background: var(--bg-input); border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-blue), #38bdf8); border-radius: 4px; transition: width 1s ease-in-out; }

/* =========================================
   UNIFIED PREMIUM NAVIGATION (SaaS Style)
   ========================================= */
.xean-nav {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.75); /* Dark transparent base */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

/* Light mode override if applicable */
[data-theme="light"] .xean-nav {
    background: rgba(248, 250, 252, 0.8);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.xean-nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 2rem;
}

.xean-nav-links {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}

.xean-nav-links a {
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    padding: 0.5rem 0;
    transition: color 0.2s ease;
}

.xean-nav-links a:hover {
    color: var(--text-main);
}

/* Premium Hover Underline Animation */
.xean-nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background: var(--accent-blue);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

.xean-nav-links a:hover::after {
    width: 100%;
    box-shadow: 0 0 8px var(--accent-glow);
}

.xean-nav-actions {
    display: flex;
    gap: 1.2rem;
    align-items: center;
}

/* Small User Avatar for the top right */
.nav-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-blue), #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 800;
    font-size: 1rem;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}
.nav-avatar:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 0 15px var(--accent-glow);
    transform: scale(1.05);
}

@media (max-width: 992px) {
    .xean-nav-links { display: none; /* Keep it clean on mobile */ }
    .xean-nav-inner { padding: 1rem; }
}