/* editor.css — /edit */
/* Editor-only accent system. Scoped to this file (never loaded on the
   public page) so the public profile stays strictly monochrome per spec —
   these accents are for the internal admin surface only. */
:root {
  --accent: #6d8bff;
  --accent-strong: #5a78f0;
  --accent-text: #c7d3ff;
  --accent-soft: rgba(109, 139, 255, 0.14);
  --accent-soft-hover: rgba(109, 139, 255, 0.22);
  --accent-border: rgba(109, 139, 255, 0.38);

  --success: #4ade80;
  --success-soft: rgba(74, 222, 128, 0.14);
  --warn: #fbbf6c;
  --warn-soft: rgba(251, 191, 108, 0.16);
}

body {
  background: var(--bg-primary);
}

/* --- Unlock screen --- */
.unlock-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.unlock-card {
  width: 100%;
  max-width: 380px;
  padding: 36px 28px;
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.unlock-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.unlock-icon svg {
  width: 22px;
  height: 22px;
}

.unlock-icon .brand-logo {
  height: 52px;
  width: auto;
}

.unlock-card h1 {
  font-size: 19px;
  font-weight: 600;
  margin: 0;
}

.unlock-card p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.unlock-error {
  font-size: 13px;
  color: #e5484d;
  min-height: 16px;
}

/* --- App shell --- */
.editor-app {
  display: none;
  min-height: 100vh;
}

.editor-app.is-visible {
  display: block;
}

.editor-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.editor-main {
  flex: 1;
  min-width: 0;
}

/* --- Side navigation --- */
.side-nav {
  --side-nav-width: 216px;
  --side-nav-width-collapsed: 68px;
  width: var(--side-nav-width);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px 12px;
  border-right: 1px solid var(--border);
  background: var(--bg-secondary);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  transition: width var(--dur) var(--ease);
}

.side-nav.is-collapsed {
  width: var(--side-nav-width-collapsed);
}

.side-nav-top {
  display: flex;
  align-items: center;
  padding: 0;
  min-height: 44px;
}

/* The logo is the collapse button: click it to fold or unfold the sidebar. */
.side-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 44px;
  padding: 0;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  border-radius: var(--radius-input);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur) var(--ease), transform 0.15s ease;
}

.side-nav-toggle:hover {
  background: var(--glass-hover);
}

.side-nav-toggle:active {
  transform: scale(0.95);
}

.side-nav-toggle:focus-visible,
.mobile-menu-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

/* Animated logo (inline SVG, driven by /js/brand-logo.js).
   Used inside the sidebar toggle and the mobile top-bar button. */
.brand-logo {
  display: block;
  height: 34px;
  width: auto;
  aspect-ratio: 666 / 732;
  flex-shrink: 0;
  overflow: visible;      /* lets the glow spill past the box */
  pointer-events: none;   /* clicks go to the button around it */
}

.brand-logo .ln {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-logo-base {
  stroke: #ffffff;
  stroke-opacity: 0.38;
  stroke-width: 34;
}

.side-nav-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.side-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-input);
  color: var(--text-secondary);
  font-size: 17px;
  font-weight: 450;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.side-nav-item:hover {
  background: var(--glass-hover);
  color: var(--text-primary);
}

.side-nav-item.is-active {
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  border-color: var(--border-hover);
}

.side-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.side-nav-icon svg {
  width: 25px;
  height: 25px;
}

.side-nav-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-nav.is-collapsed .side-nav-item {
  justify-content: center;
  padding: 9px;
}

.side-nav.is-collapsed .side-nav-label {
  display: none;
}

.editor-view {
  display: none;
}

.editor-view.is-active {
  display: block;
}

#view-subscribers,
#view-settings {
  padding: 28px 24px 80px;
  max-width: 1180px;
  margin: 0 auto;
}

#view-settings.is-active {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.subscribers-section {
  max-width: 640px;
  margin: 0 auto;
}

.subscribers-section .item-list:empty {
  display: none;
}

.subscribers-section .empty-state {
  margin: 8px 0 0;
  max-width: none;
  padding: 40px 16px 24px;
}

