/* ==========================================================================
   Design tokens
   Light is the default theme (root). Dark is an opt-in override via
   body.dark. --accent is the user-selectable brand color, kept separate
   from semantic colors (green=success/profit, red=danger/loss,
   yellow=warning) so switching accent never makes profit/loss unclear.
   ========================================================================== */
:root {
  --bg: #F4F6FB;
  --card: #FFFFFF;
  --card2: #F1F4F9;
  --border: #E2E8F2;
  --text: #1A2233;
  --muted: #6B7A94;
  --shadow: 0 1px 2px rgba(20,30,50,0.04), 0 4px 16px rgba(20,30,50,0.06);

  --green: #12B76A;
  --red: #F0304C;
  --yellow: #E5A400;
  --cyan: #0091C8;
  --purple: #7C5CFC;
  --pink: #E8479A;
  --blue: #2F6FED;

  --accent: var(--cyan);
  --accent-contrast: #FFFFFF;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --font-ui: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

body.dark {
  --bg: #070A11;
  --card: #10151F;
  --card2: #171E2C;
  --border: #232C40;
  --text: #E7EDF7;
  --muted: #7C8AA6;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
  --accent-contrast: #06121A;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
  transition: background 0.2s ease, color 0.2s ease;
}

.app { max-width: 720px; margin: auto; min-height: 100vh; position: relative; }

/* ==========================================================================
   Topbar
   ========================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.1rem;
}
.title-group { display: flex; align-items: center; gap: 0.6rem; }
.title-group h1 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.pulse-dot.running { animation: pulse 2s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(18,183,106,0.55); }
  70% { box-shadow: 0 0 0 8px rgba(18,183,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(18,183,106,0); }
}
.status-badge {
  background: var(--green); color: #06120C; padding: 0.2rem 0.65rem;
  border-radius: 20px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
}
.currency-toggle {
  background: var(--card2); border: 1px solid var(--border); color: var(--text);
  padding: 0.35rem 0.9rem; border-radius: 20px; font-size: 0.78rem; font-weight: 600;
  cursor: pointer;
}

/* ==========================================================================
   Bottom tab bar — replaces the sidebar + hamburger. Full-bleed with a top
   border and the same blur treatment as the topbar, so the two chrome
   elements that bookend the screen read as one consistent system. Icon
   carries the tab, label is small and secondary — how native mobile tab
   bars are actually read: glance at shape first, label just confirms.
   ========================================================================== */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  display: flex; justify-content: space-around; align-items: stretch;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.2rem; padding: 0.55rem 0.2rem 0.5rem; color: var(--muted); text-decoration: none;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.01em;
  border: none; background: none; cursor: pointer; position: relative;
}
.nav-item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.nav-item.active { color: var(--accent); }
.nav-item.active::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 2.5px; background: var(--accent); border-radius: 0 0 3px 3px;
}

/* Hidden by default — this nav only exists at desktop width (see the
   1024px media query). Without this base rule it rendered on mobile as
   unstyled buttons stacked vertically at the top of the page, duplicating
   the bottom nav. */
.desktop-nav { display: none; }

/* ==========================================================================
   Main / tabs
   ========================================================================== */
main { padding: 1rem 1rem calc(5.5rem + env(safe-area-inset-bottom)); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.2s ease; }

/* Section eyebrows — group a long tab into scannable clusters without
   adding new navigation chrome. Used on Bot, which now holds everything
   about how the bot behaves (moved in from Settings), not just its risk
   sliders, and would otherwise be one long undifferentiated scroll. */
.section-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin: 1.6rem 0 0.7rem; padding-left: 0.1rem;
}
.section-label:first-child { margin-top: 0.2rem; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.35rem; margin-bottom: 1rem; box-shadow: var(--shadow);
}
.card h2 { font-size: 1.05rem; margin-bottom: 0.9rem; }
.card h3 { font-size: 0.95rem; margin-bottom: 0.9rem; color: var(--text); }

.hero-card { text-align: center; }
.hero-profit { font-family: var(--font-mono); font-size: 3rem; font-weight: 700; color: var(--green); line-height: 1.1; }
.goal-bar { height: 6px; background: var(--card2); border-radius: 3px; margin: 1.1rem 0 0.5rem; overflow: hidden; }
.goal-progress { height: 100%; background: var(--green); border-radius: 3px; transition: width 0.5s ease; }
.goal-label { font-size: 0.78rem; color: var(--muted); }

