* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #03060f; color: #dde6f5;
  font: 14px/1.4 -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }
#sky { position: fixed; inset: 0; width: 100vw; height: 100vh; touch-action: none; cursor: grab; display: block; }
#top { position: fixed; top: 0; left: 0; right: 0; display: flex; gap: 10px; align-items: center; padding: 8px 10px;
  background: linear-gradient(rgba(3,6,15,.85), rgba(3,6,15,0)); pointer-events: none; }
#top > * { pointer-events: auto; }
#timeText { font-size: 15px; font-weight: 600; }
#timeSub { font-size: 12px; opacity: .7; }
button, select, input { font: inherit; color: #e8eefc; background: #1a2440; border: 1px solid #34456e; border-radius: 6px; padding: 4px 8px; }
button { cursor: pointer; }
button:hover { background: #24345c; }
#btnPanel { font-size: 18px; padding: 2px 10px; }
#panel { position: fixed; top: 58px; left: 8px; width: 360px; max-width: calc(100vw - 16px); max-height: calc(100vh - 70px); overflow: auto;
  background: rgba(10,16,32,.86); border: 1px solid #263456; border-radius: 10px; padding: 8px 12px; backdrop-filter: blur(6px); }
body.panel-hidden #panel { display: none; }
#panel h3 { margin: 6px 0; font-size: 13px; color: #9fb4e0; }
.row { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.wrap { flex-wrap: wrap; }
#steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 6px 0; }
.stepgrp { display: flex; align-items: center; justify-content: space-between; background: #111a30; border-radius: 6px; padding: 2px; }
.stepgrp button { padding: 2px 10px; }
#timeInputs { flex-wrap: wrap; gap: 3px; }
#timeInputs input { padding: 3px 4px; }
.chk { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; white-space: nowrap; }
.hint { font-size: 11px; opacity: .65; margin: 4px 0; }
#jump button { padding: 3px 8px; }
#info { position: fixed; right: 8px; bottom: 8px; width: 330px; max-width: calc(100vw - 16px); background: rgba(10,16,32,.92);
  border: 1px solid #3a4d7a; border-radius: 10px; padding: 8px 12px; }
#info .ih { display: flex; justify-content: space-between; align-items: center; font-size: 16px; }
#info table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 4px; }
#info th { text-align: left; font-weight: normal; color: #9fb4e0; padding: 2px 6px 2px 0; vertical-align: top; }
#info td { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  #panel { top: auto; bottom: 0; left: 0; width: 100%; max-width: 100%; max-height: 50vh; border-radius: 10px 10px 0 0; }
  #info { bottom: auto; top: 60px; }
  #timeText { font-size: 13px; }
}