/* ============================================================
   通用组件 — hero / 统计条 / 卡片 / 矩阵 / 树 / 标签页 / 图例
   ============================================================ */

/* ---------- Hero 舰桥仪表带 ---------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 60vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(56rem 42rem at 85% -16%, var(--blob-accent), transparent 62%),
    radial-gradient(60rem 48rem at -14% 20%, var(--blob-primary), transparent 64%),
    radial-gradient(46rem 40rem at 58% 122%, var(--blob-violet), transparent 66%),
    radial-gradient(38rem 32rem at 40% 40%, var(--blob-azure), transparent 60%),
    linear-gradient(180deg, oklch(0.165 0.026 232), var(--bg) 130%);
  border-bottom: 1px solid var(--border-soft);
}
.hero .blueprint-grid { opacity: 0.85; background-size: 40px 40px; }
.hero.hero-xl { min-height: 86vh; }
@media (max-width: 720px) {
  .hero { min-height: 46vh; }
  .hero.hero-xl { min-height: 60vh; }
}

.hero-grid { position: absolute; inset: 0; z-index: 0; }
.hero-decor { position: absolute; z-index: 0; pointer-events: none; }
.hero-rig-wrap {
  position: absolute; z-index: 0; pointer-events: none;
  right: -8%; top: 50%; transform: translateY(-50%);
  width: min(600px, 48vw); aspect-ratio: 1 / 1; opacity: 0.85;
}
.hero.hero-xl .hero-rig-wrap { width: min(680px, 52vw); opacity: 0.95; }
@media (max-width: 900px) { .hero-rig-wrap { opacity: 0.3; width: 72vw; right: -22%; } }
.hero-inner { position: relative; z-index: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--sp-11) var(--sp-7); }
@media (max-width: 720px) { .hero-inner { padding: var(--sp-9) var(--sp-4); } }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 9px 20px; border-radius: var(--r-pill);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.08em;
  color: var(--primary); margin-bottom: var(--sp-6);
}
.hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--primary-wash); }

.hero-title { font-size: clamp(2.3rem, 1.6rem + 3.2vw, 4.1rem); margin-bottom: var(--sp-5); letter-spacing: -0.025em; }
.hero.hero-xl .hero-title { font-size: clamp(2.7rem, 1.6rem + 5vw, 5.6rem); }
.hero-desc { max-width: 66ch; color: var(--ink-2); font-size: clamp(1rem, 0.94rem + 0.3vw, 1.2rem); }

.hero-stats {
  display: flex; gap: var(--sp-4); margin-top: var(--sp-9); flex-wrap: wrap;
}
.hero-stat-pill {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  padding: var(--sp-5) var(--sp-6);
  min-width: 152px;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s var(--ease-out-expo), border-color 0.3s var(--ease-out-expo);
}
.hero-stat-pill:hover { transform: translateY(-3px); border-color: color-mix(in oklch, var(--primary) 40%, var(--glass-border)); }
.hero-stat-num { font-family: var(--font-mono); font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.9rem); font-weight: 700; color: var(--ink); line-height: 1; }
.hero-stat-label { color: var(--muted); font-size: 0.8rem; margin-top: var(--sp-2); }

/* 声呐扫描装饰 */
.sonar {
  position: absolute; border-radius: 50%; border: 1.5px solid var(--primary);
  opacity: 0; animation: sonar-ping 3.6s var(--ease-out-expo) infinite;
}
.sonar:nth-child(2) { animation-delay: 1.2s; }
.sonar:nth-child(3) { animation-delay: 2.4s; }
@keyframes sonar-ping {
  0% { transform: scale(0.2); opacity: 0.7; }
  100% { transform: scale(1.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sonar { animation: none; opacity: 0.16; transform: scale(0.85); }
}

/* 雷达旋转扫描臂 */
.radar-sweep { animation: radar-spin 5s linear infinite; }
@keyframes radar-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .radar-sweep { animation: none; } }

/* ---------- 统计条 ---------- */
.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-6);
}
.stat-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl); padding: var(--sp-6);
  transition: transform 0.3s var(--ease-out-expo), border-color 0.3s var(--ease-out-expo);
}
.stat-card:hover { transform: translateY(-3px); border-color: color-mix(in oklch, var(--primary) 35%, var(--glass-border)); }
.stat-card .num { font-family: var(--font-mono); font-size: 2.4rem; font-weight: 700; }
.stat-card .label { color: var(--ink-2); font-size: 0.86rem; margin-top: var(--sp-2); font-weight: 600; }
.stat-card .delta { font-family: var(--font-mono); font-size: 0.72rem; margin-left: var(--sp-2); }
.delta-up { color: var(--status-good); }

