/* ============================================================
   ROLLIT — EXPORT STUDIO  (css/exportstudio.a9ec32ec.css)
   Preview modal for the branded, platform-aware share image.
   Self-contained; only leans on the global .spinner + --gold,
   with safe fallbacks.
   ============================================================ */
.es-bg {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(6, 7, 11, 0.8);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .18s ease;
}
.es-bg.open { opacity: 1; }

.es-modal {
  position: relative;
  width: min(440px, 100%);
  max-height: 94vh;
  display: flex; flex-direction: column;
  background: #14151d;
  border: 1px solid #262833;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
  transform: translateY(10px) scale(.98);
  transition: transform .18s ease;
  overflow: hidden;
}
.es-bg.open .es-modal { transform: none; }

.es-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .45); color: #cfd0da;
  border: 1px solid #2c2e3a; cursor: pointer;
  font-size: 18px; transition: background .15s, color .15s;
}
.es-close:hover { background: rgba(0, 0, 0, .7); color: #fff; }

.es-stage {
  position: relative;
  padding: 22px 22px 6px;
  display: flex; align-items: center; justify-content: center;
  min-height: 220px;
  overflow: auto;
}
.es-preview {
  max-width: 100%;
  max-height: 58vh;
  border-radius: 12px;
  display: block;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .55);
  opacity: 1; transition: opacity .2s ease;
}
.es-bg.loading .es-preview { opacity: .35; }
.es-spinner { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.es-bg.loading .es-spinner { display: flex; }

/* Platform selector */
.es-platforms { padding: 8px 18px 4px; }
.es-platforms-label {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: #7c7a90; margin: 2px 2px 8px;
}
.es-chips { display: flex; gap: 7px; }
.es-chip {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px;
  border-radius: 11px;
  background: #1b1d26; color: #b7b6c6;
  border: 1px solid #2a2c38; cursor: pointer;
  font-size: 11.5px; font-weight: 600;
  transition: background .14s, border-color .14s, color .14s, transform .05s;
}
.es-chip i { font-size: 18px; }
.es-chip:hover { background: #22242f; color: #e6e6ee; }
.es-chip:active { transform: translateY(1px); }
.es-chip.active {
  background: rgba(232, 201, 107, .13);
  border-color: rgba(232, 201, 107, .55);
  color: var(--gold, #e8c96b);
}

/* "How many titles" chooser (versus ranking export) */
.es-count { padding: 10px 18px 2px; }
.es-count-label { font-size: 12.5px; color: #b7b6c6; }
.es-count-label strong { color: var(--gold, #e8c96b); }
.es-count-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 5px; margin: 10px 0 4px;
  border-radius: 3px; background: #2a2c38; cursor: pointer;
}
.es-count-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--gold, #e8c96b); border: 2px solid #12131a; cursor: pointer;
}
.es-count-range::-moz-range-thumb {
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--gold, #e8c96b); border: 2px solid #12131a; cursor: pointer;
}
.es-count-ticks { display: flex; justify-content: space-between; font-size: 10.5px; color: #7c7a90; }

/* "Fill with details" toggle (chart exports only) */
.es-extras { padding: 4px 18px 2px; }
.es-extras-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 8px; border-radius: 999px;
  background: #1b1d26; color: #b7b6c6;
  border: 1px solid #2a2c38; cursor: pointer;
  font-size: 12px; font-weight: 600;
  transition: background .14s, border-color .14s, color .14s;
}
.es-extras-toggle:hover { background: #22242f; color: #e6e6ee; }
.es-extras-knob {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 6px;
  background: #12131a; border: 1px solid #34364400; box-shadow: inset 0 0 0 1px #34364a;
  color: transparent; font-size: 12px; transition: background .14s, color .14s;
}
.es-extras-toggle.active {
  background: rgba(232, 201, 107, .13);
  border-color: rgba(232, 201, 107, .55);
  color: var(--gold, #e8c96b);
}
.es-extras-toggle.active .es-extras-knob {
  background: var(--gold, #e8c96b); color: #201a06; box-shadow: none;
}

.es-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 18px 18px;
  margin-top: 6px;
  border-top: 1px solid #20222c;
}
.es-btn {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 12px;
  border-radius: 11px;
  background: #1d1f29; color: #d9dae4;
  border: 1px solid #2c2e3a;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
  white-space: nowrap;
}
.es-btn:hover { background: #24262f; border-color: #3a3c48; }
.es-btn:active { transform: translateY(1px); }
.es-btn i { font-size: 16px; }
.es-btn-primary {
  flex-basis: 100%;
  background: linear-gradient(135deg, #e8c96b, #d9b24e);
  color: #201a06; border-color: transparent;
}
.es-btn-primary:hover { background: linear-gradient(135deg, #f0d580, #e2bd5a); }

/* Small "Export" affordance dropped into section headings / chart cards. */
.es-export-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; margin-left: 10px;
  border-radius: 9px;
  background: rgba(232, 201, 107, .1);
  color: var(--gold, #e8c96b);
  border: 1px solid rgba(232, 201, 107, .3);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  vertical-align: middle;
  transition: background .15s, border-color .15s;
}
.es-export-btn:hover { background: rgba(232, 201, 107, .2); }
.es-export-btn i { font-size: 15px; }

@media (max-width: 480px) {
  .es-btn { flex-basis: 100%; }
  .es-chip span { font-size: 11px; }
}