/* =============================================
   CALM MARKET — Homepage Dashboard v2
   ============================================= */

/* Canvas background */
#hm-canvas {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

.hm-root {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  color: #e2e8f0;
  font-family: 'Inter', sans-serif;
}

/* ---- Status bar ---- */
.hm-statusbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 1.4rem;
  background: rgba(13,21,38,0.85);
  border-bottom: 1px solid rgba(108,139,255,0.12);
  backdrop-filter: blur(12px);
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  flex-wrap: wrap;
}
.hm-status-market {
  display: flex; align-items: center; gap: 0.4rem;
  font-weight: 700; letter-spacing: 0.06em;
}
.hm-dot {
  width: 7px; height: 7px; border-radius: 50%;
  animation: hm-pulse 2s infinite;
}
.hm-dot.open  { background: #5af0a8; box-shadow: 0 0 8px #5af0a8; }
.hm-dot.closed{ background: #ff4d6a; animation: none; }
@keyframes hm-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

.hm-status-sep { color: rgba(108,139,255,0.3); }
.hm-clock { color: #7a8fb5; }
.hm-regime {
  margin-left: auto;
  padding: 0.2rem 0.7rem;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hm-regime.bullish  { background: rgba(90,240,168,0.12); color: #5af0a8; border: 1px solid rgba(90,240,168,0.25); }
.hm-regime.bearish  { background: rgba(255,77,106,0.12);  color: #ff4d6a; border: 1px solid rgba(255,77,106,0.25); }
.hm-regime.cautious { background: rgba(255,140,66,0.12);  color: #ff8c42; border: 1px solid rgba(255,140,66,0.25); }
.hm-regime.unknown  { background: rgba(122,143,181,0.12); color: #7a8fb5; border: 1px solid rgba(122,143,181,0.25); }

.hm-role-badge {
  padding: 0.18rem 0.6rem;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.hm-role-badge.admin { background: rgba(108,139,255,0.2); color: #6c8bff; border: 1px solid rgba(108,139,255,0.35); }
.hm-role-badge.pro   { background: rgba(255,215,0,0.15);  color: #ffd700; border: 1px solid rgba(255,215,0,0.3); }
.hm-role-badge.user  { background: rgba(122,143,181,0.15);color: #7a8fb5; border: 1px solid rgba(122,143,181,0.3); }

.hm-refresh-info { color: #7a8fb5; font-size: 0.68rem; }
.hm-refresh-btn {
  background: none; border: 1px solid rgba(108,139,255,0.3);
  color: #6c8bff; border-radius: 6px;
  padding: 0.15rem 0.55rem; cursor: pointer; font-size: 0.7rem;
  transition: all 0.2s;
}
.hm-refresh-btn:hover { background: rgba(108,139,255,0.1); }
.hm-refresh-btn.spinning { animation: hm-spin 0.8s linear infinite; }
@keyframes hm-spin { to { transform: rotate(360deg); } }

/* ---- Ticker strip ---- */
.hm-ticker-wrap {
  overflow: hidden;
  background: rgba(6,11,24,0.7);
  border-bottom: 1px solid rgba(108,139,255,0.08);
  padding: 0.4rem 0;
}
.hm-ticker-track {
  display: flex;
  gap: 2.5rem;
  white-space: nowrap;
  animation: hm-ticker-scroll 60s linear infinite;
  width: max-content;
}
.hm-ticker-wrap:hover .hm-ticker-track { animation-play-state: paused; }
@keyframes hm-ticker-scroll { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.hm-ticker-item {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem; cursor: default;
}
.hm-ticker-sym  { color: #e2e8f0; font-weight: 700; }
.hm-ticker-price{ color: #7a8fb5; }
.hm-ticker-chg  { font-weight: 600; }
.hm-ticker-chg.up   { color: #5af0a8; }
.hm-ticker-chg.down { color: #ff4d6a; }

/* ---- Main layout ---- */
.hm-body {
  padding: 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  max-width: 1600px;
  margin: 0 auto;
}

/* ---- Section header ---- */
.hm-section-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a8fb5;
  margin-bottom: 0.75rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.hm-section-title::after {
  content: ''; flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(108,139,255,0.2), transparent);
}

/* ---- Indices grid ---- */
.hm-indices-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.85rem;
}
@media (max-width: 1400px) {
  .hm-indices-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 800px) {
  .hm-indices-grid { grid-template-columns: repeat(2, 1fr); }
}
.hm-index-card {
  background: rgba(13,21,38,0.7);
  border: 1px solid rgba(108,139,255,0.12);
  border-radius: 12px;
  padding: 1rem 1.1rem 0.8rem;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}
.hm-index-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--card-accent, rgba(108,139,255,0.4));
  opacity: 0;
  transition: opacity 0.2s;
}
.hm-index-card:hover { border-color: rgba(108,139,255,0.35); box-shadow: 0 4px 24px rgba(108,139,255,0.1); transform: translateY(-2px); }
.hm-index-card:hover::before { opacity: 1; }
.hm-index-card.up   { --card-accent: rgba(90,240,168,0.5); }
.hm-index-card.down { --card-accent: rgba(255,77,106,0.5); }

.hm-idx-sym   { font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:#7a8fb5; letter-spacing:0.06em; }
.hm-idx-name  { font-size:0.78rem; color:#e2e8f0; font-weight:500; margin: 0.2rem 0 0.5rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hm-idx-price { font-family:'JetBrains Mono',monospace; font-size:1.15rem; font-weight:700; color:#e2e8f0; }
.hm-idx-chg   { font-family:'JetBrains Mono',monospace; font-size:0.8rem; font-weight:600; margin-top:0.15rem; }
.hm-idx-chg.up   { color:#5af0a8; }
.hm-idx-chg.down { color:#ff4d6a; }
.hm-idx-spark { margin-top:0.6rem; }
.hm-idx-spark svg { width:100%; height:38px; overflow:visible; }

/* ---- Two-column row ---- */
.hm-two-col {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.2rem;
}
@media (max-width: 960px) {
  .hm-two-col { grid-template-columns: 1fr; }
}

/* ---- News feed ---- */
.hm-news-list { display: flex; flex-direction: column; gap: 0.7rem; }
.hm-news-card {
  background: rgba(13,21,38,0.7);
  border: 1px solid rgba(108,139,255,0.1);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  display: flex; gap: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  backdrop-filter: blur(6px);
}
.hm-news-card:hover { border-color: rgba(108,139,255,0.3); background: rgba(13,21,38,0.9); }
.hm-news-img {
  width: 72px; height: 56px; flex-shrink: 0;
  border-radius: 7px; object-fit: cover;
  background: rgba(108,139,255,0.08);
}
.hm-news-img-placeholder {
  width: 72px; height: 56px; flex-shrink: 0;
  border-radius: 7px;
  background: rgba(108,139,255,0.08);
  display: flex; align-items: center; justify-content: center;
  color: rgba(108,139,255,0.3); font-size: 1.2rem;
}
.hm-news-body  { flex: 1; min-width: 0; }
.hm-news-meta  { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; flex-wrap: wrap; }
.hm-news-src   { font-family:'JetBrains Mono',monospace; font-size:0.65rem; color:#7a8fb5; font-weight:700; text-transform:uppercase; }
.hm-news-time  { font-size:0.65rem; color:rgba(122,143,181,0.6); }
.hm-news-sent  { font-size:0.6rem; font-weight:700; padding:0.1rem 0.4rem; border-radius:4px; }
.hm-news-sent.positive { background:rgba(90,240,168,0.12); color:#5af0a8; }
.hm-news-sent.negative { background:rgba(255,77,106,0.12); color:#ff4d6a; }
.hm-news-sent.neutral  { background:rgba(122,143,181,0.1); color:#7a8fb5; }
.hm-news-title { font-size:0.85rem; font-weight:500; color:#e2e8f0; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hm-news-syms  { margin-top:0.3rem; display:flex; gap:0.3rem; flex-wrap:wrap; }
.hm-news-sym-tag { font-family:'JetBrains Mono',monospace; font-size:0.6rem; color:#6c8bff; background:rgba(108,139,255,0.1); padding:0.1rem 0.35rem; border-radius:4px; }

/* ---- Movers panel ---- */
.hm-movers-panel {
  background: rgba(13,21,38,0.7);
  border: 1px solid rgba(108,139,255,0.1);
  border-radius: 12px;
  padding: 1rem;
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; gap: 0.8rem;
}
.hm-movers-sub { font-family:'JetBrains Mono',monospace; font-size:0.65rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#7a8fb5; margin-bottom:0.4rem; }
.hm-mover-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.45rem 0.6rem; border-radius: 7px;
  background: rgba(6,11,24,0.4);
  cursor: pointer; transition: background 0.15s;
}
.hm-mover-row:hover { background: rgba(108,139,255,0.07); }
.hm-mover-sym  { font-family:'JetBrains Mono',monospace; font-size:0.82rem; font-weight:700; color:#e2e8f0; }
.hm-mover-name { font-size:0.68rem; color:#7a8fb5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100px; }
.hm-mover-right{ display:flex; flex-direction:column; align-items:flex-end; gap:0.1rem; }
.hm-mover-price{ font-family:'JetBrains Mono',monospace; font-size:0.75rem; color:#7a8fb5; }
.hm-mover-chg  { font-family:'JetBrains Mono',monospace; font-size:0.82rem; font-weight:700; }
.hm-mover-chg.up   { color:#5af0a8; }
.hm-mover-chg.down { color:#ff4d6a; }

/* ---- AI signals ---- */
.hm-signals-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.8rem;
}
@media (max-width: 1400px) {
  .hm-signals-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .hm-signals-row { grid-template-columns: repeat(2, 1fr); }
}
.hm-signal-card {
  background: rgba(13,21,38,0.75);
  border: 1px solid rgba(108,139,255,0.12);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  backdrop-filter: blur(8px);
  transition: border-color 0.2s;
}
.hm-signal-card:hover { border-color: rgba(108,139,255,0.3); }
.hm-signal-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.5rem; }
.hm-signal-ticker { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:1rem; color:#e2e8f0; }
.hm-signal-score {
  font-family:'JetBrains Mono',monospace; font-size:0.7rem; font-weight:700;
  padding:0.15rem 0.5rem; border-radius:6px;
}
.hm-signal-score.high   { background:rgba(90,240,168,0.15); color:#5af0a8; }
.hm-signal-score.medium { background:rgba(255,140,66,0.15);  color:#ff8c42; }
.hm-signal-score.low    { background:rgba(255,77,106,0.12);  color:#ff4d6a; }
.hm-signal-strat { font-size:0.72rem; color:#7a8fb5; margin-bottom:0.35rem; }
.hm-signal-reason{ font-size:0.73rem; color:#b0bfd4; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hm-signal-meta  { display:flex; justify-content:space-between; margin-top:0.5rem; font-size:0.65rem; color:#7a8fb5; font-family:'JetBrains Mono',monospace; }

/* ---- AI thought card ---- */
.hm-ai-thought {
  background: rgba(13,21,38,0.7);
  border: 1px solid rgba(108,139,255,0.15);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  backdrop-filter: blur(8px);
  display: flex; gap: 1rem; align-items: flex-start;
}
.hm-ai-icon { font-size:1.5rem; flex-shrink:0; opacity:0.8; }
.hm-ai-label { font-family:'JetBrains Mono',monospace; font-size:0.65rem; color:#6c8bff; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:0.35rem; }
.hm-ai-text  { font-size:0.82rem; color:#b0bfd4; line-height:1.6; }

/* ---- Watchlist ---- */
.hm-watchlist-top { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.75rem; }
.hm-watchlist-add { display:flex; gap:0.5rem; margin-left:auto; }
.hm-wl-input {
  background: rgba(6,11,24,0.8); border: 1px solid rgba(108,139,255,0.2);
  border-radius: 7px; color:#e2e8f0; font-family:'JetBrains Mono',monospace;
  font-size:0.78rem; padding:0.35rem 0.7rem; outline:none; width:120px;
  text-transform:uppercase;
}
.hm-wl-input:focus { border-color:#6c8bff; }
.hm-wl-add-btn {
  background: rgba(108,139,255,0.15); border:1px solid rgba(108,139,255,0.3);
  color:#6c8bff; border-radius:7px; padding:0.35rem 0.8rem;
  cursor:pointer; font-size:0.78rem; font-weight:700;
  transition: background 0.2s;
}
.hm-wl-add-btn:hover { background:rgba(108,139,255,0.25); }

.hm-watchlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.7rem;
}
.hm-wl-card {
  background: rgba(13,21,38,0.7);
  border: 1px solid rgba(108,139,255,0.1);
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
  backdrop-filter: blur(6px);
  position: relative;
}
.hm-wl-card:hover { border-color: rgba(108,139,255,0.3); transform: translateY(-1px); }
.hm-wl-card-top { display:flex; justify-content:space-between; align-items:center; }
.hm-wl-sym  { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:0.9rem; color:#e2e8f0; }
.hm-wl-remove { background:none; border:none; color:rgba(255,77,106,0.4); cursor:pointer; font-size:0.9rem; padding:0; line-height:1; transition:color 0.2s; }
.hm-wl-remove:hover { color:#ff4d6a; }
.hm-wl-price { font-family:'JetBrains Mono',monospace; font-size:1rem; font-weight:700; color:#e2e8f0; margin-top:0.4rem; }
.hm-wl-chg   { font-family:'JetBrains Mono',monospace; font-size:0.78rem; font-weight:600; }
.hm-wl-chg.up   { color:#5af0a8; }
.hm-wl-chg.down { color:#ff4d6a; }
.hm-wl-spark svg { width:100%; height:28px; }

/* ---- Pro lock overlay ---- */
.hm-pro-lock {
  position: relative;
}
.hm-pro-overlay {
  position: absolute; inset: 0;
  backdrop-filter: blur(6px);
  background: rgba(6,11,24,0.55);
  border-radius: inherit;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  flex-direction: column; gap: 0.5rem;
}
.hm-pro-lock-icon { font-size: 1.4rem; }
.hm-pro-lock-text { font-family:'JetBrains Mono',monospace; font-size:0.72rem; font-weight:700; color:#ffd700; text-align:center; }
.hm-pro-lock-cta {
  margin-top:0.25rem;
  padding: 0.35rem 0.9rem;
  background: rgba(255,215,0,0.15);
  border: 1px solid rgba(255,215,0,0.35);
  border-radius: 20px;
  color: #ffd700;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  font-family:'JetBrains Mono',monospace;
  letter-spacing: 0.06em;
  transition: background 0.2s;
}
.hm-pro-lock-cta:hover { background: rgba(255,215,0,0.25); }

/* ---- Watchlist blur for base (only after 3rd item) ---- */
.hm-wl-card.blurred-pro {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
}

/* ---- Signal placeholder ---- */
.hm-signal-ph {
  border-style: dashed;
  border-color: rgba(108,139,255,0.08);
  opacity: 0.4;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}
.hm-signal-ph-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: #7a8fb5;
  letter-spacing: 0.06em;
}

/* ---- Footer ---- */
.hm-footer {
  padding: 1rem 1.4rem;
  border-top: 1px solid rgba(108,139,255,0.08);
  display: flex; align-items: center; justify-content: space-between;
  font-family:'JetBrains Mono',monospace; font-size:0.65rem; color:#7a8fb5;
  flex-wrap: wrap; gap: 0.5rem;
}
.hm-footer a { color:#6c8bff; text-decoration:none; }
.hm-footer a:hover { text-decoration:underline; }

/* ---- Empty states ---- */
.hm-empty {
  text-align:center; padding:2rem;
  font-size:0.82rem; color:#7a8fb5;
  font-family:'JetBrains Mono',monospace;
}

/* ---- Skeleton loading ---- */
.hm-skel {
  background: linear-gradient(90deg, rgba(108,139,255,0.05) 25%, rgba(108,139,255,0.1) 50%, rgba(108,139,255,0.05) 75%);
  background-size: 200% 100%;
  animation: hm-skel 1.5s infinite;
  border-radius: 6px;
}
@keyframes hm-skel { 0%{background-position:200% 0} 100%{background-position:-200% 0} }