/* Design tokens + base rules shared by the account/auth/pricing pages, copied verbatim
   from index.html's own <style> block so these pages match the live design system
   exactly without touching index.html itself (its redesign is being worked on
   separately). Keep this file in sync if those tokens change there. */

/* The browser's own default stylesheet hides [hidden] elements via
   `[hidden] { display: none }`, but that's a user-agent rule -- any
   author rule that sets `display` on the same element (e.g. `.foo {
   display: flex }`) wins the cascade regardless of source order, since
   author styles always beat user-agent styles. Confirmed as a real,
   previously-live bug: .myflow-progress-wrap/.myflow-actions/
   .lc-rescan-note all set `display: flex|grid` directly and stayed
   visible even with `hidden` set via JS. This single override restores
   the attribute's actual meaning everywhere, instead of hunting down
   every current and future class that happens to set `display`.*/
[hidden] { display: none !important; }
:root {
  --bg: #080d12;
  --surface: #0d151e;
  --surface-2: #101923;
  --border: rgba(140, 170, 210, 0.16);
  --border-strong: rgba(140, 170, 210, 0.28);
  --text: #ffffff;
  --muted: #aab4c0;
  --accent: #7c3cff;
  --accent-soft: rgba(124, 60, 255, 0.16);
  --accent-glow: rgba(124, 60, 255, 0.4);
  --accent-text: #ffffff;
  --radius: 14px;
}
* { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  justify-content: center;
  padding: 56px 20px;
}
/* Site-wide shell: wide, so the header/menu spans the page on desktop. Each page
   says how wide its own content should be with --content-max (default 640px);
   anything directly inside .app is centered at that width, except the nav, which
   always takes the full shell. Phones just get 100% -- max-width only caps. */
.app {
  width: 100%;
  max-width: 1320px;
  --content-max: 100%;
}
.app > :where(:not(.sf-nav):not(script):not(style)) {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}
a { color: var(--accent); }

