:root {
    --bg: #050816;
    --bg-2: #09111f;
    --surface: rgba(13, 23, 42, 0.76);
    --surface-2: rgba(18, 30, 54, 0.82);
    --surface-3: rgba(8, 14, 28, 0.82);
    --text: #e8f1ff;
    --ink: #f8fbff;
    --muted: #93a4bd;
    --line: rgba(139, 164, 219, 0.18);
    --line-strong: rgba(91, 208, 255, 0.34);
    --blue: #4f7cff;
    --cyan: #2fe7ff;
    --violet: #8a5cff;
    --magenta: #d946ef;
    --green: #31e7a6;
    --red: #ff5f7a;
    --amber: #ffc65a;
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
    --glow: 0 0 36px rgba(47, 231, 255, 0.16);
    --font-ui: "Liter", "Inter", "Segoe UI Variable Display", "Aptos Display", system-ui, sans-serif;
    --font-text: "Liter", "Inter", "Segoe UI Variable Text", "Aptos", system-ui, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 6% 88%, rgba(34, 211, 238, 0.12), transparent 30%),
        radial-gradient(circle at 98% 62%, rgba(217, 70, 239, 0.10), transparent 32%),
        radial-gradient(circle at 18% 8%, rgba(79, 124, 255, 0.22), transparent 34%),
        radial-gradient(circle at 82% 0%, rgba(138, 92, 255, 0.18), transparent 36%),
        linear-gradient(135deg, #050816 0%, #08101f 48%, #070a16 100%);
    color: var(--text);
    font-family: var(--font-text);
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

body::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.68), transparent 74%);
}

body::after {
    background-image:
        linear-gradient(115deg, transparent 0 42%, rgba(34, 211, 238, 0.06) 42.4%, transparent 43% 100%),
        linear-gradient(65deg, transparent 0 56%, rgba(139, 92, 246, 0.055) 56.4%, transparent 57% 100%),
        radial-gradient(circle, rgba(34, 211, 238, 0.20) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(217, 70, 239, 0.14) 0 1px, transparent 1.5px);
    background-position: 12px 18px, 42px 56px;
    background-size: 120px 120px, 180px 180px;
    opacity: 0.24;
}

body.menu-open {
    overflow: hidden;
}

.mobile-header,
.nav-backdrop {
    display: none;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 260px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    padding: 24px 18px;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(6, 12, 28, 0.96), rgba(5, 8, 22, 0.90));
    color: var(--text);
    box-shadow: 18px 0 70px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(18px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

.brand-mark {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 12px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.84), transparent 22%),
        linear-gradient(135deg, var(--cyan), var(--violet));
    color: #04101f;
    font-weight: 950;
    box-shadow: 0 0 30px rgba(47, 231, 255, 0.34);
}

.brand strong,
.brand small {
    display: block;
}

.brand strong {
    color: var(--ink);
    font-family: var(--font-ui);
    font-weight: 800;
}

.brand small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

nav {
    display: grid;
    gap: 7px;
}

nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 11px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #b8c5dc;
    font-weight: 800;
    text-decoration: none;
    transition: transform 200ms ease, border-color 200ms ease, background 200ms ease, box-shadow 200ms ease, color 200ms ease;
}

nav a::before {
    content: "";
    position: absolute;
    inset: 8px auto 8px -10px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--cyan), var(--violet));
    opacity: 0;
    box-shadow: 0 0 16px rgba(47, 231, 255, 0.58);
    transition: opacity 200ms ease, transform 200ms ease;
}

nav a:hover,
nav a.active {
    border-color: rgba(47, 231, 255, 0.24);
    background: linear-gradient(135deg, rgba(79, 124, 255, 0.16), rgba(47, 231, 255, 0.08));
    color: #fff;
    box-shadow: inset 0 0 22px rgba(47, 231, 255, 0.08);
}

nav a:hover {
    transform: translateX(3px);
}

nav a:hover::before,
nav a.active::before {
    opacity: 1;
    transform: translateX(2px);
}

.nav-icon {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.78;
    transition: opacity 200ms ease, filter 200ms ease, color 200ms ease;
}

nav a:hover .nav-icon,
nav a.active .nav-icon {
    color: var(--cyan);
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(47, 231, 255, 0.65));
}

.sidebar-note {
    display: grid;
    gap: 6px;
    margin-top: auto;
    padding: 14px;
    border: 1px solid rgba(47, 231, 255, 0.18);
    border-radius: 12px;
    background: rgba(47, 231, 255, 0.06);
    color: var(--muted);
    line-height: 1.45;
}

.sidebar-note strong {
    color: var(--cyan);
}

.shell {
    position: relative;
    margin-left: 260px;
    padding: 28px 32px 46px;
    min-width: 0;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.eyebrow {
    margin: 0 0 5px;
    color: var(--cyan);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

h1,
h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-ui);
    font-weight: 800;
}

h1 {
    font-size: 31px;
    line-height: 1.1;
}

h2 {
    font-size: 18px;
}

.section-copy {
    max-width: 700px;
    margin: 7px 0 0;
    color: var(--muted);
    line-height: 1.5;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(10, 18, 35, 0.74);
    color: var(--muted);
    font-size: 13px;
    box-shadow: var(--glow);
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--green);
    box-shadow: 0 0 16px var(--green);
}

.disclaimer-banner,
.intro-strip,
.hero-panel,
.demo-card,
.value-strip,
.intelligence-card,
.risk-story article,
.analyst-hero,
.simulator-hero,
.analyst-command article,
.metric,
.panel,
.table-panel,
.lesson,
.chat-panel,
.sources-panel,
.auth-panel,
.explanation-box,
.source-item,
.history-item,
.post-item,
.private-access-card {
    border: 1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(15, 27, 51, 0.78), rgba(9, 16, 32, 0.78));
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.disclaimer-banner {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-left: 4px solid var(--cyan);
    border-radius: 12px;
    color: #b7c6df;
    line-height: 1.5;
}

.intro-strip {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 16px 18px;
    border-radius: 14px;
}

.intro-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(34, 211, 238, 0.12), transparent 34%),
        radial-gradient(circle at 88% 24%, rgba(139, 92, 246, 0.20), transparent 26%);
    opacity: 0.75;
}

.intro-strip > * {
    position: relative;
    z-index: 1;
}

.intro-strip strong {
    color: var(--ink);
    white-space: nowrap;
    font-size: 16px;
}

.intro-strip span {
    color: var(--muted);
    line-height: 1.5;
}

.hero-panel,
.simulator-hero,
.analyst-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 22px;
    align-items: center;
    margin-bottom: 18px;
    padding: 30px;
    border-radius: 18px;
}

.hero-panel {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) auto;
}

.simulator-hero,
.analyst-hero {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.hero-panel::before,
.analyst-hero::before,
.simulator-hero::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, rgba(47, 231, 255, 0.18), transparent 38%),
        radial-gradient(circle at 78% 20%, rgba(138, 92, 255, 0.22), transparent 34%);
}

.hero-panel::after,
.analyst-hero::after,
.simulator-hero::after,
.metric::before,
.demo-card::before,
.panel::before,
.table-panel::before,
.lesson::before,
.auth-panel::before,
.chat-panel::before,
.sources-panel::before,
.risk-story article::before,
.analyst-command article::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0.12), transparent 28%, transparent 72%, rgba(34, 211, 238, 0.08));
    opacity: 0.28;
}