.empty-state {
  margin: 28px 24px 80px;
  max-width: 1180px;
  padding: 64px 32px;
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  color: var(--text-secondary);
}

.empty-state-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent-text);
  margin-bottom: 4px;
}

.empty-state-icon svg {
  width: 24px;
  height: 24px;
}

.empty-state h2 {
  font-size: 18px;
  font-weight: 650;
  color: var(--text-primary);
  margin: 0;
}

.empty-state p {
  font-size: 14px;
  max-width: 360px;
  margin: 0;
}

@media (max-width: 850px) {
  /* The sidebar becomes an off-canvas drawer. It is opened with the ☰ button
     in the top-left of the top bar (.mobile-menu-btn) and closed by tapping
     the dark backdrop, choosing a page, or pressing Esc. */
  .side-nav,
  .side-nav.is-collapsed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    width: min(var(--side-nav-width), 82vw);
    height: 100vh;
    height: 100dvh;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    background: rgba(10, 10, 10, 0.94);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateX(-105%);
    visibility: hidden;   /* keeps the closed drawer out of the tab order */
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.4s;
  }

  .side-nav.is-open,
  .side-nav.is-collapsed.is-open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: 24px 0 60px rgba(0, 0, 0, 0.55);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
  }

  /* the drawer always shows full labels, even if the desktop rail is collapsed.
     The logo button at the top of the drawer closes it. */
  .side-nav.is-collapsed .side-nav-label {
    display: block;
  }

  .side-nav.is-collapsed .side-nav-item {
    justify-content: flex-start;
    padding: 9px 10px;
  }

  .empty-state {
    margin-left: 16px;
    margin-right: 16px;
  }
}

.editor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(5, 5, 5, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 50;
}

.editor-topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-border), transparent);
  opacity: 0.6;
}

.editor-brand {
  font-size: 15px;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Save toggle button ----------
   Single button, four states (idle / loading / success / saved), each
   an absolutely-positioned layer inside the button that's cross-faded
   via opacity/transform/blur. Width animates alongside the state so
   the button itself contracts to a circle while working and settles
   back into a pill once saved — mirrors the reference glassmorphism
   component, restyled onto this file's existing glass/accent tokens. */
.save-toggle-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  width: 92px;
  padding: 0;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 999px;
  cursor: pointer;
  background: var(--glass);
  border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.14));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
  transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.save-toggle-btn:hover:not(:disabled) {
  background: var(--glass-hover);
  border-color: rgba(255, 255, 255, 0.26);
}

.save-toggle-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.save-toggle-btn:disabled {
  cursor: default;
}

.save-toggle-btn.is-circle {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}

.save-toggle-btn.is-saved {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.save-toggle-btn #save-idle-text {
  font-size: 14px;
  font-weight: 650;
  color: var(--text-primary);
}

.save-state-transition {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.save-state-hidden { opacity: 0; pointer-events: none; filter: blur(4px); }
.save-state-hidden-down { opacity: 0; transform: translateY(10px); filter: blur(4px); }
.save-state-hidden-scale { opacity: 0; transform: scale(0.5); filter: blur(4px); }
.save-state-visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.save-state-visible-pop { opacity: 1; transform: scale(1.15); filter: blur(0); }

.save-spinner {
  width: 19px;
  height: 19px;
  animation: save-spin 0.7s linear infinite;
}

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

.save-check-icon {
  width: 20px;
  height: 20px;
  color: #ffffff;
  flex-shrink: 0;
}

#save-saved-text {
  font-size: 15px;
  font-weight: 650;
  color: var(--text-primary);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

#save-saved-text.is-visible {
  opacity: 1;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- Font switch (topbar): handwritten <-> normal, site-wide ----------
   Same 42px glass-pill language as the save button and account button,
   with a sliding knob underneath whichever label is active. Driven by
   /js/font-toggle.js, which toggles html.font-normal and persists the
   choice so login.html picks up the same setting. */
.font-switch {
  position: relative;
  display: flex;
  align-items: center;
  height: 42px;
  width: 76px;
  padding: 3px;
  flex-shrink: 0;
  border-radius: 999px;
  cursor: pointer;
  background: var(--glass);
  border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.14));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.font-switch:hover {
  background: var(--glass-hover);
  border-color: rgba(255, 255, 255, 0.26);
}

