dashboard.css

/* ── 主题变量（Patina default · 中性灰面板 + 钢青蓝 accent） ─────────
   色彩语义：浏览=钢蓝(participation)，下载=暖金褐(warning)，总流量线=participation，
   排名=patina 类别色板。accent #315f9f(亮)/#8ba1c0(暗) 用于交互与选中。 */
:root {
  --bg-top: #fbfbfb;
  --bg-bottom: #f4f4f4;
  --text-primary: #171717;
  --text-secondary: #707070;
  --text-body: #434343;
  --text-weak: #707070;
  --text-faint: #c5c5c5;
  --border: #dddddd;
  --border-light: #dddddd;
  --border-lighter: #ebebeb;
  --card-bg: #fff;
  --card-shadow: 0 1px 2px rgba(23,23,23,0.04);
  --card-shadow-hover: 0 2px 8px rgba(23,23,23,0.07);
  --panel-shadow: 0 8px 24px rgba(17,24,39,0.10);
  --hover-bg: #f5f5f5;
  --hover-bg-strong: #efefef;
  --row-hover: #f5f5f5;
  --accent: #315f9f;
  --accent-strong: #264b7d;
  --accent-light: #3f74c2;
  --accent-soft: #f5f5f5;
  --accent-soft-2: #e8eef6;
  --tag-blue-text: #434343;
  --browse-color: #8f98a8;
  --download-color: #9a6700;
  --download-soft: #f6edd9;
  --red: #b53a3a;
  --red-soft: #f7e7e7;
  --red-soft-2: #fbf1f1;
  --red-border: #e0c2c2;
  --on-accent: #fff;
  --bar-bg: #e6e6e6;
  --bar-fill: linear-gradient(90deg, #98a1b0, #87919f);
  --grad-icon: linear-gradient(135deg, #f5f5f5, #e9e9e9);
  --chart-grid: rgba(156,168,186,0.28);
  --chart-text: #8a919e;
  --bar-grad-from: #9aa3b2;
  --bar-grad-to: #87919f;
  --detail-grad-from: #87919f;
  --detail-grad-to: #a5adba;
  --scroll-thumb: #cccccc;
  --scroll-thumb-hover: #b8b8b8;
  --focus-ring: rgba(49,95,159,0.18);
  --peak-color: #264b7d;
  --dl-grad-from: #9a6700;
  --dl-grad-to: #b8860b;
  --trend-line: #637d9f;
  --heat-1: #eef2f7;
  --heat-2: #c9d8ea;
  --heat-3: #93b3d6;
  --heat-4: #557fb3;
  --heat-5: #315f9f;
  --donut-1: #3293c8;
  --donut-2: #36ac7e;
  --donut-3: #6f7ae6;
  --donut-4: #c56a73;
  --donut-5: #b07e55;
  --donut-6: #8f98a8;
}

:root[data-theme="dark"] {
  --bg-top: #262626;
  --bg-bottom: #212121;
  --text-primary: #d1d5dc;
  --text-secondary: #adb3bd;
  --text-body: #b9bfc7;
  --text-weak: #adb3bd;
  --text-faint: #5f5f5f;
  --border: #404040;
  --border-light: #3a3a3a;
  --border-lighter: #333333;
  --card-bg: #2d2d2d;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.35);
  --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.45);
  --panel-shadow: 0 8px 24px rgba(0,0,0,0.45);
  --hover-bg: #353535;
  --hover-bg-strong: #303030;
  --row-hover: #303030;
  --accent: #8ba1c0;
  --accent-strong: #a5b8d1;
  --accent-light: #93a9c8;
  --accent-soft: #333333;
  --accent-soft-2: #333b46;
  --tag-blue-text: #c9ced6;
  --browse-color: #9aa4b2;
  --download-color: #c19b5c;
  --download-soft: #3a3222;
  --red: #c98383;
  --red-soft: #3d2b2b;
  --red-soft-2: #3d2b2b;
  --red-border: #6b3a3a;
  --on-accent: #22262b;
  --bar-bg: #404040;
  --bar-fill: linear-gradient(90deg, #a8b0bc, #8f98a8);
  --grad-icon: linear-gradient(135deg, #333333, #2a2a2a);
  --chart-grid: rgba(127,135,145,0.16);
  --chart-text: #7f8791;
  --bar-grad-from: #a8b0bc;
  --bar-grad-to: #87919f;
  --detail-grad-from: #87919f;
  --detail-grad-to: #6d7684;
  --scroll-thumb: #545454;
  --scroll-thumb-hover: #686868;
  --focus-ring: rgba(139,161,192,0.28);
  --peak-color: #a5b8d1;
  --dl-grad-from: #c19b5c;
  --dl-grad-to: #d4b47c;
  --trend-line: #8f9db3;
  --heat-1: #2b2b2b;
  --heat-2: #39434f;
  --heat-3: #4a5c72;
  --heat-4: #66809f;
  --heat-5: #8ba1c0;
  --donut-1: #3293c8;
  --donut-2: #36ac7e;
  --donut-3: #6f7ae6;
  --donut-4: #c56a73;
  --donut-5: #b07e55;
  --donut-6: #8f98a8;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  background-attachment: fixed;
  color: var(--text-body);
  min-width: 800px;
  font-variant-numeric: tabular-nums;
}

#app {
  max-width: min(1680px, 96vw);
  margin: 0 auto;
  padding: 24px 32px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.header-titles {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.header-left h1 {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.subtitle {
  font-size: 13px;
  color: var(--text-weak);
}

.header-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.header-controls select,
.theme-toggle {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  font-size: 13px;
  cursor: pointer;
  color: var(--text-body);
  transition: border-color 0.15s, background 0.15s;
}

/* select 原生箭头替换为自绘 chevron（跟随主题） */
:root {
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23707070' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23adb3bd' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.header-controls select {
  appearance: none;
  padding-right: 26px;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.theme-toggle {
  width: 32px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.theme-toggle svg {
  width: 14px;
  height: 14px;
}

.theme-toggle:hover {
  background: var(--hover-bg);
  border-color: var(--accent);
}

.view-toggle {
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-weak);
  transition: color 0.15s, background 0.15s;
}

.view-toggle.active {
  background: var(--accent-soft-2);
  color: var(--accent);
  font-weight: 600;
}

/* 视图切换：轨道式 segmented（槽底 + 淡蓝滑块选中态） */
.view-toggle-group {
  display: inline-flex;
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 2px;
  gap: 2px;
}
.view-toggle-group .view-toggle {
  padding: 4px 12px;
}

/* 已废弃（v2.1.0 起摘要小卡被 overview-card 取代）：.summary-cards / .card-icon* /
   .card-body 均已无引用。原先此处的 .card 曾与入场动画类重名，导致加 .card 的卡片
   意外继承 display:flex + align-items:center，标题被压成一行或竖排换行。 */
.card-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.card-value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

.card-value-browse { color: var(--text-primary); }
.card-value-dl { color: var(--download-color); }

.type-filter {
  display: inline-flex;
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.type-filter-btn {
  padding: 3px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-weak);
  transition: color 0.15s, background 0.15s;
}

.type-filter-btn.active {
  background: var(--accent-soft-2);
  color: var(--accent);
  font-weight: 600;
}

.type-filter-btn:not(.active):hover {
  color: var(--text-primary);
}

/* 布局三档：
   <900px 单列竖排；900~1400px 趋势通栏 + 下方占比|排行两列；
   >1400px 三列（趋势 | 占比+存储 | 排行） */
.main-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.rank-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch; /* 行高由左列决定，右列锁定等高（底部对齐） */
}

.rank-grid > .rank-col:first-child {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#excludedSection,
#domainDetailSection {
  grid-column: 1 / -1;
}

/* 中屏：趋势通栏（占满整行），rank-grid 两列 */

@media (min-width: 1401px) {
  .main-content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  /* 大屏三列：趋势 | 占比+存储 | 排行 */
  .main-content > .section:first-child {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
  }
  .rank-grid {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: stretch; /* 大屏三列保持等高（存储卡贴底 + 排行卡内滚动） */
  }
}

@media (max-width: 900px) {
  .main-content {
    grid-template-columns: 1fr;
  }
  .rank-grid {
    grid-column: 1;
    grid-template-columns: 1fr;
  }
}

.section {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 24px 22px;
  box-shadow: 0 1px 2px rgba(23,23,23,0.03);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h2 {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.section-controls {
  display: flex;
  gap: 6px;
}

/* 堆叠柱图例（浏览=石墨 / 下载=金） */
.chart-legend {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: 6px;
  font-size: 11px;
  color: var(--text-weak);
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.legend-browse { background: var(--bar-grad-from); }
.legend-download { background: var(--dl-grad-from); }

.chart-view-btn {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-weak);
  transition: border-color 0.15s, color 0.15s;
}

.chart-view-btn:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

.chart-view-btn.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.chart-container {
  width: 100%;
  position: relative;
}

.chart-container svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 主图：容器高度由 CSS clamp 控制（不盲目跟随行高），SVG 垂直居中 */
.trend-section {
  display: flex;
  flex-direction: column;
}

.trend-section .chart-container {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trend-section .chart-container svg {
  width: 100%;
  height: 100%;
  max-height: 400px;
  min-height: 240px;
}

/* SVG 图表颜色（JS 不再硬编码，全部由变量控制） */
.chart-container svg .grid-line { stroke: var(--chart-grid); }
.chart-container svg .axis-label { fill: var(--chart-text); }
.chart-container svg .peak-day { fill: var(--peak-color); }
.chart-container svg .dot-anim.peak-day { stroke: var(--peak-color); stroke-width: 2; }
#trendChart stop:first-child { stop-color: var(--bar-grad-from); }
#trendChart stop:last-child { stop-color: var(--bar-grad-to); }
#detailChart stop:first-child { stop-color: var(--detail-grad-from); }
#detailChart stop:last-child { stop-color: var(--detail-grad-to); }

/* ── 日历选择器 ────────────────────────────────────────────── */
.day-picker {
  position: relative;
  display: inline-block;
}

.day-picker-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  font-size: 13px;
  cursor: pointer;
  color: var(--text-weak);
  transition: all 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.day-picker-btn svg,
.action-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.day-picker-btn:hover {
  background: var(--hover-bg-strong);
  border-color: var(--text-secondary);
}

.day-picker-btn.active {
  border-color: var(--accent);
  color: var(--accent);
}

.day-picker-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  width: 240px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--panel-shadow);
  padding: 12px;
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top left;
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

.day-picker-panel.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.dp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.dp-nav {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-weak);
  padding: 4px 8px;
  border-radius: 4px;
}

.dp-nav:hover {
  background: var(--hover-bg);
}

.dp-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.dp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
  text-align: center;
}

.dp-weekdays span {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 4px 0;
}

.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dp-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-body);
  transition: all 0.1s;
}

.dp-cell:hover {
  background: var(--hover-bg);
}

.dp-cell.other-month {
  color: var(--text-faint);
}

.dp-cell.today {
  font-weight: 700;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}

.dp-cell.has-data {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* 热力色阶（GitHub 风格：流量越大越深） */
.dp-cell.has-data.heat-1 { background: var(--heat-1); }
.dp-cell.has-data.heat-2 { background: var(--heat-2); }
.dp-cell.has-data.heat-3 { background: var(--heat-3); }
.dp-cell.has-data.heat-4 { background: var(--heat-4); }
.dp-cell.has-data.heat-5 { background: var(--heat-5); color: var(--on-accent); }

.dp-cell.has-data.today {
  background: var(--accent);
  color: var(--on-accent);
}

.dp-cell.selected {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.dp-clear-btn {
  width: 100%;
  margin-top: 8px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  font-size: 12px;
  color: var(--text-weak);
  cursor: pointer;
  transition: all 0.15s;
}

.dp-clear-btn:hover {
  background: var(--hover-bg-strong);
  border-color: var(--text-secondary);
}

#daySelect {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  font-size: 13px;
  cursor: pointer;
}


/* ── 域名占比环形图（借鉴 patina 环形图 + 点击联动） ── */
.donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.donut-svg {
  width: 260px;
  height: 260px;
  margin-top: 6px;
}

.donut-svg .donut-seg {
  cursor: pointer;
  transition: opacity 0.15s, stroke-width 0.18s ease, filter 0.18s ease;
}

.donut-svg .donut-seg:hover {
  opacity: 0.85;
}

.donut-total-text {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  fill: var(--text-primary);
}

.donut-total-label {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  fill: var(--text-secondary);
}

.donut-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  width: 100%;
  min-width: 0;
}

.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 6px;
  transition: background 0.15s;
}

.donut-legend-item:hover {
  background: var(--hover-bg);
}

.donut-legend-item.active {
  background: var(--accent-soft);
}

.donut-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.donut-legend-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-body);
}

.donut-legend-pct {
  color: var(--text-body);
  font-weight: 600;
  white-space: nowrap;
}









.col-domain .domain-favicon { vertical-align: middle; }

.tag-browse {
  display:inline-block;font-size:10px;padding:1px 6px;border-radius:3px;
  background: var(--accent-soft-2);color: var(--browse-color);
}
.tag-download {
  display:inline-block;font-size:10px;padding:1px 6px;border-radius:3px;
  background: var(--download-soft);color: var(--download-color);
}
.tag-mixed {
  display:inline-block;font-size:10px;padding:1px 6px;border-radius:3px;
  background: var(--accent-soft-2);color: var(--tag-blue-text);
}

.dl-part { color: var(--download-color);font-weight:600; }
.browse-part { color: var(--browse-color);font-weight:600;margin-left:8px; }

.exclude-domain-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  transition: all 0.15s;
  white-space: nowrap;
}