.chart-canvas { width: 100%; height: 230px; background: var(--card2); border-radius: var(--radius-md); display: block; }
.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.7rem; }
.time-buttons { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.time-btn {
  background: var(--card2); border: 1px solid var(--border); color: var(--muted);
  padding: 0.28rem 0.7rem; border-radius: 20px; font-size: 0.72rem; font-weight: 600; cursor: pointer;
}
.time-btn.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.chart-period-label { text-align: center; font-size: 0.78rem; color: var(--muted); margin-top: 0.6rem; }

.collect-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.profit-coin-balance { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  font-family: var(--font-ui); padding: 0.7rem 1.3rem; border-radius: var(--radius-sm);
  border: none; font-weight: 700; font-size: 0.9rem; cursor: pointer;
  transition: transform 0.1s ease, filter 0.15s ease; letter-spacing: 0.01em;
}
.btn:active { transform: scale(0.96); }
.btn:hover { filter: brightness(1.06); }
.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-green { background: var(--green); color: #06120C; }
.btn-yellow { background: var(--yellow); color: #241900; }
.btn-red { background: var(--red); color: #fff; }
.btn-ghost { background: var(--card2); border: 1px solid var(--border); color: var(--text); }
.btn-cyan { background: var(--accent); color: var(--accent-contrast); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Single play/pause control on the Bot tab */
.play-pause-btn {
  width: 64px; height: 64px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  background: var(--green); color: #06120C; box-shadow: var(--shadow);
  transition: transform 0.12s ease, background 0.2s ease;
}
.play-pause-btn:active { transform: scale(0.94); }
.play-pause-btn.is-paused { background: var(--yellow); color: #241900; }

.status-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.status-buttons { display: flex; gap: 0.6rem; }

/* ==========================================================================
   Sliders
   ========================================================================== */
.slider-group { margin-top: 0.4rem; }
.slider-row { display: flex; align-items: center; gap: 0.9rem; margin: 1rem 0; }
.slider-row > span:first-child { flex: 0 0 110px; font-size: 0.85rem; color: var(--muted); }
/* Renamed from .slider to .risk-slider — the old name collided with
   .switch .slider (the toggle track below), and since only this rule
   declared an explicit height, it silently overrode the toggle's
   intended pill shape everywhere in the app: every toggle rendered as a
   5px line instead of a ~26px pill, with its circle appearing to float
   below rather than sit inside it. Confirmed by tracing the exact CSS
   cascade before fixing, not just assumed from the visual symptom.
   Also simplified to one consistent color throughout — dropped the
   green/yellow/red thumb variants per-slider, which read as busy/
   inconsistent rather than meaningful. A single filled-track fill (via
   the --fill custom property, set from JS) shows progress at a glance
   without needing color to do that job. */
.risk-slider {
  --fill: 50%;
  flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px;
  outline: none; cursor: pointer;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill), var(--card2) var(--fill), var(--card2) 100%);
}
.risk-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--card); border: 3px solid var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  cursor: pointer;
}
.risk-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--card);
  border: 3px solid var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,0.25); cursor: pointer;
}
.risk-slider::-moz-range-progress { background: var(--accent); height: 6px; border-radius: 3px; }
.slider-value { font-family: var(--font-mono); font-size: 0.85rem; min-width: 46px; text-align: right; color: var(--text); }

/* Tap-to-explain help icons — a small circled "?" after a setting's
   label. Tapping opens the shared explanation popover (see #helpPopover
   handling in app.js). Kept deliberately small and muted so they aid
   without cluttering. */
