/* ================================================================
   MetalsMarket.org — Custom Layout Override
   Ghost theme: headline | Design tokens: #4119ff accent
   ================================================================ */

:root {
  --mm-accent: #4119ff;
  --mm-text: #15171a;
  --mm-secondary: #6b7280;
  --mm-border: #e6e6e6;
  --mm-bg-light: #f6f6f6;

  /* S1 Today's Market Focus
     NOTE: Ghost theme sets html{font-size:62.5%} → 1rem = 10px
     All rem values here are calibrated to that 10px base. */
  --fc-radius: 12px;
  --fc-pad: 28px 32px;
  --fc-pad-sm: 20px 18px;
  --fc-title-size: clamp(2.2rem, 2.4vw, 2.6rem); /* 22–26px */
  --fc-summary-size: 1.5rem;                      /* 15px */
  --fc-point-size: 1.4rem;                        /* 14px */
  --fc-badge-bg: #f0edff;
  --fc-badge-color: #4119ff;
  --fc-status-pre: #f59e0b;
  --fc-status-trading: #16a34a;
  --fc-status-after: #6b7280;
  --fc-status-closed: #9ca3af;
  --fc-algo-bg: #fef9c3;
  --fc-algo-color: #92400e;
  --fc-macro-bg: #f8f8fb;
  --skel-color: #ebebeb;
  --skel-shine: #f5f5f5;
}

/* ── Typography global ─────────────────────────────────────── */
/* Chinese font stack — system fonts only, no CDN dependency:
   macOS/iOS: PingFang SC → Hiragino Sans GB (legacy)
   Windows:   Microsoft YaHei UI (Win8+) → Microsoft YaHei (Vista+)
   Android:   Noto Sans SC (built-in Android 5+)
   Linux:     WenQuanYi Micro Hei
   Removed:   Source Han Sans CN (Adobe local only, not web-safe) */
body {
  font-family:
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei UI",
    "Microsoft YaHei",
    "Noto Sans SC",
    "WenQuanYi Micro Hei",
    sans-serif !important;
  line-height: 1.75 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ghost heading font stack doesn't include Chinese — patch it
   so h1–h6 use the same Chinese glyphs as body text           */
h1, h2, h3, h4, h5, h6 {
  font-family:
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei UI",
    "Microsoft YaHei",
    "Noto Sans SC",
    "WenQuanYi Micro Hei",
    sans-serif !important;
}

/* ── Section heading — accent bar + label style ────────────── */
.gh-topic-name {
  display: inline-flex;
  align-items: center;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mm-secondary) !important;
  border-left: 3px solid var(--mm-accent);
  padding-left: 10px;
  margin-bottom: 28px !important;
  line-height: 1.2;
}

.gh-topic-name a {
  color: inherit !important;
  text-decoration: none;
}

.gh-topic-name a:hover {
  color: var(--mm-accent) !important;
}

.gh-topic-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--mm-border);
  margin-bottom: 0 !important;
}

.gh-topic-header .gh-topic-name {
  margin-bottom: 0 !important;
}

/* ── Section dividers ──────────────────────────────────────── */
.gh-topic + .gh-topic {
  border-top: 1px solid var(--mm-border);
  margin-top: 60px;
  padding-top: 52px;
}

.gh-topic-list {
  border-top: 1px solid var(--mm-border);
  margin-top: 60px;
  padding-top: 52px;
}

/* ── Card hover ────────────────────────────────────────────── */
.gh-card-link:hover .gh-card-title {
  color: var(--mm-accent) !important;
}

.gh-card-title {
  transition: color 0.15s;
}

.gh-card-footer {
  margin-top: 10px;
  gap: 8px;
}

.gh-card-date {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ── Show more / topic link ────────────────────────────────── */
.gh-topic-link {
  color: var(--mm-accent) !important;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gh-topic-link:hover { opacity: 0.75; }

.gh-topic-footer {
  padding-top: 24px;
  border-top: 1px solid var(--mm-border);
  margin-top: 32px;
}

/* ── Minimal list — bordered rows ──────────────────────────── */
.gh-topic-minimal .gh-topic-content {
  border-top: 1px solid var(--mm-border);
}

.gh-topic-minimal .gh-card {
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--mm-border) !important;
  max-width: 100% !important;
}

.gh-topic-minimal .gh-card:last-child {
  border-bottom: none !important;
}

.gh-topic-minimal .gh-card-title {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  color: var(--mm-text) !important;
}

.gh-topic-minimal .gh-card-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}

