/* 首页只使用这组规则作最终视觉收口；其它页面不受影响。 */
@media (min-width: 761px) {
  html, body { min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; }
  body {
    background:
      radial-gradient(64vw 64vh at 2% 2%, rgba(81, 201, 255, .28), transparent 66%),
      radial-gradient(58vw 52vh at 98% 5%, rgba(231, 159, 249, .22), transparent 68%),
      radial-gradient(57vw 47vh at 94% 98%, rgba(255, 190, 136, .20), transparent 70%),
      radial-gradient(54vw 48vh at 5% 91%, rgba(88, 188, 255, .22), transparent 70%),
      linear-gradient(132deg, #ddf7ff 0%, #edf4ff 37%, #edf0ff 66%, #fff0f8 84%, #fff0df 100%) !important;
  }
  body::before { opacity: .72 !important; filter:saturate(116%) !important; }
  body::after { opacity: .46 !important; filter:saturate(110%) !important; }

  .glass-container, .glass-container--flex {
    width: calc(100vw - 28px) !important;
    height: calc(100dvh - 28px) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 14px !important;
    padding: clamp(18px, 1.6vw, 30px) !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: clamp(190px, 13.3vw, 250px) minmax(0, 1fr) !important;
    gap: clamp(38px, 3.1vw, 58px) !important;
    border: 0 !important;
    border-radius: 27px !important;
    background: rgba(239, 249, 255, .18) !important;
    box-shadow: 0 22px 60px rgba(73, 104, 159, .08) !important;
    overflow: hidden !important;
  }
  /* 侧栏几何与其他页完全统一（ui-reference.css 基准值），消除切换页面时的位移感 */

  .app-main { height:100% !important; min-height:0 !important; overflow:hidden !important; background:transparent !important; }
  .app-topbar, .ui-shell-page[data-ui-page="index"] .app-topbar {
    height:60px !important; min-height:60px !important; padding:0 !important; display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important; gap:28px !important; align-items:center !important;
    background:transparent !important; border:0 !important; box-shadow:none !important;
  }
  .page-heading-wrap { padding:0 !important; }
  .page-heading-wrap .page-kicker, .page-kicker { display:block !important; margin:0 !important; font-size:14px !important; color:#55738f !important; font-weight:600 !important; }
  .page-kicker::after { content:none !important; }
  .integral-badge {
    min-width:148px !important; height:40px !important; padding:0 14px !important;
    border-radius:20px !important; font-size:13px !important; letter-spacing:.01em !important;
    background:linear-gradient(135deg,rgba(255,255,255,.66),rgba(247,242,255,.48)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 8px 18px rgba(95,83,152,.06) !important;
  }
  .topbar-actions { justify-self:end !important; }

  .ui-shell-page[data-ui-page="index"] .app-content {
    height:calc(100% - 60px) !important; min-height:0 !important; padding:18px 0 0 !important; overflow:hidden !important; display:block !important;
  }
  .ui-shell-page[data-ui-page="index"] .home-hero {
    position:relative !important; display:block !important; height:clamp(260px,34.2vh,364px) !important; min-height:0 !important; margin:0 !important;
    overflow:hidden !important; border-radius:23px !important; border:1px solid rgba(255,255,255,.80) !important;
    background: linear-gradient(108deg,rgba(246,252,255,.60),rgba(231,246,255,.46) 47%,rgba(247,237,255,.47)) !important;
  }
  .ui-shell-page[data-ui-page="index"] .home-hero::before { content:none !important; display:none !important; }
  .ui-shell-page[data-ui-page="index"] .home-hero::after {
    content:"" !important; display:block !important; position:absolute !important; z-index:1 !important;
    right:clamp(18px,2vw,38px) !important; top:clamp(10px,1.5vh,22px) !important; width:clamp(350px,33vw,620px) !important; height:calc(100% - 20px) !important;
    background:url('../assets/ui/hero-integrated-v3.png') right center/contain no-repeat !important; opacity:1 !important; transform:none !important; animation:none !important;
  }
  .ui-shell-page[data-ui-page="index"] .hero-copy {
    position:relative !important; z-index:2 !important; min-height:0 !important; height:100% !important; box-sizing:border-box !important;
    padding:clamp(44px,5.2vh,60px) 47% 28px clamp(50px,4.5vw,85px) !important; background:transparent !important; box-shadow:none !important;
  }
  .hero-copy::before, .hero-copy::after { content:none !important; display:none !important; }
  .hero-eyebrow { display:block !important; margin:0 0 12px !important; font-size:14px !important; color:#486b93 !important; font-weight:600 !important; }
  .hero-eyebrow::after { content:none !important; }
  .hero-title { display:block !important; max-width:none !important; margin:0 0 12px !important; font-size:clamp(34px,3.05vw,49px) !important; line-height:1.12 !important; color:#0a2b53 !important; font-weight:780 !important; letter-spacing:-.052em !important; }
  .hero-title::after { content:none !important; }
  .hero-text { display:block !important; max-width:none !important; margin:0 0 24px !important; font-size:16px !important; color:#46698f !important; line-height:1.65 !important; font-weight:500 !important; }
  .hero-text::after { content:none !important; }
  .hero-flow { display:flex !important; gap:12px !important; margin:0 !important; max-width:none !important; }
  .flow-chip { height:37px !important; padding:0 16px !important; font-size:13px !important; color:#315f8e !important; background:rgba(239,249,255,.50) !important; }
  .flow-chip::before, .flow-chip::after { content:none !important; }
  .hero-side { display:none !important; }

  .ui-shell-page[data-ui-page="index"] .section-head { height:66px !important; margin:0 !important; padding:0 0 0 2px !important; display:flex !important; align-items:end !important; gap:14px !important; }
  .section-title { display:block !important; position:relative !important; margin:0 0 17px !important; padding-left:31px !important; font-size:22px !important; color:#0d3159 !important; }
  .section-title::before { left:0 !important; top:0 !important; width:6px !important; height:28px !important; }
  .section-title::after { content:none !important; }
  .section-note { display:block !important; margin:0 0 20px !important; font-size:14px !important; color:#718aa5 !important; }
  .section-note::after { content:none !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid {
    position:relative !important; display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:clamp(174px,19.3vh,205px) clamp(104px,11.5vh,122px) !important; gap:72px 20px !important; margin:0 !important; padding:0 0 52px !important; overflow:visible !important;
  }
  .main-grid::before { content:"更多功能" !important; display:block !important; top:calc(clamp(174px,19.3vh,205px) + 29px) !important; left:0 !important; padding-left:31px !important; border-left:6px solid #24a7ff !important; font-size:21px !important; color:#0d3159 !important; line-height:28px !important; }
  .main-grid::after { content:"“ 更聪明地经营，才能走得更远。 ”" !important; left:22px !important; bottom:1px !important; font-size:18px !important; }
  .app-content::after { content:none !important; display:none !important; }
  .app-main::after { content:"— 餐谋长 · 陪你做好每一家店" !important; position:absolute !important; right:4px !important; bottom:3px !important; z-index:8 !important; pointer-events:none !important; font-size:13px !important; color:#7590ad !important; letter-spacing:.02em !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .glass-card {
    display:flex !important; min-height:0 !important; height:100% !important; box-sizing:border-box !important; padding:22px 28px !important; border-radius:20px !important;
    border:1px solid rgba(255,255,255,.82) !important; background:rgba(249,253,255,.42) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 22px 48px rgba(55,87,142,.045) !important;
  }
  .main-grid .glass-card::before, .main-grid .glass-card::after { content:none !important; display:none !important; }
  .home-card .feature-meta { display:none !important; }
  .home-card .feature-icon { flex:0 0 auto !important; margin:0 !important; padding:0 !important; border:0 !important; box-shadow:none !important; background-position:center !important; background-repeat:no-repeat !important; background-size:contain !important; }
  .home-card .feature-icon::before, .home-card .feature-icon::after { content:none !important; display:none !important; }
  .home-card .card-copy { min-width:0 !important; }
  .home-card h3, .home-card h3::after { margin:0 !important; padding:0 !important; font-size:25px !important; line-height:1.22 !important; color:#0b2b53 !important; font-weight:780 !important; letter-spacing:-.04em !important; }
  .home-card h3::after { content:none !important; }
  .home-card p, .home-card p::before, .home-card p::after { display:block !important; margin:0 !important; padding:0 !important; color:#587694 !important; font-size:14px !important; line-height:1.62 !important; }
  .home-card .card-lead { margin:9px 0 9px !important; color:#1c8cf0 !important; font-size:16px !important; font-weight:700 !important; }
  .home-card .card-detail { font-size:14px !important; }
  .home-card--survey, .home-card--analysis { grid-column:span 2 !important; align-items:center !important; gap:30px !important; }
  .home-card--survey { background:radial-gradient(250px 180px at 5% 100%,rgba(49,211,255,.14),transparent 72%),linear-gradient(140deg,rgba(246,252,255,.63),rgba(239,250,255,.49)) !important; }
  .home-card--analysis { background:radial-gradient(280px 180px at 13% 100%,rgba(186,114,255,.14),transparent 72%),linear-gradient(140deg,rgba(253,248,255,.63),rgba(248,242,255,.51)) !important; }
  .home-card--survey .feature-icon, .home-card--analysis .feature-icon { width:clamp(116px,9.5vw,178px) !important; height:clamp(116px,9.5vw,178px) !important; }
  .home-card--survey .feature-icon { background-image:url('../assets/ui/survey-integrated-v3.png') !important; }
  .home-card--analysis .feature-icon { background-image:url('../assets/ui/analysis-integrated-v3.png') !important; }
  .home-card--analysis .card-lead { color:#694df3 !important; }
  .home-card--menu .feature-icon { background-image:url('../assets/ui/menu-integrated-v3.png') !important; }
  .home-card--history .feature-icon { background-image:url('../assets/ui/history-integrated-v3.png') !important; }
  .home-card--guide .feature-icon { background-image:url('../assets/ui/guide-integrated-v3.png') !important; }
  .home-card--points .feature-icon { background-image:url('../assets/ui/points-integrated-v3.png') !important; }
  .home-card--menu { background:linear-gradient(138deg,rgba(255,251,247,.69),rgba(255,247,242,.47)) !important; }
  .home-card--history { background:linear-gradient(138deg,rgba(247,252,255,.66),rgba(240,249,255,.47)) !important; }
  .home-card--guide { background:linear-gradient(138deg,rgba(247,255,252,.63),rgba(239,253,248,.46)) !important; }
  .home-card--points { background:linear-gradient(138deg,rgba(255,253,246,.68),rgba(255,249,237,.47)) !important; }
  .home-card--menu, .home-card--history, .home-card--guide, .home-card--points { align-items:center !important; gap:13px !important; padding:16px 18px !important; }
  .home-card--menu .feature-icon, .home-card--history .feature-icon, .home-card--guide .feature-icon, .home-card--points .feature-icon { width:70px !important; height:70px !important; }
  .home-card--menu h3, .home-card--history h3, .home-card--guide h3, .home-card--points h3 { font-size:17px !important; }
  .home-card--menu p, .home-card--history p, .home-card--guide p, .home-card--points p { margin-top:5px !important; font-size:12px !important; color:#6d86a2 !important; }
}

/* Homepage atmosphere: retain the approved layout, while giving the shared
   backdrop the richer cyan / violet / peach aurora depth of the reference. */
@media (min-width: 761px) {
  body {
    background:
      radial-gradient(46vw 42vw at -8% 102%, rgba(33, 213, 255, .42), transparent 67%),
      radial-gradient(33vw 34vw at 13% 106%, rgba(103, 148, 255, .30), transparent 68%),
      radial-gradient(37vw 39vw at 91% 105%, rgba(255, 183, 116, .31), transparent 69%),
      radial-gradient(35vw 34vw at 104% 4%, rgba(246, 151, 235, .34), transparent 68%),
      radial-gradient(34vw 29vw at 56% -7%, rgba(205, 174, 255, .28), transparent 70%),
      linear-gradient(132deg, #ccefff 0%, #e9f5ff 31%, #e6eaff 59%, #faeafe 79%, #fff0df 100%) !important;
  }

  body::before {
    opacity: .92 !important;
    filter:saturate(128%) !important;
    background:
      radial-gradient(ellipse 54% 44% at 16% 86%, rgba(37, 221, 255, .46), transparent 68%),
      radial-gradient(ellipse 49% 44% at 87% 89%, rgba(255, 181, 113, .35), transparent 70%),
      radial-gradient(ellipse 44% 41% at 91% 13%, rgba(233, 141, 255, .40), transparent 71%),
      radial-gradient(ellipse 52% 40% at 32% 2%, rgba(174, 224, 255, .50), transparent 72%) !important;
    animation: cm-aurora-drift 22s ease-in-out infinite alternate !important;
  }

  body::after {
    opacity: .64 !important;
    filter:saturate(118%) !important;
    background:
      radial-gradient(ellipse 72% 56% at 51% 43%, rgba(255, 255, 255, .37), transparent 72%),
      radial-gradient(circle at 15% 35%, rgba(255, 255, 255, .50), transparent 14%),
      radial-gradient(circle at 92% 55%, rgba(255, 255, 255, .34), transparent 16%) !important;
  }

  .glass-container,
  .glass-container--flex {
    background: linear-gradient(135deg, rgba(239, 251, 255, .16), rgba(231, 239, 255, .10) 56%, rgba(255, 236, 249, .14)) !important;
  }

  .app-sidebar {
    background: linear-gradient(180deg, rgba(239, 252, 255, .49), rgba(227, 243, 255, .26) 58%, rgba(242, 232, 255, .32)) !important;
  }

  .ui-shell-page[data-ui-page="index"] .home-hero {
    background: linear-gradient(108deg, rgba(248, 254, 255, .51), rgba(226, 246, 255, .34) 48%, rgba(249, 233, 255, .38)) !important;
  }

  .ui-shell-page[data-ui-page="index"] .main-grid .glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, .37), rgba(246, 251, 255, .23) 58%, rgba(255, 244, 252, .27)) !important;
  }
}

@keyframes cm-aurora-drift {
  0% { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  52% { transform: translate3d(2%, 1.5%, 0) scale(1.07); }
  100% { transform: translate3d(-.5%, 2%, 0) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none !important; }
}

@media (min-width: 761px) {
  .ui-shell-page:not([data-ui-page="index"]) .app-content { padding-bottom:62px !important; }
}

@media (min-width:761px) and (max-height: 780px) {
  .ui-shell-page[data-ui-page="index"] .app-content { padding-top:10px !important; }
  .ui-shell-page[data-ui-page="index"] .home-hero { height:clamp(218px,31vh,260px) !important; }
  .ui-shell-page[data-ui-page="index"] .hero-copy { padding-top:31px !important; }
  .hero-title { font-size:clamp(29px,3vw,39px) !important; }
  .hero-text { margin-bottom:12px !important; font-size:14px !important; }
  .flow-chip { height:31px !important; }
  .ui-shell-page[data-ui-page="index"] .section-head { height:47px !important; }
  .section-title { margin-bottom:8px !important; font-size:19px !important; }
  .section-note { margin-bottom:11px !important; font-size:12px !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid { grid-template-rows:clamp(142px,18vh,174px) clamp(88px,11vh,104px) !important; gap:50px 14px !important; }
  .main-grid::before { top:calc(clamp(142px,18vh,174px) + 17px) !important; font-size:18px !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .glass-card { padding:14px 18px !important; }
  .home-card--survey, .home-card--analysis { gap:18px !important; }
  .home-card h3 { font-size:20px !important; }
  .home-card .card-lead { margin:5px 0 !important; font-size:13px !important; }
  .home-card .card-detail { font-size:12px !important; }
  .home-card--menu, .home-card--history, .home-card--guide, .home-card--points { padding:10px 12px !important; gap:8px !important; }
  .home-card--menu .feature-icon, .home-card--history .feature-icon, .home-card--guide .feature-icon, .home-card--points .feature-icon { width:52px !important; height:52px !important; }
  .home-card--menu h3, .home-card--history h3, .home-card--guide h3, .home-card--points h3 { font-size:14px !important; }
  .home-card--menu p, .home-card--history p, .home-card--guide p, .home-card--points p { font-size:10px !important; }
}

/* Legacy rules in ui-reference.css use position-dependent selectors.  The
   homepage owns semantic card classes, so these final selectors deliberately
   outrank those historic rules and keep copy/artwork from being duplicated. */
@media (min-width: 761px) {
  .ui-shell-page[data-ui-page="index"] .hero-copy { padding:clamp(44px,5.2vh,60px) 47% 28px clamp(50px,4.5vw,85px) !important; }
  .ui-shell-page[data-ui-page="index"] .hero-title { max-width:none !important; font-size:clamp(34px,3.05vw,49px) !important; line-height:1.12 !important; }
  .ui-shell-page[data-ui-page="index"] .hero-title::after,
  .ui-shell-page[data-ui-page="index"] .hero-eyebrow::after,
  .ui-shell-page[data-ui-page="index"] .hero-text::after { content:none !important; }
  .ui-shell-page[data-ui-page="index"] .hero-flow { max-width:none !important; }
  .ui-shell-page[data-ui-page="index"] .flow-chip::before,
  .ui-shell-page[data-ui-page="index"] .flow-chip::after,
  .ui-shell-page[data-ui-page="index"] .flow-chip:nth-of-type(1)::after,
  .ui-shell-page[data-ui-page="index"] .flow-chip:nth-of-type(2)::after,
  .ui-shell-page[data-ui-page="index"] .flow-chip:nth-of-type(3)::after { content:none !important; }

  .ui-shell-page[data-ui-page="index"] .main-grid .home-card,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card:nth-child(n) {
    grid-row:auto !important; min-width:0 !important; min-height:0 !important;
    grid-template-columns:none !important; grid-template-rows:none !important; align-content:initial !important;
  }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--survey,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--analysis { grid-column:span 2 !important; display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; gap:30px !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--menu,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--history,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--guide,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--points { grid-column:span 1 !important; display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; gap:13px !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card .feature-icon,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card:nth-child(n) .feature-icon {
    grid-column:auto !important; grid-row:auto !important; float:none !important; align-self:center !important;
    display:block !important; position:relative !important; border-radius:0 !important; margin:0 !important;
  }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card .feature-icon::before,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card .feature-icon::after { content:none !important; display:none !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card .card-copy { display:block !important; grid-column:auto !important; grid-row:auto !important; align-self:center !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card h3,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card:nth-child(n) h3 {
    display:block !important; grid-column:auto !important; grid-row:auto !important; align-self:auto !important;
    padding:0 !important; font-size:25px !important; color:#0b2b53 !important;
  }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card h3::after,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card:nth-child(n) h3::after { content:none !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card p,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card:nth-child(n) p {
    display:block !important; grid-column:auto !important; grid-row:auto !important; max-width:none !important;
    -webkit-line-clamp:initial !important; -webkit-box-orient:initial !important; overflow:visible !important;
  }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card p::before,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card p::after { content:none !important; display:none !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--menu h3,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--history h3,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--guide h3,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--points h3 { font-size:17px !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--survey .feature-icon,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--analysis .feature-icon {
    width:clamp(116px,9.5vw,178px) !important; height:clamp(116px,9.5vw,178px) !important;
    background-size:contain !important; background-position:center !important; background-repeat:no-repeat !important;
  }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--survey .feature-icon { background-image:url('../assets/ui/survey-integrated-v3.png') !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--analysis .feature-icon { background-image:url('../assets/ui/analysis-integrated-v3.png') !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--menu .feature-icon,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--history .feature-icon,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--guide .feature-icon,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--points .feature-icon {
    width:70px !important; height:70px !important; background-size:contain !important; background-position:center !important; background-repeat:no-repeat !important;
  }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--menu .feature-icon { background-image:url('../assets/ui/menu-integrated-v3.png') !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--history .feature-icon { background-image:url('../assets/ui/history-integrated-v3.png') !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--guide .feature-icon { background-image:url('../assets/ui/guide-integrated-v3.png') !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--points .feature-icon { background-image:url('../assets/ui/points-integrated-v3.png') !important; }
}

/* Final homepage-only atmosphere layer.  It intentionally sits inside the
   window, under all panels, so the colour remains visible through the glass
   instead of being hidden behind the page. */
@media (min-width: 761px) {
  html { background: #b9e8ff !important; }

  body {
    background:
      radial-gradient(48vw 46vh at -6% 104%, rgba(24, 212, 255, .76), transparent 63%),
      radial-gradient(38vw 40vh at 8% 4%, rgba(105, 221, 255, .62), transparent 66%),
      radial-gradient(37vw 40vh at 52% -8%, rgba(165, 150, 255, .48), transparent 70%),
      radial-gradient(36vw 42vh at 104% 8%, rgba(250, 150, 236, .58), transparent 66%),
      radial-gradient(43vw 45vh at 96% 104%, rgba(255, 183, 108, .56), transparent 66%),
      linear-gradient(135deg, #aeeaff 0%, #ccecff 26%, #dedbff 55%, #f5d9f8 78%, #ffe0c4 100%) !important;
  }

  body::before {
    z-index: 0 !important;
    inset: -16% !important;
    opacity: .96 !important;
    mix-blend-mode: normal !important;
    background:
      radial-gradient(ellipse 42% 47% at 5% 89%, rgba(0, 202, 255, .70) 0%, rgba(28, 196, 255, .26) 38%, transparent 72%),
      radial-gradient(ellipse 38% 42% at 93% 14%, rgba(230, 112, 255, .56) 0%, rgba(248, 155, 237, .20) 41%, transparent 74%),
      radial-gradient(ellipse 39% 45% at 89% 96%, rgba(255, 165, 84, .51) 0%, rgba(255, 193, 124, .18) 42%, transparent 75%),
      radial-gradient(ellipse 35% 39% at 36% 0%, rgba(95, 170, 255, .44) 0%, transparent 72%) !important;
    filter:saturate(144%) !important;
    animation: cm-home-aurora 18s ease-in-out infinite alternate !important;
  }

  body::after {
    z-index: 0 !important;
    inset: -12% !important;
    opacity: .68 !important;
    mix-blend-mode: screen !important;
    background:
      radial-gradient(circle at 15% 27%, rgba(255,255,255,.64) 0 2%, transparent 13%),
      radial-gradient(circle at 89% 27%, rgba(255,255,255,.52) 0 2%, transparent 15%),
      radial-gradient(circle at 79% 86%, rgba(255,244,255,.44) 0 2%, transparent 14%),
      linear-gradient(119deg, transparent 24%, rgba(255,255,255,.24) 48%, transparent 72%) !important;
    
  }

  .glass-container::before {
    content: "" !important;
    position: absolute !important;
    inset: -14% !important;
    z-index: 0 !important;
    padding: 0 !important;
    border-radius: inherit !important;
    -webkit-mask: none !important;
    mask: none !important;
    opacity: .88 !important;
    background:
      radial-gradient(ellipse 40% 50% at 3% 87%, rgba(21, 210, 255, .56), transparent 71%),
      radial-gradient(ellipse 35% 46% at 88% 13%, rgba(217, 127, 255, .48), transparent 71%),
      radial-gradient(ellipse 42% 48% at 91% 94%, rgba(255, 180, 113, .45), transparent 72%),
      radial-gradient(ellipse 34% 38% at 36% 4%, rgba(101, 210, 255, .43), transparent 73%),
      linear-gradient(135deg, rgba(102, 220, 255, .24), rgba(218, 220, 255, .14) 51%, rgba(255, 201, 237, .21)) !important;
    filter:saturate(142%) !important;
    animation: cm-home-window-aurora 20s ease-in-out infinite alternate !important;
  }

  .app-sidebar,
  .app-main { position: relative !important; z-index: 1 !important; }

  .glass-container,
  .glass-container--flex {
    background: linear-gradient(135deg, rgba(238, 250, 255, .12), rgba(224, 237, 255, .09) 54%, rgba(255, 228, 246, .13)) !important;
    box-shadow: 0 28px 76px rgba(46, 94, 177, .16), inset 0 1px 0 rgba(255,255,255,.72) !important;
  }

  .app-sidebar {
    background: linear-gradient(180deg, rgba(239, 252, 255, .43), rgba(228, 243, 255, .23) 58%, rgba(240, 226, 255, .28)) !important;
  }

  .ui-shell-page[data-ui-page="index"] .home-hero {
    background:
      radial-gradient(ellipse at 18% 0%, rgba(255,255,255,.30), transparent 52%),
      linear-gradient(107deg, rgba(248, 254, 255, .34), rgba(220, 245, 255, .19) 50%, rgba(250, 222, 255, .27)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 18px 46px rgba(78,107,190,.08) !important;
  }

  .ui-shell-page[data-ui-page="index"] .main-grid .glass-card {
    background: linear-gradient(135deg, rgba(255,255,255,.32), rgba(245,250,255,.19) 58%, rgba(255,240,250,.25)) !important;
  }
}

@keyframes cm-home-aurora {
  0% { transform: translate3d(-2.5%, -1.5%, 0) scale(1.04); }
  55% { transform: translate3d(2.5%, 1.8%, 0) scale(1.10); }
  100% { transform: translate3d(-1%, 3%, 0) scale(1.06); }
}

@keyframes cm-home-window-aurora {
  0% { transform: translate3d(-2%, -1%, 0) scale(1.04); }
  100% { transform: translate3d(2.5%, 2%, 0) scale(1.10); }
}

/* Raster artwork is rendered as real images here instead of background layers,
   which prevents it from being hidden by the glass stacking contexts. */
@media (min-width: 761px) {
  .glass-container::before { display:block !important; }
  .ui-shell-page[data-ui-page="index"] .home-hero::after { display:none !important; }
  .ui-shell-page[data-ui-page="index"] .home-hero-art {
    position:absolute !important;
    z-index:3 !important;
    display:block !important;
    right:clamp(18px,2.1vw,40px) !important;
    top:clamp(10px,1.5vh,22px) !important;
    width:clamp(360px,34vw,620px) !important;
    height:calc(100% - 20px) !important;
    object-fit:contain !important;
    object-position:right center !important;
    pointer-events:none !important;
  }
  .ui-shell-page[data-ui-page="index"] .hero-copy { z-index:4 !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .feature-icon { background-image:none !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .feature-art {
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
  }
}

/* The supplied reference uses this original ambient artwork.  Keep it visible
   through the glass rather than replacing it with flat CSS gradients. */
@media (min-width: 761px) {
  body {
    background: #d7edff url('../assets/ui/ambient-fruit-exact.png') center / cover fixed !important;
  }
  body::before {
    background: url('../assets/ui/ambient-fruit-exact.png') center / 114% 114% no-repeat !important;
    opacity: .62 !important;
    filter:saturate(118%) !important;
  }
  body::after { opacity: .30 !important; }
  .glass-container::before {
    display:block !important;
    background: url('../assets/ui/ambient-fruit-exact.png') center / cover no-repeat !important;
    opacity: 1 !important;
    filter: saturate(138%) contrast(112%) brightness(1.05) !important;
  }
  .glass-container,
  .glass-container--flex {
    background: rgba(239, 249, 255, .06) !important;
  }
}

/* V4 workspace: the approved atmosphere stays intact, while the current
   results dashboard and all six systems fit inside a normal desktop viewport. */
@media (min-width: 981px) {
  .ui-shell-page[data-ui-page="index"] .app-content {
    height: calc(100% - 60px) !important;
    padding: 10px 0 0 !important;
    overflow: hidden !important;
  }
  .ui-shell-page[data-ui-page="index"] .home-workspace {
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-rows: auto 44px minmax(0, 1fr) 20px !important;
    overflow: hidden !important;
  }
  .ui-shell-page[data-ui-page="index"] .home-overview-panel {
    margin: 0 !important;
    padding: clamp(12px,1.4vh,18px) 20px !important;
    border-radius: 20px !important;
    background: linear-gradient(112deg,rgba(248,254,255,.54),rgba(232,244,255,.36) 54%,rgba(252,237,255,.43)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.88),0 16px 38px rgba(71,103,171,.06) !important;
  }
  .home-overview-head { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:20px !important; margin-bottom:10px !important; }
  .home-overview-head h2 { margin:0 0 3px !important; font-size:clamp(17px,1.4vw,22px) !important; color:#10365e !important; }
  .home-overview-head p { margin:0 !important; font-size:12px !important; color:#6e87a1 !important; }
  .home-month { flex:0 0 150px !important; }
  .home-month input { padding:6px 9px !important; }
  .ui-shell-page[data-ui-page="index"] .v4-home-grid { gap:10px !important; }
  .ui-shell-page[data-ui-page="index"] .v4-stat { min-height:0 !important; padding:clamp(7px,1vh,11px) 8px !important; border:1px solid rgba(255,255,255,.65) !important; background:rgba(239,237,255,.46) !important; }
  .ui-shell-page[data-ui-page="index"] .v4-stat strong { margin:2px !important; font-size:clamp(19px,1.7vw,25px) !important; line-height:1.08 !important; }
  .ui-shell-page[data-ui-page="index"] .v4-stat span { line-height:1.2 !important; }
  .ui-shell-page[data-ui-page="index"] .section-head { height:44px !important; padding:0 !important; align-items:center !important; }
  .ui-shell-page[data-ui-page="index"] .section-title { margin:0 !important; padding-left:18px !important; font-size:18px !important; }
  .ui-shell-page[data-ui-page="index"] .section-title::before { width:5px !important; height:22px !important; }
  .ui-shell-page[data-ui-page="index"] .section-note { margin:0 !important; font-size:12px !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid {
    min-height:0 !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:minmax(132px,1.34fr) minmax(82px,.8fr) !important;
    gap:12px !important;
    padding:0 !important;
    overflow:hidden !important;
  }
  .ui-shell-page[data-ui-page="index"] .main-grid::before,
  .ui-shell-page[data-ui-page="index"] .main-grid::after,
  .ui-shell-page[data-ui-page="index"] .app-main::after { content:none !important; display:none !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card:nth-child(n) { height:100% !important; min-height:0 !important; padding:clamp(10px,1.2vw,18px) !important; gap:clamp(8px,1.2vw,20px) !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--survey,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--analysis { grid-column:span 2 !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--survey .feature-icon,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--analysis .feature-icon { width:clamp(86px,8vw,132px) !important; height:clamp(86px,8vw,132px) !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--menu .feature-icon,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--history .feature-icon,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--guide .feature-icon,
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card--points .feature-icon { width:clamp(42px,4vw,62px) !important; height:clamp(42px,4vw,62px) !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card h3 { font-size:clamp(16px,1.45vw,22px) !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card .card-lead { margin:4px 0 !important; font-size:clamp(11px,1.05vw,14px) !important; line-height:1.4 !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card .card-detail { font-size:11px !important; line-height:1.35 !important; }
  .home-signature { margin:0 !important; align-self:end !important; text-align:right !important; color:#7590ad !important; font-size:12px !important; }
}

@media (min-width: 981px) and (max-height: 720px) {
  .ui-shell-page[data-ui-page="index"] .app-topbar { height:48px !important; min-height:48px !important; }
  .ui-shell-page[data-ui-page="index"] .app-content { height:calc(100% - 48px) !important; padding-top:6px !important; }
  .home-overview-head { margin-bottom:6px !important; }
  .home-overview-head p,.home-signature { display:none !important; }
  .ui-shell-page[data-ui-page="index"] .home-overview-panel { padding:9px 14px !important; }
  .ui-shell-page[data-ui-page="index"] .section-head { height:34px !important; }
  .ui-shell-page[data-ui-page="index"] .home-workspace { grid-template-rows:auto 34px minmax(0,1fr) !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid { grid-template-rows:minmax(108px,1.3fr) minmax(70px,.75fr) !important; gap:9px !important; }
}

@media (min-width:761px) and (max-width:980px) {
  .ui-shell-page[data-ui-page="index"] .app-content { overflow-y:auto !important; padding:8px !important; }
  .home-overview-panel { margin:0 0 12px !important; }
  .home-overview-head { display:flex !important; justify-content:space-between !important; gap:12px !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-template-rows:none !important; gap:12px !important; padding:0 0 16px !important; overflow:visible !important; }
  .ui-shell-page[data-ui-page="index"] .main-grid .home-card:nth-child(n) { grid-column:span 1 !important; min-height:108px !important; }
  .main-grid::before,.main-grid::after,.app-main::after { content:none !important; display:none !important; }
}