/*
 * AIDEPTUS.com - Changelog / 产品路线图样式
 * 版本: v1.0 | 日期: 2026-05-10 | 设计者: AIDEPTUS-错错
 * 用途: Changelog页面独有样式——Hero、Timeline、Roadmap
 */

/* === Hero === */
.hero{min-height:40vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 24px 40px;position:relative;z-index:2}
.hero h1{font-family:var(--px);font-size:min(5vw,40px);font-weight:700;line-height:1.4;letter-spacing:2px}
.hero h1 .pk{color:var(--pink);text-shadow:0 0 10px var(--pink)}
.hero p{font-size:18px;color:var(--dim);line-height:1.8;max-width:520px;margin:16px auto 0}

/* === Timeline === */
.timeline{padding:40px 24px 100px;position:relative;z-index:2;max-width:800px;margin:0 auto}
.timeline::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:100%;background:linear-gradient(180deg,var(--pink),var(--blue),var(--bdr))}
.tl-item{position:relative;padding:0 0 48px;display:flex;gap:32px}
.tl-item:nth-child(odd){flex-direction:row-reverse;text-align:right}
.tl-dot{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:var(--pink);border:3px solid var(--bg);box-shadow:0 0 12px var(--pink);z-index:2}
.tl-item.future .tl-dot{background:var(--blue);box-shadow:0 0 12px var(--blue)}
.tl-content{width:calc(50% - 32px)}
.tl-item:nth-child(odd) .tl-content{margin-right:auto}
.tl-item:nth-child(even) .tl-content{margin-left:auto}
.tl-card{padding:28px 24px;border:1px solid var(--bdr);background:var(--bg-a);border-radius:12px;transition:all .3s}
.tl-card:hover{border-color:rgba(255,42,109,0.3);transform:translateY(-2px)}
.tl-date{font-family:var(--px);font-size:11px;color:var(--blue);letter-spacing:2px;margin-bottom:8px}
.tl-card h3{font-size:18px;font-weight:700;margin-bottom:8px;letter-spacing:0.5px}
.tl-card p{font-size:14px;color:var(--dim);line-height:1.7;margin-bottom:12px}
.tl-tags{display:flex;gap:6px;flex-wrap:wrap}
.tl-item:nth-child(odd) .tl-tags{justify-content:flex-end}
.tl-tag{font-family:var(--px);font-size:9px;padding:3px 8px;border-radius:4px;letter-spacing:1px;font-weight:700}
.tl-tag-video{background:rgba(255,42,109,0.15);color:var(--pink)}
.tl-tag-image{background:rgba(5,217,232,0.15);color:var(--blue)}
.tl-tag-lab{background:rgba(123,45,142,0.15);color:var(--purple)}
.tl-tag-api{background:rgba(255,190,11,0.15);color:var(--yellow)}
.tl-tag-platform{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.5)}
.tl-item.future .tl-card{border-style:dashed;opacity:0.7}
.tl-item.future .tl-card h3{color:var(--dim)}
.tl-item.future:hover .tl-card{opacity:1}

/* === Roadmap === */
.roadmap{padding:40px 24px 80px;position:relative;z-index:2;max-width:960px;margin:0 auto}
.rm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rm-card{padding:28px 24px;border:1px solid var(--bdr);background:var(--bg-a);border-radius:12px;transition:all .3s}
.rm-card:hover{border-color:rgba(5,217,232,0.3);transform:translateY(-3px)}
.rm-phase{font-family:var(--px);font-size:10px;letter-spacing:2px;margin-bottom:12px;padding:4px 10px;border-radius:4px;display:inline-block}
.rm-phase-now{background:rgba(255,42,109,0.15);color:var(--pink)}
.rm-phase-next{background:rgba(5,217,232,0.15);color:var(--blue)}
.rm-phase-later{background:rgba(255,255,255,0.06);color:var(--dim)}
.rm-card h4{font-size:16px;font-weight:700;margin-bottom:10px;letter-spacing:0.5px}
.rm-card ul{list-style:none;padding:0}
.rm-card ul li{font-size:13px;color:var(--dim);padding:4px 0 4px 16px;position:relative;line-height:1.5}
.rm-card ul li::before{content:'▸';position:absolute;left:0;color:var(--pink)}
.rm-card.rm-now ul li::before{color:var(--blue)}

/* === 移动端适配 === */
@media(max-width:768px){
  .hero h1{font-size:24px}
  .timeline::before{left:20px}
  .tl-item,.tl-item:nth-child(odd){flex-direction:column;text-align:left}
  .tl-dot{left:20px}
  .tl-content{width:100%;margin-left:48px!important;margin-right:0!important}
  .tl-item:nth-child(odd) .tl-tags{justify-content:flex-start}
  .rm-grid{grid-template-columns:1fr}
  header{padding:0 20px}
  nav{gap:16px}
  nav a{font-size:10px;letter-spacing:2px}
}