.gh-topic-minimal .gh-card-footer {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Featured large card ───────────────────────────────────── */
.gh-topic-grid .gh-card.large .gh-card-image::before {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0.08) 100%
  ) !important;
}

/* ── Footer ────────────────────────────────────────────────── */
.gh-foot {
  background: #4119ff !important;
  margin-top: 0 !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.gh-foot,
.gh-foot a {
  color: rgba(255, 255, 255, 0.6) !important;
}

.gh-foot a:hover { color: #fff !important; }

.gh-foot-menu {
  display: block !important;
  padding-bottom: 16px !important;
  margin-bottom: 8px !important;
}

.gh-foot-inner {
  font-size: 1.3rem !important;
}

.gh-copyright {
  margin-top: 20px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 1.2rem !important;
  letter-spacing: -0.005em !important;
}

/* ── Header nav ────────────────────────────────────────────── */
.is-head-brand .gh-head-members {
  display: flex;
  align-items: center;
  gap: 8px;
}

.is-head-brand .gh-head-link {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 1.35rem;
}

.is-head-brand .gh-head-link:hover { color: #fff !important; }

.is-head-brand .gh-head-btn.gh-primary-btn {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-size: 1.3rem !important;
  padding: 0 16px !important;
  height: 36px !important;
  line-height: 36px !important;
}

.is-head-brand .gh-head-btn.gh-primary-btn:hover {
  background: rgba(255, 255, 255, 0.24) !important;
}

/* ── Main content area ─────────────────────────────────────── */
.gh-main {
  padding-top: 52px !important;
}

.gh-outer .gh-inner {
  padding-left: max(4vw, 24px);
  padding-right: max(4vw, 24px);
}

/* ── Article styles ────────────────────────────────────────── */
article.gh-article h2 {
  text-align: left !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  border-left: 3px solid #4119ff;
  padding-left: 10px;
  margin-top: 56px !important;
  margin-bottom: 20px !important;
}

article.gh-article h2:first-of-type {
  margin-top: 8px !important;
}

article.gh-article .gh-canvas,
article.gh-article .kg-width-full.kg-content-wide {
  --content-width: min(1060px, 100% - var(--gap, 3.6rem) * 2);
}


/* ════════════════════════════════════════════════════════════
   快讯模板 (custom-flash.hbs)
   ════════════════════════════════════════════════════════════ */
.is-flash-news .gh-main {
  background: var(--mm-bg-light);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 24px 96px;
  min-height: 60vh;
}

.gh-flash-wrap {
  width: 100%;
  max-width: 760px;
  padding: 0;
}

.gh-flash-card {
  background: #fff;
  border-left: 4px solid var(--mm-accent);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  padding: 40px 48px 36px;
}

.gh-flash-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.gh-flash-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--mm-accent);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 2px;
  line-height: 1.6;
}

.gh-flash-tag {
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mm-secondary);
  text-decoration: none;
}

.gh-flash-tag:hover { color: var(--mm-accent); }

.gh-flash-time {
  font-size: 1.3rem;
  color: var(--mm-secondary);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.gh-flash-title {
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.022em;
  margin: 0 0 24px;
  color: var(--mm-text);
}

.gh-flash-content {
  font-size: 1.7rem;
  line-height: 1.8;
  color: var(--mm-text);
  border-top: 1px solid var(--mm-bg-light);
  padding-top: 24px;
}

.gh-flash-content p:first-child { margin-top: 0; }
.gh-flash-content p:last-child  { margin-bottom: 0; }

.gh-flash-footer {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--mm-bg-light);
}

.gh-flash-more {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--mm-accent);
  text-decoration: none;
}

.gh-flash-more:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .gh-flash-card { padding: 24px 20px 20px; }
  .gh-flash-title { font-size: 2rem; }
  .gh-flash-content { font-size: 1.6rem; }
  .gh-flash-time { margin-left: 0; }
}


/* ════════════════════════════════════════════════════════════
   早班车晨报模板 (custom-morning-express.hbs)
   ════════════════════════════════════════════════════════════ */
