<template>
  <div class="chart-guide-screen">
    <div class="guide-bg guide-bg-grid"></div>
    <div class="guide-bg guide-bg-glow"></div>

    <header class="guide-header">
      <div>
        <div class="guide-kicker">Chart Style System</div>
        <h1>图表样式规范</h1>
      </div>
      <div class="guide-palette" aria-label="系统图表色板">
        <span
          v-for="color in paletteItems"
          :key="color"
          :style="{ background: color }"
        ></span>
      </div>
    </header>

    <main class="guide-layout">
      <section class="guide-chart-grid" aria-label="系统图表示例">
        <m-card
          v-for="(card, index) in chartCards"
          :key="card.key"
          class="guide-chart-card"
          :class="`is-${card.size || 'standard'}`"
          :width="getCardSize(card).width"
          :height="getCardSize(card).height"
          :title="`${formatChartNo(index)} ${card.title}`"
          :data-unit="card.unit"
        >
          <div class="guide-card-content" :class="card.visual ? `is-${card.visual}` : ''">
            <v-chart v-if="card.option" class="guide-chart" :option="card.option" autoresize />
            <template v-if="card.visual === 'three-pie'">
              <div class="guide-three-pie-visual">
                <MPie
                  :data="threePieRows"
                  :colors="threePieColors"
                  :delay="3000"
                  :opacity="0.62"
                  class="guide-three-pie"
                >
                  <template #default="{ data }">
                    <div class="guide-three-pie-center">
                      <strong>{{ getThreePiePercent(data) }}</strong>
                      <span>{{ data?.name || "结构占比" }}</span>
                    </div>
                  </template>
                </MPie>
              </div>
              <div class="guide-three-pie-legend">
                <div v-for="(item, itemIndex) in threePieRows" :key="item.name">
                  <i :style="{ borderColor: threePieColors[itemIndex] }"></i>
                  <span>{{ item.name }}</span>
                  <strong>{{ item.value }}<em>{{ item.unit }}</em></strong>
                </div>
              </div>
            </template>
            <template v-else-if="card.visual === 'structure-band'">
              <div class="guide-band">
                <i
                  v-for="item in structureBandRows"
                  :key="item.name"
                  :style="{ width: `${item.percent}%`, background: item.color }"
                ></i>
              </div>
              <div class="guide-band-list">
                <div v-for="item in structureBandRows" :key="item.name">
                  <span><i :style="{ background: item.color }"></i>{{ item.name }}</span>
                  <strong>{{ item.percent }}%</strong>
                </div>
              </div>
            </template>
            <template v-else-if="card.visual === 'rank-list'">
              <div v-for="(item, itemIndex) in rankListRows" :key="item.name" class="guide-rank-row">
                <span>{{ itemIndex + 1 }}</span>
                <em>{{ item.name }}</em>
                <i><b :style="{ width: `${item.percent}%` }"></b></i>
                <strong>{{ item.value }}</strong>
              </div>
            </template>
            <template v-else-if="card.visual === 'warning-band'">
              <div class="guide-warning-core">
                <strong>{{ warningSummary.value }}</strong>
                <span>{{ warningSummary.name }}</span>
              </div>
              <div class="guide-warning-list">
                <div v-for="item in warningBandRows" :key="item.name">
                  <span><i :style="{ background: item.color }"></i>{{ item.name }}</span>
                  <em>{{ item.value }}</em>
                  <b><i :style="{ width: `${item.percent}%`, background: item.color }"></i></b>
                </div>
              </div>
            </template>
            <template v-else-if="card.visual === 'target-stack'">
              <div v-for="item in targetStackRows" :key="item.name" class="guide-target-row">
                <span>{{ item.name }}</span>
                <b><i :style="{ width: `${item.percent}%`, background: item.color }"></i></b>
                <strong>{{ item.percent }}%</strong>
              </div>
            </template>
          </div>
        </m-card>
      </section>
    </main>
  </div>
</template>

<script setup>
import VChart from "vue-echarts"
import mCard from "@/components/mCard/index.vue"
import MPie from "@/components/mPie/index.vue"
import {
  categoryAxis,
  chartGrid,
  chartLegend,
  chartPalette,
  chartTooltip,
  createSystemBarOption,
  createSystemGroupedBarOption,
  createSystemLineOption,
  createSystemStackedBarOption,
  formatChartValue,
  valueAxis,
  verticalGradient,
  withChartDefaults,
} from "@/utils/chartTheme"

