@font-face { font-family: 'Poppins'; font-weight: 300; font-display: swap; src: url(/fonts/Poppins-latin-cd53be.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url(/fonts/Poppins-latin-f8670f.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url(/fonts/Poppins-latin-2b0817.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 400 700; font-display: swap; src: url(/fonts/OpenSans-latin-2808bc.woff2) format('woff2'); }

/* Design tokens mirrored from the FlutterFlow theme (FlutterFlowTheme + FFAppConstants).
   The app ships a single dark palette, so there is no light/dark switch here. */
:root {
  --cta-gradient: linear-gradient(30deg, #F15081 0%, #69BCFF 100%);
  /* Brand */
  --primary: #F15081;
  --secondary: #50AAFF;
  --tertiary: #A07DC0;

  /* Text */
  --primary-text: #E1E1E1;
  --secondary-text: #FFFFFF;

  /* Backgrounds */
  --primary-background: #212121;
  --secondary-background: #000000;

  /* Accents (neutral greys, dark to light) */
  --accent-1: #444444;
  --accent-2: #888888;
  --accent-3: #AAAAAA;
  --accent-4: #CCCCCC;

  /* Two-answer questions */
  --answer-a: #A07DC0;
  --answer-b: #FFA280;

  /* Shape */
  --radius: 10px;          /* appRadius10, the general radius */
  --radius-pill: 50px;     /* appRadius50, answer buttons */
  --border: 1.5px;         /* appBorder */

  /* Spacing */
  --pad-5: 5px;
  --pad-10: 10px;
  --pad-15: 15px;
  --pad-30: 30px;

  /* Sizes */
  --button-l: 45px;        /* appButtonL45 */
  --button-s: 25px;        /* appButtonS25 */
  --icon-l: 25px;
  --icon-s: 15px;

  /* Unanswered card gradient: FF angle 210, Answer A bottom-left to Answer B top-right, stops 25/75 */
  --gradient-angle: 40deg;

  /* Type */
  --font-body: 'Open Sans', system-ui, sans-serif;
  --font-headline: 'Poppins', system-ui, sans-serif;
}


html { min-height: 100%; background: var(--primary-background); color: var(--primary-text); font: 15px var(--font-body) }
body { max-width: 560px; margin: 0 auto; padding: 0 16px 40px }
html { overflow-x: clip }
/* Admin bar: every admin page, then sign out. Full width, flush to the top of the window; scrolls sideways on phones. */
.pagebar { position: sticky; top: 0; z-index: 100; display: flex; gap: 4px; justify-content: safe center; overflow-x: auto; scrollbar-width: none; white-space: nowrap; margin: 0 calc(50% - 50vw) 30px; padding: 12px 16px; border-bottom: 1px solid var(--accent-1); background: var(--secondary-background) }
.pagebar a { color: var(--accent-3); padding: 4px 16px; border-radius: 9999px; font: 600 12px var(--font-body) }
.pagebar a:hover, .pagebar a:focus-visible { color: var(--secondary-text); outline: none }
.pagebar a[aria-current="page"] { background: var(--accent-1); color: var(--secondary-text) }
a { color: var(--secondary); text-decoration: none }
h1 { margin: 16px 0 30px; font: 300 40px/1 var(--font-headline); text-transform: uppercase; color: var(--secondary-text) }
label { display: block; margin: 20px 0 6px; font-weight: 600; color: var(--accent-4) }
select, input { width: 100%; box-sizing: border-box; height: var(--button-l); padding: 0 var(--pad-15); font: inherit; color: var(--secondary-text); background: var(--secondary-background); border: var(--border) solid var(--accent-1); border-radius: var(--radius) }
select:focus, input:focus { outline: 0; border-color: var(--primary) }
.btn { display: block; width: 100%; height: 39px; margin-top: var(--pad-15); border: 0; border-radius: 100px; background: var(--cta-gradient); color: var(--secondary-text); font: 600 15px/1 var(--font-body); text-transform: uppercase; cursor: pointer }
.out { margin-top: 30px; padding: var(--pad-15); background: var(--secondary-background); border-radius: var(--radius); word-break: break-all; color: var(--secondary-text); min-height: 1.5em }
.menu a { display: block; padding: var(--pad-15); margin-bottom: var(--pad-10); background: var(--secondary-background); border-radius: var(--radius); color: var(--secondary-text); font-weight: 600 }
select { appearance: none; padding-right: 44px; background: var(--secondary-background) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23AAAAAA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 18px center }
/* Sign-out sits in the admin bar as a link. */
.pagebar form { margin: 0 0 0 auto }
.pagebar button { background: none; border: 0; padding: 4px 16px; color: var(--accent-3); font: 600 12px var(--font-body); cursor: pointer }
.pagebar button:hover, .pagebar button:focus-visible { color: var(--secondary-text); outline: none }