/* ============================================================
   进化海 v3.2 · 视觉增强层
   悬浮胶囊 Liquid Glass Tab Bar / 异形卡片 / 呼吸感 / 图标规范
   ============================================================ */

/* ---------- 图标规范 ---------- */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.ui-ico {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pe-icon .ui-ico,
.secondary-entry .ui-ico {
  width: 20px;
  height: 20px;
  color: var(--tint-deep);
}

.tone-gold .pe-icon .ui-ico { color: var(--gold); }
.tone-aqua .pe-icon .ui-ico { color: var(--aqua); }
.tone-lilac .pe-icon .ui-ico { color: var(--lilac); }

.today-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.today-meta .ui-ico {
  width: 13px;
  height: 13px;
}

.an-icon .ui-ico {
  width: 19px;
  height: 19px;
  color: var(--tint-deep);
}

.node-kind .ui-ico,
.j-title .ui-ico {
  width: 14px;
  height: 14px;
}

.fv-ic .ui-ico {
  width: 20px;
  height: 20px;
  color: var(--tint-deep);
}

.empty-ic .ui-ico {
  width: 38px;
  height: 38px;
  color: var(--label-3);
}

.chat-empty > span .ui-ico {
  width: 30px;
  height: 30px;
  color: var(--label-3);
}

.mp-stack i .ui-ico {
  width: 13px;
  height: 13px;
  color: var(--label-2);
}

.tool-btn .ui-ico {
  width: 19px;
  height: 19px;
}

.job-ic .ui-ico {
  width: 20px;
  height: 20px;
  color: var(--gold);
}

.post-foot button,
.post-actions button,
.report-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.post-foot .ui-ico,
.post-actions .ui-ico {
  width: 14px;
  height: 14px;
}

.setting-row > span:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.setting-row .ui-ico {
  width: 19px;
  height: 19px;
  color: var(--label-3);
}

.setting-row.danger .ui-ico {
  color: var(--red);
}

/* ---------- 悬浮胶囊 Tab Bar ---------- */
.tabbar {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 40;
  height: 62px;
  padding: 6px;
  gap: 4px;
  border: .5px solid rgba(255, 255, 255, .72);
  border-top: .5px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .74) 0%, rgba(255, 255, 255, .46) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  backdrop-filter: blur(24px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(255, 255, 255, .35),
    0 12px 32px rgba(16, 42, 51, .16);
}

.tabbar::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .30), transparent 42%);
  pointer-events: none;
}

.tabbar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg,
    rgba(255, 255, 255, .95) 0%,
    rgba(83, 162, 247, .42) 28%,
    rgba(255, 184, 61, .26) 55%,
    rgba(255, 255, 255, .90) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: .75;
}

.tabbar .tab {
  position: relative;
  z-index: 1;
  min-height: 50px;
  border-radius: 999px;
  gap: 2px;
  transition:
    color .24s cubic-bezier(.32, .72, 0, 1),
    background .24s cubic-bezier(.32, .72, 0, 1),
    transform .24s cubic-bezier(.32, .72, 0, 1);
}

.tabbar .tab:active {
  transform: scale(.94);
}

.tabbar .tab.active {
  color: var(--tint);
  background:
    radial-gradient(120% 100% at 28% 12%, rgba(255, 255, 255, .98), rgba(255, 255, 255, .72) 58%, rgba(231, 245, 248, .62));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(16, 42, 51, .05),
    0 3px 10px rgba(16, 42, 51, .10);
}

.tabbar .tab.active .tab-ico {
  transform: scale(1.06);
}

.tabbar .tab.has-dot::after {
  top: 6px;
  left: auto;
  right: calc(50% - 17px);
  margin-left: 0;
}

.tabbar.hidden {
  display: none;
}

/* 内容为悬浮导航留出可滚动空间 */
.app-shell.tab-visible .app {
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
}