const paletteItems = chartPalette
const cardSizes = {
  standard: { width: 398, height: 190, label: "398x190" },
  tall: { width: 398, height: 392, label: "398x392" },
}

const townCategories = ["瓦切镇", "安曲镇", "邛溪镇", "龙日镇", "刷经寺镇", "麦洼乡", "查尔玛乡"]
const yakRows = [
  { name: "瓦切镇", value: 74721 },
  { name: "安曲镇", value: 65780 },
  { name: "邛溪镇", value: 63466 },
  { name: "龙日镇", value: 54691 },
  { name: "刷经寺镇", value: 45940 },
  { name: "麦洼乡", value: 38202 },
  { name: "查尔玛乡", value: 31766 },
]

const resourceCategories = ["草地", "湿地", "林地", "牧场", "保护地"]
const months = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"]

const chartCards = [
  {
    key: "bar-vertical",
    title: "林草湿资源面积",
    unit: "单位：万亩",
    option: createSystemBarOption({
      categories: resourceCategories,
      rows: [
        { name: "草地", value: 486.2 },
        { name: "湿地", value: 82.4 },
        { name: "林地", value: 126.8 },
        { name: "牧场", value: 58.6 },
        { name: "保护地", value: 214.5 },
      ],
      unit: "万亩",
      name: "资源面积",
      showLabel: false,
      grid: { left: 40, right: 16, top: 18, bottom: 34 },
    }),
  },
  {
    key: "bar-horizontal",
    title: "乡镇牦牛存栏排行",
    unit: "单位：头",
    option: createSystemBarOption({
      categories: townCategories.slice(0, 5),
      rows: yakRows.slice(0, 5),
      unit: "头",
      name: "牦牛存栏",
      orientation: "horizontal",
      colorIndex: 1,
      grid: { left: 58, right: 54, top: 16, bottom: 18 },
    }),
  },
  {
    key: "grouped-bar",
    title: "林草湿年度对比",
    unit: "单位：万亩",
    option: createSystemGroupedBarOption({
      categories: ["2021", "2022", "2023", "2024", "2025"],
      unit: "万亩",
      series: [
        { name: "草地", values: [472, 476, 481, 486, 489] },
        { name: "湿地", values: [76, 79, 81, 82, 84] },
        { name: "林地", values: [119, 121, 124, 127, 130] },
      ],
      grid: { left: 38, right: 14, top: 34, bottom: 32 },
    }),
  },
  {
    key: "stacked-bar",
    title: "草地利用结构",
    unit: "单位：万亩",
    option: createSystemStackedBarOption({
      categories: ["瓦切", "安曲", "邛溪", "龙日", "刷经寺"],
      unit: "万亩",
      series: [
        { name: "可利用草地", values: [66, 52, 48, 44, 38] },
        { name: "禁牧草地", values: [18, 21, 16, 13, 12] },
        { name: "退化治理", values: [9, 7, 8, 6, 5] },
      ],
      grid: { left: 38, right: 14, top: 34, bottom: 32 },
    }),
  },
  {
    key: "line-trend",
    title: "牦牛存栏趋势",
    unit: "单位：万头",
    option: createSystemLineOption({
      categories: months,
      unit: "万头",
      series: [
        { name: "2025年", values: [45.2, 45.8, 46.4, 47.1, 48.3, 49.1, 49.8, 50.2] },
        { name: "2024年", values: [42.9, 43.5, 44.2, 44.8, 45.9, 46.5, 47.1, 47.7] },
      ],
      grid: { left: 38, right: 14, top: 34, bottom: 30 },
    }),
  },
  {
    key: "area-line",
    title: "草地产草量走势",
    unit: "单位：万吨",
    option: createSystemLineOption({
      categories: months,
      unit: "万吨",
      area: true,
      series: [
        { name: "鲜草产量", values: [12.4, 14.1, 19.8, 28.6, 36.2, 43.5, 46.8, 41.2] },
      ],
      grid: { left: 38, right: 14, top: 34, bottom: 30 },
    }),
  },
  {
    key: "three-pie",
    title: "草牧资源结构",
    unit: "3D饼图",
    visual: "three-pie",
  },
  {
    key: "donut",
    title: "湿地类型结构",
    unit: "单位：%",
    option: createCompactDonutOption({
      unit: "万亩",
      name: "湿地结构",
      rows: [
        { name: "沼泽湿地", value: 36.8 },
        { name: "河流湿地", value: 21.3 },
        { name: "湖泊湿地", value: 14.6 },
        { name: "人工湿地", value: 9.7 },
      ],
    }),
  },
  {
    key: "rose",
    title: "林地类型占比",
    unit: "单位：%",
    option: createRoseOption(),
  },
  {
    key: "pictorial-column",
    title: "乡镇草地光柱",
    unit: "单位：万亩",
    option: createPictorialColumnOption(),
  },
  {
    key: "gauge",
    title: "草畜平衡预警",
    unit: "单位：分",
    option: createGaugeOption(),
  },
  {
    key: "progress-ring",
    title: "治理任务完成率",
    unit: "单位：%",
    option: createProgressRingOption(),
  },
  {
    key: "structure-band",
    title: "资源结构占比",
    unit: "单位：%",
    visual: "structure-band",
  },
  {
    key: "rank-list",
    title: "重点对象排行",
    unit: "单位：项",
    visual: "rank-list",
  },
  {
    key: "warning-band",
    title: "风险状态分布",
    unit: "单位：项",
    visual: "warning-band",
  },
  {
    key: "target-stack",
    title: "年度目标达成",
    unit: "单位：%",
    visual: "target-stack",
  },
]

