:root {
  --bg: #100303;
  --panel: #250807;
  --panel2: #350d0a;
  --border: #74501e;
  --gold: #f2c45c;
  --gold2: #ffd985;
  --text: #fff3da;
  --muted: #cdbb97;
  --error: #ff9999;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background:
    radial-gradient(
      circle at top,
      #3a100d,
      #160404 45%,
      #0c0202
    );

  color: var(--text);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;
}

.page {
  width:
    min(
      1080px,
      calc(100% - 24px)
    );

  margin: 0 auto;

  padding:
    24px
    0
    40px;
}

.panel {
  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius: 15px;

  background:
    linear-gradient(
      180deg,
      #300b09,
      #1d0605
    );

  box-shadow:
    0 18px 55px
    rgba(0,0,0,.38);
}

.header {
  min-height: 82px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border-bottom:
    1px solid
    var(--border);

  background:
    linear-gradient(
      180deg,
      #5a1711,
      #3b0b08
    );
}

.header h1 {
  margin: 0;

  color:
    var(--gold2);

  font-size:
    clamp(
      24px,
      3vw,
      34px
    );

  letter-spacing: 3px;
}

.updated {
  margin-top: 6px;

  min-height: 18px;

  color:
    var(--muted);

  font-size: 12px;
}

.years {
  display: flex;

  gap: 7px;

  overflow-x: auto;

  padding: 13px;

  border-bottom:
    1px solid
    #573616;

  background:
    #210706;
}

.year {
  flex: 0 0 auto;

  min-width: 66px;

  height: 38px;

  border:
    1px solid
    #76501e;

  border-radius: 7px;

  background:
    #35100c;

  color:
    #dac89e;

  cursor: pointer;
}

.year.active {
  border-color:
    var(--gold);

  background:
    linear-gradient(
      180deg,
      #e0ac42,
      #a86e1d
    );

  color:
    #2b0905;

  font-weight: 800;
}

.content {
  padding: 16px;
}

.year-title {
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid
    #966920;

  border-bottom: 0;

  border-radius:
    8px 8px 0 0;

  background:
    linear-gradient(
      180deg,
      #d8a33d,
      #a86d1c
    );

  color:
    #2b0905;

  font-weight: 800;
}

table {
  width: 100%;

  border-collapse:
    collapse;

  table-layout:
    fixed;
}

th,
td {
  height: 48px;

  padding:
    8px 10px;

  border:
    1px solid
    #704518;

  text-align:
    center;
}

th {
  color:
    var(--gold2);

  background:
    #45120e;
}

td {
  background:
    rgba(
      45,
      10,
      8,
      .96
    );
}

tbody tr:nth-child(even) td {
  background:
    rgba(
      55,
      13,
      10,
      .96
    );
}

.period {
  width: 18%;
}

.amount {
  width: 23%;
}

td:last-child {
  color:
    var(--gold2);

  font-weight: 800;
}

.note {
  padding:
    12px;

  border:
    1px solid
    var(--border);

  border-top: 0;

  border-radius:
    0 0 8px 8px;

  color:
    var(--muted);

  font-size:
    13px;

  text-align:
    center;
}

.state {
  padding:
    70px 20px;

  text-align:
    center;

  color:
    var(--muted);
}

.error {
  color:
    var(--error);
}

@media (
  max-width: 640px
) {
  .page {
    width: 100%;
    padding: 0;
  }

  .panel {
    min-height:
      100vh;

    border: 0;

    border-radius: 0;
  }

  .header {
    min-height: 64px;
  }

  .header h1 {
    font-size: 23px;
  }

  .years {
    padding: 10px;
  }

  .year {
    min-width: 60px;
    height: 35px;
    font-size: 13px;
  }

  .content {
    padding: 10px;
  }

  .year-title {
    min-height: 43px;
    font-size: 14px;
  }

  th,
  td {
    height: 44px;
    padding: 6px 4px;
    font-size: 12px;
  }

  .period {
    width: 19%;
  }

  .amount {
    width: 24%;
  }

  .note {
    font-size: 11px;
  }
}