.stat-card-icon { position: relative; overflow: hidden; }
.stat-card-icon::before {
  content: ""; position: absolute; top: -30%; right: -30%; width: 70%; height: 70%;
  background: radial-gradient(circle, var(--accent-cat, var(--primary)), transparent 70%);
  opacity: 0.18; border-radius: 50%;
}
.stat-card-icon-mark { display: block; width: 30px; height: 30px; color: var(--accent-cat, var(--primary)); margin-bottom: var(--sp-4); position: relative; }

/* ---------- 面板 ---------- */
.panel {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-2xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-lg);
}
.panel-tight { padding: var(--sp-6); }

/* ---------- 课程 / 知识点 卡片网格 ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-6); }
.tile-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .tile-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tile-grid-3 { grid-template-columns: 1fr; } }
.tile-grid-3 .course-tile-art { height: 190px; }
.tile-grid-3 .course-tile-art svg { width: 100px; height: 100px; }
.tile-grid-3 .course-tile-body { padding: var(--sp-6) var(--sp-7) var(--sp-7); }
.tile-grid-3 .course-tile-name { font-size: 1.34rem; }

.course-tile {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 0.35s var(--ease-out-expo), border-color 0.35s var(--ease-out-expo), box-shadow .35s var(--ease-out-expo);
}
.course-tile:hover { transform: translateY(-6px) scale(1.01); border-color: color-mix(in oklch, var(--primary) 40%, var(--glass-border)); box-shadow: var(--shadow-xl); }
.course-tile:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.course-tile-art { height: 152px; position: relative; display: flex; align-items: center; justify-content: center; }
.course-tile-art svg { width: 84px; height: 84px; filter: drop-shadow(0 8px 20px rgba(0,0,0,.35)); }
.course-tile-badge {
  position: absolute; top: var(--sp-4); left: var(--sp-4);
  font-size: 0.68rem; padding: 3px 10px;
}
.course-tile-term {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-2);
  background: oklch(0.1 0.02 235 / 0.55); padding: 3px 10px; border-radius: var(--r-pill);
}
.course-tile-body { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.course-tile-name { font-size: 1.2rem; font-weight: 700; margin-bottom: var(--sp-2); letter-spacing: -0.01em; }
.course-tile-code { font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); }
.course-tile-meta { display: flex; gap: var(--sp-4); margin-top: var(--sp-4); font-size: 0.76rem; color: var(--muted); }
.course-tile-meta b { font-family: var(--font-mono); color: var(--ink-2); font-weight: 600; font-size: 0.95rem; }

/* ---------- 标签页 ---------- */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border-soft); }
.tab {
  padding: var(--sp-3) var(--sp-4); font-size: 0.86rem; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .2s var(--ease-out-expo), border-color .2s var(--ease-out-expo);
}
.tab:hover { color: var(--ink-2); }
.tab.active { color: var(--primary); border-color: var(--primary); font-weight: 600; }

