:root {
  --bg:#0f0f10;
  --card:#1a1a1c;
  --text:#f1f1f5;
  --muted:#9ca3af;
  --brand:#3b82f6;
  --green:#22c55e;
  --red:#ef4444;
  --ring:#2c2c2f;
  --gold:#facc15;
}

* { box-sizing:border-box }
body {
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.45;
}
a { color:var(--brand); text-decoration:none }
a:hover { text-decoration:underline }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px;
}
.page-offset { margin-top:72px }

.header-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.welcome { font-size:28px; font-weight:700 }
.cta {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--brand);
  color:#fff;
  border-radius:10px;
  padding:10px 14px;
  font-weight:600;
  border:0;
  cursor:pointer;
}
.cta:hover { filter:brightness(0.95) }
.cta:active { transform:translateY(1px) }

.indices {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
  margin-bottom:30px;
}
.index-card {
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:12px;
  padding:14px;
}
.index-title { font-weight:700; margin:0 0 4px }
.index-price { font-size:18px; font-weight:700; margin:2px 0 }
.chg { font-weight:600 }
.chg.up { color:var(--green) }
.chg.down { color:var(--red) }
.muted { color:var(--muted) }

.dash {
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  align-items:start;
}
@media (max-width: 980px) {
  .dash { grid-template-columns:1fr }
}

.card {
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:14px;
  padding:16px;
  position:relative;
}
.card h2 { margin:0 0 12px; font-size:20px }

.ticker-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

@media (max-width: 1180px) { .ticker-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 860px) { .ticker-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 560px) { .ticker-grid{grid-template-columns:1fr} }

.ticker {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px;
  border:1px solid var(--ring);
  border-radius:12px;
  background:var(--card);
}
.ticker-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.sym { font-weight:800 }
.price { font-weight:700 }
.spark { width:100%; height:60px }
.row { display:flex; justify-content:space-between; align-items:center }
.yahoo-link { font-size:13px }

.news-list {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.news-item {
  padding:12px;
  border:1px solid var(--ring);
  border-radius:10px;
  background:var(--card);
}
.news-title { font-weight:700; margin:0 0 4px }
.news-src { color:var(--muted); font-size:13px }


.skeleton {
  background:linear-gradient(90deg,#2a2a2d,#1a1a1c,#2a2a2d);
  background-size:200% 100%;
  animation:shimmer 1.2s infinite;
  border-radius:8px;
}
@keyframes shimmer {
  0% { background-position:0 0 }
  100% { background-position:200% 0 }
}
.sk-line { height:12px; margin:6px 0 }
.sk-block { height:60px; margin-top:6px }

.locked { filter:blur(5px); pointer-events:none; user-select:none }
.upgrade-overlay {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:var(--gold);
  color:#000;
  padding:10px 16px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
  z-index:10;
}

.see-more { text-align:center; margin-top:12px }
.see-more a { cursor:pointer; font-weight:600 }

.dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.market-overview,
.news-section {
  width: 100%;
}
/* ---------- Global Search ---------- */
.global-search {
  position: sticky;
  top: 64px;
  z-index: 20;
  display: flex;
  gap: 10px;
  background: var(--bg);
  padding: 12px 16px;
  border-bottom: 1px solid var(--ring);
}

.global-search input {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 12px;
  color: var(--text);
  font-size: 15px;
}

.global-search button {
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 0 18px;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- Search Cards ---------- */
.search-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.search-card {
  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: 14px;
  padding: 16px;
}

.search-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-price {
  font-weight: 800;
}

.search-chart {
  height: 120px;
  margin: 10px 0;
}

.search-news a {
  display: block;
  margin-top: 6px;
  font-size: 14px;
}

/* ---------- Inline Article ---------- */
.article-panel {
  margin-top: 12px;
  border: 1px solid var(--ring);
  border-radius: 12px;
  overflow: hidden;
}

.article-header {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: #111;
}

.article-header button {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
}

.article-frame {
  width: 100%;
  height: 420px;
  border: none;
}
/* Search results */
#search-results {
  margin-bottom: 24px;
}

/* Skeleton loader */
.search-skeleton {
  height: 220px;
  border-radius: 14px;
  background: linear-gradient(
    90deg,
    #2a2a2d 25%,
    #1a1a1c 37%,
    #2a2a2d 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
}

/* Article fallback */
.article-fallback {
  padding: 16px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}
.article-fallback a {
  display: inline-block;
  margin-top: 8px;
  font-weight: 600;
}
/* ---------- Readable link list UX ---------- */

/* Container for dynamically generated links */
.search-news a {
  position: relative;
  display: block;
  padding: 10px 0 10px 18px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}

/* Arrow indicator before each link */
.search-news a::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 10px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
}

/* Subtle divider between links */
.search-news a + a {
  border-top: 1px solid var(--ring);
}

/* Hover polish */
.search-news a:hover {
  color: var(--brand);
  text-decoration: none;
}

.search-news a:hover::before {
  color: var(--brand);
}
/* --- Timeframe selector --- */
.timeframes {
  display: flex;
  gap: 8px;
  margin: 10px 0 14px;
  flex-wrap: wrap;
}

.timeframe-btn {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--ring);
  background: var(--card);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

.timeframe-btn.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.timeframe-btn:hover {
  filter: brightness(1.05);
}
/* ===============================
   DASHBOARD TABS
================================ */

.dashboard-tabs {
  display:flex;
  gap:10px;
  overflow-x:auto;
  margin-bottom:20px;
  padding-bottom:6px;
}

.dash-tab {
  background:var(--card);
  border:1px solid var(--ring);
  color:var(--muted);
  padding:10px 16px;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}

.dash-tab.active {
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}

.tab-section {
  display:none;
}

.tab-section.active {
  display:block;
}

/* summary formatting */
.summary-text {
  line-height:1.6;
  margin-bottom:14px;
}

.summary-list {
  margin-top:10px;
}

.summary-list li {
  margin-bottom:6px;
}

/* prediction cards */
.prediction-card {
  border:1px solid var(--ring);
  border-radius:12px;
  padding:14px;
  margin-bottom:12px;
}

html, body {
  overflow-x: hidden;
}

.dashboard-tabs {
  width: 100%;
  max-width: 100%;
}
/* --- Chart overflow fix --- */
canvas {
  display: block;
  max-width: 100% !important;
  width: 100% !important;
}

.spark,
.search-chart {
  width: 100%;
  overflow: hidden;
}
.news-grid {
  display: grid;
  grid-template-columns: 1fr; /* mobile */
  gap: 16px;
}

@media (min-width: 900px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .news-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}