:root {
  --green-dark: #1B4332;
  --green: #2D6A4F;
  --green-light: #74C69D;
  --bg: #0B1F17;
  --card-bg: #14301F;
  --text: #F1FAEE;
  --text-dim: #9BC1AE;
  --warn: #E9C46A;
  --error: #E76F51;
  /* Near-opaque near-black chip background for the round-screen HUD tiles —
     darker/denser than --card-bg on purpose, closer to The Grint's look. */
  --hud-chip: rgba(8, 20, 13, 0.41); /* halved 2026-10-09 so the map shows through */
}

* { box-sizing: border-box; }

/* Author rules below set `display: flex` on these same elements, which
   otherwise silently wins over the browser's default `[hidden] { display:
   none }` (author styles beat UA styles at equal specificity) — confirmed
   live: every screen was rendering at once, stacked, regardless of the
   `hidden` attribute app.js was setting correctly. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}

.app-header {
  position: relative; /* anchors .app-menu-dropdown */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: var(--green-dark);
}

/* Same round, dark-chip look as the round screen's .menu-btn, but a normal
   flex item in the header instead of absolutely positioned over the map. */
.app-menu-btn {
  width: 38px;
  height: 38px;
  margin: -6px 2px -6px -6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--hud-chip);
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
}

.app-menu-dropdown { top: 62px; }

.app-logo { width: 28px; height: 28px; border-radius: 6px; display: block; }
.app-title { font-size: 18px; font-weight: 700; letter-spacing: 0.3px; }

.auth-screen, .settings-screen, .home-screen, .search-screen, .tee-screen, .round-screen, .scorecard-screen, .history-screen,
.username-screen, .feed-screen, .people-screen, .profile-screen, .notifications-screen {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
  gap: 16px;
}

/* The round screen is a full-bleed map with a HUD overlay, not centered
   flow content like the other screens — it needs its own edge-to-edge
   layout instead of the shared padded/gapped one above. */
.round-screen { padding: 0; gap: 0; align-items: stretch; justify-content: flex-start; text-align: center; }

.search-label {
  font-size: 14px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.search-row { display: flex; gap: 8px; }

.search-row input {
  flex: 1;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--green);
  background: var(--card-bg);
  color: var(--text);
  font-size: 16px;
}

.search-row input:focus { outline: 2px solid var(--green-light); }

.search-row button, .back-link, .hole-nav button {
  padding: 12px 18px;
  border-radius: 12px;
  border: none;
  background: var(--green);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.search-row button:active, .hole-nav button:active { background: var(--green-light); }

.back-link {
  align-self: flex-start;
  background: transparent;
  color: var(--text-dim);
  padding: 6px 0;
  font-size: 14px;
}

.search-status { font-size: 14px; color: var(--text-dim); }

.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.search-results li {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
}

.search-results li:active { background: var(--green-dark); }

.search-results li span { font-size: 13px; color: var(--text-dim); }

/* ---- Tee picker: collapsible Men/Women groups ---- */

.tee-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.tee-group-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: none;
  border-radius: 14px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.tee-group-header:active { background: var(--green-dark); }

.tee-group-arrow { color: var(--text-dim); font-size: 14px; }

.tee-group-list {
  margin-top: 10px;
  overflow-y: visible;
}

.history-stat-bits { font-size: 11px !important; opacity: 0.75; }

.course-name { margin: 0; font-size: 20px; }

/* The round's whole top bar, one row: ☰ | hole pill | running score. A
   three-column grid (not absolute positioning) so the centered pill can
   never run into the chips beside it on a narrow phone. It stays a normal
   (position: relative) child of .hud-top, the floating overlay: nesting
   another position:absolute here pulled it out of flow once before and hid
   the row under it. */
.round-top {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.round-top > .menu-btn { justify-self: start; }
.round-top > .round-total { justify-self: end; }
.round-top > .hole-pill { justify-self: center; max-width: 100%; min-width: 0; }

.menu-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--hud-chip);
  backdrop-filter: blur(4px);
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
}

