@charset "utf-8";

/* ============================================================
   CyberPunk Dashboard — 云端招聘会数据大屏
   设计风格：赛博朋克 · 霓虹暗黑 · 全息投影
   ============================================================ */

/* ---------- Reset & Base ---------- */
* { box-sizing: border-box; }
body, html {
  padding: 0; margin: 0;
  font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", sans-serif;
  color: #fff;
  overflow: hidden;
  height: 100%;
  -webkit-font-smoothing: antialiased;
}
@font-face {
  font-family: electronicFont;
  src: url(../../font/DS-DIGIT.TTF);
}
body {
  display: flex; flex-direction: column;
  background: #050816;
  position: relative;
}
/* 动态网格背景 */
body::before {
  content: "";
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 0;
  background:
    linear-gradient(90deg, rgba(0,240,255,0.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0,240,255,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridMove 20s linear infinite;
  pointer-events: none;
}
@keyframes gridMove {
  0% { background-position: 0 0; }
  100% { background-position: 50px 50px; }
}
/* 背景光晕 */
body::after {
  content: "";
  position: fixed; z-index: 0; pointer-events: none;
  top: -30%; left: -20%; right: -20%; bottom: -30%;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(0,240,255,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(183,55,242,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(0,206,201,0.05) 0%, transparent 50%);
  animation: glowPulse 8s ease-in-out infinite alternate;
}
@keyframes glowPulse {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

li { list-style: none; }
a { text-decoration: none; }
ol, ul, p, h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; }
img { border: none; max-width: 100%; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00f0ff, #b537f2);
  border-radius: 2px;
}
::-webkit-scrollbar-track { background: rgba(0,240,255,0.03); }

/* ---------- Loading ---------- */
.loading {
  position: fixed; left: 0; top: 0; z-index: 100000;
  width: 100%; height: 100%;
  background: #050816;
  text-align: center; font-size: 16px;
}
.loadbox {
  position: absolute; width: 160px; height: 150px;
  color: rgba(0,240,255,0.6);
  left: 50%; top: 50%;
  margin-top: -100px; margin-left: -75px;
}
.loadbox img { margin: 10px auto; display: block; width: 40px; }

/* ---------- Header ---------- */
.header {
  flex-shrink: 0; z-index: 100;
  height: 1.05rem;
  background: linear-gradient(180deg,
    rgba(8,12,32,0.98) 0%,
    rgba(5,8,22,0.95) 100%);
  border-bottom: 1px solid rgba(0,240,255,0.15);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  backdrop-filter: blur(14px);
  overflow: hidden;
}
/* 头部扫描线 */
.header::after {
  content: "";
  position: absolute; top: 0; left: -100%; width: 200%; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, transparent 40%,
    rgba(0,240,255,0.6) 50%,
    transparent 60%, transparent 100%);
  animation: headerScan 4s linear infinite;
}
@keyframes headerScan {
  0% { transform: translateX(0); }
  100% { transform: translateX(50%); }
}
/* 头部底栏发光 */
.header::before {
  content: "";
  position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(0,240,255,0.5), #00f0ff,
    rgba(183,55,242,0.5), transparent);
  box-shadow:
    0 0 10px rgba(0,240,255,0.4),
    0 0 20px rgba(0,240,255,0.2),
    0 0 40px rgba(183,55,242,0.1);
}
.header-center {
  display: flex; align-items: center; gap: 10px;
  overflow: hidden;
}
.header-center img {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  border: 2px solid rgba(0,240,255,0.5);
  flex-shrink: 0;
  box-shadow:
    0 0 15px rgba(0,240,255,0.3),
    0 0 30px rgba(0,240,255,0.1),
    inset 0 0 10px rgba(0,240,255,0.1);
  animation: logoGlow 3s ease-in-out infinite alternate;
}
@keyframes logoGlow {
  0% { box-shadow: 0 0 15px rgba(0,240,255,0.3), 0 0 30px rgba(0,240,255,0.1); }
  100% { box-shadow: 0 0 25px rgba(0,240,255,0.5), 0 0 50px rgba(183,55,242,0.2); }
}
.title-marquee {
  font-size: 0.35rem; color: #fff;
  text-shadow:
    0 0 10px rgba(0,240,255,0.4),
    0 0 30px rgba(0,240,255,0.2),
    0 0 50px rgba(183,55,242,0.1);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 8rem;
  text-align: center;
}

/* ---------- liMarquee 跑马灯 ---------- */
.str_wrap {
  overflow: hidden; width: 100%; position: relative;
  -moz-user-select: none; -khtml-user-select: none;
  user-select: none; white-space: nowrap;
}
.str_move { white-space: nowrap; position: absolute; top: 0; left: 0; cursor: move; }
.str_move_clone { display: inline-block; vertical-align: top; position: absolute; left: 100%; top: 0; }
.str_vertical .str_move_clone { left: 0; top: 100%; }
.str_down .str_move_clone { left: 0; bottom: 100%; }
.str_vertical .str_move, .str_down .str_move { white-space: normal; width: 100%; }
.str_static .str_move, .no_drag .str_move, .noStop .str_move { cursor: inherit; }
.str_wrap img { max-width: none !important; }

.header-time {
  position: absolute; right: 0.4rem; top: 50%;
  transform: translateY(-50%);
  font-size: 0.18rem;
  color: #00f0ff;
  font-family: electronicFont;
  text-shadow:
    0 0 10px rgba(0,240,255,0.5),
    0 0 30px rgba(0,240,255,0.3);
  letter-spacing: 2px;
  animation: timeFlicker 5s ease-in-out infinite;
}
@keyframes timeFlicker {
  0%, 100% { opacity: 1; }
  95% { opacity: 1; }
  96% { opacity: 0.7; }
  97% { opacity: 1; }
  98% { opacity: 0.8; }
}

/* ==================== Global Glow Base ==================== */
.glow-border {
  position: relative; z-index: 1;
  background: rgba(8,12,30,0.7);
  border: 1px solid rgba(0,240,255,0.12);
  border-radius: 8px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 4px 30px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.03);
  overflow: hidden;
  transition: box-shadow 0.4s, border-color 0.4s;
}
/* 顶部发光边线 */
.glow-border::before {
  content: "";
  position: absolute; z-index: 2; pointer-events: none;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,240,255,0.3) 20%,
    rgba(183,55,242,0.3) 80%,
    transparent 100%);
}
/* hover 增强发光 */
.glow-border:hover {
  border-color: rgba(0,240,255,0.3);
  box-shadow:
    0 4px 40px rgba(0,0,0,0.5),
    0 0 25px rgba(0,240,255,0.1),
    0 0 50px rgba(183,55,242,0.06),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ==================== Section Title ==================== */
.section-title {
  font-size: 0.17rem;
  color: #e0e8ff;
  text-align: center;
  padding: 0.12rem 0 0.1rem;
  position: relative;
  letter-spacing: 3px;
  font-weight: 500;
  text-shadow: 0 0 10px rgba(0,240,255,0.2);
}
.section-title::after {
  content: "";
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 50px; height: 2px;
  background: linear-gradient(90deg, #00f0ff, #b537f2);
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(0,240,255,0.4);
  animation: titleBar 2s ease-in-out infinite alternate;
}
@keyframes titleBar {
  0% { width: 40px; opacity: 0.7; }
  100% { width: 60px; opacity: 1; }
}

/* ==================== Main Layout ==================== */
.main-container {
  flex: 1; min-height: 0;
  display: flex;
  padding: 0 0.12rem;
  gap: 0.12rem;
  position: relative; z-index: 1;
}
.panel-col {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 0.12rem;
  opacity: 0;
  animation: fadeSlideUp 0.8s ease-out forwards;
}
.panel-col:nth-child(1) { animation-delay: 0.1s; }
.panel-col:nth-child(2) { animation-delay: 0.25s; }
.panel-col:nth-child(3) { animation-delay: 0.4s; }
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==================== Card (Generic) ==================== */
.card {
  padding: 0.1rem 0.12rem 0.12rem;
  flex: 1; min-height: 0;
}

/* ==================== Metrics Row ==================== */
.metrics-row {
  flex-shrink: 0; position: relative; z-index: 1;
  display: flex; gap: 0.12rem;
  padding: 0.1rem 0.12rem 0.12rem;
}
.metric-card {
  flex: 1;
  background: rgba(8,12,30,0.85);
  border: 1px solid rgba(0,240,255,0.12);
  border-radius: 8px;
  padding: 0.14rem 0.08rem;
  text-align: center;
  position: relative;
  backdrop-filter: blur(10px);
  box-shadow:
    0 2px 20px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(0,240,255,0.05);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.metric-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 30px rgba(0,0,0,0.4),
    0 0 20px rgba(0,240,255,0.15);
}
/* 底部渐变条 */
.metric-card::after {
  content: "";
  position: absolute; bottom: 0; left: 15%; right: 15%;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, #00f0ff, #b537f2, transparent);
  box-shadow: 0 0 8px rgba(0,240,255,0.5);
  animation: metricBarPulse 3s ease-in-out infinite alternate;
}
@keyframes metricBarPulse {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}
/* 指标卡顶部角落装饰 */
.metric-card::before {
  content: "";
  position: absolute; top: 3px; left: 6px;
  width: 8px; height: 8px;
  border-left: 1px solid rgba(0,240,255,0.3);
  border-top: 1px solid rgba(0,240,255,0.3);
  opacity: 0; transition: opacity 0.3s;
}
.metric-card:hover::before { opacity: 1; }

.metric-value {
  font-size: 0.42rem;
  font-family: electronicFont;
  font-weight: bold;
  background: linear-gradient(180deg, #00f0ff 0%, #b537f2 60%, #ff6b9d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  text-shadow: none;
  animation: valueGlow 3s ease-in-out infinite alternate;
}
@keyframes valueGlow {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.2); }
}
.metric-label {
  font-size: 0.13rem;
  color: rgba(180,190,220,0.5);
  margin-top: 0.04rem;
  letter-spacing: 1px;
}

/* ==================== Sign Card ==================== */
.card-sign { flex: 1; display: flex; flex-direction: column; }
.sign-content {
  display: flex; flex-direction: column; align-items: center;
}
.sign-chart {
  width: 100%; height: 2rem;
}
.sign-numbers {
  display: flex; gap: 0.4rem; margin-top: -0.05rem;
}
.sign-item { text-align: center; }
.sign-num {
  font-size: 0.26rem; font-family: electronicFont;
  display: block;
  animation: signNumPulse 2s ease-in-out infinite;
}
@keyframes signNumPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.sign-item.signed .sign-num {
  color: #00f0ff;
  text-shadow: 0 0 10px rgba(0,240,255,0.5), 0 0 25px rgba(0,240,255,0.3);
}
.sign-item.unsigned .sign-num {
  color: rgba(180,190,220,0.4);
}
.sign-label {
  font-size: 0.12rem; color: rgba(180,190,220,0.45);
}

/* ==================== Star Chart (星图) ==================== */
.card-star {
  flex: 1.2;
  display: flex; flex-direction: column;
  padding: 0.08rem 0.12rem 0.1rem;
}
.star-chart {
  flex: 1; min-height: 0; width: 100%;
}

/* ==================== Horizontal Bar Chart Card ==================== */
.card-bar {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 0.08rem 0.12rem 0.1rem;
}
.h-bar-chart {
  flex: 1; min-height: 0;
  width: 100%;
}

/* ==================== Monitor Card ==================== */
.card-monitor { flex: 1; display: flex; flex-direction: column; }
.monitor-scroll {
  flex: 1; min-height: 0;
  overflow: hidden;
}
.monitor-scroll ul { margin: 0; padding: 0; }
.monitor-scroll li {
  line-height: 0.42rem; height: 0.42rem;
  font-size: 0.13rem; margin-bottom: 0.05rem;
}
.monitor-scroll li p {
  border: 1px solid rgba(0,240,255,0.08);
  background: rgba(0,240,255,0.03);
  color: rgba(200,220,240,0.65);
  display: flex; justify-content: space-between;
  padding: 0 0.25rem;
  border-radius: 6px;
  transition: all 0.3s;
}
.monitor-scroll li:hover p {
  background: rgba(0,240,255,0.1);
  border-color: rgba(0,240,255,0.25);
  box-shadow:
    0 0 12px rgba(0,240,255,0.12),
    inset 0 0 8px rgba(0,240,255,0.03);
  transform: translateX(2px);
}

/* ==================== Rank Chart Card ==================== */
.card-rank {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 0.08rem 0.12rem 0.1rem;
}
.rank-chart { flex: 1; min-height: 0; width: 100%; }