/* ============================================================
   MomentReview — styles.css
   Companion design language to GameMoments.
   Same retro-sports / Tecmo-inspired visual system,
   adapted for a slower post-game review console feel.
   ============================================================ */

/* ── Design tokens ───────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:          #0d0d1a;
  --surface:     #1a1a2e;
  --surface2:    #16213e;
  --border:      #2a2a50;
  --border-bright: #3a3a70;

  /* Brand colours */
  --cyan:        #00e5ff;
  --cyan-dim:    #006a77;
  --cyan-bg:     rgba(0,229,255,0.07);
  --cyan-bg2:    rgba(0,229,255,0.12);

  --gold:        #ffd700;
  --gold-dim:    #7a6000;
  --gold-bg:     rgba(255,215,0,0.07);

  --green:       #00ff88;
  --green-dim:   #006633;
  --green-bg:    rgba(0,255,136,0.08);

  --red:         #ff3b3b;
  --red-dim:     #7a1c1c;
  --red-bg:      rgba(255,59,59,0.08);

  --purple:      #7c3aed;
  --purple-bg:   rgba(124,58,237,0.10);

  /* Text */
  --text:        #e2e2e2;
  --text-dim:    #888;
  --text-muted:  #555;

  /* Outcome / success colour mapping */
  --positive:    var(--green);
  --positive-bg: var(--green-bg);
  --coaching:    var(--red);
  --coaching-bg: var(--red-bg);
  --neutral:     var(--text-dim);
  --neutral-bg:  rgba(136,136,136,0.08);

  /* Status colour mapping */
  --complete:    var(--green);
  --complete-bg: var(--green-bg);
  --skipped:     var(--gold);
  --skipped-bg:  var(--gold-bg);
  --unclear:     var(--purple);
  --unclear-bg:  var(--purple-bg);

  /* Fonts */
  --font-ui:     'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:   'Courier New', 'SF Mono', 'Lucida Console', monospace;
  --font-vt:     'VT323', 'Courier New', monospace;
  --font-pixel:  'Press Start 2P', 'Courier New', monospace;

  /* Scoreboard header bg (CRT phosphor) */
  --sb-bg:       #0b140b;

  /* Safe areas */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html, body {
  width:                  100%;
  height:                 100%;
  background:             var(--bg);
  color:                  var(--text);
  font-family:            var(--font-ui);
  font-size:              15px;
  overscroll-behavior:    none;
  -webkit-user-select:    none;
  user-select:            none;
  -webkit-tap-highlight-color: transparent;
  min-height:             100dvh;
}

input, textarea {
  -webkit-user-select: auto;
  user-select:         auto;
}

button {
  cursor:        pointer;
  border:        none;
  font-family:   var(--font-ui);
  touch-action:  manipulation;
}

/* ── CRT scanline overlay ─────────────────────────────────── */
body::before {
  content:    '';
  position:   fixed;
  inset:      0;
  z-index:    9998;
  background: repeating-linear-gradient(
    to bottom,
    transparent            0px,
    transparent            2px,
    rgba(0,0,0,0.06)       2px,
    rgba(0,0,0,0.06)       4px
  );
  pointer-events: none;
}

/* ── Screen management ────────────────────────────────────── */
.screen {
  position:       fixed;
  inset:          0;
  display:        flex;
  flex-direction: column;
  visibility:     hidden;
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.15s ease;
}

.screen.active {
  visibility:     visible;
  opacity:        1;
  pointer-events: auto;
}

/* ── App header (Load + Export screens) ──────────────────── */
.app-header {
  background:    var(--sb-bg);
  border-bottom: 2px solid rgba(0,229,255,0.70);
  border-top:    1px solid rgba(0,229,255,0.15);
  padding:       16px 20px calc(14px + var(--safe-top));
  padding-top:   calc(16px + var(--safe-top));
  text-align:    center;
  /* subtle scanlines on header */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.10) 3px,
    rgba(0,0,0,0.10) 4px
  );
}

.app-logo {
  font-family:    var(--font-pixel);
  font-size:      13px;
  letter-spacing: 3px;
  line-height:    1.6;
}

.logo-main {
  color: var(--cyan);
  text-shadow:
    0 0 4px  rgba(0,229,255,0.90),
    0 0 14px rgba(0,229,255,0.40);
}