.menu-dropdown {
  position: absolute;
  top: 52px;
  left: 16px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border-radius: 14px;
  overflow: hidden;
  min-width: 190px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}

.menu-dropdown button {
  padding: 14px 18px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.menu-dropdown button:active { background: var(--green-dark); }

/* Hole-nav pill — Grint-style dark capsule with a flag glyph + prev/next. */
.hole-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--hud-chip);
  backdrop-filter: blur(4px);
  border-radius: 22px;
  padding: 4px 6px;
}

/* Hole number with par / yards / handicap underneath, in one pill. */
.hole-pill-text { display: flex; flex-direction: column; align-items: center; line-height: 1.15; min-width: 0; overflow: hidden; }
.hole-pill .hole-meta { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-variant-numeric: tabular-nums; }
.hole-pill button { flex: none; }

.hole-pill button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.hole-pill button:disabled { opacity: 0.3; cursor: default; }

#hole-number { font-size: 15px; font-weight: 800; text-align: center; }

/* Running score (e.g. "+3 thru 5"), mirroring the ☰ on the right. */
.round-top .round-total {
  padding: 6px 10px;
  border-radius: 14px;
  background: var(--hud-chip);
  backdrop-filter: blur(4px);
  font-size: 12px;
  font-weight: 800;
  color: var(--green-light);
  white-space: nowrap;
}
.round-top .round-total:empty { visibility: hidden; }

/* ---- Round screen: full-bleed map with a HUD overlaid on top ---- */

.map-area {
  position: relative;
  flex: 1;
  min-height: 0; /* let this flex child actually fill/shrink instead of overflowing */
  background: var(--bg);
  overflow: hidden;
}

.map-area #map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Top HUD: hole-nav pill + par pill, stacked, floating over the map. Its own
   real rendered height (via getBoundingClientRect() in getHudChromePx(),
   app.js) is what frameHoleCorridor() uses to know how much of the map is
   covered up top — so this IS the source of truth for that padding, not a
   guessed constant. */
.hud-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 4px;
  box-sizing: border-box;
}

/* Left stat stack: yardage tower, compass, GPS bars, round timer — dark
   chip tiles running down the left edge of the map, Grint-style. */
.hud-stack {
  position: absolute;
  top: 72px;
  left: 10px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 70px;
}

/* Map controls (compass, rings) mirror the left stack on the right. */
.hud-stack-right { left: auto; right: 10px; }

.hud-tile {
  background: var(--hud-chip);
  backdrop-filter: blur(4px);
  border-radius: 12px;
  padding: 6px 4px;
  border: none;
  color: var(--text);
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  font-family: inherit;
}

.hud-tile-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yardage-flank {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  display: flex;
  justify-content: space-between;
  padding: 0 2px;
}

.yardage-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  margin: 2px 0;
}

.yardage-main span:first-child {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--green-light);
  font-variant-numeric: tabular-nums;
}

.yardage-unit { font-size: 10px; color: var(--text-dim); }

.compass-tile { cursor: pointer; padding: 5px; }

.compass-dial { width: 26px; height: 26px; display: block; margin: 0 auto; }

.compass-ring { fill: none; stroke: rgba(255, 255, 255, 0.25); stroke-width: 1.5; }

.compass-needle-north { fill: #E63946; }
.compass-needle-south { fill: rgba(241, 250, 238, 0.75); }

/* Compass mode on: the map turns with the phone. */
.compass-tile.active { box-shadow: inset 0 0 0 2px var(--green-light); }
.compass-tile.active .hud-tile-label { color: var(--green-light); }

.gps-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 16px;
}

.gps-bar {
  width: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 1px;
}

.gps-bar:nth-child(1) { height: 35%; }
.gps-bar:nth-child(2) { height: 58%; }
.gps-bar:nth-child(3) { height: 80%; }
.gps-bar:nth-child(4) { height: 100%; }

.gps-bar.active { background: var(--green-light); }

