/* The Church's Bozo Pool — two themes, one token system.
 * Default: "Moody Chapel" (the Hall of Fame's dark museum palette).
 * Alternative: "Book Dark" (DraftKings/FanDuel dark-mode charcoal),
 * whose accent follows the current week's book (DK green / FD blue).
 * Theme lives on <html data-theme>, set pre-paint from localStorage
 * (pp-theme) by the inline script in index.html; the week's book lives
 * on <html data-book>, kept current by js/app.js. */

:root, :root[data-theme="moody"] {
  color-scheme: dark;
  --bg: #0B0E14; --bg2: #080A0F;
  --surface: #181E2E; --surface2: #1F2739; --line: #2A3348;
  --text: #EDEEF2; --muted: #9AA3B5; --faint: #6B7488;
  --accent: #C9A227; --accent-bright: #E8C766; --accent-ink: #0B0E14;
  --win: #3FA46A; --win-deep: #00694E; --loss: #CE6A5E;
  --amber: #D98E04; --amber-text: #F2CE84;
  --radius: 16px;
  --btn-bg: #1F2739; --btn-line: #2A3348; --chip-bg: #181E2E;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-num: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --shadow: 0 8px 32px rgba(0, 0, 0, .35);
  --bn-collecting-bg: #2E2408; --bn-collecting-text: #F2CE84; --bn-collecting-border: #D98E04;
  --bn-alive-bg: #00694E; --bn-alive-text: #DFF5E9; --bn-alive-border: #00694E;
  --bn-dead-bg: #38150F; --bn-dead-text: #F2B8AE; --bn-dead-border: #B0574F;
  --bn-cashed-bg: #C9A227; --bn-cashed-text: #0B0E14; --bn-cashed-border: #C9A227;
  --bn-pushed-bg: #1F2739; --bn-pushed-text: #9AA3B5; --bn-pushed-border: #2A3348;
  --warn-red-bg: #38150F; --warn-red-text: #F2B8AE; --warn-red-border: #B0574F;
  --ok-bg: #0E3524; --ok-text: #BFE9D2; --ok-border: #3FA46A;
}

:root[data-theme="book"] {
  color-scheme: dark;
  --bg: #121212; --bg2: #0D0D0D;
  --surface: #1E1E1E; --surface2: #262626; --line: #333333;
  --text: #F2F2F2; --muted: #A8A8A8; --faint: #737373;
  --accent: #53D337; --accent-bright: #7BE45F; --accent-ink: #0C1A06;
  --win: #53D337; --win-deep: #1E3D16; --loss: #FF8589;
  --amber: #C98A12; --amber-text: #F2CE84;
  --radius: 10px;
  --btn-bg: #2A2A2A; --btn-line: #3D3D3D; --chip-bg: #1E1E1E;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-num: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --shadow: 0 4px 18px rgba(0, 0, 0, .45);
  --bn-collecting-bg: #2C2708; --bn-collecting-text: #F2CE84; --bn-collecting-border: #8A7A1F;
  --bn-alive-bg: #1E3D16; --bn-alive-text: #CBEFC2; --bn-alive-border: #2E5B21;
  --bn-dead-bg: #331114; --bn-dead-text: #FFB3B8; --bn-dead-border: #E5484D;
  --bn-cashed-bg: var(--accent); --bn-cashed-text: var(--accent-ink); --bn-cashed-border: var(--accent);
  --bn-pushed-bg: #262626; --bn-pushed-text: #A8A8A8; --bn-pushed-border: #3D3D3D;
  --warn-red-bg: #331114; --warn-red-text: #FFB3B8; --warn-red-border: #E5484D;
  --ok-bg: #1E3D16; --ok-text: #CBEFC2; --ok-border: #3E9B2D;
}
/* Book Dark accent follows the book of the week being viewed. */
:root[data-theme="book"][data-book="FanDuel"] {
  --accent: #1493FF; --accent-bright: #6CB8FF; --accent-ink: #04182E;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
input, select, textarea { max-width: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-ui);
  padding-bottom: 92px; /* room for sticky CTA */
  overflow-x: clip; /* backstop: nothing may push the page sideways */
}
main, .card, .row > *, .leg-main { min-width: 0; }
.leg-meta { overflow-wrap: anywhere; }
.mono, .odds-pill, td.mono { font-variant-numeric: tabular-nums; font-family: var(--font-num); }
.muted { color: var(--muted); } .small { font-size: .85rem; } .center { text-align: center; }
.error { color: var(--loss); }
h2 { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .01em; margin: 0; font-weight: 800; }
#weekTitle { font-size: 1.32rem; line-height: 1.15; }
#progressText { font-size: .88rem; white-space: nowrap; }

