/* ═══════════════════════════════════════════════════════════════════════════
   QRAUZ settings-page chrome  -  v16.77 (2026-08-10)
   ═══════════════════════════════════════════════════════════════════════════
   Shared by the pages the old account.html split into:
     payouts.html  appearance.html  security.html  privacy-settings.html
     account-info.html
   Rogan asked for "an ABSOLUTE REVAMP on account settings, making tons of
   things like payouts, their own page". Five pages each carrying their own
   copy of this CSS is how they drift apart, so it lives here once.

   EXTRACTED VERBATIM from account.html's inline <style>. Every value is the
   one that page already shipped - this is a MOVE, not a redesign. If a page
   looks different from the old Account Settings screen, that is a bug in the
   move, not an improvement.

   ── THEMING, READ BEFORE TOUCHING A COLOUR ────────────────────────────────
   The :root block below is the DARK palette, and it is the "legacy scheme B"
   token set that every non-index page already declares inline. app.css
   redefines exactly these names under html[data-theme="light"] (specificity
   0,1,1 beats :root's 0,1,0), so light mode works here for free and WITHOUT a
   single light value in this file.
   Therefore: never add an html[data-theme="light"] rule here, and never
   "tokenise" a dark hex into a light-looking one. Light repairs belong in
   app.css under its light block, which is the site-wide rule. Changing a value
   here changes DARK, which is shipped and must stay byte-identical.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --background: #23272a;
  --foreground: #2c2f33;
  --header-dark: #1a1c1f;
  --primary-accent: #7289da;
  --secondary-accent: #99aab5;
  --highlight: #ffffff;
  --danger: #f04747;
  --success: #43b581;
  --warning: #faa61a;
}

body { font-family: Inter, Arial, sans-serif; background: var(--background); color: var(--secondary-accent); min-height: 100vh; margin: 0; overflow-x: hidden; }
* { scrollbar-width: thin; scrollbar-color: #3a3d42 #1a1c1f; box-sizing: border-box; }
*::-webkit-scrollbar { width: 6px; } *::-webkit-scrollbar-track { background: #1a1c1f; } *::-webkit-scrollbar-thumb { background: #3a3d42; border-radius: 3px; }

header { background: var(--header-dark); padding: 1.4rem 2.5rem; color: var(--highlight); display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 8px #0005; position: sticky; top: 0; z-index: 10; }
header .logo { font-size: 1.9rem; font-weight: 700; color: var(--primary-accent); letter-spacing: 1px; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; }
header nav { display: flex; gap: 2rem; }
header nav a { color: var(--highlight); text-decoration: none; padding: 0.55rem 1.15rem; border-radius: 6px; font-weight: 500; font-size: 0.97rem; transition: background 0.18s; }
header nav a:hover { background: var(--primary-accent); color: var(--background); }

/* min-width:0 is load-bearing, not tidying. body is a flex COLUMN, and a flex
   item's default min-width:auto refuses to shrink below its content - which is
   the bug class that made the calendar (v16.72) and admin (v16.73) scroll
   sideways on a phone. Any wide child here (a long user id, a code block) would
   do the same without it. */
main { max-width: 1200px; width: 100%; min-width: 0; margin: 2.5rem auto; padding: 0 1rem 3rem; }

