/* ============ 機捷快轉 · 捷運signage風格 ============ */
:root {
  /* 與 as-jx（哩程玩家工具箱）同家族的香檳金色系 */
  --ink: #16120c;            /* 深金褐底色 */
  --panel: #1f1913;
  --panel-2: #2a2216;
  --line: rgba(212, 175, 110, 0.16);
  --line-strong: rgba(212, 175, 110, 0.32);
  --rail: #5a4c38;
  --text: #f0e8d8;
  --text-dim: #a29377;
  --purple: #b995d8;         /* 直達車（桃捷識別色，調入金色世界） */
  --purple-deep: #8e4e9e;
  --blue: #7fa8cc;           /* 普通車 */
  --blue-deep: #3c6e9e;
  --amber: #d4af6e;          /* 香檳金・LED 看板時刻 */
  --green: #8cc1a0;          /* 鼠尾草綠 */
  --red: #c96f5f;
  --sign-bg: #120f0a;
  color-scheme: dark;
  --radius: 22px;
  --radius-sm: 10px;
  /* Liquid Glass：半透明基底＋鏡面邊緣＋景深陰影（深色） */
  --glass-bg: rgba(40, 32, 21, 0.52);
  --glass-bg-2: rgba(62, 50, 33, 0.38);
  --glass-edge: rgba(255, 238, 208, 0.26);
  --glass-edge-lo: rgba(255, 238, 208, 0.10);
  --glass-shadow: 0 18px 44px rgba(0, 0, 0, 0.46), 0 3px 10px rgba(0, 0, 0, 0.34);
  --glass-blur: 22px;
  --glass-hover: rgba(255, 238, 208, 0.07);
  --font-num: "Chakra Petch", "Noto Sans TC", monospace;
  --font-led: "DotGothic16", "Chakra Petch", "Noto Sans TC", monospace;
  --font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

/* ---------- 淺色（羊皮紙）主題：跟隨系統或手動切換 ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  --ink: #f5f0e5;
  --sign-bg: #ece4d2;
  --panel: #fdfbf4;
  --panel-2: #ffffff;
  --line: rgba(124, 95, 43, 0.18);
  --line-strong: rgba(124, 95, 43, 0.36);
  --rail: #cbbb9c;
  --text: #2b2416;
  --text-dim: #7b6d55;
  --purple: #7c4f9e;
  --purple-deep: #8e4e9e;
  --blue: #33689c;
  --blue-deep: #3c6e9e;
  --amber: #9c7a36;
  --green: #2f7a55;
  --red: #a84b39;
  color-scheme: light;
  --glass-bg: rgba(255, 252, 244, 0.60);
  --glass-bg-2: rgba(255, 255, 255, 0.46);
  --glass-edge: rgba(255, 255, 255, 0.95);
  --glass-edge-lo: rgba(124, 95, 43, 0.12);
  --glass-shadow: 0 16px 40px rgba(96, 74, 36, 0.15), 0 3px 10px rgba(96, 74, 36, 0.10);
  --glass-hover: rgba(124, 95, 43, 0.07);
  }
}
:root[data-theme="light"] {
  --ink: #f5f0e5;
  --sign-bg: #ece4d2;
  --panel: #fdfbf4;
  --panel-2: #ffffff;
  --line: rgba(124, 95, 43, 0.18);
  --line-strong: rgba(124, 95, 43, 0.36);
  --rail: #cbbb9c;
  --text: #2b2416;
  --text-dim: #7b6d55;
  --purple: #7c4f9e;
  --purple-deep: #8e4e9e;
  --blue: #33689c;
  --blue-deep: #3c6e9e;
  --amber: #9c7a36;
  --green: #2f7a55;
  --red: #a84b39;
  color-scheme: light;
  --glass-bg: rgba(255, 252, 244, 0.60);
  --glass-bg-2: rgba(255, 255, 255, 0.46);
  --glass-edge: rgba(255, 255, 255, 0.95);
  --glass-edge-lo: rgba(124, 95, 43, 0.12);
  --glass-shadow: 0 16px 40px rgba(96, 74, 36, 0.15), 0 3px 10px rgba(96, 74, 36, 0.10);
  --glass-hover: rgba(124, 95, 43, 0.07);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background:
    radial-gradient(1200px 520px at 80% -10%, rgba(212, 175, 110, 0.10), transparent 60%),
    radial-gradient(900px 420px at -10% 25%, rgba(142, 78, 158, 0.09), transparent 55%),
    radial-gradient(700px 380px at 55% 110%, rgba(138, 109, 59, 0.08), transparent 60%),
    var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.55;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
}
/* 細顆粒質感 */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.02 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, .station-sign, .site-footer { position: relative; z-index: 1; }
main { max-width: 760px; margin: 0 auto; padding: 14px 14px 40px; }
a { color: var(--blue); }
button { font-family: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- 站名燈箱式頁首 ---------- */
.station-sign { background: var(--sign-bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.sign-inner { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.line-roundel {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--purple-deep); color: #fff;
  display: grid; place-items: center;
  font: 700 26px/1 var(--font-num);
  box-shadow: 0 0 0 3px #fff2, 0 0 18px rgba(185, 149, 216, 0.5);
}
.sign-title h1 { font: 900 22px/1.2 "Noto Serif TC", "Songti TC", serif; letter-spacing: 0.14em; }
.sign-sub { font: 600 9.5px/1.3 var(--font-num); letter-spacing: 0.18em; color: var(--text-dim); }
.clock {
  margin-left: auto; font: 400 24px/1 var(--font-led);
  color: var(--amber); text-shadow: 0 0 14px rgba(212, 175, 110, 0.55), 0 0 3px rgba(212, 175, 110, 0.9);
  font-variant-numeric: tabular-nums;
}
.clock .tick { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.15; } }
.sign-stripe { height: 5px; background: linear-gradient(90deg, var(--purple-deep) 0 60%, var(--blue-deep) 60% 100%); }

/* ---------- 面板 ---------- */
.panel {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-top: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* 起訖選擇 */
.od-row { display: flex; align-items: stretch; gap: 8px; }
.station-btn {
  flex: 1; text-align: left; background: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; min-width: 0;
  transition: border-color 0.15s, transform 0.06s;
}
.station-btn:active { transform: scale(0.985); }
.station-btn:hover { border-color: var(--purple); box-shadow: 0 4px 14px rgba(212, 175, 110, 0.15); }
.od-label { display: block; font-size: 11px; color: var(--text-dim); letter-spacing: 0.25em; }
.station-chip { display: flex; align-items: center; gap: 8px; margin-top: 4px; min-width: 0; }
.code {
  flex: none; min-width: 40px; height: 28px; padding: 0 6px; border-radius: 14px;
  background: var(--purple-deep); color: #fff;
  display: inline-grid; place-items: center;
  font: 700 14px/1 var(--font-num);
}
.stn-name { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swap-btn {
  flex: none; width: 40px; border-radius: 12px; font-size: 20px;
  background: var(--ink); border: 1px solid var(--line); color: var(--text-dim);
  transition: color 0.15s, border-color 0.15s, transform 0.2s;
}
.swap-btn:hover { color: var(--purple); border-color: var(--purple); }
.swap-btn:active { transform: rotate(180deg); }

/* 時間列 */
.time-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.seg-control { display: flex; background: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg-control[hidden] { display: none; }
.seg { padding: 7px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--text-dim); }
.seg.on { background: var(--purple-deep); color: #fff; box-shadow: 0 0 12px rgba(185, 149, 216, 0.35); }
.dt-input {
  background: var(--ink); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 8px 10px; font: 600 14px var(--font-num);

}
.daytype-chip {
  margin-left: auto; font-size: 12px; font-weight: 700; color: var(--text-dim);
  border: 1px dashed var(--line); border-radius: 999px; padding: 4px 12px;
}

/* ---------- 路線圖 ---------- */
.map-panel { padding: 10px 6px 6px; }
.line-map-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.line-map { display: block; min-width: 690px; width: 100%; height: 104px; }
.line-map.snake { min-width: 0; }
.line-map.trtc-map { min-width: 0; } /* 北捷行程圖依容器寬繪製，不需橫向捲動 */
.sys-tag {
  display: inline-block; font: 700 11px var(--font-body); color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
}
.seat-chip {
  flex: none; font-size: 11px; font-weight: 900; color: var(--green);
  border: 1px solid var(--green); border-radius: 999px; padding: 1px 7px; white-space: nowrap;
}
.from-origin { flex: none; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.board-row .seat-chip, .board-row .from-origin { margin-left: auto; }
.board-row .seat-chip + .last-chip, .board-row .from-origin + .last-chip { margin-left: 6px; }
.line-map .flow {
  stroke-dasharray: 3 9; opacity: 0.75;
  animation: dashflow 0.9s linear infinite;
}
@keyframes dashflow { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }
.map-toggle {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  font: 700 12px var(--font-body); color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px;
  background: var(--ink);
}
.map-toggle:hover { color: var(--amber); border-color: var(--amber); }
.map-panel { position: relative; }
.map-hint { font-size: 11px; color: var(--text-dim); padding: 4px 10px 6px; }
.dot-demo { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); vertical-align: -1px; margin-right: 3px; }
.dot-demo.express { border-color: var(--purple); width: 11px; height: 11px; }
.dot-demo.live { width: 8px; height: 8px; background: var(--purple); border-color: var(--purple); box-shadow: 0 0 6px var(--purple); }

/* ---------- 月台警示帶 ---------- */
.platform-strip {
  height: 7px; margin: 18px 2px 4px; border-radius: 4px; opacity: 0.6;
  background: repeating-linear-gradient(-55deg, #d4af6e 0 10px, var(--ink) 10px 20px);
}

/* ---------- 結果卡 ---------- */
.journey-card { position: relative; overflow: hidden; }
.journey-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, 0.015) 3px 4px);
}
.journey-card.best { border-color: #6b4c8f; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45), 0 0 24px rgba(142, 78, 158, 0.10); }
.journey-card.best::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--purple), var(--blue));
}
.jc-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.jc-badge {
  font-size: 12px; font-weight: 900; letter-spacing: 0.15em;
  color: var(--ink); background: var(--amber); border-radius: 6px; padding: 2px 8px;
}
.jc-badge.alt { background: var(--line); color: var(--text-dim); }
.jc-times { font: 400 26px/1.2 var(--font-led); font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(240, 232, 216, 0.22); }
.jc-times .arr { color: var(--green); text-shadow: 0 0 12px rgba(140, 193, 160, 0.5); }
.jc-arrow { color: var(--text-dim); font-size: 16px; margin: 0 2px; }
.jc-meta { margin-left: auto; text-align: right; font-size: 13px; color: var(--text-dim); }
.jc-meta b { color: var(--text); font-size: 16px; }
.save-chip { color: var(--green); font-weight: 900; }

/* 段落（legs）LED 板 */
.legs { margin-top: 12px; display: grid; gap: 0; }
.leg { display: grid; grid-template-columns: 20px 1fr; gap: 12px; }
.leg-rail { position: relative; }
.leg-rail::before {
  content: ""; position: absolute; left: 8px; top: 4px; bottom: -4px; width: 4px; border-radius: 2px;
  background: var(--blue-deep);
}
.leg.express .leg-rail::before { background: var(--purple-deep); }
.leg-rail::after {
  content: ""; position: absolute; left: 3px; top: 2px; width: 10px; height: 10px;
  border-radius: 50%; background: #fff; border: 2px solid var(--blue);
}
.leg.express .leg-rail::after { border-color: var(--purple); }
.leg-body { padding-bottom: 14px; min-width: 0; }
.leg-line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.train-chip {
  font-size: 12px; font-weight: 900; padding: 2px 10px; border-radius: 999px; color: #fff;
  background: var(--blue-deep); letter-spacing: 0.1em;
}
.leg.express .train-chip { background: var(--purple-deep); }
.leg-time { font: 400 16px var(--font-led); color: var(--amber); font-variant-numeric: tabular-nums; text-shadow: 0 0 8px rgba(212, 175, 110, 0.4); }
.leg-stations { font-size: 15px; font-weight: 700; }
.leg-detail { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
/* 搶座提示：比行程細節再低一階，不跟主要時刻搶注意力 */
.origin-tip {
  margin-top: 6px; font-size: 12px; line-height: 1.45;
  color: var(--text); background: var(--panel-2);
  border-left: 3px solid var(--amber); border-radius: 0 8px 8px 0; padding: 8px 10px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.origin-swap {
  flex: none; font: inherit; font-weight: 700; font-size: 12px; cursor: pointer;
  color: var(--ink); background: var(--amber); border: 0; border-radius: 999px; padding: 5px 12px;
}
.origin-swap:active { transform: scale(0.97); }
.transfer-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-dim); padding: 0 0 12px 32px; position: relative;
}
.transfer-row::before {
  content: "⇄"; position: absolute; left: 4px; color: var(--amber); font-size: 14px;
}
.same-platform { color: var(--green); font-weight: 700; }
.alight-row { display: flex; align-items: center; gap: 8px; padding-left: 32px; position: relative; }
.alight-row::before {
  content: ""; position: absolute; left: 3px; top: 4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(140, 193, 160, 0.7);
}
.alight-row .leg-stations { color: var(--green); }

.empty-card { text-align: center; color: var(--text-dim); padding: 26px 14px; }
.empty-card b { color: var(--amber); }
.nextday-chip { font-size: 12px; color: var(--ink); background: var(--green); border-radius: 6px; padding: 1px 8px; font-weight: 900; margin-left: 6px; }

.options-title { margin: 18px 4px 2px; font-size: 13px; color: var(--text-dim); letter-spacing: 0.2em; font-weight: 700; }

.disclaimer { font-size: 12px; color: var(--text-dim); margin-top: 18px; padding: 0 4px; }
.disclaimer .warn { color: var(--amber); font-weight: 700; }

.site-footer { max-width: 760px; margin: 0 auto; padding: 18px 18px 34px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-dim); }
.site-footer a { color: var(--text-dim); }

/* ---------- 選站面板 ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(15, 10, 6, 0.68); backdrop-filter: blur(3px); z-index: 40; }
.sheet {
  position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
  max-height: 78dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--panel-2); border-radius: 18px 18px 0 0; border-top: 1px solid var(--line);
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
  animation: rise 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes rise { from { transform: translateY(40%); opacity: 0.4; } }
.sheet-handle { width: 44px; height: 4px; border-radius: 2px; background: var(--line); margin: 2px auto 10px; }
.sheet h2 { font-size: 14px; color: var(--text-dim); letter-spacing: 0.25em; margin-bottom: 8px; }
.station-list { list-style: none; }
.station-list li { position: relative; }
.station-list li::before {
  content: ""; position: absolute; left: 19px; top: 0; bottom: 0; width: 4px; background: var(--purple-deep); opacity: 0.5;
}
.station-list li:first-child::before { top: 50%; }
.station-list li:last-child::before { bottom: 50%; }
.pick-btn {
  position: relative; width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 9px 8px 9px 44px; border-radius: 10px; text-align: left;
}
.pick-btn::before {
  content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 2px solid var(--blue);
}
.pick-btn.express::before { border-color: var(--purple); width: 10px; height: 10px; left: 13px; }
.pick-btn:hover, .pick-btn:focus-visible { background: var(--panel); }
.pick-btn .code { min-width: 44px; }
.pick-btn.local-only .code { background: var(--blue-deep); }
.pick-name { font-size: 16px; font-weight: 700; }
.pick-en { font-size: 11px; color: var(--text-dim); display: block; margin-top: -2px; }
.pick-tag { margin-left: auto; font-size: 10.5px; color: var(--purple); border: 1px solid var(--purple-deep); border-radius: 4px; padding: 1px 6px; font-weight: 700; white-space: nowrap; }
.pick-btn.picked { outline: 2px solid var(--amber); }

/* ---------- 檢視切換 / 語言 ---------- */
.lang-sel {
  margin-left: 0; background: var(--ink); color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px;
  font: 700 12px var(--font-body);
}
.theme-btn {
  margin-left: auto; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--text-dim);
  font-size: 15px; line-height: 1;
}
.theme-btn:hover { color: var(--amber); border-color: var(--amber); }
.sign-inner .clock { margin-left: 10px; }