.font-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.font-switch-track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.font-switch-knob {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
}

.font-switch input:checked ~ .font-switch-track .font-switch-knob {
  transform: translateX(34px);
}

.font-switch-label {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  pointer-events: none;
  transition: color var(--dur) var(--ease);
}

.font-switch-label--hand {
  font-family: var(--font-family-hand);
  font-size: 16px;
}

.font-switch input:not(:checked) ~ .font-switch-track .font-switch-label--normal {
  color: var(--text-primary);
}

.font-switch input:checked ~ .font-switch-track .font-switch-label--hand {
  color: var(--text-primary);
}

/* ---------- User menu (topbar account icon + dropdown) ----------
   Same glass/circle recipe as the save button's circle state, with
   an iOS-style spring/fade for the dropdown (matches the drawer's
   cubic-bezier(0.32, 0.72, 0, 1) easing used elsewhere in this file). */
.user-menu {
  position: relative;
  flex-shrink: 0;
}

.user-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  flex-shrink: 0;
  border-radius: 999px;
  cursor: pointer;
  background: var(--glass);
  border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.14));
  color: var(--text-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.user-menu-btn svg {
  width: 20px;
  height: 20px;
}

.user-menu-btn:hover {
  background: var(--glass-hover);
  border-color: var(--border-hover);
}

.user-menu-btn:active {
  transform: scale(0.94);
}

.user-menu.is-open .user-menu-btn {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 168px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(20, 20, 22, 0.85);
  border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.14));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform-origin: top right;
  transform: scale(0.85) translateY(-6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 60;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.22s cubic-bezier(0.32, 0.72, 0, 1),
              visibility 0s linear 0.35s;
}

.user-menu.is-open .user-menu-dropdown {
  transform: scale(1) translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.25s cubic-bezier(0.32, 0.72, 0, 1),
              visibility 0s;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 11px;
  background: transparent;
  border: none;
  color: #ff6b6f;
  font-size: 15px;
  font-weight: 560;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.user-menu-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.user-menu-item:hover {
  background: rgba(255, 107, 111, 0.12);
}

.user-menu-item:active {
  background: rgba(255, 107, 111, 0.18);
}

.editor-layout {
  display: grid;
  grid-template-columns: minmax(360px, 480px) 1fr;
  gap: 32px;
  padding: 28px 24px 80px;
  max-width: 1180px;
  margin: 0 auto;
}

.editor-panel {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.preview-panel {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: sticky;
  top: 84px;
  height: fit-content;
}

.preview-frame {
  width: 390px;
  height: 780px;
  border-radius: 34px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  overflow: hidden;
  position: relative;
  z-index: 0;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.preview-scroll {
  height: 100%;
  overflow-y: auto;
  padding: 28px 18px 40px;
  position: relative;
  z-index: 1;
  /* Lets the hero break out to the preview frame's full width — see
     .profile-wrap[data-has-hero="true"] in profile-content.css. */
  --page-gutter: 18px;
}

/* A full-bleed hero photo should start flush against the top of the
   phone frame, not below the preview's usual top padding. */
.preview-scroll:has(.profile-wrap[data-has-hero="true"]) {
  padding-top: 0;
}

.preview-scroll::-webkit-scrollbar {
  width: 0;
}

/* Editor-only hover tint on glass surfaces — scoped here so the public
   page's shared .glass (from base.css) stays untouched. */
.editor-app .glass:hover,
.modal-sheet .glass:hover {
  border-color: var(--border-hover);
}

.list-item:focus-within {
  border-color: var(--border-hover);
}

/* --- Section cards --- */
.editor-section {
  border-radius: var(--radius-card);
  padding: 20px;
}

.section-title {
  font-size: 17px;
  font-weight: 450;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.section-title-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--accent-text);
  flex-shrink: 0;
}

.section-icon svg {
  width: 25px;
  height: 25px;
}

/* Profile heading icon: the exact user icon, unboxed (no background
   badge) and larger than the other section icons. */
.section-icon-bare {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-text);
  flex-shrink: 0;
}

.section-icon-bare svg {
  width: 100%;
  height: 100%;
}

/* --- Collapsible sections (e.g. Profile card) ---
   The toggle is a reset button standing in for the h2's text so the
   whole header row is clickable. The panel uses the CSS grid-rows
   trick (1fr -> 0fr) to animate height: auto smoothly, no JS
   measuring needed, eased with the same spring curve used for the
   sidebar drawer and dropdowns elsewhere in this file. */
.section-collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.section-collapse-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

.is-collapsible.is-collapsed .section-collapse-chevron {
  transform: rotate(-90deg);
}

.section-collapse-panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

.is-collapsible.is-collapsed .section-collapse-panel {
  grid-template-rows: 0fr;
}

.section-collapse-inner {
  overflow: hidden;
  min-height: 0;
}

.is-collapsible .section-title {
  transition: margin-bottom 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

.is-collapsible.is-collapsed .section-title {
  margin-bottom: 0;
}

/* Display-name font picker: a grid of buttons, each showing the person's
   name in that font with the font's name underneath. */
.font-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.font-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  text-align: left;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.font-option:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border-hover);
}