.exclude-domain-btn:hover {
  background: var(--red-soft);
  color: var(--red);
  border-color: var(--red-border);
}

.restore-domain-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-weak);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  transition: all 0.15s;
}

.restore-domain-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}



.search-box input {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  font-size: 13px;
  width: 200px;
  color: var(--text-body);
}

.search-box input:focus {
  outline: none;
  border-color: var(--accent);
}

.domain-favicon {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 6px;
  flex-shrink: 0;
}



#domainDetailSection {
  margin-top: 0;
}

.detail-info {
  display: flex;
  gap: 32px;
  margin-bottom: 16px;
}

.detail-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.detail-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.close-btn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card-bg);
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
}

.close-btn:hover {
  background: var(--hover-bg);
  color: var(--text-body);
}

@media (max-width: 900px) {
  .header-controls {
    width: 100%;
  }
}

/* ── 动画与微交互 ──────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* Q 弹入场：先下沉淡入 → 冲过头轻微放大上浮 → 回落归位。
   过冲量已两轮收敛（比初版弱约 36%），只保留一丝弹性，避免频繁切换时跳眼。
   注意：0% 的 opacity:0 只适合首屏。切换栏目时用 --fast 覆盖成从近不透明起步，
   否则用户正在看的数据会先整体消失一下、再淡回来，观感像闪了一下。 */
