/* 字体回退与全局色 */
body, button, input, table, th, td {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang SC","Microsoft YaHei","Noto Sans SC",
               "Hiragino Sans GB", Arial, sans-serif;
}
:root{
  --bg-start:#1E3C73;
  --bg-end:#295095;
  --text-primary:#FFC94C;
  --button-bg:#FFB940;
  --border:#2C3E50;
}
*{ box-sizing:border-box; }

/* 基础布局与配色 */
body {
  margin: 20px;
  background: linear-gradient(135deg, var(--bg-start), var(--bg-end));
  color: var(--text-primary);
}
h2 {
  text-align: center;
  color: var(--text-primary);
  text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  display: flex; justify-content: center; align-items: center;
  font-size: 2em;
}
.table-wrapper { overflow-x: auto; }
table {
  border-collapse: collapse; width: 100%; margin-top: 20px; background: transparent;
  border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.1); color: var(--text-primary);
}
th, td { border: 1px solid var(--border); padding: 10px 8px; text-align: center; color: var(--text-primary); }
th { background-color: var(--bg-end); color: var(--text-primary); font-weight: 600; }
tr.highlight { background-color: var(--bg-end); font-weight: 700; }
tr.highlight td input { color: var(--text-primary); }

.slider-container { position: relative; width: 100%; margin-top: 20px; }
input[type=range]{ -webkit-appearance:none; width:100%; }
input[type=range]::-webkit-slider-runnable-track{
  height:8px; border-radius:4px;
  background: linear-gradient(to right, var(--text-primary) var(--fill, 0%), rgba(255,255,255,0.2) var(--fill, 0%));
}
input[type=range]::-moz-range-track{
  height:8px; border-radius:4px;
  background: linear-gradient(to right, var(--text-primary) var(--fill, 0%), rgba(255,255,255,0.2) var(--fill, 0%));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; height:16px; width:16px; border-radius:50%; background:var(--text-primary);
  cursor:pointer; margin-top:-4px; position:relative; z-index:2; box-shadow:0 0 6px rgba(255,201,76,0.6);
}
input[type=range]::-moz-range-thumb{
  height:16px; width:16px; border-radius:50%; background:var(--text-primary);
  cursor:pointer; position:relative; z-index:2; box-shadow:0 0 6px rgba(255,201,76,0.6);
}
.ticks{
  display:flex; justify-content:space-between; position:absolute; top:22px; left:0; right:0;
  font-size:16px; font-weight:600; color:var(--text-primary); text-shadow:1px 1px 2px rgba(0,0,0,0.4);
  pointer-events: none; /* 不拦截触控，提升滑动手感 */
}
#toggleFreeze{
  display:block; margin:40px auto 20px; padding:12px 24px; font-size:18px;
  background-color:var(--button-bg); color:#0D1B2A; border:none; border-radius:8px; cursor:pointer;
  transition: background 0.3s, transform 0.2s, box-shadow 0.3s; box-shadow:0 4px 12px rgba(0,0,0,0.2);
}
#toggleFreeze:hover{ background-color:var(--text-primary); transform:scale(1.05); box-shadow:0 6px 16px rgba(0,0,0,0.3); }
#selectedTime, #currentMode{ text-align:center; margin-top:10px; font-size:18px; color:var(--text-primary); text-shadow:1px 1px 3px rgba(0,0,0,0.3); }
td.time-cell input{
  width:100%; border:none; background:transparent; text-align:center; font-size:20px; color:var(--text-primary);
}
td.time-cell input::placeholder{ color:rgba(255,201,76,0.75); }
td.time-cell input:focus{ outline:2px solid var(--text-primary); background-color:rgba(255,255,255,0.05); }
td.utc-cell{ font-size:20px; }

/* ===== Mobile tweaks ===== */
/* ≤768px */
@media (max-width: 768px) {
  body { margin: 12px; }
  h2 { font-size: 1.5rem; }
  #selectedTime, #currentMode { font-size: 16px; }

  .slider-container { margin-top: 12px; }
  .ticks { top: 18px; font-size: 12px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px; }

  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 600px; }
  th, td { padding: 8px 6px; }
  td.utc-cell, td.time-cell input { font-size: 16px; }

  #toggleFreeze { width: 100%; max-width: none; font-size: 16px; padding: 10px 16px; }
}

/* ≤480px */
@media (max-width: 480px) {
  h2 { font-size: 1.25rem; }
  .ticks span { display: none; }
  .ticks span:nth-child(1),
  .ticks span:nth-child(3),
  .ticks span:nth-child(5),
  .ticks span:nth-child(7),
  .ticks span:nth-child(9) { display: inline; }
  .ticks { font-size: 11px; }

  input[type=range]::-webkit-slider-thumb { height:14px; width:14px; margin-top:-3px; }
  input[type=range]::-moz-range-thumb { height:14px; width:14px; }
  th, td { padding: 6px 4px; }
  td.utc-cell { font-size: 14px; }
  td.time-cell input { font-size: 15px; }
}