.font-option.is-active {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--border-hover);
}

.font-option-sample {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20px;
  line-height: 1.25;
}

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

.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.field-group:last-child {
  margin-bottom: 0;
}

.field-toggle-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.field-toggle-row .field-label {
  margin: 0;
}

.paypal-logo {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border-radius: 8px;
  padding: 7px 12px;
  text-transform: none;
  letter-spacing: normal;
}

.paypal-logo svg {
  width: 84px;
  height: auto;
  display: block;
}

.field-label {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.field-input,
.field-textarea,
.field-select {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: 11px 13px;
  font-size: 17px;
  color: var(--text-primary);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

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

.field-input:focus,
.field-textarea:focus,
.field-select:focus {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
  animation: field-glow 2.4s ease-in-out infinite;   /* soft breathing glow */
}

@keyframes field-glow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06), 0 0 12px rgba(255, 255, 255, 0.08); }
  50%      { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.10), 0 0 24px rgba(255, 255, 255, 0.18); }
}

/* Social Links dropdown: custom arrow with breathing room on the right */
#add-social-platform {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;   /* keeps long text from running under the arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;   /* increase for more space */
  background-size: 16px 16px;
}

.field-textarea {
  resize: vertical;
  min-height: 72px;
  font-family: inherit;
  line-height: 1.5;
}

.field-hint {
  font-size: 13px;
  color: var(--text-muted);
}

/* --- Profile card ---
   Restyled to match the glassmorphic reference: a larger, softer card
   with generous spacing, sentence-case labels instead of tracked
   uppercase, pill-shaped inputs, and roomier font-picker cards. Scoped
   to .profile-section only, the rest of the editor's cards keep their
   existing compact style. */
.profile-section {
  border-radius: 28px;
  padding: 26px 26px 28px;
}

.profile-section .section-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
  transition: margin-bottom 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

.profile-section.is-collapsed .section-title {
  margin-bottom: 0;
}

.profile-section .field-group {
  gap: 9px;
  margin-bottom: 20px;
}

/* Sentence-case white labels in the Profile card, the block modal, and the auth form */
.modal-sheet .field-label,
.profile-section .field-label,
.unlock-card .field-label {
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
  text-transform: none;
  letter-spacing: 0;
}

.profile-section .field-label {
  margin-left: 2px;
}

.profile-section .field-input,
.profile-section .field-textarea {
  border-radius: 18px;
  padding: 13px 18px;
  font-size: 14.5px;
  background: rgba(255, 255, 255, 0.035);
}

.profile-section .field-input:focus,
.profile-section .field-textarea:focus {
  background: rgba(255, 255, 255, 0.05);
}

.profile-section .field-hint {
  font-size: 12.5px;
  margin-left: 2px;
}

.profile-section .avatar-row {
  gap: 18px;
  margin-bottom: 22px;
}

.profile-section .font-picker {
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 10px;
}

.profile-section .font-option {
  padding: 14px 16px;
  border-radius: 16px;
  gap: 5px;
}

.profile-section .font-option-sample {
  font-size: 21px;
}