.page-title { color: var(--highlight); font-size: 2rem; margin-bottom: 0.5rem; }
.page-subtitle { color: var(--secondary-accent); margin-bottom: 2rem; }
.settings-section { background: var(--foreground); border-radius: 16px; padding: 2rem; margin-bottom: 1.5rem; box-shadow: 0 4px 18px #0003; }
.settings-section h2 { color: var(--highlight); margin: 0 0 1.5rem 0; font-size: 1.4rem; display: flex; align-items: center; gap: 0.5rem; }
.setting-row { padding: 1rem 0; border-bottom: 1px solid #1a1c1f; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.setting-row:last-child { border-bottom: none; }
.setting-info { flex: 1; min-width: 0; }
.setting-label { color: var(--highlight); font-weight: 600; font-size: 1rem; margin-bottom: 0.25rem; }
.setting-description { color: var(--secondary-accent); font-size: 0.85rem; line-height: 1.4; }

.btn { padding: 0.5rem 1.2rem; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; font-size: 0.95rem; transition: filter 0.15s; }
.btn-primary { background: var(--primary-accent); color: white; } .btn-primary:hover { filter: brightness(1.13); }
.btn-secondary { background: #202225; color: var(--primary-accent); border: 1px solid #444; } .btn-secondary:hover { background: #2a2d31; }
.btn-danger { background: var(--danger); color: white; } .btn-danger:hover { filter: brightness(1.13); }
.badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; }
.badge-verified { background: var(--success); color: white; }
.badge-unverified { background: var(--warning); color: white; }

.toggle-switch { position: relative; width: 50px; height: 26px; background: #202225; border-radius: 26px; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
.toggle-switch.active { background: var(--primary-accent); }
.toggle-switch::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: white; top: 3px; left: 3px; transition: left 0.2s; }
.toggle-switch.active::after { left: 27px; }

.danger-zone { border: 2px solid var(--danger); border-radius: 16px; padding: 2rem; background: rgba(240,71,71,0.05); }
.danger-zone h2 { color: var(--danger); margin: 0 0 1.5rem 0; font-size: 1.4rem; }

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.75); z-index: 1000; align-items: center; justify-content: center; }
.modal.show { display: flex; }
.modal-box { background: var(--foreground); border-radius: 16px; padding: 2rem; max-width: 460px; width: 92%; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.modal-box h2 { margin: 0 0 0.75rem; color: var(--highlight); font-size: 1.3rem; }
.modal-box p { color: var(--secondary-accent); margin: 0 0 1.25rem; line-height: 1.5; font-size: 0.95rem; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; color: var(--secondary-accent); margin-bottom: 0.5rem; font-size: 0.9rem; font-weight: 600; }
.form-group input { width: 100%; background: #202225; color: var(--highlight); border: 1px solid #333; border-radius: 8px; padding: 0.75rem; font-size: 1rem; outline: none; }
.form-group input:focus { border-color: var(--primary-accent); }
.modal-err { color: var(--danger); font-size: 0.88rem; min-height: 1.1em; margin: 0.35rem 0 0.5rem; }
.modal-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.modal-actions .btn { flex: 1; padding: 0.7rem; }

.alert { position: fixed; top: 20px; right: 20px; padding: 1rem 1.5rem; border-radius: 8px; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 2000; opacity: 0; transform: translateX(110px); transition: all 0.3s ease; max-width: 380px; }
.alert.show { opacity: 1; transform: translateX(0); }
.alert-success { background: var(--success); color: white; }
.alert-error { background: var(--danger); color: white; }
.loading { text-align: center; padding: 3rem; color: var(--secondary-accent); font-size: 1.1rem; }

footer { background: var(--header-dark); color: var(--secondary-accent); text-align: center; padding: 2rem 0; margin-top: 3rem; font-size: 0.9rem; }
footer a { color: var(--primary-accent); text-decoration: none; }

/* Sticky footer */
html { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
footer { margin-top: auto; }

/* ── Back link to the settings hub (v16.77, new) ──────────────────────────
   Every one of these pages is reached FROM settings.html, so each needs a way
   back. Same shape as the .set-back control on settings.html itself. */
.set-crumb { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--secondary-accent); text-decoration: none; font-size: 0.92rem; font-weight: 600; margin-bottom: 1.1rem; padding: 0.35rem 0.6rem 0.35rem 0.35rem; border-radius: 8px; }
.set-crumb:hover { background: rgba(114,137,218,0.12); color: var(--primary-accent); }

/* ── Explainer / timeline block (v16.77, new) ─────────────────────────────
   Used by payouts.html to answer "when do I actually get paid". Deliberately
   plain: numbered steps on a rule, no icons, no colour coding beyond the
   accent dot, so it reads as information rather than marketing. */
.q-steps { list-style: none; margin: 0; padding: 0; }
.q-step { position: relative; padding: 0 0 1.25rem 1.75rem; border-left: 2px solid #1a1c1f; }
.q-step:last-child { padding-bottom: 0; border-left-color: transparent; }
.q-step::before { content: ''; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary-accent); }
.q-step-title { color: var(--highlight); font-weight: 600; font-size: 0.98rem; margin-bottom: 0.2rem; }
.q-step-body { color: var(--secondary-accent); font-size: 0.87rem; line-height: 1.5; }
.q-note { background: rgba(114,137,218,0.10); border: 1px solid rgba(114,137,218,0.35); border-radius: 10px; padding: 0.85rem 1rem; color: var(--secondary-accent); font-size: 0.87rem; line-height: 1.5; margin-top: 1.25rem; }
.q-note strong { color: var(--highlight); }

/* ── Choice list (v16.77, new) - appearance.html theme picker ─────────────
   A radio group that looks like the site's existing selectable chips rather
   than native radios, which cannot be themed consistently across browsers. */
.q-choices { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.q-choice { display: inline-flex; align-items: center; gap: 0.5rem; background: #202225; color: var(--secondary-accent); border: 2px solid transparent; border-radius: 10px; padding: 0.6rem 1rem; cursor: pointer; font-weight: 600; font-size: 0.92rem; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.q-choice:hover { background: #2a2d31; }
.q-choice.selected { border-color: var(--primary-accent); color: var(--highlight); background: rgba(114,137,218,0.15); }
.q-choice input { position: absolute; opacity: 0; pointer-events: none; }

/* ── Mobile ── */
@media (max-width: 768px) {
  header .logo { font-size: 1.7rem; }
  header nav { gap: 0.35rem; flex-wrap: wrap; }
  header nav a { padding: 0.4rem 0.7rem; font-size: 0.85rem; }
  main { padding-left: 1rem; padding-right: 1rem; margin-top: 1.5rem; }
  .settings-section, .danger-zone { padding: 1.25rem; }

  /* Setting rows: stack label above control, full-width buttons */
  .setting-row { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .setting-row .btn { width: 100%; text-align: center; justify-content: center; }
  .setting-row > div[style*="display:flex"] { width: 100%; justify-content: space-between; }

  /* Toggle sits on right when stacked */
  .setting-row .toggle-switch { align-self: flex-end; margin-top: -2.2rem; }

  /* Modal full-width on mobile */
  .modal-box { padding: 1.5rem; width: 95%; max-width: 100%; }
  .modal-actions { flex-direction: column; }
  .modal-actions .btn { width: 100%; justify-content: center; }

  /* Email code digits smaller on mobile */
  #emailCodeGroup input { width: 38px; height: 46px; font-size: 1.3rem; }

  .page-title { font-size: 1.5rem; }
  .page-subtitle { font-size: 0.88rem; }
  footer { padding: 1.5rem 1rem; font-size: 0.85rem; }
}
@media (max-width: 480px) {
  header .logo { font-size: 1.5rem; }
  header nav a { font-size: 0.78rem; padding: 0.3rem 0.5rem; }
  main { padding-left: 0.75rem; padding-right: 0.75rem; }
  h1 { font-size: 1.35rem; }
  .modal-box { padding: 1.25rem; }

  /* Stack the badge+button row on very small screens */
  .setting-row > div[style*="display:flex"] { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .setting-row .toggle-switch { align-self: flex-start; margin-top: 0; }

  #emailCodeGroup input { width: 34px; height: 42px; font-size: 1.15rem; }
}

/* ── Hamburger (mobile only) ── */
.hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; flex-shrink: 0; }
.hamburger span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: all 0.25s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  header { padding: 0.85rem 1.1rem !important; flex-wrap: nowrap !important; position: relative; }
  header .logo { font-size: 1.55rem !important; flex-shrink: 0; }
  .hamburger { display: flex; }
  header nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1a1c1f;
    flex-direction: column;
    gap: 0 !important;
    padding: 0.5rem 0;
    box-shadow: 0 4px 12px #0006;
    z-index: 100;
  }
  header nav.open { display: flex; }
  header nav a { padding: 0.75rem 1.25rem !important; border-radius: 0 !important; font-size: 0.97rem !important; border-bottom: 1px solid rgba(255,255,255,0.05); display: block; }
  header nav a:last-child { border-bottom: none; }
  #authContainer { flex-shrink: 0; }
}
@media (max-width: 480px) {
  header .logo { font-size: 1.35rem !important; }
}

/* ── REDUCED MOTION (v16.77) ──────────────────────────────────────────────
   Set by appearance.html, stored per-device in localStorage and stamped onto
   <html> pre-paint by the theme bootstrap. Kills the decorative movement only:
   the card hover lift, the image fade-in and the skeleton pulse. It never hides
   anything and never changes a layout, so a page is identical apart from
   getting there instantly.
   Scoped to the attribute so a user who has not opted in is completely
   unaffected - this cannot match unless data-reduce-motion="1" is present. */
html[data-reduce-motion="1"] *,
html[data-reduce-motion="1"] *::before,
html[data-reduce-motion="1"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}