/* Ticker */
.ticker { display: flex; gap: 12px; overflow-x: auto; padding: 8px 0;
  margin-bottom: 12px; font-size: 12px; }
.ticker-item { white-space: nowrap; padding: 6px 10px; background: var(--bg-card);
  border-radius: var(--radius-small); border: 1px solid var(--border-card); position: relative; }
.ticker-item .live-dot { position: absolute; top: 4px; right: 4px; width: 5px; height: 5px;
  border-radius: 50%; background: #39d353; animation: pulse 2s infinite; }
.ticker-item .code { color: var(--color-muted); font-size: 10px; margin-left: 4px; }
.ticker-item .px { font-weight: 600; margin-left: 4px; }
.ticker-item .prem { margin-left: 8px; font-size: 10px; color: var(--color-warn); }

/* Mode card */
.mode-card { padding: 16px 20px; border-radius: var(--radius-card);
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px;
  align-items: center; margin-bottom: 16px; }
.mode-card.gold { background: linear-gradient(135deg, #fff8e1 0%, #fff 50%); border: 1.5px solid #ffd97a; }
.mode-card.ndx { background: linear-gradient(135deg, #e8f1ff 0%, #fff 50%); border: 1.5px solid #b3d4ff; }
.mode-card .badge { padding: 10px 16px; border-radius: var(--radius-small);
  text-align: center; color: #fff; }
.mode-card.gold .badge { background: var(--color-gold); }
.mode-card.ndx .badge { background: var(--color-blue); }
.mode-card .badge .lbl { font-size: 9px; opacity: 0.85; letter-spacing: 0.1em; }
.mode-card .badge .val { font-size: 20px; font-weight: 700; line-height: 1; margin-top: 2px; }
.mode-card .detail .title { font-size: 14px; font-weight: 600; }
.mode-card .detail .sub { font-size: 11px; color: var(--color-muted); margin-top: 4px; }
.mode-card .premium { text-align: right; }
.mode-card .premium .pv { font-size: 24px; font-weight: 700; line-height: 1; color: var(--color-pos); }
.mode-card .premium .pl { font-size: 10px; color: var(--color-muted); margin-top: 2px; }

/* ETF cards */
.etf-card { padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--border-card);
  border-radius: var(--radius-card); display: grid;
  grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; margin-bottom: 8px; }
.etf-card.highlight { border-color: var(--color-text); border-width: 1.5px; }
.etf-card.dim { opacity: 0.55; }
.action-icon { width: 56px; height: 56px; border-radius: 10px; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; }
.action-icon.sell { background: #e6f5e6; color: var(--color-neg); }
.action-icon.buy { background: #fce4e4; color: var(--color-pos); }
.action-icon.hold { background: #f0f0eb; color: var(--color-muted); }
.action-icon .arrow { font-size: 16px; line-height: 1; margin-bottom: 2px; }
.etf-body .nm { font-size: 16px; font-weight: 600; }
.etf-body .code { font-size: 11px; color: var(--color-muted); margin-left: 4px; font-weight: normal; }
.etf-body .qty { font-size: 22px; font-weight: 700; margin: 4px 0; }
.etf-body .qty .unit { font-size: 11px; color: var(--color-muted); font-weight: normal; margin-left: 2px; }
.etf-body .row { font-size: 11px; color: var(--color-muted); display: flex; gap: 14px; flex-wrap: wrap; }
.etf-body .row .lbl { color: var(--color-faint); }
.etf-body .row .prem.hi { color: var(--color-warn); }
.etf-meta { text-align: right; min-width: 100px; }
.etf-meta .money { font-size: 17px; font-weight: 600; }
.etf-meta .pct { font-size: 11px; color: var(--color-muted); margin-top: 4px; }
.etf-meta .tag { display: inline-block; margin-top: 6px; padding: 2px 8px;
  border-radius: 4px; font-size: 10px; }
.etf-meta .tag.trigger { background: #fff0e6; color: var(--color-pos); border: 1px solid #ffd0b0; }

/* Phase bars */
.phase-wrap { padding: 14px; background: var(--bg-card); border: 1px solid var(--border-card);
  border-radius: var(--radius-card); }
.phase-legend { display: flex; gap: 12px; font-size: 11px; color: var(--color-muted);
  margin-bottom: 12px; flex-wrap: wrap; }
.phase-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: 2px; vertical-align: middle; }
.phase-bars { display: flex; gap: 12px; height: 200px; align-items: stretch; padding-bottom: 8px; }
.phase-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.phase-bar { width: 100%; max-width: 50px; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column-reverse; border-radius: var(--radius-small);
  overflow: hidden; background: rgba(0,0,0,0.04); }
.phase-seg { width: 100%; }
.phase-lbl { font-size: 11px; color: var(--color-muted); margin-top: 4px; font-weight: 600; }
.phase-date { font-size: 9px; color: var(--color-faint); margin-top: 2px; }
.phase-today { color: var(--color-pos) !important; }

/* Bottom banner */
.bottom-banner { margin-top: 12px; padding: 10px 14px; background: #fff5e6;
  border: 1px solid #ffd97a; border-radius: var(--radius-small); font-size: 12px; }
.bottom-banner .warn { color: var(--color-pos); font-weight: 600; margin-right: 6px; }

/* Matrix calendar */
.matrix-wrap { background: var(--bg-card); border: 1px solid var(--border-card);
  border-radius: var(--radius-card); padding: 16px; }
.matrix-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  flex-wrap: wrap; }
.matrix-header button { background: var(--bg-card); border: 1px solid var(--border-card);
  width: 32px; height: 32px; border-radius: var(--radius-small); cursor: pointer; font-size: 14px; }
.matrix-header button:hover { background: #f5f5f0; }
.matrix-header .ym { font-size: 16px; font-weight: 600; min-width: 100px; text-align: center; }
.matrix-header select { padding: 4px 8px; border: 1px solid var(--border-card);
  border-radius: var(--radius-small); background: var(--bg-card); font-size: 12px; }
.matrix-header .month-return { margin-left: auto; font-size: 13px; }
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-week-head { font-size: 10px; color: var(--color-faint); text-align: center; padding: 4px 0; }
.cal-cell { aspect-ratio: 1; border-radius: var(--radius-small); background: #f7f7f0;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  padding: 2px; font-size: 10px; cursor: default; }
.cal-cell.empty { background: transparent; color: var(--color-faint); }
.cal-cell .d { font-weight: 600; font-size: 10px; line-height: 1.1; }
.cal-cell .pct { font-size: 9px; opacity: 0.9; line-height: 1.1; }
.cal-cell.up1 { background: rgba(192,57,43,0.10); color: var(--color-pos); }
.cal-cell.up2 { background: rgba(192,57,43,0.25); color: var(--color-pos); }
.cal-cell.up3 { background: rgba(192,57,43,0.45); color: #fff; }
.cal-cell.dn1 { background: rgba(46,139,87,0.10); color: var(--color-neg); }
.cal-cell.dn2 { background: rgba(46,139,87,0.25); color: var(--color-neg); }
.cal-cell.dn3 { background: rgba(46,139,87,0.45); color: #fff; }
.cal-cell.gold-mode { border: 2px solid var(--color-gold); }

/* Mobile */
@media (max-width: 640px) {
  .etf-card { grid-template-columns: 48px 1fr; }
  .etf-card .etf-meta { grid-column: 1 / 3; text-align: left; margin-top: 6px; }
  .mode-card { grid-template-columns: 1fr; }
  .mode-card .premium { text-align: left; }
}