.hero-panel > *,
.simulator-hero > *,
.analyst-hero > * {
    position: relative;
    z-index: 1;
}

.hero-panel h2 {
    max-width: 760px;
    font-size: clamp(32px, 5vw, 58px);
    line-height: 1.02;
    letter-spacing: 0;
}

.simulator-hero h2,
.analyst-hero h2 {
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.05;
}

.hero-panel p,
.simulator-hero p,
.analyst-hero p {
    max-width: 820px;
    margin: 14px 0 0;
    color: #b7c6df;
    font-size: 16px;
    line-height: 1.7;
}

.neon-title span {
    display: inline;
}

.neon-title span:nth-child(odd) {
    background: linear-gradient(100deg, #f8fbff 0%, var(--cyan) 28%, var(--green) 52%, var(--blue) 74%, var(--magenta) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow:
        0 0 24px rgba(34, 211, 238, 0.20),
        0 0 38px rgba(217, 70, 239, 0.11);
}

.neon-title span:nth-child(even) {
    background: linear-gradient(100deg, #f5f3ff 0%, var(--blue) 24%, var(--violet) 52%, var(--magenta) 78%, var(--green) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow:
        0 0 24px rgba(217, 70, 239, 0.18),
        0 0 38px rgba(47, 231, 255, 0.10);
}

.hero-orbit {
    position: relative;
    display: grid;
    min-height: 220px;
    place-items: center;
}

.hero-orbit::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(47, 231, 255, 0.24);
    border-radius: 50%;
    box-shadow: inset 0 0 44px rgba(79, 124, 255, 0.15), 0 0 44px rgba(47, 231, 255, 0.12);
}

.hero-orbit span,
.simulator-steps span,
.analyst-prompts span {
    position: absolute;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(7, 14, 30, 0.82);
    color: #dce8ff;
    font-size: 12px;
    font-weight: 850;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.20);
}

.hero-orbit .orbit-core {
    position: static;
    display: grid;
    width: 86px;
    height: 86px;
    place-items: center;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--cyan), var(--violet));
    color: #040b18;
    font-size: 28px;
    box-shadow: 0 0 52px rgba(47, 231, 255, 0.28);
}

.hero-orbit span:nth-of-type(2) {
    top: 14px;
    right: 28px;
}

.hero-orbit span:nth-of-type(3) {
    left: 8px;
    bottom: 42px;
}

.hero-orbit span:nth-of-type(4) {
    right: 0;
    bottom: 20px;
}

.hero-orbit span:nth-of-type(5) {
    left: 42px;
    top: 22px;
}

.orbit-ring,
.orbit-line {
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
}

.orbit-ring {
    border: 1px solid rgba(34, 211, 238, 0.20);
    box-shadow: inset 0 0 28px rgba(34, 211, 238, 0.08);
}

.ring-a {
    width: 260px;
    height: 120px;
    transform: rotate(-18deg);
}

.ring-b {
    width: 120px;
    height: 260px;
    transform: rotate(24deg);
}

.orbit-line {
    width: 190px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.55), transparent);
}

.line-a {
    transform: rotate(36deg);
}

.line-b {
    transform: rotate(-42deg);
}

.hero-actions {
    display: grid;
    gap: 10px;
    justify-content: end;
}

.hero-actions a,
.demo-card a,
.inline-link,
.chat-form button,
.watchlist-form button,
.private-signal-form button,
.button-row button,
.text-button,
.private-access-actions a {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 16px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--blue), var(--violet) 58%, var(--cyan));
    color: #fff;
    font: inherit;
    font-weight: 900;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 18px 48px rgba(34, 211, 238, 0.14);
    transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}

.hero-actions a:hover,
.demo-card a:hover,
.inline-link:hover,
.chat-form button:hover,
.watchlist-form button:hover,
.private-signal-form button:hover,
.button-row button:hover,
.text-button:hover,
.private-access-actions a:hover {
    transform: translateY(-2px);
    filter: saturate(1.12);
    box-shadow: 0 18px 42px rgba(139, 92, 246, 0.30), 0 0 26px rgba(34, 211, 238, 0.22);
}

.hero-actions a.secondary,
.button-row button.secondary,
.text-button {
    border: 1px solid rgba(34, 211, 238, 0.22);
    background: rgba(255, 255, 255, 0.06);
}

.button-row button.buy {
    background: linear-gradient(135deg, var(--green), #1fae7c 70%);
    box-shadow: 0 18px 48px rgba(49, 231, 166, 0.18);
}

.button-row button.sell {
    background: linear-gradient(135deg, var(--red), #c23f56 70%);
    box-shadow: 0 18px 48px rgba(255, 95, 122, 0.18);
}

.private-cta {
    display: flex;
    justify-content: center;
    margin: 4px 0 22px;
}

.private-cta-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 17px 30px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--cyan), var(--violet) 55%, var(--magenta));
    background-size: 220% 220%;
    color: #fff;
    font: inherit;
    font-weight: 900;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    animation:
        private-cta-glow 2.8s ease-in-out infinite,
        private-cta-gradient 7s ease infinite;
}

.private-cta-button:hover {
    transform: translateY(-2px) scale(1.02);
    filter: saturate(1.15);
}

@keyframes private-cta-glow {
    0%, 100% {
        box-shadow: 0 10px 30px rgba(47, 231, 255, 0.20), 0 0 0 rgba(217, 70, 239, 0);
    }
    50% {
        box-shadow: 0 14px 46px rgba(139, 92, 246, 0.38), 0 0 34px rgba(217, 70, 239, 0.30);
    }
}

@keyframes private-cta-gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .private-cta-button {
        animation: none;
    }
}

.value-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    margin-bottom: 18px;
    border-radius: 16px;
}

.value-strip div {
    display: grid;
    gap: 6px;
    padding: 18px;
    border-right: 1px solid var(--line);
}

.value-strip div:last-child {
    border-right: 0;
}

.value-strip strong {
    color: var(--cyan);
    font-family: var(--font-ui);
    font-size: 24px;
}

.value-strip span {
    color: var(--muted);
    font-weight: 800;
}

.value-icon,
.metric-icon,
.card-icon {
    position: relative;
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(34, 211, 238, 0.22);
    border-radius: 14px;
    background:
        radial-gradient(circle at 35% 30%, rgba(34, 211, 238, 0.34), rgba(139, 92, 246, 0.14) 48%, rgba(2, 6, 23, 0.30));
    box-shadow: inset 0 0 20px rgba(34, 211, 238, 0.10), 0 0 22px rgba(34, 211, 238, 0.10);
}

.value-icon::before,
.metric-icon::before,
.card-icon::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: inherit;
}

.value-icon::after,
.metric-icon::after,
.card-icon::after {
    content: "";
    position: absolute;
    inset: 19px;
    border-radius: 999px;
    background: var(--cyan);
    box-shadow: 0 0 14px var(--cyan);
}

.target-visual::before {
    border-radius: 999px;
}

.profile-visual::before {
    clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.kpi-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.metric {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 17px;
    border-radius: 14px;
}

.metric::after {
    content: "";
    position: absolute;
    inset: auto 16px 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cyan), transparent);
    opacity: 0.70;
}

