:root { font-family: system-ui, -apple-system, Segoe UI, sans-serif; color:#182230; background:#f2f5f8; }
* { box-sizing:border-box; }
body { margin:0; }
header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.4rem; background:#123047; color:white; }
h1 { margin:0; font-size:1.45rem; } header p { margin:.25rem 0 0; color:#d5e4ec; font-size:.92rem; }
.profile { display:flex; align-items:center; gap:.65rem; } select,input,button { font:inherit; }
main { display:grid; grid-template-columns:360px minmax(0,1fr); min-height:calc(100vh - 132px); }
aside { padding:1rem; overflow:auto; max-height:calc(100vh - 132px); }
.panel { background:white; border:1px solid #dbe2e8; border-radius:12px; padding:1rem; margin-bottom:.85rem; box-shadow:0 2px 8px #102a4308; }
h2 { font-size:1rem; margin:0 0 .8rem; }
input[type=file] { width:100%; margin-bottom:.6rem; font-size:.88rem; }
input:not([type=file]), select { padding:.55rem; border:1px solid #b8c5cf; border-radius:7px; background:white; }
button { border:0; border-radius:7px; padding:.58rem .8rem; background:#176b87; color:white; cursor:pointer; margin:.15rem .1rem .15rem 0; }
button:disabled { opacity:.45; cursor:not-allowed; }
.buttons { display:flex; flex-wrap:wrap; gap:.2rem; }
.muted { color:#607080; font-size:.8rem; line-height:1.45; }
.stats { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.stats div { background:#f1f6f8; border-radius:8px; padding:.7rem; }
.stats span { display:block; color:#61717e; font-size:.78rem; } .stats strong { display:block; font-size:1.15rem; margin-top:.15rem; }
#elevation { width:100%; height:110px; display:block; }
#routeName { width:100%; margin-bottom:.5rem; }
#exportBtn { width:100%; }
#message { padding:.65rem .2rem; font-size:.86rem; color:#354b5b; overflow-wrap:anywhere; }
#map { min-height:520px; height:calc(100vh - 132px); background:#dce7eb; }
footer { padding:.7rem 1rem; text-align:center; font-size:.76rem; color:#607080; }
@media(max-width:850px) { main { grid-template-columns:1fr; } aside { max-height:none; } #map { height:58vh; min-height:380px; } header { align-items:flex-start; } h1 { font-size:1.15rem; } .profile { flex-direction:column; align-items:flex-end; } }

.full-width { width:100%; margin-top:.25rem; }
.library-panel label { display:block; font-size:.82rem; font-weight:600; margin:.4rem 0 .2rem; }
.library-panel hr { border:0; border-top:1px solid #e0e6eb; margin:1rem 0; }
.library-panel h3 { font-size:.95rem; margin:.2rem 0 .5rem; }
.library-panel textarea { font:inherit; border:1px solid #b8c5cf; border-radius:7px; padding:.55rem; resize:vertical; }
.filter-grid { display:grid; grid-template-columns:1fr 1fr; gap:.35rem .55rem; margin:.5rem 0; }
.filter-grid input, .filter-grid select { width:100%; min-width:0; }
.library-results { display:grid; gap:.55rem; margin-top:.5rem; }
.route-card { border:1px solid #dbe2e8; border-radius:9px; padding:.7rem; background:#fbfcfd; overflow-wrap:anywhere; }
.route-card h3 { margin:0 0 .25rem; font-size:.95rem; }
.route-card p { margin:.2rem 0; font-size:.8rem; color:#526575; line-height:1.4; }
.route-card .route-actions { display:flex; flex-wrap:wrap; gap:.25rem; margin-top:.45rem; }
.route-card button { font-size:.78rem; padding:.4rem .55rem; }
.route-card .danger { background:#a83434; }
.route-card .secondary { background:#536776; }
@media(max-width:850px) { .library-panel { order:-1; } }

.panel ul { margin: .4rem 0 .6rem 1.1rem; padding: 0; font-size: .85rem; }
.panel li { margin-bottom: .25rem; }

/* ---------- helpers ---------- */
[hidden] { display:none !important; }
button.secondary { background:#536776; }
button.small { font-size:.8rem; padding:.35rem .6rem; margin:0; }

/* ---------- map area + route summary overlay ---------- */
.map-wrap { position:relative; min-width:0; }
#map { position:relative; z-index:0; }
.summary-overlay { position:absolute; left:12px; right:12px; bottom:26px; z-index:10; background:rgba(255,255,255,.96);
  border:1px solid #cfd8df; border-radius:12px; box-shadow:0 4px 18px #10243a33; max-height:60%; overflow:hidden; }
.summary-bar { display:flex; align-items:center; gap:.5rem; padding:.4rem .7rem; flex-wrap:wrap; }
.summary-stats { display:flex; gap:.4rem 1.2rem; flex:1 1 auto; flex-wrap:wrap; align-items:baseline; }
.summary-stats div { display:flex; gap:.4rem; align-items:baseline; }
.summary-stats span { color:#61717e; font-size:.76rem; }
.summary-stats strong { font-size:1rem; }
#summaryBody { padding:0 .7rem .5rem; }
#summaryBody .muted { margin:.35rem 0 0; font-size:.72rem; }

/* ---------- edit mode control (top-left of the map) ---------- */
.route-edit-controls { background:#fff; padding:6px; display:flex; flex-direction:column; gap:5px; max-width:230px; }
.route-edit-controls .mode-title { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:#607080; font-weight:600; }
.route-edit-controls button { margin:0; background:#eef3f6; color:#25465a; border:2px solid transparent; text-align:left; font-size:.85rem; }
.route-edit-controls button:hover { background:#dfe9ef; }
.route-edit-controls button.active { background:#176b87; color:#fff; border-color:#0e4a60; font-weight:700;
  box-shadow:0 0 0 2px #fff, 0 0 0 4px #176b87; }
.route-edit-controls button.active::before { content:'✓ '; }
.route-edit-controls .mode-hint { font-size:.74rem; line-height:1.35; color:#354b5b; border-top:1px solid #e0e6eb; padding-top:5px; }
.mode-pill { display:inline-block; background:#176b87; color:#fff; border-radius:99px; padding:.05rem .65rem; font-size:.82rem; font-weight:600; }
.mode-line { margin:.1rem 0 .5rem; }

/* ---------- zoom indicator (top-right, below the layer list) ---------- */
.zoom-info { background:#fff; padding:4px 8px; font:12px/1.4 system-ui, sans-serif; color:#354b5b; max-width:230px; }
.zoom-info.warn { background:#fff3cd; color:#7a5200; font-weight:600; }

@media(max-width:850px) {
  .summary-overlay { left:8px; right:8px; bottom:24px; }
  #elevation { height:80px; }
  #summaryBody .muted { display:none; }
}

/* ---------- header actions ---------- */
.header-actions { display:flex; align-items:center; gap:.8rem 1rem; flex-wrap:wrap; justify-content:flex-end; }
.header-link, .header-btn { color:#fff; text-decoration:none; background:#ffffff1f; border:1px solid #ffffff55; border-radius:8px;
  padding:.45rem .8rem; font-size:.9rem; margin:0; cursor:pointer; }
.header-link:hover, .header-btn:hover { background:#ffffff38; }
hr.soft { border:0; border-top:1px solid #e0e6eb; margin:.8rem 0; }
.field-label { display:block; font-size:.82rem; font-weight:600; margin:.2rem 0; }
textarea { font:inherit; border:1px solid #b8c5cf; border-radius:7px; padding:.55rem; resize:vertical; }

/* ---------- collapsible left menu ---------- */
main.menu-collapsed { grid-template-columns:1fr; }
main.menu-collapsed aside { display:none; }
.menu-tab { position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:20; width:22px; height:72px; padding:0; margin:0;
  border-radius:0 8px 8px 0; background:#123047; color:#fff; font-size:.75rem; box-shadow:2px 0 8px #10243a40; }
.menu-tab:hover { background:#176b87; }

/* ---------- collapsible edit-mode control ---------- */
.route-edit-controls .mode-toggle { display:flex; align-items:center; gap:.45rem; width:100%; background:#fff; color:#25465a; border:0;
  padding:2px 2px; margin:0; text-align:left; cursor:pointer; }
.route-edit-controls .mode-toggle .mode-toggle-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:#607080; font-weight:600; }
.route-edit-controls .mode-toggle .mode-current { font-size:.85rem; font-weight:700; color:#fff; background:#176b87; border-radius:99px; padding:.1rem .6rem; }
.route-edit-controls .mode-toggle .mode-chevron { margin-left:auto; color:#607080; }
.route-edit-controls:not(.collapsed) .mode-toggle .mode-current { display:none; }
.route-edit-controls .mode-body { display:flex; flex-direction:column; gap:5px; }

/* ---------- route library page ---------- */
.lib-main { display:grid; grid-template-columns:minmax(320px,440px) minmax(0,1fr); gap:1rem; padding:1rem; align-items:start; }
.lib-left { min-width:0; }
.lib-left details summary { cursor:pointer; font-weight:600; }
.lib-left details[open] summary { margin-bottom:.6rem; }
.lib-list { max-height:calc(100vh - 420px); min-height:220px; overflow:auto; padding-right:.2rem; }
.route-card { cursor:pointer; }
.route-card:hover { border-color:#9db4c3; }
.route-card.selected { outline:2px solid #176b87; background:#eef7fa; }
.route-card:focus-visible { outline:2px solid #176b87; }
.lib-right { position:sticky; top:.8rem; min-width:0; }
.preview-empty { color:#607080; text-align:center; padding:3rem 1rem; }
#previewMap { height:340px; border-radius:10px; background:#dce7eb; position:relative; z-index:0; margin:.5rem 0; }
#previewElevation { width:100%; height:90px; display:block; }
.preview-stats { display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; margin:.4rem 0; }
.preview-stats span { color:#61717e; font-size:.78rem; margin-right:.3rem; }
.preview-stats strong { font-size:1rem; }
.preview-meta { font-size:.8rem; color:#607080; margin:.2rem 0 .6rem; overflow-wrap:anywhere; }
.detail-grid { display:grid; gap:.4rem; margin:.6rem 0; }
.detail-grid input, .detail-grid select, .detail-grid textarea { width:100%; }
button.danger { background:#a83434; }
@media(max-width:850px) {
  .lib-main { grid-template-columns:1fr; }
  .lib-right { position:static; }
  .lib-list { max-height:none; }
  .menu-tab { top:auto; bottom:40%; }
}

.route-edit-controls .mode-toggle span { white-space:nowrap; }
.route-edit-controls.collapsed { max-width:none; width:max-content; }

.more-filters { margin:.6rem 0; }
.more-filters summary { cursor:pointer; font-size:.85rem; color:#354b5b; }
.more-filters[open] summary { margin-bottom:.5rem; }

/* ---------- library: manage options ---------- */
.bulk-bar { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin:.2rem 0 .5rem; font-size:.85rem; }
.bulk-bar label { display:flex; align-items:center; gap:.35rem; margin:0; }
.bulk-bar #bulkInfo { flex:1; }
.route-card { position:relative; }
.route-card .card-check { position:absolute; top:.5rem; right:.6rem; margin:0; }
.route-card h3 { padding-right:1.8rem; }
.inline-edit { margin-top:.6rem; padding-top:.5rem; border-top:1px dashed #c4d0d8; }
.inline-edit textarea { width:100%; }

/* ---------- routing data page ---------- */
.rd-main { display:grid; grid-template-columns:minmax(340px,1fr) minmax(0,1.15fr); gap:1rem; padding:1rem; align-items:start; }
.rd-left, .rd-right { min-width:0; }
.notice-warn { background:#fff3cd; border-color:#e6c75a; }
.table-wrap { overflow-x:auto; }
.tile-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.tile-table th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#607080; padding:.3rem .4rem; border-bottom:1px solid #d5dde3; }
.tile-table td { padding:.4rem; border-bottom:1px solid #eef1f4; vertical-align:middle; }
.row-actions { white-space:nowrap; text-align:right; }
.row-actions button { margin:0 0 0 .25rem; }
.badge { display:inline-block; border-radius:99px; padding:.1rem .55rem; font-size:.75rem; background:#e6ecf0; color:#425566; white-space:nowrap; }
.badge.ok { background:#dff3e3; color:#1d6b2f; }
.badge.update { background:#fde9c6; color:#8a4b00; font-weight:600; }
.badge.busy { background:#dbe8fb; color:#1d4ea0; }
.job-current progress { width:100%; height:14px; margin:.4rem 0 .2rem; }
.history-list { list-style:none; margin:.4rem 0 0; padding:0; font-size:.8rem; }
.history-list li { padding:.2rem 0; border-bottom:1px solid #eef1f4; }
.history-list li.ok b { color:#1d6b2f; }
.history-list li.fail b { color:#a83434; }
.check-row { display:flex; gap:.6rem; align-items:flex-start; margin:.5rem 0; font-size:.88rem; }
.check-row input { margin-top:.25rem; }
.quick-picks { display:flex; gap:.4rem; margin:.4rem 0; }
.quick-picks select, .quick-picks input { flex:1; min-width:0; }
.quick-picks button { margin:0; }
#tileMap { height:380px; border-radius:10px; background:#dce7eb; position:relative; z-index:0; margin:.6rem 0 .3rem; }
.legend { display:flex; gap:1rem; flex-wrap:wrap; font-size:.78rem; color:#425566; }
.legend i { display:inline-block; width:.9rem; height:.9rem; border-radius:3px; margin-right:.3rem; vertical-align:-2px; opacity:.7; }
.selection-summary { margin:.6rem 0; padding:.5rem .7rem; border-radius:8px; background:#eef3f6; font-size:.85rem; }
.selection-summary.warn { background:#fff3cd; color:#7a5200; }

/* ---------- planner: routing-data banner ---------- */
.data-banner { position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:15; max-width:min(640px, calc(100% - 330px));
  background:#123047; color:#fff; border-radius:10px; padding:.45rem .8rem; box-shadow:0 4px 16px #10243a55; display:flex; flex-wrap:wrap;
  align-items:center; gap:.5rem; font-size:.88rem; }
.data-banner a { color:#9fd8ff; }
.data-banner .banner-close { margin:0 0 0 .2rem; background:transparent; padding:.1rem .4rem; font-size:.85rem; }

@media(max-width:850px) {
  .rd-main { grid-template-columns:1fr; }
  .data-banner { left:8px; right:8px; transform:none; max-width:none; top:56px; }
}

.tile-area { font-size:.72rem; color:#607080; white-space:nowrap; }
.tile-table td.nowrap { white-space:nowrap; }

.notice-info { background:#e8f3fb; border-color:#9cc7e6; }
.code-snippet { background:#17212b; color:#dbe7f0; padding:.6rem .8rem; border-radius:8px; overflow-x:auto; font-size:.8rem; margin:.4rem 0; }
.panel code { background:#eef1f4; padding:.05rem .3rem; border-radius:4px; font-size:.85em; }
.notice-warn .code-snippet code { background:transparent; }

.code-snippet { white-space:pre-wrap; overflow-wrap:anywhere; }
#unavailableText { overflow-wrap:anywhere; }

/* ---------- wind check ---------- */
.wind-btn { background:#1d6fb8; }
.wind-panel { position:absolute; right:12px; top:182px; bottom:26px; width:352px; z-index:12; background:rgba(255,255,255,.97);
  border:1px solid #cfd8df; border-radius:12px; box-shadow:0 4px 18px #10243a33; padding:.55rem .75rem .6rem; overflow-y:auto; font-size:.86rem; }
.wind-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }
.wind-head .banner-close { margin:0; background:transparent; color:#354b5b; padding:.1rem .4rem; font-size:.9rem; }
.wind-controls { display:flex; flex-wrap:wrap; gap:.4rem .7rem; align-items:center; margin-bottom:.5rem; }
.wind-controls label { display:flex; align-items:center; gap:.3rem; margin:0; font-size:.82rem; }
.wind-controls select, .wind-controls input { margin:0; padding:.25rem .35rem; font-size:.85rem; }
.wind-controls input[type=number] { width:3.6rem; }
.wind-days { display:flex; gap:.25rem; }
.wind-days button { margin:0; padding:.3rem .55rem; font-size:.8rem; background:#eef3f6; color:#25465a; border:2px solid transparent; }
.wind-days button.active { background:#176b87; color:#fff; border-color:#0e4a60; font-weight:700; }
.wind-status { margin:.4rem 0; }
.wind-status.error { color:#a83434; }
.wind-now { font-size:.95rem; margin:.2rem 0 .4rem; }
.wind-arrow { display:inline-block; font-size:1.3rem; font-weight:700; color:#1d6fb8; line-height:1; vertical-align:-2px; }
.wind-impact { padding:.35rem .55rem; border-radius:8px; background:#eef3f6; margin:.3rem 0; }
.wind-impact.low { background:#e1f3e5; } .wind-impact.moderate { background:#fff1cf; } .wind-impact.high { background:#fbdcd9; }
.wind-warn { background:#fff3cd; color:#7a5200; border-radius:8px; padding:.35rem .55rem; margin:.3rem 0; }
.wind-advice { padding:.5rem .65rem; border-radius:8px; margin:.4rem 0; line-height:1.4; border-left:5px solid #8a97a3; background:#f3f6f8; }
.wind-advice.reverse { border-left-color:#d9822b; background:#fff4e6; }
.wind-advice.keep { border-left-color:#1e9e48; background:#e8f6ec; }
.wind-table { width:100%; border-collapse:collapse; margin:.4rem 0; font-size:.82rem; }
.wind-table th, .wind-table td { padding:.22rem .35rem; border-bottom:1px solid #eef1f4; text-align:right; }
.wind-table thead th { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#607080; }
.wind-table tbody th { text-align:left; font-weight:500; color:#425566; }
.wind-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .8rem; margin:.4rem 0; }
.wind-actions label { display:flex; align-items:center; gap:.25rem; margin:0; font-size:.8rem; }
.wind-actions button { margin:0 0 0 auto; padding:.35rem .65rem; font-size:.82rem; }
.wind-legend { display:flex; gap:.9rem; flex-wrap:wrap; font-size:.76rem; color:#425566; margin:.2rem 0 .5rem; }
.wind-legend i { display:inline-block; width:1.4rem; height:.45rem; border-radius:3px; margin-right:.3rem; vertical-align:middle; }
.wind-hours-title { font-size:.8rem; font-weight:600; margin-top:.4rem; }
.wind-hours { display:flex; gap:2px; align-items:flex-end; height:76px; margin:.3rem 0 .2rem; }
.wind-hours .hour { flex:1; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; padding:0; margin:0;
  background:transparent; border:1px solid transparent; border-radius:4px; cursor:pointer; color:#425566; }
.wind-hours .hour:hover { background:#eef3f6; }
.wind-hours .hour.sel { border-color:#176b87; background:#e6f1f5; }
.wind-hours .hour.past { opacity:.35; cursor:default; }
.wind-hours .bars { flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; gap:1px; }
.wind-hours .bars i { display:block; width:42%; border-radius:2px 2px 0 0; }
.b-drawn { background:#2f6fd6; } .b-rev { background:#8a97a3; }
.wind-hours .bars i.gain { opacity:.45; }
.wind-hours .lbl { font-size:.62rem; height:.9rem; line-height:.9rem; }
.wind-hours-title .key { display:inline-block; width:.7rem; height:.7rem; border-radius:2px; margin:0 .25rem 0 .4rem; vertical-align:-1px; }
.wind-note { font-size:.7rem; color:#607080; margin:.5rem 0 0; }
.map-wrap.wind-open .summary-overlay { right:380px; }
@media(max-width:850px) {
  .wind-panel { left:8px; right:8px; top:auto; bottom:24px; width:auto; max-height:62%; z-index:30; }
  .map-wrap.wind-open .summary-overlay { right:8px; }
}

/* ---------- library: compare routes ---------- */
#compareMap { height:400px; border-radius:10px; background:#dce7eb; position:relative; z-index:0; margin:.5rem 0; }
.cmp-legend { list-style:none; margin:.3rem 0; padding:0; }
.cmp-row { display:flex; align-items:center; gap:.45rem; padding:.3rem .4rem; border-radius:8px; border:1px solid transparent; flex-wrap:wrap; }
.cmp-row.focus { background:#eef7fa; border-color:#9cc7e6; }
.cmp-row .cmp-vis { margin:0; display:flex; }
.cmp-row .muted { flex:1; font-size:.78rem; min-width:7rem; }
.cmp-row button { margin:0; }
.cmp-name { background:transparent; color:#15303f; padding:.1rem .2rem; font-weight:700; text-align:left; font-size:.9rem; }
.cmp-name:hover { text-decoration:underline; background:transparent; }
.swatch { display:inline-block; width:1.1rem; height:.55rem; border-radius:3px; flex:none; }
.cmp-overlap { margin-top:.5rem; padding:.55rem .7rem; background:#f3f6f8; border-radius:8px; font-size:.86rem; }
.cmp-overlap ul { list-style:none; margin:.3rem 0; padding:0; }
.cmp-overlap li { padding:.15rem 0; }
.cmp-focus-title { font-size:.95rem; }

/* ---------- weather check: tabs, alerts, best start ---------- */
.wx-tabs { display:flex; gap:.25rem; margin:.4rem 0 .5rem; border-bottom:2px solid #e0e6eb; }
.wx-tabs button { flex:1; margin:0; padding:.3rem .25rem .35rem; background:transparent; color:#425566; border:0; border-bottom:3px solid transparent;
  border-radius:6px 6px 0 0; display:flex; flex-direction:column; align-items:center; gap:.05rem; font-size:.8rem; }
.wx-tabs button small { font-size:.7rem; color:#607080; }
.wx-tabs button:hover { background:#eef3f6; }
.wx-tabs button.active { color:#0e4a60; font-weight:700; border-bottom-color:#176b87; background:#e6f1f5; }
.wx-best { display:flex; align-items:center; gap:.5rem; justify-content:space-between; flex-wrap:wrap; background:#eef7fa; border:1px solid #bfdbe8;
  border-radius:8px; padding:.35rem .55rem; margin:.3rem 0; font-size:.84rem; }
.wx-best button { margin:0; }
.wind-warn.thunder, .wind-warn.ice, .wind-warn.snow { background:#fbdcd9; color:#8a1f17; }
.wind-warn.cold { background:#dfeefb; color:#1d4ea0; }
.wind-warn.heat { background:#ffe3c9; color:#8a4b00; }
.wind-warn.rain { background:#dfeefb; color:#1d4ea0; }
.temp-legend { display:flex; align-items:center; gap:.4rem; font-size:.76rem; color:#425566; margin:.2rem 0 .5rem; }
.temp-legend i { flex:1; height:.5rem; border-radius:3px; }
.b-rain { background:#2f7fd6; } .b-rev.b-rain-rev, .b-rain-rev { background:#9bb6cf; }
.wind-hours .bars i { background:#8a97a3; }
.wind-hours .bars i.b-drawn { background:#2f6fd6; } .wind-hours .bars i.b-rev { background:#8a97a3; }
.wind-hours .bars i.b-rain { background:#2f7fd6; } .wind-hours .bars i.b-rain-rev { background:#9bb6cf; }

/* ---------- garmin page + badges ---------- */
.g-counts { display:flex; gap:1rem; flex-wrap:wrap; margin:.3rem 0 .6rem; }
.g-counts div { flex:1; min-width:6rem; background:#eef3f6; border-radius:8px; padding:.5rem .7rem; display:flex; flex-direction:column; }
.g-counts strong { font-size:1.4rem; }
.g-counts span { font-size:.76rem; color:#607080; }
.g-notes { padding-left:1.1rem; font-size:.84rem; }
.g-notes li { margin-bottom:.3rem; }
.panel h3 { font-size:.95rem; margin:.6rem 0 .2rem; }
.gbadge { display:inline-block; border-radius:99px; padding:.05rem .5rem; font-size:.72rem; margin-left:.4rem; vertical-align:middle; font-weight:600; }
.gbadge.ok { background:#dff3e3; color:#1d6b2f; }
.gbadge.pend { background:#fff1cf; color:#8a4b00; }
.gbadge.err { background:#fbdcd9; color:#8a1f17; }
.garmin-row { margin:.5rem 0; padding:.5rem .65rem; background:#f3f6f8; border-radius:8px; font-size:.86rem; }
.garmin-row .buttons { margin:.4rem 0 0; }

/* ---- sign-in, account and admin pages ---- */
.header-user { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.header-btn { cursor:pointer; font:inherit; }
.side-link { display:inline-block; color:#fff; background:#176b87; text-decoration:none; border-radius:7px; padding:.58rem .8rem; margin:.15rem .1rem .15rem 0; }
.auth-main { display:flex; justify-content:center; align-items:flex-start; min-height:0; padding:2rem 1rem; }
.auth-card { align-self:flex-start; }
.auth-card { width:100%; max-width:380px; }
.auth-card input:not([type=checkbox]) { width:100%; margin-bottom:.6rem; }
.auth-card button { margin-top:.2rem; }
.auth-error { background:#fde8e8; border:1px solid #e3a4a4; color:#7a1f1f; border-radius:8px; padding:.6rem .8rem; font-size:.88rem; }
.auth-note { background:#e6f4ea; border:1px solid #a5d3b0; color:#1d5a2c; border-radius:8px; padding:.6rem .8rem; font-size:.88rem; }
.auth-divider { text-align:center; margin:1rem 0 .6rem; color:#607080; font-size:.8rem; }
.google-btn { display:block; text-align:center; text-decoration:none; color:#182230; background:#fff; border:1px solid #b8c5cf; border-radius:7px; padding:.6rem; font-weight:600; }
.google-btn:hover { background:#f2f5f8; }
.auth-foot { margin-top:1rem; }
.account-main { max-width:640px; margin:1rem auto; padding:0 1rem; }
.admin-main { max-width:860px; }
.account-main input:not([type=checkbox]):not([type=file]), .account-main select { width:100%; max-width:420px; margin-bottom:.6rem; }
.account-facts { display:grid; grid-template-columns:max-content 1fr; gap:.3rem 1rem; margin:0 0 .8rem; }
.account-facts dt { color:#607080; } .account-facts dd { margin:0; }
.qr-box { background:#fff; display:inline-block; padding:.4rem; border:1px solid #dbe2e8; border-radius:8px; }
.setup-steps { padding-left:1.2rem; }
.codes-grid { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:.4rem; padding:0; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:1.05rem; }
.codes-grid li { background:#f1f6f8; border-radius:6px; padding:.4rem .6rem; text-align:center; }
.rp-readonly { background:#fff3cd; border-bottom:1px solid #e6c75a; padding:.45rem 1.4rem; font-size:.85rem; }
.table-wrap { overflow-x:auto; }
.users-table { width:100%; border-collapse:collapse; font-size:.92rem; }
.users-table th, .users-table td { text-align:left; padding:.45rem .5rem; border-bottom:1px solid #e0e6eb; vertical-align:middle; }
.users-table select { width:auto; margin:0; }
.user-cell { white-space:pre-line; }
.check-row { display:flex; align-items:center; gap:.5rem; margin:.4rem 0 .8rem; font-size:.9rem; }
[hidden] { display:none !important; }