const threePieColors = ["#17E6C3", "#40CFFF", "#1979FF", "#FFC472"]
const threePieRows = [
  { name: "草地", value: 486.2, unit: "万亩" },
  { name: "湿地", value: 82.4, unit: "万亩" },
  { name: "林地", value: 126.8, unit: "万亩" },
  { name: "保护地", value: 214.5, unit: "万亩" },
]

const structureBandRows = [
  { name: "草地", percent: 52, color: chartPalette[0] },
  { name: "林地", percent: 24, color: chartPalette[1] },
  { name: "湿地", percent: 14, color: chartPalette[2] },
  { name: "保护地", percent: 10, color: chartPalette[3] },
]

const rankListRows = [
  { name: "瓦切镇", value: "74,721", percent: 100 },
  { name: "安曲镇", value: "65,780", percent: 88 },
  { name: "邛溪镇", value: "63,466", percent: 85 },
  { name: "龙日镇", value: "54,691", percent: 73 },
]

const warningSummary = { name: "中低风险占比", value: "86%" }
const warningBandRows = [
  { name: "正常", value: "128", percent: 100, color: chartPalette[0] },
  { name: "关注", value: "36", percent: 45, color: chartPalette[2] },
  { name: "预警", value: "12", percent: 18, color: chartPalette[4] },
]

const targetStackRows = [
  { name: "草地修复", percent: 92, color: chartPalette[0] },
  { name: "湿地巡护", percent: 86, color: chartPalette[1] },
  { name: "林地管护", percent: 78, color: chartPalette[2] },
  { name: "风险处置", percent: 94, color: chartPalette[3] },
]

function formatChartNo(index) {
  return `C${String(index + 1).padStart(2, "0")}`
}

function getCardSize(card) {
  return cardSizes[card.size || "standard"] || cardSizes.standard
}

function getThreePiePercent(data = {}) {
  const total = threePieRows.reduce((sum, item) => sum + (Number(item.value) || 0), 0) || 1
  const percent = ((Number(data.value) || 0) / total) * 100
  return `${percent.toFixed(1)}%`
}

function createCompactDonutOption({ rows = [], unit = "", name = "结构占比" } = {}) {
  const total = rows.reduce((sum, row) => sum + (Number(row.value) || 0), 0) || 1
  return withChartDefaults({
    color: chartPalette,
    tooltip: chartTooltip((params) => `${params.marker}${params.name}：${formatChartValue(params.value)}${unit}<br/>占比：${formatChartValue(params.percent)}%`),
    legend: chartLegend({
      orient: "vertical",
      right: 12,
      top: "middle",
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 8,
      formatter: (label) => {
        const row = rows.find((item) => item.name === label)
        const percent = row ? Math.round(((Number(row.value) || 0) / total) * 100) : 0
        return `${label} ${percent}%`
      },
    }),
    series: [
      {
        name,
        type: "pie",
        radius: ["48%", "68%"],
        center: ["34%", "52%"],
        avoidLabelOverlap: true,
        label: { show: false },
        labelLine: { show: false },
        itemStyle: {
          borderColor: "rgba(3, 18, 31, 0.94)",
          borderWidth: 3,
        },
        data: rows.map((row, index) => ({
          name: row.name,
          value: Number(row.value) || 0,
          itemStyle: { color: row.color || chartPalette[index % chartPalette.length] },
        })),
      },
    ],
  })
}