.metric span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.metric strong {
    display: block;
    margin-top: 10px;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 30px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.metric.accent {
    border-color: rgba(47, 231, 255, 0.32);
    background: linear-gradient(180deg, rgba(47, 231, 255, 0.13), rgba(9, 16, 32, 0.78));
}

.metric small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.panel-note {
    margin-top: 12px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
    position: relative;
    z-index: 1;
}

.linked-channels-list {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.linked-channels-list li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--ink);
    font-size: 13px;
}

.linked-channels-list li small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
}

.pairing-code-box {
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(47, 231, 255, 0.28);
    border-radius: 12px;
    background: rgba(47, 231, 255, 0.08);
}

.pairing-code-box strong {
    display: block;
    font-family: "Consolas", "SFMono-Regular", monospace;
    font-size: 22px;
    letter-spacing: 0.04em;
    color: var(--cyan);
}

.pairing-code-box span {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
}

.demo-grid,
.chart-grid,
.education-grid,
.risk-story,
.profile-grid,
.analyst-command,
.intelligence-grid,
.private-grid,
.learning-columns,
.concept-grid {
    display: grid;
    gap: 18px;
}

.demo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 18px;
}

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

.risk-story,
.analyst-command {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.intelligence-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.75fr) minmax(220px, 0.75fr);
    margin-bottom: 18px;
}

.demo-card,
.intelligence-card,
.lesson,
.auth-panel,
.chat-panel,
.sources-panel,
.table-panel,
.panel,
.risk-story article,
.analyst-command article,
.private-access-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 18px;
    min-width: 0;
}

.demo-card {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 180px;
}

.demo-card.featured,
.intelligence-card:first-child,
.chat-panel,
.panel.wide,
.auth-panel.wide {
    border-color: rgba(138, 92, 255, 0.42);
    background: linear-gradient(180deg, rgba(138, 92, 255, 0.16), rgba(9, 16, 32, 0.78));
}

.demo-card strong,
.intelligence-card strong,
.analyst-command strong,
.lesson h2,
.panel h2,
.table-panel h2,
.auth-panel h2,
.chat-panel h2,
.sources-panel h2 {
    color: var(--ink);
}

.demo-card p,
.intelligence-card p,
.lesson p,
.private-access-card p,
.history-item p,
.post-item p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.panel {
    min-height: 300px;
}

.panel.wide,
.auth-panel.wide {
    grid-column: 1 / -1;
}

.panel canvas {
    position: relative;
    z-index: 1;
    width: 100% !important;
    max-height: 260px;
    margin-top: 18px;
    filter:
        drop-shadow(0 18px 38px rgba(0, 0, 0, 0.30))
        drop-shadow(0 0 18px rgba(34, 211, 238, 0.08));
}

.panel::after {
    content: "";
    position: absolute;
    inset: 12px;
    pointer-events: none;
    border-radius: 12px;
    background:
        linear-gradient(90deg, rgba(34, 211, 238, 0.12) 1px, transparent 1px),
        linear-gradient(rgba(139, 92, 246, 0.09) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at 50% 48%, rgba(0, 0, 0, 0.40), transparent 68%);
    opacity: 0.50;
}

.panel h2::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 9px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.80);
    vertical-align: 1px;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

input,
select,
textarea {
    width: min(390px, 100%);
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    outline: none;
    background: rgba(4, 10, 22, 0.74);
    color: var(--text);
    font: inherit;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(47, 231, 255, 0.58);
    box-shadow: 0 0 0 3px rgba(47, 231, 255, 0.10);
}

input::placeholder,
textarea::placeholder {
    color: #71839d;
}

textarea {
    resize: vertical;
    line-height: 1.5;
}

.table-panel {
    margin-top: 18px;
}

.table-panel.no-margin {
    margin-top: 0;
}

.table-wrap {
    overflow-x: auto;
    border-radius: 14px;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
}

th,
td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
}

th {
    color: #7f91ad;
    font-size: 12px;
    text-transform: uppercase;
}

td {
    color: #dbe7fb;
}

tr:hover td {
    background: rgba(47, 231, 255, 0.035);
}

.asset-cell,
.risk-cell,
.result-cell {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.asset-cell {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
}

.asset-cell small {
    color: var(--muted);
}

.badge,
.confidence,
.premium-badge,
.risk-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.badge.green,
.premium-badge.low {
    border-color: rgba(49, 231, 166, 0.32);
    background: rgba(49, 231, 166, 0.12);
    color: var(--green);
}

.badge.red,
.premium-badge.high {
    border-color: rgba(255, 95, 122, 0.32);
    background: rgba(255, 95, 122, 0.12);
    color: var(--red);
}

.badge.blue,
.confidence,
.premium-badge.ai {
    border-color: rgba(47, 231, 255, 0.32);
    background: rgba(47, 231, 255, 0.12);
    color: var(--cyan);
}

.badge.amber,
.premium-badge.medium {
    border-color: rgba(255, 198, 90, 0.32);
    background: rgba(255, 198, 90, 0.12);
    color: var(--amber);
}

.inline-link,
.table-action {
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 999px;
}

.table-action {
    display: inline-flex;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(79, 124, 255, 0.90), rgba(47, 231, 255, 0.72));
}

.row-spark {
    width: 88px;
    height: 24px;
    overflow: visible;
}

.row-spark path,
.row-spark .spark-line {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter:
        drop-shadow(0 0 8px rgba(34, 211, 238, 0.70))
        drop-shadow(0 0 18px rgba(139, 92, 246, 0.24));
}

.row-spark .spark-glow {
    stroke: rgba(34, 211, 238, 0.50);
    stroke-width: 7;
    opacity: 0.72;
    filter: blur(2px) drop-shadow(0 0 15px rgba(34, 211, 238, 0.72));
}

.row-spark circle,
.row-spark .spark-node {
    fill: var(--cyan);
    stroke: rgba(255, 255, 255, 0.48);
    stroke-width: 0.75;
    filter:
        drop-shadow(0 0 9px rgba(34, 211, 238, 0.86))
        drop-shadow(0 0 16px rgba(139, 92, 246, 0.28));
}

.row-spark.risk path,
.row-spark.risk circle,
.row-spark.risk .spark-line,
.row-spark.risk .spark-node {
    stroke: var(--red);
    fill: var(--red);
}

.row-spark.risk .spark-glow {
    stroke: rgba(255, 95, 122, 0.54);
    filter: blur(2px) drop-shadow(0 0 15px rgba(255, 95, 122, 0.66));
}

.row-spark.good path,
.row-spark.good circle,
.row-spark.good .spark-line,
.row-spark.good .spark-node {
    stroke: var(--green);
    fill: var(--green);
}

.row-spark.good .spark-glow {
    stroke: rgba(49, 231, 166, 0.54);
    filter: blur(2px) drop-shadow(0 0 15px rgba(49, 231, 166, 0.64));
}

.mini-chart,
.section-holo,
.route-visual,
.signal-map,
.node-map {
    width: 100%;
    max-width: 210px;
    height: auto;
    overflow: visible;
}

.section-holo,
.route-visual {
    max-width: 230px;
}

.mini-chart path,
.section-holo path,
.route-visual path,
.signal-map path,
.node-map path {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.42));
}

.mini-chart circle,
.section-holo circle,
.route-visual circle,
.signal-map circle,
.node-map circle {
    fill: var(--cyan);
    filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.60));
}

.chart-glow.violet {
    stroke: var(--violet);
}

.chart-glow.green {
    stroke: var(--green);
}

.chart-glow.cyan {
    stroke: var(--cyan);
}

