/* ============================================================
   应用外壳：左侧栏 + 顶栏（对齐 XinY 一级结构）
   ============================================================ */

.app-shell {
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
  min-height: 100vh;
  background: #0b0b0c;
}
.side-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 14px 10px 10px;
  background: #0e0e10;
  border-right: 1px solid rgba(255,255,255,0.055);
}
.side-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px 16px;
}
.side-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.side-group {
  margin: 14px 9px 5px;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: #55555d;
}
.side-item {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 12.5px;
  color: #9c9ca4;
  transition: background 0.12s, color 0.12s;
}
.side-item .ic { color: #6d6d75; flex: none; }
.side-item:hover { background: #17171a; color: #e8e8ec; }
.side-item:hover .ic { color: #b9b9c1; }
.side-item.is-active { background: #1f1f23; color: #fff; }
.side-item.is-active .ic { color: #9dc2ff; }
.side-badge {
  margin-left: auto;
  font-style: normal;
  font-size: 8px;
  padding: 2px 4px;
  border-radius: 3px;
  color: #8fb5e8;
  background: rgba(110,168,255,0.14);
}
.side-foot { padding: 8px 4px 2px; border-top: 1px solid rgba(255,255,255,0.05); }
.side-version {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 11px;
  color: #77777f;
}
.side-version:hover { background: #17171a; color: #dcdce2; }
.side-version em { margin-left: auto; font-style: normal; font-size: 9px; color: #5f5f67; }

.app-body { min-width: 0; display: flex; flex-direction: column; }
.app-top {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 26px;
  background: rgba(11,11,12,0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.app-top .spacer { flex: 1; }
.top-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #8a8a92;
  padding: 5px 7px;
  border-radius: 6px;
}
.top-link:hover { color: #e6e6ea; background: #17171a; }
.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 14px;
  font-size: 11px;
  color: #f0dfc4;
  background: linear-gradient(92deg, rgba(240,193,132,0.18), rgba(240,193,132,0.08));
  box-shadow: inset 0 0 0 1px rgba(240,193,132,0.28);
}
.member-chip em {
  font-style: normal;
  font-size: 8.5px;
  padding: 1px 4px;
  border-radius: 3px;
  color: #2a1d0d;
  background: #f0c184;
}
.credit-chip.small {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  border-radius: 13px;
  font-size: 11px;
  color: #b9b9c1;
  background: #17171a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.app-main {
  flex: 1;
  padding: 22px 30px 48px;
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
}

/* ---------------- 首页 ---------------- */
.dash-hero { display: flex; flex-direction: column; gap: 16px; }
.new-canvas {
  position: relative;
  height: 132px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background-color: #141416;
  background-image: radial-gradient(rgba(255,255,255,0.075) 1px, transparent 1px);
  background-size: 18px 18px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  transition: box-shadow 0.18s, transform 0.18s;
}
.new-canvas:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); transform: translateY(-1px); }
.nc-plus {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #0c0c0d;
  background: #f1f1f3;
}
.nc-label { font-size: 13px; color: #dcdce2; }

.cap-row { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
.cap-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px 10px;
  border-radius: 11px;
  background: #151517;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.055);
  transition: background 0.14s, transform 0.14s;
}
.cap-item:hover { background: #1c1c20; transform: translateY(-1px); }
.cap-ico { color: #b9c8dc; }
.cap-label { font-size: 10.5px; color: #c9c9d0; white-space: nowrap; }
.cap-badge { font-style: normal; font-size: 8px; color: #7f7f87; }
.cap-badge.free { color: #7fd1a0; }

.dash-section { margin-top: 26px; }
.dash-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.dash-title { font-size: 14px; color: #ececf0; font-weight: 500; }
.dash-more { margin-left: auto; font-size: 10.5px; color: #6f6f77; display: inline-flex; align-items: center; gap: 2px; }
.dash-more:hover { color: #dcdce2; }
.dash-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.dash-tab {
  height: 24px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10.5px;
  color: #8a8a92;
}
.dash-tab:hover { background: #1a1a1d; color: #dcdce2; }
.dash-tab.is-active { background: #26262a; color: #fff; }
.feature-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; transition: opacity 0.2s; }
.feature-row.is-dim { opacity: 0.45; }
.feature-card { display: flex; flex-direction: column; gap: 7px; }
.fc-art {
  aspect-ratio: 16 / 9;
  border-radius: 9px;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  transition: transform 0.22s var(--ease);
}
.feature-card:hover .fc-art { transform: translateY(-2px); }
.fc-meta { display: flex; flex-direction: column; gap: 1px; }
.fc-meta b { font-size: 11.5px; color: #e4e4e8; font-weight: 500; }
.fc-meta i { font-style: normal; font-size: 9.5px; color: #6f6f77; }
.dash-foot { margin-top: 34px; display: flex; gap: 10px; font-size: 10px; color: #55555d; }
.dash-foot .spacer { flex: 1; }

/* ---------------- 插件 / 学院 / 挑战赛 / 版本 ---------------- */
.plugin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.plugin-card {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  border-radius: 11px;
  background: #141416;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.055);
}
.plugin-card.is-on { box-shadow: inset 0 0 0 1px rgba(110,168,255,0.28); }
.pc-ico {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: #1d1d21;
  color: #9dc2ff;
  flex: none;
}
.pc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pc-main b { font-size: 12.5px; color: #e6e6ea; font-weight: 500; }
.pc-main i { font-style: normal; font-size: 10px; line-height: 1.6; color: #6f6f77; }
.pc-tag { font-size: 8.5px; color: #7f7f87; flex: none; }
.plugin-card.is-on .pc-tag { color: #7fd1a0; }

.course-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.course-card { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.cc-art { aspect-ratio: 16 / 9; border-radius: 9px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.cc-body { display: flex; flex-direction: column; gap: 2px; }
.cc-body b { font-size: 12px; color: #e6e6ea; font-weight: 500; }
.cc-body i { font-style: normal; font-size: 10px; color: #6f6f77; }
.cc-body em { font-style: normal; font-size: 9px; color: #5f5f67; }

.kbd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kbd-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px; background: #141416; font-size: 10.5px; color: #9a9aa2; }
.kbd-row kbd {
  font-family: var(--mono);
  font-size: 9.5px;
  padding: 2px 5px;
  border-radius: 4px;
  color: #dcdce2;
  background: #232327;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.challenge-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
  padding: 18px;
  border-radius: 14px;
  background: #141416;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.ch-art { aspect-ratio: 16 / 9; border-radius: 10px; background-size: cover; background-position: center; }
.ch-copy { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.ch-tag { font-size: 9.5px; color: #f0c184; }
.ch-copy h2 { font-size: 20px; color: #fff; font-weight: 550; }
.ch-copy p { font-size: 11.5px; line-height: 1.8; color: #9a9aa2; }
.ch-meta { display: flex; gap: 12px; font-size: 10px; color: #6f6f77; flex-wrap: wrap; }
.ch-meta span { display: inline-flex; align-items: center; gap: 4px; }
.ch-copy .btn { align-self: flex-start; margin-top: 4px; }

.version-list { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.version-item { padding: 14px 16px; border-radius: 10px; background: #141416; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); }
.version-item.is-latest { box-shadow: inset 0 0 0 1px rgba(110,168,255,0.3); }
.v-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.v-head b { font-size: 13px; color: #f2f2f5; }
.v-head span { font-size: 10px; color: #6f6f77; }
.v-head em { font-style: normal; font-size: 8.5px; color: #9dc2ff; }
.version-item ul { display: flex; flex-direction: column; gap: 4px; padding-left: 16px; }
.version-item li { font-size: 11px; line-height: 1.7; color: #a8a8b0; list-style: disc; }

.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fs-card { padding: 16px; border-radius: 11px; background: #141416; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.055); }
.fs-card b { font-size: 12.5px; color: #ececf0; font-weight: 500; }
.fs-card ul { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; padding-left: 15px; }
.fs-card li { font-size: 11px; line-height: 1.7; color: #9a9aa2; list-style: disc; }

.box-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.box-step { padding: 15px; border-radius: 11px; background: #141416; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.055); display: flex; flex-direction: column; gap: 5px; }
.bs-num { font-size: 18px; color: #3f3f47; font-weight: 600; }
.box-step b { font-size: 12px; color: #e6e6ea; font-weight: 500; }
.box-step i { font-style: normal; font-size: 10.5px; line-height: 1.7; color: #6f6f77; }

.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 860px; }
.plan-card { padding: 18px; border-radius: 12px; background: #141416; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.055); display: flex; flex-direction: column; gap: 7px; }
.plan-card b { font-size: 14px; color: #f2f2f5; }
.plan-card em { font-style: normal; font-size: 12px; color: #f0c184; }
.plan-card i { font-style: normal; font-size: 10.5px; color: #6f6f77; }
.plan-card ul { display: flex; flex-direction: column; gap: 4px; padding-left: 15px; margin: 4px 0; }
.plan-card li { font-size: 10.5px; color: #9a9aa2; list-style: disc; }
.plan-card .btn { align-self: flex-start; margin-top: 4px; }

@media (max-width: 1180px) {
  .cap-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .feature-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plugin-grid, .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kbd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .box-steps, .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }
  .side-nav { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; }
  .side-scroll { flex-direction: row; }
  .side-group, .side-foot { display: none; }
  .app-main { padding: 16px; }
  .challenge-hero, .feature-split { grid-template-columns: 1fr; }
}