.timer-tile span:first-child {
  display: block;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.gps-status {
  font-size: 9px;
  color: var(--text-dim);
  white-space: normal; /* two short lines ("No permission") beat an ellipsis */
  line-height: 1.2;
}

.gps-status.ok { color: var(--green-light); }
.gps-status.warn { color: var(--warn); }
.gps-status.error { color: var(--error); }

/* On-map labels (Google Maps MarkerLabels styled via their `className`):
   hazard reach/carry and the green's depth. A small dark pill reads over
   sand, water and bright fairway alike; outlined text alone washed out and
   cluttered. Bunkers and water get a colored edge to tell them apart. */
.map-chip {
  padding: 2px 6px;
  border-radius: 9px;
  background: rgba(8, 20, 13, 0.39);
  line-height: 1.3;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.map-chip-bunker { border: 1px solid rgba(255, 232, 163, 0.55); }
.map-chip-water { border: 1px solid rgba(154, 216, 255, 0.6); }
.map-chip-depth { border: 1px solid rgba(241, 250, 238, 0.45); }

/* Round ☰ menu: "Round settings" expands in place to show its sub-items
   (Change course / Change tee), indented under it. */
.menu-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.menu-chevron { color: var(--text-dim); transition: transform 0.15s; }
.menu-group-toggle[aria-expanded="true"] .menu-chevron { transform: rotate(90deg); }

.menu-submenu {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.18);
}

.menu-dropdown .menu-submenu button { padding-left: 32px; font-size: 14px; }

/* ---- Score tab (bottom-left) + details toggle (bottom-right) ----
   Float directly over the map like the rest of the HUD chrome (same
   translucent --hud-chip treatment as the other HUD tiles) instead of
   sitting in a solid-color strip below it — the map (.map-area, flex:1)
   is now the round screen's only flow child, so it fills the full height
   edge to edge and these are just two more overlay chips on top of it. */
.score-tab {
  position: absolute;
  left: 12px;
  bottom: 16px;
  z-index: 15;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  border-radius: 14px;
  background: var(--hud-chip);
  backdrop-filter: blur(4px);
  color: var(--text);
  cursor: pointer;
}

.score-tab-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.score-tab-value {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--green-light);
}

.details-tab {
  position: absolute;
  right: 12px;
  bottom: 16px;
  z-index: 15;
  min-width: 64px;
  padding: 10px 16px;
  border: none;
  border-radius: 14px;
  background: var(--hud-chip);
  backdrop-filter: blur(4px);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
}

/* Once the score tab has been used once, the details tab spells itself out
   ("Details ▴/▾") instead of just showing a bare arrow, so it's clear this
   is where the rest of the stats (putts, proximity, club, penalties…) live
   beyond just the score. */
.details-tab.revealed { color: var(--text); }

.score-popover {
  position: fixed;
  left: 16px;
  right: 16px;
  max-width: 260px;
  bottom: 70px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}

.score-popover .back-link { align-self: center; }