function createRoseOption() {
  const rows = [
    { name: "乔木林地", value: 42.6 },
    { name: "灌木林地", value: 35.2 },
    { name: "疏林地", value: 18.4 },
    { name: "未成林地", value: 8.7 },
  ]
  return withChartDefaults({
    color: chartPalette,
    tooltip: chartTooltip((params) => `${params.marker}${params.name}：${formatChartValue(params.value)}万亩<br/>占比：${formatChartValue(params.percent)}%`),
    legend: chartLegend({
      orient: "vertical",
      right: 8,
      top: "middle",
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 7,
    }),
    series: [
      {
        name: "林地类型",
        type: "pie",
        roseType: "radius",
        radius: [14, "64%"],
        center: ["34%", "54%"],
        avoidLabelOverlap: true,
        itemStyle: {
          borderColor: "rgba(3, 18, 31, 0.94)",
          borderWidth: 3,
          shadowBlur: 10,
          shadowColor: "rgba(0, 0, 0, 0.25)",
        },
        label: {
          color: "#f7feff",
          fontSize: 10,
          formatter: ({ percent }) => (percent >= 8 ? `${Math.round(percent)}%` : ""),
        },
        labelLine: {
          length: 7,
          length2: 6,
          lineStyle: { color: "rgba(223, 250, 255, 0.38)" },
        },
        data: rows,
      },
    ],
  })
}

function createPictorialColumnOption() {
  const categories = ["瓦切", "安曲", "邛溪", "龙日", "刷经寺"]
  const values = [486, 372, 318, 246, 205]
  const maxValue = 520
  return withChartDefaults({
    color: chartPalette,
    grid: chartGrid({ left: 40, right: 18, top: 22, bottom: 34 }),
    tooltip: chartTooltip((params) => `${params.name}：${formatChartValue(params.value)}万亩`, {
      trigger: "axis",
      axisPointer: { type: "shadow", shadowStyle: { color: "rgba(48, 220, 255, 0.08)" } },
    }),
    xAxis: categoryAxis(categories),
    yAxis: valueAxis(),
    series: [
      {
        name: "底柱",
        type: "bar",
        barWidth: 24,
        barGap: "-100%",
        data: values.map(() => maxValue),
        tooltip: { show: false },
        silent: true,
        itemStyle: {
          borderRadius: [8, 8, 0, 0],
          borderColor: "rgba(48, 220, 255, 0.2)",
          borderWidth: 1,
          color: "rgba(48, 220, 255, 0.08)",
        },
      },
      {
        name: "草地面积",
        type: "bar",
        barWidth: 13,
        barGap: "-76%",
        z: 3,
        data: values,
        label: {
          show: true,
          position: "top",
          color: "#ffffff",
          fontSize: 10,
          formatter: ({ value }) => formatChartValue(value),
        },
        itemStyle: {
          borderRadius: [8, 8, 1, 1],
          color: verticalGradient(chartPalette[0]),
          shadowBlur: 10,
          shadowColor: "rgba(36, 246, 196, 0.28)",
        },
      },
      {
        name: "顶部高光",
        type: "pictorialBar",
        symbol: "diamond",
        symbolSize: [21, 6],
        symbolOffset: [0, -4],
        symbolPosition: "end",
        z: 5,
        tooltip: { show: false },
        data: values,
        itemStyle: {
          color: "rgba(232, 255, 255, 0.9)",
          shadowBlur: 9,
          shadowColor: "rgba(48, 220, 255, 0.7)",
        },
      },
    ],
  })
}

