: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);
}


.quick-check-panel{
  display:none;
  width:98%;
  max-width:960px;
  margin:8px auto 14px auto;
  padding:12px 8px;
  box-sizing:border-box;
  background:var(--bg-2);
  border:1px solid var(--border-1);
  border-radius:14px;
  color:var(--text-1);
}

.quick-check-title{
  font-size:4vmin;
  color:var(--text-2);
  margin-bottom:10px;
}

.quick-check-balls{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 8px;
}

.quick-ball-btn{
  width:46px;
  height:46px;
  min-width:46px;
  min-height:46px;

  border-radius:50%;
  border:1.5px solid #0099E8;
  background:var(--bg-1);
  color:var(--text-1);

  font-size:24px;
  font-weight:700;
  font-family:Arial, Helvetica, sans-serif;
  letter-spacing:0;
  line-height:46px;

  cursor:pointer;
  padding:0;
  margin:0;
  text-align:center;
  vertical-align:middle;
  box-sizing:border-box;

  appearance:none;
  -webkit-appearance:none;
}

.quick-ball-btn.selected{
  background:#12A9E8;
  color:#FFFFFF;
  box-shadow:0 0 0 3px rgba(18,169,232,.25);
}

.quick-check-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:14px;
}

.quick-check-action-btn{
  width:52px;
  height:52px;
  min-width:52px;
  min-height:52px;

  border-radius:50%;
  border:2px solid var(--accent-1);

  background:var(--bg-1);
  color:var(--accent-1) !important;

  font-size:22px;
  font-weight:bold;
  font-family:Arial, Helvetica, sans-serif;

  cursor:pointer;
  padding:0;
  margin:0;

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

  box-shadow:0 2px 4px rgba(0,0,0,0.2);
  transition:all .15s ease;
}

.quick-check-action-btn:hover{
  transform:scale(1.05);
}

.quick-check-action-btn:active{
  transform:scale(0.95);
}

.quick-check-action-btn span{
  display:inline-block;
  transform: translateX(3px);
}

.quick-check-selected-text{
  margin-top:12px;
  font-size:8vmin !important;
  font-weight:bold;
  color:var(--text-2);
  text-align:center;
  word-break:break-all;
}

.lotto-num-hit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.7em;
  min-height:1.7em;
  border-radius:50%;
  border:2px solid #BDBDBD;
  box-sizing:border-box;
  margin:0 1px;
}

.lotto-num-win{
  border-color:#E60000;
  color:#E60000 !important;
}

body.dark-mode .quick-ball-btn{
  background:#FFFFFF;
  color:#333333;
  border-color:#4DBBFF;
}

body.dark-mode .quick-ball-btn.selected{
  background:#12A9E8;
  color:#FFFFFF;
}

body.dark-mode .lotto-num-hit{
  border-color:#8A8A8A;
}

body.dark-mode .lotto-num-win{
  border-color:#FF6B6B;
  color:#FF8A8A !important;
}

body.dark-mode .quick-check-action-btn{
  background:var(--bg-3);
  color:#FFD2C7 !important;
  border-color:#B13A12;
}