.score-popover-head {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.full-scorecard-btn {
  padding: 6px 12px;
  border: 1px solid var(--green);
  border-radius: 999px;
  background: transparent;
  color: var(--green-light);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.full-scorecard-btn:active { background: var(--green-dark); }

.details-panel {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 70px;
  max-height: 70vh;
  overflow-y: auto;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--card-bg);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}

.details-panel .back-link { align-self: center; }

.details-panel .fairway-tracker,
.details-panel .club-tracker,
.details-panel .score-entry {
  padding: 0;
}

/* ---- Fairway (tee accuracy) tracker: par 4/5 only ---- */

.fairway-tracker {
  width: 100%;
  padding: 0 20px 10px;
  flex-shrink: 0;
}

.fairway-tracker .score-label {
  display: block;
  margin-bottom: 6px;
}

.fairway-buttons {
  display: flex;
  gap: 8px;
}

.fairway-btn {
  flex: 1;
  padding: 10px 0;
  border: none;
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.fairway-btn.selected {
  background: var(--green);
  color: var(--text);
}

#fairway-hit.selected { background: var(--green-light); color: var(--green-dark); }

/* ---- Club (tee-shot) tracker + picker bottom sheet ---- */

.club-tracker {
  width: 100%;
  padding: 0 20px 10px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.club-tracker .score-label { margin-bottom: 0; }

.picker-btn {
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.bottom-sheet {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 20px;
  max-height: 60vh;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card-bg);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}

.sheet-title {
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.club-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.club-list li {
  background: var(--bg);
  border-radius: 10px;
  padding: 10px 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.club-list li.selected {
  background: var(--green);
  color: var(--text);
}

.bottom-sheet .back-link { align-self: center; }

/* ---- Score entry: strokes (left) / putts (right), side by side ---- */

.score-entry {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 14px 20px 20px;
  flex-shrink: 0;
}

.score-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--card-bg);
  border-radius: 14px;
  padding: 12px;
}

.score-label { font-size: 14px; color: var(--text-dim); }

.stepper { display: flex; align-items: center; gap: 14px; }

.stepper button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: var(--green);
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.stepper button:active { background: var(--green-light); }

.stepper span {
  min-width: 24px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.round-stats-row {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.stat-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--card-bg);
  border-radius: 14px;
  padding: 10px 4px;
}

.stat-tile .stat-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--green-light);
  font-variant-numeric: tabular-nums;
}

.stat-tile .stat-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.table-scroll { width: 100%; overflow-x: auto; }

/* ---- Grint-style scorecard grid: label + 18 holes + OUT/IN/TOTAL/HCP/NET ---- */

.grint-table {
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}

.grint-table td {
  padding: 6px 4px;
  text-align: center;
  min-width: 30px;
  border-bottom: 1px solid var(--green-dark);
}

.grint-table .label-cell {
  position: sticky;
  left: 0;
  background: var(--bg);
  text-align: left;
  padding-left: 4px;
  min-width: 88px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  z-index: 1;
}

.grint-table .row-holes .label-cell,
.grint-table .row-player .label-cell {
  color: var(--text);
  font-weight: 700;
}

.grint-table .row-holes td,
.grint-table .row-par td {
  font-weight: 700;
}

.expand-toggle {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 11px;
  padding: 0 4px 0 0;
  cursor: pointer;
}

.tee-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.score-cell { cursor: pointer; }
.score-cell:active { background: var(--card-bg); }

.driving-icon, .gir-cell, .penalty-cell {
  font-size: 13px;
  font-weight: 700;
}

.driving-icon.hit, .gir-cell.hit { color: var(--green-light); }
.driving-icon.miss { color: var(--error); }
.gir-cell.miss { color: var(--warn); }
.penalty-cell { color: var(--error); }

/* ---- Score-to-par bubbles: plain (par), circle (birdie/eagle), square
   (bogey+), a double-ring/double-square via a box-shadow "second border"
   for eagle/double-bogey, and a filled square for triple-bogey-or-worse. ---- */

.score-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
  color: var(--text);
}

.score-bubble.par { border: none; }

.score-bubble.birdie {
  border-radius: 50%;
  border: 1.5px solid var(--green-light);
}

.score-bubble.eagle {
  border-radius: 50%;
  border: 1.5px solid var(--green-light);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--green-light);
}

.score-bubble.bogey {
  border-radius: 4px;
  border: 1.5px solid var(--warn);
}

.score-bubble.double-bogey {
  border-radius: 4px;
  border: 1.5px solid var(--warn);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--warn);
}

.score-bubble.triple-plus {
  border-radius: 4px;
  background: var(--error);
  color: var(--bg);
}

/* ---- Scorecard top bar (back / title / edit+share) ---- */

.scorecard-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.scorecard-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.scorecard-topbar-actions { display: flex; gap: 8px; }

.icon-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
}

/* ---- Scorecard legend ---- */

.scorecard-legend {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legend-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
}

