/* Reset, layout, core components and animations.
 *
 * Layer 01 of the stylesheet. ORDER IS SIGNIFICANT: this file's rules
 * are overridden by every later layer and override every earlier one, exactly as
 * when they were one file. See docs/frontend-architecture.md. */

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: #071017;
      color: #fff;
      font-family: Arial, sans-serif;
    }

.loading-pulse {
  animation: loadingPulse 1.4s ease-in-out infinite;
  color: #8e9aa5 !important;
}
@keyframes loadingPulse {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}

a, button, .nav-item, .coin-card, .filter-tab,
.main-card, .signal-table tbody tr, input, select {
  transition: background .16s ease, color .16s ease,
              border-color .16s ease, box-shadow .16s ease,
              transform .16s ease;
}

    .app-shell {
      display: grid;
      grid-template-columns: 230px minmax(0, 1fr) 380px;
      gap: 28px;
      padding: 28px;
    }

   .filter-tab {
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  color: #94a3ad;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.filter-tab:hover {
  color: #ffffff;
  border-color: rgba(0,255,153,.3);
}

.filter-tab.active {
  color: #00ff99;
  background: rgba(0,255,153,.12);
  border: 1px solid rgba(0,255,153,.35);
}

.sidebar {
  background: linear-gradient(180deg, #0b1218, #071017);
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 30px rgba(0,0,0,.4);

  min-height: calc(100vh - 44px);
  position: sticky;
  top: 22px;
}

    .sidebar h1 {
      color: #00ff99;
      margin-top: 0;
      font-size: 28px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .sidebar h1 img {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      object-fit: cover;
    }

    .tagline {
      color: #888;
      font-size: 13px;
      margin-bottom: 24px;
    }

    .nav-item {
      padding: 13px;
      margin-top: 8px;
      border-radius: 12px;
      color: #aaa;
      cursor: pointer;
    }

    .nav-item:hover {
      color: #00ff99;
      background: rgba(0,255,153,0.08);
    }

    .nav-item.active {
      background: rgba(0,255,153,0.14);
      color: #00ff99;
    }

    .main-dashboard {
      display: flex;
      flex-direction: column;
      gap: 14px;
      min-width: 0;
      grid-template-rows: auto;
    }


    .right-panel {
      min-height: calc(100vh - 44px);
      position: sticky;
      top: 22px;

    }

    h2, h3 { margin-top: 0; }

    .green { color:#00ff99; }
    .red { color:#ff4d4d; }
    .yellow { color:#ffcc00; }

    .label {
      font-size: 12px;
      color: #888;
      text-transform: uppercase;
      letter-spacing: .04em;
    }


    .hero-title {
      font-size: 32px;
      font-weight: bold;
      line-height: 1.15;
      margin-top: 8px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 20px;
      border-top: 1px solid #1f2d36;
      padding-top: 16px;
    }

    .metric-label {
      color: #888;
      font-size: 12px;
    }

    .metric-value {
      margin-top: 6px;
      font-size: 20px;
      font-weight: bold;
    }

    .confidence-badge {
      display:inline-block;
      margin-top:12px;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(0,255,153,.10);
      border:1px solid rgba(0,255,153,.25);
      color:#00ff99;
      font-size:12px;
    }

    select, button, input {
      padding:10px;
      margin:8px 8px 8px 0;
      border-radius:9px;
      border:none;
    }

 button {
      background: #121a21;
      color: #aaa;
      cursor: pointer;
      border: 1px solid #26333d;
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    }

    button:hover {
      color: #ffffff;
      border-color: rgba(0,255,153,.3);
      background: #18222b;
    }

    button:hover {
      border-color:#00ff99;
      color:#00ff99;
    }

    .signal-table {
      width: 100%;
      border-collapse: collapse;
    }

    .signal-table th {
      text-align: left;
      color: #888;
      font-size: 12px;
      padding: 10px;
      border-bottom: 1px solid #1f2d36;
    }

    .signal-table td {
      padding: 16px 10px;
      border-bottom: 1px solid #1f2d36;
    }

    .signal-table tr:hover {
      background: rgba(0,255,153,.06);
      cursor:pointer;
    }

    .top-row {
      background: rgba(0,255,153,.04);
    }

    .signal-pill {
      display:inline-block;
      padding:5px 9px;
      border-radius:999px;
      font-size:12px;
      border:1px solid #26333d;
    }
    .signal-priority {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.signal-priority.normal {
  color: #8b949e;
}

.signal-priority.important {
  color: #57ff8f;
}

.signal-priority.major {
  color: #ff6767;
}

    .pill-strong {
      color:#00ff99;
      border-color:rgba(0,255,153,.35);
      background:rgba(0,255,153,.10);
    }

    .pill-medium {
      color:#ffcc00;
      border-color:rgba(255,204,0,.35);
      background:rgba(255,204,0,.10);
    }

    .pill-weak {
      color:#ff4d4d;
      border-color:rgba(255,77,77,.35);
      background:rgba(255,77,77,.10);
    }

    .leaderboard-row {
      display:flex;
      justify-content:space-between;
      gap:12px;
      background:#121a21;
      padding:12px;
      margin-bottom:8px;
      border-radius:10px;
      border-left:4px solid #00ff99;
    }

    .alert {
      background:#121a21;
      padding:12px;
      margin-bottom:10px;
      border-left:4px solid #00ff99;
      border-radius:10px;
      font-size:14px;
    }

 .popup-stack {
  position: fixed;
  top: 25px;
  right: 25px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.popup {
  background: #151515;
  border-left: 5px solid #00ff99;
  padding: 12px 14px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,255,153,.35);
  max-width: 280px;
  font-size: 13px;
  pointer-events: auto;
  animation: popup-in 0.25s ease-out;
}

@keyframes popup-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
    
    @media (max-width: 600px) {
      .popup {
        max-width: 220px;
        font-size: 12px;
        padding: 10px 12px;
        top: 16px;
        right: 16px;
      }
    }

    .popup.huge {
      border-left-color:#ffcc00;
      box-shadow:0 0 25px rgba(255,204,0,.6);
    }

.popup.whale {
  border-left-color: #0096ff;
  box-shadow: 0 0 30px rgba(0,150,255,.7);
  background: #0a2540;
}

    .detail-line {
      display:flex;
      justify-content:space-between;
      gap:12px;
      border-bottom:1px solid #1f2d36;
      padding:10px 0;
      color:#ccc;
    }

    .reason {
      margin-top:8px;
      color:#ccc;
      font-size:14px;
    }

    .mini-chart {
      background:#071017;
      border:1px solid #1f2d36;
      border-radius:12px;
      padding:10px;
      margin-top:16px;
    }

    /* Chart SVGs only. This was a bare `svg { … }` until 27 July — it predates
       the Lucide icon pass, and since every Lucide icon is an <svg>, any icon
       WITHOUT its own explicit size rule inflated to full-width x 80px. Most
       icons happened to have one (.qc-btn svg, .nav-item svg, …) which is why
       this went unnoticed; the Morning Pulse sunrise icon had none and rendered
       411x80 inside its own heading at 600px.

       Scoped to .mini-chart, which is what it was written for — .hero-chart and
       .trend-spark carry their own width/height/display. Unsized icons now fall
       back to Lucide's own 24x24 attributes. `display:block` stays global so no
       existing svg's vertical rhythm shifts. */
    svg {
      display:block;
    }

    .mini-chart svg {
      width:100%;
      height:80px;
    }

    /* Legal copy must be readable, not hidden in 11px grey (launch requirement) */
    .disclaimer {
      font-size: 13px;
      color: #8e9aa5;
      margin-top: 24px;
      line-height: 1.5;
    }

    /* Content-page links in the sidebar footer (also cloned into the mobile
       sheet). These were accidentally scoped inside the ≤1024px media query,
       leaving desktop with browser-default blue/purple underlined links. */
    .sidebar-links {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,.06);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px 12px;
      font-size: 12px;
    }
    .sidebar-links a { color: #5a6770; text-decoration: none; transition: color .15s; }
    .sidebar-links a:hover { color: #00ff99; }

    /* Quiet pill buttons for the watchlist AI features — the banner stays
       calm until you reach for them. (Same media-query escape as above.) */
    .wl-ai-btn {
      background: transparent;
      border: 1px solid rgba(255,255,255,.14);
      color: #b9c5cd;
      padding: 6px 14px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: border-color .15s, color .15s;
    }
    .wl-ai-btn:hover { border-color: rgba(255,204,51,.55); color: #ffcc33; }
    .wl-ai-btn:disabled { opacity: .6; cursor: default; }

    /* Quick Controls buttons: icon + label, rebuilt by setIconLabel() on toggle */
    .qc-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .qc-btn i, .qc-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
    #floatingExitBtn svg { width: 16px; height: 16px; }

    /* ── Mobile bottom navbar (tester 4 item 5) ────────────────────────────
       Desktop has the sidebar, so this only exists at <=1024px (see the
       breakpoint block further down, which is where it becomes visible). */
    #mobileBottomNav { display: none; }

    /* ── Coin search ───────────────────────────────────────────────────────
       Sheet on mobile (rises from the top so it clears the bottom bar and the
       on-screen keyboard), centred dialog on desktop. */
    #searchOverlay {
      position: fixed;
      inset: 0;
      z-index: 9600;
      background: rgba(3,7,10,.72);
      backdrop-filter: blur(4px);
      padding: 8vh 16px 16px;
      justify-content: center;
      align-items: flex-start;
    }
    #searchOverlay.open { display: flex !important; }
    #searchPanel {
      width: 100%;
      max-width: 560px;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      background: linear-gradient(180deg, #0b1117, #070b10);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 16px;
      box-shadow: 0 30px 80px rgba(0,0,0,.7);
      overflow: hidden;
    }
    .search-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(255,255,255,.07);
      flex-shrink: 0;
    }
    #searchInput {
      flex: 1;
      min-width: 0;
      background: transparent;
      border: none;
      outline: none;
      color: #ffffff;
      font-size: 16px; /* <16px makes iOS zoom the page on focus */
      font-family: inherit;
    }
    #searchInput::placeholder { color: #5a6770; }
    .search-close {
      background: transparent !important;
      border: none !important;
      color: #8e9aa5 !important;
      padding: 4px !important;
      cursor: pointer;
    }
    .search-close:hover { transform: none !important; color: #ffffff !important; }
    #searchResults { overflow-y: auto; padding: 8px; }
    .search-hint {
      padding: 10px 8px 6px;
      color: #5a6770;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .search-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 8px;
      border-radius: 10px;
      cursor: pointer;
    }
    .search-row:hover, .search-row:focus-visible { background: rgba(0,255,153,.07); }
    .search-row .sr-name { flex: 1; min-width: 0; }
    .search-row .sr-title { font-weight: 700; font-size: 14px; }
    .search-row .sr-sub { color: #8e9aa5; font-size: 12px; margin-top: 2px; }
    .search-row .sr-price { text-align: right; font-size: 13px; font-weight: 700; }
    /* Ask AI is the return-visit driver in the PostHog data, so it gets a real
       button on every result rather than being buried one tap deeper. */
    .sr-ai {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 12px !important;
      border-radius: 999px !important;
      background: rgba(0,255,153,.10) !important;
      border: 1px solid rgba(0,255,153,.40) !important;
      color: #00ff99 !important;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }
    .sr-ai:hover { background: rgba(0,255,153,.18) !important; transform: none !important; }
    .sr-ai svg { width: 13px; height: 13px; }
    .search-empty { padding: 22px 12px; text-align: center; color: #8e9aa5; font-size: 13px; }

    /* Desktop entry point in the Top Movers header */
    #moversSearchBtn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border-radius: 10px;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.08);
      color: #8e9aa5;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }
    #moversSearchBtn:hover { color: #ffffff; border-color: rgba(0,255,153,.3); transform: none !important; }
    #moversSearchBtn svg { width: 15px; height: 15px; }

    /* ── "Just Detected" bento tiles (tester 4 item 3) ─────────────────────
       auto-fit keeps it a single readable column on phones and 2-3 tiles wide
       on desktop, instead of one full-width row per detection. */
    .change-bento {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 10px;
    }
    .change-tile {
      padding: 12px 14px;
      border-radius: 10px;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.07);
      border-left: 3px solid #ffcc33;
    }
    .change-tile-head {
      font-size: 13px;
      font-weight: 700;
      color: #ffffff;
      line-height: 1.35;
    }
    .change-tile-detail {
      margin-top: 6px;
      font-size: 12px;
      line-height: 1.5;
      color: #8e9aa5;
    }

    /* ── Alerts notification bar (tester 4 item 4) ─────────────────────────
       The whole header is the toggle, so it needs to read as a bar rather than
       inherit the app's chunky default button styling. */
    #alertsBar {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 4px 0;
      background: transparent;
      border: none;
      color: inherit;
      text-align: left;
      cursor: pointer;
      font: inherit;
    }
    /* The global button:hover lift is `!important` and reads as a glitch on a
       full-width bar — the summary text shifting is enough feedback. */
    #alertsBar:hover { background: transparent; transform: none !important; }
    #alertsBar:hover #alertsSummary, #alertsBar:hover #alertsChevron { color: #d7e2e9; }
    .alerts-bar-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
      flex: 1;
    }
    .alerts-bar-title { font-size: 19px; font-weight: 800; line-height: 1.2; }
    #alertsSummary {
      color: #8e9aa5;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .alerts-count {
      flex-shrink: 0;
      padding: 2px 9px;
      border-radius: 999px;
      background: rgba(0,255,153,.12);
      border: 1px solid rgba(0,255,153,.3);
      color: #00ff99;
      font-size: 12px;
      font-weight: 700;
    }
    #alertsChevron { transition: transform .18s ease; color: #8e9aa5; }
    #alertsSection.collapsed #alertsChevron { transform: rotate(-90deg); }
    #alertsSection.collapsed #alertsBody { display: none; }
    .alerts-tabs {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin: 14px 0;
    }

    /* Tapping a coin on desktop swaps the right panel's contents in place, and
       the panel is sticky so it never scrolls — testers read that as "nothing
       happened". One brief accent pulse confirms the panel is now showing the
       coin they picked, without yanking the page around. */
    @keyframes panelSwap {
      0%   { border-color: rgba(0,255,153,.55); box-shadow: 0 0 34px rgba(0,255,153,.20); }
      100% { border-color: rgba(255,255,255,.06); box-shadow: none; }
    }
    .right-panel.panel-swap { animation: panelSwap .7s ease-out; }
    @media (prefers-reduced-motion: reduce) {
      .right-panel.panel-swap { animation: none; }
    }

/* Daily Market Pulse stat grid.
   Lives here rather than as an inline style in 06-render.js: an inline style
   beats every stylesheet rule, so the `repeat(2, 1fr)` mobile rule in
   03-mobile.css could never apply. The card kept four columns at every width,
   and below ~375px the "Market Mood" column's min-content (~97px) pushed the
   whole page into horizontal scrolling. */
.pulse-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}