.app-shell:not(.tab-visible) .app {
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* ---------- 首页顶部悬浮玻璃 ---------- */
.home-head {
  position: sticky;
  top: 8px;
  z-index: 25;
  margin: 8px 0 18px;
  padding: 10px 12px;
  border: .5px solid rgba(255, 255, 255, .80);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .48) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(185%);
  backdrop-filter: blur(22px) saturate(185%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(255, 255, 255, .30),
    0 10px 28px rgba(16, 42, 51, .12);
  animation: floatGlassIn .32s cubic-bezier(.32, .72, 0, 1) both;
}

.home-head::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(118deg,
    rgba(255, 255, 255, .98) 0%,
    rgba(83, 162, 247, .45) 32%,
    rgba(255, 184, 61, .28) 62%,
    rgba(255, 255, 255, .92) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: .8;
}

.home-head .comp-pill {
  background: rgba(255, 255, 255, .58);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: .5px solid rgba(255, 255, 255, .88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 4px 12px rgba(16, 42, 51, .08);
}

@keyframes floatGlassIn {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* ---------- 球形 Liquid Glass 返回 ---------- */
.topbar .back {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--tint-deep);
  background:
    radial-gradient(circle at 30% 24%,
      rgba(255, 255, 255, .98) 0%,
      rgba(255, 255, 255, .72) 38%,
      rgba(214, 240, 247, .48) 72%,
      rgba(183, 220, 232, .34) 100%);
  border: .5px solid rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, .98),
    inset 0 -3px 7px rgba(16, 42, 51, .09),
    0 4px 14px rgba(16, 42, 51, .14);
}

.topbar .back::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 10px;
  top: 5px;
  height: 38%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.topbar .back::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, .95),
    rgba(83, 162, 247, .42) 40%,
    rgba(255, 184, 61, .26) 68%,
    rgba(255, 255, 255, .90));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: .8;
}

.topbar .back:active {
  transform: scale(.94);
  background:
    radial-gradient(circle at 30% 24%,
      rgba(255, 255, 255, .95),
      rgba(255, 255, 255, .62) 45%,
      rgba(204, 235, 244, .42) 100%);
}

.topbar .back svg {
  position: relative;
  z-index: 1;
}

/* ---------- 异形卡片 ---------- */
.today-card {
  border-radius: 28px 28px 12px 28px;
  margin-bottom: 18px;
}

.home-primary {
  border-radius: 24px 24px 24px 10px;
}

.future-hero {
  border-radius: 12px 28px 28px 28px;
}

.post-card {
  border-radius: 22px 22px 22px 10px;
}

.post-cover {
  border-radius: 22px 22px 0 0;
}

.comp-pill {
  border-radius: 999px 999px 999px 12px;
}

/* ---------- 呼吸感 ---------- */
.app {
  padding-left: 20px;
  padding-right: 20px;
}

.topbar {
  margin-left: -20px;
  margin-right: -20px;
}

.card {
  padding: 18px;
  margin-bottom: 16px;
}

.sec-head {
  margin-top: 28px;
  margin-bottom: 14px;
}

.home-head {
  margin-bottom: 20px;
}

.home-primary,
.home-secondary {
  margin: 18px 0;
}

.home-secondary {
  margin-top: 12px;
}

.page-lead {
  margin-bottom: 18px;
}

.two-btns {
  gap: 10px;
}

.journey-hero,
.future-hero,
.comp-hero,
.assess-hero,
.explore-hero,
.info-hero,
.income-hero,
.result-hero,
.ladder-hero {
  margin-bottom: 16px;
  padding: 20px;
}

.today-actions {
  gap: 10px;
}

.home-info-grid {
  gap: 22px;
  margin-top: 22px;
}

/* ---------- 小屏与桌面 ---------- */
@media (max-width: 360px) {
  .app-shell.tab-visible .app,
  .app-shell:not(.tab-visible) .app {
    padding-left: 16px;
    padding-right: 16px;
  }

  .topbar {
    margin-left: -16px;
    margin-right: -16px;
  }

  .card {
    padding: 16px;
    margin-bottom: 14px;
  }

  .home-head {
    padding: 9px 10px;
  }

  .sec-head {
    margin-top: 24px;
  }
}

@media (min-width: 520px) {
  .app {
    padding-left: 20px;
    padding-right: 20px;
  }

  .tabbar {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }

  .app-shell.tab-visible .app {
    padding-bottom: 96px;
  }

  .app-shell:not(.tab-visible) .app {
    padding-bottom: 20px;
  }
}

/* ---------- 玻璃降级 ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar,
  .home-head {
    background: rgba(255, 255, 255, .96);
  }

  .topbar .back {
    background: linear-gradient(180deg, #ffffff, #edf5f7);
  }
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .home-head {
    animation: none;
  }

  .tabbar .tab {
    transition: none;
  }
}

/* ---------- 图标微调 ---------- */
.auth-empty span .ui-ico {
  width: 32px;
  height: 32px;
  color: var(--label-3);
}

.ai-advice-head .ui-ico {
  width: 19px;
  height: 19px;
  color: var(--tint-deep);
}

.child-evidence .ui-ico {
  width: 18px;
  height: 18px;
  color: var(--gold);
}

.post-foot button.on,
.post-actions button.on {
  color: var(--coral);
}

