/* ============================================================
   台北停車導航 PWA — 駕駛模式 UI
   設計原則：大觸控區域、高對比、一目了然
   ============================================================ */

* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:       #0a0a1a;
  --bg2:      #111128;
  --bg3:      #1a1a35;
  --bg-active:#252550;
  --accent:   #00d4aa;
  --accent2:  #00a885;
  --green:    #00d4aa;
  --yellow:   #ffc048;
  --red:      #ff4757;
  --text:     #eef0f6;
  --text2:    #8b8fad;
  --text3:    #555577;
  --border:   #2a2a50;
  --radius:   16px;
  --safe-b:   env(safe-area-inset-bottom, 0px);
  --safe-t:   env(safe-area-inset-top, 0px);
}

html, body {
  height: 100%; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg); color: var(--text);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

#app { height: 100%; height: 100dvh; position: relative; }

/* === Screens === */
.screen { display:none; flex-direction:column; height:100%; }
.screen.active { display:flex; }

/* === Loading === */
#screen-loading {
  align-items:center; justify-content:center;
  background: radial-gradient(ellipse at center, #111140 0%, var(--bg) 70%);
}
.loading-content { text-align:center; }
.loading-logo {
  width:80px; height:80px; margin:0 auto 24px;
  border-radius:24px;
  background: linear-gradient(135deg, var(--accent), #0066cc);
  font-size:42px; font-weight:900; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.spinner {
  width:40px; height:40px; margin:0 auto 16px;
  border:3px solid var(--border); border-top-color:var(--accent);
  border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
#screen-loading p { color:var(--text2); font-size:15px; }

/* === Header === */
header {
  flex-shrink:0;
  padding: calc(var(--safe-t) + 6px) 12px 0;
  background: var(--bg2);
}
.header-row {
  display:flex; align-items:center; gap:8px;
}
.status-group {
  display:flex; align-items:center; gap:6px; flex-shrink:0;
}
.status-dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--yellow); animation:blink 2s infinite;
}
.status-dot.ok { background:var(--green); animation:none; }
.status-dot.err { background:var(--red); animation:none; }
@keyframes blink { 50% { opacity:.3; } }
.status-text { font-size:13px; color:var(--text2); }

.chip-btn {
  padding:6px 12px; border-radius:20px;
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text); font-size:12px; font-weight:600;
  cursor:pointer; white-space:nowrap;
}
.chip-btn:active { background:var(--bg-active); }

/* View tabs */
.view-tabs { display:flex; gap:0; border-radius:20px; overflow:hidden; border:1px solid var(--border); }
.tab-btn {
  padding:6px 14px; border:none; background:var(--bg3);
  color:var(--text2); font-size:12px; font-weight:700; cursor:pointer;
}
.tab-btn.active { background:var(--accent); color:var(--bg); }

/* Voice Bar */
.voice-bar {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; margin-top:6px;
  background: rgba(0,212,170,.08);
  border-radius:12px; border:1px solid rgba(0,212,170,.2);
}
.voice-indicator { display:flex; gap:4px; align-items:center; }
.voice-indicator .dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--accent); animation:vdot 1s ease-in-out infinite;
}
.voice-indicator .dot:nth-child(2) { animation-delay:.2s; }
.voice-indicator .dot:nth-child(3) { animation-delay:.4s; }
@keyframes vdot { 0%,100%{opacity:.3;transform:scale(.7)} 50%{opacity:1;transform:scale(1.2)} }
.voice-result { font-size:14px; color:var(--accent); font-weight:600; flex:1; }