.legend-codes {
  font-size: 11px;
  color: var(--text-dim);
}

.legend-codes span { white-space: nowrap; }

#finish-round-btn {
  padding: 14px 18px;
  border-radius: 12px;
  border: none;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

#finish-round-btn:disabled { opacity: 0.5; cursor: default; }



/* ---- Sign-in screen + signed-in account row ---- */

.auth-screen { width: 100%; max-width: 420px; align-self: center; }

.auth-form { display: flex; flex-direction: column; gap: 10px; }

.auth-form input {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--green);
  background: var(--card-bg);
  color: var(--text);
  font-size: 16px; /* 16px+ keeps iOS Safari from zooming in on focus */
}

.auth-form input:focus { outline: 2px solid var(--green-light); }

.auth-form button {
  padding: 13px 18px;
  border-radius: 12px;
  border: none;
  background: var(--green);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.auth-form button:disabled { opacity: 0.5; cursor: default; }

.google-signin { display: flex; justify-content: center; min-height: 44px; }
.google-signin:empty { display: none; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dim);
  font-size: 13px;
}

.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--green);
}

#auth-toggle-btn, #auth-forgot-btn { align-self: center; }

/* ---- Settings screen ---- */

.settings-screen { width: 100%; max-width: 480px; align-self: center; }

.settings-card {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-label {
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.settings-name { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.settings-email { font-size: 14px; color: var(--text-dim); overflow-wrap: anywhere; }
.settings-help { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.45; }

.settings-btn {
  padding: 12px 18px;
  border: none;
  border-radius: 12px;
  background: var(--green);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.settings-btn:disabled { opacity: 0.5; cursor: default; }
.settings-btn-secondary { background: transparent; border: 1px solid var(--green); }
.settings-link { align-self: center; font-size: 13px; color: var(--green-light); }


/* ---- Privacy policy page (privacy.html) ---- */

.policy-page {
  width: 100%;
  max-width: 680px;
  align-self: center;
  padding: 24px 16px 48px;
  line-height: 1.55;
  font-size: 15px;
}

.policy-page h1 { font-size: 24px; margin: 12px 0 4px; }
.policy-page h2 { font-size: 17px; margin: 28px 0 8px; color: var(--green-light); }
.policy-page ul { padding-left: 20px; }
.policy-page li { margin-bottom: 8px; }
.policy-page a { color: var(--green-light); }
.policy-page .back-link { text-decoration: none; }
.policy-updated { color: var(--text-dim); font-size: 13px; margin: 0; }

.history-stats {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-footer {
  text-align: center;
  padding: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
}

.site-footer a { color: var(--green-light); margin-left: 6px; }

.app-footer {
  text-align: center;
  padding: 12px;
  font-size: 12px;
  color: var(--text-dim);
}

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  padding: 24px;
}

.confirm-box {
  width: 100%;
  max-width: 320px;
  background: var(--card-bg);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

.confirm-box p { margin: 0 0 20px; font-size: 16px; }

.confirm-actions { display: flex; gap: 12px; }

.confirm-actions button {
  flex: 1;
  padding: 12px 0;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

#confirm-yes-btn { background: var(--green-light); color: var(--green-dark); }
#confirm-no-btn { background: var(--green); color: var(--text); }

/* ---- Handicap index + editing/deleting saved rounds (2026-10-09) ---- */

.handicap-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--green-dark);
}

.handicap-value {
  font-size: 34px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.handicap-label { font-size: 14px; color: var(--text); line-height: 1.3; }
.handicap-label span { font-size: 12px; color: var(--text-dim); }

/* Score differential on each history row; outlined when it's one of the
   rounds the index is averaged from. */
.search-results li span.history-diff {
  float: right;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}

.search-results li span.history-diff.counts {
  color: var(--green-light);
  border-color: var(--green-light);
}

.history-detail-meta { font-size: 13px; color: var(--text-dim); margin-top: -8px; }

.history-actions { display: flex; gap: 10px; }
.history-actions .settings-btn { flex: 1; }
.history-delete-btn { border-color: var(--error) !important; color: var(--error); }
.history-delete-btn.armed { background: var(--error); color: var(--text); }

.history-edit {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.history-edit-date {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dim);
}

.history-edit input,
.history-edit select {
  font: inherit;
  font-size: 16px; /* under 16px, iOS zooms the page on focus */
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--green);
  border-radius: 8px;
  padding: 8px;
}

.history-edit-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.history-edit-table th { font-size: 12px; font-weight: 600; color: var(--text-dim); text-align: center; padding: 4px; }
.history-edit-table td { text-align: center; padding: 3px 4px; }
.history-edit-table tr:nth-child(even) td { background: rgba(255, 255, 255, 0.03); }
.history-edit-table input { width: 56px; text-align: center; padding: 6px 4px; }
.history-edit-table select { padding: 6px 4px; }
.history-edit-table .dim { color: var(--text-dim); }

/* ---- Following, feed, profiles (2026-10-09) ---- */

.search-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }

.share-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-dim);
  align-self: center;
}
.share-toggle input { width: 18px; height: 18px; accent-color: var(--green-light); }

.settings-inline-form { display: flex; gap: 8px; }
.settings-inline-form input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--green);
  border-radius: 10px;
  padding: 10px 12px;
}