.post-foot button.on .ui-ico,
.post-actions button.on .ui-ico {
  fill: currentColor;
}

.post-foot button,
.post-actions button {
  background: none;
  border: none;
}

/* ---------- 行内图标对齐 ---------- */
.node-meta span,
.rank-strip-head b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.node-meta .ui-ico {
  width: 13px;
  height: 13px;
}

.rank-strip-head .ui-ico {
  width: 14px;
  height: 14px;
}

.tour-step .ts-ic .ui-ico {
  width: 19px;
  height: 19px;
  color: var(--label-2);
}

.post-cta > span .ui-ico {
  width: 32px;
  height: 32px;
  color: var(--tint);
}

.child-evidence > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
}

/* ============================================================
   第二轮视觉校准：蓝 / 黄双色、玻璃遮罩、呼吸感、异形卡、动效
   ============================================================ */
:root {
  --blue: #53A2F7;
  --blue-deep: #2E6FB5;
  --blue-ink: #1C5C9E;
  --blue-soft: #EAF3FE;
  --yellow: #FFB83D;
  --yellow-deep: #9A5E00;
  --yellow-soft: #FFF4E1;

  --tint: var(--blue);
  --tint-deep: var(--blue-deep);
  --tint-soft: var(--blue-soft);
  --aqua: var(--blue);
  --aqua-soft: var(--blue-soft);
  --gold: var(--yellow-deep);
  --gold-soft: var(--yellow-soft);
}