.radial-meter,
.progress-orb {
    display: grid;
    width: 112px;
    height: 112px;
    place-items: center;
    border: 1px solid rgba(34, 211, 238, 0.22);
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(34, 211, 238, 0.16), rgba(139, 92, 246, 0.08) 56%, rgba(2, 6, 23, 0.28));
    box-shadow: inset 0 0 30px rgba(34, 211, 238, 0.10), 0 0 30px rgba(34, 211, 238, 0.12);
}

.radial-meter span,
.progress-orb span {
    color: var(--ink);
    font-family: var(--font-ui);
    font-weight: 900;
}

.simulator-steps,
.analyst-prompts {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.simulator-steps span,
.analyst-prompts span {
    position: relative;
}

.analyst-command article {
    display: grid;
    gap: 6px;
    min-height: 110px;
}

.analyst-command span {
    color: var(--muted);
}

.analyst-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px;
}

.chat-history {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 390px;
    max-height: 58vh;
    overflow-y: auto;
    padding: 14px;
    border: 1px solid rgba(180, 215, 255, 0.15);
    border-radius: 18px;
    background: rgba(4, 10, 22, 0.55);
}

.chat-message {
    max-width: 86%;
    padding: 13px 15px;
    border-radius: 16px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.chat-message p {
    margin: 8px 0 0;
}

.chat-message.user {
    justify-self: end;
    border: 1px solid rgba(79, 124, 255, 0.32);
    background: rgba(79, 124, 255, 0.18);
}

.chat-message.assistant {
    justify-self: start;
    border: 1px solid rgba(47, 231, 255, 0.28);
    background: rgba(47, 231, 255, 0.09);
}

.chat-form,
.auth-form,
.watchlist-form,
.private-signal-form {
    display: grid;
    gap: 12px;
}

/* Quita las flechitas nativas de subir/bajar en los campos numericos (tamano,
   SL, TP): se puede escribir libremente el valor, sin el spinner encima
   estorbando -- sobre todo molesto en movil, donde son diminutas. Mantiene
   type="number" (teclado numerico en movil, validacion del navegador). */
.private-signal-form input[type="number"]::-webkit-outer-spin-button,
.private-signal-form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.private-signal-form input[type="number"] {
    -moz-appearance: textfield;
}

.chat-form {
    grid-template-columns: 1fr auto;
    margin-top: 14px;
}

.chat-form textarea {
    width: 100%;
}

.button-row,
.private-access-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-summary,
.history-list,
.tag-list,
.source-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.profile-summary p {
    color: var(--muted);
    line-height: 1.6;
}

.tag-list span,
.source-item,
.history-item,
.post-item,
.empty-state {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
}

.tag-list span {
    display: inline-flex;
    width: fit-content;
    color: var(--cyan);
    font-weight: 850;
}

.empty-state {
    place-items: center;
    min-height: 140px;
    text-align: center;
    color: var(--muted);
}

.empty-state strong {
    color: var(--ink);
}

.empty-icon {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(34, 211, 238, 0.22);
    border-radius: 14px;
    background: radial-gradient(circle at 30% 20%, rgba(34, 211, 238, 0.35), rgba(139, 92, 246, 0.14));
    box-shadow: 0 0 22px rgba(34, 211, 238, 0.16);
}

.ai-chip-visual,
.mentor-visual,
.private-access-visual {
    position: relative;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(34, 211, 238, 0.22);
    border-radius: 32px;
    background:
        radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.40), transparent 18%),
        linear-gradient(135deg, rgba(34, 211, 238, 0.32), rgba(139, 92, 246, 0.24));
    box-shadow: inset 0 0 30px rgba(34, 211, 238, 0.10), 0 0 40px rgba(34, 211, 238, 0.12);
}

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

.private-access-card {
    display: grid;
    align-content: start;
    gap: 14px;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
}

*::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, var(--cyan), var(--violet));
}

@keyframes softFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes pulseGlow {
    0%,
    100% {
        box-shadow: 0 0 42px rgba(34, 211, 238, 0.24);
    }
    50% {
        box-shadow: 0 0 70px rgba(217, 70, 239, 0.34);
    }
}

.hero-orbit .orbit-core {
    animation: pulseGlow 3.2s ease-in-out infinite;
}

.hero-orbit span:not(.orbit-core),
.simulator-steps span,
.analyst-prompts span {
    animation: softFloat 5.4s ease-in-out infinite;
}

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

@media (max-width: 1200px) {
    .hero-panel,
    .simulator-hero,
    .analyst-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
    }

    .hero-actions a {
        width: 100%;
    }
}

@media (max-width: 1100px) {
    .demo-grid,
    .chart-grid,
    .education-grid,
    .risk-story,
    .profile-grid,
    .analyst-command,
    .intelligence-grid,
    .analyst-layout,
    .private-grid,
    .value-strip {
        grid-template-columns: 1fr;
    }

    .simulator-steps,
    .analyst-prompts {
        justify-content: flex-start;
    }

    .value-strip div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .value-strip div:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 800px) {
    .mobile-header {
        position: sticky;
        top: 0;
        z-index: 40;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 64px;
        padding: 10px max(14px, env(safe-area-inset-left)) 10px max(14px, env(safe-area-inset-right));
        border-bottom: 1px solid var(--line);
        background: rgba(5, 10, 24, 0.92);
        backdrop-filter: blur(16px);
    }

    .mobile-brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--ink);
        font-weight: 900;
        text-decoration: none;
    }

    .mobile-brand .brand-mark {
        width: 36px;
        height: 36px;
    }

    .menu-toggle {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 46px;
        height: 46px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.06);
        cursor: pointer;
    }

    .menu-toggle span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: var(--ink);
    }

    .nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 20;
        background: rgba(0, 0, 0, 0.58);
    }

    body.menu-open .nav-backdrop {
        display: block;
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(86vw, 320px);
        padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
        transform: translateX(-105%);
        transition: transform 180ms ease;
    }

    body.menu-open .sidebar {
        transform: translateX(0);
    }

    .shell {
        margin-left: 0;
        padding: 14px max(12px, env(safe-area-inset-right)) 24px max(12px, env(safe-area-inset-left));
    }

    .topbar,
    .section-heading,
    .intro-strip {
        align-items: flex-start;
        flex-direction: column;
    }

    h1 {
        font-size: 25px;
        line-height: 1.15;
    }

    /* Texto de cuerpo (parrafos, descripciones de intro-strip): sin este
       ajuste heredan el tamano base de escritorio (16px), que en una
       columna tan estrecha lee como demasiado grande frente al resto de
       la jerarquia mobile ya reducida arriba. */
    p,
    .intro-strip span,
    .section-copy {
        font-size: 14px;
        line-height: 1.5;
    }

    .status-pill {
        width: 100%;
        justify-content: center;
    }

    .hero-panel,
    .simulator-hero,
    .analyst-hero {
        padding: 17px;
    }

    .hero-panel h2 {
        font-size: 34px;
    }

    .hero-orbit {
        min-height: 190px;
    }

    .section-holo,
    .route-visual,
    .ai-chip-visual {
        display: none;
    }

    .metric strong {
        font-size: 25px;
    }

    .panel,
    .table-panel,
    .lesson,
    .demo-card,
    .intelligence-card,
    .risk-story article,
    .analyst-command article,
    .chat-panel,
    .sources-panel,
    .auth-panel {
        padding: 14px;
    }

    .demo-card {
        min-height: 0;
    }

    .button-row,
    .private-access-actions,
    .chat-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .private-access-actions a,
    .hero-actions a,
    .demo-card a,
    .chat-form button,
    .watchlist-form button,
    .private-signal-form button,
    .text-button {
        width: 100%;
        min-height: 42px;
    }

    .chat-history {
        min-height: 46vh;
        max-height: 54vh;
        padding: 10px;
    }

    .chat-message {
        max-width: 94%;
    }

    input,
    select,
    textarea {
        width: 100%;
        font-size: 16px;
    }

    .responsive-cards table,
    .responsive-cards thead,
    .responsive-cards tbody,
    .responsive-cards tr,
    .responsive-cards th,
    .responsive-cards td {
        display: block;
    }

    .responsive-cards table {
        min-width: 0;
    }

    .responsive-cards thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .responsive-cards tbody {
        display: grid;
        gap: 12px;
    }

    .responsive-cards tr {
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: rgba(15, 27, 51, 0.64);
    }

    .responsive-cards td {
        display: grid;
        grid-template-columns: minmax(96px, 40%) minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        min-height: 44px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--line);
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 14px;
    }

    .responsive-cards td:last-child {
        border-bottom: 0;
    }

    .responsive-cards td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 12px;
        font-weight: 850;
        text-transform: uppercase;
    }

    .responsive-cards td[colspan] {
        display: block;
    }

    .responsive-cards td[colspan]::before {
        content: "";
        display: none;
    }
}