.is-morning-express .gh-main {
  background: var(--mm-bg-light);
  padding: 40px 24px 80px;
  min-height: 60vh;
}

.gh-morning-wrap {
  max-width: 860px;
  width: 100%;
}

.gh-morning-masthead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--mm-accent);
  margin-bottom: 0;
}

.gh-morning-kicker {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mm-accent);
  margin-bottom: 6px;
}

.gh-morning-title {
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
  color: var(--mm-text);
}

.gh-morning-dateline time {
  display: block;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--mm-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.gh-morning-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid var(--mm-bg-light);
  font-size: 1.2rem;
  color: var(--mm-secondary);
  margin-bottom: 24px;
}

.gh-morning-stats:empty { display: none; }

.gh-morning-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.gh-morning-stat + .gh-morning-stat::before {
  content: '·';
  margin-right: 20px;
  opacity: 0.4;
}

.gh-morning-stat strong {
  color: var(--mm-text);
  font-weight: 700;
}

.gh-morning-content {
  background: #fff;
  border-radius: 0 0 4px 4px;
  padding: 32px 44px 40px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}

.gh-morning-hidden { display: none !important; }

.gh-morning-content h2 {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mm-accent);
  margin: 36px 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mm-bg-light);
}

.gh-morning-content h2:first-child { margin-top: 0; }

.gh-morning-content h3 {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin: 20px 0 5px;
  color: var(--mm-text);
  padding-top: 20px;
  border-top: 1px solid var(--mm-bg-light);
}

.gh-morning-content h2 + h3,
.gh-morning-content h3:first-of-type {
  padding-top: 0;
  border-top: none;
  margin-top: 0;
}

p.gh-morning-source {
  font-size: 1.15rem;
  color: var(--mm-secondary);
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}

p.gh-morning-summary {
  font-size: 1.45rem;
  line-height: 1.65;
  color: var(--mm-secondary);
  margin: 0 0 8px;
}

p.gh-morning-summary strong {
  font-weight: 500;
  color: var(--mm-secondary);
}

a.gh-morning-link {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--mm-accent);
  text-decoration: none;
}

a.gh-morning-link::after { content: ' →'; }
a.gh-morning-link:hover  { text-decoration: underline; }

/* LME price panel inside morning express */
.gh-morning-prices {
  padding: 16px 0 20px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--mm-bg-light);
}

.gh-morning-prices-header {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mm-secondary);
  margin-bottom: 12px;
}

.gh-morning-prices-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.gh-morning-price-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 6px;
  border-radius: 4px;
  background: var(--mm-bg-light);
  border-top: 2px solid transparent;
}

.gh-price-up   { border-top-color: #16a34a; }
.gh-price-down { border-top-color: #dc2626; }
.gh-price-flat { border-top-color: var(--mm-secondary); }

.gh-morning-price-metal {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mm-secondary);
}

.gh-morning-price-val {
  font-size: 1.45rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mm-text);
  margin: 3px 0 2px;
  line-height: 1;
}

.gh-morning-price-chg {
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.gh-price-up   .gh-morning-price-chg { color: #16a34a; }
.gh-price-down .gh-morning-price-chg { color: #dc2626; }
.gh-price-flat .gh-morning-price-chg { color: var(--mm-secondary); }

@media (max-width: 767px) {
  .gh-morning-masthead {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .gh-morning-content { padding: 24px 20px 28px; }
  .gh-morning-title   { font-size: 2.8rem; }

  .gh-morning-dateline time { text-align: left; }

  .gh-morning-prices-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ════════════════════════════════════════════════════════════
   首页重构 (home.hbs) — S1 ~ S7 + 订阅区
   ════════════════════════════════════════════════════════════ */

/* ── Shared utilities ──────────────────────────────────────── */
.mm-hidden { display: none !important; }

.mm-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--mm-accent);
}

.mm-section-hd-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mm-section-title {
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mm-text);
  margin: 0;
}

.mm-link-more {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--mm-accent);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.mm-link-more:hover { opacity: 0.75; }

.mm-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #dc2626;
  letter-spacing: 0.04em;
}

.mm-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dc2626;
  animation: mm-pulse 1.6s ease-in-out infinite;
}

@keyframes mm-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(0.75); }
}