function createGaugeOption() {
  return withChartDefaults({
    series: [
      {
        type: "gauge",
        startAngle: 210,
        endAngle: -30,
        min: 0,
        max: 100,
        radius: "88%",
        center: ["50%", "58%"],
        progress: {
          show: true,
          width: 12,
          itemStyle: { color: chartPalette[2] },
        },
        axisLine: {
          lineStyle: {
            width: 12,
            color: [
              [0.55, "rgba(36, 246, 196, 0.42)"],
              [0.8, "rgba(255, 224, 107, 0.42)"],
              [1, "rgba(255, 154, 98, 0.42)"],
            ],
          },
        },
        axisTick: { show: false },
        splitLine: { length: 7, lineStyle: { color: "rgba(225, 249, 255, 0.36)", width: 1 } },
        axisLabel: { show: false },
        pointer: {
          icon: "path://M4 0 L-4 0 L0 -62 Z",
          width: 8,
          length: "56%",
          itemStyle: { color: "#ffe06b", shadowBlur: 8, shadowColor: "rgba(255, 224, 107, 0.45)" },
        },
        anchor: { show: true, size: 7, itemStyle: { color: "#ffe06b" } },
        title: { offsetCenter: [0, "52%"], color: "rgba(225, 249, 255, 0.7)", fontSize: 12 },
        detail: {
          valueAnimation: true,
          offsetCenter: [0, "26%"],
          color: "#ffe06b",
          fontSize: 27,
          fontWeight: 700,
          formatter: "{value}",
        },
        data: [{ value: 78, name: "中度预警" }],
      },
    ],
  })
}

function createProgressRingOption() {
  return withChartDefaults({
    tooltip: chartTooltip((params) => `${params.marker}${params.name}：${params.value}%`),
    series: [
      {
        type: "pie",
        radius: ["62%", "76%"],
        center: ["50%", "52%"],
        silent: true,
        label: { show: false },
        data: [
          { name: "已完成", value: 72, itemStyle: { color: chartPalette[0] } },
          { name: "未完成", value: 28, itemStyle: { color: "rgba(48, 220, 255, .12)" } },
        ],
      },
      {
        type: "pie",
        radius: ["42%", "46%"],
        center: ["50%", "52%"],
        silent: true,
        label: {
          position: "center",
          formatter: "72%\n完成",
          color: "#ffe06b",
          fontSize: 22,
          lineHeight: 30,
          fontWeight: 700,
        },
        data: [{ value: 1, itemStyle: { color: "rgba(255, 224, 107, .28)" } }],
      },
    ],
  })
}
</script>

<style scoped lang="scss">
.chart-guide-screen {
  position: fixed;
  inset: 0;
  height: auto;
  padding: 24px 24px 42px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;
  color: #e7fbff;
  background:
    radial-gradient(circle at 50% 18%, rgba(36, 246, 196, 0.12), transparent 31%),
    linear-gradient(180deg, #04101d 0%, #020914 46%, #010611 100%);
  font-family: AlibabaPuHuiTi, "Microsoft YaHei", Arial, sans-serif;
}

.guide-bg {
  position: fixed;
  pointer-events: none;
  inset: 0;
}

.guide-bg-grid {
  opacity: 0.48;
  background-image:
    linear-gradient(rgba(48, 220, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48, 220, 255, 0.08) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.72) 58%, transparent 100%);
}

.guide-bg-glow {
  opacity: 0.68;
  background:
    radial-gradient(circle at 15% 18%, rgba(50, 220, 255, 0.13), transparent 24%),
    radial-gradient(circle at 82% 28%, rgba(255, 224, 107, 0.09), transparent 22%);
}

.guide-header,
.guide-layout {
  position: relative;
  z-index: 1;
}

.guide-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 14px;
}

.guide-kicker {
  margin-bottom: 8px;
  color: #24f6c4;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.guide-header h1 {
  margin: 0;
  color: #f4fdff;
  font-size: 32px;
  line-height: 1.08;
  font-weight: 700;
  text-shadow: 0 0 18px rgba(48, 220, 255, 0.3);
}

.guide-palette {
  display: grid;
  grid-template-columns: repeat(6, 34px);
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(48, 220, 255, 0.26);
  background: rgba(3, 26, 42, 0.72);
}

.guide-palette span {
  display: block;
  width: 34px;
  height: 18px;
  box-shadow: 0 0 14px currentColor;
}

.guide-layout {
  display: block;
}

.guide-chart-grid {
  display: grid;
  grid-template-columns: repeat(4, 398px);
  align-items: flex-start;
  justify-content: start;
  gap: 12px;
  width: 1628px;
  max-width: 100%;
}

