/* ---------------------------------------------------------------------
   Glass surfaces
--------------------------------------------------------------------- */
.glass {
  background: var(--color-surface);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.card {
  background: var(--color-surface);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  transition: transform var(--duration-med) var(--ease-out), border-color var(--duration-med) var(--ease-out), box-shadow var(--duration-med) var(--ease-out);
}

.card--interactive:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

/* ---------------------------------------------------------------------
   Signature: Split Ring (65% signal / 35% payout — the creator revenue split)
--------------------------------------------------------------------- */
.split-ring {
  --ring-size: 40px;
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;
  background: conic-gradient(
    var(--color-signal) 0deg 234deg,
    var(--color-payout) 234deg 360deg
  );
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.split-ring::after {
  content: '';
  width: 68%;
  height: 68%;
  border-radius: 50%;
  background: var(--color-void);
}

.split-ring--sm { --ring-size: 24px; }
.split-ring--lg { --ring-size: 96px; }

.split-ring--spin {
  animation: split-ring-spin 1.1s linear infinite;
}

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

/* ---------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--gradient-signal);
  color: white;
  box-shadow: var(--shadow-glow-signal);
}
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(124,92,252,0.55), 0 10px 30px rgba(124,92,252,0.35); }

.btn-ghost {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-ink);
}
.btn-ghost:hover { border-color: var(--color-border-strong); background: var(--color-surface-strong); }

/*
 * Bug fix (found 2026-08-09): .btn-secondary was referenced by
 * account/security.php, account/profile.php, and studio/earnings.php but
 * was never actually defined anywhere in this stylesheet. Same root cause
 * as the earlier "missing class=input" contrast bug in this app's admin
 * pages — a button with only the base .btn class (layout/sizing, no
 * color/background) falls back to the browser's native white/light-gray
 * button chrome, while base.css's `button { color: inherit; }` still
 * applies this dark theme's near-white ink color to the label, producing
 * light-on-near-white text that's effectively illegible. Styled here one
 * step more prominent than .btn-ghost (uses the "strong" surface/border
 * tokens as its resting state, not just on hover) so it reads as a real,
 * secondary-but-visible action rather than a duplicate of .btn-ghost.
 */
.btn-secondary {
  background: var(--color-surface-strong);
  border-color: var(--color-border-strong);
  color: var(--color-ink);
}
.btn-secondary:hover { border-color: var(--color-signal); }

.btn-outline {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-ink);
}

.btn-danger {
  background: rgba(255,77,109,0.12);
  border-color: rgba(255,77,109,0.4);
  color: var(--color-edge);
}

.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: var(--text-xs); }

.btn-icon {
  width: 40px; height: 40px;
  padding: 0;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.btn-icon:hover { background: var(--color-surface-strong); }

/* ---------------------------------------------------------------------
   Forms
--------------------------------------------------------------------- */
.field { margin-bottom: var(--space-4); }

.field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--color-ink);
}

.field-hint {
  font-size: var(--text-xs);
  color: var(--color-faint);
  margin-top: var(--space-1);
}

.field-error {
  font-size: var(--text-xs);
  color: var(--color-edge);
  margin-top: var(--space-1);
}

.input {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--color-ink);
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.input::placeholder { color: var(--color-faint); }
/* MPS Phase 9 (Accessibility) — this used to also set `outline: none`,
   which (being more specific than base.css's global `:focus-visible` rule)
   fully suppressed the keyboard focus ring on every text input, textarea,
   and select in the app — the only focus cue left was this border-color
   change, on top of a translucent/glass background. Removing it doesn't
   remove any focus styling; it lets the existing global `:focus-visible`
   outline (base.css) apply again, exactly as it already does for every
   other focusable element on the page. */
.input:focus { border-color: var(--color-signal); background: var(--color-surface-strong); }
.input[aria-invalid='true'] { border-color: var(--color-edge); }

.input-row { display: flex; align-items: center; gap: var(--space-3); }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ---------------------------------------------------------------------
   Badges / alerts
--------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
}

.badge--payout { color: var(--color-payout-strong); border-color: rgba(33,209,159,0.35); }
.badge--live { color: var(--color-edge); border-color: rgba(255,77,109,0.4); }
.badge--live::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-edge);
  animation: pulse-dot 1.4s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.alert {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}
.alert--error { background: rgba(255,77,109,0.08); border-color: rgba(255,77,109,0.3); color: #ffb3c0; }
.alert--success { background: rgba(33,209,159,0.08); border-color: rgba(33,209,159,0.3); color: var(--color-payout-strong); }
.alert--info { background: rgba(124,92,252,0.08); border-color: rgba(124,92,252,0.3); color: var(--color-signal-strong); }

/* ---------------------------------------------------------------------
   Avatar
--------------------------------------------------------------------- */
.avatar {
  border-radius: 50%;
  object-fit: cover;
  background: var(--gradient-signal);
}

/* ---------------------------------------------------------------------
   Empty states
--------------------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-5);
  color: var(--color-muted);
}
.empty-state .split-ring { margin-bottom: var(--space-4); }
/* MPS Phase 9 (Accessibility) — search.php/profile.php's empty-state
   headings were bumped from <h3> to <h2> to fix a broken heading outline
   (both pages skipped straight from <h1> to <h3> with no <h2>), but their
   original, smaller <h3> visual size was intentional design, not an
   accident — this keeps that same size on the now-semantically-correct
   <h2> rather than letting it inherit base.css's larger --text-2xl. */
.empty-state h2 { font-size: var(--text-xl); }