.topbar { background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 135%); border-bottom: 1px solid var(--line); color: var(--text); }
.topbar-inner { max-width: 680px; margin: 0 auto; padding: 12px 16px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.wordmark { font-family: var(--font-display); font-size: clamp(1rem, 4.4vw, 1.3rem); font-weight: 800; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wordmark .dia { color: var(--accent); }
.tagline { color: var(--muted); font-size: .82rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.topbar-inner > * { min-width: 0; }
/* Mobile header stacks: brand gets the full row so the wordmark never
 * forces the page wider than the screen. */
@media (max-width: 720px) {
  .topbar-inner { flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 16px; }
  .topbar-right { flex-direction: row; align-items: center; justify-content: flex-start; }
  .wordmark { font-size: 1.08rem; }
}
.identity-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.identity-summary .who { font-weight: 700; }

.theme-toggle { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.theme-toggle-label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.theme-toggle button {
  appearance: none; border: 1px solid var(--line); background: var(--chip-bg); color: var(--muted);
  border-radius: 999px; padding: 6px 11px; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
}
.theme-toggle button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.wrap { max-width: 680px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.slip { border-top: 4px solid var(--accent); }
.slip-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.stamp { margin-top: 4px; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-bright); }

.badge { background: var(--surface2); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 2px 8px; font-size: .7rem; font-weight: 600; white-space: nowrap; }
.badge-demo { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.pill { border-radius: 999px; padding: 4px 12px; font-size: .8rem; font-weight: 800; letter-spacing: .07em; white-space: nowrap; }
.pill-open { background: transparent; color: var(--accent-bright); border: 1px solid var(--accent); }
.pill-locked, .pill-live { background: var(--accent); color: var(--accent-ink); }
.pill-settled { background: var(--surface2); color: var(--muted); border: 1px solid var(--line); }

.banner { margin: 12px 0; border-radius: calc(var(--radius) - 6px); padding: 7px 10px; font-size: clamp(.74rem, 3.3vw, .88rem); font-weight: 800; letter-spacing: .02em; border: 1px solid transparent; }
.banner-collecting { background: var(--bn-collecting-bg); border: 1px dashed var(--bn-collecting-border); color: var(--bn-collecting-text); }
.banner-alive { background: var(--bn-alive-bg); border-color: var(--bn-alive-border); color: var(--bn-alive-text); }
.banner-dead { background: var(--bn-dead-bg); border-color: var(--bn-dead-border); color: var(--bn-dead-text); }
.banner-cashed { background: var(--bn-cashed-bg); border-color: var(--bn-cashed-border); color: var(--bn-cashed-text); }
.banner-pushed { background: var(--bn-pushed-bg); border-color: var(--bn-pushed-border); color: var(--bn-pushed-text); }

.progress-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.progress-track { flex: 1; height: 10px; background: var(--surface2); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); width: 0%; transition: width .3s; }

.row { display: flex; gap: 8px; align-items: center; }
.row > * { min-width: 0; }
.row input, .row select { flex: 1; }
.wrap-row { flex-wrap: wrap; margin: 8px 0; }
.grow { flex: 1; }
/* Button rows: buttons may shrink below their text width (min-width: 0
 * above), and .btn text is nowrap — so in a row, let button text wrap
 * instead of spilling over the neighboring button. The confirm card's
 * action row also wraps to full-width stacked buttons when narrow. */
.row .btn { white-space: normal; text-align: center; line-height: 1.25; }
.actions-row { flex-wrap: wrap; }
.actions-row .btn { flex: 1 1 150px; }
.stack { display: flex; flex-direction: column; gap: 8px; }
input, select {
  padding: 11px 12px; border: 1px solid var(--line); border-radius: calc(var(--radius) - 6px); font-size: 1rem;
  background: var(--surface2); color: var(--text); width: 100%; font-family: var(--font-ui);
}
input::placeholder { color: var(--faint); }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
label select { margin-top: 4px; }

.btn {
  appearance: none; border: 1px solid var(--accent); background: transparent; color: var(--accent-bright);
  padding: 11px 16px; border-radius: calc(var(--radius) - 6px); font-size: 1rem; font-weight: 700; cursor: pointer;
  text-decoration: none; display: inline-block; white-space: nowrap; font-family: var(--font-ui);
}
[hidden] { display: none !important; }
.slip-strip { margin-top: 14px; border-top: 2px dashed var(--line); padding-top: 12px; }
.card.flash { animation: slipflash 1.8s ease; }
@keyframes slipflash { 0%, 60% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: none; } }
.btn:hover { background: var(--surface2); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--accent-ink); }
.btn-danger { border-color: var(--loss); color: var(--loss); }
.btn-danger:hover { background: var(--warn-red-bg); }
.btn-small { padding: 7px 12px; font-size: .9rem; }
.btn.big { width: 100%; padding: 13px; font-size: 1.02rem; }
.linkbtn { background: none; border: none; color: var(--accent-bright); font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip { border: 1px solid var(--line); background: var(--chip-bg); color: var(--text); border-radius: 999px; padding: 8px 14px; font-weight: 700; cursor: pointer; font-family: var(--font-ui); }
.chip.me { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.viewnav { display: flex; gap: 8px; margin-bottom: 14px; }
.viewnav-btn { flex: 1; }
.viewnav-btn.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.viewnav-btn.active:hover { background: var(--accent-bright); }

.board { list-style: none; margin: 8px 0 0; padding: 0; }
.board li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.board li:last-child { border-bottom: none; }
.avatar {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .85rem;
  background: var(--surface2); border: 1.5px solid var(--accent); color: var(--accent-bright);
}
li.missing .avatar { background: transparent; color: var(--faint); border: 2px dashed var(--line); }
li.missing .leg-main { color: var(--muted); }

.leg-main { flex: 1; }
.leg-name { font-weight: 800; }
.leg-sub { font-size: .92rem; margin-top: 1px; }
.leg-meta { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.odds-chip { border: 1px solid var(--line); background: var(--surface2); color: var(--accent-bright); border-radius: 8px; padding: 3px 8px; font-weight: 700; white-space: nowrap; }
.status-word { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.st-won { color: var(--win); } .st-lost { color: var(--loss); } .st-live { color: var(--amber-text); }
.st-pending, .st-push, .st-void { color: var(--muted); }
li.lost .leg-sub { text-decoration: line-through; opacity: .65; }
.leg-progress { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.leg-progress .progress-track { height: 6px; max-width: 200px; }
.leg-progress-text { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.auto-note { margin: 0 0 12px; border-radius: calc(var(--radius) - 6px); padding: 6px 10px; font-size: .82rem; font-weight: 600; background: var(--surface2); border: 1px solid var(--line); color: var(--muted); display: flex; align-items: center; gap: 8px; }
.espn-badge { display: inline-flex; align-items: center; background: #d6002a; color: #fff; font-weight: 800; font-style: italic; font-size: .66rem; letter-spacing: .05em; padding: 2px 6px; border-radius: 4px; flex: none; }
.payout-row { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; }
.payout-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; }
.payout-line .mono { font-weight: 700; color: var(--accent-bright); }
#payoutOut { color: var(--ok-text, var(--accent-bright)); }
#stakeRange { width: 100%; padding: 0; border: none; background: transparent; accent-color: var(--accent); margin: 6px 0 4px; height: 28px; }
/* Post-lock compact strip for members without a leg (open weeks keep
 * full "Still missing" rows; a locked slip shouldn't scroll for them). */
li.missing-strip { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; padding: 8px 12px; }
.missing-label { flex: 0 0 auto; font-size: .78rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.missing-scroll { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.missing-scroll::-webkit-scrollbar { display: none; }
.mini-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 600; padding: 2px 8px 2px 3px; border: 1px dashed var(--line); border-radius: 999px; color: var(--muted); white-space: nowrap; }
.mini-dot { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--surface2); color: var(--faint); font-size: .55rem; font-weight: 700; }
.grade-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.grade-row button { border: 1px solid var(--line); background: var(--surface2); color: var(--text); border-radius: 999px; padding: 4px 10px; font-size: .82rem; font-weight: 700; cursor: pointer; font-family: var(--font-ui); }
.grade-row button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.nl-label { display: block; font-weight: 800; margin: 12px 0 6px; }
.confirm { margin-top: 12px; border: 1px dashed var(--line); border-radius: calc(var(--radius) - 6px); padding: 12px; background: var(--surface2); }
.confirm.found { border: 2px solid var(--accent); background: var(--surface2); }

.slip-legs li { padding: 10px 4px; }
.slip-foot {
  display: flex; justify-content: space-between; align-items: center; margin: 12px 0;
  border-top: 2px dashed var(--line); padding-top: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.odds-pill { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 5px 14px; font-weight: 700; font-size: 1.05rem; }
.warn { border-radius: calc(var(--radius) - 6px); padding: 10px 12px; font-size: .95rem; }
.warn-missing { background: var(--bn-collecting-bg); border: 1px dashed var(--bn-collecting-border); color: var(--bn-collecting-text); }
.warn-duplicate, .warn-conflict { background: var(--warn-red-bg); border: 1px solid var(--warn-red-border); color: var(--warn-red-text); }
.warn-rule { background: var(--bn-collecting-bg); border: 1px solid var(--bn-collecting-border); color: var(--bn-collecting-text); }
.warn-ok { background: var(--ok-bg); border: 1px solid var(--ok-border); color: var(--ok-text); font-weight: 700; }
.warn-drift { background: var(--bn-collecting-bg); border: 1px solid var(--bn-collecting-border); color: var(--bn-collecting-text); }

.leg-book-link { color: var(--accent-bright); font-weight: 700; text-decoration: none; }
.leg-book-link:hover { text-decoration: underline; }

.market-card {
  text-align: left; width: 100%; font: inherit; font-weight: 700; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: calc(var(--radius) - 6px); padding: 10px 12px; color: var(--text);
}
.market-card:hover { border-color: var(--accent); border-left-color: var(--accent); }

/* Browse the board — book-style odds buttons, themed */
.browse-toggle { width: 100%; margin-top: 12px; padding: 9px 12px; font-size: .92rem; }
.browse { margin-top: 12px; }
.browse-games {
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px;
  margin-bottom: 4px; padding-bottom: 6px; -webkit-overflow-scrolling: touch;
}
.browse-games .chip { flex: 0 0 auto; }
.browse-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; margin-bottom: 4px;
  position: sticky; top: 0; background: var(--surface); z-index: 5; border-bottom: 1px solid var(--line);
}
.browse-tab {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--chip-bg); color: var(--muted);
  border-radius: 999px; padding: 6px 11px; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.browse-tab.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.browse-game-head { font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-size: .8rem; color: var(--accent-bright); margin: 14px 0 2px; }
.browse-games .chip { padding: 6px 11px; font-size: .84rem; }
.gl-table { min-width: 0; width: 100%; table-layout: fixed; }
.gl-table col.team-col { width: 30%; }
.gl-table th, .gl-table td { white-space: normal; padding: 5px 3px; }
.gl-table .odds-btn { min-width: 0; }
.gl-table th { text-align: center; font-size: .68rem; letter-spacing: .04em; }
.gl-table th:first-child { text-align: left; }
.gl-team { font-weight: 700; font-size: .88rem; line-height: 1.25; }
.team-logo { width: 22px; height: 22px; object-fit: contain; vertical-align: -6px; margin-right: 6px; }
.prop-player-head .team-logo { width: 18px; height: 18px; vertical-align: -4px; margin-right: 5px; }
.odds-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; min-width: 72px; padding: 6px 4px; gap: 0;
  border: 1px solid var(--btn-line); border-radius: calc(var(--radius) - 6px); background: var(--btn-bg); color: var(--text);
  font: inherit; cursor: pointer;
}
.odds-btn:hover { border-color: var(--accent); }
.odds-btn:disabled { opacity: .55; cursor: not-allowed; background: var(--surface2); }
.odds-btn:disabled:hover { border-color: var(--btn-line); }
.ob-line { font-size: .72rem; font-weight: 500; color: var(--muted); min-height: 1em; line-height: 1.1; }
.ob-odds { font-weight: 700; font-size: .95rem; color: var(--accent-bright); line-height: 1.15; }
.odds-btn:disabled .ob-odds { color: var(--muted); }
.ob-tag { font-size: .64rem; font-weight: 700; letter-spacing: .03em; color: var(--amber-text); line-height: 1.1; }
.prop-section { margin-top: 14px; }
.prop-title { font-size: .95rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 2px; color: var(--text); }
.prop-player { border-bottom: 1px solid var(--line); padding: 9px 0; }
.prop-player:last-child { border-bottom: none; }
.prop-player-head { font-weight: 800; margin-bottom: 6px; }
.prop-market { margin-bottom: 4px; }
.prop-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.prop-btns .odds-btn { flex: 1 1 104px; width: auto; }
.all-lines-toggle {
  margin-top: 7px; background: none; border: none; color: var(--accent-bright);
  font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; padding: 2px 0; text-decoration: underline;
}
.prop-alts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.prop-alts .odds-btn { flex: 1 1 82px; width: auto; }
.browse-empty { padding: 12px 0 4px; }

.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 560px; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
tr.first td { border-left: 4px solid var(--accent); font-weight: 700; }

.past { list-style: none; margin: 0; padding: 0; }
.past li { padding: 10px 4px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; }
.past li:last-child { border-bottom: none; }

/* Add-leg bottom sheet (all viewports): the add card rises from the
 * sticky button as a bottom-anchored sheet, max-width matched to the
 * app column and centered on wide screens. */
.sheet-close { display: none; }
.sheet-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(3, 5, 9, .62); opacity: 0; transition: opacity .32s ease; }
.sheet-scrim.show { opacity: 1; }
body.sheet-open { overflow: hidden; }
/* The add-leg card is ALWAYS the bottom sheet now (owner's call: the
 * in-flow copy at the page bottom was redundant — the sticky button is
 * the only way in). Parked off-canvas + invisible until .open. */
#addCard {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  width: auto; max-width: 680px; margin: 0 auto;
  max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 20px 20px 0 0; border-bottom: none;
  transform: translateY(103%); visibility: hidden; pointer-events: none;
  transition: transform .38s cubic-bezier(.22, 1, .36, 1), visibility 0s .38s;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .55);
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}
#addCard::before {
  content: ""; display: block; width: 44px; height: 5px; border-radius: 99px;
  background: var(--line); margin: 0 auto 10px;
}
#addCard.open { transform: translateY(0); visibility: visible; pointer-events: auto; transition: transform .38s cubic-bezier(.22, 1, .36, 1), visibility 0s 0s; }
#addCard .sheet-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-left: auto; flex: none;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface2);
  color: var(--text); font: inherit; font-size: .95rem; cursor: pointer;
}

.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 30%); }
.sticky > * { max-width: 680px; margin: 0 auto; display: block; }
.foot { text-align: center; padding: 4px 0 8px; }