/* ── Ticker Widgets — floating drag/resize panels (Tasks 5 & 7) ──────────────── */
.ticker-widget {
  position: fixed;
  top: 96px;
  right: 14px;
  width: 300px;
  height: 540px;
  min-width: 180px;
  min-height: 140px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ticker-widget:empty { display: none; }

.widget-header {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-8) var(--sp-10);
  border-bottom: 1px solid var(--border);
  background: var(--bg-nav);
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
}
.widget-header:active { cursor: grabbing; }

.widget-title {
  flex: 1;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-078);
  line-height: 1;
  padding: 2px 5px;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.widget-close:hover { color: var(--red); background: rgba(248,113,113,0.1); }

.widget-body {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.widget-body .scroll-panel {
  height: 100%;
  border: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: none;
}

.widget-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  cursor: se-resize;
  background: linear-gradient(135deg, transparent 55%, var(--border) 55%);
  border-radius: 0 0 var(--radius) 0;
  z-index: 1;
}

/* Themed widgets — offset left of general ticker */
.themed-widget {
  right: 328px;
  top: 96px;
  width: 240px;
  height: 320px;
}

/* ── Widget restore tray — in-flow inside footer ─────────────────────────────── */
.widget-tray {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: 5px 12px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  justify-content: center;
  pointer-events: none;
  width: 100%;
  box-sizing: border-box;
  /* hidden by default; JS shows it when pills exist */
  display: none;
}
.widget-tray.has-pills { display: flex; }
.widget-tray.collapsed .widget-tray-pill { display: none; }
.widget-tray-pill { pointer-events: all; }

/* Tray collapse/expand toggle button */
.tray-toggle-btn {
  pointer-events: all;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-072);
  font-weight: 600;
  padding: 2px var(--sp-8);
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.15s;
  order: -1; /* always leftmost */
}
.tray-toggle-btn:hover { color: var(--teal-bright); }
.tray-chevron { display: inline-block; margin-left: 3px; transition: transform 0.2s; }
.widget-tray.collapsed .tray-chevron { transform: rotate(180deg); }