@keyframes cardPopIn {
  0% {
    opacity: 0;
    transform: translateY(15px) scale(0.962);
  }
  55% {
    opacity: 1;
    transform: translateY(-4px) scale(1.013);
  }
  78% {
    transform: translateY(1.5px) scale(0.997);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 切换栏目专用的入场：从接近可见的状态轻微上浮，不整体消失。
   起始 opacity 不宜太低（0.55 时会感觉卡片"灰了一下"），
   0.8 起步既保留浮现感，又不会让正在看的数据明显变暗。 */
@keyframes cardRiseIn {
  0% {
    opacity: 0.8;
    transform: translateY(9px) scale(0.992);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.003);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── 覆盖式过渡（View Transitions）─────────────────────────────
   切换栏目时：「旧界面快速淡出 → 新界面卡片依次浮入」。

   设计要点：
   1) 旧快照淡出只占前 0.16s，卡片动画从 0.10s 后错开进场（见 CSS 里的
      animation-delay）。两者只轻微交叠，避免整段过渡里两层内容错位叠影。
   2) ⚠️ 若让快照淡出（0.34s）与卡片动画（0.4s）全程并行，会看到旧数字与
      新数字重影、图表网格叠在一起——两层各自做缩放/位移就会互相打架。
      解决办法是让快照先退场，把画面彻底让给新内容。
   3) ⚠️ 只让旧层淡出，新层 opacity 恒为 1。
      若写成"旧淡出 + 新淡入"，中间时刻两层都很透明，叠加后接近背景色，
      深色模式下整屏发黑、内容消失一瞬。
   不支持 View Transitions 的浏览器自动走 playCardEntrance 降级路径。 */