/* ---------- 双色环境光 ---------- */
.ocean-bg {
  background:
    radial-gradient(58% 42% at 82% -6%, rgba(83, 162, 247, .20), transparent 64%),
    radial-gradient(46% 36% at 4% 12%, rgba(255, 184, 61, .12), transparent 60%),
    linear-gradient(180deg, #F7FAFD 0%, #F2F7FB 55%, #EFF4F8 100%);
}

/* ---------- 主要按钮：蓝到深蓝，保留黄作为成长/奖励 ---------- */
.btn-primary {
  background: linear-gradient(180deg, #53A2F7 0%, #2E6FB5 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(46, 111, 181, .26);
}

.btn-primary:hover {
  background: linear-gradient(180deg, #4A97ED 0%, #28629F 100%);
}

.btn-ghost {
  background: var(--blue-soft);
  color: var(--blue-ink);
}

.btn-ghost:hover {
  background: #DFECFC;
}

.btn-coral {
  background: linear-gradient(180deg, #E58972 0%, #C85B4A 100%);
  color: #fff;
}

/* ---------- 二级页 navibar：去边界、标题居中 ---------- */
.topbar {
  height: 52px;
  margin: 0 -20px 8px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(244, 247, 248, .86) 68%, rgba(244, 247, 248, 0) 100%);
  border-bottom: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.topbar .back {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.topbar .back:active {
  transform: translateY(-50%) scale(.94);
}

.topbar .tb-title {
  flex: none;
  max-width: calc(100% - 170px);
  margin: 0 auto;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.2px;
}

.topbar .tb-right {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding-right: 0;
}

/* ---------- 玻璃遮罩：蓝 / 黄双色在表面下漫开 ---------- */
.home-head,
.today-card,
.future-hero,
.comp-hero,
.assess-hero,
.explore-hero,
.info-hero,
.income-hero,
.result-hero,
.ladder-hero,
.calib-hero {
  background:
    radial-gradient(95% 130% at 2% 0%, rgba(83, 162, 247, .18) 0%, transparent 58%),
    radial-gradient(80% 120% at 100% 100%, rgba(255, 184, 61, .16) 0%, transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .58) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  backdrop-filter: blur(26px) saturate(165%);
  border: .5px solid rgba(255, 255, 255, .78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(255, 255, 255, .30),
    0 16px 40px rgba(46, 111, 181, .10);
  overflow: hidden;
}

.home-head {
  background:
    radial-gradient(38% 90% at 0% 0%, rgba(83, 162, 247, .20) 0%, transparent 68%),
    radial-gradient(28% 80% at 100% 100%, rgba(255, 184, 61, .16) 0%, transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, .80) 0%, rgba(255, 255, 255, .52) 100%);
}

/* 玻璃层的轻微高光，不在内容卡上堆叠 */
.today-card::before,
.future-hero::before,
.comp-hero::before,
.assess-hero::before,
.calib-hero::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -90px;
  top: -150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .55), transparent 68%);
  filter: blur(10px);
  pointer-events: none;
  opacity: .6;
}

/* ---------- 异形卡片 ---------- */
.today-card {
  border-radius: 32px 32px 12px 32px;
}

.home-primary {
  border-radius: 28px 28px 28px 10px;
}

.home-secondary {
  border-radius: 18px 28px 18px 28px;
}

.future-hero {
  border-radius: 12px 32px 32px 32px;
}

.comp-hero {
  border-radius: 32px 12px 32px 32px;
}

.assess-hero {
  border-radius: 12px 32px 32px 32px;
}

.result-hero {
  border-radius: 32px 16px 32px 32px;
}

.ladder-hero {
  border-radius: 16px 32px 32px 32px;
}

.post-card {
  border-radius: 24px 24px 24px 8px;
}

.post-cover {
  border-radius: 24px 24px 0 0;
}

.comp-pill {
  border-radius: 999px 999px 999px 12px;
}

/* ---------- 呼吸感 ---------- */
.app {
  padding-left: 22px;
  padding-right: 22px;
}

.topbar {
  margin-left: -22px;
  margin-right: -22px;
}

.card {
  padding: 20px;
  margin-bottom: 20px;
}

.sec-head {
  margin-top: 32px;
  margin-bottom: 16px;
}

.home-head {
  margin-bottom: 22px;
  padding: 12px 14px;
}

.home-primary,
.home-secondary {
  margin: 20px 0;
}

.home-secondary {
  margin-top: 14px;
}

.home-info-grid {
  gap: 26px;
  margin: 24px 0 6px;
}

.journey-hero,
.future-hero,
.comp-hero,
.assess-hero,
.explore-hero,
.info-hero,
.income-hero,
.result-hero,
.ladder-hero,
.calib-hero {
  padding: 22px;
  margin-bottom: 20px;
}

.today-card {
  padding: 22px 20px;
  margin-bottom: 22px;
}

.two-btns {
  gap: 12px;
}

/* ---------- 卡片动效 ---------- */
@keyframes cardRise {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.995);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes iconPop {
  0% { transform: scale(.92); }
  60% { transform: scale(1.10); }
  100% { transform: scale(1.06); }
}

.card,
.today-card,
.home-primary,
.home-secondary,
.future-hero,
.comp-hero,
.assess-hero,
.explore-path,
.info-page-card,
.route-card,
.post-card,
.mentor-card,
.assess-card {
  animation: cardRise .42s cubic-bezier(.22, 1, .36, 1) both;
}

.tabbar .tab.active .tab-ico {
  animation: iconPop .36s cubic-bezier(.22, 1, .36, 1) both;
}

@media (hover: hover) {
  .primary-entry:hover,
  .secondary-entry:hover,
  .post-card:hover,
  .assess-card:hover,
  .mentor-card:hover,
  .route-card:hover,
  .info-page-card:hover,
  .explore-path:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(46, 111, 181, .12);
  }

  .primary-entry,
  .secondary-entry,
  .post-card,
  .assess-card,
  .mentor-card,
  .route-card,
  .info-page-card,
  .explore-path {
    transition:
      transform .24s cubic-bezier(.22, 1, .36, 1),
      box-shadow .24s cubic-bezier(.22, 1, .36, 1),
      background .24s ease;
  }
}

@media (max-width: 360px) {
  .app {
    padding-left: 16px;
    padding-right: 16px;
  }

  .topbar {
    margin-left: -16px;
    margin-right: -16px;
  }

  .card {
    padding: 17px;
    margin-bottom: 16px;
  }

  .today-card,
  .journey-hero,
  .future-hero,
  .comp-hero,
  .assess-hero,
  .explore-hero,
  .info-hero,
  .income-hero,
  .result-hero,
  .ladder-hero,
  .calib-hero {
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .today-card,
  .home-primary,
  .home-secondary,
  .future-hero,
  .comp-hero,
  .assess-hero,
  .explore-path,
  .info-page-card,
  .route-card,
  .post-card,
  .mentor-card,
  .assess-card,
  .tabbar .tab.active .tab-ico {
    animation: none;
  }

  .primary-entry,
  .secondary-entry,
  .post-card,
  .assess-card,
  .mentor-card,
  .route-card,
  .info-page-card,
  .explore-path {
    transition: none;
  }
}

/* 首页悬浮头不能裁掉头像等级徽章 */
.home-head {
  overflow: visible;
}

/* 动画只做位移，不把内容从 opacity:0 开始：
   某些浏览器/后台标签会冻结动画时钟，避免整页不可见。 */
.app.fadein {
  animation: none !important;
}

@keyframes cardRise {
  from { transform: translateY(8px) scale(.998); }
  to { transform: none; }
}