/* FENHONG VISUAL R2 START */

/*
 * HOME THEME
 * 与长顺首页共用相同颜色体系
 * 不增加卡片边框
 */

.dividend-visual {
  margin:
    18px
    0
    26px;

  padding:
    4px
    0
    8px;

  background:
    transparent;

  color:
    var(--text);
}

.dividend-kpis {
  display:
    grid;

  grid-template-columns:
    minmax(180px,1.3fr)
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:
    22px;

  margin-bottom:
    32px;
}

.dividend-kpi {
  min-width:
    0;

  padding:
    3px
    2px;

  border:
    0;

  border-radius:
    0;

  background:
    transparent;

  box-shadow:
    none;
}

.dividend-kpi-label {
  color:
    var(--muted);

  font-size:
    12px;

  font-weight:
    600;
}

.dividend-kpi-value {
  margin-top:
    7px;

  overflow:
    hidden;

  color:
    var(--gold2);

  font-size:
    clamp(
      20px,
      2.2vw,
      27px
    );

  font-weight:
    800;

  line-height:
    1.22;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.dividend-kpi-sub {
  margin-top:
    7px;

  overflow:
    hidden;

  color:
    var(--muted);

  font-size:
    11px;

  line-height:
    1.5;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.dividend-chart-card {
  margin-top:
    27px;

  overflow:
    visible;

  border:
    0;

  border-radius:
    0;

  background:
    transparent;

  box-shadow:
    none;
}

.dividend-chart-head {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    0
    0
    12px;

  border:
    0;

  background:
    transparent;
}

.dividend-chart-head h2 {
  margin:
    0;

  color:
    var(--gold2);

  font-size:
    19px;

  font-weight:
    800;

  line-height:
    1.4;
}

.dividend-chart-desc,
.dividend-chart-meta {
  margin-top:
    5px;

  color:
    var(--muted);

  font-size:
    11px;
}

.dividend-chart-meta {
  flex:
    0
    0
    auto;

  margin-top:
    0;

  text-align:
    right;
}

.dividend-chart-scroll {
  overflow-x:
    auto;

  padding:
    8px
    0
    0;
}

.dividend-line-svg {
  display:
    block;

  width:
    100%;

  min-width:
    760px;

  height:
    auto;
}

.dividend-grid-line {
  stroke:
    var(--border2);

  stroke-width:
    1;

  stroke-dasharray:
    4 6;

  opacity:
    .55;
}

.dividend-axis-text {
  fill:
    var(--muted);

  font-size:
    12px;
}

.dividend-line-path {
  fill:
    none;

  stroke:
    var(--gold);

  stroke-width:
    3;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}

.dividend-line-point {
  fill:
    var(--gold2);

  stroke:
    var(--panel);

  stroke-width:
    2;
}

.dividend-point-value {
  fill:
    var(--gold2);

  font-size:
    11px;

  font-weight:
    700;
}

.dividend-bars {
  display:
    grid;

  gap:
    13px;

  padding:
    8px
    0
    0;
}

.dividend-bar-row {
  display:
    grid;

  grid-template-columns:
    74px
    minmax(0,1fr)
    98px;

  align-items:
    center;

  gap:
    11px;
}

.dividend-bar-period {
  overflow:
    hidden;

  color:
    var(--text);

  font-size:
    12px;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.dividend-bar-track {
  height:
    9px;

  overflow:
    hidden;

  border:
    0;

  border-radius:
    999px;

  background:
    var(--panel3);
}

.dividend-bar-fill {
  height:
    100%;

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--gold2)
    );
}

.dividend-bar-value {
  color:
    var(--gold2);

  font-size:
    12px;

  font-weight:
    800;

  text-align:
    right;
}

@media (
  max-width:760px
) {

  .dividend-kpis {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:
      21px
      15px;
  }

  .dividend-kpi-latest {
    grid-column:
      1 / -1;
  }

  .dividend-chart-head {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      4px;
  }

  .dividend-chart-meta {
    text-align:
      left;
  }
}

@media (
  max-width:480px
) {

  .dividend-kpi-value {
    font-size:
      18px;
  }

  .dividend-chart-head h2 {
    font-size:
      17px;
  }

  .dividend-bar-row {
    grid-template-columns:
      58px
      minmax(0,1fr)
      84px;

    gap:
      7px;
  }
}

/* FENHONG VISUAL R2 END */

/* FENHONG HOME THEME R1 START */

/*
 * 以下颜色从当前主页 prototype-v3.css 自动读取。
 * 不单独创造分红页配色。
 */

:root {
  --bg:
    #140507;

  --bg2:
    #1d070a;

  --panel:
    #260A0E;

  --panel2:
    #310b11;

  --panel3:
    #3a0d14;

  --border:
    #4A151B;

  --border2:
    #6b2028;

  --gold:
    #D4AF37;

  --gold2:
    #F0D987;

  --text:
    #F0E6D2;

  --muted:
    #9E8A8F;
}


/* 整页背景与主页统一 */

body {
  background:
    radial-gradient(
      circle at top,
      var(--panel3),
      var(--bg2) 46%,
      var(--bg)
    );

  color:
    var(--text);
}


/* 分红主体沿用主页 panel */

.panel {
  background:
    linear-gradient(
      180deg,
      var(--panel2),
      var(--bg2)
    );

  border-color:
    var(--border);
}


.header {
  background:
    linear-gradient(
      180deg,
      var(--panel3),
      var(--panel2)
    );

  border-bottom-color:
    var(--border);
}


.header h1 {
  color:
    var(--gold2);
}


.updated {
  color:
    var(--muted);
}


.years {
  border-bottom-color:
    var(--border);
}


.year {
  border-color:
    var(--border2);

  background:
    var(--panel2);

  color:
    var(--text);
}


.year.active {
  border-color:
    var(--gold);

  background:
    linear-gradient(
      180deg,
      var(--gold2),
      var(--gold)
    );

  color:
    var(--bg);
}


.year-title {
  border-color:
    var(--border2);

  background:
    linear-gradient(
      180deg,
      var(--gold2),
      var(--gold)
    );

  color:
    var(--bg);
}


/* 原表格结构不动，只统一颜色 */

th,
td {
  border-color:
    var(--border2);
}


th {
  background:
    var(--panel3);

  color:
    var(--gold2);
}


td {
  background:
    var(--panel);

  color:
    var(--text);
}


tbody tr:nth-child(even) td {
  background:
    var(--panel2);
}


td:last-child {
  color:
    var(--gold2);
}


.note {
  border-color:
    var(--border);

  color:
    var(--muted);
}


/*
 * SEO说明区原源码是白底。
 * 这里只针对 fenhong 覆盖，不影响其他页面。
 */

section[data-seo-content-v1="fenhong"] {
  width:
    min(
      1080px,
      calc(100% - 24px)
    )
    !important;

  box-sizing:
    border-box
    !important;

  background:
    var(--panel)
    !important;

  color:
    var(--text)
    !important;

  border:
    0
    !important;

  border-radius:
    0
    !important;

  box-shadow:
    none
    !important;
}


section[data-seo-content-v1="fenhong"] h2,
section[data-seo-content-v1="fenhong"] h3 {
  color:
    var(--gold2)
    !important;
}


section[data-seo-content-v1="fenhong"] p,
section[data-seo-content-v1="fenhong"] li,
section[data-seo-content-v1="fenhong"] details {
  color:
    var(--text)
    !important;
}


section[data-seo-content-v1="fenhong"] summary {
  color:
    var(--gold2)
    !important;
}


section[data-seo-content-v1="fenhong"] a {
  color:
    var(--gold2)
    !important;
}


/* FENHONG HOME THEME R1 END */