/* The light theme (Jin 2026-10-21: "Let's revert to a light theme. And test different offers on a light
   theme instead of the dark theme."). Loaded after landing.css, and only by a landing page whose JSON sets
   landing.theme "light" (seo.py) or a legal page whose JSON sets theme "light" (build.py; Jin 2026-10-21: "and
   terms and privacy light as well"), so every other page keeps the dark tile palette. The brand's own colours
   stay: navy ink #081944's family for text, the mark's blue to pink for accents; the ground turns warm
   white. Contrast, measured on #F6F7FB: --text 16.9:1, --text-2 7.3:1, --accent-text 5.8:1,
   --blue-text 5.5:1; the platform words 4.8 to 5.9:1; white on --accent 4.9:1. */

:root {
  --ground: #F6F7FB;
  --ground-deep: #ECEFF6;
  --surface: #FFFFFF;
  --surface-2: #F1F3F9;
  --line: rgba(11, 20, 51, 0.12);
  --text: #0B1433;
  --text-2: #4A5170;
  --accent: #AC508F;
  --accent-text: #9A3F7E;
  --glow-blue: #4976B1;
  --blue-text: #3E64A4;
  --glass: linear-gradient(180deg, #FFFFFF, #FCFCFE);
  --glass-line: rgba(11, 20, 51, 0.10);
  --grad: linear-gradient(90deg, #3E64A4, #A3478A 50%, #3E64A4);
  color-scheme: light;
}

body {
  background:
    radial-gradient(1200px 700px at 100% -10%, rgba(172, 80, 143, 0.10), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(73, 118, 177, 0.10), transparent 60%),
    var(--ground);
}
.glass { box-shadow: 0 1px 2px rgba(11, 20, 51, 0.04), 0 24px 60px -36px rgba(11, 20, 51, 0.28); }

/* The header stays dark, the neon wordmark on navy (Jin 2026-10-21: "the logo looks weird on the light
   background, so I think it's okay if we keep the header/nav bar as dark theme but rest as light"); near
   opaque, so the light page under it does not wash it out. Then the buttons */
.nav { background: rgba(10, 18, 51, 0.96); border-bottom-color: rgba(255, 255, 255, 0.08); }
.btn-ghost { background: rgba(11, 20, 51, 0.03); border-color: rgba(11, 20, 51, 0.18); }
.tile { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }

/* The hero: the desk photograph kept (Jin 2026-10-21: "we should still add the background image in the
   hero"), since v21 its daylight version at full strength, under a soft wash behind the headline only, so
   the words read and the desk still shows; the platform words in deeper tones, so each reads on white */
.hero-shade { background: radial-gradient(60% 46% at 50% 30%, rgba(246, 247, 251, 0.82), rgba(246, 247, 251, 0.45) 70%, rgba(246, 247, 251, 0.1)); }
.mesh { opacity: 0.45; }
.rot-w[data-pl="whatnot"] { color: #7A5C00; }
.rot-w[data-pl="tiktok shop"] { color: #00777B; }
.rot-w[data-pl="commentsold"] { color: #3F55C9; }
.rot-w[data-pl="live selling"] { color: #B4501E; }
.rot-wrap[data-pl="tiktok shop"] .rot-ul { color: #19C3BE; }
.rot-wrap[data-pl="live selling"] .rot-ul { color: #F08A52; }
.hero-offer { background: linear-gradient(#0B1433, #0B1433) padding-box, linear-gradient(90deg, #6E9BE0, #E58AC4) border-box;
  box-shadow: 0 10px 26px -12px rgba(11, 20, 51, 0.45); }

/* Icon tiles: the mark's tint behind a deep icon, not a pale icon on a pale tile */
.tile { color: #9A3F7E; background: linear-gradient(145deg, rgba(73, 118, 177, 0.14), rgba(172, 80, 143, 0.14));
  border-color: rgba(172, 80, 143, 0.25); }

/* The sample dashboard: its tags and outcome pills in deep tones, each 4.5:1 or more */
.sd-dots i { background: rgba(11, 20, 51, 0.16); }
.sd-bar { background: rgba(11, 20, 51, 0.07); }
.ur-card { background: #F7F8FC; border-color: rgba(11, 20, 51, 0.08); }
.ur-ic { color: #3E64A4; background: linear-gradient(145deg, rgba(73, 118, 177, 0.16), rgba(73, 118, 177, 0.07));
  border-color: rgba(73, 118, 177, 0.25); }
.ur-tag.lead { color: #2F5797; background: rgba(73, 118, 177, 0.10); border-color: rgba(73, 118, 177, 0.35); }
.ur-tag.kind { color: #9A3F7E; background: rgba(172, 80, 143, 0.08); border-color: rgba(172, 80, 143, 0.30); }
.ur-tag.cust { color: #5B3FB8; background: rgba(140, 112, 240, 0.10); border-color: rgba(140, 112, 240, 0.35); }
.ur-pill.ok { color: #157347; background: rgba(46, 160, 103, 0.10); border-color: rgba(46, 160, 103, 0.38); }
.ur-pill.hand { color: #9A3F7E; background: rgba(172, 80, 143, 0.08); border-color: rgba(172, 80, 143, 0.35); }

/* The brands, the figures and the gallery: the logos are white files, so they print dark here; the
   figures take the deep gradient; since v21 the gallery's photographs are daylight, so a label is navy ink
   on a white fade, the light theme's mirror of the dark one */
.lg-img { filter: brightness(0); opacity: 0.62; }
.st-big { background: linear-gradient(90deg, #3E64A4, #9A3F7E); -webkit-background-clip: text; background-clip: text; }
.gal-item .gal-label { color: var(--text); text-shadow: none;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92) 55%); }

/* The offer band, the questions, the form and the picker */
.band, .guard-band { background: linear-gradient(120deg, #EDF1FA, #F8EEF5 50%, #EDF1FA); border: 1px solid var(--glass-line); }
.gl-sheen { opacity: 0.5; }
.faq details, .faq details[open] { background: #FFFFFF; }
.cf-f input, .cf-f textarea, .in-form .cf-f select, .bk-f input { background: #FFFFFF; border-color: rgba(11, 20, 51, 0.2); }
.in-form .cf-f select option { background: #FFFFFF; color: var(--text); }
.in-bar { background: rgba(11, 20, 51, 0.08); }
.bk-day { background: #FFFFFF; }
.bk-time { background: #FFFFFF; }

/* The footer */
.lp-foot { background: linear-gradient(180deg, rgba(11, 20, 51, 0), rgba(11, 20, 51, 0.04)); }

/* /terms, /privacy and /security: the document links take a navy tint on white, and the footer stays dark
   like the header, since it carries the neon mark (Jin 2026-10-21: "the logo looks weird on the light
   background"); the dark theme's text tokens again inside it */
.legal-docs a:hover, .legal-docs a[aria-current], .toc-box a:hover { background: rgba(11, 20, 51, 0.05); }
.foot { --text: #EEF0FA; --text-2: #A9AECB; --accent-text: #E58AC4; --line: rgba(201, 204, 224, 0.14);
  color: var(--text-2); background: #0A1233; border-top-color: transparent; color-scheme: dark; }