/* ============================================================

   brand.css · 品牌体验系统

   品牌性格：真实 · 耐心 · 里程

   ============================================================ */



/* 里程数据横幅（品牌记忆点1） */

.mileage-banner {

  display: flex; flex-wrap: wrap; gap: var(--space-6);

  padding: var(--rhythm-normal) var(--rhythm-loose);

  background: linear-gradient(135deg, var(--color-primary-500), var(--color-accent-500));

  color: #fff;

  border-radius: var(--radius-lg);

  margin: var(--rhythm-normal) 0 var(--rhythm-loose);

  font-size: var(--text-sm);

  font-weight: var(--font-medium);

}

.mileage-banner > div { display: flex; flex-direction: column; }

.mileage-banner .mileage-value {

  font-size: var(--text-xl);

  font-weight: var(--font-bold);

  line-height: 1;

  margin-bottom: 4px;

}

.mileage-banner .mileage-label { opacity: 0.85; }



/* 里程里程碑模块（品牌记忆点2） */

.mileage-milestone {

  margin: var(--rhythm-loose) 0;

  border-left: 4px solid var(--color-accent-500);

  padding-left: var(--rhythm-normal);

}

.mileage-milestone h4 {

  margin-top: 0;

  margin-bottom: var(--space-2);

  color: var(--color-accent-700);

}

.mileage-milestone p:last-child { margin-bottom: 0; }



/* 品牌语气：空状态 */

.brand-empty {

  padding: var(--rhythm-loose);

  text-align: center;

  color: var(--color-text-secondary);

  background: var(--color-surface);

  border-radius: var(--radius-md);

  font-style: italic;

}



/* 品牌语气：错误状态 */

.brand-error {

  padding: var(--rhythm-normal);

  background: color-mix(in srgb, var(--color-warning) 20%, transparent);

  border-left: 4px solid var(--color-warning);

  border-radius: var(--radius-md);

}



/* 作者签名区（品牌化语气） */

.author-signature .author-bio { font-style: italic; }



/* 探索钩子光点装饰 */

.exploration-hook { position: relative; }

.exploration-hook::after {

  content: "";

  position: absolute;

  top: 12px; right: 12px;

  width: 8px; height: 8px;

  border-radius: 50%;

  background: var(--color-accent-500);

  box-shadow: 0 0 8px var(--color-accent-400);

  animation: lightPulse 3s infinite ease-in-out;

}



/* 404 品牌化文案区 */

.brand-404 {

  text-align: center;

  padding: var(--rhythm-silence) var(--rhythm-normal);

}

.brand-404 h1 { font-size: var(--text-4xl); margin-bottom: var(--rhythm-normal); }

.brand-404 p {

  font-size: var(--text-lg);

  color: var(--color-text-secondary);

  max-width: 520px;

  margin: 0 auto var(--rhythm-normal);

}



@media (max-width: 768px) {

  .mileage-banner { gap: var(--space-4); font-size: var(--text-xs); padding: var(--rhythm-normal); }

  .mileage-banner .mileage-value { font-size: var(--text-lg); }

}