/* ============================================================
   Creator Mode styles — Henry's hidden dashboard.
   Deliberately distinct from the romantic public theme: a clean,
   neutral, utilitarian "app" look so editing feels effortless.
   Nothing here renders unless the secret gesture + PIN succeed.
   ============================================================ */

#creator-root {
  display: none;
}
#creator-root.creator-visible {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 999;
}

.creator-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 6, 9, 0.82);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}

.creator-gate-card {
  width: 100%; max-width: 320px;
  background: #1c1420;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 2rem 1.75rem;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.creator-gate-card.shake { animation: creatorShake 0.4s; }
@keyframes creatorShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.creator-gate-heart { font-size: 2rem; margin-bottom: 0.5rem; }
.creator-gate-title { font-family: var(--font-ui, sans-serif); color: #f5eef1; margin: 0 0 0.25rem; font-size: 1.3rem; }
.creator-gate-subtitle { color: rgba(245,238,241,0.65); font-size: 0.9rem; margin: 0 0 1.25rem; }
.creator-pin-input {
  width: 100%; padding: 0.7rem 0.9rem; margin-bottom: 0.75rem;
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.15);
  background: #120c11; color: #fff; font-size: 1.1rem; letter-spacing: 0.3em;
  text-align: center;
}
.creator-gate-error { color: #e07a8a; font-size: 0.82rem; min-height: 1.1rem; margin: 0 0 0.5rem; }
.creator-gate-btn {
  width: 100%; padding: 0.75rem; border: none; border-radius: 10px;
  background: #c9435a; color: #fff; font-size: 1rem; cursor: pointer;
  transition: transform 0.2s ease;
}
.creator-gate-btn:hover { transform: translateY(-1px); }

/* ---------- dashboard shell ---------- */
.creator-dashboard {
  position: absolute; inset: 0;
  background: #14101a;
  display: flex; flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.creator-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.1rem;
  background: #1a1420;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.creator-topbar-title { color: #f0e8ec; font-size: 0.95rem; font-weight: 600; }
.creator-close-btn {
  background: transparent; border: none; color: rgba(255,255,255,0.7);
  font-size: 1.1rem; cursor: pointer; padding: 0.3rem 0.6rem;
}
.creator-close-btn:hover { color: #fff; }

.creator-body { flex: 1; display: flex; min-height: 0; }
.creator-nav {
  width: 42%; max-width: 190px; overflow-y: auto;
  background: #17111d; border-right: 1px solid rgba(255,255,255,0.06);
  padding: 0.5rem;
}
.creator-nav-btn {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; color: rgba(255,255,255,0.75);
  padding: 0.7rem 0.6rem; border-radius: 10px; font-size: 0.85rem;
  cursor: pointer; margin-bottom: 0.2rem; transition: background 0.2s ease;
}
.creator-nav-btn:hover { background: rgba(255,255,255,0.05); }
.creator-nav-btn.active { background: #c9435a; color: #fff; }

.creator-panel { flex: 1; overflow-y: auto; padding: 1.1rem 1rem 3rem; }
.creator-section-title { color: #f0e8ec; font-size: 1.1rem; margin: 0 0 1rem; }
.creator-field { margin-bottom: 1rem; }
.creator-field-label { display: block; color: rgba(255,255,255,0.6); font-size: 0.78rem; margin-bottom: 0.3rem; }
.creator-field-input {
  width: 100%; padding: 0.65rem 0.75rem; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14); background: #1e1723;
  color: #fff; font-size: 0.92rem; font-family: inherit;
}
textarea.creator-field-input { min-height: 90px; resize: vertical; }
.creator-save-btn, .creator-upload-btn {
  display: inline-block; padding: 0.65rem 1.1rem; border-radius: 24px;
  background: #c9435a; color: #fff; border: none; font-size: 0.88rem;
  cursor: pointer; margin-top: 0.25rem; margin-bottom: 1rem; text-align: center;
}
.creator-save-btn:hover, .creator-upload-btn:hover { transform: translateY(-1px); }
.creator-empty-hint { color: rgba(255,255,255,0.45); font-size: 0.82rem; margin: 0.25rem 0 1rem; }

.creator-media-list { display: flex; flex-direction: column; gap: 0.75rem; }
.creator-media-row {
  display: flex; align-items: center; gap: 0.75rem;
  background: #1e1723; border-radius: 10px; padding: 0.6rem;
}
.creator-thumb { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: #000; }
video.creator-thumb { width: 90px; height: 60px; }
.creator-media-meta { flex: 1; min-width: 0; }
.creator-media-name { color: rgba(255,255,255,0.7); font-size: 0.85rem; }
.creator-media-actions { display: flex; gap: 0.3rem; }
.creator-icon-btn {
  background: rgba(255,255,255,0.08); border: none; color: #fff;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 0.85rem;
}
.creator-icon-btn.danger { background: rgba(224,122,138,0.25); color: #e07a8a; }

.creator-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 10px);
  background: #1e1723; color: #fff; padding: 0.6rem 1.1rem; border-radius: 24px;
  font-size: 0.85rem; z-index: 1200; opacity: 0; transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.creator-toast.visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 480px) {
  .creator-nav { width: 130px; }
  .creator-nav-btn { font-size: 0.78rem; padding: 0.6rem 0.4rem; }
}