@keyframes vtFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* 过渡容器背景：跟随主题，避免边缘透出白/黑缝 */
::view-transition {
  background: var(--bg-bottom);
}

/* 旧快照：在上层，快速淡出。时长与 JS 里等待 VT finished 后再启动卡片动画衔接，
   两者首尾相接、互不重叠 —— 重叠会看到旧数字与新数字重影。 */
::view-transition-old(root) {
  animation: vtFadeOut 0.22s cubic-bezier(0.4, 0, 0.6, 1) both;
  z-index: 2;
}

/* 新快照：在下层，全程不透明 */
::view-transition-new(root) {
  animation: none;
  opacity: 1;
  z-index: 1;
}

/* 尊重系统"减少动态效果"设置：过渡改为瞬时切换 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01ms !important;
  }
  .card-enter--first { animation-duration: 0.01ms !important; }
}

/* 区块交错入场：所有卡片统一走 .card-enter 类，不再依赖 DOM 层级
   （旧写法 .main-content > .section 只匹配直接子级，导致 rank-grid 里的
   域名占比/存储/排行三张卡隔层嵌套后完全没有入场动画）
   命名避开 .card：它曾是废弃的摘要小卡样式，带 display:flex 会把标题挤变形

   .card-enter--first  首屏与切换栏目共用，由 playCardEntrance() 动态添加
   .card-enter--fast   切换栏目时附加，时长略短（切换比首屏更频繁）
   注意：动画类必须在 View Transitions 回调内添加，让新快照捕获到起始态；
   若等过渡结束再加，会变成"新界面先完整显示，然后再动一下"。 */
