:root{
  /* 亮色模式 */
  --bg-1: #FFFFFF;   /* 最白 */
  --bg-2: #FFF8F4;   /* 漸白 */
  --bg-3: #FFEEE7;   /* 微白 */
  --bg-4: #B02D00;   

  --text-1: #111111; /* 最黑 */
  --text-2: #333333; /* 深灰 */
  --text-3: #666666; /* 微灰 */

  --accent-1: #930000; /* 主紅 */
  --accent-2: #C94A1A; /* 次紅 */
  --accent-3: #FFDBCE; /* 淺紅底 */

  --border-1: #D8D8D8;
  --border-2: #CCCCCC;

  --btn-bg: #AA0000;
  --btn-text: #FFFFFF;

  --soft-btn-bg: #FFD6D8;
  --soft-btn-text: #5A0000;

  --input-bg: #FF9294;
  --input-text: #3A0000;

  --icon-bg: #F2F2F2;
  --icon-border: #D0D0D0;
}

body.dark-mode{
  /* 深色模式 */
  --bg-1: #0F0F10;   /* 最黑背景 */
  --bg-2: #1A1A1D;   /* 深灰背景 */
  --bg-3: #25252A;   /* 微灰背景 */
  --bg-4: #585858;   

  --text-1: #F8F8F8; /* 最白 */
  --text-2: #D8D8D8; /* 漸白 */
  --text-3: #AFAFAF; /* 微白 */

  --accent-1: #FFD2C7; /* 深紅 */
  --accent-2: #B13A12; /* 亮一階紅 */
  --accent-3: #3A231D; /* 深色交錯列 */

  --border-1: #4A4A4A;
  --border-2: #5A5A5A;

  --btn-bg: #7C1C00;
  --btn-text: #FFF4EE;

  --soft-btn-bg: #3A2325;
  --soft-btn-text: #FFD9D9;

  --input-bg: #462628;
  --input-text: #FFE3E3;

  --icon-bg: #232327;
  --icon-border: #55555A;
}




  body {
    word-break: break-all;
    background-color: var(--bg-1);
    color: var(--text-1);
    transition: background-color .25s ease, color .25s ease;
 }

/* 滑桿列置中、RWD */
.table-toolbar {
  width: 98%;
  max-width: 960px;
  margin: 8px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 3.5vmin;
  color: var(--text-2);
  box-sizing: border-box;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 12px;
  padding: 8px 10px;
}

.table-toolbar input[type="range"] {
  width: 62%;
}

.dark-toggle-btn{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--icon-border);
  background: var(--icon-bg);
  color: var(--text-1);
  font-size: 20px;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: all .2s ease;
  padding: 0;
}

.dark-toggle-btn span{
  display:inline-block;
  transform: translateX(3.5px); /* 往右偏移微調 */
}

.dark-toggle-btn:hover{
  transform: scale(1.05);
}

.dynamic-table {
  --font-offset: 0vmin;
  width: 100%;
  margin: 16px auto;
  border-collapse: collapse;
  text-align: center;
  background-color: var(--bg-1);
}

.dynamic-table th {
  background-color: var(--accent-1);
  color: var(--text-1);
  font-weight: bold;
  padding: 6px;
  font-size: calc(5vmin + var(--font-offset));
}

.dynamic-table td {
  font-weight: bold;
  color: var(--text-1);
  border-bottom: dotted 1px var(--border-2);
  padding: 6px;
  text-align: center;
  vertical-align: middle;
  background-color: var(--bg-1);
}

.dynamic-table .date-cell {
  font-size: calc(4vmin + var(--font-offset));
}

.dynamic-table .number-cell {
  font-size: calc(6vmin + var(--font-offset));
}

.dynamic-table .bonus-cell {
  font-size: calc(5vmin + var(--font-offset));
}

.theme-accent-text{
  color: var(--accent-1) !important;
}

.theme-normal-text{
  color: var(--text-1) !important;
}

.theme-soft-text{
  color: var(--text-2) !important;
}

.theme-soft-bg{
  background-color: var(--bg-2) !important;
}

.theme-alt-row{
  background-color: var(--accent-3) !important;
}

.theme-btn-main{
  background-color: var(--btn-bg) !important;
  color: var(--btn-text) !important;
}

.theme-btn-soft{
  background-color: var(--soft-btn-bg) !important;
  color: var(--soft-btn-text) !important;
}

.theme-select{
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border: 1px solid var(--border-1);
}

body.dark-mode a{
  color: var(--text-2);
}

body.dark-mode #menu a{
  color: var(--text-1) !important;
}


#footer .copyright li{
  color: var(--text-2);
}

body.dark-mode #footer .copyright li{
  color: var(--text-3);
}