/* Variant home in the style of www.qovery.com product pages (landing-page ProductSections.tsx):
   dark brand hero with centered copy and an overlapping preview, three illustrated cards,
   alternating highlights with icon bullets, a feature grid, a dark closing CTA. */
.pp { --pp-950: #1c162f; --pp-900: #323037; --pp-700: #615f68; --pp-200: #ebebeb; --pp-100: #f5f5f7;
  --pp-purple: #642dff; --pp-purple-300: #9b7aff; --pp-purple-100: #ddd0ff; --pp-deep: #370087; background: #fff; }

/* Buttons (bg-button-primary / ghost on dark) */
.pp-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; border-radius: 8px; font: 500 15px var(--f-body); text-decoration: none; transition: background .15s, transform .1s; }
.pp-btn:active { transform: scale(.97); }
.pp-btn-primary { color: #fff; background: radial-gradient(1396.7% 225.37% at 42.52% 62.5%, var(--pp-purple) 0%, var(--pp-purple-300) 100%);
  box-shadow: 0 4px 6px 0 rgba(100,45,255,.2), inset 0 1px 1px rgba(255,255,255,.2), inset 0 -1px 3px rgba(0,0,0,.15); }
.pp-btn-primary:hover { background: var(--pp-purple); }
.pp-btn-ghost { color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.pp-btn-ghost:hover { background: rgba(255,255,255,.16); }

/* Nav: white on the dark hero, frosted once scrolled */
.pp-nav .brand-name, .pp-nav .links a:not(.pp-btn) { color: #fff; }
.pp-nav .brand-sep { background: rgba(255,255,255,.35); }
.pp-nav .lg-dark { display: none; }
.pp-nav.scrolled .lg-dark { display: block; } .pp-nav.scrolled .lg-light { display: none; }
.pp-nav.scrolled .brand-name, .pp-nav.scrolled .links a:not(.pp-btn) { color: var(--q-ink); }
.pp-nav.scrolled .brand-sep { background: var(--neutral-7); }
.pp-nav .links .pp-btn { height: 40px; font-size: 14px; color: #fff; opacity: 1; }

/* Hero: background ends halfway down the preview */
.pp-hero { position: relative; isolation: isolate; padding: 168px 0 0; }
.pp-hero-bg { position: absolute; inset: 0 0 auto 0; bottom: 230px; z-index: -1; overflow: hidden; background: var(--pp-deep); }
.pp-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.pp-hero-copy { max-width: 804px; margin: 0 auto; text-align: center; }
.pp-pill { display: inline-block; padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); color: #fff; font: 500 13px var(--f-body); }
.pp-h1 { margin: 24px 0 0; font: 400 clamp(40px, 5.6vw, 72px)/1.04 var(--f-head); letter-spacing: -0.035em; color: #fff; }
.pp-lede { max-width: 700px; margin: 24px auto 0; font: 300 19px/1.55 var(--f-body); color: rgba(255,255,255,.88); }
.pp-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.pp-preview { margin: 72px auto 0; max-width: 1216px; border-radius: 12px; box-shadow: 0 4px 24px rgba(28,22,47,.06), 0 0 24px rgba(100,45,255,.1), 0 40px 80px -30px rgba(28,22,47,.35); }
.pp-preview .console { border-radius: 12px; }
.pp-live { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--f-ui); color: var(--brand-11); }
.pp-preview-body { padding: 20px 24px 22px; }
.pp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.pp-stats div { padding: 12px 14px; border: 1px solid var(--neutral-4); border-radius: 8px; }
.pp-stats span { display: block; font: 400 12px var(--f-ui); color: var(--neutral-11); }
.pp-stats b { font: 400 28px/1.2 var(--f-head); letter-spacing: -0.02em; color: var(--neutral-12); }
.pp-stats b.warn { color: #b7491f; }
.pp-preview svg { display: block; width: 100%; height: 260px; }
.pp-axis span { color: var(--neutral-11); }
.pp-legend { color: var(--neutral-12); font-family: var(--f-ui); font-size: 13px; }
.pp-legend .lg-traffic { background: #d9ccff; }
@media (max-width: 760px) { .pp-stats { grid-template-columns: 1fr 1fr; } .pp-preview svg { height: 180px; } .pp-hero-bg { bottom: 180px; } }

/* Section titles */
.pp-section { padding: 96px 0 0; }
.pp-title { text-align: center; }
.pp-h2 { margin: 0; font: 400 clamp(32px, 4vw, 48px)/1.08 var(--f-head); letter-spacing: -0.03em; color: var(--pp-950); }
.pp-h2.on-dark { color: #fff; }
.pp-sub { max-width: 804px; margin: 16px auto 0; font: 300 19px/1.5 var(--f-body); color: var(--pp-900); }

/* Presentation cards */
.pp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 20px; margin-top: 40px; }
@media (max-width: 860px) { .pp-cards { grid-template-columns: 1fr; } }
.pp-cards h3 { margin: 20px 0 0; font: 500 17px var(--f-body); color: var(--pp-950); }
.pp-cards p { margin: 4px 0 0; color: var(--pp-700); font-size: 16px; }
.pp-visual { aspect-ratio: 392 / 300; border-radius: 12px; display: grid; place-items: center; padding: 28px;
  background: radial-gradient(120% 90% at 20% 10%, #f2ecff 0%, #e8e3ff 45%, #dfe8ff 100%); }
.v-stack { width: 100%; max-width: 280px; display: grid; gap: 10px; font: 400 13px var(--f-ui); color: var(--neutral-12); }
.v-btn, .v-url, .v-slider, .v-row { background: #fff; border: 1px solid var(--neutral-6); border-radius: 8px; box-shadow: 0 6px 18px rgba(55,0,135,.08); }
.v-btn { height: 40px; display: grid; place-items: center; font-weight: 500; }
.v-url { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; font: 400 12px var(--f-code); border-color: var(--positive-6); background: var(--positive-2); }
.v-slider { position: relative; display: flex; justify-content: space-between; padding: 10px 12px 18px; }
.v-slider b { font-weight: 500; }
.v-slider i { position: absolute; left: 12px; right: 12px; bottom: 9px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--brand-9) var(--v), var(--neutral-4) var(--v)); }
.v-row { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; height: 44px; padding: 0 12px; }
.v-row b { font: 400 18px var(--f-head); color: var(--neutral-10); }
.v-row em { font: 400 18px var(--f-head); font-style: normal; }
.v-gold { border-color: #E3B53A; background: linear-gradient(90deg, #FFF7DD, #fff 70%); }
.v-gold b { color: #b7791f; }

/* Highlights */
.pp-highlight { padding: 56px 0 0; }
.pp-hl { display: grid; grid-template-columns: minmax(0, 701fr) minmax(0, 465fr); gap: 50px; align-items: center; margin-top: 64px; }
.pp-hl-rev { grid-template-columns: minmax(0, 465fr) minmax(0, 701fr); }
.pp-hl-rev .pp-hl-visual { order: 2; }
@media (max-width: 1023px) { .pp-hl, .pp-hl-rev { grid-template-columns: 1fr; gap: 32px; } .pp-hl-rev .pp-hl-visual { order: 0; } }
.pp-h3 { margin: 0; font: 400 clamp(28px, 3vw, 36px)/1.12 var(--f-head); letter-spacing: -0.025em; color: var(--pp-950); }
.pp-hl-text > p { margin: 16px 0 0; color: var(--pp-900); font-size: 17px; }
.pp-bullets { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; }
.pp-bullets li { display: flex; gap: 8px; align-items: flex-start; font: 500 16px/1.5 var(--f-body); color: var(--pp-950); }
.pp-bullets img { width: 16px; height: 16px; margin-top: 4px; flex: none; }
.pp-chart-card { aspect-ratio: 701 / 480; border-radius: 12px; padding: 32px; display: flex; flex-direction: column; justify-content: center; gap: 16px;
  background: radial-gradient(120% 90% at 80% 0%, #f2ecff 0%, #e8e3ff 45%, #dfe8ff 100%); }
.pp-chart-card svg { width: 100%; height: 50%; background: #fff; border-radius: 10px; padding: 16px 0 0; box-shadow: 0 10px 30px rgba(55,0,135,.08); }
.pp-chip { align-self: flex-start; padding: 4px 10px; border-radius: 99px; background: #fff; font: 500 12px var(--f-mono); color: var(--pp-purple); }
.pp-phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; font: 500 13px var(--f-body); color: var(--pp-950); }
.pp-phases time { display: block; font: 500 12px var(--f-mono); color: var(--pp-purple); }
.pp-leagues { gap: 12px; }
.pl { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 18px 20px; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(55,0,135,.08); }
.pl b { font: 400 24px var(--f-head); letter-spacing: -0.02em; }
.pl span { grid-row: 2; font: 400 14px var(--f-body); color: var(--pp-700); }
.pl em { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 400 15px var(--f-mono); font-style: normal; letter-spacing: 3px; color: var(--pp-purple); }
.pp-formula-card { align-items: center; }
.pp-formula-card .formula { background: #fff; padding: 32px 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(55,0,135,.08); font-size: clamp(24px, 2.8vw, 34px); }
.pp-targets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pp-targets span { padding: 6px 12px; border-radius: 99px; background: #fff; font: 500 13px var(--f-body); color: var(--pp-950); }

/* Feature grid */
.pp-grid-section { padding-bottom: 0; }
.pp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
@media (max-width: 1023px) { .pp-features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pp-features { grid-template-columns: 1fr; } }
.pp-features > div { padding: 24px; border: 1px solid var(--pp-200); border-radius: 12px; background: #fff; }
.pp-features img { width: 28px; height: 28px; }
.pp-features h3 { margin: 16px 0 0; font: 500 16px var(--f-body); color: var(--pp-950); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-features p { margin: 6px 0 0; font-size: 15px; color: var(--pp-700); }
.tag { padding: 1px 8px; border-radius: 99px; background: var(--pp-100); font: 500 11px var(--f-mono); color: var(--pp-700); }

/* Prizes */
.pp-prize-cards > div { padding: 28px; border-radius: 12px; border: 1px solid var(--pp-200); background: linear-gradient(180deg, #faf8ff, #fff); }
.pp-prize-cards span { display: block; font: 500 13px var(--f-mono); color: var(--pp-purple); }
.pp-prize-cards b { display: block; margin-top: 10px; font: 400 24px/1.2 var(--f-head); letter-spacing: -0.02em; }

/* Closing CTA */
.pp-closing { position: relative; isolation: isolate; margin-top: 112px; padding: 120px 0; overflow: hidden; }
.pp-closing .pp-hero-bg { bottom: 0; }
@media (max-width: 640px) {
  .pp-chart-card { padding: 18px; aspect-ratio: auto; }
  .pp-formula-card .formula { padding: 20px 16px; font-size: 19px; white-space: nowrap; }
  .pp-phases { grid-template-columns: repeat(3, 1fr); }
}

/* --- Inner pages (play, leaderboard): dark header band, content pulled up over it --- */
.pp-band { position: relative; isolation: isolate; padding: 152px 0 168px; }
.pp-band .pp-hero-bg { bottom: 0; }
.pp-h1-sm { font-size: clamp(36px, 4.6vw, 56px); }
.pp-h1 .hl, .pp-h1-sm .hl { color: var(--pp-purple-300); }
.pp-pull { position: relative; margin-top: -120px; padding-bottom: 96px; }

/* Play: stepper + console, both on white cards over the band */
.pp-play-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; align-items: start; }
@media (max-width: 960px) { .pp-play-grid { grid-template-columns: 1fr; } .pp-play-grid .stepper { order: 2; } }
.pp .stepper { margin: 0; max-width: none; }
.pp .stepper li { background: #fff; border: 1px solid var(--pp-200); box-shadow: 0 4px 24px rgba(28,22,47,.06); }
.pp .stepper small { color: var(--pp-700); }
.pp .stepper li.current { border-color: var(--pp-purple-100); box-shadow: 0 0 0 3px rgba(100,45,255,.12), 0 4px 24px rgba(28,22,47,.06); }
.pp .st-num { background: var(--pp-100); }
.pp-play-console .console { border-radius: 12px; box-shadow: 0 4px 24px rgba(28,22,47,.06), 0 0 24px rgba(100,45,255,.1), 0 40px 80px -30px rgba(28,22,47,.35); }
.pp-play-console .demo-note { color: var(--pp-700); }

/* Leaderboard header on the dark band */
.pp-band-lb { padding-bottom: 148px; }
.pp-band-lb .lb-head { align-items: flex-end; }
.pp-band-lb .pp-h1 { margin-top: 20px; }
.pp-band-lb .lb-status { color: rgba(255,255,255,.88); }
.pp-band-lb .badge { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; }
.pp-band-lb .month-pills { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.pp-band-lb .month-pills a { color: #fff; }
.pp-band-lb .month-pills a small { color: rgba(255,255,255,.65); }
.pp-band-lb .month-pills a[aria-current] { background: #fff; color: var(--pp-950); }
.pp-band-lb .month-pills a[aria-current] small { color: var(--pp-purple); }
.pp-band-lb .month-arrow { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: #fff; }
.pp .lb-page .lb-month { margin-top: 0; }
.pp .lb-team { box-shadow: 0 4px 24px rgba(28,22,47,.06); }
.pp .lb-foot { color: var(--pp-700); }
.pp .lb-empty { box-shadow: 0 4px 24px rgba(28,22,47,.06), 0 0 24px rgba(100,45,255,.08); border-color: var(--pp-200); }

/* Rules and FAQ on the home page */
.pp-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
@media (max-width: 760px) { .pp-rules { grid-template-columns: 1fr; } }
.pp-rules > div { padding: 28px; border: 1px solid var(--pp-200); border-radius: 12px; }
.pp-rules h3 { margin: 0 0 18px; font: 500 16px var(--f-body); color: var(--pp-950); }
.pp-faq-wrap { max-width: 860px; }
.pp-faq { margin-top: 32px; }
.pp-faq summary { font: 500 18px/1.4 var(--f-body); letter-spacing: 0; color: var(--pp-950); }
.pp-faq summary::after { color: var(--pp-purple); }
.pp-faq p { color: var(--pp-700); }
.pp-sub a { color: var(--pp-purple); }
@media (max-width: 820px) {
  .pp-nav .links a.pp-btn { display: inline-flex; height: 36px; padding: 0 12px; font-size: 13px; }
}
@media (max-width: 440px) {
  .pp-nav .brand { gap: 8px; } .pp-nav .brand .lg-q { height: 22px; } .pp-nav .brand-name { font-size: 15px; }
}
/* Preview bar: one line at any width */
.pp-preview .console-bar .title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-live { flex: none; white-space: nowrap; }
@media (max-width: 640px) {
  .pp-preview .console-bar { gap: 6px; padding: 0 12px; }
  .pp-preview .console-bar i { width: 8px; height: 8px; }
  .pp-preview .console-bar .title { margin-left: 4px; }
  .hide-sm { display: none; }
}

/* --- Money lost: theme chips and live counters in the home preview --- */
.pp-themes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; font: 400 12px var(--f-ui); color: var(--neutral-11); }
.pp-themes span { margin-right: 4px; }
.pp-themes button { height: 28px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--neutral-6); background: #fff; font: 500 12px var(--f-ui); color: var(--neutral-12); cursor: pointer; }
.pp-themes button[aria-pressed=true] { background: var(--brand-9); border-color: var(--brand-9); color: #fff; }
.pp-stats .money { border-color: #fdbeaf; background: #fff6f5; }
.pp-stats .money b { color: #d13415; font-variant-numeric: tabular-nums; }
.pp-stats .money.burning { animation: burn .9s ease-in-out infinite alternate; }
@keyframes burn { from { box-shadow: 0 0 0 0 rgba(229,72,77,0); } to { box-shadow: 0 0 0 4px rgba(229,72,77,.18); } }
.pp-stats b { font-variant-numeric: tabular-nums; }
.lg-fail { background: #e5484d; opacity: .6; }
.rp-clock { margin-left: auto; font: 400 12px var(--f-code); }
.rp-note { margin: 10px 0 0; font: 400 13px/1.5 var(--f-ui); color: var(--neutral-11); }
@media (prefers-reduced-motion: reduce) { .pp-stats .money.burning { animation: none; } }
.wave-axis span span { position: static; transform: none; }
.pp-live { gap: 0; } .pp-live .dot { margin-right: 8px; }

/* Downtime has a price: four business themes */
.pp-biz { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
@media (max-width: 1023px) { .pp-biz { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pp-biz { grid-template-columns: 1fr; } }
.pp-biz > div { padding: 24px; border: 1px solid var(--pp-200); border-radius: 12px; background: #fff; }
.pp-biz .ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #f0f1ff; color: var(--pp-purple); }
.pp-biz h3 { margin: 16px 0 0; font: 500 17px var(--f-body); color: var(--pp-950); }
.pp-biz p { margin: 6px 0 0; font-size: 15px; color: var(--pp-700); }
.pp-biz .loss { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--pp-200); font: 400 13px/1.6 var(--f-ui); color: var(--pp-900); }
.pp-biz .loss b { color: #d13415; font-weight: 500; }
.pp-price-note { margin: 24px auto 0; max-width: 760px; text-align: center; font-size: 15px; color: var(--pp-700); }

/* The three request outcomes: fast, slow, lost after 5 s */
.tiers { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; margin: 32px auto 0; max-width: 980px; border-radius: 12px; overflow: hidden; border: 1px solid var(--pp-200); font-family: var(--f-ui); }
.tiers > div { padding: 14px 18px; }
.tiers b { display: block; font-weight: 500; font-size: 14px; }
.tiers span { font-size: 13px; }
.t-ok { background: #f4fbf6; color: #218358; }
.t-slow { background: #fff8eb; color: #7a4b00; border-left: 1px solid var(--pp-200); }
.t-lost { background: #fff6f5; color: #d13415; border-left: 1px solid var(--pp-200); }
@media (max-width: 640px) { .tiers { grid-template-columns: 1fr; } .t-slow, .t-lost { border-left: 0; border-top: 1px solid var(--pp-200); } }
.pp-biz .gone { margin: 10px 0 0; font: 400 13px/1.5 var(--f-ui); color: #d13415; }
.pp-live .hide-sm { margin-left: .28em; }

/* Demo mode strip, above the nav */
.demo-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 36px; background: #fff8eb; border-bottom: 1px solid #f3d7a6; color: #7a4b00; font: 400 13px var(--f-ui); }
.demo-bar .wrap { display: flex; align-items: center; gap: 14px; height: 36px; overflow-x: auto; white-space: nowrap; }
.demo-bar b { padding: 2px 8px; border-radius: 99px; background: #7a4b00; color: #fff; font-weight: 500; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.demo-bar a { color: #7a4b00; font-weight: 500; text-decoration: none; }
.demo-bar a:hover { text-decoration: underline; }
.demo-bar .exit { margin-left: auto; }
.has-demo-bar .pp-nav { top: 36px; }
@media (max-width: 640px) { .demo-bar span { display: none; } }
.lb-team.mine { box-shadow: 0 0 0 2px var(--q-purple), 0 4px 24px rgba(28,22,47,.06); }

/* --- Control room --------------------------------------------------------- */
.pp-band-cr { padding-bottom: 150px; }
.cr-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.pp-band-cr .pp-h1 { margin-top: 18px; }
.cr-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cr-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 99px; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); color: #fff; font: 500 13px var(--f-body); }
.cr-url { font: 400 12px var(--f-code); }
.cr-waves { display: flex; gap: 10px; }
.cr-waves div { padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); color: #fff; min-width: 112px; }
.cr-waves span { display: block; font: 400 12px var(--f-ui); color: rgba(255,255,255,.75); }
.cr-waves b { font: 400 22px/1.2 var(--f-head); }
.cr-grid { display: grid; grid-template-columns: 380px 1fr; gap: 20px; align-items: start; }
@media (max-width: 1023px) { .cr-grid { grid-template-columns: 1fr; } }
.cr-grid > .console { box-shadow: 0 4px 24px rgba(28,22,47,.06), 0 0 24px rgba(100,45,255,.08); }
.cr-state { margin-left: auto; font: 500 12px var(--f-ui); }
.st-ok { color: var(--positive-11); } .st-dirty { color: #b7491f; }
.lever { margin-bottom: 18px; }
.lever-top { display: flex; justify-content: space-between; align-items: baseline; font: 500 14px var(--f-ui); }
.lever-top b { font: 400 22px var(--f-head); color: var(--brand-11); }
.lever input[type=range] { width: 100%; margin: 8px 0 2px; accent-color: var(--brand-9); }
.lever .hint { margin: 2px 0 0; }
.budget { position: relative; padding: 12px; border-radius: 8px; border: 1px solid var(--neutral-4); background: var(--neutral-2); font-family: var(--f-ui); margin-bottom: 14px; }
.budget span { display: block; font-size: 12px; color: var(--neutral-11); }
.budget b { font: 400 22px var(--f-head); } .budget b small { font: 400 12px var(--f-ui); color: var(--neutral-11); }
.budget i { display: block; height: 4px; margin-top: 8px; border-radius: 2px; background: linear-gradient(90deg, var(--brand-9) var(--w), var(--neutral-4) var(--w)); }
.budget.over { border-color: #fdbeaf; background: #fff6f5; } .budget.over i { background: linear-gradient(90deg, #d13415 var(--w), var(--neutral-4) var(--w)); }
.budget .warn { display: block; margin-top: 8px; color: #d13415; font-size: 12px; }
.cr-apply { display: flex; align-items: center; gap: 12px; }
.cr-apply .qbtn { width: auto; flex: 1; }
.locked { margin-top: 14px; padding: 0; border: 0; font-family: var(--f-ui); }
.locked summary { font: 500 13px var(--f-ui); color: var(--neutral-11); }
.locked summary::after { font-size: 14px; }
.locked ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--neutral-10); }
.locked li { display: flex; justify-content: space-between; }
.cr-wave.is-ranked .console-bar { background: #fff6f5; }
.cr-chart { display: block; width: 100%; height: 260px; }
.cr-maxlbl { margin-left: auto; }
.cr-actions { display: flex; gap: 10px; margin-top: 18px; }
.cr-actions .qbtn { width: auto; flex: 1; margin: 0; }
#cr-result { margin-top: 14px; }
#cr-result .callout { display: flex; }
.cr-running { background: var(--brand-2); border-color: var(--brand-6); color: var(--brand-11); align-items: center; }
.cr-score { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 16px; border-radius: 10px; border: 1px solid var(--brand-6); background: var(--brand-2); font-family: var(--f-ui); }
.cr-score span { display: block; font-size: 12px; color: var(--neutral-11); }
.cr-score b { font: 400 26px/1.2 var(--f-head); } .cr-score b.red { color: #d13415; }
.cr-score p { grid-column: 1 / -1; margin: 6px 0 0; font-size: 14px; }
.cr-score.dq { border-color: #fdbeaf; background: #fff6f5; }
@media (max-width: 640px) { .cr-score { grid-template-columns: 1fr 1fr; } .cr-waves { flex-wrap: wrap; } .cr-chart { height: 180px; } }

/* --- Admin ----------------------------------------------------------------- */
.ad-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ad-actions .pp-btn { font-size: 14px; cursor: pointer; border: 0; }
.ad-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 860px) { .ad-cards { grid-template-columns: 1fr 1fr; } }
.ad-cards div { padding: 16px; border-radius: 12px; background: #fff; border: 1px solid var(--pp-200); box-shadow: 0 4px 24px rgba(28,22,47,.06); }
.ad-cards span { display: block; font: 400 12px var(--f-ui); color: var(--neutral-11); }
.ad-cards b { font: 400 30px/1.2 var(--f-head); }
.ad-table-wrap { margin-bottom: 20px; }
.ad-scroll { overflow-x: auto; }
.ad-table { width: 100%; border-collapse: collapse; font: 400 14px var(--f-ui); }
.ad-table th { text-align: left; padding: 10px 14px; font: 500 12px var(--f-code); color: var(--neutral-11); border-bottom: 1px solid var(--neutral-6); white-space: nowrap; }
.ad-table td { padding: 10px 14px; border-bottom: 1px solid var(--neutral-4); vertical-align: middle; white-space: nowrap; }
.ad-table td small { display: block; color: var(--neutral-11); font-size: 12px; }
.ad-table tr.mine { background: var(--brand-2); }
.ad-table .red { color: #d13415; }
.ad-row-actions { display: flex; gap: 12px; }
.pill-ok, .pill-dq { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; }
.pill-ok { background: var(--positive-2); color: var(--positive-11); }
.pill-dq { background: var(--negative-2); color: var(--negative-11); }
.ad-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .ad-two { grid-template-columns: 1fr; } }
.ad-log { padding: 16px 18px; }
.ad-settings { margin: 0; padding: 16px 18px; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font: 400 14px var(--f-ui); }
.ad-settings dt { color: var(--neutral-11); }
.ad-settings dd { margin: 0; }

/* Training mode and guided tour */
.cr-modebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.cr-mode { width: 240px; margin: 0; }
.cr-mode-help { margin: 8px 0 0; font: 400 13px/1.5 var(--f-ui); color: var(--neutral-11); }
.cr-mode-help.ranked { color: #b7491f; }
.cr-actions { margin-top: 12px; }
#cr-ranked.is-training { background: #fff; color: var(--brand-11); border-color: var(--brand-6); }
#cr-ranked.is-training:hover { background: var(--brand-2); }
.cr-score.training { border-style: dashed; background: #fff; }
.cr-score .tag { margin-right: 6px; }
.cr-score .linkbtn { margin-left: 10px; }
.hint.need { margin-top: 6px; padding: 8px 10px; border-radius: 6px; background: var(--brand-2); color: var(--brand-12); }
.hint.need.short { background: #fff6f5; color: #d13415; }
.cr-tour { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--brand-6); box-shadow: 0 0 0 4px rgba(100,45,255,.08), 0 10px 30px rgba(28,22,47,.12); font-family: var(--f-ui); }
.cr-tour[hidden] { display: none; }
.tour-step { font: 500 12px var(--f-code); color: var(--brand-11); white-space: nowrap; }
.tour-body b { font-weight: 500; font-size: 15px; }
.tour-body p { margin: 4px 0 0; font-size: 14px; color: var(--neutral-11); }
.tour-nav { display: flex; align-items: center; gap: 12px; }
.tour-nav .qbtn { width: auto; padding: 0 18px; margin: 0; }
@media (max-width: 760px) { .cr-tour { grid-template-columns: 1fr; } }
.tour-focus { position: relative; z-index: 2; border-radius: 10px; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--brand-9); animation: tourPulse 1.6s ease-in-out infinite; }
@keyframes tourPulse { 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 9px rgba(100,45,255,.35); } }
@media (prefers-reduced-motion: reduce) { .tour-focus { animation: none; } }
.cr-score .tag { display: inline-block; width: auto; }

/* --- Leagues in the control room ----------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cr-league { padding: 0; }
.cr-league select { height: 28px; padding: 0 28px 0 12px; border: 0; border-radius: 99px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; color: #fff; font: 500 13px var(--f-body); appearance: none; -webkit-appearance: none; cursor: pointer; }
.cr-league select option { color: var(--q-ink); }
.cr-scn { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.cr-scn button { display: grid; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--neutral-6); background: #fff; font: 500 13px var(--f-ui); color: var(--neutral-12); cursor: pointer; text-align: left; }
.cr-scn button small { font: 400 11px var(--f-ui); color: var(--neutral-11); }
.cr-scn button[aria-selected=true] { background: var(--brand-9); border-color: var(--brand-9); color: #fff; }
.cr-scn button[aria-selected=true] small { color: var(--brand-4); }
.lv-label { font: 500 14px var(--f-ui); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-top: 8px; padding: 3px; border-radius: 8px; background: var(--neutral-3); }
.seg button { display: grid; place-items: center; min-height: 32px; padding: 2px 4px; border: 1px solid transparent; border-radius: 6px; background: transparent; font: 500 13px var(--f-ui); color: var(--neutral-11); cursor: pointer; line-height: 1.15; }
.seg button small { font: 400 10px var(--f-ui); color: var(--neutral-10); }
.seg button[aria-pressed=true] { background: #fff; border-color: var(--neutral-6); color: var(--brand-11); }
.pre-grid { display: grid; gap: 8px; margin-top: 8px; }
.pre-grid label { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 8px; font: 400 12px var(--f-ui); color: var(--neutral-11); }
.pre-grid label b { grid-row: 1; grid-column: 1; justify-self: end; margin-right: 0; color: var(--brand-11); font-weight: 500; }
.pre-grid input { grid-column: 2; grid-row: 1; accent-color: var(--brand-9); }
.switch.sm { margin: 0; font-size: 12px; gap: 6px; }
.cr-run { grid-template-columns: 1fr; }
.run-top { display: flex; gap: 18px; align-items: center; }
.run-top > div b { font: 400 40px/1 var(--f-head); }
.run-top p b { font-weight: 500; }
.run-top p { margin: 0; font-size: 13px; color: var(--neutral-11); }
.run-scroll { overflow-x: auto; }
.run-table { width: 100%; border-collapse: collapse; margin-top: 8px; font: 400 13px var(--f-ui); }
.run-table th { text-align: left; font: 500 11px var(--f-code); color: var(--neutral-11); padding: 6px 8px; border-bottom: 1px solid var(--neutral-6); }
.run-table td { padding: 6px 8px; border-bottom: 1px solid var(--neutral-4); white-space: nowrap; }
.run-table .red { color: #d13415; }
.cr-score p b { font: 600 13px var(--f-ui); color: var(--neutral-12); }
.lb-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; padding: 4px; border-radius: 12px; background: #fff; border: 1px solid var(--pp-200); box-shadow: 0 4px 24px rgba(28,22,47,.06); width: fit-content; max-width: 100%; overflow-x: auto; }
.lb-tabs a { padding: 8px 14px; border-radius: 8px; font: 500 14px var(--f-body); color: var(--pp-700); text-decoration: none; white-space: nowrap; }
.lb-tabs a[aria-current] { background: var(--pp-purple); color: #fff; }
.lb-metrics.champ li { background: var(--pp-100); padding: 2px 8px; border-radius: 99px; font-size: 13px; }
.ad-league { display: inline-flex; gap: 4px; margin-left: 8px; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.1); }
.ad-league a { padding: 4px 10px; border-radius: 7px; color: #fff; text-decoration: none; font-size: 13px; }
.ad-league a[aria-current] { background: #fff; color: var(--pp-950); }

/* Hero lede on light pages */
.oc-lede { max-width: 620px; margin: 14px 0 0; color: rgba(255,255,255,.82); font: 400 16px/1.5 var(--f-body); }

/* Shared result */
.sh-head .pp-h1 { margin-top: 18px; max-width: 900px; }
.sh-wrap { display: grid; justify-items: center; gap: 18px; }
.sh-card { width: 100%; max-width: 960px; height: auto; border-radius: 16px; box-shadow: 0 20px 60px -20px rgba(28,22,47,.45); }
.sh-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sh-li { background: #0A66C2; color: #fff; }
.sh-ghost { background: #fff; color: var(--neutral-12); box-shadow: inset 0 0 0 1px var(--neutral-6); border: 0; cursor: pointer; }
.sh-demo { margin: 0; font: 400 13px var(--f-ui); color: var(--neutral-11); }
.cr-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.cr-share img { width: 100%; border-radius: 10px; border: 1px solid var(--neutral-5); }
.cr-share .qbtn { width: auto; }
.qbtn.sh-li { background: #0A66C2; border-color: #0A66C2; }
.qbtn.sh-li:hover { background: #004182; }

/* End-of-month debrief */
.lb-debrief { margin-top: 40px; padding: 28px; border-radius: 14px; border: 1px solid var(--neutral-5); background: #fff; }
.lb-debrief .h3 { margin: 0; }
.lb-db-sub { margin: 6px 0 18px; color: var(--neutral-11); font: 400 14px/1.5 var(--f-body); }
.lb-db-insights { margin: 0 0 20px; padding-left: 20px; display: grid; gap: 6px; font: 400 15px/1.5 var(--f-body); }
.lb-db-table td small { display: block; color: var(--neutral-11); font-size: 12px; }
.lb-db-table th, .lb-db-table td { white-space: nowrap; }
@media (max-width: 640px) { .lb-debrief { padding: 18px; } }
.pp-prize-gift { display: block; margin-top: 6px; font: 500 15px var(--f-ui); font-style: normal; color: var(--neutral-12); }

/* Official rules */
.rules-doc { max-width: 760px; font: 400 16px/1.65 var(--f-body); color: var(--neutral-12); }
.rules-doc h2 { margin: 36px 0 10px; font: 400 24px/1.3 var(--f-head); letter-spacing: -0.01em; }
.rules-doc ul { padding-left: 22px; display: grid; gap: 6px; }
.rules-doc a { color: var(--brand-11); }
.rules-draft { padding: 14px 16px; border-radius: 10px; border: 1px solid #f5a524; background: #fff8e6; font: 500 14px/1.5 var(--f-ui); color: #7a4b00; }
.v-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.v-btn svg { width: 18px; height: 18px; flex: none; }
.v-row b { display: grid; place-items: center; }
.v-silver { border-color: #B7BFCC; background: linear-gradient(90deg, #F3F5F9, #fff 70%); }
.v-bronze { border-color: #D39A6A; background: linear-gradient(90deg, #FBEDE2, #fff 70%); }

/* Player journey: quest, toasts, deltas, leader curve, daily challenge, achievements, waitlist */
.cr-quest { grid-column: 1 / -1; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--brand-6); background: linear-gradient(90deg, var(--brand-2), #fff 70%); font-family: var(--f-ui); }
.q-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.q-head b { font: 500 15px var(--f-ui); }
.q-head span { font: 400 12px var(--f-code); color: var(--brand-11); }
.q-head .linkbtn { margin-left: auto; }
.cr-quest ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.cr-quest li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--neutral-11); }
.cr-quest li i { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--neutral-7); }
.cr-quest li.done { color: var(--neutral-12); }
.cr-quest li.done i { border-color: var(--brand-9); background: var(--brand-9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat; }
.cr-quest li.done b { text-decoration: line-through; text-decoration-color: var(--neutral-8); font-weight: 400; }
.cr-quest li.next i { border-color: var(--brand-9); box-shadow: 0 0 0 3px var(--brand-4); }
.cr-quest li.next b { color: var(--brand-11); }
.cr-quest li small { display: block; margin-top: 2px; color: var(--neutral-11); font-size: 12px; }
@media (max-width: 900px) { .cr-quest ol { grid-template-columns: 1fr; } }

.cr-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: grid; gap: 8px; width: min(340px, calc(100vw - 32px)); }
.cr-toast { padding: 12px 14px; border-radius: 10px; background: #1c1630; color: #fff; box-shadow: 0 12px 30px -10px rgba(28,22,47,.5); font: 400 13px/1.4 var(--f-ui); animation: toast-in .25s ease-out; transition: opacity .5s, transform .5s; }
.cr-toast b { display: block; font-weight: 500; font-size: 14px; }
.cr-toast span { color: rgba(255,255,255,.8); }
.cr-toast.ach { background: linear-gradient(120deg, #3a0ca3, #642dff); }
.cr-toast.gold { background: linear-gradient(120deg, #8a5a00, #d9a21b); }
.cr-toast.warn { background: #5c2a12; }
.cr-toast.out { opacity: 0; transform: translateY(8px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .cr-toast { animation: none; transition: none; } }

.cr-delta { min-height: 20px; margin: 10px 0 0; font: 400 13px/1.5 var(--f-ui); color: var(--neutral-11); }
.cr-delta .up, .run-top em.up { color: var(--positive-11, #18794e); font-style: normal; font-weight: 500; }
.cr-delta .down, .run-top em.down { color: var(--negative-11); font-style: normal; font-weight: 500; }
.run-top em { display: block; margin-top: 4px; font: 500 12px var(--f-ui); }
.cr-ghost-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cr-ghost-toggle input { margin: 0; accent-color: #f76b15; }
.lg-ghost { display: inline-block; width: 16px; height: 0; border-top: 2px dashed #f76b15; }
.cr-levelup { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #e9f9ee; border: 1px solid #a7e3bd; font: 400 13px/1.5 var(--f-ui); }
.cr-waves small { display: block; margin-top: 2px; font: 400 11px var(--f-ui); color: rgba(255,255,255,.7); }
.cr-rename { cursor: pointer; border: 0; font: 500 13px var(--f-body); }
.cr-name-form { display: flex; gap: 8px; align-items: center; }
.cr-name-form input { height: 44px; padding: 0 12px; border-radius: 10px; border: 0; font: 400 24px var(--f-head); width: min(340px, 60vw); }

.cr-waitlist { margin-top: 14px; padding: 16px; border-radius: 12px; border: 1px solid var(--brand-6); background: var(--brand-2); font: 400 13px/1.5 var(--f-ui); }
.cr-waitlist b { font-size: 15px; font-weight: 500; }
.cr-waitlist p { margin: 4px 0 10px; color: var(--neutral-11); }
.wl-row { display: flex; gap: 8px; }
.wl-row input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--neutral-6); font: 400 14px var(--f-ui); }
.wl-row .qbtn { width: auto; }
.wl-consent { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 6px; color: var(--neutral-11); }
.wl-consent input { margin-top: 3px; }
.wl-msg { color: var(--negative-11); margin: 6px 0 0; font-size: 13px; }

.cr-extra { display: grid; grid-template-columns: 380px 1fr; gap: 20px; margin-top: 20px; }
.cr-extra[hidden] { display: none; }
.cr-extra > .console { box-shadow: 0 4px 24px rgba(28,22,47,.06), 0 0 24px rgba(100,45,255,.08); }
@media (max-width: 1023px) { .cr-extra { grid-template-columns: 1fr; } }
.dl-intro { margin: 0 0 16px; font: 400 14px/1.5 var(--f-ui); color: var(--neutral-11); }
.dl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; font-family: var(--f-ui); }
.dl-stats span { display: block; font-size: 12px; color: var(--neutral-11); }
.dl-stats b { font: 400 22px var(--f-head); }
.dl-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 400 13px var(--f-ui); }
.dl-top li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; padding: 6px 8px; border-radius: 6px; }
.dl-top li span { color: var(--neutral-10); }
.dl-top li b { font-weight: 400; }
.dl-top li.mine { background: var(--brand-2); color: var(--brand-11); }
.badge-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.badge-grid li { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: center; padding: 10px; border-radius: 10px; border: 1px solid var(--neutral-4); background: var(--neutral-2); font-family: var(--f-ui); opacity: .62; }
.badge-grid li.on { opacity: 1; background: #fff; border-color: var(--brand-6); }
.badge-ic { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--neutral-4); color: var(--neutral-9); }
.badge-grid li.on .badge-ic { background: linear-gradient(135deg, #f2c94c, #d9a21b); color: #fff; }
.badge-grid b { font: 500 13px var(--f-ui); }
.badge-grid small { font-size: 12px; color: var(--neutral-11); line-height: 1.35; }
.wl-box { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--neutral-4); font: 400 13px/1.5 var(--f-ui); }
.wl-box > b { display: block; margin-bottom: 8px; font: 500 14px var(--f-ui); }
.pp-target { margin: 18px 0 0; font: 400 15px/1.5 var(--f-body); color: rgba(255,255,255,.9); }
.pp-target b { color: #fff; font-weight: 500; }
.pp-target a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pp-cred { margin: 10px 0 0; font: 400 12px/1.5 var(--f-code); color: rgba(255,255,255,.65); }
.pp-play-grid.solo { grid-template-columns: minmax(0, 640px); justify-content: center; }