/* Shared price card */
.mm-price-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  border-radius: 4px;
  background: var(--mm-bg-light);
  border-top: 2px solid transparent;
}
/* 国际惯例：涨绿跌红 */
.mm-price-card.mm-price-up   { border-top-color: #16a34a; }
.mm-price-card.mm-price-down { border-top-color: #dc2626; }
.mm-price-card.mm-price-flat { border-top-color: var(--mm-secondary); }
/* 国内惯例：涨红跌绿（SHFE） */
.mm-price-card--cn.mm-price-up   { border-top-color: #dc2626; }
.mm-price-card--cn.mm-price-down { border-top-color: #16a34a; }

.mm-price-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mm-secondary);
}
.mm-price-val {
  font-size: 1.55rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mm-text);
  margin: 3px 0 2px;
  line-height: 1;
}
.mm-price-chg {
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* 国际惯例 */
.mm-price-up   .mm-price-chg { color: #16a34a; }
.mm-price-down .mm-price-chg { color: #dc2626; }
.mm-price-flat .mm-price-chg { color: var(--mm-secondary); }
/* 国内惯例覆盖（优先级更高） */
.mm-price-card--cn.mm-price-up   .mm-price-chg { color: #dc2626; }
.mm-price-card--cn.mm-price-down .mm-price-chg { color: #16a34a; }

/* Skeleton loader */
.mm-price-skel {
  height: 76px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    var(--mm-bg-light) 25%,
    rgba(0,0,0,0.04) 50%,
    var(--mm-bg-light) 75%);
  background-size: 200% 100%;
  animation: mm-shimmer 1.4s ease-in-out infinite;
}

@keyframes mm-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ── S1 · Hero ─────────────────────────────────────────────── */
.mm-s1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  min-height: calc(90vh - 72px);
  padding: 48px 0 56px;
}

.mm-s1-kicker {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mm-accent);
  margin: 0 0 12px;
}

.mm-s1-headline {
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--mm-text);
  margin: 0 0 16px;
}

.mm-s1-summary {
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--mm-secondary);
  margin: 0 0 28px;
  min-height: 2.4em;
}

.mm-s1-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.mm-btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background: var(--mm-accent);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.1s;
}
.mm-btn-primary:hover  { opacity: 0.88; }
.mm-btn-primary:active { transform: scale(0.98); }

.mm-btn-ghost {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--mm-text);
  text-decoration: none;
  transition: color 0.15s;
}
.mm-btn-ghost:hover { color: var(--mm-accent); }

/* LME card (S1 right) */
.mm-lme-card {
  background: #fff;
  border: 1px solid var(--mm-border);
  border-top: 3px solid var(--mm-accent);
  border-radius: 0 0 4px 4px;
  padding: 20px 24px 24px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

.mm-lme-card-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.mm-lme-card-label {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mm-secondary);
}

.mm-lme-card-date {
  font-size: 1.05rem;
  color: var(--mm-secondary);
  font-variant-numeric: tabular-nums;
}

.mm-lme-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}


/* ── S2 · Market Data ──────────────────────────────────────── */
.mm-s2 {
  background: var(--mm-bg-light);
  border-radius: 4px;
  padding: 24px 28px 20px;
  margin-bottom: 56px;
}

.mm-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mm-tab {
  padding: 8px 18px 10px;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--mm-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.mm-tab:hover     { color: var(--mm-text); }
.mm-tab--active   {
  color: var(--mm-accent);
  border-bottom-color: var(--mm-accent);
}

.mm-tab-panel { /* default visible */ }

.mm-market-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.mm-s2-footer {
  margin-top: 16px;
  text-align: right;
}


/* ── S3 · Flash Timeline ───────────────────────────────────── */
.mm-s3 {
  margin-bottom: 56px;
}

.mm-timeline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--mm-border);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.mm-tl-item {
  display: grid;
  grid-template-columns: 72px 20px 1fr;
  align-items: start;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--mm-border);
  border-right: 1px solid var(--mm-border);
}

.mm-tl-item:nth-child(even) { border-right: none; padding-left: 12px; }
.mm-tl-item:nth-child(odd)  { padding-left: 16px; }
.mm-tl-item:nth-last-child(-n+2) { border-bottom: none; }

.mm-tl-time {
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  color: var(--mm-secondary);
  white-space: nowrap;
  padding-top: 2px;
}