.guide-chart-card {
  flex: 0 0 auto;
}

.guide-chart-card::after {
  content: attr(data-unit);
  position: absolute;
  top: 9px;
  right: 16px;
  z-index: 4;
  max-width: 112px;
  color: rgba(255, 224, 107, 0.92);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.guide-chart-card :deep(.m-card-hd-title) {
  right: 150px;
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 800 !important;
  filter: brightness(1.2) contrast(1.08) !important;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.96),
    0 0 8px rgba(255, 255, 255, 0.22) !important;
}

.guide-chart-card :deep(.m-card-bd-content) {
  top: 40px;
  bottom: 10px;
  color: #f3feff;
  overflow: hidden;
}

.guide-chart-card :deep(.m-card-bd-bg) {
  filter: brightness(1.08) saturate(1.04);
}

.guide-chart-card :deep(.m-card-bd-bg::after) {
  content: "";
  position: absolute;
  inset: 4px 5px 6px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(48, 220, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(17, 73, 92, 0.16), rgba(6, 29, 44, 0.14)),
    linear-gradient(90deg, rgba(48, 220, 255, 0.1), transparent 42%, rgba(48, 220, 255, 0.06));
  box-shadow:
    inset 0 0 0 1px rgba(48, 220, 255, 0.06),
    inset 0 12px 28px rgba(48, 220, 255, 0.04);
}

.guide-card-content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.guide-chart {
  width: 100%;
  height: 100%;
}

.guide-card-content.is-three-pie {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  align-items: center;
  gap: 2px;
  padding: 0 12px 4px 4px;
  box-sizing: border-box;
}

.guide-three-pie-visual {
  position: relative;
  width: 224px;
  height: 132px;
  pointer-events: auto;
}

.guide-three-pie {
  width: 100%;
  height: 100%;
}

.guide-three-pie-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin-top: -16px;
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.92);
}

.guide-three-pie-center strong {
  color: #ffe06b;
  font-family: D-DIN, AlibabaPuHuiTi, "Microsoft YaHei", Arial, sans-serif;
  font-size: 18px;
  line-height: 1;
}

.guide-three-pie-center span {
  max-width: 90px;
  margin-top: 5px;
  overflow: hidden;
  color: rgba(245, 254, 255, 0.9);
  font-size: 11px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-three-pie-legend {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.guide-three-pie-legend div {
  display: grid;
  grid-template-columns: 12px 42px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: rgba(225, 249, 255, 0.74);
  font-size: 11px;
}

.guide-three-pie-legend i {
  width: 9px;
  height: 9px;
  border: 2px solid #17e6c3;
  border-radius: 50%;
  box-sizing: border-box;
  box-shadow: 0 0 10px currentColor;
}

.guide-three-pie-legend span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-three-pie-legend strong {
  color: #ffffff;
  font-family: D-DIN, AlibabaPuHuiTi, "Microsoft YaHei", Arial, sans-serif;
  font-size: 13px;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.guide-three-pie-legend em {
  margin-left: 2px;
  color: rgba(225, 249, 255, 0.52);
  font-size: 10px;
  font-style: normal;
}

.guide-card-content.is-structure-band {
  padding: 18px 18px 12px;
  box-sizing: border-box;
}

.guide-band {
  display: flex;
  height: 16px;
  margin: 18px 0 14px;
  overflow: hidden;
  border: 1px solid rgba(48, 220, 255, 0.2);
  background: rgba(48, 220, 255, 0.08);
}

.guide-band i {
  display: block;
  height: 100%;
  box-shadow: 0 0 16px currentColor;
}

.guide-band-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
}

.guide-band-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  color: rgba(225, 249, 255, 0.68);
  font-size: 11px;
}

.guide-band-list span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.guide-band-list span i {
  width: 8px;
  height: 8px;
}

.guide-band-list strong {
  color: #ffe06b;
  font-family: D-DIN, AlibabaPuHuiTi, "Microsoft YaHei", Arial, sans-serif;
}

.guide-card-content.is-rank-list {
  display: grid;
  align-content: center;
  gap: 9px;
  padding: 4px 16px 9px;
  box-sizing: border-box;
}

.guide-rank-row {
  display: grid;
  grid-template-columns: 22px 62px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 8px;
  color: rgba(225, 249, 255, 0.68);
  font-size: 11px;
}

.guide-rank-row span {
  color: #24f6c4;
  font-family: D-DIN, AlibabaPuHuiTi, "Microsoft YaHei", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.guide-rank-row em {
  overflow: hidden;
  color: rgba(225, 249, 255, 0.86);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-rank-row i {
  height: 7px;
  overflow: hidden;
  background: rgba(48, 220, 255, 0.1);
}

.guide-rank-row b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(36, 246, 196, 0.18), #24f6c4);
  box-shadow: 0 0 12px rgba(36, 246, 196, 0.25);
}

.guide-rank-row strong {
  color: #ffe06b;
  font-family: D-DIN, AlibabaPuHuiTi, "Microsoft YaHei", Arial, sans-serif;
  text-align: right;
}

.guide-card-content.is-warning-band {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px 18px 14px;
  box-sizing: border-box;
}

.guide-warning-core {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(36, 246, 196, 0.32);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(36, 246, 196, 0.16), rgba(48, 220, 255, 0.08) 58%, rgba(3, 22, 35, 0.2) 60%),
    conic-gradient(#24f6c4 0 86%, rgba(48, 220, 255, 0.12) 86% 100%);
  box-shadow: 0 0 20px rgba(36, 246, 196, 0.16);
}

.guide-warning-core::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: rgba(3, 18, 31, 0.94);
}

.guide-warning-core strong,
.guide-warning-core span {
  position: relative;
  z-index: 1;
  text-align: center;
}

.guide-warning-core strong {
  color: #ffe06b;
  font-family: D-DIN, AlibabaPuHuiTi, "Microsoft YaHei", Arial, sans-serif;
  font-size: 25px;
  line-height: 1;
}

.guide-warning-core span {
  margin-top: -16px;
  color: rgba(225, 249, 255, 0.64);
  font-size: 10px;
  line-height: 1;
}

.guide-warning-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.guide-warning-list div {
  display: grid;
  grid-template-columns: 56px 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: rgba(225, 249, 255, 0.72);
  font-size: 11px;
}

.guide-warning-list span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  white-space: nowrap;
}