.card-enter--first {
  animation: cardPopIn 0.58s cubic-bezier(0.34, 1.42, 0.64, 1) both;
}

/* 按视觉顺序递进延迟：概览 → 趋势 → 占比/存储 → 排行 → 动态展开的卡片
   首屏从 0 开始从容入场；切换栏目时整体时机由 JS 控制（等旧快照退场后再播），
   这里的延迟只负责卡片之间的错落次序。 */
.overview-card.card-enter--first { animation-duration: 0.62s; }
.trend-section.card-enter--first { animation-delay: 0.06s; }
.donut-card.card-enter--first { animation-delay: 0.10s; }
.storage-card.card-enter--first { animation-delay: 0.15s; }
.ranking-card.card-enter--first { animation-delay: 0.10s; }
#excludedSection.card-enter--first,
#domainDetailSection.card-enter--first { animation-delay: 0.05s; }

/* 切换栏目：用 cardRiseIn（从接近可见起步，不整体消失），时长略短、错落更紧凑 */
.card-enter--fast.card-enter--fast {
  animation-name: cardRiseIn;
  animation-duration: 0.38s;
  animation-timing-function: cubic-bezier(0.3, 1.22, 0.6, 1);
}
.overview-card.card-enter--fast.card-enter--fast { animation-duration: 0.42s; }
.trend-section.card-enter--fast.card-enter--fast { animation-delay: 0.03s; }
.donut-card.card-enter--fast.card-enter--fast { animation-delay: 0.05s; }
.storage-card.card-enter--fast.card-enter--fast { animation-delay: 0.09s; }
.ranking-card.card-enter--fast.card-enter--fast { animation-delay: 0.12s; }
#excludedSection.card-enter--fast.card-enter--fast,
#domainDetailSection.card-enter--fast.card-enter--fast { animation-delay: 0.05s; }

/* 图表柱/点生长动画（初始态由 JS 内联设置，class 只负责过渡） */
.chart-container .bar-anim,
.chart-container .dot-anim {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 按钮按下微反馈 */
.view-toggle:active,
.type-filter-btn:active,
.chart-view-btn:active,
.day-picker-btn:active,
.close-btn:active {
  transform: scale(0.97);
}

/* 下拉框/搜索框 focus 光环 */
.header-controls select:focus,
.day-picker-btn:focus,
.search-box input:focus,
.theme-toggle:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* 滚动条美化 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
  background-clip: content-box;
}

/* 尊重系统"减少动态效果"设置 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* 趋势图交互：点击柱/点跳转日期 + hover 提示 + 选中日高亮 */
.chart-container svg [data-day] { cursor: pointer; }
.chart-container svg [data-day]:hover { opacity: 0.7; }
.chart-container svg .bar-anim.selected-day { stroke: var(--accent-strong); stroke-width: 1.5; }
.chart-container svg .dot-anim.selected-day { stroke: var(--accent-strong); stroke-width: 2; }

/* 环形图 hover：段轻微加粗外扩（30→33，viewBox 200 内不裁切），亮度提升 */
.donut-svg .donut-seg {
  transition: opacity 0.15s, stroke-width 0.18s ease, filter 0.18s ease;
}
.donut-svg .donut-seg:hover {
  opacity: 1;
  stroke-width: 33;
  filter: brightness(1.06);
}
.donut-svg .donut-seg.active {
  stroke-width: 31;
}

/* 趋势图 hover：柱/点加亮（Reasonix 风格的高亮反馈） */
.chart-container svg .bar-anim:hover {
  opacity: 1;
  filter: brightness(1.12);
}
.chart-container svg .dot-anim:hover {
  opacity: 1;
  filter: brightness(1.15);
}

