:root {
  color-scheme: light;
  --bg: #e2e4f1;
  --bg-soft: #eff0f8;
  --panel: #ffffff;
  --panel-raised: #fafaff;
  --line: #d7d9e8;
  --text: #252239;
  --muted: #625f75;
  --accent: #43216f;
  --accent-strong: #6242a0;
  --hot: #ed765f;
  --cold: #5d9fe6;
  --ok: #238966;
  --radius: 18px;
  --shadow: 0 17px 44px rgba(54, 42, 88, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  min-width: 320px;
  background: linear-gradient(122deg, #6516cf 0%, #a00bcf 34%, #ed087c 72%, #ff536d 100%);
  background-attachment: fixed;
  color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.liquid-background {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.liquid-background::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(rgba(255, 255, 255, 0.38) 0.7px, transparent 1px);
  background-size: 31px 31px;
  opacity: 0.11;
}

.liquid-blob {
  position: absolute;
  display: block;
  border-radius: 58% 42% 54% 46% / 42% 58% 42% 58%;
  filter: saturate(1.12);
  opacity: 0.94;
  will-change: transform, border-radius;
}

.blob-main {
  top: 16vh;
  right: 5vw;
  width: min(35vw, 500px);
  height: min(48vh, 490px);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 248, 192, 0.98) 0 3%, transparent 13%),
    radial-gradient(ellipse at 34% 26%, #ffe28a 0%, #ff8980 22%, #f51282 48%, #b800bb 76%, rgba(92, 28, 205, 0.1) 100%);
  box-shadow:
    inset 18px 24px 38px rgba(255, 255, 255, 0.34),
    inset -24px -34px 48px rgba(65, 0, 135, 0.32),
    0 32px 85px rgba(47, 0, 112, 0.27);
  animation: liquid-main 23s ease-in-out infinite alternate;
}

.blob-orbit {
  top: 44vh;
  right: 29vw;
  width: min(19vw, 270px);
  height: min(29vh, 290px);
  background:
    radial-gradient(ellipse at 30% 19%, rgba(255, 255, 255, 0.9) 0 3%, transparent 15%),
    radial-gradient(ellipse at 35% 28%, #fff0a1, #ff677d 32%, #ed087c 60%, #6730d3 100%);
  box-shadow:
    inset 12px 16px 28px rgba(255, 255, 255, 0.32),
    inset -18px -24px 35px rgba(61, 0, 137, 0.28),
    0 25px 65px rgba(56, 0, 110, 0.25);
  animation: liquid-orbit 19s ease-in-out infinite alternate;
}

.blob-drop {
  right: 13vw;
  bottom: -13vh;
  width: min(18vw, 245px);
  height: min(35vh, 360px);
  border-radius: 60% 40% 46% 54% / 30% 36% 64% 70%;
  background:
    radial-gradient(ellipse at 29% 18%, rgba(255, 251, 206, 0.98) 0 3%, transparent 16%),
    radial-gradient(ellipse at 34% 28%, #ffe08a, #ff657d 30%, #f30a82 62%, #8726d8 100%);
  box-shadow:
    inset 13px 18px 30px rgba(255, 255, 255, 0.3),
    inset -16px -30px 40px rgba(71, 0, 124, 0.3),
    0 26px 68px rgba(47, 0, 112, 0.24);
  animation: liquid-drop 27s ease-in-out infinite alternate;
}

.blob-mini {
  top: 22vh;
  right: 35vw;
  width: clamp(74px, 8vw, 130px);
  height: clamp(95px, 14vh, 145px);
  background:
    radial-gradient(ellipse at 28% 18%, rgba(255, 255, 255, 0.95) 0 4%, transparent 17%),
    radial-gradient(ellipse at 35% 28%, #fff19a, #ff7188 34%, #ed087c 68%, #7131d5 100%);
  box-shadow:
    inset 9px 12px 20px rgba(255, 255, 255, 0.38),
    inset -12px -18px 24px rgba(68, 0, 132, 0.28),
    0 18px 48px rgba(49, 0, 112, 0.22);
  animation: liquid-mini 17s ease-in-out infinite alternate;
}

.blob-left {
  top: 43vh;
  left: -6vw;
  width: clamp(115px, 17vw, 245px);
  height: clamp(180px, 31vh, 330px);
  background:
    radial-gradient(ellipse at 28% 18%, rgba(231, 253, 255, 0.94) 0 3%, transparent 15%),
    radial-gradient(ellipse at 36% 27%, #5ce0ef, #7969ec 38%, #d833ce 70%, #ff567f 100%);
  box-shadow:
    inset 13px 17px 26px rgba(255, 255, 255, 0.35),
    inset -17px -25px 34px rgba(47, 0, 116, 0.3),
    0 24px 62px rgba(46, 0, 115, 0.2);
  opacity: 0.78;
  animation: liquid-left 29s ease-in-out infinite alternate;
}

.blob-bottom {
  bottom: -8vh;
  left: 39vw;
  width: clamp(100px, 14vw, 205px);
  height: clamp(110px, 21vh, 225px);
  background:
    radial-gradient(ellipse at 29% 19%, rgba(255, 255, 255, 0.92) 0 4%, transparent 18%),
    radial-gradient(ellipse at 35% 28%, #ffe993, #ff7d70 33%, #f2138a 67%, #7131d5 100%);
  box-shadow:
    inset 12px 15px 25px rgba(255, 255, 255, 0.32),
    inset -16px -24px 32px rgba(67, 0, 126, 0.28),
    0 20px 58px rgba(48, 0, 112, 0.22);
  animation: liquid-bottom 24s ease-in-out infinite alternate;
}

.blob-edge {
  top: 57vh;
  right: -8vw;
  width: clamp(120px, 17vw, 245px);
  height: clamp(180px, 31vh, 330px);
  background:
    radial-gradient(ellipse at 27% 18%, rgba(255, 250, 197, 0.98) 0 3%, transparent 15%),
    radial-gradient(ellipse at 36% 28%, #ffc672, #ff526f 31%, #e90988 63%, #6927ce 100%);
  box-shadow:
    inset 13px 18px 28px rgba(255, 255, 255, 0.3),
    inset -18px -27px 36px rgba(62, 0, 126, 0.3),
    0 24px 62px rgba(48, 0, 110, 0.22);
  animation: liquid-edge 26s ease-in-out infinite alternate;
}

.wrap {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(255, 255, 255, 0.78);
  background: rgba(239, 240, 248, 0.86);
  padding: 16px 0;
  backdrop-filter: blur(14px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand-lockup {
  min-width: 0;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  text-decoration: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #302044;
  font-size: clamp(1.55rem, 2vw, 1.85rem);
  font-weight: 850;
  letter-spacing: -0.055em;
}

.brand-symbol {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border-radius: 50%;
  background: linear-gradient(140deg, #6728c5 8%, #e13eaa 58%, #ff9366);
  box-shadow: 0 3px 10px rgba(137, 54, 187, 0.3);
}

.brand .brand-country {
  padding: 0.31em 0.48em 0.34em;
  border-radius: 999px;
  background: linear-gradient(120deg, #6828bd, #bd32ab 58%, #ed526e);
  box-shadow: 0 4px 11px rgba(115, 42, 161, 0.19);
  color: #fff;
  font-size: 0.43em;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
}

.tagline {
  margin: 3px 0 0 24px;
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.015em;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: 0 6px 18px rgba(56, 36, 95, 0.04);
}

.site-nav a {
  padding: 8px 11px;
  border-radius: 999px;
  color: #69677a;
  font-size: 0.84rem;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}

.site-nav a:hover {
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
}

.site-nav a:first-child {
  background: var(--accent);
  color: #fff;
}

main {
  display: grid;
  gap: 22px;
  padding: 30px 0 48px;
}

.panel {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 30px);
  box-shadow: var(--shadow);
  scroll-margin-top: 100px;
}

.overview-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.overview-card {
  position: relative;
  min-width: 0;
  padding: 18px 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(60, 58, 91, 0.055);
}

.overview-target {
  background: linear-gradient(135deg, #c9e0ff, #e3edff);
  border-left: 4px solid #5a9ae2;
}

.overview-source {
  background: linear-gradient(135deg, #ddd0ff, #eee7ff);
  border-left: 4px solid #8460c5;
}

.overview-tracking {
  background: linear-gradient(135deg, #c5ead9, #e0f5eb);
  border-left: 4px solid #339b7b;
}

.overview-mark {
  position: absolute;
  top: 12px;
  right: 14px;
  color: rgba(67, 33, 111, 0.42);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.overview-label {
  margin: 0 0 5px;
  color: #504c66;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.overview-card strong {
  display: block;
  color: var(--text);
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.overview-card small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.78rem;
}

.strategy-accordion {
  padding: 0;
  overflow: hidden;
}

.strategy-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 21px clamp(20px, 3vw, 30px);
  cursor: pointer;
  list-style: none;
}

.strategy-summary::-webkit-details-marker {
  display: none;
}

.strategy-summary h2 {
  margin: 0;
}

.strategy-summary .meta {
  margin-top: 5px;
}

.accordion-action {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid #e5e0ef;
  border-radius: 999px;
  background: #f7f5fb;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 650;
}

.accordion-action::after {
  content: "+";
  font-size: 1.05rem;
  line-height: 1;
}

.strategy-accordion[open] > .strategy-summary {
  border-bottom: 1px solid var(--line);
}

.strategy-accordion[open] .accordion-action::after {
  content: "−";
}

.strategy-content {
  padding: 23px clamp(20px, 3vw, 30px) 28px;
}

.analysis-details {
  margin: 16px 0;
  overflow: hidden;
  border: 1px solid #e5e0ef;
  border-radius: 14px;
  background: #fbfaff;
}

.analysis-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.analysis-details > summary::-webkit-details-marker {
  display: none;
}

.analysis-details > summary::after {
  content: "+";
  font-size: 1.2rem;
  line-height: 1;
}

.analysis-details[open] > summary {
  border-bottom: 1px solid #e5e0ef;
}

.analysis-details[open] > summary::after {
  content: "−";
}

.analysis-details .tests {
  padding: 12px;
}

.history-accordion {
  padding: 0;
  overflow: hidden;
}

.history-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 21px clamp(20px, 3vw, 30px);
  cursor: pointer;
  list-style: none;
}

.history-summary::-webkit-details-marker {
  display: none;
}

.history-summary h2 {
  margin: 0;
}

.history-summary .meta {
  margin-top: 5px;
}

.history-accordion[open] > .history-summary {
  border-bottom: 1px solid var(--line);
}

.history-content {
  display: grid;
  gap: 16px;
  padding: 22px clamp(20px, 3vw, 30px) 28px;
}

.history-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.76);
}

.history-card .panel-head {
  margin-bottom: 16px;
}

.history-ranks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.generator {
  --generator-padding: clamp(20px, 3vw, 30px);
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(300px, 0.88fr);
  align-items: start;
  gap: 20px 26px;
  position: relative;
  overflow: hidden;
  border-color: #fff;
  padding: var(--generator-padding);
  background: #fff;
  box-shadow: 0 22px 58px rgba(87, 55, 146, 0.17);
}

.generator .panel-head {
  position: relative;
  isolation: isolate;
  grid-column: 1 / -1;
  margin-bottom: 0;
  margin: calc(-1 * var(--generator-padding)) calc(-1 * var(--generator-padding)) 0;
  padding: 23px var(--generator-padding);
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 16px 16px;
  background: linear-gradient(112deg, #763fc2 0%, #635dd8 34%, #45bde5 68%, #f17c9f 100%);
  background-size: 220% 220%;
  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.22);
  animation: hero-gradient-flow 18s ease-in-out infinite alternate;
}

.generator .panel-head::after {
  position: absolute;
  z-index: 0;
  top: -130%;
  left: 48%;
  width: 24%;
  height: 360%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  content: "";
  filter: blur(28px);
  pointer-events: none;
  animation: hero-sheen 13s ease-in-out infinite alternate;
}

.generator .heading-group,
.generator .meta {
  position: relative;
  z-index: 1;
}

.generator .eyebrow {
  color: rgba(255, 255, 255, 0.82);
}

.generator h1 {
  color: #fff;
}

.generator .controls {
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}

.generator-actions {
  grid-column: 1;
  grid-row: 3;
}

.generator-actions .cta {
  width: 100%;
  max-width: none;
  margin: 0;
}

.generator-actions .cta-note {
  text-align: left;
}

.generator-actions .tracking-status {
  margin-bottom: 0;
}

.generator .results {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 0;
  min-width: 0;
}

.generator .results[hidden] {
  display: none;
}

.register-play-button {
  display: block;
  width: min(100%, 340px);
  margin: 18px auto 4px;
  padding: 11px 16px;
  border: 1px solid #d5cce5;
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.16s, transform 0.16s, box-shadow 0.16s;
}

.register-play-button:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #f3effa;
  box-shadow: 0 5px 15px rgba(56, 36, 95, 0.1);
}

.register-play-button:disabled {
  color: #777386;
  cursor: default;
}

.tracking-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.secondary-button {
  flex: 0 0 auto;
  padding: 11px 17px;
  border: 1px solid #d9d3e7;
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.16s, transform 0.16s, box-shadow 0.16s;
}

.secondary-button:hover {
  transform: translateY(-1px);
  background: #f8f6fc;
  box-shadow: 0 5px 14px rgba(56, 36, 95, 0.09);
}

.tracking-status {
  min-height: 1.2em;
  margin: 10px 0 0;
  color: var(--accent-strong);
  font-size: 0.8rem;
}

.tracking-summary {
  margin: 12px 0;
  padding: 11px 14px;
  border: 1px solid #d7caee;
  border-radius: 12px;
  background: #ece4ff;
  color: #43305f;
  font-size: 0.86rem;
  font-weight: 600;
}

.performance-module {
  margin: 18px 0 20px;
  padding: 16px;
  border: 1px solid #ded5f0;
  border-radius: 15px;
  background: #f4f0ff;
}

.performance-heading,
.performance-legend {
  display: flex;
  align-items: center;
}

.performance-heading {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.performance-heading h3 {
  margin: 0;
  font-size: 0.96rem;
}

.performance-legend {
  gap: 7px;
  color: var(--muted);
  font-size: 0.74rem;
}

.performance-legend i {
  width: 2px;
  height: 14px;
  background: var(--hot);
}

.strategy-performance {
  display: grid;
  gap: 13px;
}

.performance-row {
  display: grid;
  gap: 6px;
}

.performance-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  color: var(--text);
  font-size: 0.8rem;
}

.performance-details span {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.performance-bar {
  position: relative;
  height: 10px;
  overflow: visible;
  border-radius: 999px;
  background: #e8e5ef;
}

.performance-observed {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #a279e0, var(--accent));
}

.performance-baseline {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: 2px;
  background: var(--hot);
  transform: translateX(-1px);
}

.performance-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.tracking-list {
  display: grid;
  gap: 8px;
  max-height: 330px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tracking-item {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-left: 4px solid #d39a58;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.86);
  color: #555266;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.tracking-item.is-resolved {
  border-left-color: var(--ok);
}

.empty-state {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.generator::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), transparent 82%);
  content: "";
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 22px;
}

.heading-group {
  min-width: 0;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  line-height: 1.16;
}

h2 {
  font-size: clamp(1.2rem, 2vw, 1.42rem);
  line-height: 1.25;
}

.meta {
  max-width: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.generator .meta {
  max-width: 440px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.17);
  color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  text-align: right;
}

.controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 20px 18px;
}

.control {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.control legend,
.control > span:not(.hint) {
  display: block;
  padding: 0;
  margin-bottom: 7px;
  color: #555367;
  font-size: 0.74rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hint {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.control-block select,
.control-block input[type="date"] {
  width: 100%;
}

.segmented {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.segmented button {
  flex: 1 1 auto;
  min-width: max-content;
  padding: 9px 10px;
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  font-size: 0.88rem;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}

.segmented button:hover:not(:disabled) {
  border-color: var(--accent);
}

.segmented button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.segmented button.is-active {
  background: linear-gradient(180deg, #7650b4, var(--accent));
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 5px 14px rgba(56, 36, 95, 0.18);
}

select,
input[type="date"] {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 9px 8px;
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-size: 0.85rem;
  text-overflow: ellipsis;
  color-scheme: light;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

.cta {
  display: block;
  width: min(100%, 380px);
  margin: 26px auto 0;
  padding: 15px;
  background: linear-gradient(110deg, #794ac4, #43216f 78%);
  color: #fff;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(67, 33, 111, 0.3);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}

.cta:hover {
  filter: brightness(1.1) saturate(1.12);
  box-shadow: 0 12px 32px rgba(67, 33, 111, 0.36);
}

.cta:active {
  transform: translateY(1px);
}

.results {
  margin-top: 24px;
  padding: 23px 16px 8px;
  border: 1px solid #e8e3f2;
  border-radius: 15px;
  background: linear-gradient(145deg, #f8f7fc, #f0eff8);
  text-align: center;
}

.results-label {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.balls {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 13px;
  margin: 0;
  padding: 0;
}

.balls li {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, #fff, #e1d3ff 84%);
  border: 2px solid #a98bdd;
  color: #392064;
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  animation: pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
  box-shadow: 0 7px 18px rgba(66, 54, 94, 0.12), inset 0 1px rgba(255, 255, 255, 0.9);
}

.balls li:nth-child(5n + 1) {
  background: radial-gradient(circle at 32% 24%, #fff, #dfd0ff 84%);
  border-color: #a17bdc;
}

.balls li:nth-child(5n + 2) {
  background: radial-gradient(circle at 32% 24%, #fff, #cfe7ff 84%);
  border-color: #78aee5;
}

.balls li:nth-child(5n + 3) {
  background: radial-gradient(circle at 32% 24%, #fff, #ffddd3 84%);
  border-color: #e9957d;
}

.balls li:nth-child(5n + 4) {
  background: radial-gradient(circle at 32% 24%, #fff, #cdf0e1 84%);
  border-color: #72bd9c;
}

.balls li:nth-child(5n) {
  background: radial-gradient(circle at 32% 24%, #fff, #ffebbd 84%);
  border-color: #e3b85a;
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.4) translateY(14px);
  }
}

@keyframes liquid-main {
  from {
    transform: translate3d(2vw, -1vh, 0) rotate(-9deg) scale(0.94);
    border-radius: 58% 42% 54% 46% / 42% 58% 42% 58%;
  }
  to {
    transform: translate3d(-5vw, 5vh, 0) rotate(8deg) scale(1.08);
    border-radius: 40% 60% 44% 56% / 58% 39% 61% 42%;
  }
}

@keyframes liquid-orbit {
  from {
    transform: translate3d(0, 2vh, 0) rotate(11deg) scale(0.94);
    border-radius: 47% 53% 62% 38% / 51% 41% 59% 49%;
  }
  to {
    transform: translate3d(-4vw, -5vh, 0) rotate(-13deg) scale(1.12);
    border-radius: 61% 39% 43% 57% / 39% 58% 42% 61%;
  }
}

@keyframes liquid-drop {
  from {
    transform: translate3d(0, 0, 0) rotate(-8deg) scale(1);
  }
  to {
    transform: translate3d(-5vw, -7vh, 0) rotate(13deg) scale(0.9);
  }
}

@keyframes liquid-mini {
  from {
    transform: translate3d(1vw, -2vh, 0) rotate(-10deg) scale(0.92);
    border-radius: 58% 42% 54% 46% / 42% 58% 42% 58%;
  }
  to {
    transform: translate3d(-3vw, 4vh, 0) rotate(13deg) scale(1.12);
    border-radius: 43% 57% 39% 61% / 55% 41% 59% 45%;
  }
}

@keyframes liquid-left {
  from {
    transform: translate3d(0, 2vh, 0) rotate(-12deg) scale(0.94);
    border-radius: 45% 55% 61% 39% / 40% 60% 40% 60%;
  }
  to {
    transform: translate3d(6vw, -5vh, 0) rotate(10deg) scale(1.08);
    border-radius: 60% 40% 44% 56% / 58% 37% 63% 42%;
  }
}

@keyframes liquid-bottom {
  from {
    transform: translate3d(-2vw, 0, 0) rotate(8deg) scale(0.9);
  }
  to {
    transform: translate3d(5vw, -6vh, 0) rotate(-12deg) scale(1.1);
  }
}

@keyframes liquid-edge {
  from {
    transform: translate3d(0, 0, 0) rotate(13deg) scale(1.04);
    border-radius: 61% 39% 43% 57% / 39% 58% 42% 61%;
  }
  to {
    transform: translate3d(-4vw, -5vh, 0) rotate(-9deg) scale(0.92);
    border-radius: 42% 58% 59% 41% / 56% 42% 58% 44%;
  }
}

@keyframes hero-gradient-flow {
  from {
    background-position: 0% 48%;
  }
  to {
    background-position: 100% 52%;
  }
}

@keyframes hero-sheen {
  from {
    transform: translateX(-110%) rotate(-12deg) scale(0.88);
    opacity: 0.25;
  }
  to {
    transform: translateX(250%) rotate(12deg) scale(1.08);
    opacity: 0.55;
  }
}

.why {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.why span {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.78rem;
  color: var(--muted);
}

.why b {
  color: var(--text);
}

.heatmap {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
}

.heatmap div {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: clamp(0.62rem, 2vw, 0.82rem);
  font-variant-numeric: tabular-nums;
  color: #0b0f14;
  font-weight: 600;
}

.legend {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
}

.legend-swatch {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: inline-block;
}

.legend-swatch.cold {
  background: #b9d4f5;
}

.legend-swatch.hot {
  background: var(--hot);
}

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.two-col .panel {
  margin: 0;
}

.rank {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.rank li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 7px 11px;
  font-size: 0.88rem;
}

.rank .num {
  min-width: 34px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-strong);
}

.rank .bar {
  flex: 1;
  height: 7px;
  background: #e5e5ef;
  border-radius: 999px;
  overflow: hidden;
}

.rank .bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--hot));
  border-radius: 999px;
}

.rank .val {
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.recent {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.draw {
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 15px;
  box-shadow: 0 7px 18px rgba(56, 36, 95, 0.045);
}

.draw-head {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.78rem;
  margin-bottom: 8px;
}

.draw-nums {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.draw-nums span {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.notice {
  border-left: 4px solid var(--hot);
  background: linear-gradient(135deg, #fff, #fff5f0);
}

.notice p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.notice strong {
  color: var(--text);
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 20px 0 34px;
  color: var(--muted);
  font-size: 0.8rem;
}

.site-footer p {
  margin: 4px 0;
}

.site-footer p:last-child {
  color: #514d62;
}

.info-link {
  display: inline-block;
  margin-top: 5px;
  color: var(--accent-strong);
  font-size: 0.75rem;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.info-link:hover {
  color: var(--accent);
  border-bottom-style: solid;
}

.lead {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.92rem;
}

.lead strong {
  color: var(--text);
}

.sub {
  margin: 22px 0 8px;
  font-size: 0.95rem;
  color: var(--text);
}

.defs {
  gap: 14px;
  margin-bottom: 18px;
}

.def {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 15px;
}

.def h3 {
  margin: 0 0 6px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-strong);
}

.def p {
  margin: 0;
  color: var(--muted);
  font-size: 0.87rem;
}

.strategy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.strategy-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 17px;
  box-shadow: 0 8px 20px rgba(56, 36, 95, 0.045);
  transition: border-color 0.18s, transform 0.18s, background 0.18s;
}

.strategy-card:nth-child(1) {
  background: #d4e6ff;
}

.strategy-card:nth-child(2) {
  background: #e0d5ff;
}

.strategy-card:nth-child(3) {
  background: #ffddd1;
}

.strategy-card:nth-child(4) {
  background: #cef0df;
}

.strategy-card:nth-child(5) {
  background: #ffe9b8;
}

.strategy-card:hover {
  transform: translateY(-2px);
  border-color: #c8bfdc;
  background: #fff;
}

.strategy-card.is-default {
  border-color: var(--accent);
}

.strategy-card h3 {
  margin: 0 0 7px;
  font-size: 0.95rem;
}

.strategy-card.is-default h3::after {
  content: "predeterminada";
  margin-left: 8px;
  font-size: 0.66rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
}

.strategy-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.87rem;
}

.inline-notice {
  margin-top: 18px;
}

.inline-notice p {
  margin-top: 0;
}

.cta-note {
  margin: 9px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
}

.cta-note strong {
  color: var(--accent-strong);
}

.strategy-card .backtest {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

.tests {
  list-style: none;
  counter-reset: test;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.tests li {
  counter-increment: test;
  display: grid;
  grid-template-columns: 24px minmax(0, 1.3fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 0.85rem;
}

.tests li::before {
  content: counter(test);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.78rem;
}

.t-name {
  color: var(--text);
}

.t-res {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.t-verdict {
  color: var(--ok);
  font-size: 0.76rem;
  text-align: right;
  white-space: nowrap;
}

.verdict {
  margin-top: 16px;
  background: #f0edfa;
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 14px 16px;
}

.verdict p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.verdict strong {
  color: var(--text);
}

a {
  color: var(--accent-strong);
}

a:hover {
  color: #d5f2ff;
}

:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 3px;
}

::selection {
  background: rgba(85, 189, 233, 0.35);
  color: #fff;
}

@media (max-width: 700px) {
  .blob-main {
    top: 28vh;
    right: -7vw;
    width: 58vw;
    height: 42vh;
  }

  .blob-orbit {
    top: 49vh;
    right: 42vw;
    width: 30vw;
    height: 25vh;
  }

  .blob-drop {
    right: 10vw;
    bottom: -8vh;
    width: 30vw;
    height: 28vh;
  }

  .blob-mini {
    top: 26vh;
    right: 54vw;
    width: 76px;
    height: 98px;
  }

  .blob-left {
    top: 55vh;
    left: -15vw;
    width: 120px;
    height: 190px;
    opacity: 0.7;
  }

  .blob-bottom {
    bottom: -4vh;
    left: 25vw;
    width: 100px;
    height: 116px;
  }

  .blob-edge {
    top: 67vh;
    right: -18vw;
    width: 122px;
    height: 190px;
    opacity: 0.72;
  }

  .panel {
    scroll-margin-top: 145px;
  }

  .wrap {
    width: min(calc(100% - 28px), 560px);
  }

  .header-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .site-nav {
    justify-content: flex-start;
    margin-inline: -7px;
  }

  .controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-tracking {
    grid-column: 1 / -1;
  }

  .history-ranks {
    grid-template-columns: minmax(0, 1fr);
  }

  .generator {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .generator .panel-head,
  .generator .controls,
  .generator-actions,
  .generator .results {
    grid-column: 1;
    grid-row: auto;
  }

  .generator .results {
    min-height: 240px;
  }

  .generator .meta {
    text-align: left;
  }

  .tests li {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .t-res,
  .t-verdict {
    grid-column: 2;
    text-align: left;
    white-space: normal;
  }
}

@media (max-width: 560px) {
  main {
    gap: 15px;
    padding: 18px 0 32px;
  }

  .panel-head {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 18px;
  }

  .strategy-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .history-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .strategy-content {
    padding-top: 18px;
  }

  .tracking-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .performance-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .secondary-button {
    width: 100%;
  }

  .controls {
    grid-template-columns: minmax(0, 1fr);
    gap: 17px;
  }

  .overview-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .overview-tracking {
    grid-column: auto;
  }

  .generator .controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .recent {
    grid-template-columns: minmax(0, 1fr);
  }

  .segmented button {
    padding: 9px 8px;
  }

  .results {
    padding: 20px 10px 7px;
  }

  .balls li {
    width: 56px;
    height: 56px;
    font-size: 1.25rem;
  }

  .panel {
    padding: 18px;
  }

  .generator {
    --generator-padding: 18px;
    padding: 18px;
  }

  .site-nav a {
    padding-inline: 8px;
    font-size: 0.8rem;
  }

  .tests li {
    gap: 7px;
    padding: 9px 10px;
    font-size: 0.82rem;
  }
}

@media (max-width: 370px) {
  .balls {
    gap: 8px;
  }

  .balls li {
    width: 50px;
    height: 50px;
    font-size: 1.1rem;
  }

  .draw-head {
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}