/* 系统首页：保留学院风排版，补充实时趋势、环境动效与即时平台预览。 */
body[data-platform="aa"] { --bg: #edf2df; }
body[data-platform="hub"] { --bg: #e8f0f7; }
body[data-platform="graph"] { --bg: #eeebf7; }
body[data-platform="wiki"] { --bg: #f6eddf; }
body[data-platform="ppt"] { --bg: #f6e8ee; }
body[data-platform="lm"] { --bg: #e8ebf6; }
body[data-platform="gallery"] { --bg: #edece3; --accent: #928267; --accent-text: #706048; --accent-deep: #645540; --accent-soft: #e9dfcf; }

.ambient-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.s-stats .deco .di-blob, .s-stats .deco .di-ring { opacity: .45; }
.s-stats .section-head { max-width: none; margin-bottom: 22px; }
.s-stats .section-head h2 { margin-bottom: 0; }
.s-stats .stat { padding: 18px 22px; background: #fffdf8e8; }
.s-stats .stat-label { margin-bottom: 8px; }
.s-stats .stat-value { font-size: clamp(34px, 3.2vw, 44px); }
.s-stats .stat-definition { margin-top: 8px; }
.s-stats .stats-note { margin-top: 10px; font-size: 10px; }
.trends-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 22px; align-items: start; }
.trend-card { min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: #fffdf8ed; overflow: hidden; }
.trend-card > header { padding: 18px 22px 0; }
.trend-index { display: block; margin-bottom: 4px; font-size: 9px; letter-spacing: 1.6px; color: #8e8878; }
.trend-card h3 { font-size: 14px; font-weight: 550; letter-spacing: 0; }
.trend-plot { width: 100%; height: clamp(240px, 29vh, 300px); min-width: 0; }
.trend-plot:empty { display: grid; place-items: center; }
.trend-plot:empty::before { content: '等待趋势数据'; color: var(--muted); font-size: 12px; opacity: .65; }
.trend-data { margin: 0 22px 12px; font-size: 10px; color: var(--muted); }
.trend-data summary { cursor: pointer; width: fit-content; padding: 3px 0; }
.trend-table { overflow: auto; max-height: 180px; margin-top: 8px; }
.trend-table table { border-collapse: collapse; width: 100%; white-space: nowrap; font-variant-numeric: tabular-nums; }
.trend-table th, .trend-table td { padding: 6px 9px; border-bottom: 1px solid var(--line); text-align: right; }
.trend-table th:first-child, .trend-table td:first-child { text-align: left; }
.trends-status-row, .trends-note { position: relative; z-index: 1; color: var(--muted); font-size: 10px; line-height: 1.8; }
.trends-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.trends-note { margin-top: 3px; max-width: 90em; }
#trends-status[data-state="error"] { color: #9b652d; }
.s-vibe .deco { opacity: .48; }
.s-vibe .vibe-item { background: #fffdf8eb; }
.s-vibe .mcp-grid { background: #fffdf8dd; }

.card[data-platform="aa"] { --card-color: #829b3b; }
.card[data-platform="hub"] { --card-color: #3d87c4; }
.card[data-platform="graph"] { --card-color: #8172be; }
.card[data-platform="wiki"] { --card-color: #bd842f; }
.card[data-platform="ppt"] { --card-color: #ba5977; }
.card[data-platform="lm"] { --card-color: #596ea6; }
.card[data-platform="gallery"] { --card-color: #928267; }
.card[data-platform] { position: relative; isolation: isolate; transform-style: preserve-3d; }
.card[data-platform]::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),color-mix(in srgb,var(--card-color) 14%,transparent),transparent 62%); transition: opacity .2s; }
html.js .card.reveal-fade, .card[data-platform] { transition: opacity .5s, translate .24s, transform .24s, background .24s, box-shadow .24s, border-color .24s; }
.card[data-platform]:is(:hover,:focus-within,.active) { translate: 0 -6px; transform: perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); border-color: var(--card-color); background: color-mix(in srgb,var(--card-color) 5%,var(--panel)); box-shadow: 0 18px 42px #323b351c, 0 0 0 1px color-mix(in srgb,var(--card-color) 30%,transparent); }
.card[data-platform]:is(:hover,:focus-within,.active)::before { opacity: 1; }
.card[data-platform] .card-sub { color: var(--card-color); }
.card[data-platform] .card-logo { transition: scale .24s, box-shadow .24s; }
.card[data-platform]:is(:hover,:focus-within,.active) .card-logo { scale: 1.08; box-shadow: 0 6px 18px color-mix(in srgb,var(--card-color) 20%,transparent); }
.card-gallery { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; column-gap: 24px; }
.card-gallery .card-top { grid-column: 1 / -1; margin-bottom: 6px; }
.card-gallery .card-foot { grid-column: 2; grid-row: 2 / 5; margin: 0; padding: 0; border: 0; flex-direction: column; justify-content: center; align-items: end; }
.card-gallery .card-sub { margin-bottom: 3px; }

@media (min-width: 961px) {
  .s-platforms .section-head { max-width: 800px; margin-bottom: 24px; }
  .s-platforms .grid { gap: 14px; }
  .s-platforms .card { padding: 16px 20px; }
  .s-platforms .card-logo { width: 36px; height: 36px; border-radius: 10px; }
  .s-platforms .card-top { margin-bottom: 8px; }
  .s-platforms .card-foot { margin-top: 10px; padding-top: 8px; }
  .s-platforms .card-gallery { padding-block: 12px; }
  .s-platforms .card-gallery .card-top { margin-bottom: 4px; }
  .s-platforms .card-gallery .card-foot { margin: 0; padding: 0; }
}

.deploy-shade { background: linear-gradient(110deg, #10171d75, #10171d10 85%); }
.s-deploy[data-deployment] .deploy-item { background: #14202cce; color: #edf1f2; border-color: #a1b4c333; }
.s-deploy[data-deployment] .deploy-item p, .s-deploy[data-deployment] .deploy-number { color: #b9c8cf; }
.s-deploy[data-deployment] .deploy-features span, .s-deploy[data-deployment] .deploy-tag { border-color: #a1b4c333; }
.s-deploy[data-deployment] .deploy-tag { color: #c1d4d9 !important; }
.s-deploy[data-deployment="online"] [data-deploy="online"],
.s-deploy[data-deployment="private"] [data-deploy="private"] { background: #0c141cb8; color: #fffdf8; border-color: #a1c5d077; }

@media (min-width: 961px) and (max-height: 860px) {
  .s-stats { padding-top: 96px; padding-bottom: 82px; }
  .s-stats .section-head { margin-bottom: 14px; }
  .s-stats .section-head h2 { font-size: 27px; }
  .s-stats .stat { padding: 13px 18px; }
  .s-stats .stat-value { font-size: 34px; }
  .s-stats .stat-definition { font-size: 10px; }
  .trends-grid { margin-top: 14px; }
  .trend-card > header { padding: 12px 18px 0; }
  .trend-plot { height: 235px; }
  .trends-status-row { margin-top: 8px; }
  .s-platforms .section-head { margin-bottom: 18px; }
  .s-platforms .section-head h2 { font-size: 27px; }
  .s-platforms .grid { gap: 12px; }
  .s-platforms .card { padding: 15px 18px; }
  .s-platforms .card-top { margin-bottom: 8px; }
  .s-platforms .card-foot { margin-top: 10px; padding-top: 9px; }
  .s-platforms .card-gallery .card-foot { margin: 0; padding: 0; }
}
@media (max-width: 960px) {
  .trends-grid { grid-template-columns: 1fr; }
  .trend-plot { height: 280px; }
  .card-gallery { display: flex; }
  .card-gallery .card-foot { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (hover: none) {
  .s-deploy [data-deploy="online"], .s-deploy[data-deployment] [data-deploy="online"] { background-image: linear-gradient(110deg, #10171db8, #10171d50), url('../images/deployment-online-line.webp'); }
  .s-deploy [data-deploy="private"], .s-deploy[data-deployment] [data-deploy="private"] { background-image: linear-gradient(110deg, #10171db8, #10171d50), url('../images/deployment-private-line.webp'); }
}
@media (max-width: 480px) {
  .s-stats .stat { padding: 16px 14px; }
  .s-stats .stat-label { font-size: 10px; }
  .s-stats .stat-definition { font-size: 9px; }
  .trend-card > header { padding-inline: 16px; }
  .trend-card h3 { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  body, .platform-overlay, .card[data-platform], html.js .card.reveal-fade, .card[data-platform] .card-logo { transition: none; }
  .card[data-platform]:is(:hover,:focus-within,.active) { translate: none; transform: none; }
  .card[data-platform]:is(:hover,:focus-within,.active) .card-logo { scale: none; }
}