/* 热力日历格 hover 放大（配合 tooltip） */
.dp-cell.has-data {
  transition: transform 0.12s ease;
}
.dp-cell.has-data:hover {
  transform: scale(1.12);
  z-index: 1;
}

/* 下载占比融合折线（Reasonix 风格双轴图） */
.chart-container svg .overlay-line {
  stroke: var(--trend-line);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-container svg .overlay-dot {
  fill: var(--card-bg);
  stroke: var(--trend-line);
  stroke-width: 2;
  transition: r 0.12s ease;
}
.chart-container svg .overlay-dot:hover {
  r: 4;
}
.legend-overlay {
  background: var(--trend-line);
}

/* 峰值日为长文本（日期+数值），降字号避免撑行 */
#peakDay { font-size: 16px; line-height: 1.35; }

/* ── 概览卡（patina 数字行风格） ────────────────────────── */
.overview-card {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 24px 22px 16px;
  box-shadow: 0 1px 2px rgba(23,23,23,0.03);
  margin-bottom: 28px;
  /* 入场动画由 .card 统一提供，此处不再重复声明 animation */
}

.overview-primary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-lighter);
}

.overview-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.overview-stat .card-value { font-size: 34px; }

.overview-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 48px;
  padding-top: 14px;
}

.overview-mini {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  min-width: 200px;
}

.overview-mini-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-body);
}

/* 排行区布局已并入上方 .main-content 布局三档区块 */

/* ── 域名排行行列表（patina 应用行风格） ───────────────── */
.domain-list-v2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.domain-list-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 36px 0;
  font-size: 13px;
}

.domain-row {
  background: var(--hover-bg);
  border-radius: 10px;
  padding: 12px 14px 10px;
  cursor: pointer;
  transition: background 0.15s;
}

.domain-row:hover { background: var(--hover-bg-strong); }

.domain-row.selected { background: var(--accent-soft-2); }

.domain-row.excluded { opacity: 0.55; }

.domain-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.domain-row-rank {
  width: 16px;
  font-size: 11px;
  color: var(--text-faint);
  text-align: right;
  flex-shrink: 0;
}

.domain-row-favicon {
  display: flex;
  flex-shrink: 0;
}

.domain-row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.excluded-mark {
  color: var(--red);
  font-size: 11px;
  font-weight: 400;
}

.domain-row-bytes {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13px;
  white-space: nowrap;
  margin-left: 4px;
}

.domain-row-sub {
  margin: 5px 0 0 26px;
  font-size: 11px;
  color: var(--text-weak);
  display: flex;
  gap: 10px;
}

.domain-row-sub .dl-part,
.domain-row-sub .browse-part { font-weight: 500; margin-left: 0; }

.domain-row-bar {
  margin-top: 8px;
  height: 4px;
  background: var(--bar-bg);
  border-radius: 2px;
  overflow: hidden;
}

.domain-row-fill {
  height: 100%;
  background: var(--bar-fill);
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* 排行卡 header：标题与筛选控件两行排布，避免窄列挤碎 */
.ranking-card .section-header {
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
}
.ranking-card .section-header h2 { white-space: nowrap; }
.ranking-card .section-header > div { margin-left: 0; }

/* ── 左列（占比 + 存储两卡堆叠，与右列排行等高平衡） ────── */
.rank-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 存储卡：左列贴底对齐（与右列排行卡底部平齐） */
.storage-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.storage-actions {
  margin-top: auto;
  padding-top: 16px;
}



.storage-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.storage-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-body);
}

.storage-track {
  height: 6px;
  background: var(--bar-bg);
  border-radius: 3px;
  overflow: hidden;
}

.storage-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.storage-btn {
  flex: 1;
  justify-content: center;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  cursor: pointer;
  font-size: 13px;
  color: var(--accent);
  transition: background 0.15s, border-color 0.15s;
}

.storage-btn:hover { background: var(--hover-bg); }

.storage-btn.danger { color: var(--red); }

.storage-btn.danger:hover {
  background: var(--red-soft);
  border-color: var(--red-border);
}

/* 排行卡：等高锁定 + 列表内部滚动（与左列底部平齐）；<900px 单列时自动高度 */
.ranking-card {
  height: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.domain-list-v2 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

@media (max-width: 900px) {
  .ranking-card {
    height: auto;
    min-height: 0;
  }
  .domain-list-v2 {
    overflow: visible;
  }
}