@media (max-width: 430px) {
    .shell {
        padding-inline: 12px;
    }

    .hero-panel h2 {
        font-size: 29px;
    }

    .hero-orbit,
    .signal-map,
    .node-map,
    .radial-meter,
    .mentor-visual,
    .progress-orb {
        display: none;
    }

    .table-panel,
    .panel,
    .lesson,
    .chat-panel,
    .sources-panel,
    .auth-panel,
    .metric {
        border-radius: 14px;
    }

    .responsive-cards td {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* Sprint 5.3 - identidad visual premium */
.hero-panel h2,
.analyst-hero h2,
.simulator-hero h2,
.intro-strip strong,
.table-panel h2,
.lesson h2,
.auth-panel h2,
.chat-panel h2,
.sources-panel h2 {
    position: relative;
    display: inline-block;
    width: fit-content;
}

.hero-panel h2::after,
.analyst-hero h2::after,
.simulator-hero h2::after,
.intro-strip strong::after,
.table-panel h2::after,
.lesson h2::after,
.auth-panel h2::after,
.chat-panel h2::after,
.sources-panel h2::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -9px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--cyan), var(--blue), var(--violet), var(--magenta), transparent);
    background-size: 240% 100%;
    opacity: 0.82;
    filter: blur(0.15px) drop-shadow(0 0 10px rgba(47, 231, 255, 0.34));
    animation: titleGlowFlow 9s ease-in-out infinite;
}

.table-panel h2::after,
.lesson h2::after,
.auth-panel h2::after,
.chat-panel h2::after,
.sources-panel h2::after {
    bottom: -7px;
    height: 1px;
    opacity: 0.58;
}

@keyframes titleGlowFlow {
    0% {
        background-position: 0% 50%;
        opacity: 0.52;
    }
    50% {
        background-position: 100% 50%;
        opacity: 0.88;
    }
    100% {
        background-position: 0% 50%;
        opacity: 0.52;
    }
}

.intro-strip,
.demo-card,
.intelligence-card,
.lesson,
.auth-panel,
.chat-panel,
.sources-panel,
.table-panel,
.private-access-card,
.risk-story article,
.analyst-command article {
    isolation: isolate;
}

.intro-strip::after,
.demo-card::after,
.intelligence-card::after,
.lesson::after,
.auth-panel::after,
.chat-panel::after,
.sources-panel::after,
.private-access-card::after,
.risk-story article::after,
.analyst-command article::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.08;
    background-repeat: no-repeat;
    background-position: right 18px bottom 14px;
    background-size: min(220px, 58%) auto;
}

.intro-strip > *,
.demo-card > *,
.intelligence-card > *,
.lesson > *,
.auth-panel > *,
.chat-panel > *,
.sources-panel > *,
.private-access-card > *,
.risk-story article > *,
.analyst-command article > * {
    position: relative;
    z-index: 1;
}