.logo-accent {
  color: var(--gold);
  text-shadow:
    0 0 4px  rgba(255,215,0,0.90),
    0 0 14px rgba(255,215,0,0.35);
}

.app-tagline {
  font-family:    var(--font-pixel);
  font-size:      6px;
  color:          var(--text-dim);
  letter-spacing: 2px;
  margin-top:     8px;
}

/* ── Game title (from URL param) ─────────────────────────── */
.game-title-display {
  font-family:    var(--font-vt);
  font-size:      22px;
  color:          var(--gold);
  letter-spacing: 3px;
  text-shadow:    0 0 10px rgba(255,215,0,0.40);
  margin-top:     10px;
  text-align:     center;
  line-height:    1.2;
  word-break:     break-word;
}

/* ── Load screen ──────────────────────────────────────────── */
.load-body {
  flex:           1;
  overflow-y:     auto;
  padding:        20px 16px calc(20px + var(--safe-bottom));
  -webkit-overflow-scrolling: touch;
}

.load-body::-webkit-scrollbar         { width: 4px; }
.load-body::-webkit-scrollbar-track   { background: transparent; }
.load-body::-webkit-scrollbar-thumb   { background: var(--border); border-radius: 2px; }

/* Restore session banner */
.restore-banner {
  background:    var(--cyan-bg2);
  border:        1px solid rgba(0,229,255,0.50);
  border-radius: 6px;
  padding:       12px 14px;
  margin-bottom: 16px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           10px;
  flex-wrap:     wrap;
}

.restore-text {
  font-size:   12px;
  color:       var(--cyan);
  font-weight: 700;
}

.restore-btns {
  display: flex;
  gap:     8px;
}

.btn-restore {
  background:    var(--cyan);
  color:         #000;
  font-family:   var(--font-ui);
  font-size:     11px;
  font-weight:   900;
  padding:       7px 14px;
  border-radius: 4px;
  letter-spacing: 1px;
  box-shadow:    0 3px 0 var(--cyan-dim);
  transition:    transform 0.06s, box-shadow 0.06s;
}

.btn-restore:active {
  transform:  translateY(3px);
  box-shadow: 0 0 0 var(--cyan-dim);
}

.btn-discard {
  background:    transparent;
  color:         var(--text-dim);
  font-family:   var(--font-ui);
  font-size:     11px;
  font-weight:   700;
  padding:       7px 14px;
  border-radius: 4px;
  border:        1px solid var(--border);
  letter-spacing: 1px;
  transition:    color 0.1s, border-color 0.1s;
}

.btn-discard:hover, .btn-discard:active {
  color:         var(--red);
  border-color:  var(--red);
}

/* Video link bar (shown when video URL param is set) */
.video-link-bar {
  background:      var(--gold-bg);
  border:          1px solid rgba(255,215,0,0.40);
  border-radius:   6px;
  padding:         12px 14px;
  margin-bottom:   16px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             10px;
}

.video-bar-label {
  font-family:    var(--font-pixel);
  font-size:      7px;
  color:          var(--gold);
  letter-spacing: 2px;
  text-shadow:    0 0 6px rgba(255,215,0,0.40);
}

.btn-video {
  background:      var(--gold);
  color:           #000;
  font-family:     var(--font-ui);
  font-size:       12px;
  font-weight:     900;
  padding:         9px 18px;
  border-radius:   4px;
  text-decoration: none;
  letter-spacing:  1px;
  box-shadow:      0 3px 0 var(--gold-dim);
  transition:      transform 0.06s, box-shadow 0.06s;
  white-space:     nowrap;
  display:         inline-block;
}

.btn-video:active {
  transform:  translateY(3px);
  box-shadow: 0 0 0 var(--gold-dim);
}

/* Load panel */
.load-panel {
  max-width:  460px;
  margin:     0 auto;
}

/* Field groups */
.field-group {
  margin-bottom: 18px;
}

.field-row {
  display:    flex;
  gap:        12px;
  margin-bottom: 18px;
}

.field-group-half {
  flex:       1;
  margin-bottom: 0;
}

.field-label {
  display:        block;
  font-family:    var(--font-pixel);
  font-size:      7px;
  color:          var(--cyan);
  letter-spacing: 2px;
  margin-bottom:  8px;
  text-shadow:    0 0 6px rgba(0,229,255,0.50);
}