.settings-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.settings-switch > span { display: flex; flex-direction: column; gap: 4px; }
.settings-switch input { width: 22px; height: 22px; flex: none; accent-color: var(--green-light); }

.feed-list-view, .feed-round-view { display: flex; flex-direction: column; gap: 14px; }
.screen-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.screen-title-row .course-name { margin: 0; }
.small-btn { padding: 8px 14px; font-size: 14px; position: relative; }
.push-test-btn { align-self: flex-start; }

.badge {
  display: inline-block;
  min-width: 18px;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 9px;
  background: var(--error);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.feed-list, .person-list, .comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feed-card {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}
.feed-card.open { cursor: default; }
.feed-list .feed-card:active { background: var(--green-dark); }

.feed-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.feed-who { min-width: 0; overflow-wrap: anywhere; }
.feed-date { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.feed-card-course { font-size: 14px; color: var(--text); }
.feed-card-score { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.feed-score { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.feed-topar { font-size: 15px; color: var(--green-light); font-weight: 600; }
.feed-card-stats { font-size: 12px; color: var(--text-dim); }
.feed-card-actions { display: flex; align-items: center; gap: 16px; margin-top: 6px; font-size: 14px; color: var(--text-dim); }

.person-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.handle { font-size: 13px; color: var(--text-dim); }
.hcp-chip {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 9px;
  border: 1px solid var(--green);
  font-size: 11px;
  color: var(--green-light);
  white-space: nowrap;
}

.like-btn {
  background: none;
  border: none;
  padding: 4px 6px 4px 0;
  font: inherit;
  color: var(--text-dim);
  cursor: pointer;
}
.like-btn .like-icon { font-size: 18px; }
.like-btn.liked { color: var(--error); }
.only-you { margin-left: auto; font-size: 12px; }

.inline-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--green-light);
  text-decoration: underline;
  cursor: pointer;
}

.feed-likers { font-size: 13px; color: var(--text-dim); }
.feed-likers .person-link { font-weight: 600; }
.section-heading { margin: 4px 0 0; font-size: 15px; }

.comment { background: var(--card-bg); border-radius: 12px; padding: 10px 12px; }
.comment-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.comment-body { margin-top: 4px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-empty { font-size: 13px; color: var(--text-dim); list-style: none; }
.comment-delete {
  margin-left: auto;
  background: none;
  border: none;
  font: inherit;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
}
.comment-delete.armed { color: var(--error); font-weight: 600; }

.comment-form, .invite-row { display: flex; gap: 8px; }
.comment-form input, .invite-row input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--green);
  border-radius: 10px;
  padding: 10px 12px;
}
.invite-row input { background: var(--bg); font-size: 13px; }
.invite-reset { align-self: flex-start; font-size: 12px; padding: 4px 0; }
.invite-reset.armed { color: var(--error); }

.person-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--green-dark);
}
.person-list > .person-row:last-child { border-bottom: none; }
#people-list .person-row { background: var(--card-bg); border-radius: 12px; padding: 10px 14px; border: none; }
.person-main { min-width: 0; overflow-wrap: anywhere; }
.person-actions { display: flex; gap: 6px; margin-left: auto; }