.guide-warning-list span i {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 10px currentColor;
}

.guide-warning-list em {
  color: #ffffff;
  font-family: D-DIN, AlibabaPuHuiTi, "Microsoft YaHei", Arial, sans-serif;
  font-style: normal;
  text-align: right;
}

.guide-warning-list b {
  display: block;
  height: 7px;
  overflow: hidden;
  background: rgba(48, 220, 255, 0.1);
}

.guide-warning-list b i {
  display: block;
  height: 100%;
  box-shadow: 0 0 12px currentColor;
}

.guide-card-content.is-target-stack {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 5px 18px 10px;
  box-sizing: border-box;
}

.guide-target-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.guide-target-row span {
  color: rgba(225, 249, 255, 0.72);
  font-size: 11px;
  white-space: nowrap;
}

.guide-target-row b {
  position: relative;
  display: block;
  height: 9px;
  overflow: hidden;
  background: rgba(48, 220, 255, 0.1);
}

.guide-target-row b::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.13), transparent);
}

.guide-target-row b i {
  position: relative;
  display: block;
  height: 100%;
  box-shadow: 0 0 14px currentColor;
}

.guide-target-row strong {
  color: #ffe06b;
  font-family: D-DIN, AlibabaPuHuiTi, "Microsoft YaHei", Arial, sans-serif;
  font-size: 15px;
  line-height: 1;
  text-align: right;
}

@media (max-width: 1700px) {
  .guide-chart-grid {
    grid-template-columns: repeat(3, 398px);
    width: 1218px;
  }
}

@media (max-width: 1300px) {
  .guide-chart-grid {
    grid-template-columns: repeat(2, 398px);
    width: 808px;
  }
}

@media (max-width: 1180px) {
  .chart-guide-screen {
    padding: 24px 20px 34px;
  }

  .guide-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .guide-chart-grid {
    grid-template-columns: repeat(2, 398px);
    width: 808px;
  }
}

@media (max-width: 760px) {
  .chart-guide-screen {
    padding: 20px 14px 28px;
  }

  .guide-header h1 {
    font-size: 26px;
  }

  .guide-palette {
    grid-template-columns: repeat(3, 34px);
  }

  .guide-chart-grid {
    grid-template-columns: 398px;
    width: 398px;
  }
}
</style>