/* === Search Box === */
.search-box {
  flex:1; position:relative; min-width:0;
}
.search-box input {
  width:100%; padding:6px 32px 6px 10px;
  border-radius:20px; border:1px solid var(--border);
  background:var(--bg3); color:var(--text);
  font-size:13px; outline:none;
}
.search-box input:focus { border-color:var(--accent); }
.search-box input::placeholder { color:var(--text3); }
.search-btn {
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--text2); cursor:pointer;
  padding:4px; display:flex; align-items:center;
}
.search-btn:hover { color:var(--accent); }
.search-results {
  position:absolute; top:100%; left:0; right:0; z-index:1000;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; margin-top:4px; max-height:200px;
  overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.search-results.hidden { display:none; }
.search-result-item {
  padding:10px 12px; cursor:pointer; font-size:13px;
  border-bottom:1px solid var(--border); color:var(--text);
}
.search-result-item:last-child { border-bottom:none; }
.search-result-item:hover { background:var(--bg-active); }
.search-result-item small { display:block; color:var(--text3); font-size:11px; margin-top:2px; }

/* === Destination Badge === */
.dest-badge {
  display:flex; align-items:center; gap:6px;
  padding:6px 12px; margin:4px 12px 0;
  background:rgba(0,212,170,.08); border:1px solid rgba(0,212,170,.2);
  border-radius:10px; font-size:12px; color:var(--accent); font-weight:600;
}
.dest-badge.hidden { display:none; }
.dest-badge .dest-clear {
  margin-left:auto; background:none; border:none;
  color:var(--text3); cursor:pointer; font-size:14px; padding:0 4px;
}
.dest-badge .dest-clear:hover { color:var(--red); }

/* === Filter Wrapper (偏好設定面板) === */
.filter-wrapper { flex-shrink:0; background:var(--bg2); border-bottom:1px solid var(--border); }
.filter-toggle {
  display:flex; align-items:center; gap:6px;
  padding:8px 12px; cursor:pointer;
  font-size:12px; font-weight:700; color:var(--text2);
}
.filter-toggle:hover { color:var(--text); }
#filter-summary { flex:1; }
.filter-arrow { font-size:10px; color:var(--text3); }

.filter-panel {
  padding:0 12px 10px;
  transition:max-height .25s ease, opacity .2s ease, padding .2s ease;
  max-height:700px; opacity:1; overflow-y:auto;
}
.filter-panel.collapsed {
  max-height:0; opacity:0; padding-top:0; padding-bottom:0;
}

.pref-row {
  display:flex; align-items:center; gap:8px;
  padding:5px 0;
}
.pref-label {
  font-size:12px; color:var(--text3); font-weight:700;
  width:36px; flex-shrink:0;
}
.pref-select {
  flex:1; padding:6px 10px; border-radius:10px;
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text); font-size:13px; font-weight:600;
  cursor:pointer;
}
.pref-select:focus { border-color:var(--accent); outline:none; }
.pref-input {
  flex:1; padding:6px 10px; border-radius:10px;
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text); font-size:13px;
  color-scheme:dark;
}
.pref-input:focus { border-color:var(--accent); outline:none; }
.pref-clear-btn {
  background:none; border:1px solid var(--border); border-radius:8px;
  color:var(--text3); cursor:pointer; padding:4px 8px; font-size:13px;
}
.pref-clear-btn:hover { color:var(--red); border-color:var(--red); }
.sim-badge {
  padding:4px 12px; margin:2px 0 4px;
  background:rgba(255,192,72,.1); border:1px solid rgba(255,192,72,.3);
  border-radius:8px; font-size:11px; color:var(--yellow); font-weight:600;
}
.sim-badge.hidden { display:none; }
.pref-chips {
  display:flex; flex-wrap:wrap; gap:6px;
}
.filter-chip {
  display:flex; align-items:center;
  white-space:nowrap; cursor:pointer;
  flex-shrink:0;
}
.filter-chip input[type="checkbox"] {
  display:none;
}
.filter-chip span {
  padding:6px 12px; border-radius:20px;
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text2); font-size:12px; font-weight:600;
  transition:all .15s;
}
.chip-color {
  border-left:3px solid var(--chip-c, var(--border)) !important;
}
.filter-chip input:checked + span {
  background:rgba(0,212,170,.15);
  border-color:var(--accent);
  color:var(--accent);
}
.filter-chip input:checked + .chip-color {
  border-left-color:var(--chip-c, var(--accent)) !important;
  background:color-mix(in srgb, var(--chip-c) 12%, transparent);
  border-color:var(--chip-c, var(--accent));
  color:var(--chip-c, var(--accent));
}
.filter-chip:active span { opacity:.7; }

/* === View Panels === */
.view-panel { display:none; flex:1; overflow:hidden; position:relative; flex-direction:column; }
.view-panel.active { display:flex; }