.widget-tray-pill {
  background: var(--bg-item);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.73rem;
  font-weight: 600;
  padding: 3px 11px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.widget-tray-pill:hover { color: var(--teal-bright); border-color: var(--teal); }

/* ── Announce ticker close button ─────────────────────────────────────────────── */
.announce-ticker {
  position: relative;
  display: flex;
  align-items: center;
}
.announce-ticker-text {
  flex: 1;
  overflow: hidden;
}
.announce-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  font-size: var(--fs-075);
  line-height: 1;
  padding: 0 var(--sp-8);
  transition: color 0.15s;
}
.announce-close:hover { color: #fff; }

/* News feed widget — main content, left side */
.news-widget {
  left: 14px;
  top: 96px;
  /* leaves room for: comments(235)+gap + reddit(235)+gap + themed(235)+gap + stock(300)+gap + right(14) */
  width: calc(100vw - 840px);
  min-width: 240px;
  height: 580px;
}

/* General stock widget — right edge */
.stock-widget {
  right: 14px;
  top: 96px;
  width: 300px;
  height: 580px;
}

/* Themed widgets — centre-right column */
.themed-widget {
  right: 328px;   /* 300px stock + 14px gap + 14px */
  width: 235px;
  height: 183px;
}
.themed-pos-1 { top:  96px; }
.themed-pos-2 { top: 293px; }
.themed-pos-3 { top: 490px; }

/* Stocks link inside ticker header */
.stocks-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* ── Custom ticker item styles ────────────────────────────────────────────────── */

/* UL resets for non-stock ticker lists */
.cyber-list,
.layoff-list,
.medical-list,
.energy-list {
  list-style: none;
  padding: 0 var(--sp-8);
  margin: 0;
}

/* Shared row layout: badge on left, content stack on right */
.item-body { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }

/* News item — flex row so badge appears left of headline */
.news-item {
  padding: var(--sp-10) 0;
  border-bottom: 1px solid rgba(44, 62, 80, 0.6);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
}
.news-item:last-child { border-bottom: none; }

.news-item a {
  display: block;
  font-size: var(--fs-088);
  font-weight: 600;
  color: #fca5a5;
  line-height: 1.45;
  transition: color 0.15s;
}
.news-item a:hover { color: #fecaca; }

/* Cyber threat items */
.cyber-item {
  padding: var(--sp-8) 4px;
  border-bottom: 1px solid rgba(248,113,113,0.12);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-6);
}
.cyber-item .ci-type     { font-size: var(--fs-070); font-weight: 700; color: var(--red); letter-spacing: 0.05em; text-transform: uppercase; }
.cyber-item .ci-target   { font-size: var(--fs-082); font-weight: 600; color: var(--text); }
.cyber-item .ci-meta     { font-size: var(--fs-068); color: var(--text-muted); }
.cyber-item .ci-sev      { font-size: var(--fs-065); font-weight: 700; border-radius: 3px; padding: 1px 5px; display: inline-block; margin-top: 1px; }
.ci-sev.critical { background: rgba(248,113,113,0.2); color: var(--red); }
.ci-sev.high     { background: rgba(251,146,60,0.2);  color: #fb923c; }
.ci-sev.medium   { background: rgba(250,204,21,0.15); color: #fbbf24; }

/* Layoff tracker items */
.layoff-item {
  padding: var(--sp-8) 4px;
  border-bottom: 1px solid rgba(248,113,113,0.12);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-6);
}
.layoff-item .li-company { font-size: var(--fs-082); font-weight: 700; color: var(--text); }
.layoff-item .li-cut     { font-size: var(--fs-075); color: var(--red); font-weight: 600; }
.layoff-item .li-date    { font-size: var(--fs-065); color: var(--text-muted); }

/* Medical breakthrough items */
.medical-item {
  padding: var(--sp-8) 4px;
  border-bottom: 1px solid rgba(74,222,128,0.12);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-6);
}
.medical-item .mi-treatment { font-size: var(--fs-082); font-weight: 700; color: var(--green); }
.medical-item .mi-condition { font-size: var(--fs-075); color: var(--text); }
.medical-item .mi-milestone { font-size: var(--fs-068); color: var(--teal-bright); font-weight: 600; }
.medical-item .mi-date      { font-size: var(--fs-065); color: var(--text-muted); }

/* Clean energy items */
.energy-item {
  padding: var(--sp-8) 4px;
  border-bottom: 1px solid rgba(74,222,128,0.12);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-6);
}
.energy-item .ei-milestone { font-size: var(--fs-082); font-weight: 700; color: var(--teal-bright); }
.energy-item .ei-region    { font-size: var(--fs-072); color: var(--text-muted); }
.energy-item .ei-qty       { font-size: var(--fs-075); font-weight: 600; color: var(--green); }

/* ── Auth forms ──────────────────────────────────────────────────────────────── */
.auth-error {
  background: rgba(248,113,113,0.12);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  color: var(--red);
  font-size: var(--fs-082);
  padding: var(--sp-8) 12px;
  margin-bottom: 12px;
}
.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-082);
  padding: 7px 16px;
  transition: color 0.15s, border-color 0.15s;
}
.btn-secondary:hover { color: var(--teal-bright); border-color: var(--teal); }

