/* NEVER CHANGE UNLESS MADE TO CHANGE */
/* ═══════════════════════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* NEVER CHANGE UNLESS MADE TO CHANGE */
body { font-family: Inter, Arial, sans-serif; background: var(--background); color: var(--secondary-accent); min-height: 100vh; margin: 0; overflow-x: hidden; }
/* NEVER CHANGE UNLESS MADE TO CHANGE */
* { 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; }

/* NEVER CHANGE UNLESS MADE TO CHANGE */
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); }

/* NEVER CHANGE UNLESS MADE TO CHANGE */
/* 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; }

/* NEVER CHANGE UNLESS MADE TO CHANGE */
.page-title { color: var(--highlight); font-size: 2rem; margin-bottom: 0.5rem; }
/* NEVER CHANGE UNLESS MADE TO CHANGE */
.page-subtitle { color: var(--secondary-accent); margin-bottom: 2rem; }
/* NEVER CHANGE UNLESS MADE TO CHANGE */
.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; }
/* NEVER CHANGE UNLESS MADE TO CHANGE */
.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; }
/* NEVER CHANGE UNLESS MADE TO CHANGE */
.setting-info { flex: 1; min-width: 0; }
/* NEVER CHANGE UNLESS MADE TO CHANGE */
.setting-label { color: var(--highlight); font-weight: 600; font-size: 1rem; margin-bottom: 0.25rem; }
/* NEVER CHANGE UNLESS MADE TO CHANGE */
.setting-description { color: var(--secondary-accent); font-size: 0.85rem; line-height: 1.4; }

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

/* NEVER CHANGE UNLESS MADE TO CHANGE */
.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; }

/* NEVER CHANGE UNLESS MADE TO CHANGE */
.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; }

/* NEVER CHANGE UNLESS MADE TO CHANGE */
.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; }
/* NEVER CHANGE UNLESS MADE TO CHANGE */
.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; }
/* NEVER CHANGE UNLESS MADE TO CHANGE */
.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); }
/* NEVER CHANGE UNLESS MADE TO CHANGE */
.modal-err { color: var(--danger); font-size: 0.88rem; min-height: 1.1em; margin: 0.35rem 0 0.5rem; }
/* NEVER CHANGE UNLESS MADE TO CHANGE */
.modal-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.modal-actions .btn { flex: 1; padding: 0.7rem; }

/* NEVER CHANGE UNLESS MADE TO CHANGE */
.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); }
/* NEVER CHANGE UNLESS MADE TO CHANGE */
.alert-success { background: var(--success); color: white; }
/* NEVER CHANGE UNLESS MADE TO CHANGE */
.alert-error { background: var(--danger); color: white; }
/* NEVER CHANGE UNLESS MADE TO CHANGE */
.loading { text-align: center; padding: 3rem; color: var(--secondary-accent); font-size: 1.1rem; }

/* NEVER CHANGE UNLESS MADE TO CHANGE */
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; }

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

/* NEVER CHANGE UNLESS MADE TO CHANGE */
/* ── 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); }

/* NEVER CHANGE UNLESS MADE TO CHANGE */
/* ── 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; }
/* NEVER CHANGE UNLESS MADE TO CHANGE */
.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); }
/* NEVER CHANGE UNLESS MADE TO CHANGE */
.q-step-title { color: var(--highlight); font-weight: 600; font-size: 0.98rem; margin-bottom: 0.2rem; }
/* NEVER CHANGE UNLESS MADE TO CHANGE */
.q-step-body { color: var(--secondary-accent); font-size: 0.87rem; line-height: 1.5; }
/* NEVER CHANGE UNLESS MADE TO CHANGE */
.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); }

/* NEVER CHANGE UNLESS MADE TO CHANGE */
/* ── 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; }
/* NEVER CHANGE UNLESS MADE TO CHANGE */
.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; }

/* NEVER CHANGE UNLESS MADE TO CHANGE */
/* ── 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; }
}
/* NEVER CHANGE UNLESS MADE TO CHANGE */
@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; }
}

/* NEVER CHANGE UNLESS MADE TO CHANGE */
/* ── A SECOND, OLDER HAMBURGER LIVED HERE - REMOVED v16.92 (2026-08-25) ────
   Rogan, 2026-08-25: "Hamburger menu still exists in the background.
   Eradicate it." This file carried a whole separate mobile menu from before
   the settings split: a `.hamburger` button of three <span> bars that
   animated into an X, and an `header nav.open` dropdown panel it revealed.
   IT WAS ALREADY DEAD, WHICH IS WHY IT SURVIVED SO LONG. No page has ever
   shipped `class="hamburger"` markup and no script anywhere adds `.open` to a
   nav - checked across all 42 pages and every module - so the button could
   not render and the panel could not open. The five pages that load this file
   (account-info, appearance, payouts, privacy-settings, security) get their
   real mobile header from css/app.css, which they all also load and which
   already sets `header nav{display:none !important}` at this breakpoint.
   Deleting it changes nothing on screen; keeping it left a third navigation
   system lying in the stylesheet for the next reader to trip over. */
@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; }
  #authContainer { flex-shrink: 0; }
}
/* NEVER CHANGE UNLESS MADE TO CHANGE */
@media (max-width: 480px) {
  header .logo { font-size: 1.35rem !important; }
}

/* NEVER CHANGE UNLESS MADE TO CHANGE */
/* ── 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;
}