.analyst-hero::after,
.chat-panel::after,
.analyst-command article::after,
.demo-card.featured::after {
    background-image: url("data:image/svg+xml,%3Csvg width='260' height='160' viewBox='0 0 260 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%232fe7ff' stroke-width='1.4' stroke-linecap='round' opacity='1'%3E%3Cpath d='M28 106 74 48 128 84 178 34 232 92'/%3E%3Cpath d='M74 48 112 30 178 34M128 84 98 126 170 128 232 92'/%3E%3Ccircle cx='28' cy='106' r='5'/%3E%3Ccircle cx='74' cy='48' r='5'/%3E%3Ccircle cx='128' cy='84' r='5'/%3E%3Ccircle cx='178' cy='34' r='5'/%3E%3Ccircle cx='232' cy='92' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

.simulator-hero::after,
.risk-story article::after,
.demo-card:nth-child(2)::after {
    background-image: url("data:image/svg+xml,%3Csvg width='260' height='150' viewBox='0 0 260 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%238a5cff' stroke-width='1.35' stroke-linecap='round' opacity='1'%3E%3Cpath d='M18 100 C58 28 91 124 132 64 S210 28 242 86'/%3E%3Cpath d='M28 118 C70 64 108 132 154 86 S214 62 246 112'/%3E%3Cpath d='M36 42 H78M116 28h54M186 42h40'/%3E%3Ccircle cx='132' cy='64' r='5'/%3E%3Ccircle cx='242' cy='86' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

.learning-feature::after,
.profile-grid .auth-panel::after,
.demo-card:nth-child(3)::after {
    background-image: url("data:image/svg+xml,%3Csvg width='220' height='160' viewBox='0 0 220 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2331e7a6' stroke-width='1.4' stroke-linecap='round' opacity='1'%3E%3Cpath d='M36 122 74 86 112 104 154 52 190 72'/%3E%3Cpath d='M54 132a62 62 0 1 1 108-4'/%3E%3Cpath d='M74 86V54M112 104V38M154 52V28'/%3E%3Ccircle cx='74' cy='86' r='5'/%3E%3Ccircle cx='112' cy='104' r='5'/%3E%3Ccircle cx='154' cy='52' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

.education-grid .lesson::after,
body[data-page='education'] .intro-strip::after {
    background-image: url("data:image/svg+xml,%3Csvg width='230' height='160' viewBox='0 0 230 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffc65a' stroke-width='1.25' stroke-linecap='round' opacity='1'%3E%3Cpath d='M38 112 82 54 132 78 190 38'/%3E%3Cpath d='M44 42 H92M132 118h56M64 134h96'/%3E%3Ccircle cx='38' cy='112' r='4'/%3E%3Ccircle cx='82' cy='54' r='4'/%3E%3Ccircle cx='132' cy='78' r='4'/%3E%3Ccircle cx='190' cy='38' r='4'/%3E%3C/g%3E%3C/svg%3E");
}

body[data-page='community'] .intro-strip::after,
body[data-page='community'] .auth-panel::after,
body[data-page='community'] .table-panel::after {
    background-image: url("data:image/svg+xml,%3Csvg width='240' height='150' viewBox='0 0 240 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%232fe7ff' stroke-width='1.3' stroke-linecap='round' opacity='1'%3E%3Cpath d='M42 104 92 54 146 88 198 42M92 54 138 30M146 88 184 118M42 104 84 126'/%3E%3Ccircle cx='42' cy='104' r='7'/%3E%3Ccircle cx='92' cy='54' r='7'/%3E%3Ccircle cx='146' cy='88' r='7'/%3E%3Ccircle cx='198' cy='42' r='7'/%3E%3Ccircle cx='184' cy='118' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

body[data-page='signals'] .intro-strip::after,
body[data-page='signals'] .table-panel::after {
    background-image: url("data:image/svg+xml,%3Csvg width='250' height='150' viewBox='0 0 250 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%232fe7ff' stroke-width='1.25' stroke-linecap='round' opacity='1'%3E%3Cpath d='M20 104 H54 L72 62 96 88 126 36 166 76 206 48 230 54'/%3E%3Cpath d='M54 104V34M126 104V28M206 104V42' opacity='.7'/%3E%3Ccircle cx='72' cy='62' r='4'/%3E%3Ccircle cx='126' cy='36' r='4'/%3E%3Ccircle cx='206' cy='48' r='4'/%3E%3C/g%3E%3C/svg%3E");
}

.panel {
    isolation: isolate;
}

.panel::before {
    z-index: 0;
}

.panel::after {
    z-index: 0;
    background:
        radial-gradient(circle at 72% 28%, rgba(34, 211, 238, 0.10) 0 2px, transparent 2.5px),
        radial-gradient(circle at 22% 74%, rgba(139, 92, 246, 0.11) 0 2px, transparent 2.5px),
        linear-gradient(90deg, rgba(34, 211, 238, 0.11) 1px, transparent 1px),
        linear-gradient(rgba(139, 92, 246, 0.08) 1px, transparent 1px);
    background-size: 120px 90px, 160px 110px, 42px 42px, 42px 42px;
    opacity: 0.44;
}

.panel canvas,
.panel h2 {
    position: relative;
    z-index: 1;
}

.panel canvas {
    filter:
        drop-shadow(0 18px 38px rgba(0, 0, 0, 0.30))
        drop-shadow(0 0 24px rgba(34, 211, 238, 0.12))
        drop-shadow(0 0 42px rgba(139, 92, 246, 0.07));
}

@media (max-width: 800px) {
    .intro-strip::after,
    .demo-card::after,
    .intelligence-card::after,
    .lesson::after,
    .auth-panel::after,
    .chat-panel::after,
    .sources-panel::after,
    .private-access-card::after,
    .risk-story article::after,
    .analyst-command article::after {
        opacity: 0.055;
        background-size: 170px auto;
        background-position: right 8px bottom 8px;
    }
}

/* Sprint 5.4 - identidad visual definitiva */
.hero-panel h2::after,
.analyst-hero h2::after,
.simulator-hero h2::after,
.intro-strip strong::after,
.table-panel h2::after,
.lesson h2::after,
.auth-panel h2::after,
.chat-panel h2::after,
.sources-panel h2::after {
    height: 3px;
    background:
        linear-gradient(90deg, transparent 0%, rgba(47, 231, 255, 0.95) 20%, rgba(79, 124, 255, 0.98) 42%, rgba(138, 92, 255, 0.94) 66%, rgba(217, 70, 239, 0.86) 84%, transparent 100%);
    background-size: 280% 100%;
    box-shadow:
        0 0 18px rgba(47, 231, 255, 0.32),
        0 0 34px rgba(138, 92, 255, 0.18);
    animation-duration: 13s;
}

.table-panel h2::after,
.lesson h2::after,
.auth-panel h2::after,
.chat-panel h2::after,
.sources-panel h2::after {
    height: 2px;
}

.hero-panel,
.analyst-hero,
.simulator-hero,
.intro-strip,
.demo-card,
.intelligence-card,
.learning-feature,
.panel,
.table-panel,
.auth-panel,
.chat-panel,
.sources-panel,
.risk-story article,
.lesson {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.075),
        inset 0 -1px 0 rgba(47, 231, 255, 0.025),
        0 24px 70px rgba(0, 0, 0, 0.34),
        0 0 46px rgba(47, 231, 255, 0.045);
}

.hero-panel,
.analyst-hero,
.simulator-hero {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        inset 0 -1px 0 rgba(47, 231, 255, 0.045),
        0 36px 110px rgba(0, 0, 0, 0.44),
        0 0 88px rgba(47, 231, 255, 0.09),
        0 0 128px rgba(138, 92, 255, 0.08);
}

.module-illustration {
    position: absolute;
    right: 10px;
    bottom: 8px;
    width: min(230px, 58%);
    max-height: 170px;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
    opacity: 0.18;
    mix-blend-mode: screen;
    filter:
        drop-shadow(0 0 12px rgba(47, 231, 255, 0.16))
        drop-shadow(0 0 28px rgba(138, 92, 255, 0.12));
    transform-origin: 70% 55%;
    animation: moduleFloat 12s ease-in-out infinite;
}

.demo-card .module-illustration {
    opacity: 0.22;
}

.ai-chip-visual .module-illustration,
.mentor-visual .module-illustration {
    inset: 50% auto auto 50%;
    width: 120%;
    max-width: none;
    transform: translate(-50%, -50%);
    opacity: 0.34;
    animation: coreIllustrationFloat 12s ease-in-out infinite;
}

.holo-link,
.holo-wave,
.holo-ring,
.holo-guide {
    fill: none;
    stroke: rgba(47, 231, 255, 0.92);
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.holo-link.soft,
.holo-wave.soft,
.holo-guide {
    stroke: rgba(138, 92, 255, 0.68);
    stroke-width: 1.15;
}

.simulator-illustration .holo-wave,
.route-visual .route-secondary {
    stroke: rgba(47, 231, 255, 0.86);
}

.simulator-illustration .holo-guide,
.route-visual .route-guide {
    stroke: rgba(217, 70, 239, 0.45);
}

.profile-illustration .holo-link,
.profile-illustration .holo-ring {
    stroke: rgba(49, 231, 166, 0.82);
}

.education-illustration .holo-link {
    stroke: rgba(255, 198, 90, 0.8);
}

.education-illustration .holo-link.soft {
    stroke: rgba(47, 231, 255, 0.54);
}

.holo-node {
    fill: rgba(47, 231, 255, 0.92);
    stroke: rgba(255, 255, 255, 0.42);
    stroke-width: 1;
    filter: drop-shadow(0 0 8px rgba(47, 231, 255, 0.42));
    animation: nodeBreathe 6.5s ease-in-out infinite;
}

.holo-node.hot {
    fill: rgba(217, 70, 239, 0.92);
    filter:
        drop-shadow(0 0 10px rgba(217, 70, 239, 0.46))
        drop-shadow(0 0 18px rgba(47, 231, 255, 0.24));
}

.holo-particle {
    fill: rgba(248, 251, 255, 0.9);
    filter: drop-shadow(0 0 10px rgba(47, 231, 255, 0.42));
    animation: particleDrift 8s ease-in-out infinite;
}

.demo-card::before,
.intelligence-card::before,
.panel::before,
.table-panel::before,
.auth-panel::before,
.chat-panel::before,
.sources-panel::before,
.lesson::before {
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.12), transparent 24%, transparent 78%, rgba(47, 231, 255, 0.08)),
        radial-gradient(circle at 18% 0%, rgba(47, 231, 255, 0.13), transparent 42%),
        radial-gradient(circle at 88% 92%, rgba(138, 92, 255, 0.11), transparent 48%);
}

.demo-card.featured,
.chat-panel,
.learning-feature,
.panel.wide {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.095),
        0 30px 88px rgba(0, 0, 0, 0.38),
        0 0 78px rgba(47, 231, 255, 0.07),
        0 0 96px rgba(138, 92, 255, 0.06);
}

.demo-card:hover .module-illustration,
.analyst-hero:hover .module-illustration,
.intro-strip:hover .module-illustration {
    opacity: 0.31;
    transform: translateY(-2px) scale(1.02);
}

.ai-chip-visual:hover .module-illustration,
.mentor-visual:hover .module-illustration {
    transform: translate(-50%, -51%) scale(1.03);
}

.route-visual .route-secondary,
.route-visual .route-guide {
    fill: none;
    stroke-width: 1.25;
    stroke-linecap: round;
    opacity: 0.68;
    filter: drop-shadow(0 0 10px rgba(47, 231, 255, 0.18));
}

.section-holo path,
.route-visual path,
.signal-map path,
.node-map path,
.mini-chart path {
    filter:
        drop-shadow(0 0 9px rgba(47, 231, 255, 0.18))
        drop-shadow(0 0 18px rgba(138, 92, 255, 0.10));
}

.section-holo circle,
.route-visual circle,
.signal-map circle,
.node-map circle,
.mini-chart circle {
    filter:
        drop-shadow(0 0 8px rgba(47, 231, 255, 0.36))
        drop-shadow(0 0 14px rgba(138, 92, 255, 0.18));
}

.signal-holo {
    overflow: visible;
    filter:
        drop-shadow(0 0 18px rgba(47, 231, 255, 0.34))
        drop-shadow(0 0 34px rgba(138, 92, 255, 0.18));
}

.signal-holo .glow-trace {
    stroke: rgba(47, 231, 255, 0.44);
    stroke-width: 8;
    opacity: 0.68;
    filter: blur(3px);
}

.signal-holo .signal-gridline {
    stroke: rgba(138, 92, 255, 0.42);
    stroke-width: 1;
    opacity: 0.70;
}

.signal-holo .signal-particle {
    fill: rgba(255, 255, 255, 0.90);
    filter:
        drop-shadow(0 0 8px rgba(47, 231, 255, 0.86))
        drop-shadow(0 0 18px rgba(138, 92, 255, 0.44));
}

.signals-illustration {
    right: 18px;
    top: 56px;
    bottom: auto;
    width: min(320px, 42%);
    opacity: 0.25;
}

.signals-illustration .holo-market,
.signals-illustration .holo-market-soft,
.signals-illustration .holo-candle,
.signals-illustration .holo-market-glow {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.signals-illustration .holo-market-glow {
    stroke: rgba(47, 231, 255, 0.46);
    stroke-width: 8;
    filter: blur(4px);
}

.signals-illustration .holo-market {
    stroke: rgba(47, 231, 255, 0.95);
    stroke-width: 1.8;
}

.signals-illustration .holo-market-soft {
    stroke: rgba(217, 70, 239, 0.62);
    stroke-width: 1.35;
}

.signals-illustration .holo-candle {
    stroke: rgba(138, 92, 255, 0.56);
    stroke-width: 1.15;
}

body[data-page='signals'] .table-panel {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.085),
        0 30px 90px rgba(0, 0, 0, 0.38),
        0 0 84px rgba(47, 231, 255, 0.075),
        0 0 96px rgba(138, 92, 255, 0.055);
}

body[data-page='signals'] .table-panel:hover .signals-illustration {
    opacity: 0.36;
}

.panel::after {
    background:
        radial-gradient(circle at 72% 28%, rgba(47, 231, 255, 0.16) 0 2px, transparent 2.5px),
        radial-gradient(circle at 22% 74%, rgba(138, 92, 255, 0.16) 0 2px, transparent 2.5px),
        radial-gradient(circle at 50% 44%, rgba(217, 70, 239, 0.09), transparent 44%),
        linear-gradient(90deg, rgba(47, 231, 255, 0.12) 1px, transparent 1px),
        linear-gradient(rgba(138, 92, 255, 0.08) 1px, transparent 1px);
    background-size: 120px 90px, 160px 110px, 100% 100%, 42px 42px, 42px 42px;
    opacity: 0.58;
}

.panel canvas {
    filter:
        drop-shadow(0 20px 42px rgba(0, 0, 0, 0.34))
        drop-shadow(0 0 28px rgba(47, 231, 255, 0.16))
        drop-shadow(0 0 56px rgba(138, 92, 255, 0.09));
}

@keyframes moduleFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    50% {
        transform: translate3d(-4px, -7px, 0) rotate(0.6deg);
    }
}

@keyframes coreIllustrationFloat {
    0%,
    100% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    50% {
        transform: translate(-52%, -53%) rotate(0.6deg);
    }
}

@keyframes nodeBreathe {
    0%,
    100% {
        opacity: 0.58;
    }
    50% {
        opacity: 1;
    }
}

@keyframes particleDrift {
    0%,
    100% {
        opacity: 0.28;
        transform: translate3d(0, 0, 0);
    }
    50% {
        opacity: 0.95;
        transform: translate3d(4px, -5px, 0);
    }
}

@media (max-width: 800px) {
    .module-illustration {
        width: min(180px, 52%);
        opacity: 0.13;
    }

    .demo-card .module-illustration {
        opacity: 0.16;
    }

    .ai-chip-visual .module-illustration,
    .mentor-visual .module-illustration {
        opacity: 0.24;
    }
}

@media (max-width: 430px) {
    .module-illustration {
        display: none;
    }
}

/* Hero resumen demo: globo terraqueo holografico */
.hero-globe {
    min-height: 250px;
    align-self: stretch;
    isolation: isolate;
}

.hero-globe::before {
    width: 260px;
    height: 260px;
    border: 0;
    background:
        radial-gradient(circle at 42% 34%, rgba(248, 251, 255, 0.28), transparent 18%),
        radial-gradient(circle, rgba(47, 231, 255, 0.22), rgba(138, 92, 255, 0.12) 46%, rgba(217, 70, 239, 0.08) 62%, transparent 72%);
    box-shadow:
        0 0 58px rgba(47, 231, 255, 0.20),
        0 0 92px rgba(138, 92, 255, 0.16),
        0 0 128px rgba(217, 70, 239, 0.10);
    filter: blur(0.2px);
}

.hero-globe::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(47, 231, 255, 0.16), transparent 68%);
    transform: translateY(108px) rotate(-8deg);
    opacity: 0.9;
    pointer-events: none;
    z-index: 0;
}

.globe-hologram {
    position: relative;
    z-index: 1;
    width: min(320px, 92%);
    height: auto;
    overflow: visible;
    filter:
        drop-shadow(0 0 22px rgba(47, 231, 255, 0.26))
        drop-shadow(0 0 48px rgba(138, 92, 255, 0.18))
        drop-shadow(0 0 70px rgba(217, 70, 239, 0.10));
    animation: globeFloat 11s ease-in-out infinite;
}

.globe-aura {
    fill: url("#globe-core");
    opacity: 0.82;
}

.globe-shell,
.globe-lat,
.globe-meridian {
    fill: none;
    stroke: url("#globe-line");
    stroke-width: 1.7;
    opacity: 0.84;
    vector-effect: non-scaling-stroke;
}

.globe-shell {
    stroke-width: 2.2;
    filter: drop-shadow(0 0 12px rgba(47, 231, 255, 0.42));
}

.globe-fill {
    fill: rgba(8, 15, 32, 0.16);
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 1;
}

.globe-lat.soft,
.globe-meridian.soft {
    opacity: 0.42;
    stroke-width: 1.1;
}

.globe-continent {
    fill: rgba(47, 231, 255, 0.11);
    stroke: rgba(47, 231, 255, 0.55);
    stroke-width: 1.15;
    filter: drop-shadow(0 0 10px rgba(47, 231, 255, 0.28));
}

.globe-continent.alt {
    fill: rgba(217, 70, 239, 0.10);
    stroke: rgba(217, 70, 239, 0.50);
}

.globe-orbit {
    fill: none;
    stroke: rgba(47, 231, 255, 0.62);
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-dasharray: 8 10;
    filter: drop-shadow(0 0 12px rgba(47, 231, 255, 0.38));
    animation: globeDash 15s linear infinite;
}

.globe-orbit.alt {
    stroke: rgba(217, 70, 239, 0.56);
    animation-duration: 18s;
    animation-direction: reverse;
}

.globe-node {
    fill: var(--cyan);
    stroke: rgba(255, 255, 255, 0.60);
    stroke-width: 1;
    filter:
        drop-shadow(0 0 8px rgba(47, 231, 255, 0.92))
        drop-shadow(0 0 18px rgba(138, 92, 255, 0.28));
}

.globe-node.hot {
    fill: var(--magenta);
    filter:
        drop-shadow(0 0 10px rgba(217, 70, 239, 0.86))
        drop-shadow(0 0 20px rgba(47, 231, 255, 0.24));
}

.globe-node.green {
    fill: var(--green);
    filter:
        drop-shadow(0 0 10px rgba(49, 231, 166, 0.82))
        drop-shadow(0 0 18px rgba(47, 231, 255, 0.22));
}

.hero-globe span {
    z-index: 2;
    font-family: var(--font-ui);
    letter-spacing: 0.01em;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 22px rgba(47, 231, 255, 0.10);
}

.hero-globe span:nth-of-type(1) {
    top: 18px;
    left: 18px;
}

.hero-globe span:nth-of-type(2) {
    top: 38px;
    right: 0;
}

.hero-globe span:nth-of-type(3) {
    bottom: 42px;
    left: 4px;
}

.hero-globe span:nth-of-type(4) {
    right: 16px;
    bottom: 24px;
}

@keyframes globeFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-1deg);
    }
    50% {
        transform: translate3d(0, -8px, 0) rotate(1deg);
    }
}

