* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: #f2f3f5; color: #1c1c1e; font-size: 16px;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
#topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  background: #07c160; color: #fff; padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top));
}
.brand { font-weight: 700; font-size: 17px; white-space: nowrap; }
.shiftSwitch { display: flex; background: rgba(255,255,255,.22); border-radius: 999px; padding: 2px; margin-left: auto; }
.shiftSwitch button {
  border: 0; background: transparent; color: #fff; padding: 5px 12px; border-radius: 999px; font-size: 14px;
}
.shiftSwitch button.on { background: #fff; color: #07a04e; font-weight: 600; }
#langBtn { border: 1px solid rgba(255,255,255,.7); background: transparent; color: #fff; border-radius: 8px; padding: 5px 9px; font-size: 13px; }
main { max-width: 640px; margin: 0 auto; padding: 12px; }
.loading, .empty { text-align: center; color: #8a8a8e; padding: 40px 0; }
.card { background: #fff; border-radius: 14px; padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.card h2 { font-size: 17px; margin: 0 0 8px; }
.card h3 { font-size: 15px; margin: 0 0 6px; }
.muted { color: #8a8a8e; font-size: 13px; }
.small { font-size: 13px; }
.delayBadge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #e8f8ef; color: #07884a; }
.delayBadge.late { background: #fdeeee; color: #d43a2f; }
.etaBig { font-size: 22px; font-weight: 700; margin: 4px 0; }
.etaBig .tm { color: #07a04e; }
.btn {
  display: inline-block; border: 0; border-radius: 10px; padding: 10px 16px; font-size: 15px;
  background: #07c160; color: #fff; font-weight: 600; cursor: pointer; text-align: center;
}
.btn:active { opacity: .85; }
.btn.ghost { background: #eef1f4; color: #1c1c1e; font-weight: 500; }
.btn.danger { background: #fdeeee; color: #d43a2f; }
.btn.block { display: block; width: 100%; }
.btn:disabled { opacity: .45; }
.btnRow { display: flex; gap: 10px; }
.btnRow .btn { flex: 1; }
input[type="text"], input[type="time"], select {
  width: 100%; border: 1px solid #dcdce0; border-radius: 10px; padding: 10px;
  font-size: 16px; background: #fff; margin: 4px 0 10px;
}
label.flabel { font-size: 13px; color: #6d6d72; }
.stopRow { display: flex; align-items: flex-start; gap: 10px; padding: 10px 2px; border-bottom: 1px solid #f0f0f2; }
.stopRow:last-child { border-bottom: 0; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: #c7c7cc; margin-top: 5px; flex: none; }
.dot.confirmed { background: #07c160; }
.dot.inferred { background: #f5a623; }
.dot.unconfirmed { background: #e6484d; }
.dot.asking { background: #fff; border: 3px solid #07c160; width: 8px; height: 8px; margin-top: 4px; animation: pulse 1.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(7,193,96,.4); } 100% { box-shadow: 0 0 0 8px rgba(7,193,96,0); } }
.stopMain { flex: 1; min-width: 0; }
.stopName { font-weight: 600; }
.stopTimes { font-size: 13px; color: #6d6d72; margin-top: 2px; }
.chip { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #eef1f4; color: #6d6d72; white-space: nowrap; }
.chip.confirmed { background: #e8f8ef; color: #07884a; }
.chip.inferred { background: #fdf3e0; color: #a8740a; }
.chip.unconfirmed { background: #fdeeee; color: #d43a2f; }
.chip.asking { background: #07c160; color: #fff; }
.chip.bound { background: #e8f1fd; color: #2f6fd0; }
.feedItem { padding: 8px 0; border-bottom: 1px solid #f4f4f6; font-size: 14px; }
.feedItem:last-child { border-bottom: 0; }
.feedItem .ft { color: #8a8a8e; font-size: 12px; }
.questionCard { text-align: center; padding: 22px 14px; }
.questionCard .q { font-size: 21px; font-weight: 700; margin: 6px 0 4px; }
.questionCard .which { font-size: 16px; color: #07a04e; font-weight: 600; }
.bigBtn { font-size: 19px; padding: 16px; border-radius: 14px; }
#tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex;
  background: #fff; border-top: 1px solid #e6e6ea; padding-bottom: env(safe-area-inset-bottom);
}
#tabbar button { flex: 1; border: 0; background: transparent; padding: 7px 0 5px; color: #8a8a8e; font-size: 11px; }
#tabbar button .ic { display: block; font-size: 20px; line-height: 1.1; }
#tabbar button.on { color: #07a04e; font-weight: 600; }
#toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px);
  background: rgba(20,20,20,.88); color: #fff; padding: 10px 16px; border-radius: 10px;
  font-size: 14px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 50; max-width: 86vw; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.modalMask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.modal { background: #fff; width: 100%; max-width: 640px; border-radius: 16px 16px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 88vh; overflow-y: auto; }
.modal h3 { margin: 0 0 10px; font-size: 17px; }
.err { color: #d43a2f; font-size: 14px; min-height: 18px; margin: 4px 0; }
.shareUrl { word-break: break-all; background: #f2f3f5; border-radius: 10px; padding: 10px; font-size: 14px; }
.adminGate { border: 1px dashed #f5a623; background: #fffaf0; }
.kv { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f4f4f6; font-size: 14px; }
.kv:last-child { border-bottom: 0; }
.banner { background: #fff7e6; border: 1px solid #ffe1a8; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; font-size: 14px; }