.field-hint {
  font-size:   11px;
  color:       var(--text-muted);
  margin-top:  5px;
  line-height: 1.4;
}

.field-input {
  display:        block;
  width:          100%;
  background:     var(--surface);
  border:         2px solid var(--border);
  border-radius:  6px;
  color:          var(--text);
  font-family:    var(--font-ui);
  font-size:      16px;
  font-weight:    700;
  padding:        13px 14px;
  outline:        none;
  transition:     border-color 0.12s;
  -webkit-appearance: none;
}

.field-input:focus {
  border-color: var(--cyan);
}

.field-input::placeholder {
  color: var(--text-muted);
}

.field-textarea {
  resize:     vertical;
  min-height: 64px;
  font-size:  14px;
  line-height: 1.5;
}

/* Upload area */
.upload-area {
  background:    var(--surface);
  border:        2px dashed var(--border);
  border-radius: 6px;
  padding:       22px 14px;
  text-align:    center;
  cursor:        pointer;
  transition:    border-color 0.12s, background 0.12s;
  position:      relative;
  overflow:      hidden;
}

.upload-area:hover,
.upload-area:focus {
  border-color: var(--cyan);
  outline:      none;
}

.upload-area.has-file {
  border-color:  var(--cyan);
  border-style:  solid;
  background:    var(--cyan-bg);
}

.upload-area.loading {
  border-color: var(--gold);
  border-style: solid;
  animation:    mr-pulse 1.2s ease-in-out infinite;
}

.upload-area.loading .upload-icon { color: var(--gold); }
.upload-area.loading .upload-text { color: var(--gold); }

@keyframes mr-pulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1.00; }
}

.file-input {
  position: absolute;
  inset:    0;
  opacity:  0;
  cursor:   pointer;
  font-size: 0;
}

.upload-icon {
  font-size:   28px;
  color:       var(--cyan);
  line-height: 1;
  margin-bottom: 6px;
  text-shadow: 0 0 10px rgba(0,229,255,0.50);
}

.upload-text {
  font-family:    var(--font-pixel);
  font-size:      7px;
  color:          var(--text-dim);
  letter-spacing: 1px;
  word-break:     break-all;
}

.upload-area.has-file .upload-text {
  color: var(--cyan);
}

/* Load error */
.load-error {
  background:    var(--red-bg);
  border:        1px solid rgba(255,59,59,0.50);
  border-radius: 4px;
  color:         var(--red);
  font-size:     12px;
  font-weight:   700;
  padding:       10px 14px;
  margin-bottom: 16px;
  line-height:   1.5;
}

/* ── Primary button ───────────────────────────────────────── */
.btn-primary {
  display:        block;
  width:          100%;
  background:     var(--cyan);
  color:          #000;
  font-family:    var(--font-ui);
  font-size:      17px;
  font-weight:    900;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding:        18px 24px;
  border-radius:  5px;
  box-shadow:     0 4px 0 var(--cyan-dim);
  transition:     transform 0.06s, box-shadow 0.06s, opacity 0.1s;
  margin-top:     4px;
}

.btn-primary:active {
  transform:  translateY(3px);
  box-shadow: 0 1px 0 var(--cyan-dim);
}

.btn-primary:disabled {
  opacity: 0.35;
  cursor:  not-allowed;
}

/* ── Ghost button ─────────────────────────────────────────── */
.btn-ghost {
  display:        block;
  width:          100%;
  background:     transparent;
  color:          var(--text-dim);
  font-family:    var(--font-ui);
  font-size:      13px;
  font-weight:    700;
  letter-spacing: 2px;
  padding:        12px 20px;
  border-radius:  4px;
  border:         1px solid var(--border);
  transition:     color 0.1s, border-color 0.1s;
  margin-top:     10px;
}

.btn-ghost:hover, .btn-ghost:active {
  color:        var(--cyan);
  border-color: var(--cyan);
}

.btn-ghost-danger:hover, .btn-ghost-danger:active {
  color:        var(--red);
  border-color: var(--red);
}

/* ── Review screen — top bar ──────────────────────────────── */
.review-topbar {
  background:    var(--sb-bg);
  border-bottom: 2px solid rgba(0,229,255,0.65);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.10) 3px,
    rgba(0,0,0,0.10) 4px
  );
  padding-top:   var(--safe-top);
}

.review-progress-wrap {
  height:     4px;
  background: var(--surface2);
}