.profile-section .font-option-label {
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

/* --- Background section --- */
/* Segmented control — Starfield/Aurora, Alignment, Embed size…
   Works with 2, 3 or 4 buttons: one grey-glass pill slides behind the
   active button. The pill's width and position come from --seg-n (how many
   buttons) and --seg-i (which one is active), both set by :has() below,
   so no JS is needed. */
.bg-style-toggle {
  --seg-gap: 6px;
  --seg-n: 2;
  --seg-i: 0;
  position: relative;
  display: flex;
  gap: var(--seg-gap);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  padding: 4px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.bg-style-toggle:has(> .bg-style-btn:nth-child(3)) { --seg-n: 3; }
.bg-style-toggle:has(> .bg-style-btn:nth-child(4)) { --seg-n: 4; }
.bg-style-toggle:has(> .bg-style-btn:nth-child(2).is-active) { --seg-i: 1; }
.bg-style-toggle:has(> .bg-style-btn:nth-child(3).is-active) { --seg-i: 2; }
.bg-style-toggle:has(> .bg-style-btn:nth-child(4).is-active) { --seg-i: 3; }

/* the sliding pill */
.bg-style-toggle::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px - (var(--seg-n) - 1) * var(--seg-gap)) / var(--seg-n));
  transform: translateX(calc(var(--seg-i) * (100% + var(--seg-gap))));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35),
              inset 0 1px 1px rgba(255, 255, 255, 0.35);
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
}

.bg-style-btn {
  position: relative;
  z-index: 1;
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 12px;
  border-radius: 999px;
  transition: color var(--dur) var(--ease);
}

.bg-style-btn.is-active {
  color: #ffffff;
}

.bg-color-row {
  display: flex;
  gap: 12px;
}

.bg-color-input {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border-hover);
  background: none;
  padding: 0;
  overflow: hidden;
}

.bg-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.bg-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

.bg-color-input::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}

#bg-color-group.is-hidden {
  display: none;
}

.avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.avatar-preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  flex-shrink: 0;
}

.avatar-placeholder-sm {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--radius-button);
  font-size: 16px;
  font-weight: 400;
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text-primary);
  white-space: nowrap;
}

.btn:hover {
  background: var(--glass-hover);
  border-color: var(--border-hover);
}

/* Grey-glass action buttons — same recipe as the Subscribe button.
   Used by: Add block / Save (modal), "+ Add block" and "+ Add" (Social Links). */
.btn-primary,
#add-block-btn,
#add-social-form button[type="submit"] {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35),
              inset 0 1px 1px rgba(255, 255, 255, 0.35);
  transition: background 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease, transform 0.15s ease;
}

.btn-primary:hover:not(:disabled),
#add-block-btn:hover,
#add-social-form button[type="submit"]:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4),
              inset 0 1px 1px rgba(255, 255, 255, 0.45);
}

.btn-primary:active:not(:disabled),
#add-block-btn:active,
#add-social-form button[type="submit"]:active {
  transform: scale(0.98);
}

#add-block-btn {
  font-size: 15px;
  height: 38px;
  padding: 0 16px;
}

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

.btn-danger {
  color: #ff6b6f;
}

.btn-small {
  height: 34px;
  padding: 0 12px;
  font-size: 16px;
  border-radius: 12px;
}