/* ---------- 筛选 chip ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  padding: 6px var(--sp-4); border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 0.78rem; color: var(--ink-2);
  transition: all .2s var(--ease-out-expo);
}
.chip:hover { border-color: var(--border-strong); }
.chip.active { background: var(--primary-wash); border-color: color-mix(in oklch, var(--primary) 45%, transparent); color: var(--primary); font-weight: 600; }

/* ---------- 表格 / 支撑矩阵 ---------- */
.table-scroll { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border-soft); }
.matrix-table { min-width: 640px; font-size: 0.82rem; }
.matrix-table th, .matrix-table td {
  padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
.matrix-table thead th {
  background: var(--surface-2); color: var(--muted); font-weight: 600;
  font-size: 0.72rem; position: sticky; top: 0; z-index: 1;
}
.matrix-table tbody tr:hover { background: var(--surface-2); }
.matrix-table td.rowhead { font-weight: 600; color: var(--ink); white-space: normal; }
.matrix-table td.sub { color: var(--muted); font-size: 0.72rem; font-weight: 400; }

.cell-support {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 22px; border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
}
.cell-H { background: var(--status-critical-wash); color: var(--status-critical); }
.cell-M { background: var(--status-warning-wash); color: var(--status-warning); }
.cell-L { background: var(--primary-wash); color: var(--primary); }
.cell-none { color: var(--muted-2); }

/* ---------- 知识树 ---------- */
.tree { font-size: 0.86rem; }
.tree-node { position: relative; }
.tree-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-2); border-radius: var(--r-sm);
  cursor: pointer; transition: background-color .15s var(--ease-out-expo);
}
.tree-row:hover { background: var(--surface-2); }
.tree-row.is-open > .tree-caret { transform: rotate(90deg); }
.tree-caret {
  width: 16px; height: 16px; flex-shrink: 0; color: var(--muted);
  transition: transform .2s var(--ease-out-expo);
}
.tree-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--muted-2); }
.tree-label { flex: 1; }
.tree-count { font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); }
.tree-children { margin-left: 20px; padding-left: var(--sp-3); border-left: 1px dashed var(--border); overflow: hidden; }
.tree-children[hidden] { display: none; }

/* ---------- 图例 ---------- */
.legend-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--muted); }
.legend-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ---------- 空状态 ---------- */
.empty-state { text-align: center; padding: var(--sp-10) var(--sp-5); color: var(--muted); }
.empty-state svg { width: 56px; height: 56px; margin: 0 auto var(--sp-4); opacity: 0.6; }

/* ---------- 工具提示 ---------- */
.tooltip-layer { position: fixed; z-index: var(--z-tooltip); pointer-events: none; }
.tooltip-card {
  background: var(--surface-3); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  font-size: 0.78rem; max-width: 260px; box-shadow: var(--shadow-lg);
}
.tooltip-card .t-title { font-weight: 700; margin-bottom: 4px; }
.tooltip-card .t-meta { color: var(--muted); font-size: 0.7rem; }

/* ---------- 进度条 ---------- */
.bar-track { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--r-pill); background: var(--primary); transition: width .6s var(--ease-out-expo); position: relative; }

.bar-track-lg { height: 12px; background: oklch(0.08 0.015 235); border: 1px solid var(--glass-border); }
.bar-fill-flow {
  position: relative; overflow: hidden;
  box-shadow: 0 0 12px -1px currentColor;
}
.bar-fill-flow::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.32) 0 6px, transparent 6px 14px);
  animation: bar-flow 1.1s linear infinite;
}
@keyframes bar-flow { from { background-position: 0 0; } to { background-position: 28px 0; } }
@media (prefers-reduced-motion: reduce) { .bar-fill-flow::before { animation: none; } }
.bar-fill-glow {
  position: absolute; right: -3px; top: 50%; translate: 0 -50%;
  width: 8px; height: 8px; border-radius: 50%; filter: blur(2px);
  box-shadow: 0 0 10px 3px currentColor;
}

/* ---------- HUD 刻度环 ---------- */
.chart-tick-ring { animation: tick-spin 40s linear infinite; transform-origin: center; }
@keyframes tick-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chart-tick-ring { animation: none; } }