.mm-tl-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mm-accent);
  margin: 5px 0 0 7px;
  flex-shrink: 0;
}

.mm-tl-title {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--mm-text);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s;
}
.mm-tl-title:hover { color: var(--mm-accent); }


/* ── S4 · Focus Layout ─────────────────────────────────────── */
.mm-s4 {
  margin-bottom: 56px;
}

.mm-focus-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 24px;
}

.mm-focus-main a,
.mm-focus-side a {
  text-decoration: none;
  display: block;
}

.mm-focus-side ~ .mm-focus-side {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--mm-border);
}

.mm-focus-img {
  margin: 0 0 16px;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--mm-bg-light);
}
.mm-focus-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.mm-focus-main a:hover .mm-focus-img img { transform: scale(1.02); }

.mm-focus-side-img {
  float: right;
  margin: 0 0 8px 12px;
  width: 100px;
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--mm-bg-light);
}
.mm-focus-side-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mm-focus-tag {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mm-accent);
  margin-bottom: 6px;
}

.mm-focus-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--mm-text);
  margin: 0 0 10px;
  transition: color 0.15s;
}
.mm-focus-main a:hover .mm-focus-title { color: var(--mm-accent); }

.mm-focus-excerpt {
  font-size: 1.45rem;
  line-height: 1.65;
  color: var(--mm-secondary);
  margin: 0 0 12px;
}

.mm-focus-date {
  font-size: 1.15rem;
  color: var(--mm-secondary);
  font-variant-numeric: tabular-nums;
}

.mm-focus-side-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--mm-text);
  margin: 0 0 6px;
  transition: color 0.15s;
}
.mm-focus-side a:hover .mm-focus-side-title { color: var(--mm-accent); }

.mm-focus-side-body { overflow: hidden; }


/* ── S5 · Content Columns ──────────────────────────────────── */
.mm-s5 {
  margin-bottom: 48px;
}

.mm-col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 32px;
}

.mm-col-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--mm-border);
}

.mm-col-title {
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}
.mm-col-title a {
  color: var(--mm-text);
  text-decoration: none;
}
.mm-col-title a:hover { color: var(--mm-accent); }

.mm-col--morning .mm-col-hd   { border-bottom-color: var(--mm-accent); }
.mm-col--morning .mm-col-title a { color: var(--mm-accent); }

.mm-col-more {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--mm-secondary);
  text-decoration: none;
}
.mm-col-more:hover { color: var(--mm-accent); }

.mm-col-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--mm-border);
}
.mm-col-item:last-child { border-bottom: none; }

.mm-col-item a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
}

.mm-col-item-title {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--mm-text);
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s;
}
.mm-col-item a:hover .mm-col-item-title { color: var(--mm-accent); }

.mm-col-item-date {
  font-size: 1.1rem;
  color: var(--mm-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}


/* ── S6 · Tool Cards ───────────────────────────────────────── */
.mm-s6 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 56px;
}

.mm-tool-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--mm-bg-light);
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}
.mm-tool-card:hover {
  background: #fff;
  border-color: var(--mm-accent);
}

.mm-tool-icon {
  color: var(--mm-accent);
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mm-tool-body { flex: 1; }

.mm-tool-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--mm-text);
  margin: 0 0 4px;
}

.mm-tool-desc {
  font-size: 1.25rem;
  color: var(--mm-secondary);
  margin: 0;
  line-height: 1.5;
}

.mm-tool-arrow {
  font-size: 1.6rem;
  color: var(--mm-accent);
  flex-shrink: 0;
  transition: transform 0.15s;
}
.mm-tool-card:hover .mm-tool-arrow { transform: translateX(4px); }


/* ── S7 · Trust Signals ────────────────────────────────────── */
.mm-s7 {
  padding: 36px 40px;
  background: var(--mm-bg-light);
  border-radius: 4px;
  margin-bottom: 0;
}

.mm-trust-title {
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mm-secondary);
  margin: 0 0 20px;
}

.mm-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.mm-trust-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mm-trust-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mm-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mm-trust-value {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--mm-text);
  line-height: 1.5;
}


/* ── S8 · Subscribe (default.hbs) ─────────────────────────── */
.gh-subscribe.gh-outer {
  background: var(--mm-accent);
  padding: 48px max(4vw, 24px);
  margin-top: 48px;
  margin-bottom: 0 !important;
}