.review-progress-bar {
  height:     100%;
  background: var(--cyan);
  width:      0%;
  transition: width 0.3s ease;
  box-shadow: 0 0 8px rgba(0,229,255,0.60);
}

.review-meta-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         8px 14px 10px;
  gap:             8px;
}

.review-meta-left {
  display:    flex;
  align-items: center;
  gap:        6px;
  flex-wrap:  wrap;
  font-size:  12px;
}

.meta-pos {
  font-family:    var(--font-pixel);
  font-size:      7px;
  color:          var(--cyan);
  letter-spacing: 1px;
  text-shadow:    0 0 6px rgba(0,229,255,0.60);
  white-space:    nowrap;
}

.meta-of {
  color: rgba(0,229,255,0.50);
}

.meta-sep {
  color:      var(--border-bright);
  font-size:  10px;
}

.meta-opp {
  color:          var(--gold);
  font-weight:    700;
  font-size:      12px;
  text-shadow:    0 0 6px rgba(255,215,0,0.40);
  white-space:    nowrap;
}

.meta-period {
  font-family:    var(--font-vt);
  font-size:      16px;
  color:          var(--cyan);
  letter-spacing: 2px;
  line-height:    1;
}

.btn-finish-early {
  background:     transparent;
  color:          var(--text-muted);
  font-family:    var(--font-ui);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 1px;
  padding:        5px 10px;
  border:         1px solid var(--border);
  border-radius:  3px;
  transition:     color 0.1s, border-color 0.1s;
  white-space:    nowrap;
  flex-shrink:    0;
}

.btn-finish-early:hover, .btn-finish-early:active {
  color:        var(--gold);
  border-color: var(--gold);
}

/* Video link in review topbar */
.btn-video-review {
  background:      transparent;
  color:           var(--gold);
  font-family:     var(--font-ui);
  font-size:       10px;
  font-weight:     700;
  letter-spacing:  1px;
  padding:         5px 10px;
  border:          1px solid var(--gold-dim);
  border-radius:   3px;
  text-decoration: none;
  white-space:     nowrap;
  flex-shrink:     0;
  transition:      border-color 0.1s;
}

.btn-video-review:hover, .btn-video-review:active {
  border-color: var(--gold);
}

/* ── Review body ──────────────────────────────────────────── */
.review-body {
  flex:           1;
  overflow-y:     auto;
  -webkit-overflow-scrolling: touch;
  padding:        14px 14px 0;
}

.review-body::-webkit-scrollbar         { width: 4px; }
.review-body::-webkit-scrollbar-track   { background: transparent; }
.review-body::-webkit-scrollbar-thumb   { background: var(--border); border-radius: 2px; }

/* ── Moment card ──────────────────────────────────────────── */
.moment-card {
  background:    var(--surface);
  border:        2px solid rgba(0,229,255,0.35);
  border-radius: 6px;
  padding:       14px 16px;
  margin-bottom: 14px;
  /* Subtle inner glow to feel like a CRT display panel */
  box-shadow:
    inset 0 0 20px rgba(0,229,255,0.04),
    0 2px 0 rgba(0,0,0,0.40);
}

.moment-event-label {
  font-family:    var(--font-vt);
  font-size:      28px;
  color:          var(--cyan);
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow:
    0 0 4px  rgba(0,229,255,0.95),
    0 0 16px rgba(0,229,255,0.45);
  margin-bottom:  10px;
  line-height:    1;
}

.moment-timings {
  display:    flex;
  gap:        10px;
  flex-wrap:  wrap;
  margin-bottom: 10px;
}

.timing-item {
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 4px;
  padding:       6px 10px;
  min-width:     70px;
}

.timing-label {
  font-family:    var(--font-pixel);
  font-size:      5px;
  color:          var(--text-muted);
  letter-spacing: 1px;
  margin-bottom:  4px;
}

.adj-badge {
  display:          inline-block;
  font-family:      var(--font-pixel);
  font-size:        4px;
  color:            var(--bg);
  background:       var(--gold);
  padding:          1px 3px;
  border-radius:    2px;
  letter-spacing:   0;
  vertical-align:   middle;
  margin-left:      3px;
}

.timing-val {
  font-size:   14px;
  font-weight: 700;
  color:       var(--text);
  line-height: 1;
}

.timing-val.mono {
  font-family: var(--font-mono);
  font-size:   13px;
}

