/* ============ 字体（本地打包） ============ */
@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  src: url('../fonts/AlibabaPuHuiTi-3-55-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  src: url('../fonts/AlibabaPuHuiTi-3-65-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  src: url('../fonts/AlibabaPuHuiTi-3-85-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  src: url('../fonts/AlibabaPuHuiTi-3-115-Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'D-DIN Exp';
  src: url('../fonts/D-DINExp-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}

/* ============ 基础 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --font-cn: 'Alibaba PuHuiTi 3.0', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-num: 'D-DIN Exp', 'DIN Alternate', 'Bahnschrift', 'Arial Narrow', sans-serif;
  --c-text: #E0E5F3;
  --c-sub: #A0A9C0;
  --c-muted: #8C9BAE;
  --c-num: #EAF1FF;
  --c-up: #2FD293;
  --c-down: #D22F2F;
  --panel-bg:
    radial-gradient(141.44% 141.42% at 100% 100%, rgba(44, 83, 122, 0) 86.35%, rgba(44, 83, 122, 0.5) 100%),
    radial-gradient(79.5% 76.04% at 50% 50%, #060C21 35.45%, #141F40 78.25%, #2A3766 100%);
  --panel-border: conic-gradient(from 180deg at 50% 50%,
    rgba(52, 52, 82, 0.3) 0%,
    rgba(94, 109, 147, 1) 12%, rgba(52, 52, 82, 0.3) 25%, rgba(86, 98, 134, 0.87) 36%,
    rgba(139, 157, 204, 1) 38%, rgba(77, 86, 121, 0.72) 40%, rgba(52, 52, 82, 0.3) 50%,
    rgba(94, 109, 147, 1) 62%, rgba(52, 52, 82, 0.3) 75%, rgba(94, 109, 147, 1) 88%, rgba(52, 52, 82, 0.3) 100%);
  --card-bg: radial-gradient(circle at 0% 0%, rgba(43, 61, 107, 1) 0%, rgba(15, 25, 52, 1) 100%);
  --card-border: radial-gradient(circle at 0% -32%, rgba(74, 92, 137, 1) 0%, rgba(74, 92, 137, 0.1) 38%, rgba(74, 92, 137, 0.1) 86%, rgba(74, 92, 137, 0.5) 100%);
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #010A20;
  font-family: var(--font-cn);
  color: var(--c-text);
}

/* ============ 舞台：1920x1080 等比缩放 ============ */
#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  background: radial-gradient(circle at 50% 0%, rgba(2, 7, 30, 1) 0%, rgba(1, 17, 47, 1) 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============ 顶部栏 ============ */
.top-bar {
  flex: none;
  height: 74px;
  padding: 16px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: radial-gradient(circle at 50% 50%, rgba(6, 12, 33, 1) 35%, rgba(20, 31, 64, 1) 78%, rgba(42, 55, 102, 1) 100%);
  position: relative;
  backdrop-filter: blur(20px);
  border-radius: 0 0 20px 20px;
  z-index: 10;
}
.top-left { display: flex; align-items: center; gap: 40px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo { width: 30px; height: 30px; }
.brand h1 {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--c-text);
  white-space: nowrap;
}
.source { display: flex; align-items: center; gap: 12px; }
.source span { font-size: 16px; font-weight: 500; color: var(--c-sub); white-space: nowrap; }
.top-right { display: flex; align-items: center; gap: 40px; }
/* 双大屏下拉选择器 */
.page-nav { position: relative; }
.page-nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: none;
  border-radius: 20px;
  background: #1F2C4D;
  box-shadow: inset -1px 1px 3px 0 rgba(255, 255, 255, 0.04);
  color: #E8F2FF;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.page-nav-btn .chev {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid #8C9BAE;
  border-bottom: 1.6px solid #8C9BAE;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.page-nav.open .page-nav-btn .chev { transform: rotate(-135deg) translateY(-2px); }
.page-nav-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  display: none;
  flex-direction: column;
  min-width: 100%;
  padding: 4px;
  border-radius: 16px;
  background: rgba(31, 44, 77, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset -1px 1px 3px 0 rgba(255, 255, 255, 0.04);
  z-index: 60;
}
.page-nav.open .page-nav-menu { display: flex; }
.page-nav-menu a {
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 14px;
  color: #A0A9C0;
  text-decoration: none;
  white-space: nowrap;
}
.page-nav-menu a.on {
  background: radial-gradient(circle at 50% 0%, #3B4B75 0%, #2B3C6B 100%);
  color: #E8F2FF;
  font-weight: 700;
}
.page-nav-menu a:hover:not(.on) { color: #E0E5F3; }
.datetime { display: flex; align-items: center; gap: 16px; }
.datetime span { font-size: 16px; font-weight: 500; color: var(--c-text); white-space: nowrap; }
.weather { display: flex; align-items: center; gap: 12px; }
.weather span { font-size: 16px; font-weight: 500; color: var(--c-text); white-space: nowrap; }
.weather img { width: 22px; height: 22px; }

/* ============ 主体三列 ============ */
.board {
  flex: 1;
  display: flex;
  gap: 16px;
  padding: 16px 24px 24px;
  min-height: 0;
}
.col { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.col-left, .col-right { width: 480px; flex: none; }
.col-mid { flex: 1; min-width: 0; }

/* ============ 面板通用 ============ */
.panel {
  position: relative;
  border-radius: 24px;
  background: var(--panel-bg);
  box-shadow: 0 0 36px 0 rgba(191, 237, 255, 0.08);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* 锥形渐变描边：内层正方形角度空间按模块宽高比拉伸（还原 Figma 椭圆角度渐变），
   外层遮罩环保持 1.6px 均匀厚度 */
.panel-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.6px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.panel-ring > i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%) scaleX(var(--ar, 1));
  background: var(--panel-border);
}
.panel-head { padding: 20px 20px 0; flex: none; }
.panel-head.pad24 { padding: 24px 24px 0; }
.panel-head h2 {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(229, 231, 255, 1) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.2);
}

/* ============ 左列：课程卡片 ============ */
.courses-panel { flex: 1; min-height: 0; }
.course-grid {
  flex: 1;
  padding: 20px 8px 20px 20px;
  min-height: 0;
}
.course-viewport { height: 100%; overflow: hidden; }
.course-track {
  display: flex;
  width: 200%;
  height: 100%;
  animation: courseScroll 8.33s cubic-bezier(.3, .1, .2, 1) infinite;
}
.course-grid:hover .course-track { animation-play-state: paused; }
/* 一次切换一列：停留 → 缓动滑动 → 停留，双份内容无缝循环；节奏比实时动态略慢 */
@keyframes courseScroll {
  0%, 42% { transform: translateX(0); }
  47%, 92% { transform: translateX(-25%); }
  97%, 100% { transform: translateX(-50%); }
}
.course-col {
  width: 25%;
  padding-right: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.course-card {
  display: flex;
  gap: 10px;
  padding: 16px;
  flex: 1;
  min-height: 0;
  border-radius: 16px;
  background: var(--card-bg);
  border: 1.6px solid transparent;
  background-clip: padding-box;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
}
.course-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1.6px;
  background: var(--card-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.course-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 16px rgba(119, 110, 250, 0.25);
}
.course-cover {
  width: 64px;
  align-self: stretch;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
}
.course-info { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.course-meta { display: flex; flex-direction: column; gap: 2px; }
.course-info h3 { font-size: 15px; font-weight: 700; color: var(--c-text); line-height: 1.2em; white-space: nowrap; }
.course-info p { font-size: 12px; font-weight: 500; color: var(--c-sub); line-height: 1.2em; white-space: nowrap; }

/* ============ 左列：活动小卡 ============ */
.activity-row { display: flex; gap: 12px; flex: none; }
.activity-card { flex: 1; min-width: 0; }
.activity-body { flex: 1; padding: 12px 0 0; display: flex; flex-direction: column; min-height: 0; }
.activity-num { display: flex; align-items: flex-end; gap: 4px; padding: 0 20px; }
.activity-num .num {
  font-family: var(--font-num);
  font-size: 22px;
  font-weight: 700;
  line-height: 1em;
  color: var(--c-num);
}
.activity-num .unit { font-size: 12px; color: var(--c-muted); padding-bottom: 1px; }
.activity-delta { display: flex; justify-content: space-between; margin-top: 8px; padding: 0 20px; }
.delta-item { display: flex; flex-direction: column; gap: 2px; }
.delta-label { font-size: 14px; color: var(--c-muted); }
.delta { font-size: 14px; }
.delta.up { color: var(--c-up); }
.delta.down { color: var(--c-down); }
.mini-chart-wrap { position: relative; height: 112px; flex: none; margin-top: 6px; }
.mini-chart { position: absolute; top: 8px; left: 0; right: 0; height: 62px; }
.mini-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mini-chart svg path[stroke] { filter: drop-shadow(0 0 6px rgba(133, 92, 255, 0.55)); }
.mini-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #855CFF;
  transform: translate(-50%, -50%);
  display: none;
  pointer-events: none;
}
.mini-vline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.3);
  display: none;
  pointer-events: none;
}
.mini-dates {
  position: absolute;
  top: 75px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  white-space: nowrap;
}
.mini-dates span { font-size: 12px; font-weight: 500; color: var(--c-sub); }

/* ============ 左列：师生活动类型分布 ============ */
.type-panel { height: 400px; flex: none; }
.type-body { position: relative; flex: 1; margin: 20px; min-height: 0; }
.type-dot { position: absolute; border-radius: 50%; }
.type-ring { position: absolute; left: 100.3px; top: 56.5px; width: 239.5px; height: 229px; }
.type-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(32, 48, 92, 0.5) 0%);
  backdrop-filter: blur(10px);
}
.type-card-head { display: flex; align-items: center; gap: 6px; }
.type-card-head i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.type-card-head span { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.2em; white-space: nowrap; }
.type-card-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.type-card-row span { font-size: 12px; color: var(--c-text); line-height: 1.2em; white-space: nowrap; }
.type-card-row b { font-family: var(--font-num); font-size: 16px; font-weight: 700; line-height: 1em; min-width: 38px; text-align: right; }
.tc-teal { color: #71F5EC; }
.tc-blue { color: #66D1FF; }
.tc-indigo { color: #80A1FF; }
.tc-purple { color: #B280FF; }
.tc-violet { color: #8C87FC; }

/* ============ 条形图（TOP10 / 活跃学院） ============ */
.bar-panel { flex: 1; min-height: 0; }
.bar-chart { flex: 1; padding: 20px; min-height: 0; display: flex; flex-direction: column; }
.bar-plot { flex: 1; position: relative; display: flex; min-height: 0; }
.bar-grid {
  position: absolute;
  left: 92px;
  right: 52px;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.bar-grid i { width: 0; border-left: 1px dashed rgba(25, 39, 82, 0.9); }
.bar-grid i:first-child { border-left: 1px solid #192752; }
.bar-rows { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 4px 0; position: relative; }
.bar-row { display: flex; align-items: center; gap: 12px; height: 16px; cursor: pointer; }
.bar-label {
  width: 80px;
  flex: none;
  font-size: 10px;
  line-height: 16px;
  color: var(--c-sub);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-track {
  flex: 1;
  height: 10px;
  border-radius: 20px;
  background: linear-gradient(90deg, rgba(11, 24, 51, 1) 0%, rgba(20, 37, 71, 1) 100%);
  position: relative;
  overflow: visible;
}
.bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 10px;
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.24);
  width: 0;
  transition: width 1.2s cubic-bezier(.25, .7, .3, 1), filter .2s ease;
}
.bar-row:hover .bar-fill { filter: brightness(1.35) saturate(1.2); }
.bar-row:hover .bar-value { color: #fff; }
.bar-value {
  width: 40px;
  flex: none;
  font-family: Roboto, var(--font-num);
  font-size: 14px;
  color: #707686;
  text-align: right;
  transition: color .2s ease;
}
.bar-axis {
  flex: none;
  height: 18px;
  margin-left: 92px;
  margin-right: 52px;
  display: flex;
  justify-content: space-between;
  padding-top: 4px;
}
.bar-axis span { font-size: 12px; line-height: 14px; color: #707686; font-family: var(--font-cn); }

/* ============ 中列：全景图 ============ */
.panorama-panel { flex: 1; min-height: 0; overflow: hidden; }
.panorama-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.panorama-panel .panel-head { position: relative; z-index: 2; }
.panorama-body {
  flex: 1;
  position: relative;
  z-index: 2;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  min-height: 0;
}
.metric-col { display: flex; flex-direction: column; justify-content: space-between; }
.metric-col.right { align-items: flex-end; }
.metric-card {
  width: 216px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  border-radius: 20px;
  background: radial-gradient(circle at 0% -27%, rgba(43, 61, 107, 1) 0%, rgba(15, 25, 52, 1) 52%, rgba(26, 42, 85, 1) 100%);
  border: 1.6px solid transparent;
  background-clip: padding-box;
  position: relative;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.04);
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
}
.metric-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1.6px;
  background: var(--card-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.metric-card:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 24px rgba(119, 110, 250, 0.35);
}
.metric-icon { width: 54px; height: 54px; flex: none; }
.metric-text { display: flex; flex-direction: column; gap: 6px; }
.metric-text h3 { font-size: 16px; font-weight: 700; color: var(--c-text); line-height: 1.2em; }
.metric-num { display: flex; align-items: baseline; gap: 4px; }
.metric-num .num {
  font-family: var(--font-num);
  font-size: 26px;
  font-weight: 700;
  color: var(--c-num);
  line-height: 1em;
}
.metric-num .unit { font-size: 14px; color: var(--c-muted); }
.metric-delta { display: flex; align-items: center; gap: 2px; }
.metric-delta .delta-label { font-size: 14px; color: var(--c-muted); }
.metric-delta .delta { font-size: 14px; }

/* ============ 中列：AI 智能洞察 ============ */
.insight-panel { flex: none; }
.insight-row { display: flex; gap: 12px; padding: 20px; }
.insight-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
  border-radius: 20px;
  background: var(--card-bg);
  border: 1.6px solid transparent;
  background-clip: padding-box;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
}
.insight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1.6px;
  background: var(--card-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.insight-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 16px rgba(119, 110, 250, 0.25);
}
.insight-head { display: flex; align-items: center; gap: 8px; }
/* 切图 SVG 画布 48×48 含发光留白，图标本体 30px；按自然尺寸渲染 + 负外边距保持布局占位 30px */
.insight-icon { width: 48px; height: 48px; margin: -8.93px; flex: none; }
.insight-head h3 { font-size: 17px; font-weight: 700; color: var(--c-text); line-height: 1.2em; }
.insight-card > p { font-size: 13px; font-weight: 400; color: #ABB5CC; line-height: 1.5em; }

/* ============ 中列：实时动态 ============ */
.feeds-row { display: flex; gap: 16px; height: 294px; flex: none; }
.feed-panel { flex: 1; min-width: 0; }
.feed-body { flex: 1; display: flex; gap: 16px; padding: 16px 20px 16px 20px; min-height: 0; }
.feed-timeline {
  flex: none;
  width: 27px;
  height: 216px;
  margin: 0 -7px;
  align-self: center;
}
.feed-list { flex: 1; min-width: 0; overflow: hidden; position: relative; }
.feed-track { display: flex; flex-direction: column; }
.feed-group { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.feed-track.scrolling { animation: feedScroll 10s cubic-bezier(.3, .1, .2, 1) infinite; }
.feed-list:hover .feed-track.scrolling { animation-play-state: paused; }
/* 逐条切换：停留 → 缓动滑动 → 停留，循环无缝 */
@keyframes feedScroll {
  0%, 28% { transform: translateY(0); }
  33.33%, 61.33% { transform: translateY(-16.6667%); }
  66.66%, 94.66% { transform: translateY(-33.3333%); }
  100% { transform: translateY(-50%); }
}
.feed-card {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 20px;
  background: var(--card-bg);
  border: 1.6px solid transparent;
  background-clip: padding-box;
  position: relative;
  transition: box-shadow .25s ease, transform .25s ease;
}
.feed-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1.6px;
  background: var(--card-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.feed-card:hover { transform: translateX(2px); box-shadow: 0 0 16px rgba(119, 110, 250, 0.25); }
.feed-avatar { width: 40px; height: 40px; border-radius: 999px; flex: none; object-fit: cover; }
.feed-avatar.halo-blue {
  padding: 8px;
  background: linear-gradient(135deg, rgba(123, 189, 255, 0.3) 0%, rgba(70, 115, 238, 0.1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.04), inset 6px 6px 16px rgba(107, 132, 245, 0.3);
}
.feed-avatar.halo-purple {
  padding: 8px;
  background: linear-gradient(135deg, rgba(161, 123, 255, 0.3) 0%, rgba(150, 70, 238, 0.24) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.04), inset 0 0 16px rgba(183, 107, 245, 0.5);
}
.feed-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.feed-head { display: flex; align-items: center; }
.feed-name-wrap { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.feed-name { font-size: 13px; font-weight: 600; color: #B3B7C2; white-space: nowrap; }
.feed-dept { font-size: 12px; font-weight: 500; color: var(--c-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-time { font-size: 12px; color: var(--c-sub); flex: none; }
.feed-desc {
  font-size: 12px;
  line-height: 18px;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============ 右列：出勤统计 ============ */
.attend-panel { flex: none; }
.attend-body { display: flex; align-items: center; justify-content: center; gap: 42px; padding: 24px 20px; }
.donut-wrap { position: relative; width: 180px; height: 180px; flex: none; }
.donut-wrap svg { width: 180px; height: 180px; transform: rotate(-90deg); overflow: visible; }
.donut-wrap svg circle { transition: stroke-width .2s ease, filter .2s ease; cursor: pointer; }
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
}
.donut-center .num {
  font-family: var(--font-num);
  font-size: 28px;
  font-weight: 700;
  line-height: 1em;
  color: var(--c-text);
}
.donut-label { font-size: 15px; color: var(--c-text); }
.attend-legend {
  width: 162px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 20px;
  background: var(--card-bg);
  border: 1.6px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.attend-legend::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1.6px;
  background: var(--card-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.legend-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  -webkit-mask: radial-gradient(circle, transparent 2.7px, #000 3px);
  mask: radial-gradient(circle, transparent 2.7px, #000 3px);
}
.legend-name { flex: 1; font-size: 14px; font-weight: 500; color: var(--c-sub); white-space: nowrap; }
.legend-value { font-size: 14px; font-weight: 500; color: var(--c-sub); }
.legend-row:hover .legend-name, .legend-row:hover .legend-value { color: #fff; }

/* ============ 右列：AI 使用统计 ============ */
.ai-panel { flex: none; }
.ai-row { display: flex; gap: 8px; padding: 20px; }
.ai-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 4px;
  border-radius: 16px;
  background: radial-gradient(circle at 0% 0%, rgba(43, 61, 107, 1) 0%, rgba(15, 25, 52, 1) 76%);
  border: 1.6px solid transparent;
  background-clip: padding-box;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
}
.ai-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1.6px;
  background: radial-gradient(circle at 4% -4%, rgba(74, 92, 137, 1) 0%, rgba(74, 92, 137, 0.1) 19%, rgba(74, 92, 137, 0.1) 47%, rgba(74, 92, 137, 0.5) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.ai-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(157, 92, 255, 0.3); }
.ai-icon { width: 64px; height: 64px; }
.ai-num { display: flex; align-items: baseline; gap: 4px; }
.ai-num .num {
  font-family: var(--font-num);
  font-size: 22px;
  font-weight: 700;
  line-height: 1em;
  color: var(--c-num);
}
.ai-num .unit { font-size: 12px; color: var(--c-muted); }
.ai-card p { font-size: 13px; font-weight: 500; line-height: 20px; color: rgba(224, 229, 243, 0.7); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ============ 进场动效 ============ */
.top-bar, .panel {
  animation: panelIn .7s cubic-bezier(.22, .7, .3, 1) both;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(26px) scale(.98); }
  to { opacity: 1; transform: none; }
}
/* 减弱动效偏好：直接呈现最终状态 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============ 悬浮提示 ============ */
.tooltip {
  position: absolute;
  z-index: 99;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(32, 48, 92, 0.85) 0%, rgba(20, 31, 64, 0.9) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(139, 157, 204, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease;
}
/* 显示时：透明度渐显 + 位置平滑跟随 */
.tooltip.show {
  opacity: 1;
  visibility: visible;
  transition: opacity .18s ease, left .15s cubic-bezier(.2, .7, .3, 1), top .15s cubic-bezier(.2, .7, .3, 1);
}
.tooltip .tip-title { font-size: 14px; font-weight: 800; color: #fff; line-height: 1em; }
.tooltip .tip-row { display: flex; align-items: center; gap: 4px; }
.tooltip .tip-dot { width: 6px; height: 6px; border-radius: 50%; background: #855CFF; }
.tooltip .tip-text { font-size: 12px; color: var(--c-text); }