/* YVid — shared styles */

:root {
  color-scheme: light;

  /* Cream paper, white cards, purple ink. Surfaces are deliberately a little
     translucent so the floral backdrop reads through them instead of being
     boxed out by every panel. */
  --bg: #faf6f0;
  --bg-raised: rgba(255, 255, 255, 0.82);
  --surface: rgba(255, 255, 255, 0.9);
  --surface-2: #f2ecfb;
  --line: #e4dcf2;
  --line-soft: #efe9f7;

  --text: #221b2e;
  --text-dim: #6a5f7d;
  --text-faint: #9a90ac;

  --accent: #7c5cff;
  --accent-2: #6b4bd8;          /* links need contrast on cream, not cyan */
  --accent-soft: rgba(124, 92, 255, 0.12);
  --good: #1f9d63;
  --warn: #b8730a;
  --danger: #d33b3b;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 18px 44px rgba(74, 47, 174, 0.16);

  /* The video area stays dark on purpose — letterbox bars and unlit camera
     footage both look wrong against cream, and every other recorder keeps the
     stage dark for the same reason. Tinted plum rather than pure black so it
     still belongs to the brand. */
  --stage: #1b1430;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/**
 * Brand backdrop.
 *
 * Fixed and behind everything, so it never scrolls away or intercepts a click.
 * The soft radial washes sit under the artwork to bed it into the cream rather
 * than leaving it floating on a flat field.
 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 700px at 8% -12%, rgba(124, 92, 255, 0.13), transparent 62%),
    radial-gradient(900px 620px at 104% 6%, rgba(160, 122, 255, 0.11), transparent 62%),
    radial-gradient(1000px 760px at 46% 118%, rgba(124, 92, 255, 0.10), transparent 62%),
    url('/img/bloom.svg') center / cover no-repeat,
    var(--bg);
}

@media (prefers-reduced-motion: no-preference) {
  body::before { transition: opacity 0.4s ease; }
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -0.02em; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ brand */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.03em;
  color: var(--text);
}
.brand:hover { text-decoration: none; }

.brand-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  flex: none;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.08s, opacity 0.15s;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: #ede6f9; border-color: #d6c9ee; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), #6b4ff0);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 20px rgba(124, 92, 255, 0.28);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #8a6dff, #7a5ff5);
  border-color: transparent;
}

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover:not(:disabled) { background: var(--surface); color: var(--text); border-color: transparent; }

.btn-danger { background: rgba(211, 59, 59, 0.10); border-color: rgba(211, 59, 59, 0.32); color: #b32a2a; }
.btn-danger:hover:not(:disabled) { background: rgba(211, 59, 59, 0.18); border-color: rgba(211, 59, 59, 0.5); }

.btn-lg { padding: 13px 26px; font-size: 16px; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }

/* ----------------------------------------------------------------- inputs */

.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text-dim);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

input[type="text"], input[type="email"], input[type="password"], select {
  width: 100%;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  backdrop-filter: blur(10px);
  color: var(--text);
  font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder { color: var(--text-faint); }

input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 20px;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 99px; background: var(--line);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  margin-top: -6px;
  box-shadow: 0 1px 6px rgba(74, 47, 174, 0.22);
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 99px; background: var(--line); }
input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
}

.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; }
.switch > span { font-size: 13.5px; color: var(--text); }
.switch input { appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 38px; height: 21px; border-radius: 99px; background: var(--line);
  position: relative; cursor: pointer; transition: background 0.18s; border: none; padding: 0; }
.switch input::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 15px; height: 15px; border-radius: 50%; background: #fff;
  transition: transform 0.18s;
}
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(17px); }
.switch input:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ------------------------------------------------------------------ misc */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 550;
  border: 1px solid var(--line);
  color: var(--text-dim);
  background: var(--surface);
}
.pill-good { color: var(--good); border-color: rgba(61, 220, 151, 0.35); background: rgba(61, 220, 151, 0.08); }
.pill-warn { color: var(--warn); border-color: rgba(255, 180, 84, 0.35); background: rgba(255, 180, 84, 0.08); }
.pill-accent { color: #b9a5ff; border-color: rgba(124, 92, 255, 0.4); background: var(--accent-soft); }

.notice {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 13.5px;
  color: var(--text-dim);
}
.notice-warn { border-color: rgba(184, 115, 10, 0.32); background: rgba(255, 180, 84, 0.14); color: #7a4c05; }
.notice-error { border-color: rgba(211, 59, 59, 0.32); background: rgba(211, 59, 59, 0.10); color: #8f2323; }
.notice-good { border-color: rgba(31, 157, 99, 0.32); background: rgba(31, 157, 99, 0.10); color: #135f3c; }
.notice:empty { display: none; }

/* ----------------------------------------------------------------- modal */

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(4, 5, 9, 0.78);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  padding: 20px;
  z-index: 100;
}
.modal-backdrop[hidden] { display: none; }

.modal {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal h2 { font-size: 21px; margin-bottom: 6px; }
.modal .modal-sub { color: var(--text-dim); font-size: 14px; margin: 0 0 20px; }

.tabs { display: flex; gap: 4px; background: var(--bg-raised);
  backdrop-filter: blur(10px); padding: 4px; border-radius: var(--radius-sm); margin-bottom: 20px; }
.tabs button {
  flex: 1; padding: 8px; border: none; border-radius: 6px;
  background: transparent; color: var(--text-dim);
  font: inherit; font-weight: 550; font-size: 13.5px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tabs button[aria-selected="true"] { background: var(--surface-2); color: var(--text); }

.spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}