@keyframes globeDash {
    to {
        stroke-dashoffset: -120;
    }
}

/* Ajuste cromatico final: titulos con recorrido azul, verde, morado y magenta */
.topbar h1,
.hero-panel h2,
.analyst-hero h2,
.simulator-hero h2,
.intro-strip strong {
    background: linear-gradient(105deg, #f8fbff 0%, #dffbff 18%, var(--cyan) 34%, var(--green) 50%, var(--blue) 66%, var(--violet) 82%, var(--magenta) 100%);
    background-size: 180% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow:
        0 0 24px rgba(47, 231, 255, 0.14),
        0 0 42px rgba(217, 70, 239, 0.10);
}

.table-panel h2,
.lesson h2,
.auth-panel h2,
.chat-panel h2,
.sources-panel h2,
.panel h2 {
    background: linear-gradient(105deg, #f8fbff 0%, #e6fbff 28%, var(--cyan) 46%, var(--blue) 64%, var(--violet) 82%, var(--magenta) 100%);
    background-size: 170% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.hero-panel h2::after,
.analyst-hero h2::after,
.simulator-hero h2::after,
.intro-strip strong::after,
.table-panel h2::after,
.lesson h2::after,
.auth-panel h2::after,
.chat-panel h2::after,
.sources-panel h2::after,
.panel h2::after {
    background:
        linear-gradient(90deg, transparent 0%, var(--cyan) 14%, var(--green) 32%, var(--blue) 50%, var(--violet) 70%, var(--magenta) 88%, transparent 100%);
    background-size: 320% 100%;
    box-shadow:
        0 0 18px rgba(47, 231, 255, 0.34),
        0 0 26px rgba(49, 231, 166, 0.16),
        0 0 38px rgba(138, 92, 255, 0.18),
        0 0 44px rgba(217, 70, 239, 0.18);
}

/* --- Pagina Mercados --- */
.market-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.market-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}

.market-tab:hover {
    transform: translateY(-1px);
    border-color: var(--line-strong);
}

.market-tab.active {
    border-color: rgba(34, 211, 238, 0.4);
    background: linear-gradient(135deg, rgba(79, 124, 255, 0.28), rgba(138, 92, 255, 0.22) 58%, rgba(47, 231, 255, 0.22));
    color: #fff;
    box-shadow: 0 12px 30px rgba(34, 211, 238, 0.14);
}

.market-tab small {
    opacity: 0.72;
    font-weight: 700;
}

.asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.asset-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-2);
}