.help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  border: 1.5px solid var(--muted); color: var(--muted); background: none;
  font-size: 0.68rem; font-weight: 700; cursor: pointer; padding: 0;
  vertical-align: middle; margin-left: 0.25rem; flex-shrink: 0;
}
.help-icon:active { background: var(--card2); }
.help-popover {
  display: none; position: fixed; left: 50%; bottom: calc(5.5rem + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 300;
  width: calc(100% - 2rem); max-width: 480px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 1rem 1.1rem; box-shadow: 0 8px 30px rgba(10,16,28,0.25);
  font-size: 0.85rem; line-height: 1.5; color: var(--text);
}
.help-popover.visible { display: block; animation: fadeIn 0.15s ease; }
.help-popover .help-close {
  display: block; margin-top: 0.7rem; margin-left: auto;
  background: var(--card2); border: 1px solid var(--border); color: var(--text);
  padding: 0.35rem 0.9rem; border-radius: var(--radius-sm); font-size: 0.78rem;
  font-weight: 600; cursor: pointer;
}
@media (min-width: 1024px) {
  .help-popover { bottom: 2rem; }
}

/* ==========================================================================
   Pills (risk level)
   ========================================================================== */
.pill-group { display: flex; gap: 0.5rem; margin: 0.2rem 0 1.2rem; flex-wrap: wrap; }
.pill {
  padding: 0.45rem 1.1rem; border-radius: 20px; border: 1px solid var(--border);
  font-weight: 700; font-size: 0.82rem; cursor: pointer; background: var(--card2); color: var(--text);
}
.pill.active { color: #fff; border-color: transparent; }
.pill-green.active { background: var(--green); color: #06120C; }
.pill-cyan.active { background: var(--accent); color: var(--accent-contrast); }
.pill-orange.active { background: var(--yellow); color: #241900; }
.pill-red.active { background: var(--red); }

/* ==========================================================================
   Toggles
   ========================================================================== */
.toggle-group { display: flex; flex-direction: column; }
.toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 0; font-size: 0.9rem; }
.toggle-row + .toggle-row { border-top: 1px solid var(--border); }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; cursor: pointer; inset: 0; background: var(--card2);
  border: 1px solid var(--border); border-radius: 26px; transition: 0.2s;
}
.switch .slider::before {
  content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch input:checked + .slider { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* ==========================================================================
   Accent / theme swatches
   ========================================================================== */
.color-themes { display: flex; align-items: center; gap: 0.7rem; margin: 0.8rem 0 0.3rem; flex-wrap: wrap; }
.color-dot {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 3px solid transparent; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.color-dot.active { border-color: var(--text); }

/* ==========================================================================
   Danger zone (Settings)
   ========================================================================== */
.danger-card { border: 1px solid var(--red); }
.danger-card h3 { color: var(--red); }
.danger-actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.6rem; }
.danger-actions .btn { width: 100%; }

/* ==========================================================================
   Modals
   ========================================================================== */
.modal { display: none; position: fixed; inset: 0; background: rgba(10,14,22,0.55); z-index: 200; justify-content: center; align-items: center; padding: 1rem; }
.modal.active { display: flex; }
.modal-content {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.75rem; width: 100%; max-width: 400px; animation: modalIn 0.18s ease;
}
@keyframes modalIn { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-content h3 { margin-bottom: 1rem; }
.modal-content input {
  width: 100%; background: var(--card2); border: 1px solid var(--border); color: var(--text);
  padding: 0.65rem 0.8rem; border-radius: var(--radius-sm); font-size: 0.9rem; margin-bottom: 0.8rem;
}
.modal-actions { display: flex; gap: 0.6rem; margin-top: 1.4rem; justify-content: flex-end; }
.pair-select-list { max-height: 280px; overflow-y: auto; }
.pair-option { padding: 0.65rem 0.7rem; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.88rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: baseline; }
.pair-option:hover { background: var(--card2); }
.pair-option.selected { background: color-mix(in srgb, var(--accent) 16%, var(--card)); border: 1px solid var(--accent); }
.pair-symbol { font-weight: 700; }
.pair-min, .pair-price { font-size: 0.75rem; color: var(--muted); }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-row { display: flex; justify-content: space-between; align-items: center; margin: 0.7rem 0; gap: 1rem; }
.form-row > span:first-child { font-size: 0.87rem; color: var(--muted); flex-shrink: 0; }
.form-row input, .form-row select {
  background: var(--card2); border: 1px solid var(--border); color: var(--text);
  padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); flex: 1; font-size: 0.88rem;
  min-width: 0;
}
.time-selects { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.time-selects select { flex: 1; background: var(--card2); border: 1px solid var(--border); color: var(--text); padding: 0.55rem; border-radius: var(--radius-sm); }

/* ==========================================================================
   Pairs & Orders
   ========================================================================== */
.pair-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.9rem; }
.pair-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  background: var(--card2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem; font-size: 0.85rem;
}
.pair-alloc, .pair-strategy { color: var(--muted); font-size: 0.78rem; }
.btn-remove {
  background: none; border: none; color: var(--red); font-size: 1rem; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%;
}
.btn-remove:hover { background: color-mix(in srgb, var(--red) 12%, transparent); }

.table-container table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.table-container td { padding: 0.5rem 0.3rem; border-bottom: 1px solid var(--border); }

/* ==========================================================================
   Log
   ========================================================================== */
.log-container {
  height: 200px; overflow-y: auto; background: var(--card2); border-radius: var(--radius-sm);
  padding: 0.7rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); white-space: pre-wrap;
  border: 1px solid var(--border);
}

/* ==========================================================================
   Stats & market grid
   ========================================================================== */
.stat-grid, .market-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.stat-item { text-align: center; padding: 0.7rem 0.4rem; background: var(--card2); border-radius: var(--radius-sm); }
.stat-label { font-size: 0.72rem; color: var(--muted); display: block; margin-bottom: 0.3rem; }
.stat-value { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; }
.market-item { display: flex; justify-content: space-between; padding: 0.5rem 0; font-size: 0.85rem; border-bottom: 1px solid var(--border); }
.market-item:last-child { border-bottom: none; }
.projection-row { display: flex; justify-content: space-between; font-size: 0.9rem; }

/* ==========================================================================
   Toast
   ========================================================================== */
.toast {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: 0.75rem 1.4rem; border-radius: 30px;
  font-size: 0.85rem; z-index: 300; box-shadow: var(--shadow); animation: slideUp 0.25s ease;
}
@keyframes slideUp { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (min-width: 700px) {
  .app { padding: 0 1rem; }
}

/* ==========================================================================
   Desktop layout
   Bottom nav gives way to a horizontal top nav row at the desktop
   breakpoint (see .desktop-nav below) — the conventional responsive
   translation of a mobile tab bar, rather than shrinking the same fixed
   bottom bar into an awkward floating pill stretched onto a screen it
   wasn't designed for. Card content also flows into multiple columns
   instead of one long single-file stack, which is the normal expectation
   for a trading dashboard on an actual monitor rather than a narrow
   column with unused space on both sides.
   ========================================================================== */
@media (min-width: 1024px) {
  .bottom-nav { display: none; }

  .desktop-nav {
    display: flex; gap: 0.4rem; padding: 0.6rem 2rem;
    background: var(--card); border-bottom: 1px solid var(--border);
  }
  .desktop-nav .nav-item {
    flex: 0 0 auto; flex-direction: row; gap: 0.5rem; padding: 0.55rem 1rem;
    border-radius: var(--radius-sm); font-size: 0.85rem;
  }
  .desktop-nav .nav-item svg { width: 18px; height: 18px; }
  .desktop-nav .nav-item.active { background: var(--card2); }
  .desktop-nav .nav-item.active::before { display: none; }

  .app { max-width: none; padding: 0; }

  #mainContent {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 2rem 3rem;
  }

  /* column-count goes on .tab-panel.active, not #mainContent — it needs
     to be the direct parent of the .card elements being flowed, not an
     ancestor with a .tab-panel wrapper in between, or the column layout
     has no well-defined content to distribute. */
  .tab-panel.active {
    column-count: 2;
    column-gap: 1.25rem;
  }

  /* Multi-column text flow (not CSS grid) on purpose — cards here have
     genuinely variable heights (a chart card vs. a single-stat card), and
     column flow lets each one drop into whichever column has room next
     without needing equal row heights the way a strict grid would.
     break-inside keeps a single card from visually splitting in half
     across two columns, which columns do by default otherwise. */
  .tab-panel.active .card {
    display: inline-block;
    width: 100%;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    vertical-align: top;
  }

  /* Hero profit card stays full-width and prominent rather than being
     squeezed into a single column — it's the one thing on Home that
     should read at a glance, not compete for space with detail cards. */
  .hero-card { column-span: all; -webkit-column-span: all; }

  .section-label { column-span: all; -webkit-column-span: all; }
}

@media (min-width: 1440px) {
  .tab-panel.active { column-count: 3; }
  #mainContent { max-width: 1400px; }
}