Digital Defense — Email Safety Dashboard
   Brand: #041C2C (dark blue), #EAAA00 (yellow),
          #7D9BC1 (light blue), #E01933 (red/alert),
          #888B8D (graphite), #D0D0CE (cool gray),
          #FFFFFF (white)
   Typography: PP Fragment Sans (fallback: system sans)

@font-face {
  font-family: 'PP Fragment Sans';
  src: url('/fonts/PPFragment-SansLight.otf') format('opentype');
  src: url('/fonts/PPFragment-SansLight.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Fragment Sans';
  src: url('/fonts/PPFragment-SansRegular.otf') format('opentype');
  src: url('/fonts/PPFragment-SansRegular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Fragment Sans';
  src: url('/fonts/PPFragment-SansExtraBold.otf') format('opentype');
  src: url('/fonts/PPFragment-SansExtraBold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --dd-dark-blue: #041C2C;
  --dd-yellow: #EAAA00;
  --dd-light-blue: #7D9BC1;
  --dd-red: #E01933;
  --dd-graphite: #888B8D;
  --dd-cool-gray: #D0D0CE;
  --dd-white: #FFFFFF;
  --font-sans: 'PP Fragment Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(4, 28, 44, 0.08);
  --shadow-lg: 0 4px 12px rgba(4, 28, 44, 0.12);
}

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

body {
  font-family: var(--font-sans);
  background: var(--dd-cool-gray);
  color: var(--dd-dark-blue);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* --- Header --- */
.header {
  background: var(--dd-dark-blue); color: var(--dd-white);
  padding: 0 24px; position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-lg);
}
.header-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; height: 64px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-name { font-size: 18px; font-weight: 700; color: var(--dd-white); letter-spacing: 0.02em; }
.brand-sep { font-size: 18px; color: var(--dd-light-blue); font-weight: 300; }
.brand-sub-group { display: flex; flex-direction: column; }
.brand-sub { font-size: 14px; color: var(--dd-light-blue); letter-spacing: 0.02em; }
.brand-powered { font-size: 10px; color: var(--dd-light-blue); font-style: italic; opacity: 0.8; letter-spacing: 0.02em; }
.header-meta { display: flex; align-items: center; gap: 16px; }
.refresh-info { display: flex; flex-direction: column; align-items: flex-end; }
.last-updated { font-size: 12px; color: var(--dd-graphite); }
.refresh-cadence { font-size: 10px; color: var(--dd-light-blue); letter-spacing: 0.03em; }
.btn-refresh {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--dd-light-blue);
  color: var(--dd-white); padding: 6px 14px; border-radius: var(--radius);
  font-size: 13px; font-family: var(--font-sans); cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.btn-refresh:hover { background: rgba(125, 155, 193, 0.15); border-color: var(--dd-yellow); }
.btn-refresh:focus-visible { outline: 2px solid var(--dd-yellow); outline-offset: 2px; }

/* --- Main nav tabs --- */
.main-nav { background: var(--dd-white); border-bottom: 2px solid var(--dd-cool-gray); position: sticky; top: 64px; z-index: 90; }
.nav-inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 0; padding: 0 24px; align-items: center; }
.nav-avatar-wrap { display: flex; align-items: center; }
.nav-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: none; }
body.dark-mode .nav-avatar { border: none; }
.nav-profile-area { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-profile-btn {
  padding: 8px 16px; border: none; border-radius: var(--radius);
  background: var(--dd-dark-blue); color: var(--dd-white);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
}
.nav-profile-btn:hover { background: #0a2e45; transform: translateY(-1px); }
.nav-profile-btn:focus-visible { outline: 2px solid var(--dd-yellow); outline-offset: 2px; }
.nav-profile-btn[aria-pressed="true"] { background: var(--dd-yellow); color: var(--dd-dark-blue); }
body.dark-mode .nav-profile-btn { background: #2a2a4a; color: #e8e8f0; }
body.dark-mode .nav-profile-btn:hover { background: #3a3a5a; }
body.dark-mode .nav-profile-btn[aria-pressed="true"] { background: var(--dd-yellow); color: var(--dd-dark-blue); }
.nav-tab {
  padding: 14px 20px; border: none; background: transparent;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  color: var(--dd-graphite); cursor: pointer;
  border-bottom: 3px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.nav-tab.active { color: var(--dd-dark-blue); border-bottom-color: var(--dd-yellow); }
.nav-tab:hover:not(.active) { color: var(--dd-dark-blue); }
.nav-tab:focus-visible { outline: 2px solid var(--dd-yellow); outline-offset: -2px; }

/* --- Main --- */
.main { max-width: 1200px; margin: 0 auto; padding: 24px; }

/* --- Stats bar --- */
.stats-bar, .team-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stats-bar.hidden { display: none; }
.stat-card {
  background: linear-gradient(180deg, var(--dd-white) 0%, #f8f8f6 100%);
  border-radius: var(--radius); padding: 20px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
  border-top: 3px solid var(--dd-yellow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 8px 20px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.8);
}
.stat-value { display: block; font-size: 32px; font-weight: 700; color: var(--dd-dark-blue); line-height: 1.2; }
.stat-label { display: block; font-size: 13px; color: var(--dd-graphite); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
/* Core My Performance tiles (Email Safety Score, Bonus points, Emails reported): bold + wider tracking for a premium/sporty feel */
.perf-only-card .stat-label { font-weight: 700; letter-spacing: 0.12em; }


/* --- Profile tile --- */
.profile-name { display: block; font-size: 26px; font-weight: 700; color: var(--dd-dark-blue); line-height: 1.3; }
.profile-detail { display: block; font-size: 12px; color: var(--dd-graphite); line-height: 1.4; }

/* --- Collapsible sections --- */
.collapsible .section-toggle {
  display: flex; align-items: center; width: 100%;
  background: none; border: none; padding: 0; cursor: pointer;
  text-align: left; font-family: var(--font-sans);
}
.collapsible .section-toggle h2 { margin: 0; flex: 1; }
.toggle-arrow {
  display: inline-block; font-size: 14px; color: var(--dd-graphite);
  transition: transform 0.2s; margin-left: 8px;
}
.collapsible:not(.collapsed) .toggle-arrow { transform: rotate(90deg); }
.collapsible .section-body {
  overflow: hidden; transition: max-height 0.3s ease, opacity 0.2s ease;
  max-height: 6000px; opacity: 1; margin-top: 12px;
}
.collapsible.collapsed .section-body { max-height: 0; opacity: 0; margin-top: 0; }

/* --- My Performance --- */
.perf-section {
  background: linear-gradient(180deg, var(--dd-white) 0%, #f8f8f6 100%);
  border-radius: var(--radius); padding: 20px 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
  margin-bottom: 16px;
}
.section-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dd-dark-blue); margin-bottom: 12px; }
.progress-bar-wrap { height: 12px; background: var(--dd-cool-gray); border-radius: 6px; overflow: hidden; margin-bottom: 6px; }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--dd-light-blue), var(--dd-yellow)); border-radius: 6px; transition: width 0.5s ease; width: 0; }
.progress-label { font-size: 13px; color: var(--dd-graphite); }
.no-badges { font-size: 13px; color: var(--dd-graphite); font-style: italic; }

/* --- Leaderboard sub-toggle --- */
.view-toggle { display: flex; gap: 0; margin-bottom: 16px; background: var(--dd-white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); width: fit-content; }
.toggle-btn {
  padding: 10px 24px; border: none; background: transparent;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  color: var(--dd-graphite); cursor: pointer; transition: background 0.2s, color 0.2s;
}
.toggle-btn.active { background: var(--dd-dark-blue); color: var(--dd-white); }
.toggle-btn:hover:not(.active) { background: var(--dd-cool-gray); color: var(--dd-dark-blue); }
.toggle-btn:focus-visible { outline: 2px solid var(--dd-yellow); outline-offset: -2px; }

/* --- Controls --- */
.controls { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.search-wrap { position: relative; flex: 1; min-width: 240px; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); }
.search-wrap input {
  width: 100%; padding: 10px 12px 10px 36px;
  border: 1px solid var(--dd-cool-gray); border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 14px; background: var(--dd-white);
  transition: border-color 0.2s;
}
.search-wrap input:focus { outline: none; border-color: var(--dd-light-blue); box-shadow: 0 0 0 3px rgba(125,155,193,0.2); }
select {
  padding: 10px 14px; border: 1px solid var(--dd-cool-gray); border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 14px; background: var(--dd-white);
  color: var(--dd-dark-blue); cursor: pointer;
}
select:focus { outline: none; border-color: var(--dd-light-blue); box-shadow: 0 0 0 3px rgba(125,155,193,0.2); }

/* --- Admin toolbar --- */
.admin-toolbar { display: flex; gap: 12px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
.btn-export {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--dd-dark-blue); color: var(--dd-white); border: none;
  padding: 10px 18px; border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background 0.2s;
}
.btn-export:hover { background: #0a2e45; }
.btn-export:focus-visible { outline: 2px solid var(--dd-yellow); outline-offset: 2px; }

/* --- Table --- */
.table-wrap { background: var(--dd-white); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; }
.leaderboard-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.leaderboard-table thead { background: var(--dd-dark-blue); color: var(--dd-white); }
.leaderboard-table th { padding: 12px 16px; text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.leaderboard-table td { padding: 12px 16px; border-bottom: 1px solid var(--dd-cool-gray); vertical-align: middle; }
.leaderboard-table tbody tr:hover { background: rgba(125, 155, 193, 0.06); }
.leaderboard-table tbody tr.top-three { background: rgba(234, 170, 0, 0.04); }
.leaderboard-table tbody tr.highlight-me { background: rgba(234, 170, 0, 0.10); }
.col-rank { width: 48px; text-align: center; }
.col-rank, th.col-rank { text-align: center; }
.col-points, .col-reported, .col-clicked, .col-creds { text-align: right; }
th.col-points, th.col-reported, th.col-clicked, th.col-creds { text-align: right; }

/* --- Rank badges --- */
.rank-num { font-weight: 700; text-align: center; display: block; }
.rank-num.gold { color: #C5960C; }
.rank-num.silver { color: var(--dd-graphite); }
.rank-num.bronze { color: #8B5E3C; }

/* --- Participant cell --- */
.participant-name { font-weight: 600; }
.participant-id { font-size: 12px; color: var(--dd-graphite); display: block; }

/* --- Tier badges --- */
.tier-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; position: relative; overflow: hidden; }
.leaderboard-table .tier-badge::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%; border-radius: 12px;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.1) 30%, rgba(255,255,255,0.4) 48%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.4) 52%, rgba(255,255,255,0.1) 70%, transparent 100%);
  animation: tierSweep 4s linear infinite;
  pointer-events: none;
}
@keyframes tierSweep {
  0% { left: -100%; }
  100% { left: 100%; }
}
.tier-champion { background: linear-gradient(135deg, rgba(234,170,0,0.85) 0%, rgba(234,170,0,0.65) 100%); color: var(--dd-dark-blue); backdrop-filter: blur(4px); border: 1px solid rgba(234,170,0,0.4); box-shadow: 0 1px 4px rgba(234,170,0,0.2); }
.tier-defender { background: linear-gradient(135deg, rgba(125,155,193,0.7) 0%, rgba(125,155,193,0.5) 100%); color: var(--dd-dark-blue); backdrop-filter: blur(4px); border: 1px solid rgba(125,155,193,0.4); box-shadow: 0 1px 4px rgba(125,155,193,0.2); }
.tier-fighter { background: linear-gradient(135deg, rgba(244,152,33,0.5) 0%, rgba(244,152,33,0.35) 100%); color: var(--dd-dark-blue); backdrop-filter: blur(4px); border: 1px solid rgba(244,152,33,0.4); box-shadow: 0 1px 4px rgba(244,152,33,0.15); }
.tier-participant { background: linear-gradient(135deg, rgba(208,208,206,0.4) 0%, rgba(208,208,206,0.25) 100%); color: var(--dd-graphite); backdrop-filter: blur(4px); border: 1px solid rgba(208,208,206,0.5); }
body.dark-mode .tier-champion { background: linear-gradient(135deg, rgba(234,170,0,0.6) 0%, rgba(180,130,0,0.4) 100%); border-color: rgba(234,170,0,0.5); color: #fff; }
body.dark-mode .tier-defender { background: linear-gradient(135deg, rgba(125,155,193,0.5) 0%, rgba(100,130,170,0.35) 100%); border-color: rgba(125,155,193,0.4); color: #fff; }
body.dark-mode .tier-fighter { background: linear-gradient(135deg, rgba(244,152,33,0.4) 0%, rgba(200,120,20,0.3) 100%); border-color: rgba(244,152,33,0.35); color: #e8e8f0; }
body.dark-mode .tier-participant { background: linear-gradient(135deg, rgba(60,60,90,0.5) 0%, rgba(40,40,70,0.4) 100%); border-color: rgba(100,100,140,0.3); color: #aaaabc; }

/* --- Badge pills --- */
.badge-list { display: flex; gap: 4px; flex-wrap: wrap; }
.badge-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; background: rgba(4, 28, 44, 0.06); color: var(--dd-dark-blue); white-space: nowrap; }
.badge-pill.golden { background: rgba(234, 170, 0, 0.15); color: #8B6914; }

/* --- Badge Earned (with custom image) --- */
.badge-earned-item { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 8px; background: none; border: none; }
.badge-earned-img { width: 36px; height: 36px; object-fit: contain; }
.badge-earned-placeholder { display: flex; align-items: center; justify-content: center; font-size: 24px; background: rgba(234,170,0,0.1); border-radius: 50%; }
.badge-earned-label { font-size: 10px; font-weight: 600; color: #8B6914; text-align: center; white-space: nowrap; }
body.dark-mode .badge-earned-item { background: none; border-color: transparent; }
body.dark-mode .badge-earned-label { color: var(--dd-yellow); }

/* --- Points / Division bar --- */
.points-value { font-weight: 700; font-size: 15px; }
.division-bar-wrap { display: flex; align-items: center; gap: 8px; }
.division-bar { height: 8px; border-radius: 4px; background: var(--dd-yellow); transition: width 0.4s ease; }

/* --- Multi-tier progress bar --- */
.tier-progress { margin-bottom: 8px; }
.tier-track {
  position: relative; height: 44px;
  background: linear-gradient(180deg, #2a2a3a 0%, #1a1a28 60%, #0d0d15 100%); border-radius: 22px;
  overflow: visible; display: flex;
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.5), inset 0 -2px 4px rgba(255,255,255,0.05), 0 4px 12px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.08);
}
.tier-zone {
  position: absolute; top: 3px; height: calc(100% - 6px);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, filter 0.3s ease;
  z-index: 1; cursor: pointer; border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -2px 3px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.2);
}
.tier-zone:hover { z-index: 2; filter: brightness(1.1); }
.tier-zone-fighter { background: linear-gradient(180deg, #fbc46e 0%, #f7a838 30%, #f49821 70%, #c97d15 100%); }
.tier-zone-fighter:hover { box-shadow: 0 0 20px rgba(244, 152, 33, 0.8), inset 0 1px 1px rgba(255,255,255,0.4); }
.tier-zone-defender { background: linear-gradient(180deg, #b8cfe8 0%, #93afd1 30%, #6a89b1 70%, #4a6a94 100%); }
.tier-zone-defender:hover { box-shadow: 0 0 20px rgba(125, 155, 193, 0.8), inset 0 1px 1px rgba(255,255,255,0.4); }
.tier-zone-champion { background: linear-gradient(180deg, #ffe066 0%, #f0be2a 25%, #d49800 60%, #b07e00 100%); }
.tier-zone-champion:hover { box-shadow: 0 0 24px rgba(234, 170, 0, 0.9), 0 0 48px rgba(234, 170, 0, 0.3), inset 0 1px 1px rgba(255,255,255,0.5); }
.tier-zone-participant { background: linear-gradient(180deg, #e8e8e6 0%, #d0d0ce 30%, #b8b8b4 70%, #a0a09c 100%); }
.tier-zone-participant:hover { box-shadow: 0 0 14px rgba(200, 200, 196, 0.6), inset 0 1px 1px rgba(255,255,255,0.3); }
.tier-zone:first-child { border-radius: 19px 4px 4px 19px; }
.tier-zone:nth-child(4) { border-radius: 4px 19px 19px 4px; }
.tier-marker {
  position: absolute; top: -8px; width: 8px; height: 60px;
  background: linear-gradient(180deg, #ffffff 0%, #041C2C 40%, #041C2C 100%); border-radius: 4px;
  transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 3;
  box-shadow: 0 0 0 3px var(--dd-white), 0 0 12px rgba(234, 170, 0, 0.6), 0 4px 8px rgba(0,0,0,0.3);
  animation: markerBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}
.tier-marker-score {
  position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #041C2C 0%, #0a3050 100%); color: var(--dd-yellow);
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 12px;
  white-space: nowrap; box-shadow: 0 3px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1); border: 1px solid rgba(234, 170, 0, 0.3);
  z-index: 4;
}
@keyframes markerBounce {
  0% { transform: translateY(-20px); opacity: 0; }
  50% { transform: translateY(4px); opacity: 1; }
  70% { transform: translateY(-3px); }
  85% { transform: translateY(1px); }
  100% { transform: translateY(0); opacity: 1; }
}
.tier-marker-score::after {
  content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid var(--dd-dark-blue);
}
.tier-labels {
  position: relative; height: 44px; margin-top: 6px; margin-bottom: 8px;
}
.tier-label-zone {
  position: absolute; top: 0;
  text-align: center; font-size: 11px; font-weight: 600;
  color: var(--dd-dark-blue); line-height: 1.3;
}
.tier-label-zone small {
  font-weight: 400; color: var(--dd-graphite); font-size: 10px; white-space: nowrap;
}

/* --- Tier legend --- */
.tier-legend { margin-top: 32px; background: var(--dd-white); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow); }
.legend-title { font-size: 14px; font-weight: 700; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dd-dark-blue); }
.legend-items { display: flex; gap: 24px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 8px; }
.legend-desc { font-size: 13px; color: var(--dd-graphite); }

/* --- Behavior Change Comparison Metric --- */
.comparison-metric-filters { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 16px; }
.comparison-metric-filters .filter-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dd-graphite); }
.comparison-metric-filters input[type="date"] { padding: 4px 8px; border: 1px solid var(--dd-cool-gray); border-radius: 4px; font-size: 13px; background: var(--bg); color: var(--text); }
.comparison-metric-filters .checkbox-inline { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; margin-left: 4px; }
.comparison-metric-card { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; padding: 24px; background: rgba(125, 155, 193, 0.06); border-radius: 8px; border: 1px solid var(--dd-cool-gray); }
.comparison-cohort { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cohort-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dd-graphite); }
.cohort-rate { font-size: 32px; font-weight: 700; color: var(--text); }
.cohort-rate-secondary { font-size: 28px; font-weight: 700; color: var(--dd-light-blue, #7D9BC1); }
.cohort-sublabel { font-size: 11px; color: var(--dd-graphite); margin-top: -2px; }
.cohort-count { font-size: 12px; color: var(--dd-graphite); margin-top: 8px; }
.diff-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dd-graphite); }
.diff-section-gap { margin-top: 12px; }
.comparison-difference { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 16px; background: var(--bg); border-radius: 8px; border: 1px solid var(--dd-cool-gray); }
.diff-arrow { font-size: 20px; }
.diff-arrow.positive { color: #2e7d32; }
.diff-arrow.negative { color: var(--dd-red); }
.diff-value { font-size: 24px; font-weight: 700; }
.diff-label { font-size: 11px; color: var(--dd-graphite); }
.comparison-metric-error { padding: 16px; text-align: center; color: var(--dd-graphite); font-size: 14px; background: rgba(125, 155, 193, 0.06); border-radius: 8px; border: 1px dashed var(--dd-cool-gray); }
.comparison-metric-note { font-size: 11px; color: var(--dd-graphite); margin-top: 8px; opacity: 0.7; }

/* --- Failure Context --- */
.failure-context-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.section-desc { font-size: 13px; color: var(--dd-graphite); margin-bottom: 12px; }

/* --- Geographic Detail Panel --- */
.geo-detail-panel {
  margin-top: 16px; background: rgba(125, 155, 193, 0.06);
  border: 1px solid rgba(125, 155, 193, 0.15); border-radius: var(--radius);
  padding: 16px;
}
.geo-detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.geo-detail-title { font-size: 14px; font-weight: 700; color: var(--dd-dark-blue); }
.geo-detail-close {
  background: none; border: none; font-size: 20px; cursor: pointer;
  color: var(--dd-graphite); padding: 0 4px; line-height: 1;
}
.geo-detail-close:hover { color: var(--dd-dark-blue); }
.geo-row-clickable { cursor: pointer; }
.geo-row-clickable:hover { background: rgba(234, 170, 0, 0.08); }

/* --- Dark Mode --- */
body.dark-mode { background: #0f0f1a; color: #e8e8f0; }
body.dark-mode .header { background: #0a0a18; }
body.dark-mode .main-nav { background: #141428; border-bottom-color: #2a2a4a; }
body.dark-mode .nav-tab { color: #9999aa; }
body.dark-mode .nav-tab:hover:not(.active) { color: #e8e8f0; }
body.dark-mode .nav-tab.active { color: #fff; border-bottom-color: var(--dd-yellow); }
body.dark-mode .stat-card,
body.dark-mode .perf-section,
body.dark-mode .admin-section {
  background: linear-gradient(180deg, #1e1e36 0%, #16162c 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
  border: 1px solid #2a2a4a;
}
body.dark-mode .stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 8px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}
body.dark-mode .stat-card { border-top: 3px solid var(--dd-yellow); }
body.dark-mode .stat-value { color: #ffffff; }
body.dark-mode .stat-label { color: #aaaabc; }
body.dark-mode .section-title { color: #e8e8f0; }
body.dark-mode .admin-section-title { color: #aaaabc; }
body.dark-mode .table-wrap { background: #1a1a30; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
body.dark-mode .leaderboard-table thead { background: #0a0a18; border-bottom: 2px solid var(--dd-yellow); }
body.dark-mode .leaderboard-table th { color: #ffffff; font-weight: 700; }
body.dark-mode .leaderboard-table td { border-bottom-color: #2a2a4a; color: #d0d0e0; }
body.dark-mode .leaderboard-table tbody tr:hover { background: rgba(234, 170, 0, 0.1); }
body.dark-mode .leaderboard-table tbody tr.top-three { background: rgba(234, 170, 0, 0.06); }
body.dark-mode .leaderboard-table tbody tr.highlight-me { background: rgba(234, 170, 0, 0.15); }
body.dark-mode .search-wrap input,
body.dark-mode select,
body.dark-mode .announcement-input,
body.dark-mode .feedback-comment,
body.dark-mode .admin-date-label input { background: #141428; color: #e8e8f0; border-color: #3a3a5a; }
body.dark-mode input[type="date"],
body.dark-mode input[type="datetime-local"],
body.dark-mode input[type="month"] { color: #000000; background: #e8e8f0; border-color: #3a3a5a; }
body.dark-mode .search-wrap input::placeholder,
body.dark-mode .announcement-input::placeholder,
body.dark-mode .feedback-comment::placeholder { color: #666680; }
body.dark-mode .toggle-btn { color: #ccccdd; }
body.dark-mode .toggle-btn:hover:not(.active) { background: #2a2a4a; color: #ffffff; }
body.dark-mode .toggle-btn.active { background: #0a0a18; color: #fff; }
body.dark-mode .view-toggle { background: #1a1a30; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
body.dark-mode .participant-name { color: #ffffff; }
body.dark-mode .participant-id { color: #8888aa; }
body.dark-mode .profile-name { color: #ffffff; }
body.dark-mode .profile-detail { color: #aaaabc; }
body.dark-mode .points-value { color: #ffffff; }
body.dark-mode .insight-tile {
  background: linear-gradient(180deg, #1e1e38 0%, #181830 100%);
  border-color: #2a2a4a;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
}
body.dark-mode .insight-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 8px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}
body.dark-mode .insight-value { color: #ffffff; }
body.dark-mode .insight-label { color: #ccccdd; }
body.dark-mode .insight-desc { color: #8888aa; }
body.dark-mode .risky-tile {
  background: linear-gradient(180deg, rgba(224, 25, 51, 0.12) 0%, rgba(224, 25, 51, 0.18) 100%);
  border-color: rgba(224, 25, 51, 0.25);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
}
body.dark-mode .risky-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 8px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}
body.dark-mode .risky-tile .stat-value { color: #ff6b6b; }
body.dark-mode .risky-tile .stat-label { color: #ccaaaa; }
body.dark-mode .badge-legend { border-top-color: #2a2a4a; }
body.dark-mode .legend-desc { color: #aaaabc; }
body.dark-mode .legend-subtitle { color: #9999aa; }
body.dark-mode .no-badges { color: #8888aa; }
body.dark-mode .tier-legend { background: #1a1a30; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
body.dark-mode .legend-title { color: #e8e8f0; }
body.dark-mode .tier-zone-participant { background: linear-gradient(180deg, #2a2a4a 0%, #1e1e38 100%); }
body.dark-mode .tier-zone-participant:hover { box-shadow: 0 0 14px rgba(42, 42, 74, 0.8); }
body.dark-mode .tier-zone-fighter { background: linear-gradient(180deg, #6b5a3e 0%, #544730 100%); }
body.dark-mode .tier-zone-fighter:hover { box-shadow: 0 0 14px rgba(107, 90, 62, 0.8); }
body.dark-mode .tier-zone-defender { background: linear-gradient(180deg, #4a6a8a 0%, #3a5a7a 100%); }
body.dark-mode .tier-zone-defender:hover { box-shadow: 0 0 14px rgba(74, 106, 138, 0.8); }
body.dark-mode .tier-zone-champion { background: linear-gradient(180deg, #c49500 0%, #a07800 100%); }
body.dark-mode .tier-zone-champion:hover { box-shadow: 0 0 14px rgba(196, 149, 0, 0.8); }
body.dark-mode .tier-track { box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.05); }
body.dark-mode .tier-marker { background: #e8e8f0; box-shadow: 0 0 0 2px #1a1a30, 0 2px 6px rgba(0,0,0,0.4); }
body.dark-mode .tier-marker-score { background: #e8e8f0; color: #0a0a18; }
body.dark-mode .tier-marker-score::after { border-top-color: #e8e8f0; }
body.dark-mode .tier-label-zone { color: #ccccdd; }
body.dark-mode .tier-label-zone small { color: #8888aa; }
body.dark-mode .progress-label { color: #aaaabc; }
body.dark-mode .score-rank-inline { color: #aaaabc; }
body.dark-mode .feedback-panel { background: #1a1a30; border-color: #2a2a4a; }
body.dark-mode .feedback-panel-title { color: #ffffff; }
body.dark-mode .feedback-reaction { border-color: #3a3a5a; background: #141428; }
body.dark-mode .feedback-reaction:hover { border-color: var(--dd-yellow); }
body.dark-mode .fwd-dropdown { background: #1a1a30; border-color: #2a2a4a; }
body.dark-mode .fwd-dropdown-header { color: #aaaabc; border-bottom-color: #2a2a4a; }
body.dark-mode .fwd-sim-row:hover { background: rgba(234, 170, 0, 0.08); }
body.dark-mode .fwd-sim-name { color: #d0d0e0; }
body.dark-mode .geo-detail-panel { background: #1a1a30; border-color: #2a2a4a; }
body.dark-mode .geo-detail-title { color: #ffffff; }
body.dark-mode .trend-pts { color: #e8e8f0; }
body.dark-mode .trend-label { color: #8888aa; }
body.dark-mode .trend-bar { box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
body.dark-mode .trend-bar::after { background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); }
body.dark-mode .trend-bar.positive { background: linear-gradient(180deg, #d4a820 0%, #b08a00 100%); }
body.dark-mode .trend-bar.negative { background: linear-gradient(180deg, #d03040 0%, #a01828 100%); }
body.dark-mode .trend-bar.neutral { background: linear-gradient(180deg, #3a3a5a 0%, #2a2a4a 100%); }
body.dark-mode .feedback-item.positive { background: rgba(234, 170, 0, 0.12); }
body.dark-mode .feedback-item.negative { background: rgba(224, 25, 51, 0.1); }
body.dark-mode .feedback-item.neutral { background: rgba(125, 155, 193, 0.1); }
body.dark-mode .feedback-text { color: #d0d0e0; }
body.dark-mode .resource-link { background: #1e1e38; border-color: #2a2a4a; color: #d0d0e0; }
body.dark-mode .resource-link:hover { background: #2a2a4a; }
body.dark-mode .resources-contact { border-top-color: #2a2a4a; color: #aaaabc; }
body.dark-mode .resource-email { color: var(--dd-yellow); border-bottom-color: var(--dd-yellow); }
body.dark-mode .admin-name-link { color: var(--dd-yellow); border-bottom-color: rgba(234, 170, 0, 0.4); }
body.dark-mode .page-btn { background: #1a1a30; color: #d0d0e0; border-color: #3a3a5a; }
body.dark-mode .page-btn:hover:not(:disabled) { border-color: var(--dd-yellow); }
body.dark-mode .page-info { color: #aaaabc; }
body.dark-mode .btn-export { background: #2a2a4a; color: #e8e8f0; }
body.dark-mode .btn-export:hover { background: #3a3a5a; }
body.dark-mode .btn-export-secondary { background: #1e3a5a; }
body.dark-mode .btn-section-export { color: #aaaabc; border-color: #3a3a5a; }
body.dark-mode .btn-section-export:hover { color: var(--dd-yellow); border-color: var(--dd-yellow); }
body.dark-mode .btn-find-me { background: #1a1a30; color: #d0d0e0; border-color: #3a3a5a; }
body.dark-mode .btn-find-me:hover { border-color: var(--dd-yellow); }
body.dark-mode .derby-toggle-text { color: #aaaabc; }
body.dark-mode .privacy-note { color: #8888aa; }
body.dark-mode .announcement-history-item { background: #1e1e38; border-color: #2a2a4a; }
body.dark-mode .announcement-history-msg { color: #d0d0e0; }
body.dark-mode .announcement-history-reuse { color: #d0d0e0; border-color: #3a3a5a; }
body.dark-mode .heatmap-good { background: rgba(46, 125, 50, 0.2); }
body.dark-mode .heatmap-warn { background: rgba(234, 170, 0, 0.15); }
body.dark-mode .heatmap-bad { background: rgba(224, 25, 51, 0.15); }
body.dark-mode .footer p:first-child { color: #aaaabc; }
body.dark-mode .last-updated { color: #8888aa; }
body.dark-mode [data-tooltip]:hover::after,
body.dark-mode [data-tooltip]:focus-within::after { display: none !important; }
body.dark-mode [data-tooltip]:hover::before,
body.dark-mode [data-tooltip]:focus-within::before { display: none !important; }
body.dark-mode .tooltip-trigger { color: #8888aa; }
body.dark-mode .tooltip-trigger:hover { color: #e8e8f0; }
body.dark-mode .section-header-row .section-title { color: #e8e8f0; }
body.dark-mode .derby-mode-panel { border-color: #2a2a4a; }
body.dark-mode .status-badge.status-completed { background: rgba(46, 125, 50, 0.2); color: #66bb6a; }
body.dark-mode .status-badge.status-in-progress { background: rgba(234, 170, 0, 0.2); color: var(--dd-yellow); }
body.dark-mode .status-badge.status-not-started { background: rgba(136, 139, 141, 0.2); color: #aaaabc; }
body.dark-mode .status-badge.status-overdue { background: rgba(224, 25, 51, 0.15); color: #ff6b6b; }

.btn-dark-mode {
  background: none; border: 1px solid var(--dd-light-blue); border-radius: 50%;
  width: 36px; height: 36px; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, color 0.2s;
  color: var(--dd-white);
}
.btn-dark-mode:hover { border-color: var(--dd-yellow); color: var(--dd-yellow); }
body.dark-mode .btn-dark-mode { border-color: #8888aa; color: #e8e8f0; }
body.dark-mode .btn-dark-mode:hover { border-color: var(--dd-yellow); color: var(--dd-yellow); }

/* --- Help/Tour Button --- */
.btn-help-tour {
  background: none; border: 1px solid var(--dd-light-blue); border-radius: 50%;
  width: 36px; height: 36px; font-size: 16px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  color: var(--dd-white); font-family: var(--font-sans);
}
.btn-help-tour:hover { border-color: var(--dd-yellow); color: var(--dd-dark-blue); background: var(--dd-yellow); }
body.dark-mode .btn-help-tour { border-color: #8888aa; color: #e8e8f0; }
body.dark-mode .btn-help-tour:hover { border-color: var(--dd-yellow); color: var(--dd-dark-blue); background: var(--dd-yellow); }

/* --- Demo Mode Toggle --- */
.btn-demo-mode {
  background: none; border: 1px solid var(--dd-light-blue); border-radius: 50%;
  width: 36px; height: 36px; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}
.btn-demo-mode:hover { border-color: var(--dd-yellow); }
.btn-demo-mode.demo-active {
  background: var(--dd-yellow); border-color: var(--dd-yellow);
}
.demo-mode-pill {
  font-size: 9px; font-weight: 800; text-transform: uppercase;
  padding: 2px 8px; border-radius: 8px; letter-spacing: 0.05em;
  background: var(--dd-yellow); color: var(--dd-dark-blue);
  animation: demoPillPulse 2s ease-in-out infinite;
}
@keyframes demoPillPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Demo mode: hide admin elements */
body.demo-mode .nav-tab[data-view="admin"] { display: none !important; }
body.demo-mode .challenge-edit-btn { display: none !important; }
body.demo-mode .btn-admin-return { display: none !important; }

/* --- Derby Countdown --- */
.derby-countdown {
  font-size: 12px; color: var(--dd-yellow); font-weight: 600;
  letter-spacing: 0.03em; white-space: nowrap;
}

/* --- Score Delta --- */
.score-delta {
  display: inline-block; font-size: 12px; font-weight: 600;
  margin-left: 6px; vertical-align: middle;
}
.score-delta.up { color: #2e7d32; }
.score-delta.down { color: var(--dd-red); }
.score-delta.neutral { color: var(--dd-graphite); }
/* When there's no score change to show, collapse the delta entirely. It sits between
   the (block) score value and the (block) label, so an empty inline-block would still
   generate a line box ~1 line-height tall and push the "Email Safety Score" label down,
   misaligning it with the Bonus points / Emails reported tile labels. */
.score-delta:empty { display: none; }

/* --- Find Me Button --- */
.btn-find-me {
  padding: 8px 16px; border: 1px solid var(--dd-cool-gray); border-radius: var(--radius);
  background: var(--dd-white); font-family: var(--font-sans); font-size: 13px;
  font-weight: 600; color: var(--dd-dark-blue); cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.btn-find-me:hover { border-color: var(--dd-yellow); background: rgba(234, 170, 0, 0.06); }

/* --- Derby Lifecycle Overlays --- */
.derby-overlay-banner {
  background: var(--dd-yellow); color: var(--dd-dark-blue);
  padding: 12px 24px; text-align: center; font-size: 14px; font-weight: 600;
  border-radius: var(--radius); margin-bottom: 16px;
}
.derby-overlay-full {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--dd-dark-blue); z-index: 500;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px; overflow-y: auto;
}
body.dark-mode .derby-overlay-full { background: #0f0f1a; }
.derby-final-card, .derby-maintenance-card {
  background: var(--dd-white); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 40px; text-align: center;
  max-width: 700px; width: 100%; margin: auto 0;
}

/* Finalized overlay immersive background */
#derbyFinalOverlay {
  background: var(--dd-dark-blue);
  align-items: center;
}
#derbyFinalOverlay::before {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at 25% 15%, rgba(125,155,193,0.1) 0%, transparent 55%),
              radial-gradient(ellipse at 75% 85%, rgba(234,170,0,0.06) 0%, transparent 50%),
              linear-gradient(180deg, rgba(4,28,44,0.2) 0%, rgba(4,28,44,0.6) 100%);
  pointer-events: none; z-index: 0;
}
body.dark-mode #derbyFinalOverlay { background: #0a1520; }
.final-net-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: url('Netting.svg') center / cover no-repeat;
  opacity: 0.12;
}
.final-bubbles {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden;
}
#derbyFinalOverlay .derby-final-card {
  background: rgba(4, 28, 44, 0.92); border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(125,155,193,0.1);
  border: 1px solid rgba(125,155,193,0.15);
  backdrop-filter: blur(16px);
  position: relative; z-index: 2;
  animation: regCardEntrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
#derbyFinalOverlay .derby-final-card h2 { color: #EAAA00; text-shadow: 0 0 20px rgba(234,170,0,0.15); }
#derbyFinalOverlay .derby-final-card .section-desc { color: #8899aa; }
#derbyFinalOverlay .derby-final-card .legend-subtitle { color: #c0cad4; }
#derbyFinalOverlay .derby-final-card img.derby-logo {
  max-width: 200px; height: auto;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)) drop-shadow(0 8px 24px rgba(234,170,0,0.2));
  transform: perspective(600px) rotateX(5deg);
  transition: transform 0.4s ease, filter 0.4s ease;
}
#derbyFinalOverlay .derby-final-card img.derby-logo:hover {
  transform: perspective(600px) rotateX(0deg) scale(1.05);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5)) drop-shadow(0 12px 36px rgba(234,170,0,0.3));
}
body.dark-mode #derbyFinalOverlay .derby-final-card {
  background: rgba(10, 10, 30, 0.9); color: #e8e8f0;
  border-color: rgba(125,155,193,0.1);
}

/* Finalized overlay text contrast fixes */
#derbyFinalOverlay .derby-final-stat .stat-value { color: #EAAA00; font-weight: 700; }
#derbyFinalOverlay .derby-final-stat .stat-label { color: #c0cad4; }
#derbyFinalOverlay .leaderboard-table th { background: rgba(125,155,193,0.12); color: #c0cad4; }
#derbyFinalOverlay .leaderboard-table td { color: #e0e8f0; border-color: rgba(125,155,193,0.1); }
#derbyFinalOverlay .leaderboard-table tbody tr:hover td { background: rgba(234,170,0,0.06); }
#derbyFinalOverlay .leaderboard-table .points-value { color: #EAAA00; }
#derbyFinalOverlay .leaderboard-table .col-points { text-align: center; }
#derbyFinalOverlay .leaderboard-table th:nth-child(3) { text-align: center; }
#derbyFinalOverlay .leaderboard-table .tier-badge { color: #e0e8f0; }
#derbyFinalOverlay .leaderboard-table .badge-pill { color: #e0e8f0; }
#derbyFinalOverlay .btn-survey { background: var(--dd-yellow); color: var(--dd-dark-blue); }
body.dark-mode .derby-final-card, body.dark-mode .derby-maintenance-card { background: #1a1a30; color: #e8e8f0; }
.derby-maintenance-card img.derby-logo { max-width: 200px; height: auto; }
.derby-final-card h2, .derby-maintenance-card h2 { font-size: 24px; font-weight: 700; color: var(--dd-dark-blue); margin-bottom: 8px; }
body.dark-mode .derby-final-card h2, body.dark-mode .derby-maintenance-card h2 { color: #ffffff; }
.derby-maintenance-card p { font-size: 16px; color: var(--dd-graphite); }

/* Maintenance overlay immersive background */
#derbyMaintenanceOverlay {
  background: var(--dd-dark-blue);
  align-items: center;
}
#derbyMaintenanceOverlay::before {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at 25% 15%, rgba(125,155,193,0.1) 0%, transparent 55%),
              radial-gradient(ellipse at 75% 85%, rgba(234,170,0,0.06) 0%, transparent 50%),
              linear-gradient(180deg, rgba(4,28,44,0.2) 0%, rgba(4,28,44,0.6) 100%);
  pointer-events: none; z-index: 0;
}
body.dark-mode #derbyMaintenanceOverlay { background: #0a1520; }
.maint-net-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: url('Netting.svg') center / cover no-repeat;
  opacity: 0.12;
}
.maint-bubbles {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden;
}
#derbyMaintenanceOverlay .derby-maintenance-card {
  background: rgba(4, 28, 44, 0.92); border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(125,155,193,0.1);
  border: 1px solid rgba(125,155,193,0.15);
  backdrop-filter: blur(16px);
  position: relative; z-index: 2;
  animation: regCardEntrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
#derbyMaintenanceOverlay .derby-maintenance-card h2 { color: #EAAA00; text-shadow: 0 0 20px rgba(234,170,0,0.15); }
#derbyMaintenanceOverlay .derby-maintenance-card p { color: #8899aa; }
#derbyMaintenanceOverlay .derby-maintenance-card img.derby-logo {
  max-width: 200px; height: auto;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)) drop-shadow(0 8px 24px rgba(234,170,0,0.2));
  transform: perspective(600px) rotateX(5deg);
  transition: transform 0.4s ease, filter 0.4s ease;
}
#derbyMaintenanceOverlay .derby-maintenance-card img.derby-logo:hover {
  transform: perspective(600px) rotateX(0deg) scale(1.05);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5)) drop-shadow(0 12px 36px rgba(234,170,0,0.3));
}
body.dark-mode #derbyMaintenanceOverlay .derby-maintenance-card {
  background: rgba(10, 10, 30, 0.9); color: #e8e8f0;
  border-color: rgba(125,155,193,0.1);
}
.derby-final-stats { display: flex; gap: 16px; justify-content: center; margin: 20px 0; flex-wrap: wrap; }
.derby-final-stat { text-align: center; }
.derby-final-stat .stat-value { font-size: 28px; }
.derby-final-stat .stat-label { font-size: 11px; }
.derby-final-top10 { margin-top: 20px; text-align: left; }
.derby-survey-cta { margin-top: 24px; }
.btn-survey {
  display: inline-block; padding: 12px 28px;
  background: var(--dd-yellow); color: var(--dd-dark-blue);
  border-radius: var(--radius); font-family: var(--font-sans);
  font-size: 15px; font-weight: 700; text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-survey:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(234, 170, 0, 0.3); }
.resources-survey { margin-top: 12px; }
.derby-lifecycle-status {
  padding: 10px 16px; border-radius: var(--radius); font-size: 14px; font-weight: 600;
}
.btn-admin-return {
  display: block; margin: 0 auto 16px; padding: 10px 24px;
  background: var(--dd-dark-blue); border: none; border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  color: var(--dd-white); cursor: pointer; transition: background 0.2s;
}
.btn-admin-return:hover { background: #0a2e45; }
body.dark-mode .btn-admin-return { background: var(--dd-yellow); color: var(--dd-dark-blue); }
body.dark-mode .btn-admin-return:hover { background: #d49a00; }

/* --- Overlay Dark Mode Toggle --- */
.btn-overlay-dark-mode {
  position: absolute; top: 16px; right: 16px;
  background: none; border: 1px solid var(--dd-cool-gray); border-radius: 50%;
  width: 36px; height: 36px; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s;
}
.btn-overlay-dark-mode:hover { border-color: var(--dd-yellow); }
body.dark-mode .btn-overlay-dark-mode { border-color: #3a3a5a; }
body.dark-mode .btn-overlay-dark-mode:hover { border-color: var(--dd-yellow); }
.derby-registration-card, .derby-final-card, .derby-maintenance-card { position: relative; }
.derby-lifecycle-status.active { background: rgba(46, 125, 50, 0.1); color: #2e7d32; }
.derby-lifecycle-status.registration { background: rgba(234, 170, 0, 0.1); color: #8B6914; }
.derby-lifecycle-status.grace { background: rgba(234, 170, 0, 0.1); color: #8B6914; }
.derby-lifecycle-status.finalized { background: rgba(125, 155, 193, 0.1); color: var(--dd-light-blue); }
.derby-lifecycle-status.maintenance { background: rgba(136, 139, 141, 0.1); color: var(--dd-graphite); }

/* --- Confetti Animation --- */
.confetti-container {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 999; overflow: hidden;
}
.confetti-piece {
  position: absolute; width: 10px; height: 10px;
  top: -20px; opacity: 0;
  animation: confettiFall 3s ease-in forwards;
}
@keyframes confettiFall {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(100vh) rotate(720deg); }
}

/* --- Achievement Celebration Dialogue --- */
.celebrate-dialogue {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(4, 28, 44, 0.7); z-index: 800;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: celebrateFadeIn 0.3s ease;
}
.celebrate-dialogue.hidden { display: none; }
@keyframes celebrateFadeIn { from { opacity: 0; } to { opacity: 1; } }
.celebrate-card {
  background: var(--dd-white); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  padding: 36px 32px; max-width: 400px; width: 100%; text-align: center; position: relative;
  animation: celebrateSlideUp 0.4s ease;
}
@keyframes celebrateSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.celebrate-close {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  font-size: 22px; cursor: pointer; color: var(--dd-graphite); line-height: 1;
}
.celebrate-close:hover { color: var(--dd-dark-blue); }
.celebrate-icon { font-size: 56px; margin-bottom: 12px; }
.celebrate-title { font-size: 22px; font-weight: 700; color: var(--dd-dark-blue); margin: 0 0 8px; }
.celebrate-message { font-size: 14px; color: var(--dd-graphite); margin: 0 0 18px; line-height: 1.5; }
.celebrate-items { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.celebrate-item {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
  border-radius: 20px; font-size: 13px; font-weight: 700;
  background: rgba(234, 170, 0, 0.12); color: var(--dd-dark-blue);
  border: 1px solid rgba(234, 170, 0, 0.3);
}
.celebrate-item-img { width: 24px; height: 24px; object-fit: contain; border-radius: 4px; }
.celebrate-dismiss { margin-top: 4px; }
body.dark-mode .celebrate-dialogue { background: rgba(0, 0, 0, 0.75); }
body.dark-mode .celebrate-card { background: #1a1a30; }
body.dark-mode .celebrate-close { color: #8888aa; }
body.dark-mode .celebrate-close:hover { color: #e8e8f0; }
body.dark-mode .celebrate-title { color: #ffffff; }
body.dark-mode .celebrate-message { color: #aaaabc; }
body.dark-mode .celebrate-item { background: rgba(234, 170, 0, 0.15); color: #e8e8f0; border-color: rgba(234, 170, 0, 0.3); }

/* --- Prize Eligibility Dialogue (3D) --- */
.prize-dialogue {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(4, 28, 44, 0.8); z-index: 810;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: celebrateFadeIn 0.3s ease;
  perspective: 1200px;
}
.prize-dialogue.hidden { display: none; }
.prize-dialogue-card {
  background: var(--dd-white); border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 80px rgba(234,170,0,0.15);
  padding: 44px 36px 36px; max-width: 440px; width: 100%;
  text-align: center; position: relative;
  transform-style: preserve-3d;
  animation: prizeCardEntrance 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes prizeCardEntrance {
  0% { opacity: 0; transform: rotateY(-25deg) rotateX(10deg) scale(0.8) translateY(40px); }
  60% { opacity: 1; transform: rotateY(5deg) rotateX(-2deg) scale(1.02) translateY(-5px); }
  100% { opacity: 1; transform: rotateY(0) rotateX(0) scale(1) translateY(0); }
}
.prize-dialogue-card::before {
  content: ''; position: absolute; inset: -2px; border-radius: 18px;
  background: linear-gradient(135deg, var(--dd-yellow), var(--dd-light-blue), var(--dd-yellow));
  z-index: -1;
  animation: prizeGlow 3s ease-in-out infinite alternate;
}
@keyframes prizeGlow {
  0% { opacity: 0.6; filter: blur(4px); }
  100% { opacity: 1; filter: blur(8px); }
}
.prize-dialogue-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(234,170,0,0.08) 0%, transparent 50%, rgba(125,155,193,0.06) 100%);
  pointer-events: none;
}
.prize-dialogue .prize-close {
  position: absolute; top: 14px; right: 16px; background: none; border: none;
  font-size: 22px; cursor: pointer; color: var(--dd-graphite); line-height: 1; z-index: 2;
}
.prize-dialogue .prize-close:hover { color: var(--dd-dark-blue); }
.prize-trophy {
  font-size: 64px; margin-bottom: 8px;
  animation: prizeTrophyBounce 0.8s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  filter: drop-shadow(0 4px 12px rgba(234,170,0,0.4));
}
@keyframes prizeTrophyBounce {
  0% { opacity: 0; transform: scale(0.3) rotateZ(-15deg); }
  70% { transform: scale(1.15) rotateZ(3deg); }
  100% { opacity: 1; transform: scale(1) rotateZ(0); }
}
.prize-dialogue-title {
  font-size: 24px; font-weight: 700; color: var(--dd-dark-blue);
  margin: 0 0 6px; line-height: 1.2;
}
.prize-dialogue-tier {
  display: inline-block; padding: 6px 18px; border-radius: 20px;
  font-size: 14px; font-weight: 700; margin: 10px 0 14px;
  background: linear-gradient(135deg, rgba(234,170,0,0.18), rgba(234,170,0,0.08));
  color: var(--dd-dark-blue); border: 1px solid rgba(234,170,0,0.35);
}
.prize-dialogue-msg {
  font-size: 14px; color: var(--dd-dark-blue); margin: 0 0 22px; line-height: 1.6;
}
.prize-dialogue-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; border-radius: 8px; border: none;
  background: var(--dd-yellow); color: var(--dd-dark-blue);
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(234,170,0,0.3);
}
.prize-dialogue-cta:hover {
  transform: translateY(-2px); box-shadow: 0 6px 24px rgba(234,170,0,0.4);
}
.prize-dialogue-later {
  display: block; margin: 12px auto 0; background: none; border: none;
  font-size: 13px; color: var(--dd-graphite); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.prize-dialogue-later:hover { color: var(--dd-dark-blue); }
.prize-sparkle {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--dd-yellow); pointer-events: none;
  animation: sparkleFloat 2s ease-in-out infinite;
}
@keyframes sparkleFloat {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
  50% { opacity: 1; transform: translateY(-20px) scale(1); }
}
body.dark-mode .prize-dialogue { background: rgba(0, 0, 0, 0.85); }
body.dark-mode .prize-dialogue-card { background: #1a1a30; box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 80px rgba(234,170,0,0.1); }
body.dark-mode .prize-dialogue-card::after { background: linear-gradient(135deg, rgba(234,170,0,0.05) 0%, transparent 50%, rgba(125,155,193,0.04) 100%); }
body.dark-mode .prize-dialogue .prize-close { color: #8888aa; }
body.dark-mode .prize-dialogue .prize-close:hover { color: #e8e8f0; }
body.dark-mode .prize-dialogue-title { color: #ffffff; }
body.dark-mode .prize-dialogue-tier { background: rgba(234,170,0,0.15); color: #e8e8f0; border-color: rgba(234,170,0,0.3); }
body.dark-mode .prize-dialogue-msg { color: #aaaabc; }
body.dark-mode .prize-dialogue-later { color: #8888aa; }
body.dark-mode .prize-dialogue-later:hover { color: #e8e8f0; }

/* --- Animated Counter --- */
.counter-animate { transition: none; }

/* --- Rank Change Arrows --- */
.rank-change { font-size: 11px; font-weight: 600; margin-left: 4px; }
.rank-change.up { color: #2e7d32; }
.rank-change.down { color: var(--dd-red); }
.rank-change.same { color: var(--dd-graphite); }

/* --- Loading Skeleton --- */
.skeleton {
  background: linear-gradient(90deg, var(--dd-cool-gray) 25%, #e0e0e0 50%, var(--dd-cool-gray) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  color: transparent !important;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* --- Feedback Widget --- */
.feedback-widget { position: fixed; bottom: 24px; right: 24px; z-index: 200; }
.feedback-fab {
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: var(--dd-dark-blue); color: var(--dd-white); font-size: 24px;
  cursor: pointer; box-shadow: 0 4px 12px rgba(4, 28, 44, 0.3);
  transition: transform 0.2s, background 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.feedback-fab:hover { transform: scale(1.1); background: #0a2e45; }
.feedback-panel {
  position: absolute; bottom: 64px; right: 0; width: 300px;
  background: var(--dd-white); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(4, 28, 44, 0.2); border: 1px solid var(--dd-cool-gray);
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.feedback-panel-header { display: flex; align-items: center; justify-content: space-between; }
.feedback-panel-title { font-size: 14px; font-weight: 700; color: var(--dd-dark-blue); }
.feedback-panel-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--dd-graphite); }
.feedback-reactions { display: flex; gap: 8px; justify-content: center; }
.feedback-reaction {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--dd-cool-gray);
  background: var(--dd-white); font-size: 22px; cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.feedback-reaction:hover { transform: scale(1.15); border-color: var(--dd-yellow); }
.feedback-reaction.selected { border-color: var(--dd-yellow); background: rgba(234, 170, 0, 0.1); transform: scale(1.15); }
.feedback-comment {
  width: 100%; padding: 10px; border: 1px solid var(--dd-cool-gray); border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 13px; resize: vertical;
}
.feedback-comment:focus { outline: none; border-color: var(--dd-light-blue); box-shadow: 0 0 0 3px rgba(125,155,193,0.2); }
.feedback-confirm { font-size: 13px; color: #2e7d32; text-align: center; margin: 0; }

/* --- QA Report Mode --- */
.feedback-mode-toggle {
  display: flex; gap: 0; margin: 8px 0; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--dd-cool-gray);
}
.feedback-mode-btn {
  flex: 1; padding: 6px 10px; border: none; background: transparent;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  color: var(--dd-graphite); cursor: pointer; transition: background 0.2s, color 0.2s;
}
.feedback-mode-btn.active { background: var(--dd-dark-blue); color: var(--dd-white); }
.feedback-mode-btn:hover:not(.active) { background: rgba(125,155,193,0.1); }
body.dark-mode .feedback-mode-toggle { border-color: #3a3a5a; }
body.dark-mode .feedback-mode-btn.active { background: var(--dd-yellow); color: var(--dd-dark-blue); }
body.dark-mode .feedback-mode-btn { color: #aaaabc; }
.qa-report-panel .resource-dialog-label { margin-bottom: 8px; display: block; font-size: 11px; font-weight: 600; color: var(--dd-graphite); text-transform: uppercase; letter-spacing: 0.04em; }
.qa-report-panel .announcement-input, .qa-report-panel .feedback-comment { font-size: 12px; }
#btnSubmitQaReport { background: var(--dd-red) !important; }
#btnSubmitQaReport:hover { background: #c01528 !important; }

/* --- Feedback Summary (Admin) --- */
.feedback-summary { display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.feedback-summary-item { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.feedback-summary-count { font-weight: 700; color: var(--dd-dark-blue); }

/* --- Watermark --- */
.watermark {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0; pointer-events: none;
  opacity: 0.04;
}
.watermark img { width: 500px; height: auto; }
body.dark-mode .watermark { opacity: 0.06; }

/* --- Empty state / Footer --- */
.empty-state { text-align: center; padding: 48px 24px; color: var(--dd-graphite); font-size: 14px; }
.footer { max-width: 1200px; margin: 8px auto 0; padding: 16px 24px; text-align: center; font-size: 13px; color: var(--dd-graphite); }
.footer p:first-child { font-weight: 600; color: var(--dd-dark-blue); }
.footer-sub { margin-top: 4px; }
.footer-version { margin-top: 2px; font-size: 11px; opacity: 0.5; }
.footer-logo { margin-top: 20px; }
.delta-footer-logo { max-width: 160px; height: auto; opacity: 0.7; }
body.dark-mode .delta-footer-logo { filter: brightness(2); }

/* --- Tooltips --- */
.stat-card, .perf-card, .risky-tile { position: relative; z-index: 1; }
.stat-card:hover, .risky-tile:hover { z-index: 60; }
.tooltip-trigger {
  position: absolute; top: 8px; right: 8px;
  background: none; border: none; cursor: pointer;
  font-size: 14px; color: var(--dd-graphite); line-height: 1;
  padding: 2px; border-radius: 50%;
  transition: color 0.2s;
}
.tooltip-trigger:hover, .tooltip-trigger:focus { color: var(--dd-dark-blue); }
.tooltip-trigger:focus-visible { outline: 2px solid var(--dd-yellow); outline-offset: 1px; }

/* CSS tooltips disabled — JS kiro-tooltip system handles all tooltips */
[data-tooltip]:hover::after,
[data-tooltip]:focus-within::after {
  display: none !important;
}
[data-tooltip]:hover::before,
[data-tooltip]:focus-within::before {
  display: none !important;
}

/* Card visibility is controlled by JS inline styles in switchView() */
.score-rank-inline { display: block; font-size: 12px; color: var(--dd-graphite); margin-top: 2px; }

/* Rank bar (compact rank display on My Performance) */
.rank-bar {
  background: var(--dd-white); border-radius: var(--radius); padding: 10px 20px;
  box-shadow: var(--shadow); margin-bottom: 16px; text-align: center;
  font-size: 14px; color: var(--dd-graphite);
}
.rank-bar-text { font-weight: 600; color: var(--dd-dark-blue); }

/* --- Utility --- */
.hidden { display: none; }

/* --- Risky Behaviors grid --- */
.risky-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.risky-grid-5 { grid-template-columns: repeat(5, 1fr); }
.risky-tile {
  background: linear-gradient(180deg, rgba(224, 25, 51, 0.04) 0%, rgba(224, 25, 51, 0.08) 100%);
  border: 1px solid rgba(224, 25, 51, 0.12);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.risky-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 8px 20px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
}
.risky-tile .stat-value { font-size: 28px; color: var(--dd-red); }
.risky-tile .stat-label { font-size: 11px; }

/* --- Dynamic feedback messages --- */
.feedback-list { display: flex; flex-direction: column; gap: 8px; }
.feedback-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px; border-radius: var(--radius);
  font-size: 13px; line-height: 1.4;
}
.feedback-item.positive { background: rgba(234, 170, 0, 0.08); color: var(--dd-dark-blue); }
.feedback-item.negative { background: rgba(224, 25, 51, 0.06); color: var(--dd-dark-blue); }
.feedback-item.neutral { background: rgba(125, 155, 193, 0.08); color: var(--dd-dark-blue); }
.feedback-icon { flex-shrink: 0; font-size: 16px; line-height: 1; }
.feedback-text { flex: 1; }
.feedback-points { font-weight: 700; white-space: nowrap; margin-left: 8px; }
.feedback-points.gain { color: #2e7d32; }
.feedback-points.loss { color: var(--dd-red); }

/* --- Badge legend (inside My Performance) --- */
.badge-legend { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--dd-cool-gray); }
.legend-subtitle { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dd-graphite); margin-bottom: 10px; }

/* --- Multi-tier progress bar --- */
.tier-progress { margin-bottom: 8px; }
.tier-track {
  position: relative; height: 36px;
  background: var(--dd-cool-gray); border-radius: 8px;
  overflow: visible; display: flex;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255,0.6);
}
.tier-zone {
  position: absolute; top: 0; height: 100%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  z-index: 1; cursor: pointer;
}
.tier-zone:hover { z-index: 2; }
.tier-zone-fighter { background: linear-gradient(180deg, #f7b358 0%, #f49821 100%); }
.tier-zone-fighter:hover { box-shadow: 0 0 14px rgba(244, 152, 33, 0.6); }
.tier-zone-defender { background: linear-gradient(180deg, #93afd1 0%, #6a89b1 100%); }
.tier-zone-defender:hover { box-shadow: 0 0 14px rgba(125, 155, 193, 0.6); }
.tier-zone-champion { background: linear-gradient(180deg, #f0be2a 0%, #d49800 100%); }
.tier-zone-champion:hover { box-shadow: 0 0 14px rgba(234, 170, 0, 0.6); }
.tier-zone-participant { background: linear-gradient(180deg, #f0f0ee 0%, #d8d8d4 100%); }
.tier-zone-participant:hover { box-shadow: 0 0 14px rgba(200, 200, 196, 0.6); }
.tier-zone:first-child { border-radius: 8px 0 0 8px; }
.tier-zone:nth-child(4) { border-radius: 0 8px 8px 0; }
.tier-marker {
  position: absolute; top: -6px; width: 6px; height: 48px;
  background: var(--dd-dark-blue); border-radius: 3px;
  transition: left 0.5s ease; z-index: 3;
  box-shadow: 0 0 0 2px var(--dd-white), 0 2px 6px rgba(0,0,0,0.25);
}
.tier-marker-score {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  background: var(--dd-dark-blue); color: var(--dd-white);
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
  white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 4;
}
.tier-marker-score::after {
  content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid var(--dd-dark-blue);
}
.tier-labels {
  position: relative; height: 36px; margin-top: 6px;
}
.tier-label-zone {
  position: absolute; top: 0;
  text-align: center; font-size: 11px; font-weight: 600;
  color: var(--dd-dark-blue); line-height: 1.3;
}
.tier-label-zone small {
  font-weight: 400; color: var(--dd-graphite); font-size: 10px;
}

/* --- Training status badges --- */
.status-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600; text-transform: capitalize;
}
.status-completed { background: rgba(46, 125, 50, 0.12); color: #2e7d32; }
.status-in-progress { background: rgba(234, 170, 0, 0.15); color: #8B6914; }
.status-not-started { background: rgba(136, 139, 141, 0.15); color: var(--dd-graphite); }
.status-overdue { background: rgba(224, 25, 51, 0.1); color: var(--dd-red); }

/* --- Admin date filters --- */
.admin-filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; flex: 1; }
.admin-date-label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--dd-graphite);
}
.admin-date-label input[type="month"] {
  padding: 8px 12px; border: 1px solid var(--dd-cool-gray);
  border-radius: var(--radius); font-family: var(--font-sans);
  font-size: 13px; background: var(--dd-white); color: var(--dd-dark-blue);
}
.admin-date-label input[type="month"]:focus {
  outline: none; border-color: var(--dd-light-blue);
  box-shadow: 0 0 0 3px rgba(125,155,193,0.2);
}

/* --- Derby Mode panel --- */
.derby-mode-panel { margin-bottom: 20px; }
.derby-mode-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.derby-config-grid { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.derby-config-section { }
.multi-select-group { display: flex; flex-wrap: wrap; gap: 8px; }
.multi-select-scrollable { max-height: 200px; overflow-y: auto; flex-direction: column; flex-wrap: nowrap; padding: 8px; background: rgba(125, 155, 193, 0.04); border: 1px solid var(--dd-cool-gray); border-radius: var(--radius); }
.multi-select-item {
  display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dd-dark-blue);
  cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background 0.15s;
}
.multi-select-item:hover { background: rgba(125, 155, 193, 0.08); }
.multi-select-item input[type="checkbox"] { accent-color: var(--dd-yellow); cursor: pointer; }
body.dark-mode .multi-select-scrollable { background: #141428; border-color: #3a3a5a; }
body.dark-mode .multi-select-item { color: #d0d0e0; }
body.dark-mode .multi-select-item:hover { background: rgba(234, 170, 0, 0.08); }
.derby-toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; }
.derby-toggle-input { display: none; }
.derby-toggle-switch {
  width: 44px; height: 24px; background: var(--dd-cool-gray); border-radius: 12px;
  position: relative; transition: background 0.2s; flex-shrink: 0;
}
.derby-toggle-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; background: var(--dd-white); border-radius: 50%;
  transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.derby-toggle-input:checked + .derby-toggle-switch { background: var(--dd-yellow); }
.derby-toggle-input:checked + .derby-toggle-switch::after { transform: translateX(20px); }
.derby-toggle-text { color: var(--dd-graphite); font-weight: 500; }
.derby-mode-config { margin-top: 14px; }
.derby-date-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; align-items: flex-end; }
.derby-date-save-status {
  font-size: 13px; font-weight: 600; color: #2e7d32;
  margin-top: 4px;
  transition: opacity 0.5s ease;
}
body.dark-mode .derby-date-save-status { color: #66bb6a; }
.derby-date-row .admin-date-label input[type="date"] {
  padding: 8px 12px; border: 1px solid var(--dd-cool-gray); border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 13px; background: var(--dd-white);
}
.derby-date-row .admin-date-label input[type="date"]:focus {
  outline: none; border-color: var(--dd-light-blue); box-shadow: 0 0 0 3px rgba(125,155,193,0.2);
}

/* --- Admin stats --- */
.admin-sub-panel { margin-top: 16px; }
.admin-sub-panel.hidden { display: none; }
.admin-sections { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }
.admin-section { background: var(--dd-white); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow); }
.admin-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dd-graphite); margin-bottom: 12px; }
.admin-section-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.admin-section-tiles .stat-card { border-top-width: 2px; padding: 14px; }

/* --- Admin Dashboard Summary Row --- */
.admin-dashboard-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-bottom: 24px; padding: 20px 24px;
  background: linear-gradient(135deg, var(--dd-dark-blue) 0%, #0a2e4a 100%);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.admin-summary-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.admin-summary-value { font-size: 28px; font-weight: 700; color: var(--dd-yellow); }
.admin-summary-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.8); }

/* --- Dashboard Section Accent Borders --- */
.admin-dash-section { border-left: 4px solid transparent; transition: border-color 0.2s; }
.admin-dash-section[data-accent="blue"] { border-left-color: var(--dd-light-blue); }
.admin-dash-section[data-accent="gold"] { border-left-color: var(--dd-yellow); }
.admin-dash-section[data-accent="purple"] { border-left-color: #8b5cf6; }
.admin-dash-section[data-accent="red"] { border-left-color: var(--dd-red); }
.admin-dash-section[data-accent="orange"] { border-left-color: #f59e0b; }
.admin-dash-section[data-accent="green"] { border-left-color: #10b981; }
.admin-dash-section[data-accent="teal"] { border-left-color: #14b8a6; }
.admin-dash-section[data-accent="slate"] { border-left-color: #64748b; }
.admin-dash-section[data-accent="navy"] { border-left-color: var(--dd-dark-blue); }

/* --- Dashboard Section Headers --- */
.admin-dash-section .admin-section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 0; }
.dash-section-icon { font-size: 16px; line-height: 1; }
.dash-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dd-dark-blue); color: var(--dd-white);
  font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 10px; min-width: 24px; margin-left: 4px;
}
body.dark-mode .dash-count-badge { background: var(--dd-yellow); color: var(--dd-dark-blue); }

/* --- Dashboard Section Description --- */
.admin-section-desc { font-size: 12px; color: var(--dd-graphite); margin: 4px 0 0 28px; line-height: 1.4; }
body.dark-mode .admin-section-desc { color: #9999aa; }

/* --- Dashboard Subsection Labels --- */
.admin-subsection-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dd-graphite); margin-bottom: 8px; }
body.dark-mode .admin-subsection-label { color: #9999aa; }

/* --- Dashboard collapsible overrides --- */
.admin-dash-section.collapsible .section-toggle { width: 100%; background: none; border: none; cursor: pointer; padding: 0; text-align: left; }
.admin-dash-section.collapsible.collapsed .admin-section-desc { display: none; }
.admin-dash-section .toggle-arrow { display: inline-block; transition: transform 0.2s; margin-left: auto; font-size: 14px; color: var(--dd-graphite); }

/* --- Admin name links --- */
.admin-name-link {
  color: var(--dd-dark-blue); text-decoration: none; font-weight: 600;
  border-bottom: 1px dashed var(--dd-light-blue);
  cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
.admin-name-link:hover { color: var(--dd-yellow); border-bottom-color: var(--dd-yellow); }
.admin-name-link:focus-visible { outline: 2px solid var(--dd-yellow); outline-offset: 2px; }

/* --- Admin forward email dropdown --- */
.col-forward { min-width: 140px; position: relative; }
.fwd-manage-btn {
  padding: 5px 12px; border: 1px solid var(--dd-cool-gray);
  border-radius: var(--radius); background: var(--dd-white);
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  color: var(--dd-dark-blue); cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.fwd-manage-btn:hover { border-color: var(--dd-yellow); background: rgba(234, 170, 0, 0.06); }
.fwd-manage-btn:focus-visible { outline: 2px solid var(--dd-yellow); outline-offset: 2px; }
.fwd-dropdown {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--dd-white); border: 1px solid var(--dd-cool-gray);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  z-index: 60; width: 280px; max-height: 300px; overflow-y: auto;
}
.fwd-dropdown-header {
  padding: 10px 14px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--dd-graphite); border-bottom: 1px solid var(--dd-cool-gray);
}
.fwd-sim-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; cursor: pointer; font-size: 13px;
  transition: background 0.15s;
}
.fwd-sim-row:hover { background: rgba(125, 155, 193, 0.06); }
.fwd-sim-check { accent-color: var(--dd-yellow); cursor: pointer; }
.fwd-sim-name { flex: 1; }

/* --- Privacy settings --- */
.privacy-settings { display: flex; flex-direction: column; gap: 12px; }
.privacy-username-row { display: flex; gap: 10px; align-items: center; max-width: 400px; }
.privacy-username-row.hidden { display: none; }
.privacy-note { font-size: 12px; color: var(--dd-graphite); margin: 0; }
.comm-prefs { display: flex; flex-direction: column; gap: 12px; }

/* --- Profile Info Tile (My Profile) --- */
.profile-info-tile { display: flex; align-items: center; gap: 16px; }
.profile-info-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--dd-graphite); }
.profile-info-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-info-details { display: flex; flex-direction: column; }
body.dark-mode .profile-info-avatar { color: #8888aa; }

/* --- Avatar Picker --- */
.avatar-picker { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.avatar-option {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--dd-white); border: 3px solid var(--dd-cool-gray); border-radius: var(--radius);
  padding: 12px; cursor: pointer; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  width: 100px;
}
.avatar-option img { width: 64px; height: 64px; object-fit: contain; }
.avatar-option-name { font-size: 12px; font-weight: 600; color: var(--dd-dark-blue); }
.avatar-option:hover { border-color: var(--dd-light-blue); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(4, 28, 44, 0.1); }
.avatar-option.selected { border-color: var(--dd-yellow); background: rgba(234, 170, 0, 0.06); }
.avatar-option:focus-visible { outline: 2px solid var(--dd-yellow); outline-offset: 2px; }
body.dark-mode .avatar-option { background: #1e1e38; border-color: #2a2a4a; }
body.dark-mode .avatar-option-name { color: #d0d0e0; }
body.dark-mode .avatar-option:hover { border-color: var(--dd-light-blue); }
body.dark-mode .avatar-option.selected { border-color: var(--dd-yellow); background: rgba(234, 170, 0, 0.12); }

/* --- Leaderboard Avatar --- */
.lb-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 8px; }

/* --- Kudos --- */
.col-kudos { text-align: center; width: 80px; }
th.col-kudos { text-align: center; }
.kudos-btn {
  background: none; border: 1px solid var(--dd-cool-gray); border-radius: 16px;
  padding: 3px 10px; font-size: 13px; cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  font-family: var(--font-sans);
}
.kudos-btn:hover { border-color: var(--dd-yellow); background: rgba(234, 170, 0, 0.06); transform: scale(1.05); }
.kudos-btn.kudos-given { border-color: var(--dd-yellow); background: rgba(234, 170, 0, 0.12); }
.kudos-btn:focus-visible { outline: 2px solid var(--dd-yellow); outline-offset: 2px; }
.kudos-display { font-size: 13px; color: var(--dd-graphite); }
body.dark-mode .kudos-btn { border-color: #3a3a5a; color: #d0d0e0; }
body.dark-mode .kudos-btn:hover { border-color: var(--dd-yellow); background: rgba(234, 170, 0, 0.1); }
body.dark-mode .kudos-btn.kudos-given { border-color: var(--dd-yellow); background: rgba(234, 170, 0, 0.15); }
body.dark-mode .kudos-display { color: #8888aa; }

/* --- Maintenance Bypass --- */
.testing-bypass-list { display: flex; flex-wrap: wrap; gap: 8px; }
.testing-bypass-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(125, 155, 193, 0.1); border: 1px solid var(--dd-cool-gray);
  border-radius: 16px; padding: 4px 12px; font-size: 13px; color: var(--dd-dark-blue);
}
.testing-bypass-remove {
  background: none; border: none; cursor: pointer; font-size: 14px;
  color: var(--dd-graphite); line-height: 1; padding: 0;
}
.testing-bypass-remove:hover { color: var(--dd-red); }
body.dark-mode .testing-bypass-chip { background: rgba(125, 155, 193, 0.08); border-color: #3a3a5a; color: #d0d0e0; }
body.dark-mode .testing-bypass-remove { color: #8888aa; }
body.dark-mode .testing-bypass-remove:hover { color: #ff6b6b; }

/* --- Achievement Showcase --- */
.achievement-showcase { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.showcase-badge {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: 2px solid var(--dd-cool-gray); border-radius: 20px;
  background: var(--dd-white); cursor: pointer; font-size: 13px; font-weight: 600;
  font-family: var(--font-sans); color: var(--dd-dark-blue);
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.showcase-badge:hover { border-color: var(--dd-light-blue); transform: translateY(-1px); }
.showcase-badge.pinned { border-color: var(--dd-yellow); background: rgba(234, 170, 0, 0.08); }
.showcase-badge .showcase-pin { font-size: 11px; color: var(--dd-graphite); }
.showcase-badge.pinned .showcase-pin { color: var(--dd-yellow); }
body.dark-mode .showcase-badge { background: #1e1e38; border-color: #2a2a4a; color: #d0d0e0; }
body.dark-mode .showcase-badge:hover { border-color: var(--dd-light-blue); }
body.dark-mode .showcase-badge.pinned { border-color: var(--dd-yellow); background: rgba(234, 170, 0, 0.12); }

/* --- Welcome Tour --- */
.welcome-tour-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(4, 28, 44, 0.7); z-index: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.welcome-tour-overlay.hidden { display: none; }
.welcome-tour-card {
  background: var(--dd-white); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 32px; max-width: 480px; width: 100%;
}
.welcome-tour-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.welcome-tour-step { font-size: 12px; font-weight: 600; color: var(--dd-graphite); text-transform: uppercase; letter-spacing: 0.05em; }
.welcome-tour-skip { background: none; border: none; font-size: 13px; color: var(--dd-light-blue); cursor: pointer; font-family: var(--font-sans); }
.welcome-tour-skip:hover { color: var(--dd-yellow); }
.welcome-tour-body { min-height: 120px; }
.welcome-tour-body h3 { font-size: 18px; font-weight: 700; color: var(--dd-dark-blue); margin-bottom: 8px; }
.welcome-tour-body p { font-size: 14px; color: var(--dd-graphite); line-height: 1.6; }
.welcome-tour-icon { font-size: 32px; margin-bottom: 12px; display: block; }
.welcome-tour-footer { display: flex; justify-content: space-between; margin-top: 24px; }
body.dark-mode .welcome-tour-overlay { background: rgba(0, 0, 0, 0.75); }
body.dark-mode .welcome-tour-card { background: #1a1a30; }
body.dark-mode .welcome-tour-body h3 { color: #ffffff; }
body.dark-mode .welcome-tour-body p { color: #aaaabc; }
body.dark-mode .welcome-tour-skip { color: var(--dd-light-blue); }

/* --- Milestone Toast --- */
.milestone-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: var(--dd-dark-blue); color: var(--dd-white); padding: 14px 28px;
  border-radius: var(--radius); font-size: 14px; font-weight: 600;
  font-family: var(--font-sans); box-shadow: 0 8px 24px rgba(4, 28, 44, 0.3);
  z-index: 800; opacity: 0; transition: opacity 0.3s, transform 0.3s;
  pointer-events: none; text-align: center;
}
.milestone-toast.show { opacity: 1; transform: translateX(-50%) translateY(-8px); }
body.dark-mode .milestone-toast { background: var(--dd-yellow); color: var(--dd-dark-blue); }

/* --- Leaderboard Tagline Tooltip --- */
.participant-tagline { font-size: 11px; color: var(--dd-light-blue); display: block; font-style: italic; }
body.dark-mode .participant-tagline { color: #7D9BC1; }

/* --- Achievements Timeline --- */
.achievement-year-section { margin-bottom: 24px; }
.achievement-year-section-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.achievement-collapsible { cursor: pointer; user-select: none; border-radius: var(--radius); padding: 6px 8px; transition: background 0.15s; }
.achievement-collapsible:hover { background: rgba(234, 170, 0, 0.06); }
.achievement-collapsible:focus-visible { outline: 2px solid var(--dd-yellow); outline-offset: -2px; }
.achievement-year-header-left { display: flex; align-items: center; gap: 8px; }
.achievement-collapse-chevron { font-size: 12px; color: var(--dd-graphite); width: 16px; text-align: center; transition: transform 0.15s; }
.achievement-year-body { transition: none; }
.achievement-year-label {
  font-size: 20px; font-weight: 700; color: var(--dd-dark-blue);
  background: rgba(234, 170, 0, 0.3); padding: 4px 14px; border-radius: 20px;
}
.achievement-section-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dd-graphite); margin-bottom: 8px; }
.achievement-tiles-grid { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.achievement-tile-wrapper { perspective: 600px; width: 130px; }
.achievement-tile-flipper {
  position: relative; width: 130px; min-height: 180px;
  transition: transform 0.5s ease;
  transform-style: preserve-3d; cursor: pointer;
}
.achievement-tile-flipper.flipped { transform: rotateY(180deg); }
.achievement-tile-front, .achievement-tile-back {
  position: absolute; top: 0; left: 0; width: 100%; min-height: 100%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 16px;
  border-radius: var(--radius); box-shadow: var(--shadow);
  font-size: 13px; font-weight: 600; color: var(--dd-dark-blue);
  text-align: center; box-sizing: border-box;
}
.achievement-tile-front {
  background: var(--dd-white); border: 1px solid rgba(234, 170, 0, 0.2);
  z-index: 2; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden; position: relative;
}
/* Particle burst container */
.achievement-particles {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; overflow: visible;
}
.achievement-particle {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  opacity: 1; transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.achievement-tile-back {
  background: var(--dd-dark-blue); color: var(--dd-white);
  border: 1px solid rgba(234, 170, 0, 0.3);
  transform: rotateY(180deg); justify-content: center;
  overflow-y: auto;
}
.achievement-tile-flipper:not(.flipped):hover .achievement-tile-front {
  transform: translateY(-4px); border-color: var(--dd-yellow);
  box-shadow: 0 4px 12px rgba(234, 170, 0, 0.15);
}
.achievement-tile-flipper:not(.flipped):hover .achievement-tile-front .achievement-img,
.achievement-tile-flipper:not(.flipped):hover .achievement-tile-front .achievement-img-placeholder {
  transform: scale(1.15);
}
.achievement-img, .achievement-img-placeholder { transition: transform 0.3s ease; }
.achievement-tile-flipper:focus-visible { outline: 2px solid var(--dd-yellow); outline-offset: 2px; border-radius: var(--radius); }
.achievement-tile-flipper.achievement-locked .achievement-tile-front {
  background: #e8e8e8; border: 1px dashed #b0b0b0; opacity: 0.7;
  filter: grayscale(1);
}
.achievement-tile-flipper.achievement-locked:not(.flipped):hover .achievement-tile-front {
  transform: none; box-shadow: var(--shadow); border-color: #b0b0b0;
}
.achievement-tile-flipper.achievement-locked:not(.flipped):hover .achievement-tile-front .achievement-img,
.achievement-tile-flipper.achievement-locked:not(.flipped):hover .achievement-tile-front .achievement-img-placeholder {
  transform: none;
}
.achievement-tile-flipper.achievement-locked .achievement-tile-back { background: #3a3a50; }
.achievement-back-icon { font-size: 32px; }
.achievement-back-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; }
.achievement-back-desc { font-size: 11px; font-weight: 400; line-height: 1.4; margin: 0; opacity: 0.9; }
.achievement-tile-download {
  position: absolute; top: 6px; right: 6px; background: none;
  border: 1.5px solid var(--dd-yellow); border-radius: 50%;
  font-size: 12px; cursor: pointer; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  color: var(--dd-yellow); transition: color 0.15s, background 0.15s, border-color 0.15s;
  z-index: 3; padding: 0; line-height: 1;
}
.achievement-tile-download:hover { background: rgba(234, 170, 0, 0.15); color: var(--dd-dark-blue); border-color: var(--dd-yellow); }
.achievement-tile-type { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dd-graphite); }
.achievement-tile-back .achievement-tile-type { color: rgba(255,255,255,0.6); }
.achievement-img-wrap { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.achievement-img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; }
.achievement-img-placeholder { width: 56px; height: 56px; border-radius: 8px; background: rgba(234, 170, 0, 0.1); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.achievement-badge-name { font-size: 11px; line-height: 1.3; }
.achievement-earned-check { font-size: 14px; color: #2e7d32; font-weight: 700; }
.achievement-locked-label { font-size: 10px; color: var(--dd-graphite); text-transform: uppercase; letter-spacing: 0.04em; }
.achievement-download-btn { font-size: 12px; padding: 6px 14px; }
.achievement-sharing-tip { font-size: 12px; color: var(--dd-light-blue); font-style: italic; margin-bottom: 14px; }
body.dark-mode .achievement-sharing-tip { color: #7D9BC1; }
body.dark-mode .achievement-year-section-header { border-color: #2a2a4a; }
body.dark-mode .achievement-collapsible:hover { background: rgba(234, 170, 0, 0.08); }
body.dark-mode .achievement-collapse-chevron { color: #8888aa; }
body.dark-mode .achievement-year-label { color: #ffffff; background: rgba(234, 170, 0, 0.35); }
body.dark-mode .achievement-section-label { color: #8888aa; }
body.dark-mode .achievement-tile-front { background: #1a1a30; border-color: rgba(234, 170, 0, 0.25); color: #e8e8f0; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
body.dark-mode .achievement-tile-flipper:not(.flipped):hover .achievement-tile-front { box-shadow: 0 4px 12px rgba(234, 170, 0, 0.15); border-color: var(--dd-yellow); }
body.dark-mode .achievement-tile-flipper.achievement-locked .achievement-tile-front { background: #252540; border: 1px dashed #444460; opacity: 0.7; }
body.dark-mode .achievement-tile-back { background: #0a0a18; border-color: rgba(234, 170, 0, 0.3); }
body.dark-mode .achievement-tile-flipper.achievement-locked .achievement-tile-back { background: #1a1a30; }
body.dark-mode .achievement-tile-download { color: var(--dd-yellow); border-color: var(--dd-yellow); }
body.dark-mode .achievement-tile-download:hover { background: rgba(234, 170, 0, 0.25); color: #fff; }
body.dark-mode .achievement-img-placeholder { background: rgba(234, 170, 0, 0.12); }
body.dark-mode .achievement-locked-label { color: #666680; }

/* --- Achievements Tab Redesign: Hero, Tier Ladder, Badge Collection --- */

/* Hero header */
.achievements-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px; margin-bottom: 20px;
  background: linear-gradient(135deg, var(--dd-dark-blue) 0%, #0a2840 100%);
  border-radius: 16px; color: #ffffff;
  box-shadow: 0 4px 20px rgba(4, 28, 44, 0.3);
}
.achievements-hero-content { flex: 1; }
.achievements-hero-title {
  font-size: 22px; font-weight: 700; margin: 0 0 12px;
  background: linear-gradient(90deg, #ffffff, var(--dd-yellow));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.achievements-hero-stats-row { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-stat-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: 16px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.9);
}
.achievements-hero-badge { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.level-badge-circle { position: relative; display: flex; align-items: center; justify-content: center; }
.level-badge-tier {
  position: absolute; font-size: 10px; font-weight: 700; color: #ffffff;
  text-transform: uppercase; letter-spacing: 0.03em;
  max-width: 60px; text-align: center; line-height: 1.2;
}
.level-badge-next { font-size: 10px; color: rgba(255,255,255,0.6); text-align: center; }

/* Tier Progression Ladder — Horizontal Flight Path */
.achievements-tier-ladder {
  margin: 24px 0; padding: 28px 24px;
  background: var(--dd-white); border-radius: var(--radius); box-shadow: var(--shadow);
}
.tier-ladder-title {
  font-size: 20px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--dd-dark-blue); margin: 0 0 6px; text-align: left;
}
.tier-ladder-subtitle {
  font-size: 12px; color: var(--dd-graphite); text-align: left; margin: 0 0 24px;
  font-weight: 400;
}
.tier-ladder-track {
  display: flex; align-items: flex-start; justify-content: space-between; position: relative;
  padding: 0 20px;
}
.tier-ladder-track::before {
  content: ''; position: absolute; top: 28px; left: 40px; right: 40px;
  height: 4px; background: var(--dd-cool-gray); border-radius: 2px; z-index: 0;
}
.tier-ladder-progress-fill {
  position: absolute; top: 28px; left: 40px; height: 4px;
  background: linear-gradient(90deg, var(--dd-yellow), #f0c040);
  border-radius: 2px; z-index: 1; transition: width 0.8s ease;
  box-shadow: 0 0 8px rgba(234, 170, 0, 0.3);
}
.tier-ladder-step {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  position: relative; z-index: 2; flex: 1; max-width: 160px;
  padding: 0; border-radius: 0; transition: transform 0.2s;
}
.tier-ladder-step::before { display: none; }
.tier-ladder-node {
  width: 56px; height: 56px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 24px;
  border: 3px solid var(--dd-cool-gray); background: var(--dd-white);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.tier-ladder-step.tier-achieved .tier-ladder-node {
  border-color: var(--dd-yellow); background: rgba(234,170,0,0.08);
  box-shadow: 0 0 8px rgba(234,170,0,0.3);
}
.tier-ladder-step.tier-current .tier-ladder-node {
  border-color: var(--dd-yellow); background: rgba(234,170,0,0.12);
  box-shadow: 0 0 16px rgba(234,170,0,0.5), 0 0 4px rgba(234,170,0,0.3);
  transform: scale(1.15);
  animation: currentNodePulse 2s ease-in-out infinite;
}
.tier-ladder-step.tier-locked .tier-ladder-node {
  border-color: #d0d0d0; opacity: 0.5;
}
@keyframes currentNodePulse {
  0%, 100% { box-shadow: 0 0 16px rgba(234,170,0,0.5), 0 0 4px rgba(234,170,0,0.3); }
  50% { box-shadow: 0 0 24px rgba(234,170,0,0.7), 0 0 8px rgba(234,170,0,0.4); }
}
.tier-ladder-info { text-align: center; }
.tier-ladder-name { font-size: 13px; font-weight: 700; color: var(--dd-dark-blue); display: block; }
.tier-ladder-range { font-size: 11px; color: var(--dd-graphite); display: block; margin-top: 2px; }
.tier-ladder-desc {
  font-size: 10px; color: var(--dd-graphite); display: block; margin-top: 4px;
  font-style: italic; line-height: 1.3; opacity: 0.8; max-width: 140px;
}
.tier-ladder-status {
  font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 10px;
  white-space: nowrap; margin-top: 4px;
}
.tier-ladder-status.status-achieved { background: rgba(46,125,50,0.1); color: #2e7d32; }
.tier-ladder-status.status-current { background: rgba(234,170,0,0.15); color: #b8860b; font-weight: 700; }
.tier-ladder-status.status-locked { background: rgba(136,139,141,0.08); color: var(--dd-graphite); }
.tier-ladder-step.tier-locked .tier-ladder-name { color: var(--dd-graphite); }
.tier-ladder-step.tier-locked .tier-ladder-range { opacity: 0.6; }

/* Override old vertical styles */
.tier-ladder-badge { display: none; }

/* Badge Collection */
.achievements-badge-collection {
  margin: 24px 0; padding: 24px;
  background: var(--dd-white); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow-x: auto; overflow-y: visible;
}
.badge-collection-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 20px;
}
.badge-collection-header-text { flex: 1; text-align: left; }
.badge-collection-title {
  font-size: 20px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--dd-dark-blue); margin: 0 0 6px;
}
.badge-collection-subtitle {
  font-size: 12px; color: var(--dd-graphite); margin: 0 0 6px;
}
.badge-collection-tip {
  font-size: 11px; color: var(--dd-light-blue); font-style: italic; margin: 0;
}
.badge-collection-ring { text-align: center; flex-shrink: 0; }
.badge-collection-ring-label {
  display: block; font-size: 12px; font-weight: 700; color: var(--dd-dark-blue); margin-top: 2px;
}
.badge-collection-grid {
  display: flex; gap: 16px; flex-wrap: nowrap; justify-content: flex-start;
  padding: 8px 20px 8px 24px;
}
/* Year bar inside badge collection */
.badge-collection-year-bar {
  margin-bottom: 16px; display: flex; justify-content: center;
}
.badge-collection-year-bar .toggle-btn {
  padding: 8px 20px; font-size: 13px; font-weight: 600;
  border: 2px solid var(--dd-cool-gray); background: none;
  color: var(--dd-graphite); transition: all 0.2s;
}
.badge-collection-year-bar .toggle-btn:first-child { border-radius: 20px 0 0 20px; }
.badge-collection-year-bar .toggle-btn:last-child { border-radius: 0 20px 20px 0; }
.badge-collection-year-bar .toggle-btn:not(:first-child) { margin-left: -2px; }
.badge-collection-year-bar .toggle-btn:hover { background: rgba(234,170,0,0.06); border-color: var(--dd-yellow); color: var(--dd-dark-blue); position: relative; z-index: 1; }
.badge-collection-year-bar .toggle-btn.active {
  background: var(--dd-yellow); border-color: var(--dd-yellow); color: var(--dd-dark-blue); font-weight: 700;
}
/* Year pills reuse .view-toggle, so these need .badge-year-btn to outrank the generic
   dark-mode .view-toggle .toggle-btn rules (which otherwise turn the active pill's text
   yellow-on-yellow, making it invisible). */
body.dark-mode .badge-collection-year-bar .toggle-btn.badge-year-btn { border-color: #444460; color: #9999bb; background: none; }
body.dark-mode .badge-collection-year-bar .toggle-btn.badge-year-btn:hover { background: rgba(234,170,0,0.08); border-color: var(--dd-yellow); color: #fff; position: relative; z-index: 1; }
body.dark-mode .badge-collection-year-bar .toggle-btn.badge-year-btn.active { background: var(--dd-yellow); border-color: var(--dd-yellow); color: var(--dd-dark-blue); }

/* Dark mode fixes: Active pill, leaderboard header, hero stat pills */
body.dark-mode .challenge-tile-status-pill.pill-active { color: #ffffff !important; border-color: rgba(125,155,193,0.6) !important; background: rgba(125,155,193,0.25) !important; }
body.dark-mode .leaderboard-table thead th { color: #ffffff; }
body.dark-mode .hero-stat-pill { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); color: #ffffff; }
body.dark-mode .achievements-hero-title { -webkit-text-fill-color: unset !important; background: none !important; color: #ffffff !important; }
/* Uniform tile height in badge collection */
.badge-collection-grid .achievement-tile-wrapper { perspective: 600px; width: 160px; }
.badge-collection-grid .achievement-tile-flipper { height: 200px; min-height: 200px; }
.badge-collection-grid .achievement-tile-front,
.badge-collection-grid .achievement-tile-back {
  height: 100%; min-height: unset; overflow: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
}
.badge-collection-grid .achievement-tile-front::-webkit-scrollbar,
.badge-collection-grid .achievement-tile-back::-webkit-scrollbar { display: none; }
.badge-collection-grid .achievement-back-desc { font-size: 10px; line-height: 1.3; }

/* Earned badge animations — gold border + delayed float after entrance */
.badge-collection-grid .achievement-tile-wrapper:has(.achievement-tile-flipper:not(.achievement-locked)) {
  animation: badgeTileEntrance 0.4s ease forwards, badgeFloat 3s ease-in-out 0.5s infinite;
}
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
/* Pulsing gold border for earned */
.badge-collection-grid .achievement-tile-flipper:not(.achievement-locked) .achievement-tile-front {
  border: 2px solid var(--dd-yellow);
  animation: badgeBorderPulse 2.5s ease-in-out infinite;
}
@keyframes badgeBorderPulse {
  0%, 100% { border-color: rgba(234, 170, 0, 0.3); box-shadow: 0 2px 8px rgba(234, 170, 0, 0.1); }
  50% { border-color: rgba(234, 170, 0, 0.8); box-shadow: 0 4px 20px rgba(234, 170, 0, 0.3), 0 0 8px rgba(234, 170, 0, 0.2); }
}

/* Staggered entrance for badge tiles */
.badge-collection-grid .achievement-tile-wrapper {
  opacity: 0; animation: badgeTileEntrance 0.4s ease forwards;
}
.badge-collection-grid .achievement-tile-wrapper:nth-child(1) { animation-delay: 0.05s; }
.badge-collection-grid .achievement-tile-wrapper:nth-child(2) { animation-delay: 0.12s; }
.badge-collection-grid .achievement-tile-wrapper:nth-child(3) { animation-delay: 0.19s; }
.badge-collection-grid .achievement-tile-wrapper:nth-child(4) { animation-delay: 0.26s; }
.badge-collection-grid .achievement-tile-wrapper:nth-child(5) { animation-delay: 0.33s; }
.badge-collection-grid .achievement-tile-wrapper:nth-child(6) { animation-delay: 0.40s; }
.badge-collection-grid .achievement-tile-wrapper:nth-child(7) { animation-delay: 0.47s; }
@keyframes badgeTileEntrance {
  from { opacity: 0; transform: scale(0.85) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Badge type pill */
.badge-type-pill {
  padding: 2px 8px; border-radius: 10px;
  background: rgba(4, 28, 44, 0.08); color: var(--dd-dark-blue);
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.achievement-tile-back .badge-type-pill { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.8); }
body.dark-mode .badge-type-pill { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); }

/* Earned label */
.achievement-earned-label {
  font-size: 10px; font-weight: 600; color: #2e7d32; text-transform: uppercase;
  letter-spacing: 0.03em; margin-top: -4px;
}

/* Timeline inside badge collection — visually connected */
.achievements-timeline-inside {
  background: var(--dd-white); border-radius: 0 0 var(--radius) var(--radius);
  padding: 16px 24px 24px; margin-top: 0;
  box-shadow: var(--shadow);
}
.achievements-timeline-inside:empty { display: none; }
body.dark-mode .achievements-timeline-inside { background: #1a1a30; }
/* Remove bottom radius from badge collection when timeline follows */
.achievements-badge-collection:has(+ .achievements-timeline-inside:not(:empty)) {
  border-radius: var(--radius) var(--radius) 0 0;
}
/* Scroll indicator arrow */
.achievement-scroll-arrow {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: rgba(255,255,255,0.6); cursor: pointer;
  animation: scrollArrowBounce 1.2s ease-in-out infinite;
  z-index: 3; padding: 2px 6px; border-radius: 4px;
  background: rgba(0,0,0,0.2);
}
@keyframes scrollArrowBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(3px); }
}
.badge-slot {
  width: 140px; padding: 20px 16px; border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer; position: relative;
}
.badge-slot-earned {
  background: linear-gradient(135deg, rgba(234,170,0,0.05), rgba(234,170,0,0.02));
  border: 2px solid rgba(234, 170, 0, 0.3);
  animation: badgeSlotGlow 3s ease-in-out infinite;
}
.badge-slot-earned:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 24px rgba(234, 170, 0, 0.2);
}
.badge-slot-locked {
  background: rgba(136, 139, 141, 0.04);
  border: 2px dashed rgba(136, 139, 141, 0.3);
}
.badge-slot-locked .badge-slot-img { filter: grayscale(1); opacity: 0.4; }
@keyframes badgeSlotGlow {
  0%, 100% { box-shadow: 0 2px 8px rgba(234, 170, 0, 0.1); border-color: rgba(234, 170, 0, 0.3); }
  50% { box-shadow: 0 4px 16px rgba(234, 170, 0, 0.25); border-color: rgba(234, 170, 0, 0.5); }
}
.badge-slot-img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; transition: transform 0.3s; }
.badge-slot-emoji { font-size: 36px; }
.badge-slot-name { font-size: 11px; font-weight: 600; color: var(--dd-dark-blue); line-height: 1.3; }
.badge-slot-status { font-size: 10px; font-weight: 600; }
.badge-slot-status.earned { color: #2e7d32; }
.badge-slot-status.locked { color: var(--dd-graphite); }
.badge-slot-check { position: absolute; top: 8px; right: 8px; font-size: 14px; color: #2e7d32; }

/* Staggered entrance animation */
.badge-slot, .tier-ladder-step {
  opacity: 0; animation: achievementFadeIn 0.4s ease forwards;
}
.badge-slot:nth-child(1), .tier-ladder-step:nth-child(1) { animation-delay: 0.05s; }
.badge-slot:nth-child(2), .tier-ladder-step:nth-child(2) { animation-delay: 0.1s; }
.badge-slot:nth-child(3), .tier-ladder-step:nth-child(3) { animation-delay: 0.15s; }
.badge-slot:nth-child(4), .tier-ladder-step:nth-child(4) { animation-delay: 0.2s; }
.badge-slot:nth-child(5), .tier-ladder-step:nth-child(5) { animation-delay: 0.25s; }
.badge-slot:nth-child(6) { animation-delay: 0.3s; }
@keyframes achievementFadeIn {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Dark mode achievements redesign */
body.dark-mode .achievements-hero { background: linear-gradient(135deg, #1a1a38 0%, #0a2840 100%); box-shadow: 0 4px 20px rgba(0,0,0,0.4); border: 1px solid rgba(125,155,193,0.2); }
body.dark-mode .achievements-hero-title { -webkit-text-fill-color: unset !important; background: none !important; color: #ffffff !important; }
body.dark-mode .achievements-tier-ladder { background: #1a1a30; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
body.dark-mode .tier-ladder-title { color: #e8e8f0; }
body.dark-mode .tier-ladder-subtitle { color: #8888aa; }
body.dark-mode .tier-ladder-name { color: #e8e8f0; }
body.dark-mode .tier-ladder-range { color: #8888aa; }
body.dark-mode .tier-ladder-desc { color: #8888aa; }
body.dark-mode .tier-ladder-step.tier-current { background: none; border-color: transparent; }
body.dark-mode .tier-ladder-track::before { background: #333355; }
body.dark-mode .tier-ladder-node { background: #1a1a30; border-color: #444460; }
body.dark-mode .tier-ladder-step.tier-achieved .tier-ladder-node { border-color: var(--dd-yellow); background: rgba(234,170,0,0.1); }
body.dark-mode .tier-ladder-step.tier-current .tier-ladder-node { border-color: var(--dd-yellow); background: rgba(234,170,0,0.15); }
body.dark-mode .achievements-badge-collection { background: #1a1a30; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
body.dark-mode .badge-collection-title { color: #e8e8f0; }
body.dark-mode .badge-collection-subtitle { color: #8888aa; }
body.dark-mode .badge-collection-tip { color: #7D9BC1; }
body.dark-mode .badge-collection-ring-label { color: var(--dd-yellow); }
body.dark-mode .badge-slot-earned { background: linear-gradient(135deg, rgba(234,170,0,0.08), rgba(234,170,0,0.03)); border-color: rgba(234,170,0,0.3); }
body.dark-mode .badge-slot-locked { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.1); }
body.dark-mode .badge-slot-name { color: #e8e8f0; }

/* --- Leaderboard row animation --- */
.leaderboard-table tbody tr {
  transition: transform 0.4s ease, opacity 0.3s ease, background-color 0.3s ease;
}
.leaderboard-table tbody tr.row-enter {
  animation: rowSlideIn 0.4s ease forwards;
}
@keyframes rowSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.leaderboard-table tbody tr.row-move-up {
  animation: rowMoveUp 0.5s ease;
}
.leaderboard-table tbody tr.row-move-down {
  animation: rowMoveDown 0.5s ease;
}
@keyframes rowMoveUp {
  from { transform: translateY(10px); background-color: rgba(46, 125, 50, 0.08); }
  to { transform: translateY(0); }
}
@keyframes rowMoveDown {
  from { transform: translateY(-10px); background-color: rgba(224, 25, 51, 0.06); }
  to { transform: translateY(0); }
}

/* --- Section export buttons --- */
.btn-section-export {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 1px solid var(--dd-cool-gray); border-radius: 4px;
  padding: 3px 10px; font-size: 11px; font-weight: 600; font-family: var(--font-sans);
  color: var(--dd-graphite); cursor: pointer; margin-left: 10px; vertical-align: middle;
  transition: border-color 0.2s, color 0.2s;
}
.btn-section-export:hover { border-color: var(--dd-yellow); color: var(--dd-dark-blue); }
.section-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

/* --- Admin table alignment --- */
#adminView .leaderboard-table th,
#adminView .leaderboard-table td { text-align: center; }

/* --- Sortable table headers --- */
.leaderboard-table th[data-sort] { cursor: pointer; user-select: none; position: relative; }
.leaderboard-table th[data-sort]:hover { background: rgba(255,255,255,0.1); }
.leaderboard-table th[data-sort]::after {
  content: '⇅'; margin-left: 4px; font-size: 10px; opacity: 0.5;
}
.leaderboard-table th[data-sort].sort-asc::after { content: '▲'; opacity: 1; }
.leaderboard-table th[data-sort].sort-desc::after { content: '▼'; opacity: 1; }

/* --- Pagination --- */
.pagination {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 14px 0; font-size: 13px;
}
.page-btn {
  padding: 6px 14px; border: 1px solid var(--dd-cool-gray); border-radius: var(--radius);
  background: var(--dd-white); font-family: var(--font-sans); font-size: 13px;
  color: var(--dd-dark-blue); cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.page-btn:hover:not(:disabled) { border-color: var(--dd-yellow); background: rgba(234, 170, 0, 0.06); }
.page-btn:disabled { opacity: 0.4; cursor: default; }
.page-btn:focus-visible { outline: 2px solid var(--dd-yellow); outline-offset: 2px; }
.page-info { color: var(--dd-graphite); font-weight: 600; }

/* --- Resources tile --- */
.resources-content { display: flex; flex-direction: column; gap: 16px; }
.resources-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.resource-link {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--radius);
  background: rgba(125, 155, 193, 0.06); border: 1px solid rgba(125, 155, 193, 0.12);
  text-decoration: none; color: var(--dd-dark-blue); font-size: 14px; font-weight: 500;
  transition: background 0.2s, border-color 0.2s;
}
.resource-link:hover { background: rgba(125, 155, 193, 0.12); border-color: var(--dd-light-blue); }
.resource-link:focus-visible { outline: 2px solid var(--dd-yellow); outline-offset: 2px; }
.resource-icon { font-size: 18px; flex-shrink: 0; }
.resources-contact {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--dd-cool-gray);
  font-size: 13px; color: var(--dd-graphite);
}
.resource-contact-label { flex-shrink: 0; }
.resource-email {
  color: var(--dd-dark-blue); font-weight: 600; text-decoration: none;
  border-bottom: 1px dashed var(--dd-light-blue);
}
.resource-email:hover { color: var(--dd-yellow); border-bottom-color: var(--dd-yellow); }

/* --- Registration Form --- */

/* Registration net background */
.reg-net-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: url('Netting.svg') center / cover no-repeat;
  opacity: 0.12;
}

/* Bubble container */
.reg-bubbles {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden;
}

/* Floating bubbles */
.reg-bubble {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, rgba(125,155,193,0.15), rgba(125,155,193,0.03));
  border: 1px solid rgba(125,155,193,0.08);
  animation: regBubbleFloat var(--dur) ease-in-out infinite alternate;
}
@keyframes regBubbleFloat {
  0% { transform: translateY(0) scale(1); opacity: 0.4; }
  100% { transform: translateY(calc(var(--drift) * -1)) scale(1.05); opacity: 0.7; }
}

/* Floating phish characters */
.reg-phish-float {
  position: absolute; pointer-events: none;
  width: var(--size); height: var(--size);
  object-fit: contain;
  opacity: 0.12;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
  animation: regPhishFloat var(--dur) ease-in-out infinite alternate;
}
@keyframes regPhishFloat {
  0% { transform: translateY(0) rotate(var(--rot-start)); }
  100% { transform: translateY(calc(var(--drift) * -1)) rotate(var(--rot-end)); }
}

/* Registration overlay enhancements */
#derbyRegistrationOverlay {
  background: var(--dd-dark-blue);
  align-items: center;
}
#derbyRegistrationOverlay::before {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at 25% 15%, rgba(125,155,193,0.1) 0%, transparent 55%),
              radial-gradient(ellipse at 75% 85%, rgba(234,170,0,0.06) 0%, transparent 50%),
              linear-gradient(180deg, rgba(4,28,44,0.2) 0%, rgba(4,28,44,0.6) 100%);
  pointer-events: none; z-index: 0;
}
body.dark-mode #derbyRegistrationOverlay { background: #0a1520; }

.derby-registration-card {
  background: rgba(4, 28, 44, 0.92); border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(125,155,193,0.1);
  padding: 40px; text-align: center;
  max-width: 500px; width: 100%; margin: auto 0;
  position: relative; z-index: 2;
  border: 1px solid rgba(125,155,193,0.15);
  backdrop-filter: blur(16px);
  animation: regCardEntrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes regCardEntrance {
  0% { opacity: 0; transform: translateY(30px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.derby-registration-card img.derby-logo {
  max-width: 200px; height: auto;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)) drop-shadow(0 8px 24px rgba(234,170,0,0.2));
  transform: perspective(600px) rotateX(5deg);
  transition: transform 0.4s ease, filter 0.4s ease;
}
.derby-registration-card img.derby-logo:hover {
  transform: perspective(600px) rotateX(0deg) scale(1.05);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5)) drop-shadow(0 12px 36px rgba(234,170,0,0.3));
}
.derby-registration-card h2 {
  color: #EAAA00; font-size: 1.5rem; margin-bottom: 4px;
  text-shadow: 0 0 20px rgba(234,170,0,0.15);
}
.derby-registration-card .section-desc { color: #8899aa; }
body.dark-mode .derby-registration-card {
  background: rgba(10, 10, 30, 0.9); color: #e8e8f0;
  border-color: rgba(125,155,193,0.1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 80px rgba(125,155,193,0.06);
}
.registration-form { text-align: left; margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.registration-form.hidden { display: none; }
.reg-field-label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; font-weight: 600; color: #c0cad4;
}
body.dark-mode .reg-field-label { color: #ccccdd; }
.reg-field-input {
  padding: 10px 14px; border: 1px solid rgba(125,155,193,0.2); border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 14px; width: 100%;
  background: rgba(2,14,24,0.6); color: #e0e8f0;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.reg-field-input:focus { outline: none; border-color: var(--dd-yellow); box-shadow: 0 0 0 3px rgba(234,170,0,0.15); }
.reg-field-input[readonly] { background: rgba(125,155,193,0.08); color: #7D9BC1; cursor: not-allowed; }
body.dark-mode .reg-field-input { background: rgba(10,10,30,0.6); color: #e8e8f0; border-color: #3a3a5a; }
body.dark-mode .reg-field-input[readonly] { background: #0f0f1a; color: #8888aa; }
.reg-field-input::placeholder { color: rgba(125,155,193,0.5); }
.reg-field-input option { background: #041C2C; color: #e0e8f0; }
.reg-sso-tag { font-size: 10px; font-weight: 400; color: var(--dd-light-blue); font-style: italic; }
.reg-required { color: var(--dd-red); margin-left: 1px; display: inline; }
.reg-radio-group { border: none; padding: 0; margin: 0; }
.reg-radio-legend { font-size: 13px; font-weight: 600; color: #c0cad4; margin-bottom: 8px; }
.reg-radio-option { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; color: #c0cad4; cursor: pointer; padding: 4px 0; }
.reg-radio-option input[type="radio"], .reg-radio-option input[type="checkbox"] { accent-color: var(--dd-yellow); margin: 0; }
body.dark-mode .reg-radio-legend { color: #ccccdd; }
body.dark-mode .reg-radio-option { color: #d0d0e0; }
.reg-terms-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #c0cad4; margin-top: 4px;
}
.reg-terms-label input { accent-color: var(--dd-yellow); }
.reg-terms-label a { color: var(--dd-yellow); text-decoration: underline; text-underline-offset: 2px; }
.reg-terms-label a:hover { color: #ffc31a; }
body.dark-mode .reg-terms-label { color: #d0d0e0; }
.btn-register-submit {
  margin-top: 8px; padding: 14px; width: 100%;
  background: var(--dd-yellow); color: var(--dd-dark-blue); border: none;
  border-radius: var(--radius); font-family: var(--font-sans);
  font-size: 16px; font-weight: 700; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s; text-align: center;
}
.btn-register-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(234, 170, 0, 0.4); }
.reg-dd-logo { max-width: 160px; height: auto; margin-top: 24px; opacity: 0.8; display: block; margin-left: auto; margin-right: auto; }
body.dark-mode .reg-dd-logo { filter: invert(1); }
.reg-footer-text { margin-top: 24px; font-size: 12px; color: #7D9BC1; text-align: center; line-height: 1.6; }
.reg-countdown {
  display: inline-block; padding: 8px 20px; border-radius: 20px; margin-bottom: 12px;
  background: rgba(234, 170, 0, 0.12); color: var(--dd-yellow);
  font-size: 14px; font-weight: 700; letter-spacing: 0.05em;
  border: 1px solid rgba(234,170,0,0.2);
  animation: regCountdownPulse 3s ease-in-out infinite alternate;
}
@keyframes regCountdownPulse {
  0% { box-shadow: 0 0 8px rgba(234,170,0,0.1); }
  100% { box-shadow: 0 0 20px rgba(234,170,0,0.25); }
}
body.dark-mode .reg-countdown { background: rgba(234, 170, 0, 0.15); }
.reg-footer-brand { font-weight: 700; color: #e0e8f0; }
body.dark-mode .reg-footer-text { color: #8888aa; }
body.dark-mode .reg-footer-brand { color: #e8e8f0; }
body.dark-mode .derby-registration-card h2 { color: #EAAA00; }
body.dark-mode .derby-registration-card .section-desc { color: #7D9BC1; }
body.dark-mode .derby-registration-card .btn-survey { background: var(--dd-yellow); color: var(--dd-dark-blue); }
body.dark-mode .btn-register-submit { background: var(--dd-yellow); color: var(--dd-dark-blue); }
body.dark-mode .derby-registration-card .feedback-confirm { color: #66bb6a; }
body.dark-mode .derby-maintenance-card p { color: #aaaabc; }
body.dark-mode .derby-final-card .section-desc { color: #aaaabc; }
body.dark-mode .derby-final-stat .stat-value { color: #ffffff; }
body.dark-mode .derby-final-stat .stat-label { color: #aaaabc; }
body.dark-mode .derby-final-card .legend-subtitle { color: #ccccdd; }
body.dark-mode .derby-final-card .btn-survey { background: var(--dd-yellow); color: var(--dd-dark-blue); }
.registration-status { font-size: 13px; margin-top: 8px; text-align: center; }
.registration-status.error { color: var(--dd-red); }
.registration-status.warning { color: var(--dd-yellow); }
@media (max-width: 480px) {
  .derby-registration-card { padding: 24px 16px; }
}

/* --- Claim Prize Form --- */
.claim-form-row { display: flex; gap: 10px; margin-bottom: 10px; }
.claim-input-half { flex: 2; }
.claim-input-quarter { flex: 1; }
.claim-input-quarter select, .claim-input-quarter input { width: 100%; }
#claimPrizeCard { border-top: 3px solid var(--dd-yellow); }
body.dark-mode #claimPrizeCard { border-top-color: var(--dd-yellow); }

/* --- Address Validation Confirmation --- */
.address-confirm-box {
  margin-top: 12px; padding: 14px; border-radius: var(--radius);
  background: rgba(46, 125, 50, 0.06); border: 1px solid rgba(46, 125, 50, 0.2);
}
.address-confirm-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dd-graphite); margin-bottom: 4px; }
.address-confirm-value { font-size: 14px; font-weight: 600; color: var(--dd-dark-blue); margin-bottom: 10px; }
.address-confirm-btns { display: flex; gap: 10px; }
.address-confirm-note { font-size: 12px; color: var(--dd-graphite); margin-top: 8px; }
.address-validation-status { font-size: 12px; margin-top: 8px; }
.address-validation-status.validating { color: var(--dd-light-blue); }
.address-validation-status.error { color: var(--dd-red); }
.address-validation-status.success { color: #2e7d32; }
body.dark-mode .address-confirm-box { background: rgba(46, 125, 50, 0.1); border-color: rgba(46, 125, 50, 0.25); }
body.dark-mode .address-confirm-value { color: #ffffff; }
body.dark-mode .address-confirm-note { color: #8888aa; }

/* --- Prize Fulfillment --- */
.file-upload-input { font-family: var(--font-sans); font-size: 13px; }
.prize-upload-status { font-size: 13px; margin-top: 8px; }
.prize-upload-status.success { color: #2e7d32; }
.prize-upload-status.error { color: var(--dd-red); }
.prize-eligibility-summary { display: flex; gap: 16px; flex-wrap: wrap; }
.prize-elig-stat { text-align: center; padding: 8px 16px; background: rgba(125, 155, 193, 0.06); border-radius: var(--radius); }
.prize-elig-stat .stat-value { font-size: 24px; }
body.dark-mode .prize-elig-stat { background: #1e1e38; }

/* --- Scrollable report tables --- */
.report-table-scroll {
  max-height: 750px;
  overflow-y: auto;
  border: 1px solid var(--dd-cool-gray);
  border-radius: var(--radius);
}
.report-table-scroll .leaderboard-table thead { position: sticky; top: 0; z-index: 2; }
body.dark-mode .report-table-scroll { border-color: #2a2a4a; }

/* --- Phish Characters --- */
.phish-characters { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.phish-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 12px; border-radius: var(--radius);
  background: rgba(125, 155, 193, 0.06); border: 1px solid rgba(125, 155, 193, 0.12);
  text-decoration: none; color: var(--dd-dark-blue); cursor: pointer;
  font-family: var(--font-sans);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.phish-card:hover { transform: translateY(-4px); border-color: var(--dd-yellow); box-shadow: 0 4px 12px rgba(234, 170, 0, 0.15); }
.phish-card:focus-visible { outline: 2px solid var(--dd-yellow); outline-offset: 2px; }
.phish-avatar { width: 120px; height: 120px; object-fit: contain; background: transparent; transition: transform 0.3s ease; }
.phish-card:hover .phish-avatar { transform: scale(1.15); }
.phish-name { font-size: 14px; font-weight: 700; }
.phish-type { font-size: 11px; color: var(--dd-graphite); text-align: center; }
body.dark-mode .phish-type { color: #8888aa; }
.phish-avatar-placeholder {
  width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 700; color: var(--dd-graphite);
  transition: transform 0.3s ease;
}
.phish-placeholder:hover .phish-avatar-placeholder { transform: scale(1.15); }
.phish-coming-soon { font-size: 10px; color: var(--dd-graphite); text-transform: uppercase; letter-spacing: 0.05em; }
.phish-placeholder { opacity: 0.6; }
/* Coming-soon character with an uploaded image: grey it out so it reads as muted like the
   rest of the tile (the .phish-placeholder parent already lowers opacity). Unchecking
   "coming soon" drops this class and the image renders full-color. */
.phish-avatar-coming-soon { filter: grayscale(1); }
body.dark-mode .phish-card { background: #1e1e38; border-color: #2a2a4a; color: #e8e8f0; }
body.dark-mode .phish-card:hover { border-color: var(--dd-yellow); }
body.dark-mode .phish-avatar-placeholder { background: #2a2a4a; color: #8888aa; }
body.dark-mode .phish-name { color: #e8e8f0; }
body.dark-mode .phish-coming-soon { color: #8888aa; }

/* --- Phish Dialogue --- */
.phish-dialogue {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(4, 28, 44, 0.6); z-index: 600;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.phish-dialogue.hidden { display: none; }
.phish-dialogue-card {
  background: var(--dd-white); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 28px; max-width: 420px; width: 100%; position: relative;
}
.phish-dialogue-close {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  font-size: 22px; cursor: pointer; color: var(--dd-graphite); line-height: 1;
}
.phish-dialogue-close:hover { color: var(--dd-dark-blue); }
.phish-dialogue-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.phish-dialogue-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.phish-dialogue-name { font-size: 20px; font-weight: 700; color: var(--dd-dark-blue); margin: 0; }
.phish-dialogue-species { font-size: 12px; color: var(--dd-light-blue); font-style: italic; }
.phish-dialogue-stats { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.phish-stat-row { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.phish-stat-label { font-weight: 700; color: var(--dd-dark-blue); }
.phish-stat-value { color: var(--dd-graphite); line-height: 1.5; }
.phish-dialogue-learn { display: inline-block; font-size: 14px; text-align: center; width: 100%; }
body.dark-mode .phish-dialogue { background: rgba(0, 0, 0, 0.7); }
body.dark-mode .phish-dialogue-card { background: #1a1a30; }
body.dark-mode .phish-dialogue-close { color: #8888aa; }
body.dark-mode .phish-dialogue-close:hover { color: #e8e8f0; }
body.dark-mode .phish-dialogue-name { color: #ffffff; }
body.dark-mode .phish-stat-label { color: #ccccdd; }
body.dark-mode .phish-stat-value { color: #aaaabc; }

/* --- Direct Report Summary Dialogue --- */
.dr-dialogue {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(4, 28, 44, 0.6); z-index: 600;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.dr-dialogue.hidden { display: none; }
.dr-dialogue-card {
  background: var(--dd-white); border-radius: var(--radius); box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  padding: 28px; max-width: 440px; width: 100%; position: relative;
}
.dr-dialogue-close {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  font-size: 22px; cursor: pointer; color: var(--dd-graphite); line-height: 1;
}
.dr-dialogue-close:hover { color: var(--dd-dark-blue); }
.dr-dialogue-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.dr-dialogue-avatar { width: 48px; height: 48px; border-radius: 50%; background: rgba(234, 170, 0, 0.1); display: flex; align-items: center; justify-content: center; font-size: 24px; overflow: hidden; }
.dr-dialogue-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dr-dialogue-name { font-size: 18px; font-weight: 700; color: var(--dd-dark-blue); margin: 0; }
.dr-dialogue-division { font-size: 12px; color: var(--dd-graphite); }
.dr-dialogue-tier { margin-bottom: 10px; }
.dr-dialogue-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.dr-dialogue-breakdown { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.dr-breakdown-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: var(--radius); font-size: 13px; }
.dr-breakdown-label { font-weight: 700; color: var(--dd-dark-blue); }
.dr-breakdown-detail { flex: 1; font-size: 11px; color: var(--dd-graphite); margin-left: 10px; text-align: center; }
.dr-breakdown-value { font-weight: 700; min-width: 50px; text-align: right; }
.dr-positive { background: rgba(46, 125, 50, 0.06); }
.dr-positive .dr-breakdown-value { color: #2e7d32; }
.dr-negative { background: rgba(224, 25, 51, 0.05); }
.dr-negative .dr-breakdown-value { color: var(--dd-red); }
.dr-bonus { background: rgba(234, 170, 0, 0.06); }
.dr-bonus .dr-breakdown-value { color: #8B6914; }
.dr-breakdown-divider { height: 1px; background: var(--dd-cool-gray); margin: 2px 0; }
.dr-total { background: rgba(234, 170, 0, 0.08); border: 1px solid rgba(234, 170, 0, 0.2); }
.dr-total .dr-breakdown-label { font-size: 14px; }
.dr-total .dr-breakdown-value { font-size: 18px; color: var(--dd-dark-blue); }
.dr-dialogue-stats { display: flex; gap: 16px; justify-content: center; }
.dr-stat { text-align: center; }
.dr-stat-value { display: block; font-size: 20px; font-weight: 700; color: var(--dd-dark-blue); }
.dr-stat-label { font-size: 11px; color: var(--dd-graphite); text-transform: uppercase; letter-spacing: 0.04em; }
.dr-name-link { color: var(--dd-dark-blue); text-decoration: none; font-weight: 600; }
.dr-name-link:hover { color: var(--dd-light-blue); text-decoration: underline; }
body.dark-mode .dr-name-link { color: #e8e8f0; }
body.dark-mode .dr-name-link:hover { color: #7D9BC1; }
body.dark-mode .dr-dialogue { background: rgba(0, 0, 0, 0.7); }
body.dark-mode .dr-dialogue-card { background: #1a1a30; }
body.dark-mode .dr-dialogue-close { color: #8888aa; }
body.dark-mode .dr-dialogue-close:hover { color: #e8e8f0; }
body.dark-mode .dr-dialogue-name { color: #ffffff; }
body.dark-mode .dr-dialogue-division { color: #8888aa; }
body.dark-mode .dr-breakdown-label { color: #e8e8f0; }
body.dark-mode .dr-breakdown-detail { color: #8888aa; }
body.dark-mode .dr-positive { background: rgba(46, 125, 50, 0.1); }
body.dark-mode .dr-negative { background: rgba(224, 25, 51, 0.08); }
body.dark-mode .dr-bonus { background: rgba(234, 170, 0, 0.08); }
body.dark-mode .dr-breakdown-divider { background: #2a2a4a; }
body.dark-mode .dr-total { background: rgba(234, 170, 0, 0.12); border-color: rgba(234, 170, 0, 0.25); }
body.dark-mode .dr-total .dr-breakdown-value { color: #ffffff; }
body.dark-mode .dr-stat-value { color: #ffffff; }
body.dark-mode .dr-stat-label { color: #8888aa; }

/* --- Announcement Banner --- */
.announcement-banner {
  background: var(--dd-yellow); color: var(--dd-dark-blue);
  padding: 10px 24px; text-align: center; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  position: relative;
}

/* --- Grace Period Banner --- */
.grace-period-banner {
  background: var(--dd-yellow); color: var(--dd-dark-blue);
  padding: 12px 24px; text-align: center; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-sans);
}
.grace-period-banner.hidden { display: none; }
.grace-period-icon { font-size: 18px; }
.grace-period-text { letter-spacing: 0.01em; }

/* --- Announcement History --- */
.announcement-schedule { margin-top: 12px; }
.scheduled-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.scheduled-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: rgba(234, 170, 0, 0.06);
  border: 1px solid rgba(234, 170, 0, 0.15); border-radius: var(--radius);
  font-size: 13px;
}
.scheduled-item-msg { flex: 1; color: var(--dd-dark-blue); }
.scheduled-item-date { font-size: 11px; color: var(--dd-graphite); white-space: nowrap; }
.scheduled-item-status { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.scheduled-item-status.pending { color: var(--dd-yellow); }
.scheduled-item-status.published { color: #2e7d32; }
.scheduled-item-cancel {
  background: none; border: 1px solid var(--dd-cool-gray); border-radius: 4px;
  padding: 2px 8px; font-size: 11px; cursor: pointer; color: var(--dd-graphite);
  font-family: var(--font-sans);
}
.scheduled-item-cancel:hover { border-color: var(--dd-red); color: var(--dd-red); }
body.dark-mode .scheduled-item { background: rgba(234, 170, 0, 0.08); border-color: rgba(234, 170, 0, 0.2); }
body.dark-mode .scheduled-item-msg { color: #e8e8f0; }
body.dark-mode .scheduled-item-cancel { color: #aaaabc; border-color: #3a3a5a; }

.announcement-history-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.announcement-history-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: rgba(125, 155, 193, 0.06);
  border: 1px solid rgba(125, 155, 193, 0.12); border-radius: var(--radius);
  font-size: 13px;
}
.announcement-history-msg { flex: 1; color: var(--dd-dark-blue); }
.announcement-history-date { font-size: 11px; color: var(--dd-graphite); white-space: nowrap; }
.announcement-history-reuse {
  background: none; border: 1px solid var(--dd-cool-gray); border-radius: 4px;
  padding: 2px 8px; font-size: 11px; cursor: pointer; color: var(--dd-dark-blue);
  font-family: var(--font-sans);
}
.announcement-history-reuse:hover { border-color: var(--dd-yellow); background: rgba(234, 170, 0, 0.06); }
.announcement-close {
  background: none; border: none; font-size: 20px; cursor: pointer;
  color: var(--dd-dark-blue); padding: 0 4px; line-height: 1;
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
}
.announcement-close:hover { opacity: 0.7; }

/* --- Announcement Editor --- */
.announcement-form { display: flex; gap: 10px; align-items: center; }
.announcement-input {
  flex: 1; padding: 10px 14px; border: 1px solid var(--dd-cool-gray);
  border-radius: var(--radius); font-family: var(--font-sans); font-size: 14px;
}
.announcement-input:focus { outline: none; border-color: var(--dd-light-blue); box-shadow: 0 0 0 3px rgba(125,155,193,0.2); }
.ann-icon-btn { transition: border-color 0.15s, transform 0.1s; }
.ann-icon-btn:hover { border-color: var(--dd-yellow) !important; transform: scale(1.1); }
.ann-icon-btn:active { transform: scale(0.9); }
.merge-pill { display:inline-block;padding:4px 10px;font-size:11px;font-weight:600;border-radius:12px;border:1px solid var(--dd-light-blue);background:rgba(125,155,193,0.08);color:var(--dd-dark-blue);cursor:pointer;transition:all 0.15s;font-family:var(--font-sans); }
.merge-pill:hover { background:var(--dd-yellow);color:var(--dd-dark-blue);border-color:var(--dd-yellow);transform:scale(1.05); }
.merge-pill:active { transform:scale(0.95); }
body.dark-mode .merge-pill { border-color:rgba(125,155,193,0.4);background:rgba(125,155,193,0.12);color:#ccc; }
body.dark-mode .merge-pill:hover { background:var(--dd-yellow);color:var(--dd-dark-blue);border-color:var(--dd-yellow); }

/* --- Wrapped / Year in Review --- */
.wrapped-content { margin-bottom:16px; }
.wrapped-cards { display:grid;gap:12px; }
.wrapped-card {
  display:flex;align-items:center;gap:16px;padding:16px 20px;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;border-left:4px solid var(--accent, var(--dd-yellow));
  animation:wrappedReveal 0.5s ease both;
  backdrop-filter:blur(4px);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.wrapped-card:hover { transform:translateX(4px);box-shadow:0 4px 16px rgba(0,0,0,0.2); }
.wrapped-card-icon { font-size:32px;flex-shrink:0; }
.wrapped-card-body { flex:1;min-width:0; }
.wrapped-card-label { display:block;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;color:rgba(255,255,255,0.7);margin-bottom:2px; }
.wrapped-card-value { display:block;font-size:24px;font-weight:700;color:var(--accent, var(--dd-yellow));line-height:1.2; }
.wrapped-card-sub { display:block;font-size:12px;color:rgba(255,255,255,0.6);margin-top:2px; }
.wrapped-badges { animation:wrappedReveal 0.5s ease both;text-align:center;margin-top:16px;padding:16px;background:rgba(234,170,0,0.06);border-radius:12px;border:1px solid rgba(234,170,0,0.15); }
@keyframes wrappedReveal {
  from { opacity:0;transform:translateY(16px); }
  to { opacity:1;transform:translateY(0); }
}
/* Tier badges in dark overlay context */
.derby-final-card .tier-badge { color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.3); }
.derby-final-card .tier-badge.tier-fighter { background:#f49821;color:#fff; }
.derby-final-card .tier-badge.tier-defender { background:#6a89b1;color:#fff; }
.derby-final-card .tier-badge.tier-champion { background:#d49800;color:#fff; }
.derby-final-card .tier-badge.tier-participant { background:#888B8D;color:#fff; }

/* Gold shimmer text animation for Wrapped tier */
.wrapped-shimmer {
  background: linear-gradient(90deg, #EAAA00 0%, #ffffff 20%, #EAAA00 40%, #ffffff 60%, #EAAA00 80%, #ffffff 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerGold 2.5s linear infinite;
  font-size: 28px !important;
}
@keyframes shimmerGold {
  0% { background-position: 0% center; }
  100% { background-position: 300% center; }
}

/* --- Insight tiles --- */
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* --- Score Breakdown --- */
.score-breakdown { display: flex; flex-direction: column; gap: 10px; }
.breakdown-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius); }
.breakdown-label { font-size: 14px; font-weight: 600; color: var(--dd-dark-blue); min-width: 140px; }
.breakdown-detail { flex: 1; font-size: 12px; color: var(--dd-graphite); }
.breakdown-value { font-size: 16px; font-weight: 700; min-width: 60px; text-align: right; }
.breakdown-positive { background: rgba(46, 125, 50, 0.05); }
.breakdown-positive .breakdown-value { color: #2e7d32; }
.breakdown-negative { background: rgba(224, 25, 51, 0.05); }
.breakdown-negative .breakdown-value { color: var(--dd-red); }
.breakdown-divider { height: 1px; background: var(--dd-cool-gray); margin: 4px 0; }
.breakdown-total { background: rgba(234, 170, 0, 0.08); border: 1px solid rgba(234, 170, 0, 0.2); }
.breakdown-total .breakdown-label { font-size: 15px; }
.breakdown-total .breakdown-value { font-size: 20px; color: var(--dd-dark-blue); }
body.dark-mode .breakdown-label { color: #e8e8f0; }
body.dark-mode .breakdown-detail { color: #8888aa; }
body.dark-mode .breakdown-positive { background: rgba(46, 125, 50, 0.1); }
body.dark-mode .breakdown-negative { background: rgba(224, 25, 51, 0.08); }
body.dark-mode .breakdown-divider { background: #2a2a4a; }
body.dark-mode .breakdown-total { background: rgba(234, 170, 0, 0.12); border-color: rgba(234, 170, 0, 0.25); }
body.dark-mode .breakdown-total .breakdown-value { color: #ffffff; }
.breakdown-resources-link { font-size: 12px; color: var(--dd-graphite); margin-top: 10px; text-align: left; }
.breakdown-resources-link .inline-nav-link { color: var(--dd-light-blue); text-decoration: underline; cursor: pointer; }
.breakdown-resources-link .inline-nav-link:hover { color: var(--dd-yellow); }
body.dark-mode .breakdown-resources-link { color: #8888aa; }
body.dark-mode .breakdown-resources-link .inline-nav-link { color: #7D9BC1; }
body.dark-mode .inline-nav-link { color: #7D9BC1; }
body.dark-mode a.inline-nav-link { color: #7D9BC1 !important; }

/* --- Scoring Explainer (Resources) --- */
.scoring-explainer { display: flex; flex-direction: column; gap: 16px; }
.scoring-category { border-radius: var(--radius); padding: 16px; }
.scoring-positive { background: rgba(46, 125, 50, 0.04); border: 1px solid rgba(46, 125, 50, 0.15); }
.scoring-negative { background: rgba(224, 25, 51, 0.04); border: 1px solid rgba(224, 25, 51, 0.12); }
.scoring-bonus { background: rgba(234, 170, 0, 0.04); border: 1px solid rgba(234, 170, 0, 0.15); }
.scoring-category-title { font-size: 14px; font-weight: 700; color: var(--dd-dark-blue); margin-bottom: 10px; }
.scoring-max { font-size: 11px; font-weight: 400; color: var(--dd-graphite); margin-left: 8px; }
.scoring-items { display: flex; flex-direction: column; gap: 6px; }
.scoring-item { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 4px 0; }
.scoring-action { color: var(--dd-dark-blue); }
.scoring-pts { font-weight: 700; min-width: 50px; text-align: right; }
.scoring-positive .scoring-pts { color: #2e7d32; }
.scoring-negative .scoring-pts { color: var(--dd-red); }
.scoring-bonus .scoring-pts { color: #8B6914; }
.scoring-note { font-size: 11px; color: var(--dd-graphite); margin-top: 10px; font-style: normal; }
body.dark-mode .scoring-positive { background: rgba(46, 125, 50, 0.08); border-color: rgba(46, 125, 50, 0.2); }
body.dark-mode .scoring-negative { background: rgba(224, 25, 51, 0.06); border-color: rgba(224, 25, 51, 0.15); }
body.dark-mode .scoring-bonus { background: rgba(234, 170, 0, 0.08); border-color: rgba(234, 170, 0, 0.2); }
body.dark-mode .scoring-category-title { color: #e8e8f0; }
body.dark-mode .scoring-action { color: #d0d0e0; }
body.dark-mode .scoring-note { color: #8888aa; }
body.dark-mode .scoring-max { color: #8888aa; }

/* --- Scoring Actions List (Admin) --- */
.scoring-actions-list { display: flex; flex-direction: column; gap: 6px; }
.scoring-action-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border: 1px solid var(--dd-cool-gray); border-radius: 8px;
  background: var(--dd-white); cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.scoring-action-item:hover {
  border-color: var(--dd-light-blue); box-shadow: 0 2px 8px rgba(4, 28, 44, 0.08);
}
.scoring-action-item:focus-visible { outline: 2px solid var(--dd-yellow); outline-offset: 2px; }
.scoring-action-toggle { flex-shrink: 0; }
.scoring-action-toggle input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.scoring-action-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scoring-action-name { font-size: 14px; font-weight: 600; color: var(--dd-dark-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scoring-action-cat { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.scoring-action-pts { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 50px; text-align: right; }
.scoring-action-edit-btn {
  flex-shrink: 0; background: none; border: none; font-size: 16px; cursor: pointer;
  opacity: 0.4; transition: opacity 0.2s; padding: 4px 8px; border-radius: 4px;
}
.scoring-action-item:hover .scoring-action-edit-btn { opacity: 1; }
.scoring-action-edit-btn:hover { background: rgba(125, 155, 193, 0.1); }
body.dark-mode .scoring-action-item { background: #1a1a30; border-color: #2a2a4a; }
body.dark-mode .scoring-action-item:hover { border-color: var(--dd-light-blue); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
body.dark-mode .scoring-action-name { color: #e8e8f0; }
body.dark-mode .scoring-action-edit-btn:hover { background: rgba(125, 155, 193, 0.15); }

/* --- Score column alignment (training + sim tables) --- */
th.col-points, td.col-points { text-align: center !important; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 60px; }

/* --- Section header edit buttons (My Performance + Resources) --- */
.section-header-edit-btn {
  background: none; border: none; font-size: 14px; cursor: pointer;
  opacity: 0.3; transition: opacity 0.2s; padding: 2px 6px; border-radius: 4px;
  position: absolute; top: 8px; right: 8px; z-index: 2;
}
.perf-section { position: relative; }
.perf-section:hover .section-header-edit-btn { opacity: 0.7; }
.section-header-edit-btn:hover { opacity: 1 !important; background: rgba(125, 155, 193, 0.1); }
body.dark-mode .section-header-edit-btn:hover { background: rgba(125, 155, 193, 0.15); }

.insight-tile {
  background: linear-gradient(180deg, rgba(125, 155, 193, 0.06) 0%, rgba(125, 155, 193, 0.12) 100%);
  border: 1px solid rgba(125, 155, 193, 0.15);
  border-radius: var(--radius); padding: 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.insight-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 8px 20px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
}
.insight-icon { font-size: 24px; }
.insight-value { font-size: 28px; font-weight: 700; color: var(--dd-dark-blue); }
.insight-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dd-dark-blue); }
.insight-desc { font-size: 11px; color: var(--dd-graphite); }

/* --- Points Trend Chart (pure CSS bar chart) --- */
.trend-chart { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding: 8px 0; overflow-x: auto; overflow-y: visible; }
.trend-bar-wrap {
  flex: 0 0 auto; min-width: 32px; max-width: 48px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  height: 100%; justify-content: flex-end; position: relative; cursor: pointer;
}
.trend-bar {
  width: 100%; max-width: 48px; border-radius: 6px 6px 0 0;
  transition: height 0.4s ease, opacity 0.2s, transform 0.2s ease; min-height: 4px; position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  overflow: hidden;
}
.trend-bar::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
  border-radius: 6px 6px 0 0; pointer-events: none;
}
.trend-bar-wrap:hover .trend-bar { transform: scaleY(1.06); opacity: 0.9; }
.trend-bar.positive { background: linear-gradient(180deg, #f0c030 0%, var(--dd-yellow) 100%); }
.trend-bar.negative { background: linear-gradient(180deg, #f04050 0%, var(--dd-red) 100%); opacity: 0.7; }
.trend-bar.neutral { background: linear-gradient(180deg, #e0e0de 0%, var(--dd-cool-gray) 100%); }
.trend-label { font-size: 9px; color: var(--dd-graphite); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; }
.trend-pts { font-size: 10px; font-weight: 700; color: var(--dd-dark-blue); }

/* --- Trend Bar Tooltip --- */
.trend-tooltip {
  display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: var(--dd-white); border: 1px solid var(--dd-cool-gray); border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(4, 28, 44, 0.15); padding: 12px; min-width: 200px;
  z-index: 50; text-align: left; margin-bottom: 8px;
}
.trend-bar-wrap:hover .trend-tooltip { display: block; }
.trend-bar-wrap.trend-active .trend-tooltip { display: block; }
.trend-tooltip strong { font-size: 13px; color: var(--dd-dark-blue); display: block; margin-bottom: 4px; }
.trend-tooltip-pts { font-size: 14px; font-weight: 700; color: var(--dd-dark-blue); display: block; margin-bottom: 6px; }
.trend-tooltip-details { font-size: 12px; color: var(--dd-graphite); line-height: 1.6; }
body.dark-mode .trend-tooltip { background: #1a1a30; border-color: #2a2a4a; }
body.dark-mode .trend-tooltip strong { color: #ffffff; }
body.dark-mode .trend-tooltip-pts { color: #ffffff; }
body.dark-mode .trend-tooltip-details { color: #aaaabc; }

/* --- Heatmap cell coloring --- */
.heatmap-good { background: rgba(46, 125, 50, 0.1); }
.heatmap-warn { background: rgba(234, 170, 0, 0.1); }
.heatmap-bad { background: rgba(224, 25, 51, 0.1); }

/* --- Admin export buttons --- */
.admin-export-btns { display: flex; gap: 8px; }
.btn-export-secondary { background: var(--dd-light-blue); }
.btn-export-secondary:hover { background: #6a89ad; }

/* --- Responsive: Small Laptop (1024px) --- */
@media (max-width: 1024px) {
  .admin-export-btns { flex-wrap: wrap; }
  .risky-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .failure-context-grid { grid-template-columns: repeat(2, 1fr); }
  .watermark img { width: 350px; }
  .phish-characters { grid-template-columns: repeat(3, 1fr); }
  /* Header: shrink brand text and hide separator at smaller laptop widths */
  .brand-name { font-size: 16px; }
  .brand-sub { font-size: 12px; }
  .brand-powered { font-size: 9px; }
  .brand-sep { font-size: 14px; }
  .brand { gap: 6px; }
  .header-meta { gap: 10px; }
  .derby-countdown { font-size: 11px; padding: 4px 10px; }
  /* Nav: allow horizontal scroll */
  .nav-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .nav-tab { white-space: nowrap; font-size: 13px; padding: 12px 14px; }
}

/* --- Responsive: Tablet (768px) --- */
@media (max-width: 768px) {
  .stats-bar, .team-stats { grid-template-columns: repeat(2, 1fr); }
  .perf-grid { grid-template-columns: 1fr; }
  .header-inner { flex-direction: column; height: auto; padding: 10px 0; gap: 6px; }
  .header-meta { flex-wrap: wrap; justify-content: center; gap: 8px; }
  /* Hide subtitle and separator to prevent brand text stacking */
  .brand-sep { display: none; }
  .brand-sub-group { display: none; }
  .brand-name { font-size: 15px; }
  .nav-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 0; }
  .nav-tab { padding: 12px 14px; font-size: 13px; white-space: nowrap; }
  .controls, .admin-toolbar { flex-direction: column; }
  .admin-filters { flex-direction: column; gap: 8px; }
  .admin-export-btns { flex-wrap: wrap; gap: 6px; }
  .legend-items { flex-direction: column; gap: 12px; }
  .risky-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .insight-grid { grid-template-columns: 1fr; }
  .failure-context-grid { grid-template-columns: 1fr; }
  .admin-section-tiles { grid-template-columns: repeat(2, 1fr); }
  .admin-dashboard-summary { padding: 16px; }
  .admin-summary-value { font-size: 22px; }
  .derby-date-row { flex-direction: column; gap: 8px; }
  .derby-config-grid { gap: 12px; }
  .view-toggle { flex-wrap: wrap; }
  .toggle-btn { padding: 8px 14px; font-size: 12px; }
  .announcement-form { flex-direction: column; gap: 8px; }
  .claim-form-row { flex-direction: column; }
  .claim-input-half, .claim-input-quarter { flex: 1; }
  .section-header-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .derby-mode-header { flex-direction: column; align-items: flex-start; }
  .prize-eligibility-summary { flex-direction: column; }
  .feedback-summary { flex-wrap: wrap; gap: 8px; }
  .multi-select-group { flex-direction: column; }
  .watermark img { width: 250px; }
  .feedback-widget { bottom: 16px; right: 16px; }
  .feedback-panel { width: 260px; }
  .feedback-fab { width: 46px; height: 46px; font-size: 20px; }
  .derby-final-card, .derby-maintenance-card { padding: 24px 16px; }
  .derby-final-stats { flex-direction: column; gap: 8px; }
  .trend-chart { height: 100px; }
  .tier-track { height: 28px; }
  .tier-label-zone { font-size: 9px; }
  .brand-name { font-size: 16px; }
  .brand-sub { font-size: 12px; }
  .derby-countdown { font-size: 10px; }
  .btn-section-export { font-size: 10px; padding: 2px 6px; }
  .scheduled-item { flex-direction: column; gap: 6px; }
  .announcement-history-item { flex-direction: column; gap: 6px; }
  .phish-characters { grid-template-columns: repeat(3, 1fr); }
}

/* --- Responsive: Phone (480px) --- */
@media (max-width: 480px) {
  .stats-bar, .team-stats, .perf-grid { grid-template-columns: 1fr; }
  .main { padding: 12px; }
  .risky-grid-5 { grid-template-columns: 1fr; }
  .admin-section-tiles { grid-template-columns: 1fr; }
  .admin-dashboard-summary { grid-template-columns: 1fr; padding: 16px; gap: 12px; }
  .admin-summary-value { font-size: 24px; }
  .stat-value { font-size: 24px; }
  .score-rank-inline { font-size: 11px; }
  .profile-name { font-size: 20px; }
  .section-title { font-size: 12px; }
  .leaderboard-table { font-size: 12px; }
  .leaderboard-table th { padding: 8px 10px; font-size: 10px; }
  .leaderboard-table td { padding: 8px 10px; }
  .watermark img { width: 180px; }
  .feedback-panel { width: calc(100vw - 32px); right: -8px; }
  .derby-final-card h2, .derby-maintenance-card h2 { font-size: 18px; }
  .btn-export { font-size: 12px; padding: 8px 12px; }
  .toggle-btn { padding: 8px 10px; font-size: 11px; }
  .nav-tab { padding: 10px 10px; font-size: 12px; }
  .tier-label-zone { font-size: 8px; }
  .trend-chart { height: 80px; }
  .trend-pts { font-size: 8px; }
  .trend-label { font-size: 7px; }
  .insight-value { font-size: 22px; }
  .phish-card { padding: 12px 8px; }
  .phish-avatar { width: 90px; height: 90px; }
  .phish-name { font-size: 12px; }
  .phish-type { font-size: 10px; }
  .phish-characters { grid-template-columns: repeat(2, 1fr); }
  /* Header: minimal on phone */
  .header-inner { padding: 8px 0; gap: 4px; }
  .brand-name { font-size: 14px; }
  .header-meta { gap: 6px; }
  .derby-countdown { font-size: 9px; padding: 3px 8px; }
  /* Tables: horizontal scroll wrapper */
  .report-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .leaderboard-table { min-width: 500px; }
  /* Overlay cards */
  .derby-registration-card { padding: 20px 14px; }
  .derby-final-card, .derby-maintenance-card { padding: 20px 14px; }
}
}

/* --- Role Management --- */
.role-add-form { background: var(--dd-cool-gray); border-radius: 8px; padding: 16px; margin-bottom: 8px; }
.role-add-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.role-input {
  padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 13px;
  font-family: inherit; background: var(--dd-white); color: var(--dd-dark-blue);
}
.role-input:focus { outline: 2px solid var(--dd-yellow); border-color: var(--dd-yellow); }
.role-checkbox-group { display: flex; gap: 14px; align-items: center; }
.role-checkbox-label { display: flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.role-checkbox-label input[disabled] { opacity: 0.5; cursor: not-allowed; }
.role-add-status { font-size: 12px; margin-top: 8px; min-height: 18px; }
.role-add-status.error { color: var(--dd-red); }
.role-add-status.success { color: #2e7d32; }
.role-filter-row { display: flex; gap: 12px; flex-wrap: wrap; }
.role-badge {
  display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 11px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}
.role-badge-admin { background: var(--dd-yellow); color: var(--dd-dark-blue); }
.role-badge-readonly { background: var(--dd-light-blue); color: var(--dd-dark-blue); }
.role-badge-participant { background: var(--dd-cool-gray); color: var(--dd-dark-blue); }
.btn-role-remove {
  background: none; border: 1px solid var(--dd-red); color: var(--dd-red);
  padding: 3px 10px; border-radius: 4px; font-size: 11px; cursor: pointer;
  font-family: inherit; transition: all 0.2s;
}
.btn-role-remove:hover { background: var(--dd-red); color: var(--dd-white); }
.btn-role-remove:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-role-remove:disabled:hover { background: none; color: var(--dd-red); }
.readonly-disabled { opacity: 0.5; cursor: not-allowed; }

/* Dark mode role styles */
body.dark-mode .role-add-form { background: #1a1a30; }
body.dark-mode .role-input { background: #12122a; color: #e8e8f0; border-color: #2a2a4a; }
body.dark-mode .role-badge-participant { background: #2a2a4a; color: #aaaabc; }
body.dark-mode .role-badge-readonly { background: rgba(125,155,193,0.3); color: #c0d0e0; }
body.dark-mode .btn-role-remove { border-color: #ff6b6b; color: #ff6b6b; }
body.dark-mode .btn-role-remove:hover { background: #ff6b6b; color: #1a1a30; }

   SCORING & AWARDS CONFIGURATION
.scoring-section { border: 1px solid var(--dd-cool-gray); border-radius: var(--radius); padding: 16px; }
.scoring-section-toggle { margin: 0; padding: 4px 0; user-select: none; }
.scoring-section-toggle:hover { color: var(--dd-yellow); }
.scoring-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.scoring-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: rgba(0,0,0,0.02); border-radius: var(--radius); }
.scoring-field span { font-size: 13px; flex: 1; }
.scoring-input { width: 80px; padding: 6px 8px; border: 1px solid var(--dd-cool-gray); border-radius: 4px; font-size: 13px; text-align: center; background: var(--bg-card, #fff); color: var(--text-primary, var(--dd-dark-blue)); }
.scoring-input:focus { outline: 2px solid var(--dd-yellow); border-color: var(--dd-yellow); }
input[type="file"].scoring-input { width: auto; min-width: 180px; text-align: left; }
.scoring-group-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.btn-sm { padding: 4px 10px; font-size: 12px; min-width: auto; }
#scoringTierTable .scoring-input,
#scoringBadgeTable .scoring-input { width: 100%; text-align: left; }
#scoringTierTable td, #scoringBadgeTable td { padding: 6px 8px; }

/* Dark mode overrides */
.dark-mode .scoring-field { background: rgba(255,255,255,0.04); }
.dark-mode .scoring-input { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: #fff; }
.dark-mode .scoring-section { border-color: rgba(255,255,255,0.12); }

/* Achievement Certificates */
.certificate-cards-grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.certificate-thumb-card {
  background: var(--dd-white, #fff);
  border-radius: 8px;
  border: 1px solid var(--dd-cool-gray, #D0D0CE);
  padding: 12px;
  width: 180px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-align: center;
}
.certificate-thumb-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.certificate-thumb-card:focus-visible {
  outline: 2px solid var(--dd-yellow, #EAAA00);
  outline-offset: 2px;
}
.certificate-thumb-preview {
  width: 100%;
  aspect-ratio: 11 / 8.5;
  overflow: hidden;
  border-radius: 4px;
  background: #f8f8f8;
  margin-bottom: 8px;
}
.certificate-thumb-preview canvas {
  width: 100%;
  height: auto;
  display: block;
}
.certificate-thumb-card .certificate-title {
  font-weight: 700;
  font-size: 12px;
  display: block;
  line-height: 1.3;
}
[data-theme="dark"] .certificate-thumb-card {
  background: var(--dd-dark-blue, #041C2C);
  border-color: #2a4a6b;
}
[data-theme="dark"] .certificate-thumb-preview {
  background: #0a2a40;
}
.tier-cert-thumb {
  width: 40px;
  height: 30px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--dd-cool-gray, #D0D0CE);
  margin-left: 6px;
  vertical-align: middle;
}

   RESPONSIVE BREAKPOINTS
   Tablet: ≤768px (iPad — pilots)
   Phone: ≤480px (iPhone — flight attendants)

/* --- Tablet (≤768px) --- */
@media screen and (max-width: 768px) {
  /* Header */
  .header-inner { flex-wrap: wrap; height: auto; padding: 12px 0; gap: 8px; }
  .brand { flex-shrink: 0; }
  .header-meta { flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
  .refresh-info { align-items: flex-end; }
  .derby-countdown { font-size: 12px; }

  /* Nav tabs — horizontal scroll */
  .nav-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 12px; }
  .nav-inner::-webkit-scrollbar { display: none; }
  .nav-tab { padding: 12px 14px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }
  .nav-profile-btn { padding: 6px 12px; font-size: 12px; }

  /* Main content */
  .main { padding: 16px 12px; }

  /* Stat cards — 2 columns */
  .stats-bar, .team-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-card { padding: 16px 12px; }
  .stat-value { font-size: 26px; }
  .stat-label { font-size: 11px; }

  /* Tables */
  .leaderboard-table th, .leaderboard-table td { padding: 10px 10px; font-size: 13px; }

  /* Performance sections */
  .perf-section { padding: 16px; }
  .section-title { font-size: 13px; }

  /* Tier progress */
  .tier-track { height: 28px; }
  .tier-marker-score { font-size: 10px; padding: 2px 6px; }

  /* Avatar picker */
  .avatar-picker { gap: 10px; }
  .avatar-option { width: 80px; padding: 8px; }
  .avatar-option img { width: 48px; height: 48px; }

  /* Feedback widget */
  .feedback-panel { width: 300px; right: 12px; bottom: 70px; }

  /* View toggles */
  .view-toggle { width: 100%; }
  .toggle-btn { flex: 1; padding: 8px 12px; font-size: 13px; }

  /* Controls */
  .controls { flex-direction: column; }
  .search-wrap { min-width: 100%; }
  /* Leaderboard controls: stack full-width on mobile. Reset the search wrap's
     desktop flex-basis (which otherwise becomes a 280px HEIGHT in the column
     layout, detaching the absolutely-positioned search icon). */
  #leaderboardControls { align-items: stretch; }
  #leaderboardControls .search-wrap { flex: 0 0 auto; min-width: 100%; width: 100%; }
  #leaderboardControls #tierFilter { width: 100%; }
  #leaderboardControls .pagination { margin-left: 0 !important; justify-content: center; flex-wrap: wrap; }

  /* Admin toolbar */
  .admin-toolbar { flex-direction: column; align-items: stretch; }

  /* Profile info tile */
  .profile-info-tile { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Comparison metric */
  .comparison-metric-card { grid-template-columns: 1fr; gap: 16px; }
  .comparison-metric-filters { flex-direction: column; align-items: stretch; }

  /* Failure context grid */
  .failure-context-grid { grid-template-columns: 1fr 1fr; }

  /* Phish characters */
  .phish-characters { grid-template-columns: repeat(3, 1fr); }

  /* Scoring tables — scroll horizontally */
  .report-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Trend chart */
  .trend-chart { gap: 6px; }
  .trend-bar-wrap { min-width: 28px; max-width: 36px; }

  /* Direct report dialogue */
  .dr-dialogue-card { width: 90vw; max-width: 500px; padding: 20px; }
}

/* --- Phone (≤480px) --- */
@media screen and (max-width: 480px) {
  /* Header — clean mobile layout */
  .header { padding: 0 12px; overflow: visible; }
  .header-inner { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; height: auto !important; padding: 10px 0; gap: 0; position: relative; }
  .brand { text-align: left; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; }
  .brand-name { font-size: 14px; }
  .brand-sep { display: none; }
  .brand-sub-group { display: flex !important; flex-direction: column; align-items: flex-start; width: 100%; }
  .brand-sub { font-size: 11px; display: block !important; color: var(--dd-light-blue); }
  .brand-powered { font-size: 9px; display: block !important; color: var(--dd-light-blue); }
  .header-meta { position: absolute; top: 10px; right: 0; width: auto; justify-content: flex-end; align-items: center; flex-wrap: nowrap; gap: 8px; }
  .derby-countdown { font-size: 10px; white-space: nowrap; }
  .refresh-info { display: none; }
  .btn-refresh { display: none; }
  .btn-dark-mode { width: 28px; height: 28px; font-size: 14px; }
  .btn-help-tour { width: 28px; height: 28px; font-size: 12px; }

  /* Show last updated in footer on mobile (already visible on all devices via inline style) */
  .footer .mobile-refresh-info { font-size: 10px; }

  /* Nav tabs */
  .nav-tab { padding: 10px 10px; font-size: 12px; }
  .nav-profile-btn { padding: 5px 10px; font-size: 11px; }
  .nav-avatar { width: 28px; height: 28px; }

  /* Main content */
  .main { padding: 12px 8px; }

  /* Stat cards — 1 column */
  .stats-bar, .team-stats { grid-template-columns: 1fr; gap: 10px; }
  .stat-card { padding: 14px 12px; }
  .stat-value { font-size: 24px; }

  /* Performance sections */
  .perf-section { padding: 12px; margin-bottom: 12px; }
  .profile-name { font-size: 20px; }

  /* Tables — compact */
  .leaderboard-table th, .leaderboard-table td { padding: 8px 6px; font-size: 12px; }
  .col-rank { width: 36px; }

  /* Tier progress bar — tap to reveal labels on mobile */
  .tier-progress { overflow: visible; position: relative; margin-bottom: 12px; }
  .tier-track { height: 28px; overflow: hidden; border-radius: 8px; }
  .tier-labels { display: none; }
  .tier-marker { pointer-events: none; }
  .tier-marker-score { font-size: 9px; top: -18px; padding: 1px 5px; }
  .tier-tap-hint { display: block !important; }
  .trend-tap-hint { display: block !important; }

  /* Points Trend — horizontal scroll + tap info panel */
  .trend-chart { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .trend-chart-inner, .trend-chart { min-width: 0; }
  .trend-bars { min-width: 500px; }
  .trend-tooltip { display: none !important; }
  .trend-bar-wrap.trend-active .trend-tooltip { display: none !important; }
  #trendTapInfo { display: none; padding: 12px; margin-top: 8px; background: var(--dd-white); border: 1px solid var(--dd-cool-gray); border-radius: 8px; font-size: 12px; line-height: 1.6; }
  #trendTapInfo.visible { display: block; }
  #trendTapInfo strong { font-size: 13px; display: block; margin-bottom: 4px; }
  #trendTapInfo .trend-info-pts { font-size: 14px; font-weight: 700; display: block; margin-bottom: 6px; }
  body.dark-mode #trendTapInfo { background: #1a1a30; border-color: #2a2a4a; color: #d0d0e0; }

  /* Points Trend — horizontal scroll */
  .trend-chart { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .trend-chart-inner, .trend-chart { min-width: 0; }
  .trend-bars { min-width: 500px; }

  /* Avatar picker */
  .avatar-picker { gap: 8px; justify-content: center; }
  .avatar-option { width: 64px; padding: 6px; }
  .avatar-option img { width: 36px; height: 36px; }
  .avatar-option-name { font-size: 10px; }

  /* Feedback widget */
  .feedback-panel { width: calc(100vw - 24px); right: 12px; left: 12px; bottom: 70px; }
  .feedback-reactions { gap: 8px; }
  .feedback-reaction { width: 48px; height: 48px; font-size: 22px; }

  /* Buttons */
  .btn-export { padding: 8px 12px; font-size: 13px; }
  .btn-section-export { font-size: 11px; }

  /* View toggles */
  .toggle-btn { padding: 8px 10px; font-size: 12px; }

  /* Phish characters */
  .phish-characters { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Controls */
  .search-wrap input { font-size: 14px; }

  /* Badges */
  .badge-list { gap: 6px; }
  .badge-pill { font-size: 10px; padding: 2px 6px; }
  .badge-earned-img { width: 28px; height: 28px; }
  .badge-earned-label { font-size: 9px; }

  /* Scoring breakdown */
  .score-breakdown-row { flex-direction: column; gap: 4px; }

  /* Comparison metric */
  .cohort-rate { font-size: 24px; }
  .diff-value { font-size: 18px; }

  /* Failure context */
  .failure-context-grid { grid-template-columns: 1fr; }

  /* Resources — contact section wrapping */
  .resources-links { grid-template-columns: 1fr; }
  .resources-contact { flex-direction: column; align-items: flex-start; gap: 4px; word-wrap: break-word; overflow-wrap: break-word; }
  .resource-contact-label { font-size: 12px; }
  .resource-email { font-size: 13px; word-break: break-all; }

  /* Phish character dialogue — full-screen on mobile */
  .phish-dialogue, .phish-dialogue-overlay { position: fixed; inset: 0; z-index: 1000; }
  .phish-dialogue-card { width: 92vw; max-width: none; max-height: 85vh; overflow-y: auto; margin: auto; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 12px; }

  /* Feedback widget — fixed position, full width */
  .feedback-panel { position: fixed; width: calc(100vw - 24px); right: 12px; left: 12px; bottom: 70px; max-height: 70vh; overflow-y: auto; z-index: 999; }

  /* Direct report dialogue */
  .dr-dialogue-card { width: 95vw; padding: 16px; }
  .dr-dialogue-header { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Celebration/Prize dialogues */
  .celebration-card, .prize-dialogue-card { width: 95vw; padding: 20px; }

  /* Prize Tiers legend — card-style on mobile */
  .tier-legend { padding: 16px; border-radius: 12px; }
  .legend-items { flex-direction: column; gap: 12px; }
  .legend-item { padding: 10px 14px; background: rgba(4, 28, 44, 0.03); border-radius: 8px; border: 1px solid var(--dd-cool-gray); }

  /* Footer */
  .footer { padding: 16px 12px; }
  .footer p { font-size: 12px; }
}

/* --- Touch-friendly tap targets for all mobile --- */
@media screen and (max-width: 768px) {
  .nav-tab, .toggle-btn, .btn-export, .btn-refresh, .nav-profile-btn,
  .feedback-reaction, .avatar-option, .phish-card, .kudos-btn,
  .page-btn, .btn-section-export, .btn-find-me {
    min-height: 44px;
  }
  .tooltip-trigger { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* --- Device & Platform Analytics --- */
.device-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(208, 208, 206, 0.5); }
.device-row:last-child { border-bottom: none; }
.device-label { font-size: 13px; color: var(--dd-dark-blue); }
.device-value { font-size: 13px; font-weight: 700; color: var(--dd-dark-blue); }
body.dark-mode .device-label { color: #d0d0e0; }
body.dark-mode .device-value { color: #ffffff; }
@media screen and (max-width: 768px) {
  #adminEmailAnalytics .stats-bar { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 480px) {
  #adminEmailAnalytics .stats-bar { grid-template-columns: 1fr; }
  #adminEmailAnalytics [style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; }
}

/* --- Challenges Tab --- */
.challenges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 12px; }
.challenge-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 12px; border-radius: 10px; border: 2px solid var(--dd-cool-gray); text-align: center; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; cursor: default; }
.challenge-tile.challenge-active { border-color: var(--dd-light-blue); cursor: pointer; background: rgba(125, 155, 193, 0.06); }
.challenge-tile.challenge-active:hover { transform: translateY(-3px); box-shadow: 0 4px 16px rgba(125, 155, 193, 0.25); }
.challenge-tile.challenge-completed { border-color: #2e7d32; background: rgba(46, 125, 50, 0.06); }
.challenge-tile.challenge-locked { opacity: 0.5; border-style: dashed; }
.challenge-tile-icon { font-size: 28px; }
.challenge-tile-name { font-size: 13px; font-weight: 700; color: var(--dd-dark-blue); }
.challenge-tile-status { font-size: 11px; font-weight: 600; color: var(--dd-graphite); }
.challenge-completed .challenge-tile-status { color: #2e7d32; }
.challenge-active .challenge-tile-status { color: var(--dd-light-blue); }
body.dark-mode .challenge-tile { border-color: #2a2a4a; }
body.dark-mode .challenge-tile.challenge-active { border-color: var(--dd-light-blue); background: rgba(125, 155, 193, 0.1); }
body.dark-mode .challenge-active .challenge-tile-status { color: #ffffff; }
body.dark-mode .challenge-tile.challenge-completed { border-color: #66bb6a; background: rgba(46, 125, 50, 0.12); }
body.dark-mode .challenge-tile-name { color: #e8e8f0; }

/* --- Completed Section (collapsible) --- */
.bonus-completed-section { margin-top: 16px; }
.bonus-completed-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 10px 16px; border: none; border-radius: 8px; cursor: pointer;
  background: rgba(46, 125, 50, 0.06); border: 1px dashed rgba(46, 125, 50, 0.25);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: #2e7d32; transition: background 0.2s;
}
.bonus-completed-toggle:hover { background: rgba(46, 125, 50, 0.12); }
.bonus-completed-toggle .toggle-arrow { font-size: 12px; color: var(--dd-graphite); }
body.dark-mode .bonus-completed-toggle { background: rgba(46, 125, 50, 0.08); border-color: rgba(102, 187, 106, 0.2); color: #66bb6a; }
body.dark-mode .bonus-completed-toggle:hover { background: rgba(46, 125, 50, 0.15); }

/* Empty states — motivational */
.challenges-grid .no-badges {
  grid-column: 1 / -1; text-align: center; padding: 40px 24px;
  font-size: 14px; font-style: normal; color: var(--dd-graphite);
  background: linear-gradient(180deg, rgba(125,155,193,0.04) 0%, rgba(125,155,193,0.08) 100%);
  border: 2px dashed rgba(125,155,193,0.2); border-radius: 12px;
}
.challenges-grid .no-badges::before {
  content: '🚀'; display: block; font-size: 36px; margin-bottom: 8px; font-style: normal;
}
body.dark-mode .challenges-grid .no-badges {
  background: linear-gradient(180deg, rgba(125,155,193,0.06) 0%, rgba(125,155,193,0.1) 100%);
  border-color: rgba(125,155,193,0.15); color: #aaaabc;
}

/* --- Challenge Overlay --- */
.challenge-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(4, 28, 44, 0.85); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.challenge-overlay.hidden { display: none; }
.challenge-overlay-card { background: linear-gradient(180deg, #0a2e45 0%, #041C2C 100%); border: 1px solid rgba(234, 170, 0, 0.2); border-radius: 16px; max-width: 960px; width: 96vw; height: 92vh; overflow: hidden; padding: 36px; position: relative; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); color: #ffffff; display: flex; flex-direction: column; }
.challenge-overlay-close { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 28px; cursor: pointer; color: rgba(255, 255, 255, 0.6); transition: color 0.2s; }
.challenge-overlay-close:hover { color: #ffffff; }
.challenge-overlay-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dd-yellow); display: inline; }
.challenge-overlay-title { font-size: 22px; font-weight: 700; margin: 8px 0 4px; color: #ffffff; }
.challenge-overlay-desc { font-size: 13px; color: rgba(255, 255, 255, 0.7); margin-bottom: 8px; line-height: 1.5; }
.challenge-overlay-points { display: inline; font-size: 11px; font-weight: 700; color: var(--dd-yellow); text-transform: uppercase; letter-spacing: 0.04em; background: linear-gradient(90deg, var(--dd-yellow) 0%, #f0d060 50%, var(--dd-yellow) 100%); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: pointsShimmer 3s ease-in-out infinite; }
.challenge-overlay-points::before { content: ''; margin: 0; }
@keyframes pointsShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.challenge-overlay-body { margin: 12px 0; padding: 0; background: none; border-radius: 0; border: none; min-height: 0; flex: 1; overflow-y: auto; }
.challenge-overlay-body input[type="radio"] { accent-color: var(--dd-yellow); }
.challenge-overlay-body label { color: rgba(255, 255, 255, 0.9); }
.challenge-overlay-body p { color: rgba(255, 255, 255, 0.9); }
.challenge-overlay-body textarea, .challenge-overlay-body select { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); color: #ffffff; border-radius: 8px; }
.challenge-overlay-body textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.challenge-overlay-footer { display: flex; gap: 12px; justify-content: center; margin-top: 8px; flex-shrink: 0; padding-top: 12px; }
.challenge-overlay-footer .btn-export { background: var(--dd-yellow); color: var(--dd-dark-blue); border-radius: 8px; padding: 12px 28px; font-size: 14px; font-weight: 700; }
.challenge-overlay-footer .btn-export-secondary { background: transparent; color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; padding: 12px 28px; }
.challenge-overlay-footer .btn-export-secondary:hover { border-color: var(--dd-yellow); color: var(--dd-yellow); }
body.dark-mode .challenge-overlay-card { background: linear-gradient(180deg, #1a1a30 0%, #0f0f1a 100%); }
@media screen and (max-width: 480px) {
  .challenges-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .challenge-tile { padding: 14px 8px; }
  .challenge-tile-icon { font-size: 22px; }
  .challenge-tile-name { font-size: 11px; }
  .challenge-overlay-card { width: 95vw; padding: 24px 16px; max-height: 90vh; }
  .challenge-overlay-title { font-size: 20px; }
  .challenge-overlay-body { padding: 14px; }
}

/* --- Challenge Edit Button (admin) --- */
.challenge-edit-btn { position: absolute; top: 6px; right: 6px; background: rgba(234, 170, 0, 0.9); border: none; border-radius: 50%; width: 28px; height: 28px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; z-index: 2; }
.challenge-edit-btn:hover { transform: scale(1.15); }
.challenge-tile { position: relative; }

/* --- Email Toolbar Color Icons (Word-style) --- */
.email-color-icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; cursor: pointer;
  border: 1px solid var(--dd-cool-gray); border-radius: 4px;
  background: var(--dd-white); transition: border-color 0.2s, background 0.2s;
}
.email-color-icon:hover { border-color: var(--dd-dark-blue); background: rgba(4, 28, 44, 0.04); }
.email-color-icon:focus-within { outline: 2px solid var(--dd-yellow); outline-offset: 1px; }
.email-color-icon input[type="color"] {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: none;
}
.color-icon-label {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 14px; font-weight: 700;
  color: var(--dd-dark-blue); pointer-events: none;
  border-bottom: 3px solid currentColor; padding-bottom: 2px;
  border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;
}
.color-icon-label.color-icon-highlight,
.color-icon-label.color-icon-page {
  font-size: 12px; border-bottom-width: 3px;
}
.color-icon-label svg { pointer-events: none; }
body.dark-mode .email-color-icon { background: #1a1a30; border-color: #3a3a5a; }
body.dark-mode .email-color-icon:hover { border-color: var(--dd-yellow); background: #2a2a4a; }
body.dark-mode .color-icon-label { color: #e8e8f0; }

/* --- Challenge tile date hint --- */
.challenge-tile-date { display: block; font-size: 9px; color: var(--dd-graphite); margin-top: 2px; opacity: 0.7; letter-spacing: 0.02em; }
.challenge-active .challenge-tile-date { color: var(--dd-light-blue); opacity: 1; font-weight: 600; }
body.dark-mode .challenge-tile-date { color: #8888aa; }
body.dark-mode .challenge-active .challenge-tile-date { color: var(--dd-light-blue); }

/* --- Challenge closed/past-due state --- */
.challenge-closed { opacity: 0.5; border: 2px dashed var(--dd-red) !important; background: rgba(224, 25, 51, 0.03) !important; cursor: not-allowed; }
.challenge-closed .challenge-tile-icon { filter: grayscale(1); }
.challenge-closed .challenge-tile-status { color: var(--dd-red) !important; font-weight: 600; }
body.dark-mode .challenge-closed { background: rgba(224, 25, 51, 0.08) !important; border-color: rgba(224, 25, 51, 0.4) !important; }

/* --- Challenge Tile Card (Hybrid Option D) --- */
.challenge-tile-card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; background: var(--dd-white); border: none; padding: 0; }
.challenge-tile-card:hover { transform: translateY(-3px); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.challenge-tile-card .challenge-edit-btn { z-index: 3; }
.challenge-tile-hero { position: relative; width: 100%; height: 120px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.challenge-tile-hero .challenge-state-badge { position: absolute; top: 8px; right: 8px; font-size: 14px; background: rgba(255,255,255,0.9); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.challenge-tile-img { width: 100%; height: 100%; object-fit: cover; }
.challenge-tile-gradient { background: linear-gradient(135deg, #041C2C 0%, #0a3a5e 50%, #041C2C 100%); }
.challenge-tile-icon-large { font-size: 40px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.challenge-tile-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.challenge-tile-card .challenge-tile-name { font-size: 13px; font-weight: 700; color: var(--dd-dark-blue); line-height: 1.3; }
.challenge-tile-card .challenge-tile-status { font-size: 11px; font-weight: 600; }
.challenge-tile-card .challenge-tile-date { margin-top: 2px; }

/* Card state borders */
.challenge-tile-card.challenge-active { border: 2px solid var(--dd-light-blue); }
.challenge-tile-card.challenge-active .challenge-tile-gradient { background: linear-gradient(135deg, #041C2C 0%, #1a3a50 50%, #0a2840 100%); }
.challenge-tile-card.challenge-completed { border: 2px solid #2e7d32; }
.challenge-tile-card.challenge-completed .challenge-tile-gradient { background: linear-gradient(135deg, #1a3a2a 0%, #2e5040 50%, #1a3a2a 100%); }
.challenge-tile-card.challenge-locked { border: 2px dashed var(--dd-cool-gray); opacity: 0.7; }
.challenge-tile-card.challenge-locked .challenge-tile-gradient { background: linear-gradient(135deg, #2a2a3a 0%, #3a3a4a 50%, #2a2a3a 100%); }
.challenge-tile-card.challenge-closed { border: 2px dashed var(--dd-red); opacity: 0.5; }

/* Grid update for card tiles */
.challenges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }

/* Dark mode card */
body.dark-mode .challenge-tile-card { background: #1a1a30; }
body.dark-mode .challenge-tile-card .challenge-tile-name { color: #e8e8f0; }
body.dark-mode .challenge-tile-card .challenge-tile-body { border-top-color: #2a2a4a; }

/* --- Fix empty state text in challenge grids --- */
.challenges-grid .no-badges { grid-column: 1 / -1; width: 100%; }

/* --- Risky behaviors scrollable grid --- */
.risky-grid-6 { grid-template-columns: repeat(6, 1fr); }

/* --- Fix tooltip overlap on risky tiles --- */
.risky-tile { position: relative; }
.risky-tile [data-tooltip]::after,
.risky-tile .tooltip-trigger + .tooltip-content { z-index: 10; }
.risky-grid .risky-tile:not(:hover) [data-tooltip]::after { opacity: 0 !important; visibility: hidden !important; pointer-events: none; }

/* --- Glass Tiles (Reporting Stats) --- */
.glass-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; position: relative; overflow: hidden; }
.glass-stats-row::before {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.0) 25%, rgba(255,255,255,0.12) 40%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.12) 60%, rgba(255,255,255,0.0) 75%, transparent 100%);
  animation: glassShimmer 8s ease-in-out infinite;
  pointer-events: none; z-index: 1; border-radius: 20px;
}
@keyframes glassShimmer {
  0% { left: -100%; opacity: 0; }
  5% { opacity: 1; }
  45% { left: 120%; opacity: 1; }
  50% { opacity: 0; }
  100% { left: 120%; opacity: 0; }
}
.glass-tile {
  position: relative; text-align: center; padding: 24px 16px;
  background: rgba(125, 155, 193, 0.12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(125, 155, 193, 0.2);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 4px 24px rgba(4, 28, 44, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.glass-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(4, 28, 44, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.glass-icon { display: block; font-size: 24px; margin-bottom: 6px; }
.glass-icon-flame {
  display: inline-block;
  animation: flameFlicker 1.5s ease-in-out infinite alternate;
  transform-origin: bottom center;
}
@keyframes flameFlicker {
  0% { transform: scale(1) rotate(-2deg); filter: brightness(1); }
  25% { transform: scale(1.05) rotate(1deg); filter: brightness(1.1); }
  50% { transform: scale(0.97) rotate(-1deg); filter: brightness(1.05); }
  75% { transform: scale(1.03) rotate(2deg); filter: brightness(1.15); }
  100% { transform: scale(1) rotate(-1deg); filter: brightness(1); }
}
.glass-icon-zap {
  display: inline-block;
  animation: zapPulse 2s ease-in-out infinite;
}
@keyframes zapPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  15% { transform: scale(1.2) rotate(-5deg); filter: brightness(1.4); }
  30% { transform: scale(0.95) rotate(3deg); filter: brightness(1); }
  45% { transform: scale(1.15) rotate(-3deg); filter: brightness(1.3); }
  60% { transform: scale(1); filter: brightness(1); }
}
.glass-icon-envelope {
  display: inline-block;
  animation: envelopeSlide 3s ease-in-out infinite;
}
@keyframes envelopeSlide {
  0%, 100% { transform: translateX(0) rotate(0deg); opacity: 1; }
  10% { transform: translateX(-8px) rotate(-2deg); opacity: 0.6; }
  20% { transform: translateX(0) rotate(0deg); opacity: 1; }
}
.glass-value { display: block; font-size: 32px; font-weight: 700; color: var(--dd-dark-blue); line-height: 1.2; }
.glass-label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dd-dark-blue); margin-top: 4px; }
.glass-desc { display: block; font-size: 11px; color: var(--dd-graphite); margin-top: 2px; }

/* Dark mode glass */
body.dark-mode .glass-tile {
  background: rgba(30, 30, 54, 0.4);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
body.dark-mode .glass-stats-row::before {
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.0) 25%, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.05) 60%, rgba(255,255,255,0.0) 75%, transparent 100%);
}
body.dark-mode .glass-tile:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
body.dark-mode .glass-value { color: #ffffff; }
body.dark-mode .glass-label { color: #ccccdd; }
body.dark-mode .glass-desc { color: #8888aa; }

@media (max-width: 768px) { .glass-stats-row { grid-template-columns: 1fr; gap: 12px; } }

/* --- Glass tile streak challenge text contrast fix --- */
.glass-tile .streak-challenge { color: #8B6914 !important; }
body.dark-mode .glass-tile .streak-challenge { color: var(--dd-yellow) !important; }

/* --- Phish Character Carousel --- */
.phish-carousel { position: relative; display: flex; align-items: center; gap: 8px; }
.phish-carousel .phish-characters {
  display: flex !important; grid-template-columns: none !important;
  gap: 16px; overflow-x: auto; scroll-behavior: smooth;
  flex: 1; padding: 8px 0; flex-wrap: nowrap;
  scrollbar-width: none; -ms-overflow-style: none;
}
.phish-carousel .phish-characters::-webkit-scrollbar { display: none; }
.phish-carousel .phish-card { flex-shrink: 0; position: relative; width: 150px; overflow: hidden; }
.phish-carousel .phish-card .phish-avatar { width: 80px; height: 80px; }
.phish-carousel-arrow {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--dd-cool-gray); background: var(--dd-white);
  font-size: 20px; font-weight: 300; color: var(--dd-dark-blue);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.phish-carousel-arrow:hover { border-color: var(--dd-yellow); background: rgba(234,170,0,0.06); }
.phish-carousel-arrow:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
body.dark-mode .phish-carousel-arrow { background: #1a1a30; border-color: #3a3a5a; color: #e8e8f0; }
body.dark-mode .phish-carousel-arrow:hover { border-color: var(--dd-yellow); background: rgba(234,170,0,0.1); }

/* Max score pill dark mode */
body.dark-mode .scoring-max-pill { background: rgba(234,170,0,0.15); color: var(--dd-yellow); border-color: rgba(234,170,0,0.4); }

/* Scoring note inline edit buttons */
.scoring-note-edit {
  background: rgba(125,155,193,0.1); border: none; border-radius: 50%;
  width: 20px; height: 20px; font-size: 11px; cursor: pointer;
  color: var(--dd-light-blue); display: inline-flex; align-items: center;
  justify-content: center; margin-left: 6px; vertical-align: middle;
  transition: opacity 0.2s, background 0.2s;
}
.scoring-note-edit:hover { background: rgba(125,155,193,0.2); }
.scoring-note[contenteditable="true"] {
  outline: 2px solid var(--dd-light-blue); border-radius: 4px;
  padding: 4px 8px; background: rgba(125,155,193,0.04);
}
/* Edit button on phish cards */
.phish-card-edit {
  position: absolute; top: 4px; right: 4px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.9); border: 1px solid var(--dd-cool-gray);
  font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
  color: var(--dd-light-blue);
}
.phish-card:hover .phish-card-edit { opacity: 1; }
body.dark-mode .phish-card-edit { background: rgba(26,26,48,0.9); border-color: #3a3a5a; }

/* Phish form textareas — resizable */
.phish-form-textarea {
  width: 100%; padding: 10px 12px; font-size: 14px; font-family: var(--font-sans);
  border: 1px solid var(--dd-cool-gray); border-radius: 6px;
  resize: vertical; min-height: 36px; max-height: 300px; line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s;
  overflow-y: auto;
}
.phish-form-textarea:focus { outline: none; border-color: var(--dd-light-blue); box-shadow: 0 0 0 3px rgba(125,155,193,0.15); }
body.dark-mode .phish-form-textarea { background: #0f0f1a; color: #e8e8f0; border-color: #3a3a5a; }
body.dark-mode .phish-form-textarea:focus { border-color: var(--dd-light-blue); box-shadow: 0 0 0 3px rgba(125,155,193,0.2); }
body.dark-mode .phish-form-textarea::placeholder { color: #666680; }
/* Stat row in form mode — stack label above textarea */
#addPhishDialog .phish-stat-row { flex-direction: column; align-items: stretch; gap: 4px; }
#addPhishDialog .phish-stat-label { font-size: 13px; }
#addPhishDialog .phish-dialogue-card { overflow: visible; }
#addPhishDialog textarea { resize: vertical !important; cursor: auto; }
#addPhishDialog .btn-export, #addPhishDialog .btn-export-secondary, #addPhishDialog .btn-survey { justify-content: center; text-align: center; }

/* --- Tier marker hover scale --- */
.tier-marker { cursor: pointer; transition: transform 0.4s ease; }
.tier-marker.landed { animation: none; }
.tier-marker.landed:hover { transform: scaleY(1.3) scaleX(1.5); }

/* --- Add Resource Dialog --- */
.resource-dialog-overlay { position: fixed; inset: 0; background: rgba(4, 28, 44, 0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.resource-dialog-overlay.hidden { display: none; }
body.dark-mode .resource-dialog-card label, body.dark-mode .resource-dialog-label { color: #aaaabc; }
body.dark-mode .resource-dialog-card input[type="text"],
body.dark-mode .resource-dialog-card input[type="email"],
body.dark-mode .resource-dialog-card input[type="url"] { background: #0f0f1a; color: #e8e8f0; border-color: #3a3a5a; }
body.dark-mode .resource-dialog-card input:focus { border-color: var(--dd-light-blue); box-shadow: 0 0 0 3px rgba(125,155,193,0.2); }
body.dark-mode .resource-dialog-card input::placeholder { color: #666680; }
body.dark-mode .resource-dialog-card input[type="file"] { background: rgba(125,155,193,0.06); border-color: #3a3a5a; color: #ccccdd; }
body.dark-mode .resource-dialog-card .resource-emoji-btn { background: #0f0f1a; border-color: #3a3a5a; }
body.dark-mode .emoji-picker { background: #1a1a30; border-color: #2a2a4a; }
body.dark-mode .emoji-picker-tabs { border-bottom-color: #2a2a4a; }
body.dark-mode .emoji-picker-search input { background: #0f0f1a; color: #e8e8f0; border-color: #3a3a5a; }
.resource-dialog-title { margin: 0 0 20px; font-size: 18px; font-weight: 700; color: var(--dd-dark-blue); }
.resource-dialog-label { display: block; font-size: 12px; font-weight: 600; color: var(--dd-graphite); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; }
.resource-dialog-card { background: var(--dd-white); border-radius: 16px; padding: 28px 32px; width: 440px; max-width: 90vw; max-height: 85vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
.resource-dialog-card input[type="text"],
.resource-dialog-card input[type="email"],
.resource-dialog-card input[type="url"] {
  width: 100%; padding: 12px 14px; font-size: 14px;
  border: 1px solid var(--dd-cool-gray); border-radius: 8px;
  font-family: var(--font-sans); background: var(--dd-white);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.resource-dialog-card input:focus {
  outline: none; border-color: var(--dd-light-blue);
  box-shadow: 0 0 0 3px rgba(125, 155, 193, 0.15);
}
.resource-dialog-card input[type="file"] {
  width: 100%; padding: 10px; font-size: 13px;
  border: 1px dashed var(--dd-cool-gray); border-radius: 8px;
  cursor: pointer; background: rgba(125,155,193,0.04);
}
.resource-dialog-card input[type="checkbox"] { width: auto; margin-right: 8px; }

/* --- Emoji Picker --- */
.emoji-picker { position: absolute; top: 100%; left: 0; z-index: 10; background: var(--dd-white); border: 1px solid var(--dd-cool-gray); border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); width: 280px; max-height: 260px; overflow: hidden; display: flex; flex-direction: column; }
.emoji-picker.hidden { display: none; }
.emoji-picker-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--dd-cool-gray); padding: 6px 8px; flex-wrap: nowrap; overflow-x: auto; }
.emoji-picker-tabs button { background: none; border: none; font-size: 16px; padding: 4px 6px; cursor: pointer; border-radius: 6px; transition: background 0.15s; }
.emoji-picker-tabs button:hover, .emoji-picker-tabs button.active { background: rgba(234, 170, 0, 0.15); }
.emoji-picker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; overflow-y: auto; max-height: 200px; }
.emoji-picker-grid button { background: none; border: none; font-size: 20px; padding: 4px; cursor: pointer; border-radius: 6px; transition: background 0.15s, transform 0.1s; }
.emoji-picker-grid button:hover { background: rgba(234, 170, 0, 0.1); transform: scale(1.2); }
body.dark-mode .emoji-picker { background: #1a1a30; border-color: #2a2a4a; }
body.dark-mode .emoji-picker-tabs { border-bottom-color: #2a2a4a; }

/* --- Sticky Admin sub-tab bar --- */
#adminSubToggle { position: sticky; top: 109px; z-index: 80; background: var(--dd-cool-gray); padding: 8px 24px 10px; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); width: 100vw; display: flex !important; justify-content: center !important; flex-wrap: wrap; gap: 6px; box-shadow: none !important; border-radius: 0; overflow: visible; }
#adminSubToggle .toggle-btn { border-radius: 20px; padding: 8px 18px; font-size: 13px; }
#adminSubToggle .toggle-btn.active { border-radius: 20px; }
body.dark-mode #adminSubToggle { background: #0f0f1a; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }

/* --- Prize Tiers accent styling --- */
.tier-legend { position: relative; border-left: 4px solid var(--dd-dark-blue); background: var(--dd-white); border: 1px solid rgba(4, 28, 44, 0.12); border-left: 4px solid var(--dd-dark-blue); border-radius: 0 var(--radius) var(--radius) 0; }
.tier-legend:hover .section-header-edit-btn { opacity: 0.7; }
body.dark-mode .tier-legend { border-left-color: var(--dd-yellow); border-color: rgba(234, 170, 0, 0.2); background: #1a1a30; }

/* --- Simulation Detail Dialogue --- */
.sim-detail-dialogue {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(4, 28, 44, 0.7); z-index: 700;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px; overflow-y: auto;
  animation: celebrateFadeIn 0.3s ease;
}
.sim-detail-dialogue.hidden { display: none; }
.sim-detail-card {
  background: var(--dd-white); border-radius: var(--radius);
  box-shadow: 0 12px 48px rgba(0,0,0,0.25);
  padding: 32px; max-width: 900px; width: 100%; position: relative;
  margin: 40px 0;
  animation: celebrateSlideUp 0.4s ease;
  display: flex; flex-direction: column;
}
.sim-detail-edit-panel { order: 2; }
.sim-detail-sections { order: 3; }
.sim-detail-title { order: 0; }
.sim-detail-meta { order: 1; }
.sim-detail-close {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  font-size: 22px; cursor: pointer; color: var(--dd-graphite); line-height: 1;
}
.sim-detail-close:hover { color: var(--dd-dark-blue); }
.sim-detail-edit-btn {
  position: absolute; top: 12px; right: 48px; background: none; border: none;
  font-size: 18px; cursor: pointer; opacity: 0.6; line-height: 1;
  padding: 4px; border-radius: 4px; transition: opacity 0.2s, background 0.2s;
}
.sim-detail-edit-btn:hover { opacity: 1; background: rgba(234, 170, 0, 0.1); }
.sim-detail-edit-btn.active { opacity: 1; background: rgba(234, 170, 0, 0.2); }
.sim-detail-title {
  font-size: 20px; font-weight: 700; color: var(--dd-dark-blue);
  margin: 0 0 12px; padding-right: 60px;
}
.sim-detail-meta {
  display: flex; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 20px;
  font-size: 13px; color: var(--dd-graphite);
}
.sim-meta-item strong { color: var(--dd-dark-blue); }
.sim-detail-sections { display: flex; flex-direction: column; gap: 20px; }
.sim-detail-section { }
.sim-section-heading {
  font-size: 14px; font-weight: 700; color: var(--dd-dark-blue);
  margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.03em;
}

/* Email preview */
.sim-detail-email-preview { }
.sim-email-envelope {
  border: 1px solid var(--dd-cool-gray); border-radius: 8px 8px 0 0;
  padding: 12px 16px; background: #f5f6f8; border-bottom: none;
  font-size: 13px; line-height: 1.6;
}
.sim-envelope-from, .sim-envelope-subject { color: var(--dd-dark-blue); }
.sim-envelope-label { color: var(--dd-graphite); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; margin-right: 4px; }
.sim-email-envelope + .sim-email-frame { border-radius: 0 0 8px 8px; border-top: 1px solid var(--dd-cool-gray); }
.sim-email-frame {
  border: 1px solid var(--dd-cool-gray); border-radius: 8px;
  padding: 16px; max-height: 200px; overflow-y: auto;
  background: #fafafa; font-size: 13px; line-height: 1.5;
  transition: max-height 0.3s ease;
  position: relative;
}
.sim-email-frame.expanded { max-height: none; }
.sim-email-expand-btn {
  display: block; width: 100%; padding: 8px; margin-top: 8px;
  background: none; border: 1px dashed var(--dd-cool-gray); border-radius: 6px;
  font-size: 12px; color: var(--dd-light-blue); cursor: pointer;
  text-align: center; transition: background 0.2s, color 0.2s;
}
.sim-email-expand-btn:hover { background: rgba(125, 155, 193, 0.08); color: var(--dd-dark-blue); }
.sim-email-img { max-width: 100%; height: auto; border-radius: 4px; }
/* Link hover tooltip (shows URL near cursor instead of browser status bar) */
.sim-email-link-tooltip {
  position: fixed; z-index: 9999; pointer-events: none;
  background: rgba(4, 28, 44, 0.92); color: #ffffff;
  font-size: 11px; font-family: monospace; padding: 5px 10px;
  border-radius: 4px; white-space: nowrap; max-width: 400px;
  overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transform: translate(12px, 18px);
  display: none;
}
.sim-email-link-tooltip.visible { display: block; }
.sim-email-placeholder {
  text-align: center; padding: 32px 16px; color: var(--dd-graphite);
  border: 2px dashed var(--dd-cool-gray); border-radius: 8px;
}
.sim-email-placeholder-icon { font-size: 36px; display: block; margin-bottom: 8px; }
.sim-email-placeholder p { margin: 4px 0; font-size: 13px; }
.sim-email-placeholder-hint { font-size: 11px; opacity: 0.7; }

/* Scam indicators */
.sim-detail-indicators { display: flex; flex-direction: column; gap: 8px; }

/* Attachment bar */
.sim-external-banner {
  background: #00bcd4; color: #000; padding: 12px 16px;
  font-size: 12px; line-height: 1.5;
  border: 1px solid var(--dd-cool-gray); border-bottom: none;
}
.sim-email-envelope + .sim-external-banner { border-top: 1px solid var(--dd-cool-gray); }
.sim-external-banner strong { font-size: 13px; }
.sim-external-banner-text { }
.sim-external-banner-btn {
  display: block; margin-top: 8px; margin-left: auto; width: fit-content;
  padding: 4px 12px; border: 1px solid #000; border-radius: 2px;
  font-size: 11px; font-weight: 600; background: transparent;
  cursor: default; white-space: nowrap;
}
.sim-attachment-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 6px;
  background: #f0f2f5; border: 1px solid var(--dd-cool-gray);
}
.sim-attach-icon {
  width: 36px; height: 36px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.sim-attach-icon.doc { background: #2b579a; }
.sim-attach-icon.docx { background: #2b579a; }
.sim-attach-icon.pdf { background: #d32f2f; }
.sim-attach-icon.xlsx { background: #217346; }
.sim-attach-icon.html { background: #e44d26; }
.sim-attach-info { display: flex; flex-direction: column; gap: 1px; }
.sim-attach-filename { font-size: 13px; font-weight: 600; color: var(--dd-dark-blue); }
.sim-attach-meta { font-size: 11px; color: var(--dd-graphite); }

/* Landing page preview */
.sim-detail-landing-preview { }
.sim-landing-frame {
  border: 1px solid var(--dd-cool-gray); border-radius: 8px;
  overflow: hidden; background: #fafafa;
}
.sim-landing-browser-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: #e8eaed; border-bottom: 1px solid var(--dd-cool-gray);
  font-size: 11px; color: var(--dd-graphite);
}
.sim-landing-browser-dots {
  display: flex; gap: 4px;
}
.sim-landing-browser-dots span {
  width: 10px; height: 10px; border-radius: 50%;
}
.sim-landing-browser-dots .dot-red { background: #ed6a5e; }
.sim-landing-browser-dots .dot-yellow { background: #f5bf4f; }
.sim-landing-browser-dots .dot-green { background: #62c554; }
.sim-landing-url-bar {
  flex: 1; padding: 4px 10px; background: #fff; border-radius: 4px;
  font-family: monospace; font-size: 11px; color: var(--dd-dark-blue);
  border: 1px solid #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sim-landing-content {
  padding: 16px; max-height: 300px; overflow-y: auto;
  font-size: 13px; line-height: 1.5;
}
.sim-landing-content.expanded { max-height: none; }
.sim-landing-iframe {
  width: 100%; border: none; min-height: 300px; max-height: 500px;
  display: block;
}
.sim-landing-img { max-width: 100%; height: auto; border-radius: 4px; }
.sim-landing-placeholder {
  text-align: center; padding: 24px 16px; color: var(--dd-graphite);
  font-size: 12px; font-style: italic;
}

/* Dark mode — attachment & landing */
body.dark-mode .sim-attachment-bar { background: #12122a; border-color: #333355; }
body.dark-mode .sim-attach-filename { color: #e8e8f0; }
body.dark-mode .sim-attach-meta { color: #8888aa; }
body.dark-mode .sim-landing-frame { background: #0d0d1a; border-color: #333355; }
body.dark-mode .sim-landing-browser-bar { background: #1a1a30; border-color: #333355; }
body.dark-mode .sim-landing-url-bar { background: #0d0d1a; border-color: #333355; color: #e8e8f0; }
body.dark-mode .sim-landing-content { color: #e8e8f0; }
.sim-indicator-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: 6px;
  background: rgba(234, 170, 0, 0.06); border: 1px solid rgba(234, 170, 0, 0.15);
}
.sim-indicator-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--dd-yellow); color: var(--dd-dark-blue);
  font-size: 11px; font-weight: 700;
}
.sim-indicator-item strong { font-size: 13px; color: var(--dd-dark-blue); display: block; }
.sim-indicator-item p { margin: 2px 0 0; font-size: 12px; color: var(--dd-graphite); line-height: 1.4; }
.sim-no-indicators { font-size: 12px; color: var(--dd-graphite); margin: 0; font-style: italic; }

/* What happened (actions) */
.sim-detail-actions { display: flex; flex-direction: column; gap: 6px; }
.sim-action-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 6px; font-size: 13px;
}
.sim-action-icon { font-size: 16px; flex-shrink: 0; }
.sim-action-positive { background: rgba(46, 125, 50, 0.08); color: #2e7d32; }
.sim-action-negative { background: rgba(224, 25, 51, 0.08); color: var(--dd-red); }
.sim-action-neutral { background: rgba(136, 139, 141, 0.08); color: var(--dd-graphite); }

/* Points breakdown */
.sim-detail-points { display: flex; flex-direction: column; gap: 4px; }
.sim-points-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px; border-radius: 4px; font-size: 13px;
}
.sim-pts-positive { color: #2e7d32; }
.sim-pts-negative { color: var(--dd-red); }
.sim-pts-total {
  font-weight: 700; color: var(--dd-dark-blue);
  border-top: 1px solid var(--dd-cool-gray); margin-top: 4px; padding-top: 8px;
}
.sim-pts-value { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Admin edit panel */
.sim-detail-edit-panel { margin-top: 20px; }
.sim-detail-edit-panel.hidden { display: none; }
/* Edit panel collapsible sections with accent borders */
.sim-edit-section {
  border-left: 4px solid var(--dd-cool-gray);
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 0 8px 8px 0;
  background: rgba(4, 28, 44, 0.02);
  transition: background 0.2s;
}
.sim-edit-section[data-accent="blue"] { border-left-color: var(--dd-light-blue); }
.sim-edit-section[data-accent="purple"] { border-left-color: #8e5ea2; }
.sim-edit-section[data-accent="teal"] { border-left-color: #26a69a; }
.sim-edit-section[data-accent="orange"] { border-left-color: #f57c00; }
.sim-edit-section[data-accent="red"] { border-left-color: var(--dd-red); }
.sim-edit-section[data-accent="gold"] { border-left-color: var(--dd-yellow); }
.sim-edit-section-header {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none; padding: 2px 0;
}
.sim-edit-section-title {
  font-size: 13px; font-weight: 700; color: var(--dd-dark-blue);
  text-transform: uppercase; letter-spacing: 0.03em;
  display: flex; align-items: center; gap: 8px;
}
.sim-edit-section-title .sim-edit-section-icon { font-size: 14px; }
.sim-edit-section-chevron {
  font-size: 12px; color: var(--dd-graphite); transition: transform 0.2s;
}
.sim-edit-section.collapsed .sim-edit-section-chevron { transform: rotate(-90deg); }
.sim-edit-section-body {
  margin-top: 12px; display: block;
}
.sim-edit-section.collapsed .sim-edit-section-body { display: none; }

/* Dark mode — edit sections */
body.dark-mode .sim-edit-section { background: rgba(125, 155, 193, 0.04); }
body.dark-mode .sim-edit-section-title { color: #e8e8f0; }
body.dark-mode .sim-edit-section-chevron { color: #8888aa; }

.sim-edit-group { margin-bottom: 16px; }
.sim-edit-label { display: block; font-size: 12px; font-weight: 700; color: var(--dd-dark-blue); margin-bottom: 6px; }
.sim-edit-textarea {
  width: 100%; padding: 10px; border: 1px solid var(--dd-cool-gray); border-radius: 6px;
  font-family: monospace; font-size: 12px; resize: vertical; background: #fafafa;
}
.sim-edit-textarea:focus { outline: none; border-color: var(--dd-yellow); }
.sim-edit-file { font-size: 12px; margin-bottom: 8px; }
.sim-edit-input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--dd-cool-gray); border-radius: 6px;
  font-size: 13px; margin-bottom: 6px;
}
.sim-edit-input:focus { outline: none; border-color: var(--dd-yellow); }
.sim-edit-action {
  font-size: 12px; padding: 6px 14px; margin-top: 4px;
}
.sim-edit-indicator-form { margin-top: 10px; }
.sim-edit-indicator-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  border-radius: 4px; background: rgba(234, 170, 0, 0.05); margin-bottom: 4px;
  font-size: 12px;
}
.sim-edit-indicator-remove {
  margin-left: auto; background: none; border: none; font-size: 16px;
  cursor: pointer; color: var(--dd-red); opacity: 0.6; line-height: 1;
}
.sim-edit-indicator-remove:hover { opacity: 1; }
.sim-edit-clear { background: rgba(224, 25, 51, 0.08); color: var(--dd-red); border-color: rgba(224, 25, 51, 0.2); }
.sim-edit-clear:hover { background: rgba(224, 25, 51, 0.15); }
.sim-edit-save-exit { background: rgba(46, 125, 50, 0.08); color: #2e7d32; border-color: rgba(46, 125, 50, 0.2); margin-left: 8px; }
.sim-edit-save-exit:hover { background: rgba(46, 125, 50, 0.15); }
.sim-edit-clear-html { background: none; color: var(--dd-graphite); border-color: var(--dd-cool-gray); margin-left: 8px; }
.sim-edit-clear-html:hover { background: rgba(136, 139, 141, 0.1); color: var(--dd-dark-blue); }

/* Campaign name link in sim history table */
.sim-campaign-link {
  color: var(--dd-dark-blue); text-decoration: none; font-weight: 600;
  border-bottom: 1px dashed var(--dd-light-blue); transition: color 0.2s, border-color 0.2s;
}
.sim-campaign-link:hover { color: var(--dd-light-blue); border-color: var(--dd-yellow); }

/* Dark mode */
body.dark-mode .sim-detail-dialogue { background: rgba(0, 0, 0, 0.8); }
body.dark-mode .sim-detail-card { background: #1a1a30; }
body.dark-mode .sim-detail-close { color: #8888aa; }
body.dark-mode .sim-detail-close:hover { color: #e8e8f0; }
body.dark-mode .sim-detail-title { color: #ffffff; }
body.dark-mode .sim-detail-meta { color: #aaaabc; }
body.dark-mode .sim-meta-item strong { color: #ccccdd; }
body.dark-mode .sim-section-heading { color: #ccccdd; }
body.dark-mode .sim-email-frame { background: #0d0d1a; border-color: #333355; }
body.dark-mode .sim-email-envelope { background: #12122a; border-color: #333355; }
body.dark-mode .sim-envelope-from, body.dark-mode .sim-envelope-subject { color: #e8e8f0; }
body.dark-mode .sim-envelope-label { color: #8888aa; }
body.dark-mode .sim-email-expand-btn { border-color: #333355; color: var(--dd-light-blue); }
body.dark-mode .sim-email-expand-btn:hover { background: rgba(125, 155, 193, 0.1); color: #e8e8f0; }
body.dark-mode .sim-email-placeholder { border-color: #333355; color: #8888aa; }
body.dark-mode .sim-indicator-item { background: rgba(234, 170, 0, 0.08); border-color: rgba(234, 170, 0, 0.2); }
body.dark-mode .sim-indicator-item strong { color: #e8e8f0; }
body.dark-mode .sim-indicator-item p { color: #8888aa; }
body.dark-mode .sim-action-positive { background: rgba(46, 125, 50, 0.12); color: #66bb6a; }
body.dark-mode .sim-action-negative { background: rgba(224, 25, 51, 0.12); color: #ef5350; }
body.dark-mode .sim-action-neutral { background: rgba(136, 139, 141, 0.1); color: #8888aa; }
body.dark-mode .sim-pts-positive { color: #66bb6a; }
body.dark-mode .sim-pts-negative { color: #ef5350; }
body.dark-mode .sim-pts-total { color: #ffffff; border-color: #333355; }
body.dark-mode .sim-edit-textarea { background: #0d0d1a; border-color: #333355; color: #e8e8f0; }
body.dark-mode .sim-edit-input { background: #0d0d1a; border-color: #333355; color: #e8e8f0; }
body.dark-mode .sim-edit-label { color: #ccccdd; }
body.dark-mode .sim-edit-indicator-row { background: rgba(234, 170, 0, 0.08); }
body.dark-mode .sim-campaign-link { color: var(--dd-yellow); border-color: rgba(234, 170, 0, 0.4); }
body.dark-mode .sim-campaign-link:hover { color: #ffffff; border-color: var(--dd-yellow); }

/* Responsive */
@media (max-width: 768px) {
  .sim-detail-card { max-width: 95vw; padding: 24px 20px; margin: 24px 0; }
}
@media (max-width: 480px) {
  .sim-detail-card { padding: 20px 16px; margin: 16px 0; }
  .sim-detail-meta { flex-direction: column; gap: 6px; }
  .sim-detail-dialogue { padding: 12px; }
}

/* Simulation Content admin panel */
.sim-content-name-link {
  color: var(--dd-dark-blue); text-decoration: none; font-weight: 600;
  border-bottom: 1px dashed var(--dd-light-blue); transition: color 0.2s;
  text-align: left;
}
#simContentBody td:first-child { text-align: left; }
.sim-content-name-link:hover { color: var(--dd-light-blue); }
.sim-content-delete-btn {
  background: none; border: none; font-size: 16px; cursor: pointer;
  opacity: 0.5; transition: opacity 0.2s; padding: 4px;
}
.sim-content-delete-btn:hover { opacity: 1; }
.sim-content-add-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(4, 28, 44, 0.6); z-index: 750;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.sim-content-add-card {
  background: var(--dd-white); border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  padding: 24px; max-width: 420px; width: 100%;
}
body.dark-mode .sim-content-name-link { color: var(--dd-yellow); border-color: rgba(234, 170, 0, 0.4); }
body.dark-mode .sim-content-name-link:hover { color: #ffffff; }
body.dark-mode .sim-content-add-card { background: #1a1a30; }
body.dark-mode .sim-content-add-card h3 { color: #ffffff; }

/* Badge drag-and-drop reorder */
.badge-drag-handle { cursor: grab; }
.badge-drag-handle:active { cursor: grabbing; }
tr.badge-drag-over { border-top: 2px solid var(--dd-yellow); }
tr[draggable] { transition: opacity 0.2s; }

/* Fix tooltip overflow on phishing impacts section */
#phishingImpactsSection .section-body { overflow: visible; }
#phishingImpactsSection .stats-bar { overflow: visible; }
#phishingImpactsSection .stat-card { overflow: visible; position: relative; }

/* Stat card ordering on Leaderboard view: Participants, Emails Sent, Avg Score, Report Rate */
#statParticipantsCard { order: 1; }
#statEmailsSentCard { order: 2; }
#statAvgCard { order: 3; }
#statReportRateCard { order: 4; }
/* Center Email Safety Score column values */
.col-points { text-align: center; }

/* Fix phishing impacts section not blocking clicks on elements below it */
#phishingImpactsSection { position: relative; z-index: 1; }
#phishingImpactsSection.collapsed .section-body { display: none; }
#leaderboardView .view-toggle,
#leaderboardView .controls,
#leaderboardView .btn-find-me,
#leaderboardView select { position: relative; z-index: 2; }

/* Streak flames */
.streak-flame {
  display: inline-block; margin-left: 4px; font-size: 14px;
  animation: flameFlicker 0.8s ease-in-out infinite alternate;
  cursor: pointer; position: relative; z-index: 100;
  vertical-align: middle;
}
.streak-flame.streak-5 { font-size: 15px; }
.streak-flame.streak-10 { font-size: 17px; filter: drop-shadow(0 0 3px rgba(255, 100, 0, 0.6)); }
.streak-flame::after {
  display: none;
}
@keyframes streakTooltipBounce {
  0% { transform: translateX(-50%) translateY(6px) scale(0.9); opacity: 0; }
  60% { transform: translateX(-50%) translateY(-3px) scale(1.02); opacity: 1; }
  100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}
@keyframes flameFlicker {
  0% { transform: scale(1) rotate(-2deg); opacity: 0.9; }
  50% { transform: scale(1.1) rotate(1deg); opacity: 1; }
  100% { transform: scale(0.95) rotate(-1deg); opacity: 0.85; }
}

/* Glass tier badges (leaderboard) */
.tier-badge.tier-glass {
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
  position: relative; overflow: hidden;
}
.tier-badge.tier-glass::before {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.08) 20%, rgba(255,255,255,0.35) 45%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0.35) 55%, rgba(255,255,255,0.08) 80%, transparent 100%);
  animation: tierGlassShimmer 4s linear infinite;
}
@keyframes tierGlassShimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}
.tier-badge.tier-glass.tier-champion { background: linear-gradient(135deg, rgba(234,170,0,0.25), rgba(234,170,0,0.08)); border-color: rgba(234,170,0,0.5); color: #8B6914; }
.tier-badge.tier-glass.tier-defender { background: linear-gradient(135deg, rgba(112,152,193,0.22), rgba(112,152,193,0.06)); border-color: rgba(112,152,193,0.45); color: #3d6d96; }
.tier-badge.tier-glass.tier-fighter { background: linear-gradient(135deg, rgba(244,152,33,0.2), rgba(244,152,33,0.06)); border-color: rgba(244,152,33,0.4); color: #9a5e10; }
.tier-badge.tier-glass.tier-participant { background: linear-gradient(135deg, rgba(208,208,206,0.18), rgba(208,208,206,0.05)); border-color: rgba(208,208,206,0.4); color: #777; }

body.dark-mode .tier-badge.tier-glass { box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1); }
body.dark-mode .tier-badge.tier-glass.tier-champion { background: linear-gradient(135deg, rgba(234,170,0,0.18), rgba(234,170,0,0.04)); border-color: rgba(234,170,0,0.35); color: var(--dd-yellow); }
body.dark-mode .tier-badge.tier-glass.tier-defender { background: linear-gradient(135deg, rgba(112,152,193,0.15), rgba(112,152,193,0.04)); border-color: rgba(112,152,193,0.3); color: #8fb8dc; }
body.dark-mode .tier-badge.tier-glass.tier-fighter { background: linear-gradient(135deg, rgba(244,152,33,0.15), rgba(244,152,33,0.04)); border-color: rgba(244,152,33,0.3); color: #f0a850; }
body.dark-mode .tier-badge.tier-glass.tier-participant { background: linear-gradient(135deg, rgba(208,208,206,0.1), rgba(208,208,206,0.03)); border-color: rgba(208,208,206,0.25); color: #999; }

/* Fix streak flame tooltip being clipped by table overflow */
.leaderboard-table { overflow: visible; }
.table-wrap { overflow-x: auto; overflow-y: visible; }
.leaderboard-table td, .leaderboard-table th { overflow: visible; }
.streak-flame { z-index: 100; }
.streak-flame::after { z-index: 101; }

/* Leaderboard row hover lift effect */
#individualBody tr {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
#individualBody tr:hover {
  transform: translateY(-3px) perspective(800px) rotateX(1deg);
  box-shadow: 0 8px 24px rgba(4, 28, 44, 0.15), 0 2px 6px rgba(4, 28, 44, 0.08);
  z-index: 5;
  background: var(--dd-white);
  border-radius: 4px;
}
#individualBody tr:has(.streak-flame:hover) {
  transform: none !important;
  box-shadow: none !important;
}
body.dark-mode #individualBody tr:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
  background: #1a1a30;
}

/* Ensure header/nav stays above streak flames when scrolling */
header, .site-header, nav, .nav-bar { z-index: 200 !important; }

/* Badge earned hover + click interaction */
.badge-earned-item {
  cursor: pointer; transition: transform 0.2s ease;
}
.badge-earned-item:hover {
  transform: scale(1.15);
}
/* Badge detail overlay */
.badge-detail-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(4, 28, 44, 0.6); z-index: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; animation: celebrateFadeIn 0.3s ease;
}
.badge-detail-overlay.hidden { display: none; }
.badge-detail-card {
  background: var(--dd-white); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  padding: 32px; max-width: 320px; width: 100%; text-align: center;
  position: relative; animation: celebrateSlideUp 0.4s ease;
}
.badge-detail-card img {
  width: 120px; height: 120px; object-fit: contain; margin-bottom: 16px;
}
.badge-detail-card h3 {
  font-size: 18px; font-weight: 700; color: var(--dd-dark-blue); margin: 0 0 8px;
}
.badge-detail-card p {
  font-size: 13px; color: var(--dd-graphite); line-height: 1.5; margin: 0;
}
.badge-detail-close {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  font-size: 22px; cursor: pointer; color: var(--dd-graphite); line-height: 1;
}
.badge-detail-close:hover { color: var(--dd-dark-blue); }
body.dark-mode .badge-detail-overlay { background: rgba(0,0,0,0.75); }
body.dark-mode .badge-detail-card { background: #1a1a30; }
body.dark-mode .badge-detail-card h3 { color: #ffffff; }
body.dark-mode .badge-detail-card p { color: #aaaabc; }

/* Bonuses tab redesign */
.bonus-header { margin-bottom: 24px; padding: 28px 24px; border-radius: 16px; background: linear-gradient(135deg, #041C2C 0%, #0a3a5a 50%, #041C2C 100%); position: relative; overflow: hidden; }
.bonus-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 20%, rgba(234,170,0,0.15) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(125,155,193,0.1) 0%, transparent 50%); pointer-events: none; }
.bonus-header::after { content: ''; position: absolute; top: -50%; right: -20%; width: 60%; height: 200%; background: radial-gradient(circle, rgba(234,170,0,0.06) 0%, transparent 70%); pointer-events: none; animation: bonusHeroGlow 6s ease-in-out infinite alternate; }
@keyframes bonusHeroGlow { 0% { opacity: 0.5; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.1); } }
.bonus-header-content {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; flex-wrap: wrap;
}
.bonus-header-text { flex: 1; min-width: 280px; }
.bonus-title { color: #ffffff !important;
  font-size: 24px; font-weight: 700;
  margin: 0 0 8px;
}
.bonus-header .bonus-subtitle { color: rgba(255,255,255,0.75) !important;
  font-size: 13px; line-height: 1.6; margin: 0;
}
.bonus-points-tile {
  min-width: 180px; text-align: center; padding: 20px 24px;
  background: linear-gradient(135deg, rgba(234,170,0,0.08), rgba(234,170,0,0.02)) !important;
  border-color: rgba(234,170,0,0.3) !important;
  box-shadow: 0 4px 24px rgba(234,170,0,0.08), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}
.bonus-points-tile .glass-value { color: var(--dd-dark-blue); }
.bonus-progress-bar {
  height: 6px; background: rgba(234, 170, 0, 0.12);
  border-radius: 3px; overflow: hidden; margin: 8px 0 6px;
}
.bonus-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--dd-yellow), #f0c040);
  border-radius: 3px; width: 0%; transition: width 0.5s ease;
  box-shadow: 0 0 4px rgba(234, 170, 0, 0.5);
  position: relative; overflow: hidden;
}
.bonus-progress-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%); animation: bonusProgressShimmer 2s ease-in-out infinite; }
@keyframes bonusProgressShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.bonus-motivational {
  font-size: 11px; color: var(--dd-graphite); font-style: italic; margin-top: 4px;
}
.bonus-header .bonus-points-tile { background: rgba(234,170,0,0.12); border: 1px solid rgba(234,170,0,0.3); backdrop-filter: blur(12px); }
.bonus-header .bonus-points-tile .glass-value { color: var(--dd-yellow); font-size: 36px; }
.bonus-header .bonus-points-tile .glass-label { color: rgba(255,255,255,0.9); }
.bonus-header .bonus-points-tile .glass-desc { color: rgba(255,255,255,0.6); }
.bonus-header .bonus-motivational { color: var(--dd-yellow) !important; opacity: 1 !important; }
/* Remove white section backgrounds on Bonuses tab */
#challengesView .perf-section {
  background: none; box-shadow: none; border: none; padding: 0;
}
#challengesView .perf-section.bonus-category-section {
  border: none;
  border-left: 4px solid transparent;
  padding-left: 24px;
}
/* Make activity tiles liquid glass with vibrant active state */
#challengesView .challenge-tile-card {
  background: rgba(125, 155, 193, 0.08);
  border: 1px solid rgba(125, 155, 193, 0.15);
  box-shadow: 0 4px 20px rgba(4, 28, 44, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#challengesView .challenge-tile-card:hover {
  box-shadow: 0 12px 40px rgba(4, 28, 44, 0.15), 0 0 0 2px var(--dd-yellow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: translateY(-6px);
}
#challengesView .challenge-tile-card.challenge-active {
  background: linear-gradient(135deg, rgba(4,28,44,0.9), rgba(26,58,80,0.9));
  border: 2px solid var(--dd-light-blue);
  box-shadow: 0 4px 20px rgba(125,155,193,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
  animation: activeTileGlow 2.5s ease-in-out infinite;
}
@keyframes activeTileGlow {
  0%, 100% {
    border-color: var(--dd-light-blue);
    box-shadow: 0 4px 16px rgba(125,155,193,0.15), inset 0 1px 0 rgba(255,255,255,0.1);
  }
  50% {
    border-color: #c0d8f0;
    box-shadow: 0 4px 28px rgba(125,155,193,0.5), 0 0 14px rgba(125,155,193,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  }
}

/* Staggered entrance for Bonuses tab tiles */
#challengesView .challenge-tile-card {
  opacity: 0; animation: bonusTileEntrance 0.4s ease forwards;
}
#challengesView .challenge-tile-card:nth-child(1) { animation-delay: 0.05s; }
#challengesView .challenge-tile-card:nth-child(2) { animation-delay: 0.1s; }
#challengesView .challenge-tile-card:nth-child(3) { animation-delay: 0.15s; }
#challengesView .challenge-tile-card:nth-child(4) { animation-delay: 0.2s; }
#challengesView .challenge-tile-card:nth-child(5) { animation-delay: 0.25s; }
#challengesView .challenge-tile-card:nth-child(6) { animation-delay: 0.3s; }
#challengesView .challenge-tile-card:nth-child(7) { animation-delay: 0.35s; }
#challengesView .challenge-tile-card:nth-child(8) { animation-delay: 0.4s; }
#challengesView .challenge-tile-card:nth-child(9) { animation-delay: 0.45s; }
#challengesView .challenge-tile-card:nth-child(10) { animation-delay: 0.5s; }
@keyframes bonusTileEntrance {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Active tiles: combine entrance + glow */
#challengesView .challenge-tile-card.challenge-active {
  animation: bonusTileEntrance 0.4s ease forwards, activeTileGlow 2.5s ease-in-out 0.5s infinite;
}
#challengesView .challenge-tile-card.challenge-active:hover {
  animation-play-state: paused;
  transform: translateY(-4px) !important;
  opacity: 1 !important;
  box-shadow: 0 12px 40px rgba(125,155,193,0.3), 0 0 0 2px var(--dd-yellow), inset 0 1px 0 rgba(255,255,255,0.15);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}
#challengesView .challenge-tile-card.challenge-completed {
  background: rgba(46, 125, 50, 0.06);
  border-color: rgba(46, 125, 50, 0.25);
}
/* Dark mode bonuses */
body.dark-mode .bonus-title { color: #ffffff; }
body.dark-mode .bonus-subtitle { color: #aaaabc; }
body.dark-mode .bonus-points-tile { background: linear-gradient(135deg, rgba(234,170,0,0.1), rgba(234,170,0,0.03)) !important; border-color: rgba(234,170,0,0.25) !important; }
body.dark-mode .bonus-points-tile .glass-value { color: var(--dd-yellow); }
body.dark-mode .bonus-progress-bar { background: rgba(234,170,0,0.08); }
body.dark-mode .bonus-motivational { color: #8888aa; }
body.dark-mode .bonus-header { background: linear-gradient(135deg, #0a0a18 0%, #1a1a30 50%, #0a0a18 100%); }
body.dark-mode .bonus-header .bonus-points-tile { background: rgba(234,170,0,0.08); border-color: rgba(234,170,0,0.25); }
body.dark-mode .bonus-filters { background: rgba(30,30,54,0.6); border-color: rgba(125,155,193,0.1); box-shadow: 0 2px 12px rgba(0,0,0,0.2); }
body.dark-mode .bonus-filter-pill { background: rgba(30,30,54,0.8); border-color: #3a3a5a; color: #ccccdd; }
body.dark-mode .bonus-filter-pill:hover { background: rgba(125,155,193,0.15); border-color: var(--dd-light-blue); color: #ffffff; }
body.dark-mode .bonus-filter-pill.active { background: var(--dd-yellow); color: var(--dd-dark-blue); border-color: var(--dd-yellow); }
body.dark-mode .bonus-category-section { background: linear-gradient(180deg, #1e1e36 0%, #16162c 100%); box-shadow: 0 2px 12px rgba(0,0,0,0.2); }
body.dark-mode #challengesView .challenge-tile-card {
  background: rgba(30, 30, 54, 0.4);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body.dark-mode #challengesView .challenge-tile-card.challenge-active {
  background: linear-gradient(135deg, rgba(4,28,44,0.95), rgba(20,50,70,0.95));
  border-color: var(--dd-light-blue);
}
@media (max-width: 480px) {
  .bonus-header-content { flex-direction: column; }
  .bonus-points-tile { width: 100%; }
  /* On the narrow/tall mobile card, the desktop 3-stop 135deg gradient compresses
     its bright #0a3a5a mid-stop into a visible diagonal band. Use a smoother,
     mostly-vertical 2-stop gradient (no bright middle) so it reads as subtle depth. */
  .bonus-header { background: linear-gradient(160deg, #073047 0%, #041C2C 78%); }
  body.dark-mode .bonus-header { background: linear-gradient(160deg, #16162e 0%, #0a0a18 78%); }
}

/* Bonus tab fixes — text contrast, progress bar, status pills, content type */
.bonus-progress-bar { background: rgba(4, 28, 44, 0.2); }
.bonus-points-tile .glass-desc { color: var(--dd-dark-blue); opacity: 0.8; }

/* Fix text readability on dark active tiles */
#challengesView .challenge-tile-card.challenge-active .challenge-tile-name,
#challengesView .challenge-tile-card.challenge-active .challenge-tile-points,
#challengesView .challenge-tile-card.challenge-active .challenge-tile-date {
  color: #ffffff;
}
#challengesView .challenge-tile-card.challenge-active .challenge-tile-status { color: rgba(255,255,255,0.7); }

/* Fix text on locked tiles too */
#challengesView .challenge-tile-card .challenge-tile-points,
#challengesView .challenge-tile-card .challenge-tile-date {
  color: #ffffff;
}
#challengesView .challenge-tile-card .challenge-tile-name { color: #ffffff; }
#challengesView .challenge-tile-card.challenge-locked .challenge-tile-name,
#challengesView .challenge-tile-card.challenge-locked .challenge-tile-points,
#challengesView .challenge-tile-card.challenge-locked .challenge-tile-date { color: var(--dd-graphite); }

/* Status pill on tile */
.challenge-tile-meta-row {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.challenge-tile-status-pill {
  padding: 2px 8px; border-radius: 10px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap;
}
.challenge-tile-status-pill.pill-active { background: rgba(125,155,193,0.25); color: var(--dd-light-blue); border: 1px solid rgba(125,155,193,0.4); }
.challenge-tile-status-pill.pill-completed { background: rgba(46,125,50,0.2); color: #2e7d32; border: 1px solid rgba(46,125,50,0.3); }
.challenge-tile-status-pill.pill-inprogress { background: rgba(234,170,0,0.2); color: var(--dd-yellow); border: 1px solid rgba(234,170,0,0.4); }
.challenge-tile-card.challenge-inprogress { box-shadow: 0 0 12px rgba(234,170,0,0.4), 0 4px 12px rgba(0,0,0,0.15) !important; border-color: rgba(234,170,0,0.5) !important; }
#challengesView .challenge-tile-card.challenge-inprogress {
  animation: bonusTileEntrance 0.4s ease forwards, inprogressTileGlow 2.5s ease-in-out 0.5s infinite !important;
}
@keyframes inprogressTileGlow {
  0%, 100% {
    border-color: rgba(234,170,0,0.5);
    box-shadow: 0 4px 16px rgba(234,170,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
  }
  50% {
    border-color: rgba(234,170,0,0.8);
    box-shadow: 0 4px 28px rgba(234,170,0,0.45), 0 0 14px rgba(234,170,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
  }
}
.challenge-tile-status-pill.pill-locked { background: rgba(136,139,141,0.15); color: var(--dd-graphite); border: 1px dashed rgba(136,139,141,0.4); }
.challenge-tile-status-pill.pill-closed { background: rgba(224,25,51,0.1); color: var(--dd-red); border: 1px dashed rgba(224,25,51,0.3); }

/* Content type badge on tile */
.challenge-tile-type-badge {
  padding: 2px 6px; border-radius: 6px;
  font-size: 9px; font-weight: 600;
  background: rgba(4,28,44,0.08); color: var(--dd-dark-blue);
  white-space: nowrap;
}
.challenge-tile-card.challenge-locked .challenge-tile-type-badge { color: var(--dd-graphite); background: rgba(0,0,0,0.04); }
.challenge-tile-card.challenge-active .challenge-tile-type-badge { background: rgba(125,155,193,0.12); color: var(--dd-light-blue); }

/* Additional bonus tab fixes */
/* Locked tiles dashed border */
#challengesView .challenge-tile-card.challenge-locked {
  border: 2px dashed rgba(136, 139, 141, 0.4);
  background: rgba(136, 139, 141, 0.04);
}

/* Bonus category section styling — left accent border + spacing */
.bonus-category-section {
  border-left: 4px solid var(--dd-cool-gray);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  background: linear-gradient(180deg, var(--dd-white) 0%, #f8f8f6 100%);
  box-shadow: 0 2px 12px rgba(4,28,44,0.06), inset 0 1px 0 rgba(255,255,255,0.8);
  margin-top: 24px !important;
}
#challengesView .bonus-category-activities { border-left-color: var(--dd-light-blue) !important; }
#challengesView .bonus-category-trainings { border-left-color: #2e7d32 !important; }
#challengesView .bonus-category-demption { border-left-color: var(--dd-yellow) !important; }

/* Count badge next to section title */
.bonus-section-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 8px;
  border-radius: 12px; font-size: 11px; font-weight: 700;
  background: rgba(125,155,193,0.15); color: var(--dd-dark-blue);
  margin-left: 8px; vertical-align: middle;
}
.bonus-category-activities .bonus-section-count { background: rgba(125,155,193,0.15); color: var(--dd-light-blue); }
.bonus-category-trainings .bonus-section-count { background: rgba(46,125,50,0.12); color: #2e7d32; }
.bonus-category-demption .bonus-section-count { background: rgba(234,170,0,0.12); color: #b8860b; }

/* Dark mode bonus category sections */
body.dark-mode .bonus-category-activities { border-left-color: var(--dd-light-blue); }
body.dark-mode .bonus-category-trainings { border-left-color: #4caf50; }
body.dark-mode .bonus-category-demption { border-left-color: var(--dd-yellow); }
body.dark-mode .bonus-section-count { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
body.dark-mode .bonus-category-activities .bonus-section-count { background: rgba(125,155,193,0.2); color: var(--dd-light-blue); }
body.dark-mode .bonus-category-trainings .bonus-section-count { background: rgba(76,175,80,0.15); color: #4caf50; }
body.dark-mode .bonus-category-demption .bonus-section-count { background: rgba(234,170,0,0.15); color: var(--dd-yellow); }

/* Subtitle text readability */
.bonus-subtitle { color: var(--dd-dark-blue); opacity: 1; font-size: 13px; line-height: 1.5; }
body.dark-mode .bonus-subtitle { color: #ccccdd; opacity: 1; }

/* Dark mode: tile meta row pills */
body.dark-mode .challenge-tile-type-badge { background: rgba(125,155,193,0.15); color: rgba(255,255,255,0.7); }
body.dark-mode .challenge-tile-status-pill.pill-active { color: #ffffff !important; background: rgba(125,155,193,0.25) !important; border-color: rgba(125,155,193,0.6) !important; }
body.dark-mode .challenge-tile-status-pill.pill-completed { color: #4caf50; background: rgba(76,175,80,0.15); }

/* Bonus confetti particles */
.bonus-confetti-particle {
  position: absolute;
  top: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  pointer-events: none;
  animation: bonusConfettiFall 1s ease-out forwards;
  opacity: 0;
}
@keyframes bonusConfettiFall {
  0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  50% { opacity: 1; }
  100% { transform: translateY(-40px) translateX(var(--x, 10px)) rotate(360deg) scale(0.3); opacity: 0; }
}
.bonus-confetti-particle:nth-child(odd) { --x: -15px; width: 4px; height: 8px; border-radius: 2px; }
.bonus-confetti-particle:nth-child(even) { --x: 12px; }
.bonus-confetti-particle:nth-child(3n) { --x: -8px; width: 5px; height: 5px; }
.bonus-confetti-particle:nth-child(4n) { --x: 20px; }

/* "NEW" badge on recently activated tiles */
.challenge-tile-new-badge {
  position: absolute; top: 8px; right: 8px;
  padding: 2px 6px; border-radius: 8px;
  font-size: 9px; font-weight: 800; text-transform: uppercase;
  background: var(--dd-yellow); color: var(--dd-dark-blue);
  animation: newBadgePulse 1.5s ease-in-out infinite;
  z-index: 5; letter-spacing: 0.03em;
}
@keyframes newBadgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(234,170,0,0.4); }
  50% { transform: scale(1.05); box-shadow: 0 0 8px 2px rgba(234,170,0,0.3); }
}

/* Hover preview on tiles */
.challenge-tile-preview {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 10px 12px;
  background: rgba(4,28,44,0.97);
  color: rgba(255,255,255,0.9);
  font-size: 11px; line-height: 1.4;
  transform: translateY(100%);
  transition: transform 0.25s ease;
  pointer-events: none;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  max-height: 60px;
  backdrop-filter: blur(4px);
}
.challenge-tile-card:hover .challenge-tile-preview {
  transform: translateY(0);
}

/* Category progress rings */
.bonus-section-progress {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px; vertical-align: middle;
}
.bonus-section-progress svg {
  width: 20px; height: 20px;
}
.bonus-section-progress .ring-bg {
  fill: none; stroke: rgba(0,0,0,0.08); stroke-width: 3;
}
.bonus-section-progress .ring-fill {
  fill: none; stroke-width: 3; stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}
.bonus-category-activities .ring-fill { stroke: var(--dd-light-blue); }
.bonus-category-trainings .ring-fill { stroke: #2e7d32; }
.bonus-category-demption .ring-fill { stroke: var(--dd-yellow); }
.bonus-section-progress-label {
  font-size: 10px; font-weight: 600; color: var(--dd-graphite);
}
body.dark-mode .bonus-section-progress-label { color: rgba(255,255,255,0.6); }
body.dark-mode .bonus-section-progress .ring-bg { stroke: rgba(255,255,255,0.1); }

/* Tile flip animation on completion */
.challenge-tile-card.challenge-flip-complete {
  animation: tileFlipComplete 0.6s ease forwards;
}
@keyframes tileFlipComplete {
  0% { transform: perspective(600px) rotateY(0deg); }
  50% { transform: perspective(600px) rotateY(90deg); opacity: 0.5; }
  100% { transform: perspective(600px) rotateY(0deg); opacity: 1; }
}

/* Points tile label cleanup */
.bonus-points-tile .glass-label { font-size: 11px; margin-top: 2px; }

/* Bonus activities filter/sort bar */
.bonus-filters {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 20px;
  margin-bottom: 16px; border-radius: 12px;
  background: rgba(125, 155, 193, 0.06);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(125, 155, 193, 0.15);
  box-shadow: 0 2px 12px rgba(4, 28, 44, 0.04), inset 0 1px 0 rgba(255,255,255,0.4);
}
.bonus-filter-group { display: flex; align-items: center; gap: 6px; }
.bonus-filter-label { font-size: 11px; font-weight: 600; color: var(--dd-dark-blue); opacity: 0.7; }
.bonus-filter-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.bonus-filter-pill {
  padding: 5px 14px; border-radius: 20px; font-size: 11px; font-weight: 600;
  border: 1.5px solid rgba(125,155,193,0.3); color: var(--dd-graphite);
  cursor: pointer; transition: all 0.2s;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.bonus-filter-pill:hover { background: rgba(125,155,193,0.12); border-color: var(--dd-light-blue); color: var(--dd-dark-blue); transform: translateY(-1px); }
.bonus-filter-pill.active { background: var(--dd-yellow); color: var(--dd-dark-blue); border-color: var(--dd-yellow); box-shadow: 0 2px 8px rgba(234,170,0,0.3); font-weight: 700; }
.bonus-sort-select {
  padding: 5px 10px; border-radius: 8px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--dd-cool-gray); background: var(--dd-white); color: var(--dd-dark-blue);
  cursor: pointer;
}
body.dark-mode .bonus-filter-label { color: #ccccdd; }
body.dark-mode .bonus-sort-select { background: #1a1a30; border-color: #333355; color: #ccccdd; }

/* --- Score Adjustments --- */
.adj-mode-tabs { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 2px solid var(--dd-cool-gray); }
.adj-mode-tab { background: none; border: none; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--dd-graphite); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.2s, border-color 0.2s; }
.adj-mode-tab.active { color: var(--dd-dark-blue); border-bottom-color: var(--dd-yellow); }
body.dark-mode .adj-mode-tab.active { color: var(--dd-yellow); }
.adj-filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.adj-filter-label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--dd-graphite); }
.adj-select, .adj-input { padding: 8px 12px; border: 1px solid var(--dd-cool-gray); border-radius: var(--radius); font-size: 13px; background: var(--dd-white); color: var(--dd-dark-blue); min-width: 180px; }
body.dark-mode .adj-select, body.dark-mode .adj-input { background: #1a1a30; color: #e8e8f0; border-color: #2a2a4a; }
.adj-reason-row { display: flex; gap: 12px; margin-bottom: 12px; }
.adj-reason-row .adj-input { width: 100%; }
.adj-affected { margin-top: 16px; padding: 12px 16px; background: rgba(125,155,193,0.06); border: 1px solid rgba(125,155,193,0.2); border-radius: var(--radius); }
.adj-affected-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.adj-affected-count { font-size: 13px; font-weight: 700; color: var(--dd-dark-blue); }
body.dark-mode .adj-affected-count { color: var(--dd-yellow); }
.adj-select-all { font-size: 12px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.adj-affected-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.adj-affected-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 4px; font-size: 13px; background: var(--dd-white); border: 1px solid var(--dd-cool-gray); }
.adj-affected-row:hover { background: rgba(234,170,0,0.04); }
body.dark-mode .adj-affected-row { background: #1a1a30; border-color: #2a2a4a; }
.adj-affected-row .adj-name { font-weight: 600; min-width: 160px; }
.adj-affected-row .adj-email { color: var(--dd-graphite); font-size: 12px; flex: 1; }
.adj-affected-row .adj-impact { font-size: 12px; font-weight: 600; color: var(--dd-red); }
.adj-affected-row .adj-impact.positive { color: #10b981; }
.adj-csv-upload { margin-bottom: 12px; }
.adj-csv-status { font-size: 12px; color: var(--dd-graphite); margin-left: 8px; }
.adj-history-list { max-height: 200px; overflow-y: auto; }
.adj-history-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--dd-cool-gray); font-size: 12px; }
.adj-history-item:last-child { border-bottom: none; }
.adj-history-date { color: var(--dd-graphite); min-width: 80px; }
.adj-history-campaign { font-weight: 600; min-width: 180px; }
.adj-history-action { min-width: 140px; }
.adj-history-count { font-weight: 700; color: var(--dd-dark-blue); }
body.dark-mode .adj-history-count { color: var(--dd-yellow); }
.adj-history-reason { color: var(--dd-graphite); flex: 1; font-style: italic; }

/* --- Participant Detail Dialog: Sim Cards + Pills --- */
.participant-sim-list { display: flex; flex-direction: column; gap: 10px; }
.participant-sim-card { padding: 12px 16px; background: var(--dd-white); border: 1px solid var(--dd-cool-gray); border-radius: var(--radius); }
body.dark-mode .participant-sim-card { background: #1a1a30; border-color: #2a2a4a; }
.participant-sim-name { font-size: 13px; font-weight: 600; color: var(--dd-dark-blue); margin-bottom: 8px; }
body.dark-mode .participant-sim-name { color: #e8e8f0; }
.participant-sim-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.adj-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.adj-pill-good { background: rgba(16,185,129,0.12); color: #059669; }
.adj-pill-bad { background: rgba(224,25,51,0.1); color: var(--dd-red); }
body.dark-mode .adj-pill-good { background: rgba(16,185,129,0.2); color: #34d399; }
body.dark-mode .adj-pill-bad { background: rgba(224,25,51,0.2); color: #f87171; }

/* --- Campaign Overview: Report Rate highlight --- */
.col-report-rate, td.col-report-rate { background: rgba(16, 185, 129, 0.08); font-weight: 700; }
body.dark-mode .col-report-rate, body.dark-mode td.col-report-rate { background: rgba(16, 185, 129, 0.15); }

/* --- Dark mode: Admin sub-tabs visibility --- */
body.dark-mode .view-toggle .toggle-btn { color: rgba(255,255,255,0.7); }
body.dark-mode .view-toggle .toggle-btn.active { color: var(--dd-yellow); border-bottom-color: var(--dd-yellow); }
body.dark-mode .view-toggle .toggle-btn:hover { color: var(--dd-white); }

/* --- Dark mode: Feedback widget visibility --- */
body.dark-mode .feedback-fab { background: var(--dd-yellow); color: var(--dd-dark-blue); box-shadow: 0 4px 12px rgba(234,170,0,0.4); }

/* --- Communications summary: 5 columns on one row --- */
#adminComms > .admin-dashboard-summary { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 768px) { #adminComms > .admin-dashboard-summary { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { #adminComms > .admin-dashboard-summary { grid-template-columns: repeat(2, 1fr); } }

/* --- Banner Messages: Segment Pills --- */
.banner-segment-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 14px; font-size: 11px; font-weight: 600; border: 1.5px solid var(--dd-cool-gray); background: var(--dd-white); color: var(--dd-graphite); cursor: pointer; transition: all 0.15s; }
.seg-pill:hover { border-color: var(--dd-light-blue); color: var(--dd-dark-blue); }
.seg-pill.active { background: var(--dd-dark-blue); color: var(--dd-white); border-color: var(--dd-dark-blue); }
body.dark-mode .seg-pill { background: #1a1a30; border-color: #2a2a4a; color: #9999aa; }
body.dark-mode .seg-pill.active { background: var(--dd-yellow); color: var(--dd-dark-blue); border-color: var(--dd-yellow); }

/* --- Banner Messages: Merge Pills (reuse email template style) --- */
.banner-merge-pills { display: flex; flex-wrap: wrap; gap: 6px; }

/* --- Banner Animation Classes --- */
.banner-anim-slideDown { animation: bannerSlideDown 0.4s ease-out; }
.banner-anim-fadeIn { animation: bannerFadeIn 0.6s ease-out; }
.banner-anim-pulse { animation: bannerPulse 2s ease-in-out infinite; }
.banner-anim-bounce { animation: bannerBounce 0.6s ease-out; }
.banner-anim-glow { text-shadow: 0 0 8px rgba(4,28,44,0.3), 0 0 16px rgba(4,28,44,0.15); }
.banner-anim-colorCycle { animation: bannerColorCycle 4s linear infinite; }
@keyframes bannerSlideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes bannerFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bannerPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.01); box-shadow: 0 0 12px rgba(234,170,0,0.4); } }
@keyframes bannerBounce { 0% { transform: translateY(-20px); opacity: 0; } 50% { transform: translateY(4px); } 100% { transform: translateY(0); opacity: 1; } }
@keyframes bannerColorCycle { 0% { color: #041C2C; } 33% { color: #0a2e4a; } 66% { color: #1a4a6a; } 100% { color: #041C2C; } }

/* --- Emoji picker hover --- */
.emoji-item:hover { background: rgba(234,170,0,0.15); }
body.dark-mode .emoji-item:hover { background: rgba(234,170,0,0.25); }
body.dark-mode .emoji-picker, body.dark-mode #bannerEmojiPicker { background: #1a1a30; border-color: #2a2a4a; }

/* --- Banner Compose Card --- */
.banner-compose-card { position: relative; }
.banner-compose-card textarea { border-top: 1px solid var(--dd-cool-gray); border-radius: 0 0 8px 8px; }
.banner-compose-toolbar { z-index: 10; }
#bannerEmojiPicker { z-index: 9999; }

/* --- Dialog Close Button: Top-Right Position (all dialogs) --- */
.resource-dialog-card { position: relative; }
.resource-dialog-close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: 1px solid var(--dd-cool-gray); border-radius: 6px;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer; color: var(--dd-graphite);
  transition: background 0.15s, color 0.15s;
}
.resource-dialog-close:hover { background: var(--dd-cool-gray); color: var(--dd-dark-blue); }
body.dark-mode .resource-dialog-close { border-color: #3a3a5a; color: #9999aa; }
body.dark-mode .resource-dialog-close:hover { background: #2a2a4a; color: #fff; }

/* --- Banner Editor Dialog: Larger, Email-Editor Style --- */
#bannerEditorOverlay .resource-dialog-card { max-width: 850px; width: 90vw; padding: 24px 28px; }

/* --- Styled Tooltips — JS-based (appended to body, never clipped) --- */
/* Segment pills and character icons use JS hover tooltips via data-tooltip attr */
/* No CSS ::after tooltips needed — handled by initTooltips() in app.js */
.seg-pill[data-tooltip], .banner-char-btn[data-tooltip], .ann-icon-btn[data-tooltip] { position: relative; }
.kiro-tooltip {
  position: fixed; z-index: 99999; pointer-events: none;
  background: #041C2C; color: #FFFFFF;
  font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 6px;
  white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  letter-spacing: 0.02em; font-family: var(--font-sans);
  opacity: 0; transition: opacity 0.15s;
}
.kiro-tooltip.visible { opacity: 1; }
.kiro-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #041C2C;
}
.kiro-tooltip.below::after {
  top: auto; bottom: 100%;
  border-top-color: transparent; border-bottom-color: #041C2C;
}
.kiro-tooltip.streak {
  color: var(--dd-yellow); font-style: italic;
  box-shadow: 0 0 12px rgba(234,170,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
  transition: none; opacity: 1;
  animation: streakScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes streakScaleIn {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* --- Character icon tooltips — handled by JS initTooltips() same as seg-pills --- */

/* --- Emoji button in banner toolbar: match character icon size --- */
#bannerEmojiBtn { width: 36px; height: 36px; border: 2px solid var(--dd-cool-gray); border-radius: 6px; background: var(--dd-white); cursor: pointer; font-size: 20px; padding: 2px; display: flex; align-items: center; justify-content: center; }
#bannerEmojiBtn:hover { border-color: var(--dd-light-blue); }
body.dark-mode #bannerEmojiBtn { background: #1a1a30; border-color: #2a2a4a; }


/* --- Email Editor Table Context Menu --- */
.email-table-ctx-menu {
  position: fixed;
  z-index: 10000;
  background: var(--dd-dark-blue);
  border: 1px solid rgba(125, 155, 193, 0.25);
  border-radius: 8px;
  padding: 6px 0;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
  font-family: var(--font-sans);
  animation: ctxMenuFadeIn 0.12s ease-out;
}
@keyframes ctxMenuFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.email-table-ctx-menu button {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--dd-white);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.email-table-ctx-menu button:hover {
  background: rgba(234, 170, 0, 0.15);
}
.email-table-ctx-menu button:focus-visible {
  outline: 2px solid var(--dd-yellow);
  outline-offset: -2px;
}
.ctx-menu-divider {
  height: 1px;
  background: rgba(125, 155, 193, 0.2);
  margin: 4px 12px;
}

/* Dark mode context menu — inherits dark base already */
body.dark-mode .email-table-ctx-menu {
  background: #0a0a18;
  border-color: #2a2a4a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
}
body.dark-mode .email-table-ctx-menu button:hover {
  background: rgba(234, 170, 0, 0.12);
}
body.dark-mode .ctx-menu-divider {
  background: rgba(125, 155, 193, 0.12);
}

/* ============================================
   COMMUNICATIONS TAB — VISUAL ENHANCEMENTS
   ============================================ */

/* --- 2. Engagement Heatmap --- */
.heatmap-wrapper { display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.heatmap-col-labels { display: flex; align-items: center; gap: 2px; padding-left: 36px; }
.heatmap-col-labels span { width: calc((100% - 36px) / 8); text-align: center; font-size: 10px; color: var(--dd-graphite); }
.heatmap-hour { min-width: 36px; }
.heatmap-row { display: flex; align-items: center; gap: 2px; }
.heatmap-day { min-width: 36px; font-size: 11px; font-weight: 600; color: var(--dd-dark-blue); }
.heatmap-cell {
  flex: 1; height: 16px; border-radius: 3px; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.heatmap-cell:hover { transform: scale(1.3); z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
body.dark-mode .heatmap-day { color: #e8e8f0; }
body.dark-mode .heatmap-col-labels span { color: #8888aa; }

/* --- 3. Split Preview --- */
.split-preview-dialog {
  background: var(--dd-white); border-radius: var(--radius);
  max-width: 95vw; width: 1060px; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.split-preview-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px; border-bottom: 1px solid var(--dd-cool-gray);
}
.split-preview-frames { display: flex; gap: 24px; padding: 24px; overflow: auto; flex: 1; align-items: flex-start; justify-content: center; }
.split-frame { display: flex; flex-direction: column; }
.split-frame-label { font-size: 11px; font-weight: 600; color: var(--dd-graphite); text-align: center; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.split-frame-chrome {
  border: 2px solid var(--dd-cool-gray); border-radius: 12px;
  overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.split-frame-chrome-mobile { max-width: 375px; }
.split-frame-desktop .split-frame-chrome { width: 600px; }
.split-frame-envelope { padding: 12px 16px; border-bottom: 1px solid var(--dd-cool-gray); background: #fafafa; }
.split-frame-body { padding: 16px; max-height: 500px; overflow-y: auto; font-size: 14px; }
body.dark-mode .split-preview-dialog { background: #1e1e36; }
body.dark-mode .split-preview-header { border-bottom-color: #2a2a4a; }
body.dark-mode .split-frame-chrome { border-color: #3a3a5a; }
body.dark-mode .split-frame-envelope { background: #141428; border-bottom-color: #2a2a4a; }

/* --- 4. Template Thumbnail Gallery --- */
.template-gallery { display: flex; gap: 12px; overflow-x: auto; overflow-y: visible; padding: 32px 0 12px; margin-bottom: 12px; }
.tpl-gallery-card {
  min-width: 180px; max-width: 180px; height: 140px;
  border: 1px solid var(--dd-cool-gray); border-radius: var(--radius);
  overflow: visible; cursor: pointer; display: flex; flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  background: var(--dd-white);
}
.tpl-gallery-card:hover { border-color: var(--dd-yellow); box-shadow: 0 4px 12px rgba(234,170,0,0.15); transform: translateY(-2px); }
.tpl-gallery-preview { flex: 1; overflow: hidden; padding: 4px; position: relative; border-radius: 0 0 6px 6px; }
.tpl-gallery-name { padding: 6px 8px; font-size: 11px; font-weight: 600; color: var(--dd-dark-blue); border-top: 1px solid var(--dd-cool-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-gallery-new {
  align-items: center; justify-content: center; gap: 6px;
  border-style: dashed; background: rgba(125,155,193,0.04);
}
.tpl-gallery-plus { font-size: 28px; color: var(--dd-light-blue); font-weight: 300; }
.tpl-gallery-label { font-size: 12px; color: var(--dd-graphite); font-weight: 600; }
body.dark-mode .tpl-gallery-card { background: #1a1a30; border-color: #2a2a4a; }
body.dark-mode .tpl-gallery-card:hover { border-color: var(--dd-yellow); }
body.dark-mode .tpl-gallery-name { color: #e8e8f0; border-top-color: #2a2a4a; }
body.dark-mode .tpl-gallery-new { background: rgba(125,155,193,0.06); }

/* --- 5. Drag-and-Drop Content Blocks --- */
.drag-blocks-panel { margin-bottom: 12px; padding: 10px 12px; background: rgba(125,155,193,0.04); border: 1px solid var(--dd-cool-gray); border-radius: var(--radius); }
.drag-blocks-title { font-size: 11px; font-weight: 700; color: var(--dd-graphite); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.drag-blocks-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.drag-block-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 6px;
  background: var(--dd-white); border: 1px solid var(--dd-cool-gray);
  cursor: grab; font-size: 12px; font-weight: 500;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  user-select: none;
}
.drag-block-item:hover { border-color: var(--dd-yellow); box-shadow: 0 2px 8px rgba(234,170,0,0.12); }
.drag-block-item:active, .drag-block-item.dragging { transform: scale(0.95); opacity: 0.7; cursor: grabbing; }
.drag-block-icon { font-size: 14px; }
.drag-block-label { color: var(--dd-dark-blue); }
body.dark-mode .drag-blocks-panel { background: rgba(125,155,193,0.06); border-color: #2a2a4a; }
body.dark-mode .drag-block-item { background: #1a1a30; border-color: #2a2a4a; }
body.dark-mode .drag-block-item:hover { border-color: var(--dd-yellow); }
body.dark-mode .drag-block-label { color: #e8e8f0; }

/* --- 6. Brand Color Swatches --- */
.brand-swatches { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; vertical-align: middle; }
.brand-swatch-dot {
  width: 8px; height: 8px; border-radius: 50%;
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
  display: inline-block;
}
.brand-swatch-dot:hover { transform: scale(1.5); box-shadow: 0 0 4px rgba(0,0,0,0.3); }

/* --- 7. Audience Size Meter --- */
.audience-meter-svg { display: block; }
.audience-meter-fill { transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
body.dark-mode .audience-meter-fill { stroke: var(--dd-yellow); }
body.dark-mode #audienceMeterRing text { fill: #e8e8f0; }

/* --- 8. Schedule Calendar --- */
.schedule-cal { background: var(--dd-white); border: 1px solid var(--dd-cool-gray); border-radius: var(--radius); padding: 12px; max-width: 280px; }
.schedule-cal-header { font-size: 13px; font-weight: 700; color: var(--dd-dark-blue); text-align: center; margin-bottom: 8px; }
.schedule-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.schedule-cal-days span { text-align: center; font-size: 10px; font-weight: 600; color: var(--dd-graphite); }
.schedule-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.schedule-cal-empty { height: 28px; }
.schedule-cal-day {
  height: 28px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; border-radius: 4px; position: relative; color: var(--dd-dark-blue);
}
.schedule-cal-day.today { background: var(--dd-yellow); color: var(--dd-dark-blue); font-weight: 700; }
.schedule-cal-day.has-scheduled { cursor: pointer; }
.schedule-dot {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--dd-red);
}
body.dark-mode .schedule-cal { background: #1a1a30; border-color: #2a2a4a; }
body.dark-mode .schedule-cal-header { color: #e8e8f0; }
body.dark-mode .schedule-cal-day { color: #d0d0e0; }
body.dark-mode .schedule-cal-day.today { background: var(--dd-yellow); color: var(--dd-dark-blue); }

/* --- 9. Delivery Status Timeline --- */
.delivery-timeline { padding: 12px 16px; background: rgba(125,155,193,0.04); border: 1px solid var(--dd-cool-gray); border-radius: var(--radius); }
.delivery-tl-title { font-size: 12px; font-weight: 600; color: var(--dd-dark-blue); margin-bottom: 10px; }
.delivery-tl-stages { display: flex; align-items: center; gap: 0; }
.delivery-tl-stage { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; }
.delivery-tl-icon { font-size: 18px; }
.delivery-tl-label { font-size: 11px; font-weight: 600; color: var(--dd-dark-blue); }
.delivery-tl-time { font-size: 10px; color: var(--dd-graphite); }
.delivery-tl-stage.complete .delivery-tl-label { color: #2e7d32; }
.delivery-tl-line { flex: 1; height: 2px; background: var(--dd-cool-gray); min-width: 20px; position: relative; }
.delivery-tl-stage.complete + .delivery-tl-line { background: #2e7d32; }
body.dark-mode .delivery-timeline { background: rgba(125,155,193,0.06); border-color: #2a2a4a; }
body.dark-mode .delivery-tl-title { color: #e8e8f0; }
body.dark-mode .delivery-tl-label { color: #d0d0e0; }
body.dark-mode .delivery-tl-stage.complete .delivery-tl-label { color: #4caf50; }

/* --- 10. Feedback Bar Chart --- */
.feedback-bar-chart { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.feedback-bar-row { display: flex; align-items: center; gap: 10px; }
.feedback-bar-emoji { font-size: 18px; min-width: 28px; text-align: center; }
.feedback-bar-track { flex: 1; height: 14px; background: rgba(208,208,206,0.3); border-radius: 7px; overflow: hidden; }
.feedback-bar-fill { height: 100%; border-radius: 7px; transition: width 0.4s ease; }
.feedback-bar-count { font-size: 12px; font-weight: 700; color: var(--dd-dark-blue); min-width: 28px; text-align: right; }
body.dark-mode .feedback-bar-track { background: rgba(60,60,90,0.4); }
body.dark-mode .feedback-bar-count { color: #e8e8f0; }

/* --- 11. Trigger Flow Diagram --- */
.trigger-flow-svg { display: block; max-width: 100%; height: auto; }
body.dark-mode .trigger-flow-svg rect:nth-child(2) { fill: #1a3050; }
body.dark-mode .trigger-flow-svg text { fill: #e8e8f0; }

/* --- Audience meter animation --- */
@keyframes meterFill {
  from { stroke-dashoffset: 125.66; }
}


/* --- Heatmap Legend --- */
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-end;
}
.heatmap-legend-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--dd-graphite);
}
.heatmap-legend-bar {
  width: 120px;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--dd-cool-gray) 0%, var(--dd-yellow) 50%, var(--dd-red) 100%);
}
body.dark-mode .heatmap-legend-label { color: #8888aa; }

/* --- Template Gallery Card Fixes --- */
.tpl-gallery-card {
  border: 2px solid var(--dd-cool-gray);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.tpl-gallery-new {
  border: 2px dashed var(--dd-light-blue);
  background: rgba(125,155,193,0.06);
}
.tpl-gallery-new:hover {
  border-color: var(--dd-yellow);
  background: rgba(234,170,0,0.04);
}
.tpl-gallery-card:hover {
  border-color: var(--dd-yellow);
  box-shadow: 0 4px 16px rgba(234,170,0,0.15);
}
.tpl-gallery-name {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--dd-dark-blue);
  background: rgba(4,28,44,0.03);
  border-top: 1px solid var(--dd-cool-gray);
}
body.dark-mode .tpl-gallery-card {
  border-color: #3a3a5a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
body.dark-mode .tpl-gallery-new {
  border-color: var(--dd-light-blue);
  border-style: dashed;
  background: rgba(125,155,193,0.08);
}
body.dark-mode .tpl-gallery-name {
  color: #e8e8f0;
  background: rgba(255,255,255,0.04);
  border-top-color: #2a2a4a;
}


/* --- Template Gallery: Larger Preview + Pill Name Badge --- */
.tpl-gallery-card {
  min-width: 220px;
  max-width: 220px;
  height: 200px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.tpl-gallery-label {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--dd-dark-blue);
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
  background: rgba(4,28,44,0.04);
  border-bottom: 1px solid var(--dd-cool-gray);
  border-radius: 6px 6px 0 0;
  flex-shrink: 0;
  line-height: 1.3;
  min-height: 32px;
}
.tpl-gallery-preview {
  flex: 1;
  overflow: hidden;
  position: relative;
  border-radius: 0 0 6px 6px;
}
.tpl-gallery-iframe {
  width: 600px;
  height: 800px;
  border: none;
  pointer-events: none;
  transform: scale(0.35);
  transform-origin: top left;
  position: absolute;
  top: 0;
  left: 0;
}
.tpl-gallery-pill {
  display: none;
}
/* Hide the old bottom name bar */
.tpl-gallery-card .tpl-gallery-name {
  display: none;
}
body.dark-mode .tpl-gallery-label {
  color: #e8e8f0;
  background: rgba(255,255,255,0.04);
  border-bottom-color: #2a2a4a;
}
body.dark-mode .tpl-gallery-card:hover .tpl-gallery-label {
  color: var(--dd-yellow);
}


/* --- Template Gallery Hover Tooltip --- */
/* Handled by JS tooltip system (appended to body as .kiro-tooltip) */
.tpl-gallery-card[data-tpl-tooltip] {
  position: relative;
}

/* --- Feedback Screenshot Upload --- */
.feedback-screenshot-area { margin: 8px 0; }
.feedback-screenshot-drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px; border: 2px dashed var(--dd-cool-gray); border-radius: 8px;
  cursor: pointer; transition: border-color 0.2s, background 0.2s;
  text-align: center;
}
.feedback-screenshot-drop:hover,
.feedback-screenshot-drop.drag-over {
  border-color: var(--dd-yellow); background: rgba(234, 170, 0, 0.04);
}
.feedback-screenshot-preview {
  position: relative; margin-top: 8px; display: inline-block;
}
.feedback-screenshot-thumb {
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
}
.feedback-screenshot-thumb:hover {
  transform: scale(1.1); box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
body.dark-mode .feedback-screenshot-drop { border-color: #3a3a5a; }
body.dark-mode .feedback-screenshot-drop:hover,
body.dark-mode .feedback-screenshot-drop.drag-over { border-color: var(--dd-yellow); background: rgba(234,170,0,0.08); }

/* --- Derby Lifecycle Step Indicator --- */
.derby-lifecycle-steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.lifecycle-step {
  padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: rgba(136, 139, 141, 0.1); color: var(--dd-graphite);
  border: 1px solid var(--dd-cool-gray); transition: all 0.2s;
}
.lifecycle-step.active-state {
  background: var(--dd-yellow); color: var(--dd-dark-blue);
  border-color: var(--dd-yellow); box-shadow: 0 2px 8px rgba(234, 170, 0, 0.3);
  font-weight: 700;
}
body.dark-mode .lifecycle-step { background: rgba(60,60,90,0.3); color: #9999aa; border-color: #3a3a5a; }
body.dark-mode .lifecycle-step.active-state { background: var(--dd-yellow); color: var(--dd-dark-blue); border-color: var(--dd-yellow); }

/* Active lifecycle button highlight */
.btn-lifecycle-active {
  background: var(--dd-yellow) !important;
  color: var(--dd-dark-blue) !important;
  border-color: var(--dd-yellow) !important;
  box-shadow: 0 2px 8px rgba(234, 170, 0, 0.3);
}
.btn-lifecycle-active:hover {
  background: #d99a00 !important;
}


/* --- Grace period input: match date picker styling --- */
.derby-date-row .admin-date-label input[type="number"] {
  padding: 8px 12px;
  border: 1px solid var(--dd-cool-gray);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 13px;
  background: var(--dd-white);
  width: 100%;
}
.derby-date-row .admin-date-label input[type="number"]:focus {
  outline: none;
  border-color: var(--dd-light-blue);
  box-shadow: 0 0 0 3px rgba(125,155,193,0.2);
}
body.dark-mode .derby-date-row .admin-date-label input[type="number"] {
  background: #e8e8f0;
  color: #000000;
  border-color: #3a3a5a;
}

/* ============================================================
   ROUND 1: UX ELEVATION — Skeleton, Transitions, Engagement
   ============================================================ */

/* --- Enhanced Skeleton Loading --- */
.skeleton-block {
  background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
  min-height: 20px;
}
body.dark-mode .skeleton-block {
  background: linear-gradient(90deg, #2a2a4a 25%, #3a3a5a 50%, #2a2a4a 75%);
  background-size: 200% 100%;
}
.skeleton-stat-value {
  width: 60px; height: 32px; margin: 0 auto 6px; border-radius: 6px;
}
.skeleton-stat-label {
  width: 80px; height: 12px; margin: 0 auto; border-radius: 4px;
}
.skeleton-section {
  padding: 20px 24px; margin-bottom: 16px;
  background: linear-gradient(180deg, var(--dd-white) 0%, #f8f8f6 100%);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08);
}
body.dark-mode .skeleton-section {
  background: linear-gradient(180deg, #1e1e36 0%, #16162c 100%);
  border: 1px solid #2a2a4a;
}
.skeleton-title {
  width: 140px; height: 14px; margin-bottom: 16px; border-radius: 4px;
}
.skeleton-bar {
  width: 100%; height: 44px; border-radius: 22px;
}
.skeleton-row {
  display: flex; gap: 16px; align-items: center; padding: 12px 0;
  border-bottom: 1px solid var(--dd-cool-gray);
}
body.dark-mode .skeleton-row { border-bottom-color: #2a2a4a; }
.skeleton-row:last-child { border-bottom: none; }
.skeleton-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.skeleton-text { height: 14px; border-radius: 4px; }
.skeleton-text-short { width: 60px; }
.skeleton-text-medium { width: 120px; }
.skeleton-text-long { width: 200px; }
.skeleton-glass-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px;
}
.skeleton-glass-tile {
  height: 140px; border-radius: 16px;
  border: 1px solid rgba(125, 155, 193, 0.15);
}
body.dark-mode .skeleton-glass-tile {
  border-color: rgba(125, 155, 193, 0.08);
}
@media (max-width: 768px) { .skeleton-glass-row { grid-template-columns: 1fr; } }

/* --- Smooth View Transitions --- */
.view-panel {
  animation: viewFadeIn 0.3s ease-out;
}
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.view-panel.view-exiting {
  animation: viewFadeOut 0.15s ease-in forwards;
}
@keyframes viewFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-4px); }
}

/* --- "Since Your Last Visit" Banner --- */
.last-visit-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(234,170,0,0.06) 0%, rgba(125,155,193,0.06) 100%);
  border: 1px solid rgba(234,170,0,0.15);
  border-radius: var(--radius); border-left: 4px solid var(--dd-yellow);
  animation: bannerSlideIn 0.4s ease-out;
}
@keyframes bannerSlideIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
.last-visit-banner .lv-icon {
  font-size: 20px; flex-shrink: 0;
}
.last-visit-banner .lv-items {
  display: flex; gap: 16px; flex-wrap: wrap; flex: 1;
}
.last-visit-banner .lv-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--dd-dark-blue);
  white-space: nowrap;
}
.last-visit-banner .lv-item .lv-delta {
  font-weight: 700; font-size: 13px;
}
.last-visit-banner .lv-item .lv-delta.positive { color: #2e7d32; }
.last-visit-banner .lv-item .lv-delta.negative { color: var(--dd-red); }
.last-visit-banner .lv-item .lv-delta.neutral { color: var(--dd-graphite); }
.last-visit-banner .lv-dismiss {
  background: none; border: none; font-size: 18px; cursor: pointer;
  color: var(--dd-graphite); padding: 4px; line-height: 1;
  margin-left: auto; flex-shrink: 0;
  transition: color 0.2s;
}
.last-visit-banner .lv-dismiss:hover { color: var(--dd-dark-blue); }
body.dark-mode .last-visit-banner {
  background: linear-gradient(135deg, rgba(234,170,0,0.08) 0%, rgba(125,155,193,0.06) 100%);
  border-color: rgba(234,170,0,0.2);
}
body.dark-mode .last-visit-banner .lv-item { color: #e8e8f0; }
body.dark-mode .last-visit-banner .lv-item .lv-delta.positive { color: #66bb6a; }
body.dark-mode .last-visit-banner .lv-item .lv-delta.negative { color: #ff6b6b; }
body.dark-mode .last-visit-banner .lv-dismiss { color: #8888aa; }
body.dark-mode .last-visit-banner .lv-dismiss:hover { color: #e8e8f0; }

/* --- Score Projection Label --- */
.trend-projection {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 10px 16px;
  background: linear-gradient(135deg, rgba(46,125,50,0.06) 0%, rgba(234,170,0,0.04) 100%);
  border: 1px solid rgba(46,125,50,0.15);
  border-radius: var(--radius);
  font-size: 13px; color: #2e7d32; font-weight: 500;
}
.trend-projection .tp-icon { font-size: 16px; }
.trend-projection .tp-text { flex: 1; }
.trend-projection .tp-tier {
  font-weight: 700; padding: 2px 8px; border-radius: 10px;
  background: rgba(234,170,0,0.12); color: var(--dd-dark-blue);
  font-size: 12px;
}
.trend-projection.at-max {
  background: linear-gradient(135deg, rgba(234,170,0,0.08) 0%, rgba(234,170,0,0.04) 100%);
  border-color: rgba(234,170,0,0.2);
  color: #8B6914;
}
body.dark-mode .trend-projection {
  background: linear-gradient(135deg, rgba(46,125,50,0.1) 0%, rgba(234,170,0,0.06) 100%);
  border-color: rgba(46,125,50,0.2);
  color: #66bb6a;
}
body.dark-mode .trend-projection.at-max {
  background: linear-gradient(135deg, rgba(234,170,0,0.12) 0%, rgba(234,170,0,0.06) 100%);
  border-color: rgba(234,170,0,0.25);
  color: var(--dd-yellow);
}
body.dark-mode .trend-projection .tp-tier {
  background: rgba(234,170,0,0.15); color: var(--dd-yellow);
}

/* --- Contextual Empty States --- */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  padding: 32px 24px; text-align: center;
}
.empty-state .es-icon {
  font-size: 48px; margin-bottom: 12px; opacity: 0.8;
  animation: emptyBounce 2s ease-in-out infinite;
}
@keyframes emptyBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.empty-state .es-title {
  font-size: 15px; font-weight: 700; color: var(--dd-dark-blue);
  margin-bottom: 6px;
}
.empty-state .es-message {
  font-size: 13px; color: var(--dd-graphite); line-height: 1.5;
  max-width: 360px;
}
.empty-state .es-action {
  margin-top: 16px; padding: 8px 20px;
  background: var(--dd-dark-blue); color: var(--dd-white);
  border: none; border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.2s, transform 0.15s;
}
.empty-state .es-action:hover { background: #0a2e45; transform: translateY(-1px); }
body.dark-mode .empty-state .es-title { color: #ffffff; }
body.dark-mode .empty-state .es-message { color: #aaaabc; }
body.dark-mode .empty-state .es-action { background: #2a2a4a; }
body.dark-mode .empty-state .es-action:hover { background: #3a3a5a; }

/* --- Empty state for risky behaviors (celebration) --- */
.risky-zero-state {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(46,125,50,0.06) 0%, rgba(46,125,50,0.02) 100%);
  border: 1px solid rgba(46,125,50,0.15);
  border-radius: var(--radius);
}
.risky-zero-state .rz-icon { font-size: 28px; }
.risky-zero-state .rz-text {
  font-size: 14px; font-weight: 600; color: #2e7d32;
}
.risky-zero-state .rz-sub {
  font-size: 12px; color: var(--dd-graphite); font-weight: 400; margin-top: 2px;
}
body.dark-mode .risky-zero-state {
  background: linear-gradient(135deg, rgba(46,125,50,0.1) 0%, rgba(46,125,50,0.04) 100%);
  border-color: rgba(46,125,50,0.2);
}
body.dark-mode .risky-zero-state .rz-text { color: #66bb6a; }
body.dark-mode .risky-zero-state .rz-sub { color: #8888aa; }

/* --- Badge proximity indicator --- */
.badge-proximity {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; margin-top: 8px;
  background: rgba(234,170,0,0.08); border: 1px solid rgba(234,170,0,0.2);
  border-radius: 16px; font-size: 12px; font-weight: 600;
  color: #8B6914;
}
.badge-proximity .bp-icon { font-size: 14px; }
body.dark-mode .badge-proximity {
  background: rgba(234,170,0,0.1); border-color: rgba(234,170,0,0.25);
  color: var(--dd-yellow);
}

/* ============================================================
   ROUND 2: Competition & Engagement Features
   ============================================================ */

/* --- Rotating Spotlight --- */
.spotlight-card {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 24px; margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(4,28,44,0.03) 0%, rgba(234,170,0,0.04) 100%);
  border: 1px solid rgba(234,170,0,0.15);
  border-radius: var(--radius);
  position: relative; overflow: hidden;
  animation: spotlightSlideIn 0.5s ease-out;
}
@keyframes spotlightSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
.spotlight-card::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--dd-yellow) 0%, var(--dd-light-blue) 100%);
}
.spotlight-avatar {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--dd-yellow);
  box-shadow: 0 2px 8px rgba(234,170,0,0.2);
  flex-shrink: 0;
}
.spotlight-avatar-placeholder {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--dd-dark-blue), #0a3050);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--dd-yellow);
  border: 2px solid var(--dd-yellow);
  flex-shrink: 0;
}
.spotlight-info { flex: 1; min-width: 0; }
.spotlight-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #8B6914; margin-bottom: 4px;
}
body.dark-mode .spotlight-label { color: var(--dd-yellow); }
.spotlight-name {
  font-size: 16px; font-weight: 700; color: var(--dd-dark-blue);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spotlight-tagline {
  font-size: 12px; color: var(--dd-graphite); font-style: italic;
  margin-top: 2px;
}
.spotlight-stat {
  font-size: 12px; color: var(--dd-graphite); margin-top: 6px;
}
.spotlight-stat strong { color: var(--dd-dark-blue); font-weight: 700; }
.spotlight-tier {
  flex-shrink: 0; padding: 6px 14px; border-radius: 16px;
  font-size: 12px; font-weight: 700;
}
body.dark-mode .spotlight-card {
  background: linear-gradient(135deg, rgba(234,170,0,0.04) 0%, rgba(125,155,193,0.04) 100%);
  border-color: rgba(234,170,0,0.2);
}
body.dark-mode .spotlight-name { color: #ffffff; }
body.dark-mode .spotlight-stat { color: #aaaabc; }
body.dark-mode .spotlight-stat strong { color: #e8e8f0; }

/* --- Badge Proximity Indicators --- */
.badge-proximity-list {
  display: flex; flex-direction: column; gap: 8px; margin-top: 12px;
}
.badge-proximity {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(234,170,0,0.06); border: 1px solid rgba(234,170,0,0.15);
  border-radius: var(--radius); font-size: 13px; color: var(--dd-dark-blue);
}
.badge-proximity .bp-progress {
  width: 60px; height: 6px; background: var(--dd-cool-gray);
  border-radius: 3px; overflow: hidden; flex-shrink: 0;
}
.badge-proximity .bp-progress-fill {
  height: 100%; background: var(--dd-yellow); border-radius: 3px;
  transition: width 0.5s ease;
}
.badge-proximity .bp-text { flex: 1; font-weight: 500; }
.badge-proximity .bp-badge-name { font-weight: 700; color: #8B6914; }
body.dark-mode .badge-proximity {
  background: rgba(234,170,0,0.08); border-color: rgba(234,170,0,0.2);
  color: #e8e8f0;
}
body.dark-mode .badge-proximity .bp-badge-name { color: var(--dd-yellow); }
body.dark-mode .badge-proximity .bp-progress { background: #2a2a4a; }

/* --- Peer Activity Notifications --- */
.peer-toast {
  position: fixed; bottom: 80px; right: 24px; z-index: 600;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; max-width: 340px;
  background: var(--dd-dark-blue); color: var(--dd-white);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2), 0 0 0 1px rgba(234,170,0,0.15);
  font-size: 13px; font-weight: 500;
  animation: toastSlideIn 0.4s ease-out;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
}
.peer-toast:hover { transform: translateY(-2px); }
.peer-toast.toast-exiting {
  animation: toastSlideOut 0.3s ease-in forwards;
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes toastSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(20px); }
}
.peer-toast .pt-icon { font-size: 18px; flex-shrink: 0; }
.peer-toast .pt-text { flex: 1; line-height: 1.4; }
.peer-toast .pt-dismiss {
  background: none; border: none; color: rgba(255,255,255,0.5);
  font-size: 16px; cursor: pointer; padding: 0 2px; line-height: 1;
}
.peer-toast .pt-dismiss:hover { color: #ffffff; }
body.dark-mode .peer-toast {
  background: #1e1e36; border: 1px solid #2a2a4a;
}

/* --- Division Rivalry Card --- */
.rivalry-card {
  padding: 20px 24px; margin-bottom: 16px;
  background: linear-gradient(180deg, var(--dd-white) 0%, #f8f8f6 100%);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
  border-left: 4px solid var(--dd-light-blue);
}
.rivalry-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.rivalry-title {
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--dd-dark-blue);
}
.rivalry-vs {
  font-size: 11px; font-weight: 700; color: var(--dd-graphite);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.rivalry-matchup {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px;
  align-items: center;
}
.rivalry-team {
  text-align: center; padding: 16px 12px;
  background: rgba(125,155,193,0.04); border-radius: var(--radius);
  border: 1px solid rgba(125,155,193,0.1);
}
.rivalry-team.yours {
  background: rgba(234,170,0,0.04);
  border-color: rgba(234,170,0,0.15);
}
.rivalry-team-name {
  font-size: 12px; font-weight: 700; color: var(--dd-dark-blue);
  margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rivalry-team-score {
  font-size: 24px; font-weight: 700; color: var(--dd-dark-blue);
}
.rivalry-team-label {
  font-size: 11px; color: var(--dd-graphite); margin-top: 4px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.rivalry-team.yours .rivalry-team-name { color: #8B6914; }
.rivalry-divider {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.rivalry-divider-vs {
  font-size: 14px; font-weight: 800; color: var(--dd-graphite);
  background: var(--dd-cool-gray); width: 32px; height: 32px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.rivalry-delta {
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.rivalry-delta.ahead { color: #2e7d32; }
.rivalry-delta.behind { color: var(--dd-red); }
.rivalry-delta.tied { color: var(--dd-graphite); }
body.dark-mode .rivalry-card {
  background: linear-gradient(180deg, #1e1e36 0%, #16162c 100%);
  border: 1px solid #2a2a4a; border-left: 4px solid var(--dd-light-blue);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.25);
}
body.dark-mode .rivalry-title { color: #e8e8f0; }
body.dark-mode .rivalry-team { background: rgba(125,155,193,0.06); border-color: #2a2a4a; }
body.dark-mode .rivalry-team.yours { background: rgba(234,170,0,0.06); border-color: rgba(234,170,0,0.2); }
body.dark-mode .rivalry-team-name { color: #e8e8f0; }
body.dark-mode .rivalry-team.yours .rivalry-team-name { color: var(--dd-yellow); }
body.dark-mode .rivalry-team-score { color: #ffffff; }
body.dark-mode .rivalry-divider-vs { background: #2a2a4a; color: #aaaabc; }
body.dark-mode .rivalry-delta.ahead { color: #66bb6a; }
body.dark-mode .rivalry-delta.behind { color: #ff6b6b; }
@media (max-width: 480px) {
  .rivalry-matchup { grid-template-columns: 1fr; gap: 12px; }
  .rivalry-divider { flex-direction: row; }
  .spotlight-card { flex-direction: column; text-align: center; }
}

/* ============================================================
   ROUND 3: Polish & Daily Engagement
   ============================================================ */

/* --- Daily Check-in Streak --- */
.checkin-streak {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 14px;
  background: rgba(234,170,0,0.08); border: 1px solid rgba(234,170,0,0.15);
  font-size: 12px; font-weight: 600; color: #8B6914;
  margin-left: 12px; white-space: nowrap;
}
.checkin-streak .cs-flame { font-size: 14px; }
.checkin-streak .cs-count { font-weight: 700; }
body.dark-mode .checkin-streak {
  background: rgba(234,170,0,0.1); border-color: rgba(234,170,0,0.2);
  color: var(--dd-yellow);
}

/* --- Score Micro-celebration --- */
@keyframes scorePulseUp {
  0% { transform: scale(1); }
  30% { transform: scale(1.08); color: #2e7d32; }
  60% { transform: scale(1.02); }
  100% { transform: scale(1); }
}
@keyframes scoreFlashGreen {
  0% { box-shadow: 0 0 0 0 rgba(46,125,50,0.3); }
  50% { box-shadow: 0 0 16px 4px rgba(46,125,50,0.2); }
  100% { box-shadow: 0 0 0 0 rgba(46,125,50,0); }
}
.score-celebrating .stat-value {
  animation: scorePulseUp 0.6s ease-out;
}
.score-celebrating {
  animation: scoreFlashGreen 0.8s ease-out;
}

/* --- Stat Card Hierarchy (Email Safety Score dominant) --- */
#statScoreCard {
  grid-column: span 1;
  background: linear-gradient(135deg, var(--dd-dark-blue) 0%, #0a3050 100%);
  color: var(--dd-white); border-top: none;
  position: relative; overflow: hidden;
  border-radius: var(--radius);
}
#statScoreCard::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--dd-yellow); border-radius: var(--radius) var(--radius) 0 0;
}
#statScoreCard::after {
  content: ''; position: absolute; top: -30%; right: -20%;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(234,170,0,0.12) 0%, transparent 70%);
  pointer-events: none;
}
#statScoreCard .stat-value {
  font-size: 38px; color: var(--dd-yellow);
}
#statScoreCard .stat-label {
  color: rgba(255,255,255,0.7);
}
#statScoreCard .score-rank-inline {
  color: rgba(255,255,255,0.6);
}
#statScoreCard .score-delta.up { color: #66bb6a; }
#statScoreCard .score-delta.down { color: #ff6b6b; }
#statScoreCard .tooltip-trigger { color: rgba(255,255,255,0.5); }
#statScoreCard .tooltip-trigger:hover { color: #ffffff; }
body.dark-mode #statScoreCard {
  background: linear-gradient(135deg, #0a1a2e 0%, #0f2540 100%);
  border: 1px solid rgba(234,170,0,0.2);
}
body.dark-mode #statScoreCard .stat-value { color: var(--dd-yellow); }
body.dark-mode #statScoreCard .stat-label { color: rgba(255,255,255,0.6); }

/* --- Mobile Fixes (Phone ≤480px) --- */
@media screen and (max-width: 480px) {
  /* Fix stat cards rendering — ensure single column with no overflow */
  .stats-bar { grid-template-columns: 1fr !important; gap: 12px; }
  .stat-card { min-width: 0; overflow: hidden; }

  /* Ensure Score card text doesn't overflow */
  #statScoreCard .stat-value { font-size: 32px; }

  /* Fix tooltip — constrain to viewport, stay visible on tap */
  .kiro-tooltip {
    max-width: calc(100vw - 32px) !important;
    left: 16px !important; right: 16px !important;
    transform: none !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    position: fixed !important;
    z-index: 99999 !important;
  }

  /* Header layout fix — streak goes below countdown on its own line */
  .header-inner {
    flex-wrap: wrap; height: auto; padding: 10px 0; gap: 4px;
  }
  .header-meta {
    flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center;
  }
  .checkin-streak {
    display: none !important;
  }
  .derby-countdown { font-size: 11px; }

  /* Risky behaviors grid — horizontal scroll, fix shadows */
  .risky-grid-6 {
    display: flex !important; overflow-x: auto; gap: 10px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: 8px 4px 12px; scrollbar-width: none;
    grid-template-columns: unset !important;
  }
  .risky-grid-6::-webkit-scrollbar { display: none; }
  .risky-grid-6 .risky-tile {
    min-width: 130px; flex-shrink: 0; scroll-snap-align: start;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* Clean shadow within bounds */
  }

  /* Streak flame ::after tooltip — HIDE completely on mobile */
  .streak-flame::after {
    display: none !important;
  }
  .streak-flame.streak-tapped::after {
    display: none !important;
  }

  /* Badge earned dialogue — constrain to viewport */
  .badge-dialogue-card,
  .celebrate-card,
  .resource-dialog-card {
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 48px) !important;
    overflow-y: auto !important;
    margin: 16px !important;
  }

  /* Badge grid on My Performance — horizontal scroll */
  .badge-list {
    flex-wrap: nowrap; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 4px;
  }
  .badge-list::-webkit-scrollbar { display: none; }
  .badge-list .badge-earned-item,
  .badge-list .badge-pill {
    flex-shrink: 0; scroll-snap-align: start;
  }

  /* Achievements badge collection — horizontal scroll on mobile */
  .achievements-badge-collection {
    padding: 16px 0 16px 0; overflow: visible;
    border-radius: 0;
  }
  .achievements-badge-collection .badge-collection-header,
  .achievements-badge-collection .badge-collection-title,
  .achievements-badge-collection .badge-collection-subtitle,
  .achievements-badge-collection .view-toggle {
    padding-left: 16px; padding-right: 16px;
  }
  .badge-collection-grid {
    display: flex !important; overflow-x: auto !important; gap: 12px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: 8px 16px 12px 16px;
    grid-template-columns: unset !important;
    flex-wrap: nowrap !important;
  }
  .badge-collection-grid::-webkit-scrollbar { display: none; }
  .badge-collection-grid .achievement-tile-wrapper,
  .badge-collection-grid .badge-slot {
    min-width: 150px; max-width: 170px; flex-shrink: 0; scroll-snap-align: start;
  }

  /* Division rivalry — stack vertically with centered VS */
  .rivalry-matchup {
    grid-template-columns: 1fr !important; gap: 12px;
  }
  .rivalry-divider {
    flex-direction: row; justify-content: center; gap: 8px;
    padding: 4px 0;
  }

  /* Glass tiles — remove backdrop-filter that blocks shimmer on mobile */
  .glass-tile {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }

  /* Max points pill on Resources — wrap below title */
  .scoring-max-pill {
    position: static !important; display: block !important;
    margin-top: 8px; width: fit-content;
  }

  /* Feedback widget — ensure visible on My Performance */
  .feedback-panel,
  #feedbackFab {
    z-index: 500 !important;
  }

  /* Main content padding */
  .main { padding-bottom: 24px; }
}

/* Tablet — streak flame tooltip fix */
@media screen and (max-width: 768px) {
  .streak-flame::after {
    max-width: 250px;
    white-space: normal;
    word-wrap: break-word;
    left: 0; right: auto;
    transform: none;
  }
}

/* --- Streak Flame Tooltip (JS-driven, position:fixed) --- */
.streak-tooltip {
  position: fixed; z-index: 99999; pointer-events: none;
  background: var(--dd-dark-blue); color: var(--dd-yellow);
  font-size: 11px; font-weight: 600; font-style: italic;
  white-space: nowrap; padding: 6px 12px; border-radius: 8px;
  box-shadow: 0 0 12px rgba(234,170,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
  opacity: 0; transition: opacity 0.15s;
  animation: streakTooltipBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.streak-tooltip.visible { opacity: 1; }
.streak-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--dd-dark-blue);
}

/* --- Leaderboard controls row fix — consistent heights (desktop only) --- */
/* Scoped to min-width:769px on purpose: these rules sit LATER in this file than
   the mobile (<=768px) @media block, so without the guard they win on mobile too
   (media queries don't add specificity — later source wins ties). That leak left
   the search pill centered/narrow and turned flex-basis:280px into a 280px-TALL
   wrap in the column layout, dropping the absolutely-positioned search icon into
   the middle, detached from the input. */
@media (min-width: 769px) {
  #leaderboardControls {
    align-items: center;
  }
  #leaderboardControls .search-wrap {
    flex: 0 1 280px; min-width: 180px;
  }
}
#leaderboardControls .search-wrap input {
  padding: 8px 12px 8px 32px; height: 36px;
}
#leaderboardControls .search-wrap .search-icon {
  top: 50%; transform: translateY(-50%); left: 10px;
}
#leaderboardControls select {
  height: 36px; padding: 6px 12px;
}
#leaderboardControls .btn-find-me {
  height: 36px; padding: 6px 14px; display: inline-flex; align-items: center;
}
#leaderboardControls .pagination {
  height: 36px;
}
#leaderboardControls .pagination select {
  height: 30px; padding: 4px 6px; font-size: 12px;
}
#leaderboardControls .pagination .page-btn {
  height: 30px; width: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
}

/* Force hide the empty leaderboard message — only show via JS when search is active */
#emptyIndividual { display: none !important; }
#emptyIndividual.show-empty { display: block !important; }


/* --- Template Pill Bar (Simulation Detail Dialogue) --- */
.sim-template-pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 10px 0;
  margin: 4px 0 8px;
  border-bottom: 1px solid var(--dd-cool-gray);
}
.sim-template-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--dd-dark-blue);
  background: transparent;
  color: var(--dd-dark-blue);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  max-width: 220px;
  white-space: nowrap;
}
.sim-template-pill:hover {
  background: rgba(4, 28, 44, 0.06);
}
.sim-template-pill.active {
  background: var(--dd-dark-blue);
  color: #fff;
  border-color: var(--dd-dark-blue);
}
.sim-template-pill-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.sim-template-pill-delete {
  display: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.6;
  cursor: pointer;
  padding: 0 2px;
  border: none;
  background: none;
  color: inherit;
}
.sim-template-pill:hover .sim-template-pill-delete {
  display: inline-flex;
}
.sim-template-pill.active .sim-template-pill-delete {
  color: #fff;
}
.sim-template-pill.sim-template-pill-add {
  border-style: dashed;
  color: var(--dd-graphite);
  border-color: var(--dd-graphite);
  padding: 5px 14px;
  font-size: 16px;
  font-weight: 400;
}
.sim-template-pill.sim-template-pill-add:hover {
  border-color: var(--dd-dark-blue);
  color: var(--dd-dark-blue);
}
.sim-template-pill-input {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--dd-yellow);
  background: rgba(234, 170, 0, 0.06);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  min-width: 140px;
  max-width: 220px;
}
.sim-template-pill-input:focus {
  border-color: var(--dd-yellow);
  box-shadow: 0 0 0 2px rgba(234, 170, 0, 0.2);
}
.sim-template-pills-empty {
  font-size: 12px;
  color: var(--dd-graphite);
  font-style: italic;
  padding: 4px 0;
}

/* Template count badge on Simulation Content table */
.sim-content-template-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 8px;
  background: rgba(4, 28, 44, 0.08);
  color: var(--dd-dark-blue);
  vertical-align: middle;
}
.sim-content-template-badge.single {
  background: rgba(125, 155, 193, 0.1);
  color: var(--dd-graphite);
}

/* Dark mode overrides for template pills */
body.dark-mode .sim-template-pill {
  border-color: var(--dd-light-blue);
  color: var(--dd-light-blue);
}
body.dark-mode .sim-template-pill:hover {
  background: rgba(125, 155, 193, 0.1);
}
body.dark-mode .sim-template-pill.active {
  background: var(--dd-light-blue);
  color: var(--dd-dark-blue);
  border-color: var(--dd-light-blue);
}
body.dark-mode .sim-template-pill.sim-template-pill-add {
  border-color: var(--dd-graphite);
  color: var(--dd-graphite);
}
body.dark-mode .sim-template-pill-input {
  background: rgba(234, 170, 0, 0.08);
  color: #fff;
  border-color: var(--dd-yellow);
}
body.dark-mode .sim-content-template-badge {
  background: rgba(125, 155, 193, 0.15);
  color: var(--dd-light-blue);
}
body.dark-mode .sim-content-template-badge.single {
  background: rgba(125, 155, 193, 0.08);
  color: var(--dd-graphite);
}


/* Section edit pencil — absolute positioned (upper-right corner of parent) */
.section-edit-pencil-abs {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(234, 170, 0, 0.08);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.6;
  transition: opacity 0.2s, background 0.2s;
  z-index: 2;
  padding: 0;
}
.section-edit-pencil-abs:hover {
  opacity: 1;
  background: rgba(234, 170, 0, 0.18);
}
body.demo-mode .section-edit-pencil-abs { display: none; }
body.dark-mode .section-edit-pencil-abs { background: rgba(234, 170, 0, 0.1); }
body.dark-mode .section-edit-pencil-abs:hover { background: rgba(234, 170, 0, 0.22); }


/* My Team — Summary stats bar (admin-style dark gradient) */
.team-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  background: linear-gradient(135deg, #041C2C 0%, #0a2e44 100%);
  border-radius: 12px;
  padding: 16px 24px;
  margin-bottom: 16px;
}
.team-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  text-align: center;
  padding: 4px 12px;
  border-right: 1px solid rgba(125, 155, 193, 0.2);
}
.team-summary-stat:last-child { border-right: none; }
.team-summary-value {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.team-summary-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dd-light-blue);
  margin-top: 4px;
}
@media (max-width: 768px) {
  .team-summary-bar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
  }
  .team-summary-stat {
    flex: 1 1 45%;
    border-right: none;
    padding: 8px;
  }
  .team-summary-value { font-size: 22px; }
}
@media (max-width: 480px) {
  .team-summary-stat { flex: 1 1 100%; }
}


/* --- Mini Rich Text Editor --- */
.mini-rte-wrapper { border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; overflow: hidden; background: rgba(255,255,255,0.04); }
.mini-rte-toolbar { display: flex; gap: 2px; padding: 4px 6px; background: rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.1); }
.mini-rte-btn { background: none; border: 1px solid transparent; border-radius: 4px; padding: 3px 8px; cursor: pointer; color: rgba(255,255,255,0.7); font-size: 13px; line-height: 1; transition: all 0.15s; }
.mini-rte-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #fff; }
.mini-rte-editor { padding: 8px 12px; font-size: 14px; color: #fff; outline: none; line-height: 1.5; }
.mini-rte-editor:empty::before { content: attr(data-placeholder); color: rgba(255,255,255,0.35); pointer-events: none; }
.mini-rte-editor a { color: #EAAA00; text-decoration: underline; }
.mini-rte-editor ul { padding-left: 20px; margin: 4px 0; }
.mini-rte-editor li { margin-bottom: 2px; }
body:not(.dark-mode) .mini-rte-wrapper { border-color: #ddd; background: #f8f9fa; }
body:not(.dark-mode) .mini-rte-toolbar { background: #eee; border-color: #ddd; }
body:not(.dark-mode) .mini-rte-btn { color: #333; }
body:not(.dark-mode) .mini-rte-btn:hover { background: #ddd; }
body:not(.dark-mode) .mini-rte-editor { color: #1a1a1a; }
body:not(.dark-mode) .mini-rte-editor:empty::before { color: #999; }
body:not(.dark-mode) .mini-rte-editor a { color: #0a6db5; }


/* --- Registration form links (rich text) --- */
.reg-radio-option a, .reg-terms-label a, .reg-field-helper a, .reg-dynamic-field a {
  color: #EAAA00;
  text-decoration: underline;
  font-weight: inherit;
  display: inline;
}
.reg-radio-option a:hover, .reg-terms-label a:hover, .reg-field-helper a:hover, .reg-dynamic-field a:hover {
  color: #fff;
}


/* Fix: Override flex display on reg-radio-option labels to prevent spacing around inline links */
label.reg-radio-option {
  display: inline !important;
  flex-wrap: unset !important;
  gap: unset !important;
}


/* ============================================================
   PHASE 1: DESIGN SYSTEM STANDARDIZATION
   Spacing, Typography, Contrast, Hover/Focus, Responsive
   ============================================================ */

/* --- 1. Vertical Rhythm: 24px internal padding, 16px section gaps --- */
.perf-section { padding: 24px; margin-bottom: 16px; }
.stat-card { padding: 24px 20px; }
.stats-bar, .team-stats { gap: 16px; margin-bottom: 16px; }
.admin-section { padding: 20px 24px; }
.tier-legend { padding: 24px; }

/* --- 2. Typography Scale Consistency --- */
/* Core My Performance stat values share 28px so their labels align across tiles.
   The Email Safety Score tile stays the hero via its dark-blue gradient, gold number, and top accent. */
#statScoreCard .stat-value { font-size: 28px; }
/* Secondary stat values: 28px */
.stat-value { font-size: 28px; }
/* Section titles: 14px */
.section-title { font-size: 14px; }
/* Body/labels: 13px */
.stat-label { font-size: 13px; }
.section-desc { font-size: 13px; }
/* Captions: 11px */
.progress-label { font-size: 11px; }
.score-rank-inline { font-size: 11px; }
.footer-version { font-size: 11px; }

/* --- 3. Dark Mode Text Contrast (#9999bb minimum for secondary text) --- */
body.dark-mode .stat-label { color: #9999bb; }
body.dark-mode .section-desc { color: #9999bb; }
body.dark-mode .progress-label { color: #9999bb; }
body.dark-mode .score-rank-inline { color: #9999bb; }
body.dark-mode .legend-desc { color: #9999bb; }
body.dark-mode .no-badges { color: #9999bb; }
body.dark-mode .legend-subtitle { color: #9999bb; }
body.dark-mode .profile-detail { color: #9999bb; }
body.dark-mode .participant-id { color: #9999bb; }
body.dark-mode .privacy-note { color: #9999bb; }
body.dark-mode .admin-section-desc { color: #9999bb; }
body.dark-mode .admin-subsection-label { color: #9999bb; }
body.dark-mode .page-info { color: #9999bb; }
body.dark-mode .derby-toggle-text { color: #9999bb; }
body.dark-mode .glass-desc { color: #9999bb; }
body.dark-mode .tier-label-zone small { color: #9999bb; }
body.dark-mode .tooltip-trigger { color: #9999bb; }
body.dark-mode .challenge-tile-date { color: #9999bb; }
body.dark-mode .bonus-subtitle { color: #9999bb; }
body.dark-mode .bonus-filter-label { color: #9999bb; }
body.dark-mode .achievement-back-desc { color: #ccccdd; }
body.dark-mode .cohort-sublabel { color: #9999bb; }
body.dark-mode .diff-label { color: #9999bb; }
body.dark-mode .comparison-metric-note { color: #9999bb; }
body.dark-mode .resource-contact-label { color: #9999bb; }
body.dark-mode .scoring-note { color: #9999bb; }
body.dark-mode .welcome-tour-step { color: #9999bb; }

/* --- 4. Hover/Focus Standardization --- */
/* Cards: translateY(-2px) + shadow on hover */
.stat-card:hover,
.glass-tile:hover,
.risky-tile:hover {
  transform: translateY(-2px);
}
/* Buttons: translateY(-1px) + color shift */
.btn-export:hover,
.btn-find-me:hover,
.btn-survey:hover,
.nav-profile-btn:hover,
.toggle-btn:hover:not(.active),
.page-btn:hover:not(:disabled),
.btn-section-export:hover {
  transform: translateY(-1px);
}
/* Links: underline intensity on hover */
.admin-name-link:hover,
.resource-email:hover,
.inline-nav-link:hover,
.dr-name-link:hover {
  text-decoration-thickness: 2px;
}
/* Universal focus-visible ring for all interactive elements */
.btn-export:focus-visible,
.btn-find-me:focus-visible,
.btn-survey:focus-visible,
.toggle-btn:focus-visible,
.page-btn:focus-visible,
.btn-section-export:focus-visible,
.feedback-reaction:focus-visible,
.avatar-option:focus-visible,
.kudos-btn:focus-visible,
.phish-card:focus-visible,
.challenge-tile-card:focus-visible,
.badge-year-btn:focus-visible,
.bonus-filter-pill:focus-visible,
.btn-dark-mode:focus-visible,
.btn-demo-mode:focus-visible,
.btn-overlay-dark-mode:focus-visible,
.btn-admin-return:focus-visible,
.fwd-manage-btn:focus-visible,
.phish-carousel-arrow:focus-visible,
.resource-edit-btn:focus-visible,
.section-header-edit-btn:focus-visible,
.challenge-edit-btn:focus-visible,
.welcome-tour-skip:focus-visible,
.bonus-completed-toggle:focus-visible,
select:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="url"]:focus-visible,
input[type="search"]:focus-visible,
input[type="date"]:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--dd-yellow);
  outline-offset: 2px;
}

/* --- 5. Responsive Badge Tiles (auto-fill instead of fixed width) --- */
.achievement-tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.achievement-tile-wrapper {
  perspective: 600px;
  width: auto;
}
.achievement-tile-flipper {
  width: 100%;
  min-height: 180px;
}
.badge-collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.badge-collection-grid .achievement-tile-wrapper {
  width: auto;
}
.badge-collection-grid .achievement-tile-flipper {
  width: 100%;
}

/* --- 6. Mobile Trend Chart Scroll Indicator --- */
@media (max-width: 480px) {
  .trend-chart {
    position: relative;
  }
  .trend-chart::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--dd-cool-gray));
    pointer-events: none;
    border-radius: 0 var(--radius) var(--radius) 0;
    z-index: 2;
  }
  body.dark-mode .trend-chart::after {
    background: linear-gradient(90deg, transparent, #0f0f1a);
  }
}

/* --- 7. Lighter Table Style for Personal Training/Sim History --- */
#myPerfView .perf-section .leaderboard-table thead {
  background: rgba(4, 28, 44, 0.04);
}
#myPerfView .perf-section .leaderboard-table th {
  color: var(--dd-dark-blue);
  font-size: 11px;
  font-weight: 700;
  padding: 10px 16px;
  border-bottom: 2px solid var(--dd-cool-gray);
}
#myPerfView .perf-section .leaderboard-table td {
  padding: 14px 16px;
  font-size: 13px;
}
#myPerfView .perf-section .leaderboard-table tbody tr:hover {
  background: rgba(234, 170, 0, 0.04);
}
body.dark-mode #myPerfView .perf-section .leaderboard-table thead {
  background: rgba(255, 255, 255, 0.03);
}
body.dark-mode #myPerfView .perf-section .leaderboard-table th {
  color: #ccccdd;
  border-bottom-color: #2a2a4a;
}
body.dark-mode #myPerfView .perf-section .leaderboard-table td {
  color: #d0d0e0;
}
body.dark-mode #myPerfView .perf-section .leaderboard-table tbody tr:hover {
  background: rgba(234, 170, 0, 0.06);
}


/* --- Zero Risky Behaviors Green Banner --- */
.zero-risky-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(46, 125, 50, 0.08) 0%, rgba(46, 125, 50, 0.04) 100%);
  border: 1px solid rgba(46, 125, 50, 0.2);
  border-radius: var(--radius);
  margin-top: 12px;
}
.zero-risky-icon {
  font-size: 32px;
  flex-shrink: 0;
}
.zero-risky-text {
  font-size: 14px;
  color: var(--dd-dark-blue);
  line-height: 1.5;
}
.zero-risky-text strong {
  color: #2e7d32;
  font-size: 15px;
}
.zero-risky-text a {
  color: var(--dd-light-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.zero-risky-text a:hover {
  color: var(--dd-yellow);
}
body.dark-mode .zero-risky-banner {
  background: linear-gradient(135deg, rgba(46, 125, 50, 0.12) 0%, rgba(46, 125, 50, 0.06) 100%);
  border-color: rgba(46, 125, 50, 0.25);
}
body.dark-mode .zero-risky-text {
  color: #e8e8f0;
}
body.dark-mode .zero-risky-text strong {
  color: #66bb6a;
}
body.dark-mode .zero-risky-text a {
  color: var(--dd-yellow);
}


/* --- Find Me Inline Bar (prominent, above leaderboard table) --- */
.find-me-bar {
  margin: 16px 0;
  text-align: center;
}
.btn-find-me-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--dd-yellow);
  color: var(--dd-dark-blue);
  border: none;
  border-radius: 28px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(234, 170, 0, 0.35), 0 0 0 0 rgba(234, 170, 0, 0);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  animation: findMePulse 2.5s ease-in-out infinite;
}
@keyframes findMePulse {
  0%, 100% { box-shadow: 0 3px 12px rgba(234, 170, 0, 0.35), 0 0 0 0 rgba(234, 170, 0, 0.4); }
  50% { box-shadow: 0 3px 12px rgba(234, 170, 0, 0.35), 0 0 0 6px rgba(234, 170, 0, 0); }
}
.btn-find-me-inline:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 20px rgba(234, 170, 0, 0.45);
  background: #d49a00;
  animation: none;
}
.btn-find-me-inline:focus-visible {
  outline: 2px solid var(--dd-dark-blue);
  outline-offset: 2px;
  animation: none;
}
body.dark-mode .btn-find-me-inline {
  background: var(--dd-yellow);
  color: var(--dd-dark-blue);
}
body.dark-mode .btn-find-me-inline:hover {
  background: #d49a00;
}

/* --- Scroll to Top Button --- */
.btn-scroll-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--dd-white);
  border: 1px solid var(--dd-cool-gray);
  border-radius: 20px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--dd-dark-blue);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.btn-scroll-top:hover {
  border-color: var(--dd-yellow);
  background: rgba(234, 170, 0, 0.06);
  transform: translateY(-1px);
}
.btn-scroll-top:focus-visible {
  outline: 2px solid var(--dd-yellow);
  outline-offset: 2px;
}
body.dark-mode .btn-scroll-top {
  background: #1a1a30;
  border-color: #3a3a5a;
  color: #e8e8f0;
}
body.dark-mode .btn-scroll-top:hover {
  border-color: var(--dd-yellow);
  background: rgba(234, 170, 0, 0.08);
}

/* --- Phishing Impacts Trigger Button --- */
.btn-impacts-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--dd-cool-gray);
  border-radius: 20px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--dd-graphite);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.15s;
}
.btn-impacts-trigger:hover {
  border-color: var(--dd-yellow);
  color: var(--dd-dark-blue);
  background: rgba(234, 170, 0, 0.06);
  transform: translateY(-1px);
}
.btn-impacts-trigger:focus-visible {
  outline: 2px solid var(--dd-yellow);
  outline-offset: 2px;
}
body.dark-mode .btn-impacts-trigger {
  border-color: #3a3a5a;
  color: #9999bb;
}
body.dark-mode .btn-impacts-trigger:hover {
  border-color: var(--dd-yellow);
  color: var(--dd-yellow);
  background: rgba(234, 170, 0, 0.08);
}

/* --- Mobile adjustments --- */


/* --- Phishing Impacts Overlay — wider card for 6 stat tiles --- */
#phishingImpactsOverlay .resource-dialog-card {
  max-width: 750px;
  width: 90vw;
}
#phishingImpactsOverlay .stats-bar {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  overflow: visible;
}
#phishingImpactsOverlay .stat-card {
  min-width: 0;
  padding: 16px 12px;
}
#phishingImpactsOverlay .stat-value {
  font-size: 24px;
}
#phishingImpactsOverlay .stat-label {
  font-size: 11px;
}
@media (max-width: 600px) {
  #phishingImpactsOverlay .stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* --- Bonuses Filter Toggle (collapsible) --- */
.bonus-filters-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.bonus-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--dd-white);
  border: 1px solid var(--dd-cool-gray);
  border-radius: 20px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--dd-dark-blue);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.bonus-filters-toggle:hover {
  border-color: var(--dd-yellow);
  background: rgba(234, 170, 0, 0.04);
}
.bonus-filters-toggle:focus-visible {
  outline: 2px solid var(--dd-yellow);
  outline-offset: 2px;
}
.bonus-filters-toggle .toggle-arrow {
  font-size: 12px;
  color: var(--dd-graphite);
}
.bonus-filters-body {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: filterSlideDown 0.2s ease;
}
.bonus-filters-body .bonus-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bonus-filters-body .bonus-filter-label {
  min-width: 70px;
  text-align: right;
  flex-shrink: 0;
}
.bonus-filters-body .bonus-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bonus-filters-body.hidden {
  display: none;
}
@keyframes filterSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
body.dark-mode .bonus-filters-toggle {
  background: #1a1a30;
  border-color: #3a3a5a;
  color: #e8e8f0;
}
body.dark-mode .bonus-filters-toggle:hover {
  border-color: var(--dd-yellow);
}

/* --- Phish Carousel Position Counter --- */
.phish-carousel-counter {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--dd-graphite);
  margin-top: 8px;
  letter-spacing: 0.03em;
  width: 100%;
}
.phish-carousel {
  flex-wrap: wrap;
}
body.dark-mode .phish-carousel-counter {
  color: #9999bb;
}

/* --- Cleanup: remove old .btn-find-me (replaced by .btn-find-me-inline) --- */
.btn-find-me { display: none; }


/* --- Tier Ladder: responsive stacking for tablet/phone --- */
@media (max-width: 768px) {
  .tier-ladder-track {
    flex-direction: column;
    gap: 0;
  }
  .tier-ladder-step {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-left: 3px solid var(--dd-cool-gray);
    border-bottom: none;
  }
  .tier-ladder-step.tier-current {
    border-left-color: var(--dd-yellow);
  }
  .tier-ladder-step.tier-achieved {
    border-left-color: #2e7d32;
  }
  .tier-ladder-node {
    flex-shrink: 0;
  }
  .tier-ladder-info {
    flex: 1;
    text-align: left;
  }
  .tier-ladder-status {
    flex-shrink: 0;
    font-size: 11px;
  }
  .tier-ladder-progress-fill {
    display: none;
  }
  /* Hide the horizontal connector line — it's meaningless in the vertical mobile
     layout, where its absolute top:28px/left:40px/right:40px positioning otherwise
     leaves a stray 4px bar floating near the first (Rookie) node. */
  .tier-ladder-track::before {
    display: none;
  }
}

/* --- Bonuses: friendly empty states (replaces plain italic text) --- */
.bonus-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 20px;
  text-align: center;
}
.bonus-empty-icon {
  font-size: 36px;
}
.bonus-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--dd-dark-blue);
}
.bonus-empty-message {
  font-size: 13px;
  color: var(--dd-graphite);
  max-width: 320px;
  line-height: 1.5;
}
body.dark-mode .bonus-empty-title {
  color: #e8e8f0;
}
body.dark-mode .bonus-empty-message {
  color: #9999bb;
}


/* --- Footer (static, bottom of page) --- */
.footer {
  position: relative;
  background: var(--dd-cool-gray);
  border-top: 1px solid rgba(4, 28, 44, 0.08);
  padding: 12px 24px;
  text-align: center;
  max-width: none;
  margin: 0;
  box-shadow: none;
}
body.dark-mode .footer {
  background: #0f0f1a;
  border-top-color: #2a2a4a;
  box-shadow: none;
}
/* Push footer to bottom on short pages without using flexbox on body */
.main {
  min-height: calc(100vh - 200px);
  padding-bottom: 24px;
}


/* --- Compact Footer Layout (two-column: left tagline, right refresh) --- */
.footer-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.footer-tagline {
  font-size: 12px;
  font-weight: 600;
  color: var(--dd-dark-blue);
}
.footer-right {
  font-size: 11px;
  color: var(--dd-graphite);
}
.footer-right .last-updated {
  font-size: 11px;
  color: var(--dd-graphite);
  margin: 0;
}
body.dark-mode .footer-tagline {
  color: #ccccdd;
}
body.dark-mode .footer-right,
body.dark-mode .footer-right .last-updated {
  color: #9999bb;
}
.footer-sep { display: none; }
.footer .refresh-cadence { display: none; }
.footer .footer-version { display: none; }
.footer p:first-child { display: none; }
.footer-logo { display: none; }
.footer-sub { display: none; }
.delta-footer-logo-sm { display: none; }


/* --- Admin sub-tabs: consistent sizing --- */
#adminSubToggle .toggle-btn {
  flex: none;
  text-align: center;
  min-width: 120px;
}


/* --- Admin sub-panels: consistent full width --- */
.admin-sub-panel {
  width: 100%;
}
.admin-sub-panel .admin-section,
.admin-sub-panel .perf-section,
.admin-sub-panel .admin-dash-section,
.admin-sub-panel .table-wrap {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}


/* --- Fix Content tab table width to fill section --- */
#adminSimContent .admin-dash-section {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
#adminSimContent .table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto;
}
#adminSimContent .leaderboard-table {
  width: 100% !important;
  min-width: 100%;
  table-layout: fixed;
}


/* --- Prevent horizontal scrollbar --- */
body {
  overflow-x: hidden;
}


/* --- Global: ensure all perf-sections fill parent width --- */
.view-panel .perf-section,
.view-panel .admin-section,
.view-panel .admin-dash-section,
.view-panel .achievements-tier-ladder,
.view-panel .achievements-badge-collection,
.view-panel .achievements-hero {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}


/* --- Match perf-section visual width to summary bars --- */
.view-panel .perf-section {
  border-radius: 12px;
  margin-left: 0;
  margin-right: 0;
}
.view-panel .table-wrap {
  border-radius: 12px;
}


/* --- Layout alignment: removed broken overrides --- */


/* --- Section width alignment --- */


/* --- Loading Overlay --- */
#loadingOverlay {
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 2;
}
.loading-logo {
  width: 180px;
  height: auto;
  animation: loadingPulse 2s ease-in-out infinite;
}
.loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(234, 170, 0, 0.2);
  border-top-color: var(--dd-yellow);
  border-radius: 50%;
  animation: loadingSpin 0.8s linear infinite;
}
.loading-text {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.05em;
}
@keyframes loadingPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.98); }
}
@keyframes loadingSpin {
  to { transform: rotate(360deg); }
}