/* ===== BP 質押率監控 - UI 優化 ===== */

/* 背景：更鮮豔的漸層，加入光斑效果 */
body {
  background:
    linear-gradient(160deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 32rem),
    radial-gradient(ellipse at 8% 6%,  rgba(247,210,80,0.38) 0%, transparent 22rem),
    radial-gradient(ellipse at 88% 5%, rgba(130,213,187,0.45) 0%, transparent 24rem),
    radial-gradient(ellipse at 50% 95%, rgba(100,195,220,0.3) 0%, transparent 30rem),
    linear-gradient(175deg, #7ecec4 0%, #5abdb8 60%, #4ab3ba 100%) !important;
}

/* app 容器最大寬度放寬，呼吸感更好 */
.app-shell {
  max-width: 1120px !important;
  padding-top: 28px !important;
}

/* ===== Header ===== */
.hero {
  margin-bottom: 24px !important;
}

.hero-title :where([class*=animal-title]) {
  filter: drop-shadow(0 3px 10px rgba(0,80,80,0.18));
  letter-spacing: -0.5px;
}

/* 倒數計時、語言選擇按鈕 */
.countdown-button {
  background: rgba(255,255,255,0.88) !important;
  border: 2px solid rgba(255,255,255,0.7) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 3px 12px rgba(30,110,110,0.15), 0 1px 3px rgba(0,0,0,0.06) !important;
  transition: all 0.2s ease !important;
}
.countdown-button:hover {
  background: rgba(255,255,255,0.98) !important;
  box-shadow: 0 6px 20px rgba(30,110,110,0.22), 0 2px 6px rgba(0,0,0,0.08) !important;
  transform: translateY(-1px);
}

/* 註冊 Backpack 按鈕 */
.author-link {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%) !important;
  color: #fff !important;
  border: 2px solid rgba(100,160,255,0.35) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.2px;
  box-shadow: 0 3px 14px rgba(15,52,96,0.35), 0 1px 4px rgba(0,0,0,0.15) !important;
  transition: all 0.2s ease !important;
  padding: 0 14px !important;
}
.author-link:hover {
  background: linear-gradient(135deg, #232342 0%, #1a2a50 60%, #1a4a80 100%) !important;
  box-shadow: 0 6px 22px rgba(15,52,96,0.5), 0 2px 8px rgba(0,0,0,0.2) !important;
  transform: translateY(-2px);
  color: #fff !important;
}

/* ===== 三個指標 card ===== */
.metrics-grid {
  gap: 16px !important;
  margin-bottom: 20px !important;
}

.metric-card {
  border-radius: 22px !important;
  border: 2.5px solid rgba(255,255,255,0.55) !important;
  box-shadow:
    0 6px 24px rgba(30,100,100,0.14),
    0 2px 6px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.4) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  backdrop-filter: blur(2px);
}
.metric-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 36px rgba(30,100,100,0.2),
    0 4px 12px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.45) !important;
}

.metric-card strong {
  font-size: clamp(26px, 4vw, 36px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px;
}

.metric-card small {
  font-weight: 700 !important;
  opacity: 0.82 !important;
}

/* ===== 主內容區 ===== */
.content-grid {
  gap: 18px !important;
}

.panel {
  border-radius: 22px !important;
  background: rgba(255,251,238,0.97) !important;
  border: 2px solid rgba(220,210,190,0.5) !important;
  box-shadow:
    0 4px 20px rgba(80,60,30,0.08),
    0 1px 4px rgba(0,0,0,0.04) !important;
}

/* ===== 監控事件卡片 ===== */
.monitor-card {
  border-radius: 20px !important;
  background: rgba(255,251,238,0.97) !important;
  border: 2px solid rgba(220,210,190,0.5) !important;
  box-shadow:
    0 4px 20px rgba(80,60,30,0.08),
    0 1px 4px rgba(0,0,0,0.04) !important;
}

.monitor-card__header {
  border-bottom: 2px dashed rgba(180,160,130,0.25) !important;
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
}

/* ===== 事件列表 ===== */
.monitor-event {
  border-radius: 14px !important;
  transition: background 0.15s ease !important;
}
.monitor-event:hover {
  background: rgba(200,240,230,0.3) !important;
}

/* ===== 質押變化 change cards ===== */
.change-item {
  border-radius: 18px !important;
  background: rgba(255,251,238,0.95) !important;
  border: 2px solid rgba(220,210,190,0.45) !important;
  box-shadow: 0 3px 12px rgba(80,60,30,0.07) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.change-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(80,60,30,0.12) !important;
}

.change-item strong {
  font-weight: 900 !important;
  letter-spacing: -0.3px;
}

/* ===== 熱力圖 cells ===== */
.staking-heatmap {
  gap: 6px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.3) !important;
}

.staking-heatmap-cell {
  border-radius: 8px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.staking-heatmap-cell:hover {
  transform: scale(1.12) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18) !important;
  z-index: 10;
  position: relative;
}

.heatmap {
  gap: 5px !important;
  padding: 12px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.25) !important;
}

.heatmap-cell {
  border-radius: 6px !important;
  transition: transform 0.15s ease !important;
}
.heatmap-cell:hover {
  transform: scale(1.15) !important;
  z-index: 10;
  position: relative;
}

/* ===== Tabs ===== */
.tabs-panel {
  margin-top: 20px !important;
}

/* ===== Panel 標題 ===== */
.panel > [class*=animal-title-] {
  font-weight: 900 !important;
  letter-spacing: -0.3px;
}

/* ===== Window / Unlock cards ===== */
.window-card {
  border-radius: 16px !important;
  transition: transform 0.18s ease !important;
}
.window-card:hover {
  transform: translateY(-2px);
}

/* ===== 圖表區域 ===== */
.chart-box {
  border-radius: 16px !important;
  overflow: hidden;
  background: rgba(255,255,255,0.25) !important;
}

/* ===== 捲軸美化 ===== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.04);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb {
  background: rgba(100,160,155,0.4);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(100,160,155,0.65);
}

/* ===== 整體文字微調 ===== */
:root {
  --animal-border-radius-sm: 18px !important;
  --animal-border-radius-base: 20px !important;
  --animal-border-radius-lg: 26px !important;
}