/* Edit / delete icon buttons: no box, just the icon */
.btn-icon {
  width: 25px;
  height: 25px;
  padding: 0;
  border-radius: 10px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.btn-icon:hover {
  background: transparent;
  border-color: transparent;
  opacity: 0.7;
}

.btn-block {
  width: 100%;
}

/* --- Lists (social links, blocks) --- */
.item-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.list-item {
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.list-item-drag {
  color: var(--text-muted);
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.list-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.list-item-icon svg {
  width: 25px;
  height: 25px;
}

/* Icon colours per block type (no background badge). */
.list-item-icon[data-tint="rose"]   { color: #f4a8d0; }
.list-item-icon[data-tint="red"]    { color: #f5a3a3; }
.list-item-icon[data-tint="cyan"]   { color: #7fdccb; }
.list-item-icon[data-tint="blue"]   { color: #9dc2fb; }
.list-item-icon[data-tint="indigo"] { color: #b0b7fb; }
.list-item-icon[data-tint="sky"]    { color: #8bd9fb; }
.list-item-icon[data-tint="green"]  { color: #93eeb0; }
.list-item-icon[data-tint="amber"]  { color: #fcd19b; }
.list-item-icon[data-tint="violet"] { color: #c5b4fb; }
.list-item-icon[data-tint="teal"]   { color: #85ddcf; }
.list-item-icon[data-tint="slate"]  { color: #c2ccd8; }

.list-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.list-item-title {
  font-size: 17px;
  font-weight: 450;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-item-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none;
}

.list-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Toggle switch — recessed dark track when off, grey glass when on */
.toggle {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-secondary);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}

.toggle.is-on {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35),
              inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

.toggle.is-on::after {
  transform: translateX(16px);
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.empty-state {
  text-align: center;
  padding: 24px 12px;
  color: var(--text-muted);
  font-size: 13px;
}

/* --- Add-block modal grid --- */
.block-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.block-type-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
  color: var(--text-primary);
}

.block-type-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-hover);
}

.block-type-option .list-item-icon {
  width: 30px;
  height: 30px;
}

.block-type-option svg {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
}

.block-type-option span {
  font-size: 17px;
  font-weight: 450;
}

/* Icon badge picker (Image Link block) — a grid of the real platform
   glyphs (same markup as the public social row) plus a "None" chip,
   rather than a plain text <select>, so creators can see exactly which
   mark they're choosing. */
.icon-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.icon-picker-option {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.icon-picker-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-hover);
}

.icon-picker-option svg {
  width: 16px;
  height: 16px;
}

.icon-picker-option.is-active {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--border-hover);
  color: #ffffff;
}

.icon-picker-option.icon-picker-none {
  width: auto;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
}

.block-edit-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.upload-drop {
  border: 1px dashed var(--border);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.upload-drop:hover {
  border-color: var(--border-hover);
}

.upload-drop-thumb {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--bg-tertiary);
  flex-shrink: 0;
}

.upload-drop-text {
  font-size: 13px;
  color: var(--text-secondary);
}

.upload-drop-text strong {
  color: var(--text-primary);
}

/* --- Mobile tabs --- */
.mobile-tabs {
  display: none;
}

@media (max-width: 850px) {
  .editor-layout {
    grid-template-columns: 1fr;
    padding-top: 16px;
  }

  /* Edit / Preview: a glass segmented toggle with a sliding pill.
     Sticky so it stays visible while the panel content scrolls,
     sitting just under the sticky topbar (which is ~72px tall here). */
  .mobile-tabs {
    position: sticky;
    top: 72px;
    z-index: 40;
    display: flex;
    gap: 6px;
    width: calc(100% - 48px);
    max-width: 1132px;
    margin: 20px auto 16px;        /* 20px = the extra space above the toggle */
    padding: 4px;
    border-radius: 999px;
    background: rgba(20, 20, 22, 0.75);
    border: 1px solid var(--border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  }

  .mobile-tabs::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px - 6px) / 2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35),
                inset 0 1px 1px rgba(255, 255, 255, 0.35);
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: none;
  }

  .mobile-tabs:has(> .mobile-tab:nth-child(2).is-active)::before {
    transform: translateX(calc(100% + 6px));
  }

  .mobile-tab {
    position: relative;
    z-index: 1;
    flex: 1;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    transition: color var(--dur) var(--ease);
  }

  .mobile-tab.is-active {
    color: #ffffff;
  }

  .editor-panel {
    display: none;
  }
  .editor-panel.is-active-mobile {
    display: flex;
  }

  .preview-panel {
    display: none;
    position: static;
    width: 100%;
  }
  .preview-panel.is-active-mobile {
    display: flex;
  }

  .preview-frame {
    width: 100%;
    max-width: 390px;
    height: 70vh;
    min-height: 520px;
  }
}

@media (max-width: 480px) {
  .editor-topbar {
    padding: 12px 16px;
  }
  .editor-layout {
    padding-left: 16px;
    padding-right: 16px;
  }
  .mobile-tabs {
    width: calc(100% - 32px);
    top: 68px;
  }
  #view-subscribers,
  #view-settings {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ==========================================================================
   Shimmering gliding border
   Replaces the old blue hover / selected border on font cards, block tiles,
   icon picker, side nav, mobile tabs, section cards and list rows.
   Kept at the end of the file on purpose so it wins over the base rules.
   ========================================================================== */

/* lets the browser animate the gradient's angle */
@property --ring-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@keyframes ring-spin {
  to { --ring-angle: 360deg; }
}

/* 1 · everything that can show the ring */
:is(.font-picker .font-option, .block-type-option, .icon-picker-option,
         .side-nav-item, .mobile-tab, .editor-section.glass, .list-item.glass) {
  position: relative;
  animation: ring-spin 3.5s linear infinite;
  animation-play-state: paused;              /* only spins on hover / selected */
}

.editor-section.glass { animation-duration: 8s; }   /* big cards glide slower */

/* smooth fades on the small items */
:is(.font-picker .font-option, .block-type-option, .icon-picker-option,
         .side-nav-item, .mobile-tab) {
  transition: background 0.35s ease, border-color 0.35s ease,
              color 0.35s ease, box-shadow 0.4s ease;
}

/* 2 · the ring itself: a conic-gradient masked down to a 1px edge */
:is(.font-picker .font-option, .block-type-option, .icon-picker-option,
         .side-nav-item, .mobile-tab, .editor-section.glass, .list-item.glass)::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: conic-gradient(
    from var(--ring-angle),
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.95) 10%,
    rgba(255, 255, 255, 0.06) 22%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.70) 60%,
    rgba(255, 255, 255, 0.06) 72%,
    rgba(255, 255, 255, 0.06) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* 3 · hover / selected: show the ring and start it gliding */
body :is(.font-picker .font-option, .block-type-option, .icon-picker-option,
         .side-nav-item, .mobile-tab, .editor-section.glass, .list-item.glass):is(:hover, .is-active) {
  border-color: rgba(255, 255, 255, 0.08);
  animation-play-state: running;
}

body :is(.font-picker .font-option, .block-type-option, .icon-picker-option,
         .side-nav-item, .mobile-tab, .editor-section.glass, .list-item.glass):is(:hover, .is-active)::before {
  opacity: 0.85;
}

/* list rows also ring while you're editing inside them */
body .list-item.glass:focus-within {
  border-color: rgba(255, 255, 255, 0.08);
  animation-play-state: running;
}

body .list-item.glass:focus-within::before {
  opacity: 0.85;
}

/* soft glow on hover for the small items */
body :is(.font-picker .font-option, .block-type-option,
         .icon-picker-option, .side-nav-item):hover {
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.08);
}

/* selected = grey glass + full-brightness ring */
body :is(.font-picker .font-option, .icon-picker-option,
         .side-nav-item, .mobile-tab).is-active {
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.12),
              inset 0 0 16px rgba(255, 255, 255, 0.04);
}

body :is(.font-picker .font-option, .block-type-option, .icon-picker-option,
         .side-nav-item, .mobile-tab).is-active::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  :is(.font-picker .font-option, .block-type-option, .icon-picker-option,
         .side-nav-item, .mobile-tab, .editor-section.glass, .list-item.glass),
  .field-input:focus,
  .field-textarea:focus,
  .field-select:focus {
    animation: none;
  }

  .bg-style-toggle::before {
    transition: none;
  }
}

/* ==========================================================================
   Mobile: logo menu button + drawer backdrop
   ========================================================================== */
.side-nav-backdrop,
.mobile-menu-btn {
  display: none;
}

@media (max-width: 850px) {
  .side-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  .side-nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .editor-brand {
    gap: 12px;
  }

  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 44px;
    padding: 0;
    flex-shrink: 0;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.25s ease, transform 0.15s ease;
  }

  .mobile-menu-btn:active {
    transform: scale(0.94);
  }
}

/* The Edit / Preview tabs use the sliding pill, not the shimmering ring */
body .mobile-tabs .mobile-tab {
  animation: none;
}

body .mobile-tabs .mobile-tab::before {
  display: none;
}

body .mobile-tabs .mobile-tab.is-active {
  background: transparent;
  box-shadow: none;
}