/* roadmap.html — UBMF 前瞻页专属样式 */

/* hero warning */
.hero-warn { margin: 18px 0 0; color: var(--amber); font-size: 13.5px; background: var(--amber-fill); border: 1px solid #57431a; border-radius: 10px; padding: 10px 16px; display: inline-block; }
.hero-warn b { color: var(--amber); }
.hero-warn + .hero-cta { margin-top: 22px; }

/* market cards */
.market-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px; }
@media (max-width: 1100px) { .market-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .market-grid { grid-template-columns: 1fr; } }
.mk { display: flex; flex-direction: column; }
.mk-num { font-size: 27px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 4px; }
.mk-num small { font-size: 14px; font-weight: 600; color: var(--muted); }
.mk-title { color: var(--text) !important; font-weight: 700; font-size: 14px !important; margin-bottom: 8px; }
.mk .src { margin-top: auto; padding-top: 12px; color: var(--faint); font-size: 12px; font-family: var(--mono); }
.mk .src:hover { color: var(--sky); }

/* trends */
.trends { margin-top: 44px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px 30px; }
.trend-list { list-style: none; counter-reset: tr; margin-top: 12px; }
.trend-list li { counter-increment: tr; position: relative; padding: 12px 0 12px 52px; color: var(--text); font-size: 14.5px; border-bottom: 1px solid var(--line); line-height: 1.7; }
.trend-list li:last-child { border-bottom: none; }
.trend-list li::before { content: counter(tr, decimal-leading-zero); position: absolute; left: 0; top: 14px; font-family: var(--mono); font-weight: 800; color: var(--sky); font-size: 15px; }
.trend-list b { color: var(--text); }
.trend-list .src { color: var(--faint); font-family: var(--mono); font-size: 12px; }
.trend-list .src:hover { color: var(--sky); }

/* UBMF architecture diagram */
.ubmf-arch { margin: 34px 0 26px; display: flex; flex-direction: column; gap: 12px; }
.ua-row { display: grid; grid-template-columns: 150px 1fr; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 16px 18px; border-left: none; transition: transform .15s; }
.ua-row:hover { transform: translateX(6px); border-color: var(--ac); background: var(--af); }
@media (max-width: 780px) { .ua-row { grid-template-columns: 1fr; } }
.ua-tag { font-weight: 800; font-size: 14.5px; color: var(--ac); display: flex; align-items: center; }
.ua-cells { display: flex; flex-wrap: wrap; gap: 9px; }
.uc { font-size: 13px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 13px; }
.uc.hi { color: var(--ac); border-color: var(--ac); font-weight: 600; }
.ua-hw { text-align: center; color: var(--slate); font-size: 13px; font-weight: 600; border: 1px dashed var(--slate); border-radius: 11px; padding: 13px; margin-top: 2px; }

/* component cards */
.comp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 26px 0; }
@media (max-width: 1000px) { .comp-grid { grid-template-columns: 1fr; } }
.comp-tag { font-family: var(--mono); font-weight: 800; font-size: 13px; display: inline-block; padding: 3px 11px; border-radius: 7px; border: 1px solid; margin-bottom: 10px; }
.comp-tag.t-sky { background: var(--sky-fill); border-color: #1E4A68; }
.comp-tag.t-teal { background: var(--teal-fill); border-color: #1B4F49; }
.comp-tag.t-violet { background: var(--violet-fill); border-color: #4a3f78; }
.comp-tag.t-amber { background: var(--amber-fill); border-color: #57431a; }
.comp code { color: #C9D7EE; background: var(--code-bg); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; font-size: 12px; }

/* phases */
.phase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
@media (max-width: 1000px) { .phase-grid { grid-template-columns: 1fr; } }
.phase { border-top: 3px solid var(--pc); display: flex; flex-direction: column; }
.ph-tag { font-family: var(--mono); font-weight: 800; font-size: 12.5px; letter-spacing: 2px; color: var(--pc); }
.ph-time { font-family: var(--mono); color: var(--faint); font-size: 12.5px; margin: 4px 0 10px; }
.phase h3 { color: var(--pc); }
.ms { list-style: none; margin: 12px 0 14px; flex: 1; }
.ms li { position: relative; padding: 6px 0 6px 20px; color: var(--text); font-size: 13.5px; line-height: 1.55; }
.ms li::before { content: "▸"; position: absolute; left: 0; color: var(--pc); }
.ph-exit { background: var(--bg); border: 1px dashed var(--pc); border-radius: 9px; padding: 10px 13px; color: var(--muted) !important; font-size: 12.5px; }
.ph-exit b { color: var(--pc); }

/* risks */
.risk-wrap { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .risk-wrap { grid-template-columns: 1fr; } }
.risk-item { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.risk-item b { display: inline-block; margin-right: 8px; }

/* sources */
.src-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 26px 0 18px; }
@media (max-width: 860px) { .src-grid { grid-template-columns: 1fr; } }
.src-grid a { color: var(--muted); font-size: 13.5px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 11px 15px; transition: .15s; }
.src-grid a:hover { color: var(--sky); border-color: #1E4A68; }

/* nav active state for CTA link */
.nav-cta.is-active { background: var(--amber); border-color: var(--amber); color: #0A0F1E !important; }

/* index.html roadmap banner */
.fwd { display: flex; justify-content: space-between; gap: 30px; border-color: #57431a; background: linear-gradient(120deg, var(--panel) 55%, var(--amber-fill)); }
.fwd:hover { border-color: var(--amber); }
.fwd p { max-width: 760px; }
@media (max-width: 780px) { .fwd { flex-direction: column; align-items: flex-start; } }