/* css/style.css */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, sans-serif; }
body { background-color: #121212; color: #fff; display: flex; flex-direction: column; height: 100vh; }

/* === 首頁搜尋區塊 === */
.container { padding: 20px; }
.header { text-align: center; margin-bottom: 30px; margin-top: 20px; }
.header h1 { color: #4facfe; font-size: 28px; margin-bottom: 5px; }
.header p { color: #888; font-size: 14px; }

.search-box { display: flex; gap: 10px; margin-bottom: 25px; }
.search-input { flex: 1; padding: 15px; border-radius: 10px; border: none; font-size: 18px; background-color: #2a2a2a; color: #fff; outline: none; }
.search-input:focus { border: 1px solid #4facfe; }
.btn-search { padding: 0 20px; border-radius: 10px; border: none; background-color: #4facfe; color: #fff; font-size: 18px; font-weight: bold; cursor: pointer; }
.btn-search:active { background-color: #0088cc; }

.result-card { background-color: #1e1e1e; border-radius: 12px; padding: 20px; margin-bottom: 15px; border-left: 4px solid #4facfe; }
.route-name { font-size: 22px; font-weight: bold; margin-bottom: 5px; color: #fff; }
.route-desc { color: #aaa; font-size: 14px; margin-bottom: 15px; }

.direction-btn { display: block; width: 100%; padding: 15px; margin-bottom: 10px; border: none; border-radius: 8px; background-color: #333; color: #fff; font-size: 16px; text-align: left; cursor: pointer; transition: 0.2s; display: flex; justify-content: space-between; align-items: center; }
.direction-btn:active { background-color: #4facfe; color: #000; font-weight: bold; }
.direction-btn span.arrow { font-size: 20px; }

/* === 紀錄頁 (HUD) 區塊 === */
.status-bar { background-color: #000; padding: 10px; display: flex; justify-content: space-between; font-size: 13px; color: #aaa; border-bottom: 1px solid #333; }
.status-bar span { color: #fff; font-weight: bold; }

.hud { background-color: #1e1e1e; padding: 15px; border-bottom: 2px solid #4facfe; font-size: 15px; display: flex; flex-direction: column; gap: 8px; }
.hud-row { display: flex; justify-content: space-between; color: #888; }
.hud-current { color: #4facfe; font-size: 18px; font-weight: bold; }
.hud-time { color: #aaa; font-size: 14px; }

.record-area { flex: 1; display: flex; flex-direction: column; padding: 15px; }
.title { text-align: center; font-size: 20px; font-weight: bold; color: #ddd; margin-bottom: 15px; }

.btn-group { flex: 1; display: flex; flex-direction: column; gap: 15px; margin-bottom: 15px; }
.btn { flex: 1; border: none; border-radius: 12px; font-size: 32px; font-weight: bold; color: white; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
.btn:active { transform: scale(0.98); }
.btn-in { background-color: #1b5e20; border: 2px solid #4caf50; }
.btn-out { background-color: #b71c1c; border: 2px solid #f44336; }
.btn-next { background-color: #f57f17; border: 2px solid #ffeb3b; color: #fff; flex: 0.8; font-size: 24px; }
.count-text { font-size: 18px; font-weight: normal; margin-top: 5px; opacity: 0.9; }

.end-btn-container { text-align: right; }
.btn-end { background-color: #333; color: #fff; padding: 10px 20px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; }

/* css/style.css 新增 */
.station-btn { background-color: #2a2a2a; color: #fff; border: 1px solid #444; padding: 15px; border-radius: 8px; text-align: left; font-size: 16px; cursor: pointer; transition: 0.2s; }
.station-btn:active { background-color: #4facfe; color: #000; font-weight: bold; }
.gps-tag { background-color: #28a745; color: white; font-size: 12px; padding: 2px 6px; border-radius: 4px; float: right; }