.follow-btn {
  padding: 6px 14px;
  border-radius: 16px;
  border: 1px solid var(--green-light);
  background: var(--green-light);
  color: var(--green-dark);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.follow-btn.active { background: transparent; color: var(--green-light); }
.follow-btn.armed { background: var(--error); border-color: var(--error); color: var(--text); }
.follow-btn:disabled { opacity: 0.5; }
.inline-error { width: 100%; font-size: 12px; color: var(--error); }

.people-tabs { display: flex; gap: 8px; }
.people-tabs button {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--green);
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.people-tabs button[aria-selected="true"] { background: var(--green); color: var(--text); }

.profile-head {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-name { font-size: 22px; font-weight: 700; overflow-wrap: anywhere; }
.follows-you { color: var(--green-light); }
.profile-stats { display: flex; gap: 22px; margin: 10px 0 4px; }
.profile-stats > div { display: flex; flex-direction: column; }
.profile-stats .stat-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.profile-stats .stat-label { font-size: 12px; color: var(--text-dim); }
.profile-actions { display: flex; margin-top: 8px; }

/* ---- Notifications (2026-10-09) ---- */

.app-bell-btn {
  position: relative;
  margin: -6px -6px -6px auto; /* pushed to the right end of the header */
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--hud-chip);
  font-size: 17px;
  cursor: pointer;
}
.app-bell-btn .bell-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  margin: 0;
}

.notification-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notification {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--card-bg);
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}
.notification:active { background: var(--green-dark); }
.notification.unread { box-shadow: inset 3px 0 0 var(--green-light); }
.notification.unread .notification-text { font-weight: 600; }
.notification-text { min-width: 0; overflow-wrap: anywhere; }
.notification-time { flex: none; font-size: 12px; color: var(--text-dim); }

/* ---- Distance rings tile + ring labels (2026-10-09) ---- */
.rings-tile { cursor: pointer; padding: 5px; }
.rings-icon { width: 26px; height: 26px; display: block; margin: 0 auto; }
.rings-icon circle { fill: none; stroke-width: 2; opacity: 0.45; }
.rings-tile.active { box-shadow: inset 0 0 0 2px var(--green-light); }
.rings-tile.active .rings-icon circle { opacity: 1; }
.rings-tile.active .hud-tile-label { color: var(--green-light); }
.map-chip-ring { border: 1px solid rgba(241, 250, 238, 0.35); }

/* The HUD boxes are half as dark as they were (--hud-chip 0.82 -> 0.41), so
   their text gets a soft shadow to stay readable over bright fairway, sand
   and water. */
.hud-tile, .hole-pill, .round-top .round-total, .score-tab, .details-tab, .map-chip {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 0 4px rgba(0, 0, 0, 0.45);
}

/* GPS signal sits in the bottom-left corner, just above the Score tab
   (moved out of the left stack 2026-10-09). */
.gps-tile-corner {
  position: absolute;
  left: 12px;
  bottom: 72px;
  z-index: 15;
  width: 70px;
}

/* Rings toggle sits in the bottom-right corner just above Details,
   mirroring the GPS tile on the left (moved 2026-10-09). */
.rings-tile-corner {
  position: absolute;
  right: 12px;
  bottom: 72px;
  z-index: 15;
  width: 70px;
}

/* ---- Home screen (first screen after sign-in, 2026-10-13) ---- */
.home-greeting { margin: 0; font-size: 22px; }

