:root {
  --bg: #0d1117; --surface: #161b22; --surface2: #1c2333; --border: #30363d;
  --text: #e6edf3; --muted: #8b949e; --blue: #06b7c8; --green: #3fb950; --red: #f85149; --yellow: #d29922; --orange: #db6d28; --purple: #a855f7;
  --font: 'Inter', -apple-system, sans-serif; --mono: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; }

.header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

.header-left { display: flex; align-items: center; gap: 12px; }

.header h1 {
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 50%;
}

.header-right { display: flex; align-items: center; gap: 12px; }

.date-tabs { display: inline-flex; gap: 4px; }

.date-tab { font-family: var(--font); font-size: 0.8rem; padding: 3px 12px; border-radius: 12px; font-weight: 600; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; transition: all 0.15s; white-space: nowrap; }

.date-tab:hover { border-color: var(--blue); color: var(--text); }

.date-tab.active { background: var(--blue); color: #000; border-color: var(--blue); }

.game-bar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 16px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

.watch-list-bar { background: var(--surface2); border-bottom: 1px solid var(--border); padding: 12px 16px; text-align: center; display: none; }

.watch-list-btn { font-family: var(--font); font-size: 0.8rem; padding: 8px 16px; border-radius: 6px; font-weight: 600; border: 1px solid var(--blue); background: var(--blue); color: #000; cursor: pointer; transition: all 0.15s; margin-right: 12px; }

.watch-list-btn:hover { background: rgba(6,183,200,0.8); }

.watch-list-btn.secondary { background: transparent; color: var(--blue); }

.watch-list-btn.secondary:hover { background: rgba(6,183,200,0.1); }

.watch-list-count { background: rgba(6,183,200,0.25); color: #fff; padding: 2px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: 700; margin-left: 6px; min-width: 20px; text-align: center; display: inline-block; transition: all 0.2s ease; }

.watch-list-count.has-items { background: var(--blue); color: #fff; }

.game-bar::-webkit-scrollbar { height: 4px; }

.game-bar::-webkit-scrollbar-track { background: transparent; }

.game-bar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.game-tiles { display: inline-flex; gap: 8px; }

.game-tile { display: inline-flex; flex-direction: column; align-items: center; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; transition: all 0.15s; min-width: 80px; text-align: center; flex-shrink: 0; }

.game-tile:hover { border-color: var(--blue); background: var(--surface2); }

.game-tile.active { border-color: var(--blue); background: rgba(6,183,200,0.1); box-shadow: 0 0 0 1px var(--blue); }

.game-tile .gt-teams { font-size: 0.75rem; font-weight: 700; color: var(--text); line-height: 1.3; }

.game-tile .gt-at { font-weight: 400; color: var(--muted); font-size: 0.65rem; }

.game-tile .gt-time { font-size: 0.6rem; color: var(--muted); margin-top: 2px; font-family: var(--font); font-weight: 500; font-variant-numeric: tabular-nums; }

.game-tile .gt-ml { font-size: 0.6rem; margin-top: 3px; font-family: var(--font); font-weight: 500; font-variant-numeric: tabular-nums; display: flex; gap: 8px; justify-content: center; }

.game-tile .gt-ml span { padding: 1px 4px; border-radius: 3px; }

.game-tile .gt-ml .ml-fav { color: var(--green); font-weight: 600; }

.game-tile .gt-ml .ml-dog { color: var(--muted); }

.game-tile .gt-ml .ml-even { color: var(--yellow); font-weight: 500; }

/* Live game tile */
.game-tile.live .gt-score { font-size: 0.7rem; font-family: var(--font); font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 3px; color: var(--text); display: flex; align-items: center; justify-content: center; gap: 4px; }

.dot-pulse { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: dotPulse 2s ease-in-out infinite; flex-shrink: 0; }

@keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Divider between active and final games */
.tile-divider { width: 1px; background: var(--border); align-self: stretch; margin: 4px 4px; flex-shrink: 0; }
.shared-divider { display: inline-flex; flex-direction: row; align-items: stretch; gap: 3px; margin: 4px 2px; flex-shrink: 0; align-self: stretch; }
.shared-divider-line { width: 1px; background: var(--border); align-self: stretch; }
.shared-divider-text { writing-mode: vertical-rl; font-size: 7px; font-weight: 700; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; padding: 3px 0; opacity: 0.7; }

/* Final game tile */
.game-tile.final { opacity: 0.5; border-color: #21262d; }

.game-tile.final .gt-score { font-size: 0.7rem; font-family: var(--font); font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 3px; color: var(--muted); }

/* Live/Season toggle */
.view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin: 12px 0; }

.view-toggle-btn { font-family: var(--font); font-size: 0.75rem; font-weight: 600; padding: 5px 16px; border: none; background: transparent; color: var(--muted); cursor: pointer; transition: all 0.15s; letter-spacing: 0.3px; }

.view-toggle-btn:hover { color: var(--text); background: var(--surface2); }

.view-toggle-btn.active { background: var(--blue); color: #000; }

.view-toggle-wrap { text-align: center; grid-column: 1 / -1; }

/* At-bat highlights */
.player-card.at-bat { border-left: 3px solid var(--yellow); }

.at-bat-label { font-size: 0.7rem; color: var(--yellow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-left: 6px; }

.due-up-label { font-size: 0.7rem; color: #a855f7; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-left: 6px; }

.on-deck-label { font-size: 0.7rem; color: #8b949e; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-left: 6px; }

/* Auto-refresh spinner animation */
#refreshSpinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

main { padding: 24px; max-width: 1400px; margin: 0 auto; }

.welcome { text-align: center; padding: 80px 20px; color: var(--muted); }

.welcome h2 { font-size: 1.5rem; color: var(--text); margin-bottom: 8px; }

.game-header { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 24px; padding: 20px; background: var(--surface); border-radius: 12px; border: 1px solid var(--border); }

.team-badge { text-align: center; min-width: 120px; }

.team-badge .abbr { font-size: 2rem; font-weight: 700; }

.team-badge .name { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }

.team-badge .pitcher { font-size: 0.8rem; color: var(--blue); margin-top: 6px; }

.team-badge .moneyline { font-size: 1.1rem; font-family: var(--mono); font-weight: 700; margin-top: 6px; }

.team-badge .moneyline.ml-fav { color: var(--green); }

.team-badge .moneyline.ml-dog { color: var(--muted); }

.team-badge .moneyline.ml-even { color: var(--yellow); }

.vs { font-size: 1.2rem; color: var(--muted); font-weight: 300; text-align: center; }

.game-time { font-size: 0.85rem; color: var(--muted); text-align: center; margin-top: 4px; }

.ml-source { font-size: 0.6rem; color: var(--muted); text-align: center; margin-top: 6px; opacity: 0.6; }

.teams-container { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

@media (max-width: 900px) { .teams-container { gap: 8px; } }

/* Mobile: side-by-side team columns with compact cards */
@media (max-width: 600px) {
  main { padding: 12px 8px; }
  .teams-container { gap: 8px; }
  .team-panel { min-width: 0; }
  .team-panel h3 { font-size: 0.72rem; letter-spacing: 0.3px; margin-bottom: 8px; }
  .player-card { padding: 8px 6px; border-radius: 8px; margin-bottom: 6px; }
  .player-top { flex-wrap: wrap; gap: 2px; }
  .player-name { font-size: 0.78rem; }
  .player-pos { font-size: 0.6rem; padding: 1px 4px; }
  .compact-stats { gap: 1px 4px; }
  .cs .v { font-size: 0.7rem; }
  .cs .l { font-size: 0.55rem; }
  .stat-badge { font-size: 0.6rem; padding: 1px 3px; }
  .at-bat-label { font-size: 0.58rem; letter-spacing: 0.2px; }
  .on-deck-label { font-size: 0.58rem; letter-spacing: 0.2px; }
  .due-up-label { font-size: 0.58rem; letter-spacing: 0.2px; }
  .hot-badge { font-size: 0.58rem; padding: 1px 4px; }
  .trend-badge { font-size: 0.58rem; padding: 1px 4px; }
  .date-tab { font-size: 0.7rem; padding: 3px 8px; }

  /* Mobile auth bar: move to top-right above title + day buttons */
  .header { flex-direction: column; align-items: stretch; padding: 0; gap: 0; }
  .header-right { order: -1; justify-content: flex-end; padding: 6px 12px; border-bottom: 1px solid var(--border); min-height: 32px; }
  .header-left { padding: 10px 12px 10px; flex-wrap: wrap; gap: 8px; }
  /* (auth-user-area row override is below the base definition to ensure correct cascade) */
}

.team-panel h3 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }

.sort-bar { display: flex; align-items: center; gap: 8px; margin: 8px 0 10px 0; }

.sort-bar label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }

.sort-bar select { background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 0.78rem; font-family: var(--mono); cursor: pointer; outline: none; transition: border-color 0.2s; }

.sort-bar select:hover, .sort-bar select:focus { border-color: var(--blue); }

/* Player Card */
.player-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 8px; transition: all 0.2s; cursor: pointer; }

@media (hover: hover) { .player-card:hover { border-color: var(--blue); } }


.player-card.probable-starter { background: var(--surface2); }

.player-card.has-pick { border-left: 3px solid var(--red); }

.player-card.selected { border: 2px solid var(--green); background: rgba(63, 185, 80, 0.1); }

.player-card.selected::before { content: "✓ "; color: var(--green); font-weight: bold; font-size: 0.9rem; }

.player-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }

.player-name { font-weight: 600; font-size: 0.9rem; }

.player-pos { font-size: 0.7rem; color: var(--muted); background: var(--bg); padding: 2px 6px; border-radius: 4px; font-family: var(--mono); }

.player-label { font-size: 0.6rem; color: var(--orange); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-left: 6px; }

/* Compact Stats Row */
.compact-stats { display: flex; flex-wrap: wrap; gap: 1px 8px; font-size: 0.75rem; line-height: 1.6; }

.cs { display: flex; align-items: baseline; gap: 2px; }

.cs .l { color: var(--muted); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.2px; }

.cs .v { font-family: var(--font); font-weight: 500; font-size: 0.78rem; font-variant-numeric: tabular-nums; }

.cs .v.hi { color: var(--blue); }

.cs.pick { background: rgba(248,81,73,0.22); padding: 1px 6px; border-radius: 4px; }

.cs.pick .v { color: #fff; font-weight: 700; }

.cs.pick .l { color: rgba(255,255,255,0.7); }

/* Enhanced Live Player Cards */
.live-enhanced-card {
  border-left: 3px solid var(--green) !important;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.03) 0%, var(--surface) 100%) !important;
}

.live-enhanced-card:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, var(--surface-hover) 100%) !important;
  border-color: var(--green-bright) !important;
}

/* Hot Streak */
.hot-badge { font-size: 0.65rem; background: rgba(219,109,40,0.18); color: var(--orange); padding: 1px 6px; border-radius: 4px; margin-left: 6px; white-space: nowrap; }

.streak-row { font-size: 0.7rem; color: var(--orange); margin-top: 4px; font-weight: 500; }

.cold-row { font-size: 0.7rem; color: var(--muted); margin-top: 4px; font-style: italic; }

/* Trend Arrow */
.trend-badge { display: inline-flex; align-items: center; gap: 2px; font-size: 0.65rem; padding: 1px 6px; border-radius: 4px; margin-left: 6px; font-family: var(--mono); font-weight: 600; white-space: nowrap; vertical-align: middle; }

.trend-up { background: rgba(63,185,80,0.15); color: var(--green); }

.trend-down { background: rgba(248,81,73,0.15); color: var(--red); }

.trend-flat { background: rgba(139,148,158,0.10); color: var(--muted); }

.trend-badge .arrow { font-size: 0.6rem; }

/* vs Pitcher */
.vs-pitcher { font-size: 0.72rem; color: var(--muted); margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--border); }

.vs-pitcher strong { color: var(--text); font-weight: 500; }

.vs-pitcher .no-history { font-style: italic; }

.vs-pitcher.ownage { border: 1px solid rgba(255, 193, 7, 0.6); border-radius: 6px; padding: 6px; background: rgba(255, 193, 7, 0.05); }

.ownage-badge { font-size: 0.65rem; color: #ffc107; margin-left: 6px; }

/* Substitution badges */
.sub-badge { display: flex; width: fit-content; align-items: center; font-size: 0.6rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; margin-top: 4px; font-family: var(--mono); letter-spacing: 0.3px; white-space: nowrap; }
.sub-out { background: rgba(219,109,40,0.15); color: var(--orange); border: 1px solid rgba(219,109,40,0.35); }
.sub-in  { background: rgba(219,109,40,0.15); color: var(--orange); border: 1px solid rgba(219,109,40,0.35); }
.player-card.subbed-out { opacity: 0.45; filter: grayscale(0.35); }

.enrichment-loading { font-size: 0.68rem; color: var(--muted); opacity: 0.5; margin-top: 4px; }

/* Pitcher Last Starts */
.last-starts { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }

.last-starts-label { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }

.start-row { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 0.75rem; color: var(--muted); line-height: 1.6; padding: 2px 0; }

.start-row .sr-date { color: var(--text); font-weight: 500; min-width: 42px; font-family: var(--mono); font-size: 0.72rem; }

.start-row .sr-opp { color: var(--muted); min-width: 50px; }

.start-row .sr-stat { font-family: var(--mono); font-size: 0.72rem; }

.start-row .sr-stat.sr-k { color: var(--blue); font-weight: 600; }

.start-row .sr-yr { font-size: 0.62rem; color: var(--muted); opacity: 0.6; }

/* Legend */
.legend { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 6px 12px; margin-bottom: 16px; font-size: 0.68rem; color: var(--muted); }

.legend-item { display: inline-flex; align-items: center; gap: 4px; }

.legend-crown-clickable { cursor: pointer; transition: transform 0.15s; }

.legend-crown-clickable:hover { transform: scale(1.2); }

.legend-item-clickable { cursor: pointer; transition: all 0.15s; padding: 2px 4px; border-radius: 4px; }

.legend-item-clickable:hover { background: rgba(255, 193, 7, 0.1); }

.loading { text-align: center; padding: 60px 20px; }

.spinner { display: inline-block; width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.8s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

.loading-text { color: var(--muted); margin-top: 12px; font-size: 0.9rem; }

.error-msg { background: rgba(248,81,73,0.1); border: 1px solid var(--red); color: var(--red); padding: 12px 16px; border-radius: 8px; font-size: 0.85rem; margin: 12px 0; }

footer { text-align: center; padding: 20px; color: var(--muted); font-size: 0.75rem; border-top: 1px solid var(--border); margin-top: 40px; }

/* Saved List Tiles Row */
.saved-list-bar { background: var(--bg); border-bottom: 1px solid var(--border); padding: 8px 16px 10px; overflow-x: auto; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-start; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--border) transparent; display: none; }

.saved-list-tiles { display: inline-flex; gap: 8px; }

.saved-list-tile { display: inline-flex; flex-direction: column; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; transition: all 0.15s; min-width: 110px; text-align: left; flex-shrink: 0; position: relative; }

.saved-list-tile:hover { border-color: var(--blue); background: var(--surface2); }

.saved-list-tile.active { border-color: #1a3a5c; background: rgba(26,58,92,0.15); box-shadow: 0 0 0 1px #1a3a5c; }

.saved-list-tile .slt-name { font-size: 0.75rem; font-weight: 700; color: var(--muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }

.saved-list-tile .slt-count { font-size: 0.6rem; color: var(--muted); margin-top: 2px; font-family: var(--mono); }

.saved-list-tile .slt-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; gap: 8px; }

.saved-list-tile .slt-saved-time { font-size: 0.55rem; color: var(--muted); font-family: var(--mono); }

.saved-list-tile .slt-expires { font-size: 0.55rem; color: var(--blue); font-family: var(--mono); font-weight: 600; }


/* Watch List View */
.watch-list-view { display: none; }

.watch-list-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }

@media (max-width: 480px) {
  #savedListView .watch-list-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  #savedListHeaderBtns { gap: 6px; flex-wrap: wrap; }
  #savedListView .watch-list-header .watch-list-btn { font-size: 0.7rem; padding: 5px 10px; margin-right: 0; }
}

.watch-list-title { font-size: 1.5rem; font-weight: 700; color: var(--text); }

.game-group { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }

.game-group-header { font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.game-group-time { font-size: 0.75rem; color: var(--muted); font-family: var(--mono); }

.team-subheader { font-size: 0.68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; padding: 4px 0 6px; margin-top: 10px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.team-subheader:first-of-type { margin-top: 0; }

.watch-list-player { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 10px; transition: border-color 0.2s; }

@media (hover: hover) { .watch-list-player:hover { border-color: var(--blue); } }

.watch-list-player.selected { border-color: var(--blue); background: rgba(59, 130, 246, 0.1); }

.watch-list-player.selectable { cursor: pointer; }


.watch-list-player.has-highlights { border-left: 3px solid var(--red); }

.watch-list-player-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }

.watch-list-player-info { flex: 1; }

.watch-list-player-name { font-weight: 600; font-size: 0.9rem; color: var(--text); }

.watch-list-player-details { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }

.watch-list-stats { font-size: 0.72rem; margin-top: 6px; }

.remove-player-btn { background: none; border: none; color: var(--red); cursor: pointer; padding: 4px; border-radius: 4px; transition: background 0.15s; }

.remove-player-btn:hover { background: rgba(248,81,73,0.1); }

.empty-watch-list { text-align: center; padding: 60px 20px; color: var(--muted); }

.empty-watch-list h3 { font-size: 1.2rem; color: var(--text); margin-bottom: 8px; }

/* Selectable saved list cards */
.watch-list-player.selectable { cursor: pointer; }

@media (hover: hover) { .watch-list-player.selectable:hover { border-color: var(--blue); background: rgba(6, 183, 200, 0.05); } }

.watch-list-player.selected { border: 2px solid var(--green); background: rgba(63, 185, 80, 0.1); }

.watch-list-player.selected .watch-list-player-name::before { content: "\2713  "; color: var(--green); font-weight: bold; }

/* LAST 3 Game Log Toggle */
.last3-toggle { font-family: var(--mono); font-size: 0.65rem; font-weight: 600; color: var(--muted); background: rgba(139,148,158,0.08); border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; cursor: pointer; transition: all 0.15s; }
@media (hover: hover) { .last3-toggle:hover { background: rgba(139,148,158,0.15); } }
.last3-toggle.active { background: rgba(139,148,158,0.15); }
.last3-content { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 4px; }
.last3-pill { display: flex; align-items: center; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; }
.last3-pill-date { font-family: var(--font); font-weight: 500; font-size: 0.72rem; min-width: 72px; padding-right: 8px; border-right: 1px solid var(--border); margin-right: 8px; color: var(--text); font-variant-numeric: tabular-nums; }
.last3-pill-stats { display: flex; gap: 4px; flex-wrap: wrap; }
.stat-badge { font-family: var(--font); font-weight: 500; font-size: 0.68rem; padding: 1px 5px; border-radius: 4px; background: rgba(48,54,61,0.5); color: var(--muted); border: 1px solid transparent; font-variant-numeric: tabular-nums; }
.stat-badge.lit { background: rgba(63,185,80,0.15); color: var(--green); border-color: rgba(63,185,80,0.3); }
.stat-badge.special { background: rgba(6,183,200,0.15); color: var(--blue); border-color: rgba(6,183,200,0.3); }

/* Privacy Policy Modal */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000; justify-content: center; align-items: center; padding: 20px; }
.modal-overlay.visible { display: flex; }
.modal-content { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; max-width: 640px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 32px; position: relative; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.modal-content::-webkit-scrollbar { width: 6px; }
.modal-content::-webkit-scrollbar-track { background: transparent; }
.modal-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; color: var(--muted); font-size: 1.4rem; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: all 0.15s; line-height: 1; }
.modal-close:hover { color: var(--text); background: var(--surface2); }
.modal-content h2 { font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: 16px; }
.modal-content h3 { font-size: 0.9rem; font-weight: 600; color: var(--text); margin: 16px 0 6px; }
.modal-content p, .modal-content li { font-size: 0.82rem; color: var(--muted); line-height: 1.65; }
.modal-content ul { padding-left: 20px; margin: 6px 0; }
.modal-content li { margin-bottom: 4px; }
.modal-content .policy-date { font-size: 0.72rem; color: var(--muted); opacity: 0.6; margin-top: 20px; }
.footer-link { color: var(--muted); text-decoration: none; transition: color 0.15s; cursor: pointer; }
.footer-link:hover { color: var(--blue); }
/* ===== AUTH UI (supabase-js loaded via script tag below) ===== */
.auth-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 6px 14px; border-radius: 6px; font-size: 0.78rem; cursor: pointer; font-family: inherit; transition: border-color 0.15s, color 0.15s; white-space: nowrap; }
.auth-btn:hover { border-color: var(--blue); color: var(--blue); }
.auth-signout { background: transparent; border: none; color: var(--muted); font-size: 0.68rem; cursor: pointer; font-family: inherit; padding: 0; transition: color 0.15s; text-decoration: underline; text-underline-offset: 2px; }
.auth-signout:hover { color: #f85149; }
.auth-user-area { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.auth-dot { display: none; color: var(--muted); font-size: 0.65rem; line-height: 1; }
@media (max-width: 600px) {
  .auth-user-area { flex-direction: row; align-items: center; gap: 6px; }
  .auth-dot { display: inline; }
}
.auth-user-email { font-size: 0.7rem; color: var(--blue); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
.auth-username { font-size: 0.7rem; color: var(--blue); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
.auth-username-btn { background: none; border: none; font-family: var(--mono); color: var(--blue); cursor: pointer; font-size: 0.7rem; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: transparent; transition: text-decoration-color 0.15s; }
.auth-username-btn:hover { text-decoration-color: var(--blue); }
.settings-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 2000; align-items: center; justify-content: center; }
.settings-modal-overlay.active { display: flex; }
.auth-field-hint { font-size: 0.65rem; margin-top: 3px; min-height: 14px; }
.auth-field-hint.error { color: #f85149; }
.auth-field-hint.success { color: #3fb950; }
.auth-edit-input { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: 0.7rem; padding: 2px 6px; width: 110px; font-family: var(--mono); outline: none; }
.auth-edit-input:focus { border-color: var(--blue); }
.auth-edit-input.invalid { border-color: #f85149; }
.auth-edit-save { background: none; border: none; color: #3fb950; cursor: pointer; font-size: 0.8rem; padding: 0 3px; }
.auth-edit-save:disabled { opacity: 0.4; cursor: default; }
.auth-edit-cancel { background: none; border: none; color: #f85149; cursor: pointer; font-size: 0.8rem; padding: 0 3px; }
.auth-edit-popup { position: absolute; top: 100%; right: 0; margin-top: 4px; background: var(--surface); border: 1px solid #f85149; border-radius: 4px; padding: 4px 8px; font-size: 0.65rem; color: #f85149; white-space: nowrap; z-index: 100; }
.auth-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 2000; align-items: center; justify-content: center; }
.auth-modal-overlay.active { display: flex; }
.auth-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 28px; width: 100%; max-width: 360px; margin: 20px; position: relative; box-shadow: 0 24px 64px rgba(0,0,0,0.6); }
.auth-close { position: absolute; top: 14px; right: 16px; background: none; border: none; color: var(--muted); font-size: 1.3rem; cursor: pointer; line-height: 1; padding: 0; transition: color 0.15s; }
.auth-close:hover { color: var(--text); }
.auth-modal-title { font-size: 0.95rem; font-weight: 600; color: var(--text); margin: 0 0 20px; }
.auth-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.auth-tab { padding: 8px 16px; font-size: 0.83rem; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; border-top: none; border-left: none; border-right: none; font-family: inherit; transition: color 0.15s; }
.auth-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-size: 0.72rem; color: var(--muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.auth-field input { width: 100%; padding: 9px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 0.9rem; font-family: inherit; box-sizing: border-box; outline: none; transition: border-color 0.15s; }
.auth-field input:focus { border-color: var(--blue); }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 40px; }
.pw-eye-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--muted); padding: 4px; display: flex; align-items: center; line-height: 1; transition: color 0.15s; }
.pw-eye-btn:hover { color: var(--text); }
.auth-submit { width: 100%; padding: 10px; background: var(--blue); color: #000; border: none; border-radius: 6px; font-size: 0.88rem; font-weight: 700; cursor: pointer; font-family: inherit; margin-top: 6px; transition: opacity 0.15s; }
.auth-submit:hover { opacity: 0.85; }
.auth-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-msg { font-size: 0.78rem; margin-top: 10px; min-height: 18px; }
.auth-msg.error { color: #f85149; }
.auth-msg.success { color: #3fb950; }

/* ── Field Notes ── */
.fn-wrapper { margin-bottom: 14px; }
.fn-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fn-label { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.fn-cancel-btn { display: none; background: none; border: none; color: var(--muted); font-size: 12px; font-family: var(--font); cursor: pointer; padding: 2px 4px; border-radius: 4px; transition: color 0.15s; }
.fn-cancel-btn:hover { color: var(--text); }
.fn-wrapper.editing .fn-cancel-btn { display: block; }
.fn-box { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; transition: border-color 0.2s; }
.fn-wrapper.editing .fn-box { border-color: var(--blue); }
.fn-body { position: relative; padding: 13px 14px 38px 14px; min-height: 72px; cursor: text; transition: background 0.15s; }
.fn-body:hover { background: rgba(6,183,200,0.08); }
.fn-wrapper.editing .fn-body { display: none; }
.fn-placeholder { font-size: 12px; color: var(--muted); transition: color 0.15s; user-select: none; }
.fn-body:hover .fn-placeholder { color: var(--blue); }
.fn-text { color: var(--muted); font-size: 13px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.fn-edit-btn { position: absolute; bottom: 9px; left: 11px; background: none; border: none; cursor: pointer; color: var(--muted); padding: 3px 6px; border-radius: 4px; display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; font-family: var(--font); transition: color 0.15s, background 0.15s; }
.fn-edit-btn:hover, .fn-body:hover .fn-edit-btn { color: var(--blue); background: rgba(6,183,200,0.12); }
.fn-wrapper.editing .fn-edit-btn { display: none; }
.fn-saved { position: absolute; top: 9px; right: 14px; font-size: 11px; font-weight: 600; color: var(--green); display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.fn-saved.visible { opacity: 1; }
.fn-textarea { width: 100%; min-height: 90px; background: var(--surface2); border: none; color: var(--text); font-family: var(--font); font-size: 13px; line-height: 1.65; padding: 12px 14px; resize: vertical; outline: none; display: none; }
.fn-wrapper.editing .fn-textarea { display: block; }
.fn-actions { display: none; align-items: center; justify-content: flex-start; padding: 9px 14px; border-top: 1px solid var(--border); background: var(--surface); }
.fn-wrapper.editing .fn-actions { display: flex; }
.fn-save-btn { background: var(--blue); color: #000; border: none; border-radius: 6px; padding: 5px 16px; font-size: 13px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: opacity 0.15s; }
.fn-save-btn:hover { opacity: 0.85; }

/* Saved list refresh button spin animation */
.sl-refresh-icon { display: inline-block; }
.sl-refresh-spinning { animation: sl-icon-spin 0.7s linear infinite; }
@keyframes sl-icon-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ===== SHARE MODAL ===== */
.share-modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; width: 100%; max-width: 420px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.share-section { margin-bottom: 4px; }
.share-section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.share-user-row { display: flex; gap: 8px; align-items: center; }
.share-input { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-family: var(--font); font-size: 14px; padding: 8px 12px; outline: none; transition: border-color 0.2s; }
.share-input:focus { border-color: var(--blue); }
.share-send-btn { white-space: nowrap; background: var(--blue); color: #000; border-color: var(--blue); }
.share-send-btn:hover { opacity: 0.85; }
.share-msg { font-size: 12px; min-height: 20px; margin-top: 7px; color: var(--muted); }
.share-msg.success { color: var(--green); }
.share-msg.error { color: var(--red); }
.share-or-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--muted); font-size: 12px; }
.share-or-divider::before, .share-or-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.share-link-row { display: flex; gap: 8px; align-items: center; }
.share-link-display { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-family: var(--mono); font-size: 11px; padding: 8px 10px; outline: none; cursor: text; }

/* ===== SHARED WITH ME SECTION ===== */
.shared-section-divider { border: none; border-top: 1px solid var(--border); margin: 14px 0 10px; }
.shared-section-header { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; padding: 0 2px; }
.shared-list-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.shared-list-tile:hover { border-color: var(--blue); background: rgba(6,183,200,0.06); }
.shared-list-tile.active { border-color: var(--blue); background: rgba(6,183,200,0.1); }
.slt-shared-by { font-size: 10px; color: var(--muted); margin-top: 4px; }

/* ===== SHARED BY BADGE (in header) ===== */
.shared-by-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--blue); background: rgba(6,183,200,0.12); border: 1px solid rgba(6,183,200,0.25); border-radius: 20px; padding: 4px 12px; font-weight: 500; }

/* ===== SHARE HISTORY ===== */
.share-history-label { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.share-history-list { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.share-history-chip { display: inline-flex; align-items: center; gap: 5px; }
.shc-name { color: var(--blue); cursor: pointer; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.shc-name:hover { color: var(--text); }
.shc-remove { background: none; border: none; color: var(--muted); font-size: 11px; cursor: pointer; padding: 0 2px; line-height: 1; transition: color 0.15s; }
.shc-remove:hover { color: var(--red); }