/* ---------- 常用路線 ---------- */
.fav-block { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.fav-label { font-size: 11px; color: var(--text-dim); letter-spacing: 0.2em; flex: none; }
.fav-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fav-star, .fav-chip {
  font: 700 12px var(--font-body); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 10px; color: var(--text-dim); background: var(--ink);
}
.fav-star.on { color: var(--amber); border-color: var(--amber); }
.fav-chip .fc { font-family: var(--font-num); color: var(--text); }
.fav-chip.cur { border-color: var(--purple); }
.fav-chip:hover { border-color: var(--purple); }

/* ---------- 票價 / 提示 / 高鐵 ---------- */
.fare-chip { color: var(--amber); font-weight: 900; }
.last-chip {
  font-size: 11px; font-weight: 900; letter-spacing: 0.08em;
  color: #fff; background: var(--red); border-radius: 6px; padding: 2px 8px;
  align-self: center; flex: none;
}
.board-row .last-chip { margin-left: auto; }
.tpass-card { border-left-color: var(--green); }
.tip-card {
  font-size: 13px; color: var(--text-dim); line-height: 1.7;
  border-left: 3px solid var(--amber);
}
.hsr-panel h3 { font-size: 14px; color: var(--text); letter-spacing: 0.1em; margin-bottom: 8px; }
.hsr-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 4px 0; }
.hsr-dir { flex: none; font-size: 12px; font-weight: 900; color: var(--ink); background: var(--gold-deep, #8a6d3b); border-radius: 5px; padding: 1px 8px; }
.hsr-train { font-size: 13px; color: var(--text-dim); }
.hsr-train b { font: 400 15px var(--font-led); color: var(--amber); }
.hsr-note { font-size: 11px; color: var(--text-dim); opacity: 0.75; margin-top: 6px; }

/* ---------- 車站看板 ---------- */
.board-panel { padding-top: 12px; }
.board-pick { width: 100%; margin-bottom: 10px; }
.swap-hint {
  flex: none; margin-left: auto; align-self: center;
  font-size: 11px; font-weight: 900; letter-spacing: 0.1em; color: var(--purple);
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; white-space: nowrap;
}
.board-quick {
  display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.board-quick::-webkit-scrollbar { display: none; }
.bq-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font: 700 12px var(--font-body); color: var(--text-dim);
  background: var(--ink); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px 4px 5px; white-space: nowrap;
}
.bq-chip .code { min-width: 34px; height: 22px; font-size: 12px; border-radius: 11px; }
.bq-chip.cur { border-color: var(--amber); color: var(--text); background: rgba(212, 175, 110, 0.12); }
.bq-chip:hover { border-color: var(--purple); }
.tx-info {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px;
  padding: 8px 10px; border: 1px dashed var(--line); border-radius: 10px;
}
.tx-info[hidden] { display: none; } /* display:flex 會蓋過 hidden 屬性 */
.firstlast:empty { display: none; }
.tx-title { font-size: 11px; font-weight: 900; color: var(--text-dim); letter-spacing: 0.2em; }
.tx-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); }
.tx-arrow { color: var(--text-dim); }
.tx-desc { color: var(--text); }
.tx-walk { flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.tx-row.out .tx-walk { border-color: var(--amber); color: var(--amber); }
.tx-out { color: var(--amber); font-weight: 700; }
.leg-tx { font-size: 12px; color: var(--amber); margin-top: 2px; }

/* 北捷即時看板：方向分組列（左側線色欄、LED 倒數、次班小字） */
.board-row.brd { border-left: 4px solid var(--lc, #888); padding-left: 10px; gap: 8px; }
.brd-count { flex: none; min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.brd-count b { font: 400 25px/1 var(--font-led); color: var(--amber); text-shadow: 0 0 10px rgba(212, 175, 110, 0.45); }
.brd-count i { font-style: normal; font-size: 11px; color: var(--text-dim); margin-left: 3px; }
.brd-count.due {
  font: 400 15px var(--font-led); color: var(--amber);
  text-shadow: 0 0 12px rgba(212, 175, 110, 0.8); animation: breathe 1.3s ease-in-out infinite;
}
.brd-count.soon b { text-shadow: 0 0 14px rgba(212, 175, 110, 0.9); }
@keyframes breathe { 50% { opacity: 0.4; } }
.brd-next { margin-left: auto; flex: none; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.live-note { gap: 6px; }
.live-dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 6px var(--green); animation: breathe 1.6s ease-in-out infinite;
}
.code.multi { background: none; padding: 0; min-width: 0; display: inline-flex; gap: 4px; }
.code.sm { min-width: 34px; height: 22px; font-size: 12px; border-radius: 11px; }
.bq-sys { font-size: 11px; }
.seg-li { padding: 2px 0 8px; }
.sheet-seg { width: 100%; }
.sheet-seg .seg { flex: 1; text-align: center; }
.firstlast {
  display: flex; gap: 8px 22px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-dim);
  border: 1px dashed var(--line); border-radius: 10px;
  padding: 7px 12px; margin-bottom: 10px;
}
.firstlast .fl-cell { display: flex; align-items: baseline; gap: 8px; }
.firstlast b { color: var(--text); font-weight: 700; }
.firstlast .flc { white-space: nowrap; }
.b-time.sm { font-size: 15px; min-width: 0; }
.fac-card { border: 1px dashed var(--line); border-radius: 10px; margin-bottom: 10px; }
.fac-card summary {
  font-size: 13px; font-weight: 700; color: var(--text-dim);
  padding: 7px 12px; cursor: pointer; list-style: none;
}
.fac-card summary::-webkit-details-marker { display: none; }
.fac-card summary::after { content: "▾"; float: right; color: var(--amber); }
.fac-card[open] summary::after { content: "▴"; }
.fac-card[open] summary { color: var(--amber); }
.fac-body { padding: 2px 12px 10px; display: grid; gap: 8px; }
.fac-row { display: grid; grid-template-columns: 112px 1fr; gap: 8px; font-size: 12.5px; }
.fac-row .fac-k { color: var(--text); font-weight: 700; }
.fac-row .fac-v { color: var(--text-dim); line-height: 1.6; }
.board-list { list-style: none; }
.board-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 8px; border-bottom: 1px dashed var(--line);
  font-size: 14px;
}
.board-row:last-child { border-bottom: 0; }
.board-row .b-time { font: 400 19px var(--font-led); color: var(--amber); min-width: 64px; text-shadow: 0 0 8px rgba(212, 175, 110, 0.4); }
.board-row .b-count { min-width: 72px; color: var(--green); font-weight: 700; font-size: 12.5px; }
.board-row .train-chip { background: var(--blue-deep); }
.board-row.express .train-chip { background: var(--purple-deep); }
.board-row .b-dest { color: var(--text-dim); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-row.empty { color: var(--text-dim); justify-content: center; }
.board-row.live .b-count { min-width: 84px; font-size: 16px; color: var(--amber); text-shadow: 0 0 8px rgba(212, 175, 110, 0.4); font-family: var(--font-led); font-weight: 400; }
.board-row.live-note { font-size: 11px; color: var(--green); justify-content: flex-start; border-bottom: 0; }
.firstlast .fl-cell .line-chip { margin-right: 2px; }

/* ---------- ✈ 航班 ---------- */
.flight-panel { padding-top: 12px; }
.flight-search { width: 100%; margin-bottom: 8px; font-family: var(--font-body); }
.flight-list { list-style: none; }
.flight-row { padding: 10px 6px; border-bottom: 1px dashed var(--line); }
.flight-row:last-child { border-bottom: 0; }
.fl-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fl-no { font: 700 15px var(--font-num); color: var(--text); }
.fl-cs { font-size: 11px; color: var(--text-dim); margin-left: 3px; }
.fl-dest { font: 600 14px var(--font-num); color: var(--text-dim); }
.fl-rm { font-size: 12px; color: var(--red); font-weight: 700; margin-left: auto; }
.fl-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.fl-tag {
  font-size: 11.5px; color: var(--text-dim); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 8px;
}
.fl-tag.term { color: var(--purple); border-color: var(--purple-deep); font-weight: 700; }
.fl-tag.ck { color: var(--amber); border-color: #7a5a2b; font-weight: 900; }
.fl-go {
  margin-left: auto; font: 700 12.5px var(--font-body); color: var(--ink);
  background: var(--amber); border-radius: 999px; padding: 5px 14px;
}
.fl-go:hover { filter: brightness(1.08); }
.fl-go.alt { background: none; border: 1px solid var(--line-strong); color: var(--text-dim); }
.fl-go.alt:hover { color: var(--amber); border-color: var(--amber); }
.fav-star-fl { flex: none; font-size: 15px; color: var(--amber); padding: 0 2px; line-height: 1; }
.fl-tag.mile-link { color: var(--blue); border-color: var(--blue-deep); font-weight: 700; text-decoration: none; }
.ck-map { flex-basis: 100%; width: 100%; max-width: 380px; height: auto; margin-top: 2px; }
.board-row.sched-head { font-size: 12px; font-weight: 700; color: var(--amber); letter-spacing: 0.08em; justify-content: flex-start; }

/* ---------- 🚄 高鐵任意起訖／聯程 ---------- */
.thsr-od { margin-bottom: 10px; }
.thsr-od select { flex: 1; min-width: 0; font-family: var(--font-body); font-weight: 700; }
.thsr-locate { position: static; flex: none; }
.seat-chip { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 8px; border: 1px solid; }
.seat-chip.ok { color: var(--green); border-color: var(--green); }
.seat-chip.few { color: var(--amber); border-color: var(--amber); }
.seat-chip.none { color: var(--red); border-color: var(--red); opacity: 0.85; }
.b-time.arr-t { color: var(--green); }
.flight-row.has-route { cursor: pointer; }
.jc-badge.sm { font-size: 10.5px; padding: 1px 6px; letter-spacing: 0.06em; }
.fl-tag.fast { color: var(--purple); border-color: var(--purple-deep); font-weight: 700; }
.later-hint { font-size: 11.5px; color: var(--amber); opacity: 0.85; }
.map-toggle.on { color: var(--amber); border-color: var(--amber); }
.sr-toggle { font-size: 11.5px; color: var(--text-dim); margin-left: auto; }
.seat-route {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px;
}
.sr-stop { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12px; }
.sr-stop b { color: var(--text); font-weight: 700; }
.feeder-panel { border-left-color: var(--amber); }
.feeder-panel .dt-input.sm { padding: 4px 8px; font-size: 13px; font-family: var(--font-body); font-weight: 700; }
.feeder-body { flex-basis: 100%; display: grid; gap: 4px; }
.feeder-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; padding: 2px 0; }
.feeder-row.best .b-time { text-shadow: 0 0 10px rgba(212, 175, 110, 0.6); }
.feeder-row.none { color: var(--text-dim); }
.feeder-row.eb { color: var(--amber); font-weight: 700; border-top: 1px dashed var(--line); padding-top: 6px; }

/* ---------- 🚨 營運警示 ---------- */
.alert-strip {
  position: relative; z-index: 15;
  background: var(--red); color: #fff;
  font-size: 13px; font-weight: 700;
  padding: 7px 14px; text-align: center;
}
.alert-strip .al-item { margin: 0 10px; }
.alert-strip b { letter-spacing: 0.06em; }
.flight-banner { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; border-left: 3px solid var(--purple); }
.flight-banner .b-time { font: 400 17px var(--font-led); color: var(--amber); }
.flight-banner .fl-note { flex-basis: 100%; font-size: 11.5px; color: var(--text-dim); }
.fl-dir { margin-bottom: 8px; }
.wx-card { border: 1px dashed var(--line); border-radius: 10px; margin-bottom: 8px; }
.wx-card[hidden] { display: none; }
.wx-strip {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-dim);
  padding: 7px 12px; cursor: pointer; list-style: none;
}
.wx-strip::-webkit-details-marker { display: none; }
.wx-strip b, .wx-body b { color: var(--text); font-family: var(--font-num); }
.wx-more { margin-left: auto; color: var(--amber); }
.wx-card[open] .wx-more { transform: rotate(180deg); }
.wx-body { padding: 2px 12px 10px; }
.wx-row { display: flex; align-items: baseline; gap: 10px 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-dim); padding: 4px 0; }
.wx-row.metar { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 9px; }
.metar-cat { font: 700 11px var(--font-num); border-radius: 5px; padding: 2px 8px; color: var(--ink); background: var(--green); }
.metar-cat.mvfr { background: #7fa8cc; }
.metar-cat.ifr { background: var(--red); color: #fff; }
.metar-cat.lifr { background: #9c5fd4; color: #fff; }
.metar-raw { display: block; font-size: 10.5px; color: var(--text-dim); opacity: 0.8; margin-top: 6px; word-break: break-all; }
.fl-tag.bag { color: var(--green); border-color: #3a6b4a; font-weight: 700; }
.fl-tag.bag.warn { color: var(--red); border-color: #7a3a33; }
.cal-btn {
  font-size: 16px; border: 1px solid var(--line); border-radius: 8px;
  padding: 2px 9px; background: var(--ink); line-height: 1.3;
}
.cal-btn:hover { border-color: var(--amber); }
/* ---------- 🚇 北捷選站／聯程 ---------- */
.search-li, .sheet-sec, .sheet-line, .trtc-li { list-style: none; }
.search-li::before, .sheet-sec::before, .sheet-line::before, .trtc-li::before { display: none !important; }
.stn-search { width: 100%; margin: 2px 0 8px; font-family: var(--font-body); }
.sheet-sec {
  font-size: 12px; font-weight: 900; color: var(--text-dim); letter-spacing: 0.2em;
  padding: 12px 4px 4px; border-bottom: 1px dashed var(--line);
}
.sheet-line { padding: 8px 4px 2px; }
.line-chip {
  display: inline-block; font: 700 12px var(--font-num); color: #fff;
  background: var(--lc, #888); border-radius: 6px; padding: 2px 10px; letter-spacing: 0.06em;
}
.code.trtc-code { background: var(--lc, #888); }
.pick-btn.trtc { padding-left: 12px; }
.pick-btn.trtc::before { display: none; }
.leg.trtc-leg .leg-rail::before { background: var(--lc, #888); }
.leg.trtc-leg .leg-rail::after { border-color: var(--lc, #888); }

.locate-li::before { display: none !important; }
.locate-btn { color: var(--amber); font-weight: 700; padding-left: 12px !important; }
.locate-btn::before { display: none !important; }

/* ---------- 桌機版 ---------- */
@media (max-width: 430px) {
  .stn-name { font-size: 14px; }
  .code { min-width: 34px; height: 25px; font-size: 12.5px; }
  .od-label { letter-spacing: 0.15em; }
  .jc-times { font-size: 21px; }
  .view-tabs { gap: 5px; }
  .vtab { padding: 10px 11px 9px; font-size: 13px; letter-spacing: 0.02em; }
}
@media (min-width: 700px) {
  .sign-title h1 { font-size: 26px; }
  .od-row { gap: 12px; }
  .stn-name { font-size: 19px; }
  .sheet {
    left: 50%; right: auto; bottom: auto; top: 12dvh;
    transform: translateX(-50%); width: min(560px, 92vw);
    border-radius: 18px; border: 1px solid var(--line); max-height: 74dvh;
    animation: pop 0.18s ease-out;
  }
  @keyframes pop { from { transform: translateX(-50%) scale(0.96); opacity: 0; } }
  .station-list { columns: 2; column-gap: 8px; }
  .station-list li { break-inside: avoid; }
  .station-list li::before { display: none; }
  .pick-btn { padding-left: 12px; }
  .pick-btn::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   Liquid Glass：把每個表面做成一層折射光的玻璃
   —— 半透明基底吸收底下的環境光、上緣鏡面高光、下緣暗邊做出厚度，
      大面積用真 backdrop-filter，小晶片用模擬玻璃（避免行動裝置疊太多層）。
   ============================================================ */

/* 環境光斑：緩慢漂移，讓玻璃有東西可折射（沒有它玻璃只是灰霧） */
body::after {
  content: ""; position: fixed; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 30% at 22% 26%, rgba(212, 175, 110, 0.30), transparent 70%),
    radial-gradient(34% 28% at 78% 22%, rgba(142, 78, 158, 0.24), transparent 70%),
    radial-gradient(42% 34% at 62% 82%, rgba(60, 110, 158, 0.22), transparent 70%);
  filter: blur(28px);
  animation: aurora 34s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.04); }
}
:root[data-theme="light"] body::after, .light-amb { opacity: 0.75; }

/* 導覽層：只有「浮在內容之上的功能元素」用真玻璃
   （依 Apple 規範：Liquid Glass 屬導覽/控制層，內容層不該是玻璃，
     也避免玻璃疊玻璃） */
.station-sign,
.sheet,
.view-tabs,
.map-toggle {
  background: linear-gradient(158deg, var(--glass-bg-2), var(--glass-bg));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%);
  backdrop-filter: blur(var(--glass-blur)) saturate(165%);
  border: 1px solid var(--glass-edge-lo);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-edge),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14);
}
/* 內容層：實心表面，讓上方的玻璃有東西可折射、也才分得出層次 */
.panel {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  padding: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
/* 內容層裡的控制項：質感一致但不加模糊（不疊玻璃、效能也較好） */
.station-btn, .swap-btn, .dt-input, .seg-control, .theme-btn, .lang-sel {
  background: linear-gradient(160deg, var(--glass-bg-2), var(--glass-bg));
  border: 1px solid var(--glass-edge-lo);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 2px 8px rgba(0, 0, 0, 0.16);
}
.station-sign {
  border: 0; border-bottom: 1px solid var(--glass-edge-lo);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22), inset 0 -1px 0 var(--glass-edge-lo);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
}
/* 捲動邊緣效果：內容捲入頁首時漸隱，維持列上文字的辨識度 */
.station-sign::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--glass-bg), transparent);
}
.station-sign { position: sticky; }
/* 同心圓角：面板 22 − 內距 12 = 內部控制項 10，維持視覺連續 */
.station-btn, .swap-btn, .dt-input, .lang-sel { border-radius: 10px; }
.seg-control, .map-toggle, .theme-btn { border-radius: 999px; }
.theme-btn { width: 32px; height: 32px; }

/* 按壓：玻璃有厚度，壓下去要有彈性回彈 */
.station-btn, .swap-btn, .seg, .vtab, .map-toggle, .theme-btn, .pick-btn,
.fav-chip, .fav-star, .bq-chip, .tab-btn {
  transition: transform 0.32s cubic-bezier(0.2, 1.5, 0.4, 1), background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.station-btn:active, .swap-btn:active, .seg:active, .vtab:active,
.map-toggle:active, .theme-btn:active, .pick-btn:active, .bq-chip:active { transform: scale(0.955); }
.station-btn:hover { border-color: var(--glass-edge); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge), 0 0 0 1px var(--glass-edge-lo); }

/* 底部分頁列：浮在內容之上的導覽層。
   整條 bar 是「一片」玻璃（等同 GlassEffectContainer 的意圖），
   裡面四個分頁是透明按鈕——避免玻璃疊玻璃。 */
.view-tabs {
  position: fixed; z-index: 30; left: 50%; transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom));
  width: min(440px, calc(100vw - 24px));
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  margin: 0; padding: 6px; border-radius: 26px;
}
.vtab {
  display: grid; justify-items: center; gap: 3px;
  background: none; border: 0; box-shadow: none;
  border-radius: 20px; padding: 7px 2px 6px;
  font: 700 11px/1.1 var(--font-body); letter-spacing: 0.02em; color: var(--text-dim);
  white-space: nowrap; min-width: 0;
}
/* 捲動邊緣效果：讓捲到 bar 下方的內容淡出，維持分頁文字辨識度 */
.view-tabs { isolation: isolate; }
.view-tabs::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -16px; right: -16px; top: -30px; bottom: -22px;
  background: linear-gradient(to top, var(--ink) 42%, transparent);
}
.vt-ico { font-size: 18px; line-height: 1; filter: saturate(0.6) opacity(0.75); transition: filter 0.2s, transform 0.32s cubic-bezier(0.2, 1.5, 0.4, 1); }
.vt-label { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vtab.on { color: var(--amber); background: var(--glass-edge-lo); box-shadow: inset 0 1px 0 var(--glass-edge); }
.vtab.on .vt-ico { filter: none; transform: translateY(-1px) scale(1.12); }
/* 內容不被 bar 蓋住（內容捲動於玻璃之下） */
main { padding-bottom: 26px; }
.site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* 分段控制：選中的那顆是一塊被光打亮的玻璃 */
.seg-control { padding: 4px; }
.seg { transition: color 0.2s; }
.seg.on {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.20), var(--purple-deep));
  box-shadow: 0 4px 14px rgba(142, 78, 158, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

/* 站碼圓牌：玻璃珠般的高光 */
.code {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 6px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.20);
}
.line-roundel { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.10), 0 6px 20px rgba(185, 149, 216, 0.45); }

/* 小晶片：模擬玻璃（不加模糊，行動裝置才不會卡） */
.fav-star, .fav-chip, .bq-chip, .sys-tag, .daytype-chip, .tx-walk, .seat-chip, .swap-hint, .pick-tag {
  background: linear-gradient(160deg, var(--glass-bg-2), transparent);
  box-shadow: inset 0 1px 0 var(--glass-edge);
}
.fav-chip:hover, .bq-chip:hover, .fav-star:hover { background: var(--glass-hover); }

/* 結果卡：最佳方案上緣掃過一道鏡面反光 */
.journey-card.best { border-color: var(--glass-edge-lo); }
.journey-card.best::before {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), var(--purple), transparent);
  background-size: 220% 100%;
  animation: sheen 6s ease-in-out infinite;
}
@keyframes sheen { 0%, 100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }

/* 選站面板：底層加深、面板本體為厚玻璃 */
.sheet-backdrop { background: rgba(12, 8, 4, 0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sheet {
  border-radius: 26px 26px 0 0;
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
}
.sheet-handle { background: var(--glass-edge); opacity: 0.5; }
.pick-btn { border-radius: var(--radius-sm); }
.pick-btn:hover, .pick-btn:focus-visible { background: var(--glass-hover); }
.pick-btn.picked { outline: 2px solid var(--amber); outline-offset: -2px; background: var(--glass-hover); }

/* 月台警示帶：玻璃下的斜紋 */
.platform-strip { opacity: 0.45; border-radius: 999px; }

/* 退回策略：不支援模糊、或使用者要求降低透明度時，一律回到實心表面 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .station-sign, .sheet, .view-tabs, .map-toggle,
  .station-btn, .swap-btn, .dt-input, .seg-control, .theme-btn, .lang-sel {
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
  }
  .sheet-backdrop { background: rgba(12, 8, 4, 0.86); }
}
@media (prefers-reduced-transparency: reduce) {
  .station-sign, .sheet, .view-tabs, .map-toggle,
  .station-btn, .swap-btn, .dt-input, .seg-control, .theme-btn, .lang-sel {
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .sheet-backdrop { background: rgba(12, 8, 4, 0.9); -webkit-backdrop-filter: none; backdrop-filter: none; }
  body::after { display: none; }
  .station-sign::after { display: none; }
}
/* 提高對比：邊緣加深、透明度降低（規範要求為色彩提供高對比變體） */
@media (prefers-contrast: more) {
  :root {
    --glass-bg: rgba(28, 22, 14, 0.88);
    --glass-bg-2: rgba(44, 35, 23, 0.86);
    --glass-edge: rgba(255, 244, 222, 0.55);
    --glass-edge-lo: rgba(255, 244, 222, 0.34);
  }
  :root[data-theme="light"] {
    --glass-bg: rgba(255, 253, 248, 0.94);
    --glass-bg-2: rgba(255, 255, 255, 0.92);
    --glass-edge-lo: rgba(70, 52, 20, 0.42);
  }
  .panel { border-color: var(--line-strong); }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}