.home-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  border: none;
  border-radius: 16px;
  background: var(--green);
  color: var(--text);
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
}
.home-play-btn:active { background: var(--green-light); }
.home-play-btn img { width: 32px; height: 32px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(241, 250, 238, 0.25); }

.home-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.home-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 14px 16px;
  border: none;
  border-radius: 14px;
  background: var(--card-bg);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.home-tile:active { background: var(--green-dark); }
.home-tile-label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
.home-tile-value { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.home-tile-sub { max-width: 100%; font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.home-section-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  padding: 4px 0;
  border: none;
  background: none;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.home-section-link span { color: var(--text-dim); font-size: 20px; }
.home-screen .search-status:empty { display: none; }

/* ---- Bottom tab bar ---- */
.tab-bar {
  position: sticky;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  background: var(--green-dark);
  border-top: 1px solid rgba(241, 250, 238, 0.08);
}

.tab-bar button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 0;
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.tab-bar svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tab-bar button.active { color: var(--green-light); }

/* ---- Green read (Golf Intelligence slope map, 2026-10-18) ---- */
.green-read-tile { cursor: pointer; padding: 5px; }
.green-read-icon { width: 26px; height: 26px; display: block; margin: 0 auto; fill: none; stroke-linecap: round; }
.green-read-outline { fill: rgba(116, 198, 157, 0.35); stroke: var(--green-light); stroke-width: 1.5; }
.green-read-contour { stroke: rgba(241, 250, 238, 0.6); stroke-width: 1.2; }
.green-read-arrow { stroke: #FFFFFF; stroke-width: 1.8; }

.green-read-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: #000;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
}

.green-read-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 8px;
}

.green-read-title { font-size: 18px; font-weight: 700; color: var(--text); }
.green-read-sub { font-size: 13px; color: var(--text-dim); margin-top: 2px; }

.green-read-close {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
}

.green-read-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Whole image, never cropped: it carries GI's StrackaLine mark. */
#green-read-img { max-width: 100%; max-height: 100%; object-fit: contain; }

.green-read-status { color: var(--text-dim); font-size: 14px; text-align: center; margin: 0; }

.green-read-legend {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-dim);
  margin: 8px 0 12px;
  text-align: center;
}

.green-read-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
}

.green-read-switch button {
  flex: 1;
  padding: 8px 0;
  border: none;
  border-radius: 9px;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.green-read-switch button[aria-pressed="true"] { background: var(--green); color: var(--text); }

/* ---- Saved Golf Intelligence maps (2026-10-19) ---- */
.saved-map-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 9px;
  background: var(--green);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  vertical-align: 2px;
}

.saved-maps-list { list-style: none; margin: 10px 0 0; padding: 0; }
.saved-maps-list li { padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.saved-maps-list strong { display: block; font-size: 15px; }
.saved-maps-list span { display: block; font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.saved-maps-last { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.settings-version { text-align: center; font-size: 12px; color: var(--text-dim); margin: 4px 0 0; }

/* ---- Update banner (2026-10-19) ---- */
.update-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(80px + env(safe-area-inset-bottom));
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--green);
  color: var(--text);
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.update-banner button {
  flex: none;
  padding: 8px 14px;
  border: none;
  border-radius: 9px;
  background: var(--text);
  color: var(--green-dark);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.settings-update-status { text-align: center; }

/* Aim point legs' yardage tags: darker so they stand out from hazard tags. */
.map-chip-aim { background: rgba(8, 20, 13, 0.75); border: 1px solid rgba(255, 255, 255, 0.7); font-size: 12px; }

/* ---- My bag (2026-10-19) ---- */
.bag-aim-row, .bag-club {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
}
.bag-aim-row { margin-top: 10px; font-weight: 600; }
.bag-aim-help { margin-top: 4px; }
.bag-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 12px 0;
}
.bag-input-wrap { display: inline-flex; align-items: center; gap: 4px; color: var(--text-dim); font-size: 13px; font-weight: 400; }
.bag-input-wrap input {
  width: 64px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  text-align: right;
}