.sf-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.sf-heading {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  text-align: center;
}
.sf-subtitle {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  margin: 0 0 32px;
}
.sf-field { margin-bottom: 16px; }
.sf-field label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 600;
}
.sf-field input {
  width: 100%;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sf-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.sf-btn-primary {
  display: block;
  width: 100%;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: 999px;
  padding: 14px;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  margin-top: 8px;
}
.sf-btn-primary:disabled { opacity: 0.6; cursor: default; }
.sf-btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: #ffffff;
  color: #1f1f1f;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 12px;
  font-weight: 600;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.sf-btn-google:hover { background: #f2f2f2; }
.sf-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 18px 0;
}
.sf-divider::before, .sf-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-strong);
}
.sf-form-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 0.85rem;
  color: var(--muted);
}
.sf-error {
  color: #ff9b9b;
  background: rgba(255, 107, 107, 0.08);
  border: 1px solid rgba(255, 107, 107, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.85rem;
  margin-bottom: 16px;
  display: none;
}
.sf-error.visible { display: block; }
.sf-success {
  color: #9be8b8;
  background: rgba(59, 217, 133, 0.08);
  border: 1px solid rgba(59, 217, 133, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.85rem;
  margin-bottom: 16px;
  display: none;
}
.sf-success.visible { display: block; }

/* Rekordbox upload widget (assets/rekordbox-upload.js) -- shared by every
   page that uploads master.db (my-set-flow.html, library-cleanup.html),
   so the steps/dropzone/progress-bar/status look and behave identically
   everywhere instead of drifting per page. */
.myflow-file-status { margin-top: 16px; font-size: 0.85rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.myflow-file-status.status-success { color: var(--accent); font-weight: 700; }
.myflow-file-status.status-error { color: #ff6b6b; font-weight: 700; }
.myflow-status-icon { flex-shrink: 0; }
.myflow-spinner {
  width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border-strong); border-top-color: var(--accent);
  animation: myflow-spin 0.7s linear infinite;
}
@keyframes myflow-spin { to { transform: rotate(360deg); } }

.myflow-progress-wrap { margin-top: 16px; display: flex; align-items: center; gap: 10px; }
.myflow-progress-track {
  flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border-strong); overflow: hidden;
}
.myflow-progress-bar {
  height: 100%; width: 0%; background: var(--accent); border-radius: 999px;
  transition: width 0.15s ease-out;
}
.myflow-progress-pct { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; width: 36px; text-align: right; flex-shrink: 0; }

.myflow-note { color: var(--muted); font-size: 0.82rem; margin: -8px 0 16px; }
.myflow-steps { list-style: none; counter-reset: myflow-step; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.myflow-steps li {
  counter-increment: myflow-step;
  position: relative;
  padding: 16px 16px 16px 52px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 0.9rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.myflow-steps li::before {
  content: counter(myflow-step);
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent); color: var(--accent-text);
  font-size: 0.85rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.myflow-steps code {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 1px 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text);
}
.myflow-steps kbd {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 4px;
  padding: 1px 5px; font-family: inherit; font-size: 0.9em;
}
.myflow-step-goto-hint { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 3px; font-weight: 400; }
.myflow-step-clickable {
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.myflow-step-clickable:hover { border-color: var(--accent); background: var(--accent-soft); }
.myflow-step-btn {
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
  border-radius: 999px; padding: 8px 16px; font-family: inherit; font-weight: 600;
  font-size: 0.82rem; cursor: pointer; white-space: nowrap;
}
.myflow-step-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.myflow-step-btn-primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

.myflow-dropzone {
  margin-top: 8px;
  padding: 28px 16px;
  text-align: center;
  background: var(--surface-2);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  transition: border-color 0.15s, background 0.15s;
}
.myflow-dropzone.drag-active { border-color: var(--accent); background: var(--accent-soft); }
.myflow-dropzone-icon { font-size: 1.6rem; margin-bottom: 8px; }
.myflow-dropzone code {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 1px 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text);
}

/* ---- Terminal scan panel (shared: Clean My Unused Tracks, Analyze Your Rekordbox) ---- */
.sf-blurb { color: var(--muted); font-size: 0.9rem; line-height: 1.5; margin: 0 0 18px; }
.sf-hint { color: var(--muted); font-size: 0.78rem; text-align: center; margin: 10px 0 0; }
.sf-hint-inline { color: var(--muted); font-size: 0.8rem; }
.sf-big-btn {
  display: block; width: 100%; background: var(--accent); color: var(--accent-text); border: none;
  border-radius: 999px; padding: 16px; font-weight: 700; font-size: 1rem; font-family: inherit; cursor: pointer;
}
.sf-big-btn:disabled { opacity: 0.6; cursor: default; }
.sf-ghost-btn {
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
  border-radius: 999px; padding: 7px 14px; font-family: inherit; font-weight: 600;
  font-size: 0.78rem; cursor: pointer; white-space: nowrap;
}
.sf-ghost-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.sf-manual { margin-top: 18px; font-size: 0.85rem; }
.sf-manual summary { color: var(--muted); cursor: pointer; font-size: 0.8rem; }
.sf-manual summary:hover { color: var(--text); }
.sf-manual[open] summary { margin-bottom: 12px; }
.sf-copied-title { color: var(--accent); font-weight: 700; margin-bottom: 8px; }
.sf-paste-steps { margin: 0 0 12px; padding-left: 20px; line-height: 1.8; font-size: 0.92rem; }
.sf-paste-steps kbd, .sf-hint-inline kbd {
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 5px;
  padding: 1px 6px; font-size: 0.8rem; font-family: inherit;
}
.sf-wait-status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.85rem; margin-bottom: 12px; }
.sf-wait-actions { display: flex; gap: 8px; }
.sf-scan-compact-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: var(--muted); font-size: 0.82rem; flex-wrap: wrap;
}

/* Sign-in / sign-up forms stay a compact centered card inside the wide shell. */
.app > .sf-card.sf-auth-card { max-width: 460px; }

/* SetFlow Helper setup bar */
.sf-helper {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: rgba(41, 140, 255, 0.12); border: 1px solid #298cff; border-radius: 12px;
  padding: 12px 16px; margin: 0 0 16px; color: var(--muted); font-size: 0.88rem; line-height: 1.5;
}
.sf-helper.on { display: inline-flex; gap: 8px; background: rgba(88, 214, 141, 0.10); border-color: #58d68d; border-radius: 999px; padding: 3px 4px 3px 12px; margin: 0 0 10px; font-size: 0.74rem; line-height: 1.2; }
.sf-helper-btn {
  background: #298cff; color: #fff; border: none; border-radius: 999px; padding: 9px 18px;
  font-family: inherit; font-weight: 700; font-size: 0.85rem; cursor: pointer; white-space: nowrap;
}
.sf-helper-btn:hover { background: #1f7ae8; }
.sf-helper.on .sf-helper-btn { background: transparent; color: var(--muted); border: none; font-weight: 500; font-size: 0.7rem; padding: 3px 8px; text-decoration: underline; }
.sf-helper strong { color: var(--text); }
.sf-helper kbd { background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 5px; padding: 0 5px; font-family: inherit; }