/* Visual refinement matching the reference boards. Keep this file last so the
   existing functional styles remain reusable by every route. */
:root {
  --bg: #f1efeb;
  --surface: #f5f3ef;
  --surface-elevated: #faf9f6;
  --surface-muted: #e2dfd9;
  --text: #171717;
  --text-secondary: #353432;
  --text-muted: #77736d;
  --border: #d2cfc8;
  --border-strong: #aaa69e;
  --accent: #f58220;
  --accent-hover: #df6d0b;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: none;
}

html, body { background: var(--bg); }
body { font-size: 14px; letter-spacing: -0.01em; }

#app, .app-shell { max-width: 430px; background: var(--bg); }
.app-content { padding-bottom: calc(74px + var(--safe-bottom)); }
.page { min-height: 100dvh; padding: 0; }
.page-content { padding: 4px 20px 32px; }

.page-header {
  min-height: 68px;
  padding: var(--safe-top) 20px 0;
  border-bottom: 1px solid var(--border);
}
.page-header__title { font-size: 18px; font-weight: 500; letter-spacing: -0.025em; }
.back-button, .header-action { width: 32px; height: 32px; border-radius: 50%; }
.back-button svg, .header-action svg { width: 18px; height: 18px; }

.card, .next-service-card, .search-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: none;
}
.card { padding: 14px; }
.card-title { font-size: 15px; font-weight: 600; }
.label-xs { font-size: 10px; letter-spacing: 0.02em; text-transform: none; }
.label-secondary, .list-row__subtitle { font-size: 12px; }

.profile-hero { text-align: left; padding: 16px 0 14px; }
.profile-hero .avatar { width: 56px; height: 56px; margin: 0 0 10px; border: 1px solid var(--border); }
.profile-name { font-size: 20px; font-weight: 500; }
.profile-level { font-size: 12px; margin-top: 3px; }
.profile-xp { font-size: 12px; }
.stats-grid { margin-top: 16px !important; padding-top: 12px; border-top: 1px solid var(--border); text-align: left; }
.stat-value { font-size: 16px; font-weight: 500; }
.stat-label { font-size: 10px; }

.bike-card__image { aspect-ratio: 1.8; background: var(--surface-elevated); padding: 10px 22px; }
.bike-card__body { padding: 14px; }
.bike-card__title { font-size: 15px; }
.bike-card__meta { gap: 8px; margin-top: 12px; padding-top: 12px; }
.bike-card__meta-label { font-size: 10px; }
.bike-card__meta-value { font-size: 12px; }

.list-row { min-height: 52px; padding: 8px 0; }
.list-row__icon { width: 25px; height: 25px; background: transparent; border-radius: 0; }
.list-row__icon svg { width: 17px; height: 17px; }
.list-row__title { font-size: 13px; font-weight: 400; }
.list-row__chevron { color: var(--text-secondary); }
.data-row { min-height: 42px; font-size: 13px; }
.data-label { font-size: 12px; color: var(--text-secondary); }
.data-value { font-size: 12px; font-weight: 400; }

.btn { min-height: 40px; border-radius: 5px; font-size: 14px; font-weight: 400; }
.btn-primary { background: var(--accent); }
.btn-secondary { background: transparent; border-color: var(--border); }
.toggle { width: 32px; height: 19px; }
.toggle__thumb { width: 15px; height: 15px; top: 2px; }
.toggle.active .toggle__thumb { transform: translateX(13px); }
.progress { height: 5px; background: #d9d6d0; }

.bottom-navigation {
  max-width: 430px;
  background: rgba(245,243,239,.97);
  border-top: 1px solid var(--border);
  padding: 5px 8px calc(5px + var(--safe-bottom));
}
.nav-item { gap: 2px; padding: 5px 2px; font-size: 9px; }
.nav-item svg { width: 18px; height: 18px; }

.form-row { gap: 5px; margin-bottom: 12px; }
.form-label { font-size: 12px; font-weight: 400; }
.input, .textarea, .select { min-height: 42px; padding: 0 12px; border-radius: 5px; font-size: 14px; }
.textarea { padding: 10px 12px; }
.file-drop { border-radius: 5px; padding: 15px; font-size: 12px; }

.next-service-card { padding: 16px; }
.next-service-card__value { font-size: 22px; font-weight: 500; color: var(--accent); }
.next-service-card__icon { width: 42px; height: 42px; background: #41413f; color: var(--accent); }
.achievement-card { padding: 12px 8px; border-radius: 7px; }
.achievement-card__icon { width: 42px; height: 42px; }
.achievement-card__title { font-size: 10px; font-weight: 400; }
.arrived__title { font-size: 24px; font-weight: 500; }
.arrived__check { width: 70px; height: 70px; margin: 24px 0; }

.nav-instruction { padding: 14px 20px; background: var(--surface); }
.nav-instruction__icon { width: 42px; height: 42px; }
.nav-instruction__distance { font-size: 22px; font-weight: 500; }
.nav-instruction__text { font-size: 14px; }
.nav-bottom-bar { padding: 14px 20px calc(14px + var(--safe-bottom)); background: var(--surface); }
.nav-bottom-bar__value { font-size: 15px; font-weight: 500; }
.nav-bottom-bar__label { font-size: 10px; }
.map-grid { background-size: 34px 34px; }

/* The reference Settings screen keeps appearance controls behind Day / Night. */
#settings-content > .list:first-child .list-row:nth-child(2),
#settings-content > .card:nth-of-type(3),
#settings-content > .card:nth-of-type(4) { display: none; }

@media (min-width: 768px) {
  body { background: #e4e1dc; }
  #app { min-height: 760px; margin: 24px auto; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.12); }
  .bottom-navigation { border-radius: 0; }
}

[data-theme="dark"] { --bg: #202020; --surface: #292929; --surface-elevated: #303030; --surface-muted: #383838; --text: #f4f4f4; --text-secondary: #c3c3c3; --text-muted: #999; --border: #464646; }
[data-theme="dark"] .bottom-navigation { background: rgba(41,41,41,.97); }