.gh-subscribe .gh-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.mm-subscribe-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.mm-subscribe-content { flex: 1; }

.mm-subscribe-title {
  font-size: clamp(2rem, 2.5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fff !important;
  margin: 0 0 8px;
}

.mm-subscribe-sub {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 20px;
}

.mm-subscribe-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mm-subscribe-benefits li {
  font-size: 1.4rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
  padding-left: 20px;
  position: relative;
}
.mm-subscribe-benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #fff;
  font-weight: 700;
}

.mm-subscribe-benefits strong {
  color: #fff;
  font-weight: 700;
}

.mm-subscribe-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.gh-subscribe-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff !important;
  color: var(--mm-accent) !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  padding: 0 28px !important;
  height: 48px !important;
  font-size: 1.4rem !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  border: none !important;
  white-space: nowrap;
}
.gh-subscribe-btn:hover {
  background: rgba(255,255,255,0.92) !important;
}

.mm-subscribe-note {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  text-align: center;
}


/* ================================================================
   S1 Today's Market Focus Card  (.mm-focus-card)
   ================================================================ */

/* ── Main container ─────────────────────────────────────────── */
.mm-focus-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--mm-border);
  border-radius: var(--fc-radius);
  padding: var(--fc-pad);
  margin-bottom: 40px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  min-height: 160px;
  overflow: hidden;
  container-type: inline-size;
}

.mm-focus-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--mm-accent);
  border-radius: var(--fc-radius) var(--fc-radius) 0 0;
}

/* ── Skeleton screen ────────────────────────────────────────── */
@keyframes mm-skel-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.mm-focus-skel-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mm-focus-skel-hd,
.mm-focus-skel-title,
.mm-focus-skel-line {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--skel-color) 25%, var(--skel-shine) 50%, var(--skel-color) 75%);
  background-size: 800px 100%;
  animation: mm-skel-shimmer 1.4s ease-in-out infinite;
}

.mm-focus-skel-hd    { height: 16px; width: 40%; }
.mm-focus-skel-title { height: 28px; width: 85%; }
.mm-focus-skel-line  { height: 14px; width: 100%; }
.mm-focus-skel-line--short { width: 70%; }

/* ── Header row ─────────────────────────────────────────────── */
.mm-focus-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.mm-focus-card__header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mm-focus-card__header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Module label pill */
.mm-focus-label {
  display: inline-block;
  font-size: 1.1rem; /* 11px */
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fc-badge-color);
  background: var(--fc-badge-bg);
  padding: 3px 9px;
  border-radius: 4px;
  line-height: 1.5;
}

/* Market status badge */
.mm-focus-status {
  font-size: 1.2rem; /* 12px */
  font-weight: 600;
  color: var(--fc-status-pre);
}
.mm-focus-status[data-status="trading"] { color: var(--fc-status-trading); }
.mm-focus-status[data-status="after"]   { color: var(--fc-status-after); }
.mm-focus-status[data-status="closed"]  { color: var(--fc-status-closed); }
.mm-focus-status[data-status="pre"]     { color: var(--fc-status-pre); }

/* Timestamp */
.mm-focus-time {
  font-size: 1.2rem; /* 12px */
  color: var(--mm-secondary);
}

/* Algo badge */
.mm-focus-algo-badge {
  font-size: 1.1rem; /* 11px */
  font-weight: 600;
  color: var(--fc-algo-color);
  background: var(--fc-algo-bg);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

/* ── Title ──────────────────────────────────────────────────── */
.mm-focus-card__title {
  font-size: var(--fc-title-size);
  font-weight: 700;
  line-height: 1.38;
  color: var(--mm-text);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

/* ── Summary ────────────────────────────────────────────────── */
.mm-focus-card__summary {
  font-size: var(--fc-summary-size);
  line-height: 1.7;
  color: #374151;
  margin: 0 0 16px;
}

/* ── Key points list ────────────────────────────────────────── */
.mm-focus-card__points {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mm-focus-card__points li {
  font-size: var(--fc-point-size);
  line-height: 1.6;
  color: #374151;
  padding-left: 18px;
  position: relative;
}

.mm-focus-card__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mm-accent);
  opacity: 0.7;
}

/* ── Action buttons ─────────────────────────────────────────── */
.mm-focus-card__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.mm-focus-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 1.3rem; /* 13px */
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: background .15s, color .15s, box-shadow .15s;
  cursor: pointer;
  border: none;
  line-height: 1.4;
}

