* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #f4f6f8; color: #1b1f23; }
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; background: #fff; display: flex; flex-direction: column; }
.header { background: #123047; color: #fff; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 10; }
.header h1 { font-size: 18px; margin: 0; }
.content { flex: 1; padding: 16px; padding-bottom: 80px; }
.tabbar { position: sticky; bottom: 0; display: flex; border-top: 1px solid #eee; background: #fff; }
.tabbar a { flex: 1; text-align: center; padding: 10px 0; font-size: 12px; color: #888; cursor: pointer; }
.tabbar a.active { color: #1b6fb0; font-weight: 600; }
.trip-card { border: 1px solid #eee; border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.trip-card h3 { margin: 0 0 4px; }
button { cursor: pointer; border: none; border-radius: 8px; padding: 10px 14px; background: #1b6fb0; color: #fff; font-size: 14px; width: 100%; }
button.secondary { background: #e2e8ee; color: #123047; }
input, select, textarea { padding: 10px; border: 1px solid #ccd5dd; border-radius: 8px; width: 100%; font-size: 14px; margin-bottom: 10px; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: #eef2f6; }
.chip.green { background: #d6f5df; color: #1e7a34; }
.chip.orange { background: #ffe9cc; color: #a15c00; }
.tabs-toggle { display: flex; gap: 8px; margin-bottom: 12px; }
.tabs-toggle button { width: auto; flex: 1; background: #e2e8ee; color: #123047; }
.tabs-toggle button.active { background: #1b6fb0; color: #fff; }
.thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
#tracker-map { height: 280px; border-radius: 10px; margin-top: 10px; }
.error { color: #c0392b; font-size: 13px; margin-top: 6px; }
.login-wrap { padding: 40px 16px; }