.moment-clip-bar {
  background:    rgba(0,229,255,0.06);
  border:        1px solid rgba(0,229,255,0.25);
  border-radius: 4px;
  padding:       7px 12px;
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin-bottom: 8px;
}

.clip-label {
  font-family:    var(--font-pixel);
  font-size:      6px;
  color:          var(--cyan);
  letter-spacing: 1px;
  opacity:        0.70;
}

.clip-val {
  font-family: var(--font-mono);
  font-size:   13px;
  font-weight: 700;
  color:       var(--cyan);
  flex:        1;
}

.clip-dur {
  font-size: 11px;
  color:     var(--text-muted);
}

.moment-date-logger {
  font-size:   11px;
  color:       var(--text-muted);
  display:     flex;
  gap:         6px;
  flex-wrap:   wrap;
  font-family: var(--font-mono);
}

/* ── Review form ──────────────────────────────────────────── */
.review-form {
  padding-bottom: 6px;
}

.form-section {
  margin-bottom: 16px;
}

.form-section-label {
  font-family:    var(--font-pixel);
  font-size:      7px;
  color:          var(--text-dim);
  letter-spacing: 2px;
  margin-bottom:  8px;
  display:        flex;
  align-items:    center;
  gap:            6px;
}

.optional-tag {
  font-family:    var(--font-ui);
  font-size:      10px;
  font-weight:    400;
  color:          var(--text-muted);
  letter-spacing: 0;
  text-transform: none;
}

/* ── Toggle button groups ─────────────────────────────────── */
.toggle-group {
  display:   flex;
  flex-wrap: wrap;
  gap:       7px;
}

.toggle-group-3 {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   7px;
}

/* Base toggle button */
.btn-toggle {
  background:     var(--surface);
  border:         2px solid var(--border);
  border-radius:  4px;
  color:          var(--text-dim);
  font-family:    var(--font-ui);
  font-size:      11px;
  font-weight:    900;
  letter-spacing: 1px;
  padding:        11px 8px;
  text-align:     center;
  transition:     background 0.08s, border-color 0.08s, color 0.08s, transform 0.06s, box-shadow 0.06s;
  box-shadow:     0 3px 0 rgba(0,0,0,0.40);
  touch-action:   manipulation;
}

.btn-toggle:active {
  transform:  translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.40);
}

/* Default selected: cyan */
.btn-toggle.selected {
  background:   var(--cyan-bg2);
  border-color: var(--cyan);
  color:        var(--cyan);
  box-shadow:   0 3px 0 var(--cyan-dim);
  text-shadow:  0 0 6px rgba(0,229,255,0.40);
}

/* Outcome variants */
.btn-toggle.outcome-positive.selected {
  background:   var(--green-bg);
  border-color: var(--green);
  color:        var(--green);
  box-shadow:   0 3px 0 var(--green-dim);
  text-shadow:  0 0 6px rgba(0,255,136,0.40);
}

.btn-toggle.outcome-coaching.selected {
  background:   var(--red-bg);
  border-color: var(--red);
  color:        var(--red);
  box-shadow:   0 3px 0 var(--red-dim);
  text-shadow:  0 0 6px rgba(255,59,59,0.40);
}

.btn-toggle.outcome-neutral.selected {
  background:   var(--neutral-bg);
  border-color: var(--text-dim);
  color:        var(--text);
  box-shadow:   0 3px 0 rgba(0,0,0,0.50);
}

/* Success variants */
.btn-toggle.success-yes.selected {
  background:   var(--green-bg);
  border-color: var(--green);
  color:        var(--green);
  box-shadow:   0 3px 0 var(--green-dim);
  text-shadow:  0 0 6px rgba(0,255,136,0.40);
}

.btn-toggle.success-no.selected {
  background:   var(--red-bg);
  border-color: var(--red);
  color:        var(--red);
  box-shadow:   0 3px 0 var(--red-dim);
  text-shadow:  0 0 6px rgba(255,59,59,0.40);
}

.btn-toggle.success-unclear.selected {
  background:   var(--purple-bg);
  border-color: var(--purple);
  color:        #c084fc;
  box-shadow:   0 3px 0 rgba(124,58,237,0.40);
}

/* Review status variants */
.btn-toggle.status-complete.selected {
  background:   var(--green-bg);
  border-color: var(--green);
  color:        var(--green);
  box-shadow:   0 3px 0 var(--green-dim);
  text-shadow:  0 0 6px rgba(0,255,136,0.40);
}