.mm-focus-action-btn--primary {
  background: var(--mm-accent);
  color: #fff;
}
.mm-focus-action-btn--primary:hover {
  background: #3310d8;
  color: #fff;
}

.mm-focus-action-btn--secondary {
  background: var(--fc-badge-bg);
  color: var(--fc-badge-color);
}
.mm-focus-action-btn--secondary:hover {
  background: #e4dfff;
  color: var(--mm-accent);
}

/* ── Macro data strip ───────────────────────────────────────── */
.mm-focus-card__macro {
  display: flex;
  align-items: center;
  gap: 4px 20px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--mm-border);
  font-size: 1.3rem; /* 13px */
  color: var(--mm-secondary);
  font-variant-numeric: tabular-nums;
}

.mm-focus-macro-label {
  font-size: 1.1rem; /* 11px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
  margin-right: 4px;
}

.mm-focus-macro-item {
  white-space: nowrap;
}

.mm-focus-macro-item strong {
  font-weight: 600;
  color: var(--mm-text);
  margin-left: 3px;
}

/* ── Empty / error state ────────────────────────────────────── */
.mm-focus-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  font-size: 1.4rem; /* 14px */
  color: var(--mm-secondary);
  font-style: italic;
}

/* ── Loading state modifier ─────────────────────────────────── */
.mm-focus-card--loading .mm-focus-body,
.mm-focus-card--loading .mm-focus-empty {
  display: none !important;
}


/* Missing price change: single dash, muted */
.mm-price-chg--na {
  color: var(--mm-secondary);
  font-weight: 400;
  letter-spacing: 0;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .mm-market-grid { grid-template-columns: repeat(3, 1fr); }
  .mm-trust-grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .mm-s1          { grid-template-columns: 1fr; min-height: auto; padding: 32px 0 40px; gap: 32px; }
  .mm-s1-headline { font-size: 2.8rem; }
  .mm-focus-layout { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  /* S2 */
  .mm-s2 { padding: 16px 16px 14px; }
  .mm-market-grid  { grid-template-columns: repeat(3, 1fr); }
  .mm-lme-card-grid { grid-template-columns: repeat(3, 1fr); }

  /* S3 */
  .mm-timeline { grid-template-columns: 1fr; }
  .mm-tl-item  { border-right: none !important; padding-left: 12px !important; }
  .mm-tl-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--mm-border); }
  .mm-tl-item:last-child { border-bottom: none; }

  /* S1 focus card */
  .mm-focus-card { padding: var(--fc-pad-sm); }
  .mm-focus-card__macro { gap: 4px 14px; }

  /* S4 */
  .mm-focus-title { font-size: 1.8rem; }

  /* S5 */
  .mm-col-grid { grid-template-columns: 1fr; gap: 32px 0; }

  /* S6 */
  .mm-s6 { grid-template-columns: 1fr; }

  /* S7 */
  .mm-s7       { padding: 24px 20px; }
  .mm-trust-grid { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* S8 subscribe */
  .mm-subscribe-wrap { flex-direction: column; align-items: flex-start; gap: 24px; }
  .mm-subscribe-action { align-items: flex-start; }
}

@media (max-width: 480px) {
  .mm-market-grid  { grid-template-columns: repeat(2, 1fr); }
  .mm-lme-card-grid { grid-template-columns: repeat(2, 1fr); }
  .mm-trust-grid   { grid-template-columns: 1fr; }

  /* S1 focus card — narrow mobile */
  .mm-focus-card { border-radius: 8px; margin-bottom: 24px; }
  .mm-focus-card__header { flex-direction: column; align-items: flex-start; gap: 6px; }
  .mm-focus-card__header-right { margin-top: 0; }
  .mm-focus-card__actions { gap: 8px; }
  .mm-focus-action-btn { font-size: 1.2rem; padding: 6px 13px; } /* 12px */
  .mm-focus-card__macro { gap: 4px 12px; font-size: 1.2rem; }  /* 12px */
}