/* ---------- HUD 边角框（军工科技质感面板） ---------- */
.hud-frame { position: relative; }
.hud-frame::before, .hud-frame::after,
.hud-frame .hud-corner-tl, .hud-frame .hud-corner-br { content: ""; }
.hud-frame::before, .hud-frame::after {
  position: absolute; width: 22px; height: 22px; pointer-events: none;
  border: 2px solid var(--primary); opacity: 0.55;
}
.hud-frame::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.hud-frame::after { bottom: 10px; right: 10px; border-left: none; border-top: none; }

/* ---------- 徽标图形（罗盘） ---------- */
.compass-mark { transform-origin: 50% 50%; }

/* ---------- 登录 / 用户菜单 ---------- */
.user-menu { position: relative; }
.user-chip {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-3) 6px 6px;
  border-radius: var(--r-pill); background: var(--glass-bg); border: 1px solid var(--glass-border);
  font-size: 0.82rem; color: var(--ink-2); cursor: pointer;
  transition: border-color .2s var(--ease-out-expo), background-color .2s var(--ease-out-expo);
}
.user-chip:hover { border-color: color-mix(in oklch, var(--primary) 40%, var(--glass-border)); }
.user-chip .avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary-dim), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: oklch(0.15 0.02 235);
}
.user-chip-text { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.user-chip-name { font-weight: 600; color: var(--ink); font-size: 0.82rem; }
.user-chip-role { font-size: 0.68rem; color: var(--muted); }
.user-caret { color: var(--muted); flex-shrink: 0; }

.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); width: 220px;
  background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--r-lg);
  padding: var(--sp-3); box-shadow: var(--shadow-xl); z-index: var(--z-dropdown);
}
.user-dropdown-row { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2) var(--sp-3); font-size: 0.78rem; }
.user-dropdown-item {
  width: 100%; text-align: left; padding: var(--sp-3); border-radius: var(--r-md);
  font-size: 0.84rem; color: var(--status-critical); transition: background-color .15s var(--ease-out-expo);
}
.user-dropdown-item:hover { background: var(--status-critical-wash); }

/* ---------- 登录弹窗 ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal-backdrop);
  background: oklch(0.05 0.01 235 / 0.65); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-5);
}
.modal-backdrop[hidden] { display: none; }
.modal-card {
  position: relative; width: min(460px, 100%);
  background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--r-2xl);
  padding: var(--sp-8); box-shadow: var(--shadow-xl);
  animation: modal-in .3s var(--ease-out-expo) both;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal-card { animation: none; } }
.modal-close { position: absolute; top: var(--sp-5); right: var(--sp-5); font-size: 1.4rem; line-height: 1; color: var(--muted); }
.modal-close:hover { color: var(--ink); }
.modal-title { font-size: 1.4rem; margin-bottom: var(--sp-3); }
.modal-desc { color: var(--ink-2); font-size: 0.88rem; margin-bottom: var(--sp-6); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-6); }

/* ---------- 登录表单 ---------- */
.form-field { margin-bottom: var(--sp-5); }
.form-label { display: block; font-size: 0.82rem; color: var(--ink-2); margin-bottom: var(--sp-2); font-weight: 600; }
.form-input {
  width: 100%; padding: 11px var(--sp-4); border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--glass-border);
  color: var(--ink); font-size: 0.92rem;
  transition: border-color .2s var(--ease-out-expo), background-color .2s var(--ease-out-expo);
}
.form-input::placeholder { color: var(--muted-2); }
.form-input:focus { outline: none; border-color: var(--primary); background: var(--surface-3); }
.form-input.has-error { border-color: var(--status-critical); }
.form-error { color: var(--status-critical); font-size: 0.74rem; margin-top: 6px; }
.form-error[hidden] { display: none; }
.form-row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); font-size: 0.82rem; }
.form-check { display: flex; align-items: center; gap: 6px; color: var(--ink-2); cursor: pointer; }
.form-check input { accent-color: var(--primary); }
.form-link { color: var(--primary); }
.form-link:hover { text-decoration: underline; }