.btn-toggle.status-skipped.selected {
  background:   var(--gold-bg);
  border-color: var(--gold);
  color:        var(--gold);
  box-shadow:   0 3px 0 var(--gold-dim);
  text-shadow:  0 0 6px rgba(255,215,0,0.40);
}

.btn-toggle.status-unclear.selected {
  background:   var(--purple-bg);
  border-color: var(--purple);
  color:        #c084fc;
  box-shadow:   0 3px 0 rgba(124,58,237,0.40);
}

/* ── Review footer nav ────────────────────────────────────── */
.review-footer {
  display:        grid;
  grid-template-columns: 1fr auto 1fr;
  gap:            8px;
  padding:        10px 12px calc(12px + var(--safe-bottom));
  background:     var(--surface);
  border-top:     2px solid var(--border);
}

.btn-nav {
  font-family:    var(--font-ui);
  font-size:      12px;
  font-weight:    900;
  letter-spacing: 1px;
  padding:        14px 10px;
  border-radius:  4px;
  transition:     transform 0.06s, box-shadow 0.06s, opacity 0.1s;
  touch-action:   manipulation;
}

.btn-prev {
  background:  transparent;
  color:       var(--text-dim);
  border:      2px solid var(--border);
  box-shadow:  0 3px 0 rgba(0,0,0,0.40);
}

.btn-prev:not(:disabled):active {
  transform:  translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.40);
}

.btn-prev:disabled {
  opacity: 0.30;
  cursor:  not-allowed;
}

.btn-skip {
  background:  var(--surface2);
  color:       var(--gold);
  border:      2px solid var(--gold-dim);
  box-shadow:  0 3px 0 rgba(0,0,0,0.40);
  white-space: nowrap;
}

.btn-skip:active {
  transform:  translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.40);
}

.btn-next {
  background:  var(--cyan);
  color:       #000;
  border:      none;
  box-shadow:  0 4px 0 var(--cyan-dim);
}

.btn-next:active {
  transform:  translateY(3px);
  box-shadow: 0 1px 0 var(--cyan-dim);
}

/* ── Export screen ────────────────────────────────────────── */
.export-body {
  flex:           1;
  display:        flex;
  flex-direction: column;
  justify-content: center;
  padding:        24px 18px calc(24px + var(--safe-bottom));
  max-width:      460px;
  margin:         0 auto;
  width:          100%;
}

.export-stats {
  margin-bottom: 28px;
}

.stat-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   10px;
  margin-bottom:         14px;
}

.stat-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 6px;
  padding:       14px 10px;
  text-align:    center;
}

.stat-num {
  font-family:    var(--font-vt);
  font-size:      36px;
  color:          var(--text);
  line-height:    1;
  letter-spacing: 2px;
  margin-bottom:  4px;
}

.stat-num.stat-green {
  color:       var(--green);
  text-shadow: 0 0 10px rgba(0,255,136,0.40);
}

.stat-num.stat-gold {
  color:       var(--gold);
  text-shadow: 0 0 10px rgba(255,215,0,0.35);
}

.stat-label {
  font-family:    var(--font-pixel);
  font-size:      5px;
  color:          var(--text-muted);
  letter-spacing: 1px;
}

.export-info {
  font-family: var(--font-mono);
  font-size:   11px;
  color:       var(--text-muted);
  text-align:  center;
  line-height: 1.6;
  word-break:  break-all;
}

.export-actions {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.btn-export-csv {
  font-size: 15px;
  padding:   20px 24px;
}

/* ── Toast notification ───────────────────────────────────── */
.toast {
  position:      fixed;
  bottom:        calc(80px + var(--safe-bottom));
  left:          50%;
  transform:     translateX(-50%) translateY(16px);
  background:    var(--surface2);
  border:        1px solid var(--cyan);
  color:         var(--cyan);
  font-family:   var(--font-ui);
  font-size:     12px;
  font-weight:   900;
  letter-spacing: 1.5px;
  padding:       8px 20px;
  border-radius: 20px;
  white-space:   nowrap;
  z-index:       9999;
  opacity:       0;
  transition:    opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.toast.show {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}

/* ── Utilities ────────────────────────────────────────────── */
.hidden {
  display: none !important;
}