/* ShellStreet Design Polish — deep sea vibes 🌊📈 */

body.shellstreet {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(0, 212, 170, 0.07), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(99, 102, 241, 0.06), transparent 55%),
    var(--bg);
  min-height: 100vh;
}

/* ---- Top Nav with ShellGames logo ---- */
.st-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px 4px;
}
.st-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.st-brand:hover, .st-brand:hover * { text-decoration: none; }
.st-brand img {
  height: 34px;
  width: auto;
  filter: drop-shadow(0 0 8px rgba(0, 212, 170, 0.35));
}
.st-brand span { color: var(--accent, #00d4aa); }
.st-brand small {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.72rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px 8px;
  margin-left: 2px;
}
.st-nav-right { display: flex; align-items: center; gap: 10px; }
.st-nav-right a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  padding: 6px 10px;
  border-radius: 10px;
  transition: all .15s;
}
.st-nav-right a:hover { color: var(--text); background: rgba(255,255,255,.04); }

/* ---- Hero header ---- */
.st-header h1, .sd-head h1 {
  background: linear-gradient(120deg, #eafff7 0%, #7defc9 45%, #00d4aa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 12px rgba(0, 212, 170, 0.18));
}

/* ---- Cards ---- */
.st-card, .sd-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 55%), var(--bg-card);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}
.st-card h2, .sd-card h2 {
  letter-spacing: -0.01em;
}

/* ---- Table polish ---- */
.stock-table th { border-bottom-color: rgba(255,255,255,0.08); }
.stock-table tbody tr { position: relative; }
.stock-table tbody tr:hover td { background: rgba(0, 212, 170, 0.05); }
.stock-table td { transition: background .2s; }
.sym { font-size: 0.98rem; }

/* Change pill instead of bare text */
.chg-pill {
  display: inline-block;
  min-width: 64px;
  text-align: center;
  padding: 3px 8px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.chg-pill.up { background: rgba(34, 197, 94, 0.12); color: #4ade80; }
.chg-pill.down { background: rgba(239, 68, 68, 0.12); color: #f87171; }

/* ---- Buttons ---- */
.btn-trade {
  border-radius: 12px;
  min-height: 44px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.btn-buy { background: linear-gradient(135deg, #34d399, #22c55e); }
.btn-sell { background: linear-gradient(135deg, #f87171, #ef4444); }
.btn-trade:hover { filter: brightness(1.07); }
.trade-box select, .trade-box input { min-height: 44px; border-radius: 12px; }

/* ---- Range/LB tabs ---- */
.range-tab, .lb-tab { min-height: 32px; }
.range-tab.active, .lb-tab.active {
  background: linear-gradient(135deg, #00d4aa, #00b894);
  border-color: transparent;
  color: #05231c;
  font-weight: 700;
}

/* ---- Portfolio total glow ---- */
.pf-total {
  background: linear-gradient(120deg, #ffffff, #b8ffe9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ================= MOBILE ================= */
@media (max-width: 640px) {
  .st-container, .sd-container { padding: 0.75rem !important; }
  .st-header { padding: 0.8rem 0 0.6rem !important; }
  .st-header h1 { font-size: 1.7rem !important; }
  .st-header .subtitle { font-size: 0.88rem !important; }
  .sd-head h1 { font-size: 1.4rem !important; }
  .sd-price { font-size: 1.6rem !important; }

  .st-brand { font-size: 0.95rem; }
  .st-brand img { height: 28px; }
  .st-brand small { display: none; }

  /* table: tighter, hide sector, smaller spark */
  .stock-table td, .stock-table th { padding: 8px 6px; font-size: 0.85rem; }
  .stock-table .sector-col { display: none; }
  .spark-cell canvas { width: 64px !important; height: 24px !important; }
  .sym small { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .st-card, .sd-card { padding: 13px; border-radius: 14px; }
  .trade-box { gap: 6px; }
  .btn-trade { flex: 1 1 45%; }

  .fund-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .chart-stats { gap: 10px; font-size: 0.72rem !important; }
  #chartCanvas { height: 210px !important; }
  .range-tabs { flex-wrap: wrap; }
}

@media (max-width: 380px) {
  .stock-table td, .stock-table th { padding: 7px 4px; font-size: 0.8rem; }
  .spark-cell { display: none; }
}

/* Emoji vom Gradient ausnehmen (sonst grüner Block) */
.st-header h1 .no-grad, .sd-head h1 .no-grad {
  -webkit-text-fill-color: initial;
  background: none;
}

/* ---- Overflow-Fix (09.07. Abend) ---- */
html, body.shellstreet { max-width: 100%; overflow-x: hidden; }
.st-grid, .sd-grid { grid-template-columns: minmax(0, 1fr) 340px; }
.st-grid > div, .sd-grid > div { min-width: 0; }
@media (max-width: 900px) {
  .st-grid, .sd-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
.st-card, .sd-card { max-width: 100%; box-sizing: border-box; }
.stock-table { table-layout: auto; width: 100%; max-width: 100%; }

@media (max-width: 640px) {
  .st-nav { flex-wrap: wrap; row-gap: 4px; padding-left: 2px; padding-right: 2px; }
  .st-nav-right { gap: 4px; }
  .st-nav-right a { padding: 6px 7px; font-size: 0.8rem; white-space: nowrap; }
  .stock-table th.num, .stock-table td.num { padding-left: 3px; padding-right: 3px; }
  .chg-pill { min-width: 54px; padding: 3px 5px; font-size: 0.76rem; }
  .spark-cell canvas { width: 56px !important; height: 22px !important; }
  .stock-table td, .stock-table th { padding: 8px 4px; }
  .sym small { max-width: 92px; }
}