.asset-card-symbol {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 900;
    color: var(--ink);
}

/* Aclaracion de que SPY/QQQ/DIA son ETF que replican un indice, no el indice.
   margin-top negativo para cancelar el gap de 8px del .asset-card y que la
   nota quede pegada al simbolo: pertenece a el, no al precio de debajo. */
.asset-card-proxy {
    margin-top: -6px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--muted);
}

.asset-card-price {
    font-family: var(--font-ui);
    font-size: 22px;
    font-weight: 900;
}

.asset-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.asset-card.pending {
    opacity: 0.56;
    filter: grayscale(0.4);
}

.asset-card.pending .asset-card-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--muted);
}

.asset-card.has-error .asset-card-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--red);
}

.asset-card-history-toggle {
    align-self: flex-start;
    min-height: 34px;
    padding: 7px 12px;
    font-size: 13px;
}

.asset-card-history {
    margin-top: 4px;
}

.asset-card-history canvas {
    width: 100%;
    height: 140px;
}

.asset-card-history-empty {
    color: var(--muted);
    font-size: 13px;
}

.terms-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(2, 5, 14, 0.72);
    backdrop-filter: blur(4px);
}

.terms-modal-backdrop[hidden] {
    display: none;
}

.terms-modal-card {
    position: relative;
    max-width: 480px;
    width: 100%;
    max-height: 86vh;
    overflow-y: auto;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--line-strong);
    background: linear-gradient(180deg, rgba(138, 92, 255, 0.16), rgba(9, 16, 32, 0.94));
    box-shadow: var(--shadow), var(--glow);
}

.terms-modal-card h2 {
    margin-top: 0;
    color: var(--ink);
}

.terms-modal-card p {
    color: var(--muted);
    line-height: 1.6;
}

.terms-modal-card a {
    color: var(--cyan);
}

.terms-modal-message {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 95, 122, 0.34);
    background: rgba(255, 95, 122, 0.1);
    color: var(--text);
    font-size: 14px;
}

.terms-modal-message[hidden] {
    display: none;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 14px;
}

.chart-legend[hidden] {
    display: none;
}

.chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--text);
}

.chart-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
}