/* ── Avatar picker ───────────────────────────────────────────────────────────── */
.avatar-picker { display: flex; gap: var(--sp-10); margin: var(--sp-8) 0 var(--sp-14); }
.avatar-swatch {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid transparent; cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.avatar-swatch.selected,
.avatar-swatch:hover { border-color: #fff; transform: scale(1.15); }

.profile-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700; color: #111; flex-shrink: 0;
}

/* ── Comment count badge ─────────────────────────────────────────────────────── */
.comment-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--bg-nav);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-062);
  font-weight: 700;
  cursor: pointer;
  padding: 0 4px;
  margin-right: var(--sp-6);
  flex-shrink: 0;
  vertical-align: middle;
  transition: background 0.15s, color 0.15s;
}
.comment-count-badge.has-count { background: var(--teal); color: #111; border-color: var(--teal); }
.comment-count-badge:hover { background: var(--teal-bright); color: #111; }

/* ── Comment panel overlay ───────────────────────────────────────────────────── */
.comment-panel-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 900;
}
.comment-panel {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, 96vw);
  max-height: 75vh;
  background: var(--bg-nav);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 901;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.comment-panel-inner { display: flex; flex-direction: column; height: 100%; }
.comment-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-10) var(--sp-14); border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: var(--fs-090); flex-shrink: 0;
}
.comment-panel-close {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: var(--fs-100); line-height: 1;
}
.comment-panel-close:hover { color: var(--red); }
.comment-panel-list { flex: 1; overflow-y: auto; padding: var(--sp-8) 12px; }
.comment-loading,
.comment-empty { color: #888; font-size: var(--fs-082); text-align: center; padding: 16px 0; }
.comment-row { display: flex; gap: var(--sp-10); padding: var(--sp-8) 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.comment-row:last-child { border-bottom: none; }
.comment-avatar-sm {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-075); font-weight: 700; color: #111;
}
.comment-body { flex: 1; min-width: 0; }
.comment-author { font-weight: 700; font-size: var(--fs-080); color: var(--text); }
.comment-time   { font-size: var(--fs-068); color: #888; margin-left: var(--sp-8); }
.comment-text   { margin: 3px 0 0; font-size: var(--fs-082); color: var(--text); word-break: break-word; }
.comment-panel-form {
  padding: var(--sp-10) 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.comment-panel-form textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  background: var(--bg-item); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text);
  font-size: var(--fs-082); padding: var(--sp-8) var(--sp-10); font-family: inherit;
  min-height: 54px;
}
.comment-panel-form textarea:focus { border-color: var(--teal); outline: none; }

/* ── Comments feed page ──────────────────────────────────────────────────────── */
.comment-feed-row {
  display: flex; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.comment-feed-row:last-child { border-bottom: none; }
.comment-feed-body { flex: 1; min-width: 0; }
.comment-feed-meta { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; margin-bottom: 4px; }
.comment-feed-source { font-size: var(--fs-070); color: var(--teal); }
.comment-feed-text { margin: 0; font-size: var(--fs-085); color: var(--text); word-break: break-word; }

/* Steam full page */
.steam-page { max-width: 1120px; }
.steam-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.steam-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-18);
}
.steam-page-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.steam-finder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-6) 12px;
  align-items: center;
  margin: 0 0 var(--sp-18);
}
.steam-finder label {
  grid-column: 1 / -1;
  margin: 0;
}
.steam-finder input {
  margin: 0;
}
.steam-finder-count {
  color: var(--text-muted);
  font-size: var(--fs-078);
  white-space: nowrap;
}
.steam-last-updated {
  color: var(--text-muted);
  font-size: var(--fs-082);
  font-variant-numeric: tabular-nums;
}
.steam-section {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 7px;
  border-top: 1px solid var(--border);
  padding: 0;
  overflow: hidden;
}
.steam-section summary {
  color: var(--text);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  list-style: none;
  padding: 12px var(--sp-14);
  user-select: none;
}
.steam-section summary::-webkit-details-marker { display: none; }
.steam-section summary::after {
  content: "+";
  color: var(--teal-bright);
  float: right;
  font-weight: 800;
}
.steam-section[open] summary {
  border-bottom: 1px solid var(--border);
}
.steam-section[open] summary::after {
  content: "-";
}
.steam-full-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  list-style: none;
  margin: 0;
  padding: 12px;
}
.steam-full-item {
  display: flex;
  gap: var(--sp-10);
  padding: var(--sp-10);
  background: var(--bg-item);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.steam-full-img {
  width: 92px;
  height: 35px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: rgba(102,192,244,0.08);
}
.steam-full-img.market {
  width: 54px;
  height: 54px;
  object-fit: contain;
}
.steam-full-img.placeholder { display: block; }
.steam-full-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.steam-full-title {
  color: var(--text);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.3;
}
.steam-full-meta {
  color: var(--text-muted);
  font-size: var(--fs-072);
}
.steam-full-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}
.steam-delta.good { color: #4ade80; }
.steam-delta.bad { color: #f87171; }
.steam-sparkline {
  width: 60px;
  height: 24px;
  flex: 0 0 60px;
  color: var(--text-muted);
}
.steam-sparkline.good { color: #4ade80; }
.steam-sparkline.bad { color: #f87171; }
.steam-sparkline.neutral { color: var(--text-muted); }
.steam-loading {
  color: var(--text-muted);
  font-size: var(--fs-085);
  margin: var(--sp-6) 0;
}

@media (max-width: 768px) {
  .steam-grid { grid-template-columns: 1fr; }
}

/* ── User Comments ticker items ──────────────────────────────────────────────── */
.comments-list { list-style: none; padding: 0 var(--sp-8); margin: 0; }
.comments-ticker-item {
  padding: 7px 4px var(--sp-6);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--fs-078);
}
/* Line 1: avatar + username: comment */
.cti-line1 {
  display: flex; align-items: center; gap: 5px;
  flex-wrap: nowrap; overflow: hidden;
}
.cti-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-065); font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.cti-author { font-weight: 700; color: var(--teal); white-space: nowrap; flex-shrink: 0; }
.cti-sep    { color: var(--text-muted); flex-shrink: 0; }
.cti-body   { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Line 2: breadcrumb */
.cti-line2 {
  font-size: var(--fs-070); color: var(--text-muted);
  padding-left: 25px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 3px;
}
.cti-line2 a, .cti-line2 .cti-arrow {
  color: var(--teal-bright, #3aafba); text-decoration: none; flex-shrink: 0;
}
.cti-line2 a:hover, .cti-line2 .cti-arrow:hover { color: #fff; }

/* ── Mobile overrides for widgets ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ticker-widget {
    position: static;
    width: 100%;
    height: 280px;
    margin: 0 0 var(--sp-14);
    border-radius: var(--radius);
  }
  .news-widget, .stock-widget, .themed-widget { width: 100%; height: 280px; }
  .widget-resize-handle { display: none; }
  .widget-header { cursor: default; }

  /* Task 8: tap-friendly controls on mobile */
  .ticker-btn, .widget-close, .tray-toggle-btn, .widget-tray-pill {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .comment-panel { width: 100vw; max-height: 90vh; top: auto; left: 0; right: 0; bottom: 0; transform: none; border-radius: var(--radius) var(--radius) 0 0; }
  .comment-panel-backdrop { background: rgba(0,0,0,0.6); }
  .nav-inner { padding: 0 12px; }
}

/* ── Reddit ticker items ─────────────────────────────────────────────────────── */
.reddit-list { list-style: none; padding: 0 var(--sp-8); margin: 0; }
.reddit-item {
  padding: var(--sp-8) 4px;
  border-bottom: 1px solid rgba(255,94,58,0.15);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-6);
}
.reddit-item .ri-sub    { font-size: var(--fs-065); font-weight: 700; color: #ff6314; text-transform: lowercase; }
.reddit-item .ri-title  { font-size: var(--fs-081); font-weight: 600; color: var(--text); line-height: 1.35; }
.reddit-item .ri-meta   { font-size: var(--fs-065); color: var(--text-muted); }
.reddit-item a          { color: inherit; }
.reddit-item a:hover .ri-title { color: var(--teal-bright); }

/* ── GDELT items ─────────────────────────────────────────────────────────────── */
.gdelt-list { list-style: none; padding: 0 var(--sp-8); margin: 0; }
.gdelt-item {
  padding: var(--sp-8) 4px;
  border-bottom: 1px solid rgba(248,113,113,0.12);
  display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-6);
}
.gdelt-item .gi-title  { font-size: var(--fs-081); font-weight: 600; color: #fca5a5; line-height: 1.35; }
.gdelt-item .gi-meta   { font-size: var(--fs-065); color: var(--text-muted); }
.gdelt-item a          { color: inherit; }

/* ── Earthquake items ────────────────────────────────────────────────────────── */
.quake-list { list-style: none; padding: 0 var(--sp-8); margin: 0; }
.quake-item {
  padding: var(--sp-8) 4px;
  border-bottom: 1px solid rgba(248,113,113,0.12);
  display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-6);
}
.quake-item .qi-mag   { font-size: var(--fs-100); font-weight: 900; color: var(--red); min-width: 32px; text-align: center; }
.quake-item .qi-place { font-size: var(--fs-081); font-weight: 600; color: var(--text); }
.quake-item .qi-meta  { font-size: var(--fs-065); color: var(--text-muted); }
.qi-mag.low    { color: #fbbf24; }
.qi-mag.medium { color: #fb923c; }
.qi-mag.high   { color: var(--red); }

/* ── MarketAux items ─────────────────────────────────────────────────────────── */
.maux-list { list-style: none; padding: 0 var(--sp-8); margin: 0; }
.maux-item {
  padding: var(--sp-8) 4px;
  border-bottom: 1px solid rgba(248,113,113,0.12);
  display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-6);
}
.maux-item .mai-title  { font-size: var(--fs-081); font-weight: 600; color: #fca5a5; line-height: 1.35; }
.maux-item .mai-tickers { font-size: var(--fs-062); color: var(--teal-bright); font-weight: 700; }
.maux-item .mai-meta   { font-size: var(--fs-065); color: var(--text-muted); }
.maux-item a           { color: inherit; }

/* ── NASA items ──────────────────────────────────────────────────────────────── */
.nasa-list { list-style: none; padding: 0 var(--sp-8); margin: 0; }
.nasa-item {
  padding: var(--sp-8) 4px;
  border-bottom: 1px solid rgba(74,222,128,0.12);
  display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-6);
}
.nasa-item .ni-type  { font-size: var(--fs-065); font-weight: 700; color: var(--teal-bright); text-transform: uppercase; letter-spacing: 0.04em; }
.nasa-item .ni-title { font-size: var(--fs-081); font-weight: 600; color: var(--green); line-height: 1.35; }
.nasa-item .ni-desc  { font-size: var(--fs-068); color: var(--text-muted); line-height: 1.3; }
.nasa-item a         { color: inherit; }

/* ── ISS items ───────────────────────────────────────────────────────────────── */
.iss-list { list-style: none; padding: 0 var(--sp-8); margin: 0; }
.iss-item {
  padding: var(--sp-8) 4px;
  border-bottom: 1px solid rgba(74,222,128,0.12);
  display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-6);
}
.iss-item .ii-label  { font-size: var(--fs-065); font-weight: 700; color: var(--teal-bright); text-transform: uppercase; }
.iss-item .ii-value  { font-size: var(--fs-082); font-weight: 600; color: var(--text); }
.iss-item .ii-sub    { font-size: var(--fs-068); color: var(--text-muted); }

/* ── Carbon items ────────────────────────────────────────────────────────────── */
.carbon-list { list-style: none; padding: 0 var(--sp-8); margin: 0; }
.carbon-item {
  padding: var(--sp-8) 4px;
  border-bottom: 1px solid rgba(74,222,128,0.12);
  display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-6);
}
.carbon-item .cai-activity { font-size: var(--fs-081); font-weight: 600; color: var(--green); }
.carbon-item .cai-co2      { font-size: var(--fs-075); font-weight: 700; color: #fbbf24; }
.carbon-item .cai-offset   { font-size: var(--fs-065); color: var(--teal-bright); }

/* ── FBI Wanted items ────────────────────────────────────────────────────────── */
.fbi-list { list-style: none; padding: 0 var(--sp-8); margin: 0; }
.fbi-item {
  padding: var(--sp-8) 4px;
  border-bottom: 1px solid rgba(248,113,113,0.12);
  display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-6);
}
.fbi-item .fi-name   { font-size: var(--fs-082); font-weight: 700; color: var(--red); }
.fbi-item .fi-reason { font-size: var(--fs-072); color: var(--text); line-height: 1.3; }
.fbi-item .fi-meta   { font-size: var(--fs-065); color: var(--text-muted); }
.fbi-item .fi-reward { font-size: var(--fs-065); color: #fbbf24; font-weight: 600; }
.fbi-item a          { color: inherit; }
.fi-photo { width: 40px; height: 48px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
.fi-photo-placeholder { width: 40px; height: 48px; background: rgba(248,113,113,0.15); border-radius: 3px; flex-shrink: 0; }

/* ── Hacker News items ───────────────────────────────────────────────────────── */
.hn-list { list-style: none; padding: 0 var(--sp-8); margin: 0; }
.hn-item {
  padding: var(--sp-8) 4px;
  border-bottom: 1px solid rgba(74,222,128,0.12);
  display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-6);
}
.hn-item .hi-title    { font-size: var(--fs-081); font-weight: 600; color: var(--green); line-height: 1.35; }
.hn-item .hi-meta     { font-size: var(--fs-065); color: var(--text-muted); }
.hn-item .hi-points   { font-size: var(--fs-072); font-weight: 700; color: #fb923c; }
.hn-item a            { color: inherit; }

/* ── Steam Review items ──────────────────────────────────────────────────────── */
.steam-list { list-style: none; padding: 0 var(--sp-8); margin: 0; }
.steam-item {
  padding: var(--sp-8) 4px;
  border-bottom: 1px solid rgba(102,192,244,0.15);
  display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-8);
}
.si-capsule {
  width: 92px; height: 35px; object-fit: cover;
  border-radius: 3px; flex-shrink: 0; margin-top: 2px;
}
.steam-item .si-title   { font-size: var(--fs-081); font-weight: 600; color: var(--text); line-height: 1.35; }
.steam-item .si-label   { display: inline-block; font-size: var(--fs-062); font-weight: 700;
                           padding: 1px 5px; border-radius: 3px; letter-spacing: 0.02em; }
.si-label-good { background: rgba(74,222,128,0.15); color: #4ade80; }
.si-label-bad  { background: rgba(248,113,113,0.15); color: #f87171; }
.steam-item .si-score   { font-size: var(--fs-072); color: var(--text-muted); }
.steam-item .si-meta    { font-size: var(--fs-065); color: var(--text-muted); }
.steam-item .si-snippet { font-size: var(--fs-068); color: var(--text-muted); font-style: italic;
                           line-height: 1.35; display: block; margin-top: 1px; }
.steam-item .si-pct-good { color: #4ade80; }
.steam-item .si-pct-bad  { color: #f87171; }
.pc-item .si-pct-good,
.mkt-item .si-pct-good { color: #4ade80; }
.pc-item .si-pct-bad,
.mkt-item .si-pct-bad { color: #f87171; }
.steam-item a           { color: inherit; }

/* ── Steam Player Count items ────────────────────────────────────────────────── */
.pc-item {
  padding: var(--sp-8) 4px;
  border-bottom: 1px solid rgba(102,192,244,0.15);
  display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-8);
}
.pc-item .si-title  { font-size: var(--fs-081); font-weight: 600; color: var(--text); line-height: 1.35; }
.pc-item .si-label  { display: inline-block; font-size: var(--fs-062); font-weight: 700;
                       padding: 1px 5px; border-radius: 3px; letter-spacing: 0.02em; }
.pc-count           { font-size: var(--fs-075); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pc-item a          { color: inherit; }

/* ── Steam Market Item items ─────────────────────────────────────────────────── */
.mkt-item {
  padding: var(--sp-8) 4px;
  border-bottom: 1px solid rgba(102,192,244,0.15);
  display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-8);
}
.mkt-icon {
  width: 48px; height: 48px; object-fit: contain;
  border-radius: 4px; flex-shrink: 0; margin-top: 2px;
  background: rgba(102,192,244,0.08);
}
.mkt-item .si-title { font-size: var(--fs-081); font-weight: 600; color: var(--text); line-height: 1.35; }
.mkt-item .si-label { display: inline-block; font-size: var(--fs-062); font-weight: 700;
                       padding: 1px 5px; border-radius: 3px; letter-spacing: 0.02em; }
.mkt-game  { font-size: var(--fs-065); color: var(--text-muted); }
.mkt-price { font-size: var(--fs-078); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.mkt-vol   { font-size: 0.63rem; color: var(--text-muted); }
.mkt-item a { color: inherit; }

/* ── Additional widget positions for new tickers ─────────────────────────────── */
.themed-pos-4 { top: 687px; }

/* Reddit widget — always visible, positioned in the themed column */
.reddit-widget {
  right: 577px;   /* themed (235) + gap (14) + reddit (235) + gaps = left of themed col */
  top: 96px;
  width: 235px;
  height: 320px;
}