/* === Map === */
.map-container { flex:1; width:100%; background:var(--bg2); z-index:1; }
.map-legend {
  position:absolute; bottom:12px; left:12px; z-index:400;
  background:rgba(10,10,26,.92); border:1px solid var(--border);
  border-radius:12px; overflow:hidden; max-width:160px;
  backdrop-filter:blur(8px);
}
.legend-toggle {
  padding:8px 12px; font-size:12px; font-weight:700;
  color:var(--text2); cursor:pointer; text-align:center;
}
.legend-body { display:none; padding:4px 12px 10px; }
.legend-body.open { display:block; }
.legend-item {
  display:flex; align-items:center; gap:8px;
  padding:3px 0; font-size:11px; color:var(--text);
}
.legend-color {
  width:20px; height:10px; border-radius:3px; flex-shrink:0;
}
.map-fab {
  position:absolute; z-index:400;
  width:44px; height:44px; border-radius:50%;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.map-fab.recenter {
  bottom:12px; right:12px;
  background:var(--accent); color:var(--bg);
}
.map-fab:active { transform:scale(.9); }

/* Leaflet popup override */
.leaflet-popup-content-wrapper {
  background:rgba(10,10,26,.95) !important; color:var(--text) !important;
  border-radius:12px !important; border:1px solid var(--border) !important;
}
.leaflet-popup-tip { background:rgba(10,10,26,.95) !important; }
.leaflet-popup-content { font-size:13px !important; line-height:1.5 !important; }
.spot-popup b { color:var(--accent); }
.spot-popup .pop-nav {
  display:inline-block; margin-top:6px; padding:4px 14px;
  background:var(--accent); color:var(--bg); border-radius:16px;
  text-decoration:none; font-weight:700; font-size:12px;
}

/* === Hero Card === */
.hero-card {
  margin:12px;
  padding:20px;
  background: linear-gradient(145deg, #151540, #1a2555);
  border:1px solid var(--border);
  border-radius:20px;
  flex-shrink:0;
}
.hero-top { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.hero-index {
  width:52px; height:52px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent), #00a0cc);
  color:var(--bg); font-size:24px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.hero-info { flex:1; min-width:0; }
.hero-info h2 {
  font-size:20px; font-weight:800; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hero-meta { display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.badge {
  padding:3px 12px; border-radius:20px;
  font-size:13px; font-weight:700;
}
.badge.green { background:rgba(0,212,170,.15); color:var(--green); }
.badge.yellow { background:rgba(255,192,72,.12); color:var(--yellow); }
.badge.free { background:rgba(0,212,170,.2); color:#00ffcc; font-size:11px; }
.badge.free-soon { background:rgba(255,160,0,.15); color:#FFA000; font-size:11px; }
.badge.paid { font-size:11px; color:var(--text3); }

/* Hero Actions - 超大按鈕 */
.hero-actions { display:flex; gap:12px; }
.action-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:16px; border:none; border-radius:16px;
  font-size:18px; font-weight:800; cursor:pointer;
  transition: transform .1s;
}
.action-btn:active { transform:scale(.95); }
.action-btn.primary {
  background: linear-gradient(135deg, var(--accent), #00b894);
  color:var(--bg); box-shadow:0 4px 20px rgba(0,212,170,.3);
}
.action-btn.secondary {
  background:var(--bg3); color:var(--text);
  border:1px solid var(--border);
}

/* === Quick Stats === */
.quick-stats {
  display:flex; padding:0 12px; gap:8px; margin-bottom:8px;
  flex-shrink:0;
}
.stat {
  flex:1; text-align:center;
  padding:10px 8px;
  background:var(--bg2); border-radius:12px;
}
.stat-val { display:block; font-size:22px; font-weight:800; color:var(--accent); }
.stat-lbl { font-size:11px; color:var(--text3); }

/* === List Toggle === */
.list-toggle {
  text-align:center; padding:10px;
  color:var(--text2); font-size:13px;
  cursor:pointer; flex-shrink:0;
}
.list-toggle:active { color:var(--text); }

/* === List Panel === */
.list-panel {
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:0 12px 8px; transition:max-height .3s;
}
.list-panel.collapsed { max-height:0; overflow:hidden; padding:0 12px; }

.parking-list { list-style:none; }
.parking-item {
  display:flex; align-items:center; gap:12px;
  padding:14px 12px; margin-bottom:6px;
  background:var(--bg3); border-radius:14px;
  border:2px solid transparent;
  cursor:pointer; transition:all .15s;
}
.parking-item:active { background:var(--bg-active); }
.parking-item.active { border-color:var(--accent); background:var(--bg-active); }

.item-idx {
  width:32px; height:32px; border-radius:50%;
  background:var(--border); color:var(--text2);
  font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.parking-item.active .item-idx { background:var(--accent); color:var(--bg); }

.item-body { flex:1; min-width:0; }
.item-name {
  font-size:14px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.item-sub { font-size:12px; color:var(--text2); margin-top:2px; }
.item-sub .dist { color:var(--accent); font-weight:700; }
.item-fee { font-size:10px; color:var(--text3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.item-go {
  width:40px; height:40px; border-radius:50%;
  background:rgba(0,212,170,.1); border:none;
  color:var(--accent); cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.item-go:active { background:rgba(0,212,170,.25); }

/* === Empty === */
.empty-msg {
  text-align:center; padding:40px 20px;
  color:var(--text2); font-size:18px;
}

/* === Footer === */
footer {
  flex-shrink:0;
  display:flex; gap:8px;
  padding:8px 12px calc(var(--safe-b) + 8px);
  background:var(--bg2); border-top:1px solid var(--border);
}
.foot-btn {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  /* 最小觸控區域 48x48，這裡用更大的 */
  min-height:64px;
  padding:8px 4px; border:1px solid var(--border);
  border-radius:14px; background:transparent;
  color:var(--text2); font-size:12px; font-weight:600;
  cursor:pointer; transition:all .15s;
}
.foot-btn:active { background:var(--bg3); color:var(--text); }
.foot-btn svg { flex-shrink:0; }

/* Voice button 特殊樣式 */
.foot-btn.voice {
  border-color:var(--accent2); color:var(--accent);
  position:relative;
}
.foot-btn.voice.listening {
  background:rgba(0,212,170,.12);
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(0,212,170,.2);
  animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow:0 0 0 3px rgba(0,212,170,.2); }
  50% { box-shadow:0 0 0 8px rgba(0,212,170,0); }
}

/* === Toast === */
.toast {
  position:fixed; bottom:90px; left:50%; transform:translateX(-50%);
  padding:10px 28px; background:var(--bg3); border:1px solid var(--border);
  border-radius:28px; color:var(--text); font-size:15px; font-weight:700;
  z-index:200; white-space:nowrap;
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.toast.show { opacity:1; }

/* === Debug Panel === */
.debug-panel {
  margin:12px; border-radius:14px;
  background:var(--bg2); border:1px solid var(--border);
  overflow:hidden; flex-shrink:0;
}
.debug-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; cursor:pointer;
  color:var(--yellow); font-size:14px; font-weight:700;
}
.debug-body {
  padding:0 16px 12px; display:none;
}
.debug-body.open { display:block; }
.debug-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 0; border-bottom:1px solid rgba(255,255,255,.05);
  gap:8px;
}
.debug-row.full { flex-direction:column; align-items:flex-start; }
.debug-label { font-size:12px; color:var(--text3); white-space:nowrap; }
.debug-val {
  font-size:13px; color:var(--text); font-weight:600;
  text-align:right; word-break:break-all;
}
.debug-val.mono { font-family:monospace; font-size:11px; color:var(--accent); }
.debug-pre {
  width:100%; margin-top:4px; padding:8px;
  background:var(--bg); border-radius:8px; border:1px solid var(--border);
  font-family:monospace; font-size:11px; color:var(--text2);
  white-space:pre-wrap; word-break:break-all;
  max-height:200px; overflow-y:auto; line-height:1.5;
}
.debug-manual {
  display:flex; gap:6px; margin-top:6px; width:100%; flex-wrap:wrap;
}
.debug-manual input {
  flex:1; min-width:100px; padding:8px 10px;
  border-radius:8px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:14px;
}
.debug-manual button {
  padding:8px 16px; border-radius:8px; border:none;
  background:var(--accent); color:var(--bg);
  font-weight:700; font-size:14px; cursor:pointer;
  white-space:nowrap;
}
.debug-manual button:active { opacity:.8; }

/* === 假日黃線 === */
.filter-divider {
  color:var(--text3); font-size:14px; flex-shrink:0;
  margin:0 2px;
}
.yellow-line-badge {
  padding:6px 12px; margin:0 12px;
  background:rgba(255,214,0,.1);
  border:1px solid rgba(255,214,0,.3);
  border-radius:10px;
  font-size:13px; font-weight:700;
  color:#FFD600; text-align:center;
  flex-shrink:0;
}

/* 光暈動畫 */
@keyframes yellowPulse {
  0%, 100% { opacity:0.5; transform:scale(1); }
  50% { opacity:0.8; transform:scale(1.15); }
}
.yellow-glow-now {
  animation: yellowPulse 2s ease-in-out infinite;
}
.yellow-glow-soon {
  animation: yellowPulse 3s ease-in-out infinite;
  opacity:0.4;
}
.yellow-glow-legend {
  box-shadow:0 0 6px 2px rgba(255,214,0,.6);
}

/* 停車場 P 圖標 */
.lot-marker { background: transparent !important; border: none !important; }
.lot-p {
  width: 22px; height: 22px;
  background: #00897B;
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  border: 2px solid rgba(255,255,255,.6);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.lot-full {
  background: #78909C;
  border-color: rgba(255,255,255,.25);
  opacity: 0.5;
}

/* 圖例：停車場 P 色塊 */
.legend-lot {
  background: #00897B; color: #fff;
  font-size: 8px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  height: 16px; width: 16px;
}

/* 特殊車格有空位光暈（貨車格 橘色） */
.spot-glow-truck {
  animation: truckGlow 2s ease-in-out infinite;
}
@keyframes truckGlow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(251, 140, 0, 0.5)); }
  50% { filter: drop-shadow(0 0 6px rgba(251, 140, 0, 0.9)) drop-shadow(0 0 10px rgba(251, 140, 0, 0.4)); }
}

/* 特殊車格有空位光暈（身障專用 藍色） */
.spot-glow-handicap {
  animation: handicapGlow 2s ease-in-out infinite;
}
@keyframes handicapGlow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(30, 136, 229, 0.5)); }
  50% { filter: drop-shadow(0 0 6px rgba(30, 136, 229, 0.9)) drop-shadow(0 0 10px rgba(30, 136, 229, 0.4)); }
}

/* === 常用地點 === */
.pref-row-header { justify-content:space-between; }
.loc-add-btn {
  background:none; border:1px solid var(--border); border-radius:8px;
  color:var(--accent); cursor:pointer; padding:2px 10px;
  font-size:16px; font-weight:700;
}
.loc-add-btn:hover { background:rgba(0,212,170,.1); }

.saved-locs-list { display:flex; flex-direction:column; gap:2px; margin-bottom:4px; }

.saved-loc-item {
  display:flex; align-items:center; gap:8px; padding:6px 4px;
  border-bottom:1px solid rgba(255,255,255,.05); border-radius:6px;
}
.saved-loc-item:hover { background:rgba(255,255,255,.03); }
.saved-loc-icon {
  width:28px; height:28px; border-radius:50%;
  background:var(--bg3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; flex-shrink:0;
}
.saved-loc-info { flex:1; min-width:0; }
.saved-loc-name { font-size:13px; font-weight:700; color:var(--text); display:block; }
.saved-loc-addr { font-size:11px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.saved-loc-actions { display:flex; gap:4px; flex-shrink:0; }

.loc-btn {
  background:none; border:1px solid var(--border); border-radius:8px;
  color:var(--text2); cursor:pointer; padding:4px 8px;
  font-size:11px; font-weight:600; white-space:nowrap;
}
.loc-btn:hover { color:var(--accent); border-color:var(--accent); }
.loc-btn.go { color:var(--accent); border-color:var(--accent2,var(--accent)); }
.loc-btn.del { color:var(--red,#E53935); border-color:transparent; }
.loc-btn.del:hover { border-color:var(--red,#E53935); }

.saved-loc-edit { display:flex; flex-direction:column; gap:6px; padding:8px 4px; width:100%; }
.loc-edit-row { display:flex; gap:6px; align-items:center; }
.loc-edit-input {
  flex:1; padding:6px 10px; border-radius:8px;
  background:var(--bg); border:1px solid var(--border);
  color:var(--text); font-size:13px; min-width:0;
}
.loc-edit-input:focus { border-color:var(--accent); outline:none; }
.loc-edit-results {
  max-height:120px; overflow-y:auto;
  background:var(--bg); border:1px solid var(--border); border-radius:8px;
}
.loc-edit-result-item {
  padding:8px 10px; cursor:pointer; font-size:12px;
  border-bottom:1px solid rgba(255,255,255,.05); color:var(--text);
}
.loc-edit-result-item:hover { background:rgba(0,212,170,.08); }
.loc-edit-result-item:last-child { border-bottom:none; }

/* === Utilities === */
.hidden { display:none !important; }

/* === 滾動條 === */
.list-panel::-webkit-scrollbar { width:4px; }
.list-panel::-webkit-scrollbar-track { background:transparent; }
.list-panel::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }

/* === 響應式：小螢幕微調 === */
@media (max-height: 650px) {
  .hero-card { margin:8px; padding:14px; }
  .hero-info h2 { font-size:17px; }
  .action-btn { padding:12px; font-size:16px; }
  .quick-stats { margin-bottom:4px; }
  .stat { padding:6px 4px; }
  .stat-val { font-size:18px; }
  footer { padding:6px 8px calc(var(--safe-b) + 6px); }
  .foot-btn { min-height:54px; }
}