:root {
 color-scheme: dark;
}

* {
 box-sizing: border-box;
}

html,
body {
 margin: 0;
 min-height: 100%;
 font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

html {
 scroll-behavior: smooth !important;
}

body {
 background: #04070d;
}

body:not(.study-mode-active) {
 background:
 radial-gradient(circle at 14% 0%, rgba(34, 211, 238, 0.08), transparent 28%),
 radial-gradient(circle at 86% 16%, rgba(52, 211, 153, 0.08), transparent 30%),
 #02050a;
}

body,
input,
button {
 font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
}

h1,
h2,
h3,
.nav-btn {
 font-family: "Space Grotesk", Manrope, ui-sans-serif, system-ui, sans-serif;
}

.landing-stat,
.landing-mini-card,
.landing-feature-card,
.landing-module-pill {
 border: 1px solid rgba(255, 255, 255, 0.08);
 background: rgba(255, 255, 255, 0.035);
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
 backdrop-filter: blur(16px);
}

.landing-shell {
 background:
 radial-gradient(circle at 8% 0%, rgba(34, 211, 238, 0.10), transparent 26%),
 radial-gradient(circle at 82% 72%, rgba(52, 211, 153, 0.10), transparent 32%),
 linear-gradient(135deg, #02050a, #050912 48%, #06131b);
 animation: landingBackgroundReveal 1.25s ease-out both;
}

.landing-stage {
 position: relative;
 isolation: isolate;
 animation: landingStageReveal 1.25s ease-out both;
}

.landing-stage::before {
 content: "";
 position: absolute;
 inset: 72px 28px 84px;
 border-radius: 1.7rem;
 background:
 radial-gradient(circle at 82% 12%, rgba(34, 211, 238, 0.20), transparent 25%),
 radial-gradient(circle at 88% 62%, rgba(52, 211, 153, 0.14), transparent 28%),
 radial-gradient(circle at 10% 86%, rgba(59, 130, 246, 0.10), transparent 26%),
 linear-gradient(90deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.045));
 opacity: 0.8;
 pointer-events: none;
}

.landing-stage::after {
 content: "";
 position: absolute;
 inset: 72px 28px 84px;
 border-radius: 1.7rem;
 background-image:
 linear-gradient(rgba(148, 163, 184, 0.055) 1px, transparent 1px),
 linear-gradient(90deg, rgba(148, 163, 184, 0.055) 1px, transparent 1px);
 background-size: 72px 72px;
 mask-image: radial-gradient(circle at center, black, transparent 76%);
 pointer-events: none;
}

.landing-stage-clean .landing-hero-canvas::after {
 content: "";
 position: absolute;
 inset: 10% 8% 12%;
 background:
 radial-gradient(circle, rgba(34, 211, 238, 0.18) 1px, transparent 2px) 0 0 / 92px 92px,
 linear-gradient(115deg, transparent 0 28%, rgba(34, 211, 238, 0.10) 28.3%, transparent 29% 58%, rgba(52, 211, 153, 0.10) 58.2%, transparent 59%),
 linear-gradient(180deg, transparent 0 56%, rgba(255, 255, 255, 0.075) 56.2%, transparent 56.5%);
 opacity: 0.58;
 pointer-events: none;
}

.landing-nav-pill {
 border-radius: 999px;
 padding: 0.6rem 0.85rem;
 transition: background 160ms ease, color 160ms ease;
}

.landing-nav-pill:hover,
.landing-nav-pill-active {
 background: rgba(255, 255, 255, 0.1);
 color: #fff;
}

.landing-hero-canvas {
 min-height: 0;
}

.landing-hero-canvas::before {
 content: "";
 position: absolute;
 inset: 14px 28px;
 border-radius: 1.65rem;
 border: 1px solid rgba(255, 255, 255, 0.08);
 pointer-events: none;
}

.landing-orbit {
 position: absolute;
 z-index: 5;
 display: none;
 align-items: center;
 gap: 0.75rem;
 color: rgba(255, 255, 255, 0.82);
}

.landing-orbit::before {
 content: "";
 width: 150px;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28));
}

.landing-orbit span {
 display: grid;
 width: 2.2rem;
 height: 2.2rem;
 place-items: center;
 border-radius: 999px;
 border: 1px solid rgba(255, 255, 255, 0.16);
 background: rgba(255, 255, 255, 0.08);
 backdrop-filter: blur(14px);
}

.landing-orbit span::before {
 content: "▵";
 font-size: 0.85rem;
}

.landing-orbit strong,
.landing-orbit small {
 display: block;
}

.landing-orbit strong {
 font-size: 0.9rem;
}

.landing-orbit small {
 margin-top: 0.1rem;
 color: rgba(255, 255, 255, 0.5);
 font-size: 0.66rem;
}

.landing-orbit-left {
 left: 28px;
 top: 27%;
}

.landing-orbit-right {
 right: 72px;
 top: 31%;
}

.landing-orbit-bottom-left {
 left: 28px;
 bottom: 29%;
}

.landing-orbit-bottom-right {
 right: 72px;
 bottom: 31%;
}

.landing-stage-clean .landing-orbit {
 display: none;
}

@media (min-width: 900px) {
 .landing-stage:not(.landing-stage-clean) .landing-orbit {
 display: flex;
 }
}

.landing-metric {
 border-radius: 1.2rem;
 border: 1px solid rgba(255, 255, 255, 0.08);
 background: rgba(255, 255, 255, 0.045);
 padding: 1rem;
}

.landing-metric strong,
.landing-metric span {
 display: block;
}

.landing-metric strong {
 color: #fff;
 font-size: 1.35rem;
 line-height: 1;
}

.landing-metric span {
 margin-top: 0.45rem;
 color: #94a3b8;
 font-size: 0.68rem;
 font-weight: 900;
 letter-spacing: 0.12em;
 text-transform: uppercase;
}

.landing-terminal-card {
 overflow: hidden;
 border-radius: 2rem;
 border: 1px solid rgba(255, 255, 255, 0.1);
 background: linear-gradient(180deg, rgba(8, 16, 27, 0.88), rgba(4, 7, 13, 0.95));
 box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48), 0 0 70px rgba(34, 211, 238, 0.08);
 backdrop-filter: blur(22px);
}

.landing-stage header {
 opacity: 0;
 animation: landingNavReveal 900ms ease-out 320ms both;
}

.landing-copy > * {
 opacity: 0;
 animation: landingCopyRise 600ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 520ms) both;
}

.landing-tech-column {
 min-height: 560px;
}

.landing-radar-field {
 position: absolute;
 inset: -4% -2% 0 4%;
 pointer-events: none;
}

.radar-ring,
.radar-line,
.data-dot {
 position: absolute;
 display: block;
}

.radar-ring {
 right: 3%;
 top: 8%;
 aspect-ratio: 1;
 border-radius: 999px;
 border: 1px dotted rgba(125, 211, 252, 0.22);
 animation: radarSpin 54s linear infinite;
}

.radar-ring-one {
 width: 88%;
}

.radar-ring-two {
 width: 68%;
 right: 13%;
 top: 18%;
 animation-duration: 66s;
 animation-direction: reverse;
}

.radar-ring-three {
 width: 48%;
 right: 23%;
 top: 28%;
 border-color: rgba(52, 211, 153, 0.18);
 animation-duration: 78s;
}

.radar-ring-four {
 width: 28%;
 right: 33%;
 top: 38%;
 animation-duration: 90s;
 animation-direction: reverse;
}

.radar-line {
 width: 78%;
 height: 1px;
 right: 6%;
 top: 50%;
 background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.26), transparent);
 transform-origin: 78% 50%;
}

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

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

.data-dot {
 width: 6px;
 height: 6px;
 border-radius: 999px;
 background: #67e8f9;
 box-shadow: 0 0 20px rgba(103, 232, 249, 0.72);
 animation: dataPulse 3.8s ease-in-out infinite;
}

.data-dot-one {
 right: 17%;
 top: 18%;
}

.data-dot-two {
 right: 53%;
 top: 34%;
 animation-delay: 900ms;
}

.data-dot-three {
 right: 38%;
 top: 59%;
 background: #34d399;
 box-shadow: 0 0 20px rgba(52, 211, 153, 0.68);
 animation-delay: 1.5s;
}

.data-dot-four {
 right: 75%;
 top: 70%;
 animation-delay: 2.2s;
}

.data-dot-five {
 right: 11%;
 top: 77%;
 background: #fbbf24;
 box-shadow: 0 0 20px rgba(251, 191, 36, 0.58);
 animation-delay: 2.8s;
}

.landing-float-card {
 position: absolute;
 overflow: hidden;
 border-radius: 1.35rem;
 border: 1px solid rgba(125, 211, 252, 0.14);
 background:
 linear-gradient(180deg, rgba(10, 20, 33, 0.88), rgba(4, 7, 13, 0.96)),
 rgba(4, 7, 13, 0.92);
 box-shadow:
 0 30px 90px rgba(0, 0, 0, 0.48),
 0 0 58px rgba(34, 211, 238, 0.10),
 inset 0 1px 0 rgba(255, 255, 255, 0.06);
 backdrop-filter: blur(22px);
 transform-origin: center;
 will-change: transform, opacity, box-shadow;
 transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.landing-float-card:hover {
 animation: none;
 opacity: 1;
 border-color: rgba(103, 232, 249, 0.36);
 box-shadow:
 0 34px 96px rgba(0, 0, 0, 0.58),
 0 0 86px rgba(34, 211, 238, 0.22),
 inset 0 1px 0 rgba(255, 255, 255, 0.10);
 transform: translateY(-16px) scale(1.025);
}

.landing-float-card-large {
 left: 4%;
 top: 6%;
 width: min(92%, 520px);
}

.landing-float-card-small {
 right: 0;
 bottom: 12%;
 width: min(84%, 440px);
 padding: 1.15rem;
}

.landing-float-card-medium {
 left: 12%;
 bottom: -2%;
 width: min(78%, 390px);
 padding: 1.2rem;
}

.landing-float-one {
 animation: floatCardOne 4s cubic-bezier(0.16, 1, 0.3, 1) 780ms both infinite;
}

.landing-float-two {
 animation: floatCardTwo 5s cubic-bezier(0.16, 1, 0.3, 1) 980ms both infinite;
}

.landing-float-three {
 animation: floatCardThree 6s cubic-bezier(0.16, 1, 0.3, 1) 1180ms both infinite;
}

.landing-chart-card {
 position: relative;
 min-height: 220px;
 overflow: hidden;
 border-radius: 1.5rem;
 border: 1px solid rgba(255, 255, 255, 0.08);
 background:
 linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
 linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
 radial-gradient(circle at 75% 18%, rgba(34, 211, 238, 0.18), transparent 28%),
 #050912;
 background-size: 44px 44px, 44px 44px, auto, auto;
}

.chart-trade-line {
 position: absolute;
 pointer-events: none;
}

.chart-trade-line {
 left: 9%;
 right: 9%;
 height: 1px;
 border-top: 1px dashed currentColor;
 opacity: 0.72;
}

.chart-trade-line em {
 position: absolute;
 right: 0;
 top: -13px;
 border-radius: 999px;
 padding: 2px 6px;
 background: rgba(2, 8, 18, 0.86);
 font-size: 9px;
 font-style: normal;
 font-weight: 900;
 letter-spacing: 0.08em;
}

.chart-take-profit {
 top: 34%;
 color: rgba(52, 211, 153, 0.90);
}

.chart-stop-loss {
 top: 66%;
 color: rgba(251, 113, 133, 0.88);
}

.chart-candle {
 position: absolute;
 bottom: var(--candle-bottom, 32%);
 left: var(--candle-left, 18%);
 width: var(--candle-width, 10px);
 height: var(--candle-height, 48px);
 border-radius: 1.5px;
 background: #34d399;
 box-shadow: 0 0 24px rgba(52, 211, 153, 0.35);
}

.chart-candle::before {
 content: "";
 position: absolute;
 left: 50%;
 top: var(--wick-top, -24px);
 bottom: var(--wick-bottom, -24px);
 width: 1.5px;
 background: currentColor;
 transform: translateX(-50%);
 opacity: 0.88;
}

.chart-candle::after {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: inherit;
 background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%);
}

.candle-red {
 color: #fb7185;
 background: #fb7185;
 box-shadow: 0 0 22px rgba(251, 113, 133, 0.30);
}

.candle-one {
 --candle-left: 12%;
 --candle-bottom: 46%;
 --candle-height: 26px;
 --wick-top: -18px;
 --wick-bottom: -13px;
 color: #34d399;
}

.candle-two {
 --candle-left: 16%;
 --candle-bottom: 37%;
 --candle-height: 48px;
 --wick-top: -20px;
 --wick-bottom: -20px;
}

.candle-three {
 --candle-left: 20%;
 --candle-bottom: 54%;
 --candle-height: 42px;
 --wick-top: -28px;
 --wick-bottom: -15px;
 color: #34d399;
}

.candle-four {
 --candle-left: 24%;
 --candle-bottom: 57%;
 --candle-height: 30px;
 --wick-top: -15px;
 --wick-bottom: -32px;
}

.candle-five {
 --candle-left: 28%;
 --candle-bottom: 52%;
 --candle-height: 18px;
 --wick-top: -22px;
 --wick-bottom: -22px;
 color: #34d399;
}

.candle-six {
 --candle-left: 32%;
 --candle-bottom: 43%;
 --candle-height: 66px;
 --wick-top: -18px;
 --wick-bottom: -16px;
}

.candle-seven {
 --candle-left: 36%;
 --candle-bottom: 35%;
 --candle-height: 44px;
 --wick-top: -16px;
 --wick-bottom: -24px;
}

.candle-eight {
 --candle-left: 40%;
 --candle-bottom: 40%;
 --candle-height: 34px;
 --wick-top: -24px;
 --wick-bottom: -20px;
 color: #34d399;
}

.candle-nine {
 --candle-left: 44%;
 --candle-bottom: 47%;
 --candle-height: 24px;
 --wick-top: -18px;
 --wick-bottom: -20px;
 color: #34d399;
}

.candle-ten {
 --candle-left: 48%;
 --candle-bottom: 39%;
 --candle-height: 52px;
 --wick-top: -24px;
 --wick-bottom: -18px;
}

.candle-eleven {
 --candle-left: 52%;
 --candle-bottom: 32%;
 --candle-height: 36px;
 --wick-top: -18px;
 --wick-bottom: -26px;
}

.candle-twelve {
 --candle-left: 56%;
 --candle-bottom: 36%;
 --candle-height: 22px;
 --wick-top: -16px;
 --wick-bottom: -18px;
 color: #34d399;
}

.candle-thirteen {
 --candle-left: 60%;
 --candle-bottom: 28%;
 --candle-height: 42px;
 --wick-top: -20px;
 --wick-bottom: -24px;
}

.candle-fourteen {
 --candle-left: 64%;
 --candle-bottom: 33%;
 --candle-height: 20px;
 --wick-top: -18px;
 --wick-bottom: -16px;
 color: #34d399;
}

.candle-fifteen {
 --candle-left: 68%;
 --candle-bottom: 38%;
 --candle-height: 28px;
 --wick-top: -24px;
 --wick-bottom: -18px;
 color: #34d399;
}

.candle-sixteen {
 --candle-left: 72%;
 --candle-bottom: 34%;
 --candle-height: 24px;
 --wick-top: -16px;
 --wick-bottom: -18px;
}

.candle-seventeen {
 --candle-left: 76%;
 --candle-bottom: 39%;
 --candle-height: 16px;
 --wick-top: -20px;
 --wick-bottom: -14px;
 color: #34d399;
}

.candle-eighteen {
 --candle-left: 80%;
 --candle-bottom: 42%;
 --candle-height: 12px;
 --wick-top: -15px;
 --wick-bottom: -12px;
 color: #34d399;
}

.landing-dashboard-chip {
 border-radius: 1rem;
 border: 1px solid rgba(255, 255, 255, 0.08);
 background: rgba(255, 255, 255, 0.04);
 padding: 0.95rem;
}

.landing-dashboard-chip span,
.landing-dashboard-chip strong {
 display: block;
}

.landing-dashboard-chip span {
 color: #64748b;
 font-size: 0.68rem;
 font-weight: 900;
 letter-spacing: 0.14em;
 text-transform: uppercase;
}

.landing-dashboard-chip strong {
 margin-top: 0.35rem;
 color: #f8fafc;
 font-size: 0.85rem;
}

.market-replay-card {
 overflow: hidden;
 border-radius: 1.6rem;
 border: 1px solid rgba(34, 211, 238, 0.14);
 background: linear-gradient(180deg, rgba(8, 16, 27, 0.92), rgba(4, 7, 13, 0.98));
 box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34), 0 0 60px rgba(34, 211, 238, 0.06);
}

.market-replay-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 padding: 1rem 1.15rem;
}

.market-replay-header span {
 color: #67e8f9;
 font-size: 0.68rem;
 font-weight: 1000;
 letter-spacing: 0.2em;
 text-transform: uppercase;
}

.market-replay-header strong {
 color: #f8fafc;
 font-size: 0.78rem;
}

.market-replay-image {
 padding: 1rem;
}

.market-replay-image img {
 display: block;
 width: 100%;
 height: auto;
 border-radius: 1.1rem;
 border: 1px solid rgba(255, 255, 255, 0.06);
 background: #050912;
}

.market-replay-card figcaption {
 border-top: 1px solid rgba(255, 255, 255, 0.08);
 padding: 0.85rem 1.15rem;
 color: #94a3b8;
 font-size: 0.76rem;
 font-weight: 800;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}

.daily-hard-card {
 position: relative;
}

.daily-hard-visual {
 position: relative;
 height: 210px;
 overflow: hidden;
 background:
 radial-gradient(circle at 80% 16%, rgba(34, 211, 238, 0.16), transparent 30%),
 linear-gradient(180deg, rgba(8, 16, 27, 0.98), rgba(4, 7, 13, 0.98));
}

.daily-hard-visual::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, transparent 40%, rgba(4, 7, 13, 0.78));
 pointer-events: none;
}

.daily-hard-visual img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 opacity: 0.88;
 filter: saturate(1.05) contrast(1.04);
}

.auth-page-shell {
 background:
 radial-gradient(circle at 22% 12%, rgba(34, 211, 238, 0.16), transparent 28%),
 radial-gradient(circle at 86% 78%, rgba(52, 211, 153, 0.18), transparent 30%),
 linear-gradient(135deg, #101412, #04070d 54%, #111b18);
}

.auth-mode-button {
 border-radius: 0.9rem;
 padding: 0.8rem 1rem;
 color: #94a3b8;
 font-size: 0.85rem;
 font-weight: 900;
 transition: background 160ms ease, color 160ms ease;
}

.auth-mode-button.active {
 background: #fff;
 color: #020617;
}

.landing-stat {
 border-radius: 20px;
 padding: 1rem;
}

.landing-stat strong {
 display: block;
 color: #f8fafc;
 font-size: 1.35rem;
 line-height: 1;
}

.landing-stat span {
 display: block;
 margin-top: 0.4rem;
 color: #94a3b8;
 font-size: 0.78rem;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: 0.12em;
}

@keyframes landingBackgroundReveal {
 from {
 opacity: 0;
 filter: brightness(0);
 }
 to {
 opacity: 1;
 filter: brightness(1);
 }
}

@keyframes landingStageReveal {
 from {
 background-color: #000;
 opacity: 0.18;
 }
 to {
 background-color: #000;
 opacity: 1;
 }
}

@keyframes landingNavReveal {
 from {
 opacity: 0;
 transform: translateY(-10px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

@keyframes landingCopyRise {
 from {
 opacity: 0;
 transform: translateY(20px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

@keyframes radarSpin {
 to {
 transform: rotate(360deg);
 }
}

@keyframes dataPulse {
 0%,
 100% {
 opacity: 0.2;
 transform: scale(0.82);
 }
 50% {
 opacity: 1;
 transform: scale(1.18);
 }
}

@keyframes floatCardOne {
 0% {
 opacity: 0;
 transform: translateY(26px) scale(0.95);
 }
 18% {
 opacity: 1;
 transform: translateY(0) scale(1);
 }
 50% {
 opacity: 1;
 transform: translateY(-14px) scale(1);
 }
 100% {
 opacity: 1;
 transform: translateY(0) scale(1);
 }
}

@keyframes floatCardTwo {
 0% {
 opacity: 0;
 transform: translateY(22px) scale(0.95);
 }
 16% {
 opacity: 1;
 transform: translateY(0) scale(1);
 }
 52% {
 opacity: 1;
 transform: translateY(-11px) scale(1);
 }
 100% {
 opacity: 1;
 transform: translateY(0) scale(1);
 }
}

@keyframes floatCardThree {
 0% {
 opacity: 0;
 transform: translateY(24px) scale(0.95);
 }
 14% {
 opacity: 1;
 transform: translateY(0) scale(1);
 }
 54% {
 opacity: 1;
 transform: translateY(-13px) scale(1);
 }
 100% {
 opacity: 1;
 transform: translateY(0) scale(1);
 }
}

.auth-field {
 display: grid;
 gap: 0.5rem;
}

.auth-field span {
 color: #94a3b8;
 font-size: 0.72rem;
 font-weight: 900;
 letter-spacing: 0.18em;
 text-transform: uppercase;
}

.auth-field input {
 width: 100%;
 border-radius: 1rem;
 border: 1px solid rgba(255, 255, 255, 0.09);
 background: rgba(4, 7, 13, 0.72);
 color: #f8fafc;
 outline: none;
 padding: 0.95rem 1rem;
 transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.auth-field input::placeholder {
 color: #64748b;
}

.auth-field input:focus {
 border-color: rgba(34, 211, 238, 0.55);
 background: rgba(8, 16, 27, 0.95);
 box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.1);
}

.landing-mini-card {
 border-radius: 1rem;
 padding: 0.9rem 1rem;
 color: #cbd5e1;
 font-size: 0.82rem;
 font-weight: 900;
}

.landing-feature-card {
 min-height: 230px;
 border-radius: 1.75rem;
 padding: 1.5rem;
}

.landing-feature-card span {
 display: inline-grid;
 width: 2.5rem;
 height: 2.5rem;
 place-items: center;
 border-radius: 999px;
 background: rgba(34, 211, 238, 0.1);
 color: #67e8f9;
 font-size: 0.8rem;
 font-weight: 1000;
}

.landing-feature-card h3 {
 margin: 1.35rem 0 0;
 color: #f8fafc;
 font-size: 1.35rem;
 font-weight: 900;
 letter-spacing: -0.03em;
}

.landing-feature-card p {
 margin: 0.75rem 0 0;
 color: #94a3b8;
 line-height: 1.7;
}

.landing-module-pill {
 border-radius: 1.1rem;
 padding: 1rem;
 color: #e2e8f0;
 font-size: 0.85rem;
 font-weight: 900;
 text-align: center;
}

.landing-risk-note {
 border-left: 2px solid rgba(251, 146, 60, 0.65);
 padding-left: 1rem;
}

.landing-legal-footer,
.auth-legal-footer {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.45rem 0.85rem;
 color: rgba(203, 213, 225, 0.58);
 font-size: 0.75rem;
 line-height: 1.7;
}

.landing-legal-footer {
 justify-content: space-between;
 border-top: 1px solid rgba(255, 255, 255, 0.08);
 padding-top: 1.25rem;
}

.landing-legal-footer p {
 margin: 0;
}

.landing-legal-footer nav,
.auth-legal-footer {
 display: flex;
 flex-wrap: wrap;
 gap: 0.45rem 0.85rem;
}

.landing-legal-footer a,
.auth-legal-footer a {
 color: rgba(186, 230, 253, 0.76);
 text-decoration: none;
 transition: color 160ms ease;
}

.landing-legal-footer a:hover,
.auth-legal-footer a:hover {
 color: #ecfeff;
}

.legal-page-shell {
 min-height: 100vh;
 background:
 radial-gradient(circle at 16% 8%, rgba(34, 211, 238, 0.12), transparent 28%),
 radial-gradient(circle at 86% 78%, rgba(52, 211, 153, 0.10), transparent 30%),
 linear-gradient(135deg, #02050a, #050912 48%, #06131b);
}

.legal-page-header,
.legal-policy-card,
.legal-link-grid {
 position: relative;
 border: 1px solid rgba(125, 211, 252, 0.12);
 background:
 linear-gradient(rgba(98, 230, 255, 0.026) 1px, transparent 1px),
 linear-gradient(90deg, rgba(98, 230, 255, 0.022) 1px, transparent 1px),
 rgba(3, 10, 20, 0.72);
 background-size: 32px 32px, 32px 32px, auto;
 border-radius: 0.65rem;
 box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}

.legal-page-header {
 padding: clamp(1.5rem, 4vw, 2.5rem);
}

.legal-link-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 0.75rem;
 margin-top: 1rem;
 padding: 1rem;
}

.legal-link-grid button {
 border: 1px solid rgba(255, 255, 255, 0.08);
 border-radius: 0.45rem;
 background: rgba(255, 255, 255, 0.035);
 padding: 0.85rem;
 color: rgba(186, 230, 253, 0.84);
 font-size: 0.78rem;
 font-weight: 900;
 text-align: center;
 text-decoration: none;
 cursor: pointer;
 transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.legal-link-grid button:hover {
 border-color: rgba(98, 230, 255, 0.24);
 background: rgba(98, 230, 255, 0.08);
 color: #ecfeff;
}

.legal-policy-card {
 margin-top: 1rem;
 padding: clamp(1.25rem, 3vw, 2rem);
 scroll-margin-top: 1rem;
}

.legal-eyebrow {
 margin: 0;
 color: #67e8f9;
 font-size: 0.72rem;
 font-weight: 950;
 letter-spacing: 0.24em;
 text-transform: uppercase;
}

.legal-policy-card h2 {
 margin: 0.75rem 0 0;
 color: #f8fafc;
 font-size: clamp(1.45rem, 2.4vw, 2rem);
 font-weight: 950;
}

.legal-policy-card p:not(.legal-eyebrow) {
 margin: 1rem 0 0;
 color: rgba(226, 238, 246, 0.80);
 font-size: 0.95rem;
 line-height: 1.85;
}

.compliance-disclosure,
.cftc-441 {
 border: 1px solid rgba(251, 191, 36, 0.24);
 border-radius: 1.25rem;
 background: rgba(251, 191, 36, 0.08);
 padding: 1rem;
 color: rgba(254, 243, 199, 0.92);
 font-size: 0.82rem;
 font-weight: 800;
 line-height: 1.7;
}

.compliance-disclosure strong,
.cftc-441 strong {
 display: block;
 margin-bottom: 0.35rem;
 color: #fde68a;
 font-size: 0.72rem;
 font-weight: 950;
 letter-spacing: 0.16em;
 text-transform: uppercase;
}

.cftc-441 {
 border-color: rgba(103, 232, 249, 0.22);
 background: rgba(8, 47, 73, 0.42);
 color: rgba(226, 238, 246, 0.88);
 font-weight: 750;
}

.cftc-441 strong {
 color: #67e8f9;
}

.landing-disclaimer-panel {
 position: relative;
 overflow: hidden;
 border: 1px solid rgba(125, 211, 252, 0.14);
 border-radius: 0.75rem;
 background:
 linear-gradient(rgba(98, 230, 255, 0.035) 1px, transparent 1px),
 linear-gradient(90deg, rgba(98, 230, 255, 0.03) 1px, transparent 1px),
 radial-gradient(circle at 88% 8%, rgba(251, 146, 60, 0.12), transparent 26%),
 rgba(2, 8, 18, 0.78);
 background-size: 32px 32px, 32px 32px, auto, auto;
 padding: clamp(1.25rem, 3vw, 2.25rem);
 box-shadow: 0 28px 90px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.landing-disclaimer-panel::before {
 content: "";
 position: absolute;
 inset: 0;
 pointer-events: none;
 background: linear-gradient(90deg, rgba(34, 211, 238, 0.06), transparent 34%, rgba(251, 146, 60, 0.055));
}

.landing-disclaimer-header,
.landing-disclaimer-grid {
 position: relative;
 z-index: 1;
}

.landing-disclaimer-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 0.85rem;
 margin-top: 1.5rem;
}

.landing-disclaimer-grid article {
 border: 1px solid rgba(255, 255, 255, 0.08);
 border-radius: 0.55rem;
 background: rgba(3, 10, 20, 0.62);
 padding: 1rem;
}

.landing-disclaimer-grid h3 {
 margin: 0;
 color: #f8fafc;
 font-size: 0.95rem;
 font-weight: 950;
}

.landing-disclaimer-grid p {
 margin: 0.6rem 0 0;
 color: rgba(226, 238, 246, 0.78);
 font-size: 0.82rem;
 line-height: 1.7;
}

.premium-panel {
 border: 1px solid rgba(255, 255, 255, 0.08);
 border-radius: 24px;
 background: linear-gradient(180deg, rgba(9, 15, 26, 0.94), rgba(6, 10, 18, 0.98));
 box-shadow: 0 18px 60px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(98, 167, 255, 0.05);
 backdrop-filter: blur(18px);
}

#pageShell {
 background:
 radial-gradient(circle at 74% 32%, rgba(34, 211, 238, 0.12), transparent 26%),
 radial-gradient(circle at 18% 10%, rgba(52, 211, 153, 0.08), transparent 24%),
 linear-gradient(180deg, #020611 0%, #030914 100%) !important;
}

#appShell {
 position: relative;
 isolation: isolate;
 overflow: hidden;
 max-width: none;
 min-height: 100vh;
 background:
 radial-gradient(circle at 82% 18%, rgba(34, 211, 238, 0.09), transparent 24%),
 radial-gradient(circle at 12% 80%, rgba(52, 211, 153, 0.08), transparent 28%),
 linear-gradient(180deg, #020611 0%, #030914 100%);
 animation: appShellReveal 1.1s ease-out both;
}

#appShell::before,
#appShell::after {
 content: "";
 position: fixed;
 inset: 0;
 z-index: -2;
 pointer-events: none;
}

#appShell::before {
 background-image:
 linear-gradient(rgba(148, 163, 184, 0.055) 1px, transparent 1px),
 linear-gradient(90deg, rgba(148, 163, 184, 0.055) 1px, transparent 1px);
 background-size: 112px 112px;
 mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.72));
}

#appShell::after {
 right: -20%;
 left: auto;
 top: 7%;
 width: 62vw;
 height: 62vw;
 border-radius: 999px;
 border: 1px dotted rgba(125, 211, 252, 0.15);
 box-shadow:
 inset 0 0 0 7vw rgba(0, 0, 0, 0),
 inset 0 0 0 calc(7vw + 1px) rgba(125, 211, 252, 0.11),
 inset 0 0 0 19vw rgba(0, 0, 0, 0),
 inset 0 0 0 calc(19vw + 1px) rgba(52, 211, 153, 0.09),
 inset 0 0 0 31vw rgba(0, 0, 0, 0),
 inset 0 0 0 calc(31vw + 1px) rgba(125, 211, 252, 0.10);
 opacity: 0.78;
 animation: appRadarDrift 80s linear infinite;
}

#appShell > aside,
#appShell > div {
 position: relative;
 z-index: 1;
}

#appShell > aside {
 border-radius: 0;
 border: 0;
 border-right: 1px solid rgba(125, 211, 252, 0.11);
 background:
 linear-gradient(rgba(125, 211, 252, 0.04) 1px, transparent 1px),
 linear-gradient(90deg, rgba(125, 211, 252, 0.035) 1px, transparent 1px),
 rgba(2, 8, 18, 0.72) !important;
 background-size: 56px 56px, 56px 56px, auto;
 box-shadow: 24px 0 70px rgba(0, 0, 0, 0.22);
 backdrop-filter: blur(22px);
 animation: appSlideInLeft 900ms cubic-bezier(0.16, 1, 0.3, 1) 220ms both;
}

#appShell > div {
 padding-top: 0.85rem;
 animation: appContentReveal 950ms cubic-bezier(0.16, 1, 0.3, 1) 360ms both;
}

#dashboardView,
#trainingView,
#calendarView,
#referralView,
#billingView,
#studyView {
 animation: appViewFadeUp 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

#dashboardView > main > section,
#dashboardView > aside > section,
#trainingView > section,
#calendarView > section,
#referralView > section,
#billingView > section,
#module-training-card,
#daily-hard-question-card {
 position: relative;
 overflow: hidden;
 border-radius: 1.1rem !important;
 border-color: rgba(125, 211, 252, 0.13) !important;
 background:
 linear-gradient(135deg, rgba(125, 211, 252, 0.045), transparent 34%),
 linear-gradient(180deg, rgba(8, 18, 31, 0.82), rgba(3, 8, 18, 0.94)) !important;
 box-shadow:
 0 26px 90px rgba(0, 0, 0, 0.28),
 inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

#dashboardView > main > section::before,
#dashboardView > aside > section::before,
#trainingView > section::before,
#calendarView > section::before,
#referralView > section::before {
 content: "";
 position: absolute;
 inset: 0;
 pointer-events: none;
 background-image:
 linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
 linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
 background-size: 48px 48px;
 mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent 78%);
}

#daily-hard-question-card,
#module-training-card,
.video-thumbnail-card,
#training-shortcut,
#training-modules-container > section,
#training-modules-container > section > div:last-child > div,
.calendar-day,
.calendar-legend-item {
 transition:
 transform 220ms ease,
 border-color 220ms ease,
 background 220ms ease,
 box-shadow 220ms ease,
 filter 220ms ease;
}

#daily-hard-question-card:hover,
#module-training-card:hover,
#training-modules-container > section > div:last-child > div:hover,
.calendar-day:hover,
.calendar-legend-item:hover {
 transform: translateY(-3px);
 border-color: rgba(103, 232, 249, 0.28) !important;
 box-shadow:
 0 30px 90px rgba(0, 0, 0, 0.38),
 0 0 50px rgba(34, 211, 238, 0.10);
}

.nav-btn {
 position: relative;
 display: flex;
 align-items: center;
 gap: 0.75rem;
 border-radius: 0 !important;
 border-bottom: 1px solid transparent;
 background: transparent !important;
 color: rgba(226, 232, 240, 0.72) !important;
 font-size: 0.82rem;
 letter-spacing: 0.02em;
}

.nav-btn::before {
 color: #fb923c;
 font-family: "Space Grotesk", Manrope, ui-sans-serif, system-ui, sans-serif;
 font-size: 0.66rem;
 font-weight: 900;
}

#nav-home::before {
 content: "01";
}

#nav-calendar::before {
 content: "02";
}

#nav-training::before {
 content: "03";
}

#nav-referral::before {
 content: "04";
}

.nav-btn:hover,
.nav-btn.bg-white\/10,
.nav-btn.text-white {
 border-color: rgba(251, 146, 60, 0.8);
 color: #fff !important;
 transform: translateX(4px);
}

#appShell h1,
#appShell h2,
#appShell h3 {
 letter-spacing: 0;
}

#appShell p[class*="uppercase"],
#appShell div[class*="uppercase"] {
 letter-spacing: 0.2em;
}

#training-modules-container > section {
 overflow: hidden;
 border-radius: 1.1rem !important;
 border: 1px solid rgba(125, 211, 252, 0.13) !important;
 background:
 linear-gradient(135deg, rgba(251, 146, 60, 0.055), transparent 28%),
 linear-gradient(180deg, rgba(8, 18, 31, 0.84), rgba(3, 8, 18, 0.96)) !important;
 box-shadow: 0 26px 90px rgba(0, 0, 0, 0.30);
 animation: appCardCascade 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

#training-modules-container > section:nth-child(2) {
 animation-delay: 80ms;
}

#training-modules-container > section:nth-child(3) {
 animation-delay: 160ms;
}

#training-modules-container > section:nth-child(4) {
 animation-delay: 240ms;
}

#training-modules-container > section:nth-child(5) {
 animation-delay: 320ms;
}

#training-modules-container > section > div:first-child {
 background: rgba(2, 6, 17, 0.72) !important;
 border-color: rgba(125, 211, 252, 0.12) !important;
}

#training-modules-container > section > div:last-child {
 background:
 linear-gradient(rgba(125, 211, 252, 0.035) 1px, transparent 1px),
 linear-gradient(90deg, rgba(125, 211, 252, 0.03) 1px, transparent 1px),
 rgba(2, 8, 18, 0.48) !important;
 background-size: 54px 54px, 54px 54px, auto;
}

#training-modules-container > section > div:last-child > div {
 border-color: rgba(255, 255, 255, 0.07) !important;
 background: rgba(3, 10, 20, 0.68) !important;
}

#training-modules-container button,
#calendarView button,
#dashboardView a,
#dashboardView button {
 border-radius: 999px !important;
}

#calendar-grid {
 background:
 linear-gradient(rgba(125, 211, 252, 0.028) 1px, transparent 1px),
 linear-gradient(90deg, rgba(125, 211, 252, 0.028) 1px, transparent 1px),
 rgba(2, 8, 18, 0.54);
 background-size: 42px 42px, 42px 42px, auto;
}

.calendar-day {
 background: rgba(3, 10, 20, 0.54) !important;
}

.calendar-day:hover {
 background: rgba(34, 211, 238, 0.08) !important;
}

.calendar-event {
 border-radius: 0.65rem;
 box-shadow:
 inset 0 0 0 1px rgba(255, 255, 255, 0.13),
 0 10px 24px rgba(0, 0, 0, 0.20);
}

.calendar-event-cyan {
 background: linear-gradient(135deg, #0891b2, #22d3ee);
}

.calendar-event-emerald {
 background: linear-gradient(135deg, #047857, #34d399);
}

.calendar-event-blue {
 background: linear-gradient(135deg, #1d4ed8, #38bdf8);
}

.calendar-event-amber {
 background: linear-gradient(135deg, #c2410c, #fb923c);
}

.calendar-event-purple {
 background: linear-gradient(135deg, #7c3aed, #22d3ee);
}

.calendar-legend-item {
 border-radius: 0.85rem;
 background: rgba(255, 255, 255, 0.045);
}

/* Nexus premium UI refresh: reference-inspired grid, radar, and slide/fade motion. */
.landing-stage-clean {
 border-radius: 0.7rem !important;
 background:
 linear-gradient(rgba(125, 211, 252, 0.045) 1px, transparent 1px),
 linear-gradient(90deg, rgba(125, 211, 252, 0.038) 1px, transparent 1px),
 radial-gradient(circle at 82% 48%, rgba(34, 211, 238, 0.11), transparent 32%),
 #020c14 !important;
 background-size: 96px 96px, 96px 96px, auto, auto;
}

.landing-kicker {
 border: 0 !important;
 background: transparent !important;
 color: rgba(248, 250, 252, 0.62) !important;
 padding-left: 0 !important;
}

.landing-kicker::before {
 content: "";
 width: 0.42rem;
 height: 0.42rem;
 margin-right: 1rem;
 border-radius: 999px;
 background: #fb923c;
 box-shadow: 0 0 20px rgba(251, 146, 60, 0.64);
}

.landing-hero-title {
 max-width: 780px;
 color: #fff7ec !important;
 font-family: Georgia, "Times New Roman", serif !important;
 font-weight: 400 !important;
 letter-spacing: 0 !important;
}

.landing-hero-title::after {
 content: ".";
 color: #fb923c;
}

#landing-hero header {
 border-bottom: 1px solid rgba(125, 211, 252, 0.06);
}

#landing-hero nav,
#appShell > aside nav {
 background: transparent !important;
 border-color: transparent !important;
 box-shadow: none !important;
}

.landing-nav-pill {
 border-radius: 0 !important;
 border-bottom: 1px solid transparent;
 color: rgba(248, 250, 252, 0.76);
}

.landing-nav-pill:hover,
.landing-nav-pill-active {
 border-color: #fb923c;
 background: transparent;
 color: #fff;
}

#appShell::before {
 background-image:
 linear-gradient(rgba(125, 211, 252, 0.055) 1px, transparent 1px),
 linear-gradient(90deg, rgba(125, 211, 252, 0.05) 1px, transparent 1px),
 radial-gradient(circle at 82% 44%, rgba(251, 146, 60, 0.18) 1px, transparent 5px);
 background-size: 96px 96px, 96px 96px, 480px 480px;
}

#appShell > aside section,
#profile-menu-button {
 border-radius: 0.95rem !important;
 border-color: rgba(125, 211, 252, 0.12) !important;
 background: rgba(2, 8, 18, 0.52) !important;
}

.app-view-enter {
 will-change: opacity, transform;
}

.app-view-enter-left {
 animation: appViewSlideLeft 720ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.app-view-enter-right {
 animation: appViewSlideRight 720ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

#dashboardView > main > section:first-child {
 min-height: 155px;
 display: flex;
 align-items: center;
}

#dashboardView > main > section:first-child::after,
#calendarView > section:first-child::after,
#trainingView > section:first-child::after {
 content: "";
 position: absolute;
 right: 2rem;
 bottom: 1.2rem;
 width: min(38vw, 360px);
 height: min(38vw, 360px);
 border-radius: 999px;
 border: 1px dotted rgba(125, 211, 252, 0.16);
 box-shadow:
 inset 0 0 0 72px transparent,
 inset 0 0 0 73px rgba(125, 211, 252, 0.09),
 inset 0 0 0 148px transparent,
 inset 0 0 0 149px rgba(251, 146, 60, 0.07);
 pointer-events: none;
 opacity: 0.76;
 animation: appRadarDrift 92s linear infinite;
}

.dashboard-scenario-card,
.training-lesson-card,
.daily-hard-card,
#study-content article {
 position: relative;
 overflow: hidden;
 border-radius: 0.95rem !important;
 border-color: rgba(125, 211, 252, 0.12) !important;
 background:
 linear-gradient(120deg, rgba(251, 146, 60, 0.055), transparent 34%),
 rgba(2, 8, 18, 0.58) !important;
}

.dashboard-scenario-card::before,
.training-lesson-card::before {
 content: "";
 position: absolute;
 inset: 0;
 pointer-events: none;
 background-image:
 linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
 linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
 background-size: 36px 36px;
 opacity: 0.8;
}

.training-module-shell {
 border-radius: 0.95rem !important;
}

.training-lessons-grid {
 display: grid;
 gap: 1px;
 background: rgba(125, 211, 252, 0.10) !important;
}

.training-start-button {
 border-radius: 999px !important;
 color: #fff7ec !important;
}

.calendar-date-number {
 display: inline-grid;
 width: 1.7rem;
 height: 1.7rem;
 place-items: center;
 border-radius: 999px;
 border: 1px solid rgba(255, 255, 255, 0.08);
 background: rgba(255, 255, 255, 0.035);
 color: rgba(248, 250, 252, 0.82);
}

.calendar-day {
 min-height: 148px;
}

.calendar-event {
 border-left: 2px solid rgba(255, 247, 236, 0.74);
 color: #fffaf2;
}

#studyView {
 border-radius: 0.7rem !important;
 background:
 linear-gradient(rgba(125, 211, 252, 0.04) 1px, transparent 1px),
 linear-gradient(90deg, rgba(125, 211, 252, 0.035) 1px, transparent 1px),
 #020914 !important;
 background-size: 72px 72px, 72px 72px, auto;
}

#studyView header,
#studyView aside,
#study-content,
#studyView section:last-child {
 background-color: rgba(2, 8, 18, 0.68) !important;
 backdrop-filter: blur(20px);
}

.study-option {
 border-radius: 0.95rem !important;
}

#calendar-onboarding {
 background:
 linear-gradient(rgba(125, 211, 252, 0.055) 1px, transparent 1px),
 linear-gradient(90deg, rgba(125, 211, 252, 0.05) 1px, transparent 1px),
 radial-gradient(circle at 78% 36%, rgba(34, 211, 238, 0.16), transparent 30%),
 #020914 !important;
 background-size: 80px 80px, 80px 80px, auto, auto;
 color: #f8fafc !important;
}

#calendar-onboarding section {
 border: 1px solid rgba(125, 211, 252, 0.16);
 background: rgba(3, 10, 20, 0.88) !important;
 box-shadow: 0 30px 100px rgba(0, 0, 0, 0.58);
}

#calendar-onboarding section > div:first-child {
 background: linear-gradient(135deg, rgba(251, 146, 60, 0.42), rgba(34, 211, 238, 0.14)) !important;
}

#calendar-onboarding .wizard-option {
 border: 1px solid rgba(98, 230, 255, 0.16) !important;
 background:
 linear-gradient(rgba(98, 230, 255, 0.026) 1px, transparent 1px),
 linear-gradient(90deg, rgba(98, 230, 255, 0.022) 1px, transparent 1px),
 rgba(3, 12, 20, 0.82) !important;
 background-size: 28px 28px, 28px 28px, auto !important;
 color: #f8fafc !important;
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#calendar-onboarding .wizard-option strong {
 color: #f8fafc !important;
}

#calendar-onboarding .wizard-option small {
 color: #9fb0c5 !important;
}

#calendar-onboarding .wizard-option:hover {
 border-color: rgba(98, 230, 255, 0.38) !important;
 background-color: rgba(8, 24, 38, 0.92) !important;
}

#calendar-onboarding .wizard-option.selected {
 border-color: rgba(34, 211, 238, 0.86) !important;
 background:
 linear-gradient(90deg, rgba(34, 211, 238, 0.16), rgba(77, 255, 180, 0.055)),
 rgba(5, 18, 29, 0.92) !important;
 color: #eaffff !important;
 box-shadow: inset 3px 0 0 rgba(34, 211, 238, 0.88), 0 0 34px rgba(34, 211, 238, 0.10);
}

#calendar-onboarding .wizard-radio {
 border-color: rgba(148, 163, 184, 0.65) !important;
 background: rgba(2, 8, 18, 0.76);
}

#calendar-onboarding .wizard-option.selected .wizard-radio {
 border: 5px solid #22d3ee !important;
 background: #02111c !important;
}

#calendar-onboarding #calendar-track-preview {
 border: 1px solid rgba(98, 230, 255, 0.16) !important;
 background: rgba(98, 230, 255, 0.08) !important;
 color: #baf6ff !important;
}

@keyframes appViewSlideLeft {
 from {
 opacity: 0;
 transform: translateX(-22px);
 }
 to {
 opacity: 1;
 transform: translateX(0);
 }
}

@keyframes appViewSlideRight {
 from {
 opacity: 0;
 transform: translateX(22px);
 }
 to {
 opacity: 1;
 transform: translateX(0);
 }
}

@keyframes appShellReveal {
 from {
 opacity: 0;
 filter: brightness(0);
 }
 to {
 opacity: 1;
 filter: brightness(1);
 }
}

@keyframes appRadarDrift {
 to {
 transform: rotate(360deg);
 }
}

@keyframes appSlideInLeft {
 from {
 opacity: 0;
 transform: translateX(-28px);
 }
 to {
 opacity: 1;
 transform: translateX(0);
 }
}

@keyframes appContentReveal {
 from {
 opacity: 0;
 transform: translateY(18px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

@keyframes appViewFadeUp {
 from {
 opacity: 0;
 transform: translateY(18px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

@keyframes appCardCascade {
 from {
 opacity: 0;
 transform: translateY(18px) scale(0.985);
 }
 to {
 opacity: 1;
 transform: translateY(0) scale(1);
 }
}

.nav-item {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 border-radius: 16px;
 padding: 0.9rem 1rem;
 color: #c4cfdf;
 text-decoration: none;
 transition: background 160ms ease, color 160ms ease, transform 160ms ease, border-color 160ms ease;
 border: 1px solid transparent;
}

.nav-item:hover,
.nav-item.active {
 background: rgba(98, 167, 255, 0.09);
 border-color: rgba(98, 167, 255, 0.16);
 color: #f4f8ff;
 transform: translateY(-1px);
}

.promo-card,
.profile-card {
 border-radius: 22px;
 border: 1px solid rgba(255, 255, 255, 0.08);
 background: rgba(255, 255, 255, 0.03);
 padding: 1rem;
}

.status-pill {
 display: inline-flex;
 align-items: center;
 gap: 0.65rem;
 border-radius: 999px;
 border: 1px solid rgba(82, 227, 178, 0.2);
 background: rgba(82, 227, 178, 0.08);
 padding: 0.8rem 1rem;
 color: #ecfff7;
 box-shadow: 0 0 0 1px rgba(82, 227, 178, 0.05), 0 0 22px rgba(82, 227, 178, 0.08);
}

.status-pill.closed {
 border-color: rgba(255, 111, 125, 0.2);
 background: rgba(255, 111, 125, 0.08);
 box-shadow: 0 0 0 1px rgba(255, 111, 125, 0.05), 0 0 22px rgba(255, 111, 125, 0.08);
}

.status-dot {
 width: 0.65rem;
 height: 0.65rem;
 border-radius: 999px;
 background: #52e3b2;
 box-shadow: 0 0 18px rgba(82, 227, 178, 0.85);
}

.status-pill.closed .status-dot {
 background: #ff6f7d;
 box-shadow: 0 0 18px rgba(255, 111, 125, 0.85);
}

.market-status-pill.closed {
 border-color: rgba(251, 113, 133, 0.24);
 background: rgba(251, 113, 133, 0.1);
 color: #fda4af;
}

.video-frame {
 aspect-ratio: 16 / 9;
 overflow: hidden;
}

.video-frame iframe {
 display: block;
 width: 100%;
 height: 100%;
 border: 0;
}

.video-thumbnail-card {
 position: relative;
 aspect-ratio: 16 / 9;
 min-height: 280px;
 isolation: isolate;
 transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.video-thumbnail-card:hover {
 transform: translateY(-2px);
 border-color: rgba(34, 211, 238, 0.28);
 box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34), 0 0 45px rgba(34, 211, 238, 0.08);
}

.video-thumbnail-card img {
 display: block;
 filter: saturate(1.04) contrast(1.05);
}

.video-thumbnail-overlay {
 position: absolute;
 inset: 0;
 z-index: 1;
 background:
 radial-gradient(circle at 50% 42%, rgba(34, 211, 238, 0.24), transparent 28%),
 linear-gradient(180deg, rgba(4, 7, 13, 0.08), rgba(4, 7, 13, 0.72));
}

.video-play-button {
 position: absolute;
 left: 50%;
 top: 50%;
 z-index: 2;
 display: grid;
 width: 4.6rem;
 height: 4.6rem;
 place-items: center;
 border-radius: 999px;
 background: rgba(255, 255, 255, 0.92);
 color: #020617;
 font-size: 1.45rem;
 line-height: 1;
 padding-left: 0.2rem;
 transform: translate(-50%, -50%);
 box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

.video-thumbnail-copy {
 position: absolute;
 bottom: 1.25rem;
 left: 1.25rem;
 z-index: 2;
 display: grid;
 gap: 0.25rem;
}

.video-thumbnail-copy strong {
 color: #fff;
 font-size: 1rem;
}

.video-thumbnail-copy small {
 color: #bae6fd;
 font-size: 0.8rem;
 font-weight: 800;
}

.mcq-card {
 border-radius: 20px;
 border: 1px solid rgba(255, 255, 255, 0.08);
 background: linear-gradient(180deg, rgba(10, 16, 27, 0.96), rgba(7, 11, 18, 0.98));
 padding: 1rem;
}

.mcq-option {
 width: 100%;
 text-align: left;
 border-radius: 16px;
 border: 1px solid rgba(255, 255, 255, 0.08);
 background: rgba(255, 255, 255, 0.03);
 color: #eef3ff;
 padding: 0.85rem 0.95rem;
 transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.mcq-option:hover {
 transform: translateY(-1px);
 border-color: rgba(98, 167, 255, 0.28);
 background: rgba(98, 167, 255, 0.09);
}

.mcq-option.correct {
 border-color: rgba(82, 227, 178, 0.35);
 background: rgba(82, 227, 178, 0.13);
 box-shadow: 0 0 0 1px rgba(82, 227, 178, 0.08);
}

.mcq-option.incorrect {
 border-color: rgba(255, 111, 125, 0.35);
 background: rgba(255, 111, 125, 0.13);
 box-shadow: 0 0 0 1px rgba(255, 111, 125, 0.08);
}

.answer-explanation {
 border-radius: 16px;
 border: 1px solid rgba(255, 255, 255, 0.08);
 background: rgba(255, 255, 255, 0.03);
 padding: 0.9rem 1rem;
}

.skill-pill {
 border-radius: 14px;
 border: 1px solid rgba(255, 255, 255, 0.08);
 background: rgba(255, 255, 255, 0.03);
 padding: 0.8rem 0.95rem;
}

.calendar-day {
 transition: background 160ms ease, border-color 160ms ease;
}

.calendar-day:hover {
 background: rgba(14, 165, 233, 0.08);
}

.calendar-event {
 display: block;
 width: 100%;
 margin-top: 0.35rem;
 border-radius: 0.45rem;
 padding: 0.42rem 0.5rem;
 font-size: 0.67rem;
 line-height: 1.25;
 text-align: left;
 color: #f8fafc;
 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.calendar-event-clickable {
 cursor: pointer;
 transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease;
}

.calendar-event-clickable:hover {
 transform: translateY(-1px);
 filter: brightness(1.12);
 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 10px 20px rgba(0, 0, 0, 0.18);
}

.calendar-event-cyan {
 background: linear-gradient(135deg, #0891b2, #06b6d4);
}

.calendar-event-emerald {
 background: linear-gradient(135deg, #047857, #10b981);
}

.calendar-event-blue {
 background: linear-gradient(135deg, #1d4ed8, #3b82f6);
}

.calendar-event-amber {
 background: linear-gradient(135deg, #b45309, #f59e0b);
}

.calendar-event-rose {
 background: linear-gradient(135deg, #be185d, #ec4899);
}

.calendar-event-purple {
 background: linear-gradient(135deg, #7e22ce, #a855f7);
}

.calendar-legend-item {
 display: flex;
 align-items: center;
 gap: 0.65rem;
 border-radius: 14px;
 border: 1px solid rgba(255, 255, 255, 0.08);
 background: rgba(255, 255, 255, 0.03);
 padding: 0.8rem 0.95rem;
 color: #cbd5e1;
 font-size: 0.85rem;
 font-weight: 700;
}

.calendar-legend-item span {
 width: 0.75rem;
 height: 0.75rem;
 border-radius: 0.2rem;
}

.calendar-step-dot {
 display: grid;
 width: 2.1rem;
 height: 2.1rem;
 place-items: center;
 border-radius: 999px;
 background: #e2e8f0;
 color: #64748b;
 font-size: 0.85rem;
 font-weight: 800;
}

.calendar-step-dot.active {
 background: #0ea5e9;
 color: #fff;
 box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.18);
}

.calendar-step-dot.complete {
 background: #bae6fd;
 color: #0284c7;
}

.calendar-step-dot.complete::before {
 content: "✓";
}

.calendar-step-dot.complete {
 font-size: 0;
}

.calendar-step-dot.complete::before {
 font-size: 0.9rem;
}

.calendar-step-line {
 width: 1.6rem;
 height: 2px;
 background: #cbd5e1;
}

.wizard-day {
 display: grid;
 width: 3.2rem;
 height: 3.2rem;
 place-items: center;
 border-radius: 999px;
 background: #e2e8f0;
 color: #475569;
 font-weight: 900;
 transition: transform 150ms ease, background 150ms ease, color 150ms ease;
}

.wizard-day.selected {
 background: #0ea5e9;
 color: #fff;
 box-shadow: 0 8px 18px rgba(14, 165, 233, 0.25);
}

.wizard-day:hover,
.wizard-option:hover,
.wizard-focus:hover {
 transform: translateY(-1px);
}

.wizard-option {
 display: flex;
 width: 100%;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 border-radius: 0.55rem;
 border: 2px solid #e2e8f0;
 background: #fff;
 padding: 1rem 1.1rem;
 text-align: left;
 font-weight: 800;
 transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.wizard-option + .wizard-option {
 margin-top: 0.75rem;
}

.wizard-option.selected {
 border-color: #0ea5e9;
 background: #f0f9ff;
 color: #0284c7;
}

.wizard-option small {
 display: block;
 margin-top: 0.25rem;
 color: #64748b;
 font-size: 0.75rem;
 font-weight: 500;
 line-height: 1.35;
}

.wizard-radio {
 width: 1.25rem;
 height: 1.25rem;
 border-radius: 999px;
 border: 2px solid #cbd5e1;
}

.wizard-option.selected .wizard-radio {
 border: 5px solid #0ea5e9;
 background: #fff;
}

.wizard-focus {
 display: flex;
 width: 100%;
 align-items: center;
 justify-content: space-between;
 border-radius: 0.55rem;
 background: #f8fafc;
 padding: 0.9rem 1rem;
 text-align: left;
 color: #0f172a;
 font-weight: 700;
 transition: background 150ms ease, transform 150ms ease;
}

.wizard-focus span:last-child {
 border-radius: 999px;
 background: #e2e8f0;
 padding: 0.2rem 0.5rem;
 color: #64748b;
 font-size: 0.65rem;
 text-transform: uppercase;
}

.wizard-focus.selected {
 background: #ecfdf5;
 box-shadow: inset 0 0 0 2px #10b981;
}

.wizard-focus.selected span:last-child {
 background: #10b981;
 color: #fff;
}

.wizard-time-box {
 display: grid;
 gap: 0.55rem;
 border-radius: 0.7rem;
 border: 2px solid #e2e8f0;
 background: #f8fafc;
 padding: 1rem;
 color: #334155;
 font-size: 0.8rem;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: 0.08em;
}

.wizard-time-box:focus-within {
 border-color: #0ea5e9;
 background: #f0f9ff;
}

.wizard-time-box input {
 width: 100%;
 border: 0;
 background: transparent;
 color: #0f172a;
 font-size: 2.2rem;
 font-weight: 900;
 outline: none;
}

body.study-mode-active {
 height: 100vh;
 overflow: hidden;
 background: #04070d;
}

body.study-mode-active #pageShell {
 min-height: 100vh;
 background: #04070d;
}

body.study-mode-active #appShell {
 width: 100%;
 max-width: none;
 min-height: 100vh;
 height: 100vh;
 align-items: stretch;
 gap: 0;
 padding: 0;
}

body.study-mode-active #appShell > aside {
 display: none;
}

body.study-mode-active #appShell > div {
 display: flex;
 min-height: 0;
 height: 100vh;
 flex-direction: column;
}

body.study-mode-active #studyView {
 height: 100vh;
 border-radius: 0;
 border-top: 0;
 border-right: 0;
 border-bottom: 0;
 box-shadow: none;
}

body.study-mode-active #studyView header {
 min-height: 84px;
}

body.study-mode-active #study-content article {
 width: min(100%, 820px);
 margin-inline: auto;
 overflow: visible !important;
 padding-top: 0.35rem;
 padding-left: 0.15rem;
}

body.study-mode-active #study-content article > p:first-child {
 display: block;
 margin-left: 0.05rem;
 padding-top: 0.15rem;
 line-height: 1.45;
}

body.study-mode-active #study-options {
 width: min(100%, 760px);
 margin-inline: auto;
}

body.study-mode-active #submit-study-answer,
body.study-mode-active #skip-study-answer {
 width: min(100%, 760px);
 margin-inline: auto;
}

body.study-mode-active .study-option {
 min-height: 78px;
}

body.study-mode-active .study-option {
 border-radius: 0.75rem !important;
 transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease !important;
}

body.study-mode-active .study-option > span:first-child {
 border-radius: 0.6rem !important;
 transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease !important;
}

body.study-mode-active .study-option-selected {
 border-color: rgba(98, 230, 255, 0.62) !important;
 background:
 linear-gradient(90deg, rgba(98, 230, 255, 0.13), rgba(77, 255, 180, 0.045)),
 rgba(5, 18, 29, 0.78) !important;
 box-shadow: inset 3px 0 0 rgba(98, 230, 255, 0.88), 0 16px 42px rgba(0, 0, 0, 0.22), 0 0 24px rgba(98, 230, 255, 0.08) !important;
 transform: none !important;
}

body.study-mode-active .study-option-selected > span:first-child {
 border-color: rgba(98, 230, 255, 0.72) !important;
 background: rgba(2, 8, 18, 0.72) !important;
 color: #ffffff !important;
 box-shadow: 0 0 18px rgba(98, 230, 255, 0.12);
}

body.study-mode-active .study-option > span:first-child.text-ink-950,
body.study-mode-active .study-option > span:first-child.text-white {
 color: #ffffff !important;
}

@media (max-width: 1023px) {
 .landing-tech-column {
 min-height: 560px;
 padding-top: 0;
 }

 .landing-radar-field {
 inset: 0;
 }

 .landing-float-card-large {
 left: 0;
 top: 4%;
 width: 100%;
 }

 .landing-float-card-small {
 right: 0;
 bottom: 24%;
 width: 88%;
 }

 .landing-float-card-medium {
 left: 0;
 bottom: 3%;
 width: 86%;
 }
}

@media (max-width: 640px) {
 .landing-hero-canvas {
 min-height: auto;
 }

 .landing-tech-column {
 display: grid;
 min-height: auto;
 gap: 1rem;
 }

 .landing-radar-field {
 inset: -8% -12%;
 }

 .landing-float-card,
 .landing-float-card-large,
 .landing-float-card-small,
 .landing-float-card-medium {
 position: relative;
 inset: auto;
 width: 100%;
 }

 .landing-chart-card {
 min-height: 220px;
 }
}

@media (prefers-reduced-motion: reduce) {
 .landing-shell,
 .landing-stage,
 .landing-stage header,
 .landing-copy > *,
 .landing-float-card,
 .app-view-enter,
 #appShell,
 #appShell > aside,
 #appShell > div,
 #training-modules-container > section,
 #appShell::after,
 .landing-marquee-track,
 .radar-ring,
 .data-dot {
 animation: none;
 opacity: 1;
 transform: none;
 }
}

@media (max-width: 1023px) {
 .premium-panel {
 border-radius: 20px;
 }

 body.study-mode-active #appShell > div {
 width: 100%;
 }

 body.study-mode-active #studyView {
 height: 100vh;
 }
}

@media (max-width: 860px) {
 #appShell {
 flex-direction: column;
 padding: 0.75rem;
 }

 #appShell > aside {
 position: relative;
 display: flex !important;
 width: 100%;
 min-height: auto;
 height: auto;
 align-self: stretch;
 }

 #appShell > aside nav {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 0.5rem;
 }

 #appShell > aside .nav-btn {
 min-height: 3rem;
 justify-content: center;
 text-align: center;
 padding-inline: 0.85rem;
 }

 #dashboardView {
 display: block;
 }

 #dashboardView > aside {
 margin-top: 1.5rem;
 }

 #calendar-grid {
 min-width: 900px;
 }

 #calendarView {
 overflow-x: auto;
 }

 .daily-hard-visual {
 min-height: 180px;
 }
}

/* Unboxed "million-dollar trading OS" layer. This intentionally overrides the framed hero. */
:root {
 --nexus-bg: #02060b;
 --nexus-panel: rgba(3, 12, 20, 0.62);
 --nexus-line: rgba(122, 208, 255, 0.105);
 --nexus-line-soft: rgba(122, 208, 255, 0.055);
 --nexus-cyan: #62e6ff;
 --nexus-green: #4dffb4;
 --nexus-amber: #ff9d3d;
 --nexus-cream: #fff3df;
}

body:not(.study-mode-active),
#pageShell,
.landing-shell,
#appShell {
 background:
 linear-gradient(var(--nexus-line-soft) 1px, transparent 1px),
 linear-gradient(90deg, var(--nexus-line-soft) 1px, transparent 1px),
 linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
 linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
 radial-gradient(circle at 74% 24%, rgba(98, 230, 255, 0.135), transparent 34%),
 radial-gradient(circle at 24% 72%, rgba(77, 255, 180, 0.085), transparent 30%),
 linear-gradient(135deg, #02060b 0%, #04111a 44%, #02060b 100%) !important;
 background-size: 88px 88px, 88px 88px, 22px 22px, 22px 22px, auto, auto, auto !important;
}

.landing-shell {
 position: relative;
 padding: 0 !important;
 min-height: 100vh;
 overflow: hidden;
}

.landing-shell::before,
.landing-shell::after {
 content: "";
 position: fixed;
 inset: 0;
 pointer-events: none;
}

.landing-shell::before {
 background:
 repeating-linear-gradient(115deg, transparent 0 118px, rgba(98, 230, 255, 0.025) 119px, transparent 121px),
 radial-gradient(ellipse 120% 70% at 50% -8%, rgba(34, 211, 238, 0.1), transparent 52%),
 radial-gradient(ellipse 80% 50% at 100% 100%, rgba(52, 211, 153, 0.05), transparent 55%);
 opacity: 0.72;
 animation: nexusFieldBreathe 8s ease-in-out infinite alternate;
}

.landing-shell::after {
 background:
 linear-gradient(90deg, rgba(2, 6, 11, 0.82), transparent 24%, transparent 76%, rgba(2, 6, 11, 0.72)),
 linear-gradient(180deg, rgba(2, 6, 11, 0.34), transparent 28%, rgba(2, 6, 11, 0.46));
}

#landing-hero {
 width: 100% !important;
 max-width: none !important;
 min-height: 100vh !important;
 min-height: 100dvh !important;
 display: flex !important;
 flex-direction: column !important;
 margin: 0 !important;
 border: 0 !important;
 border-radius: 0 !important;
 background: transparent !important;
 box-shadow: none !important;
 overflow: visible !important;
}

#landing-hero header {
 max-width: 1440px;
 width: min(100%, 1440px);
 margin-inline: auto;
 padding: 1.15rem clamp(1.25rem, 4vw, 4rem) 0.75rem !important;
 border: 0;
}

#landing-hero header > a:first-child {
 width: 3.35rem !important;
 height: 3.35rem !important;
 border-color: rgba(255, 243, 223, 0.25) !important;
 background: rgba(2, 8, 18, 0.66) !important;
 box-shadow: 0 0 34px rgba(98, 230, 255, 0.12) !important;
 overflow: hidden;
}

.nexus-logo-img,
.abra-logo-img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.landing-hero-canvas {
 width: min(100%, 1440px);
 margin-inline: auto;
 flex: 1 1 auto;
 min-height: 0 !important;
 padding-top: 0 !important;
 padding-bottom: clamp(1rem, 2vw, 1.5rem) !important;
 padding-inline: clamp(1.25rem, 4vw, 4rem) !important;
 align-items: center;
 gap: clamp(3rem, 6vw, 8rem);
}

.landing-hero-canvas > .landing-copy,
.landing-hero-canvas > .landing-tech-column {
 margin-top: 0 !important;
 padding-top: 0 !important;
}

.landing-hero-canvas::before,
.landing-hero-canvas::after,
.landing-stage::before,
.landing-stage::after {
 display: none !important;
}

.landing-copy {
 max-width: 760px !important;
}

.landing-kicker {
 color: rgba(255, 243, 223, 0.70) !important;
}

.landing-hero-title {
 font-family: "Space Grotesk", Manrope, ui-sans-serif, system-ui, sans-serif !important;
 font-size: clamp(3.05rem, 6.7vw, 6.7rem) !important;
 line-height: 0.94 !important;
 font-weight: 700 !important;
 color: transparent !important;
 background:
 linear-gradient(180deg, #fff8ea 0%, #dbeafe 52%, rgba(98, 230, 255, 0.86) 100%);
 -webkit-background-clip: text;
 background-clip: text;
 text-wrap: balance;
 filter: drop-shadow(0 0 36px rgba(98, 230, 255, 0.10));
}

.landing-hero-title::after {
 content: "";
}

.landing-copy > p:nth-of-type(2) {
 max-width: 650px;
 color: rgba(226, 232, 240, 0.82) !important;
 font-size: 1.08rem;
}

.landing-copy .mt-9 a:first-child,
#landing-hero header > a:last-child {
 background: linear-gradient(135deg, var(--nexus-cream), #bafcff) !important;
 color: #02060b !important;
 box-shadow: 0 18px 55px rgba(98, 230, 255, 0.16);
}

.landing-copy .mt-9 a:last-child {
 border-color: rgba(98, 230, 255, 0.18) !important;
 background: rgba(98, 230, 255, 0.055) !important;
}

.landing-metric {
 border-radius: 0 !important;
 border: 0 !important;
 border-left: 1px solid rgba(255, 157, 61, 0.45) !important;
 background: linear-gradient(90deg, rgba(255, 157, 61, 0.075), transparent) !important;
 box-shadow: none !important;
}

.landing-tech-column {
 min-height: 600px;
 perspective: 1200px;
 margin-top: 0;
 padding-top: 0;
}

.landing-marquee {
 position: relative;
 left: auto;
 top: auto;
 z-index: 4;
 width: 100%;
 margin-left: 0;
 overflow: hidden;
 border-block: 1px solid rgba(98, 230, 255, 0.10);
 background:
 linear-gradient(90deg, rgba(2, 6, 11, 0.92), rgba(3, 15, 24, 0.72), rgba(2, 6, 11, 0.92)),
 rgba(2, 8, 18, 0.66);
 box-shadow:
 0 18px 60px rgba(0, 0, 0, 0.26),
 inset 0 1px 0 rgba(255, 255, 255, 0.025);
 pointer-events: none;
}

.landing-marquee-bottom {
 width: 100vw;
 margin-left: calc(50% - 50vw);
 margin-right: calc(50% - 50vw);
}

.landing-marquee-track {
 display: flex;
 width: max-content;
 min-width: 200%;
 animation: landingMarquee 34s linear infinite;
 will-change: transform;
}

.landing-marquee span {
 display: inline-flex;
 align-items: center;
 gap: 1rem;
 padding: 1.35rem 2.4rem;
 color: rgba(255, 243, 223, 0.66);
 font-size: 0.72rem;
 font-weight: 900;
 letter-spacing: 0.22em;
 text-transform: uppercase;
 white-space: nowrap;
}

.landing-marquee span::after {
 content: "";
 width: 0.32rem;
 height: 0.32rem;
 margin-left: 1.4rem;
 border-radius: 999px;
 background: var(--nexus-amber);
 box-shadow: 0 0 14px rgba(255, 157, 61, 0.72);
}

.landing-marquee strong {
 color: var(--nexus-cream);
 font-size: 1.7rem;
 font-weight: 800;
 letter-spacing: 0;
 text-transform: none;
}

.landing-radar-field {
 inset: -10% -16% -8% -3%;
 filter: drop-shadow(0 0 34px rgba(98, 230, 255, 0.10));
}

.radar-ring {
 border-style: solid;
 border-color: rgba(98, 230, 255, 0.13);
}

.radar-ring::before,
.radar-ring::after {
 content: "";
 position: absolute;
 inset: -1px;
 border-radius: inherit;
 border: 1px dashed rgba(255, 157, 61, 0.10);
 transform: rotate(21deg);
}

.landing-float-card {
 border-radius: 0.45rem !important;
 border-color: rgba(98, 230, 255, 0.16) !important;
 background:
 linear-gradient(rgba(98, 230, 255, 0.035) 1px, transparent 1px),
 linear-gradient(90deg, rgba(98, 230, 255, 0.03) 1px, transparent 1px),
 linear-gradient(140deg, rgba(255, 157, 61, 0.09), transparent 28%),
 rgba(3, 12, 20, 0.68) !important;
 background-size: 34px 34px, 34px 34px, auto, auto;
 box-shadow:
 0 34px 110px rgba(0, 0, 0, 0.48),
 0 0 0 1px rgba(255, 255, 255, 0.03),
 0 0 80px rgba(98, 230, 255, 0.12) !important;
 transform-style: preserve-3d;
 --landing-card-tilt: none;
 translate: 0 0;
 transform: var(--landing-card-tilt);
}

.landing-float-card-large {
 left: 2%;
 top: 0;
 width: min(92%, 540px);
 --landing-card-tilt: rotateY(-8deg) rotateZ(-1.5deg);
}

.landing-float-card-small {
 right: 0;
 bottom: 24%;
 width: min(78%, 450px);
 --landing-card-tilt: rotateY(5deg) rotateZ(0.6deg);
}

.landing-float-card-medium {
 left: 10%;
 bottom: 7%;
 width: min(76%, 400px);
 --landing-card-tilt: rotateY(-3deg) rotateZ(-0.4deg);
}

.landing-float-one {
 animation: landingHoverOne 6.4s ease-in-out 0.2s both infinite;
}

.landing-float-two {
 animation: landingHoverTwo 5.2s ease-in-out 0.9s both infinite;
}

.landing-float-three {
 animation: landingHoverThree 4.7s ease-in-out 1.45s both infinite;
}

.landing-float-card:hover {
 transform: var(--landing-card-tilt) scale(1.025);
}

.landing-chart-card {
 border-radius: 0.35rem !important;
 background:
 linear-gradient(rgba(98, 230, 255, 0.055) 1px, transparent 1px),
 linear-gradient(90deg, rgba(98, 230, 255, 0.05) 1px, transparent 1px),
 radial-gradient(circle at 72% 22%, rgba(77, 255, 180, 0.14), transparent 28%),
 #020812 !important;
 background-size: 36px 36px, 36px 36px, auto, auto !important;
}

.landing-chart-image {
 display: block;
 width: 100%;
 height: 100%;
 min-height: 220px;
 object-fit: cover;
 object-position: center;
}

.landing-hero-chart {
 min-height: 0;
 border-radius: 0 !important;
 border-left: 0;
 border-right: 0;
}

.landing-hero-chart .landing-chart-image {
 min-height: 210px;
 object-fit: contain;
 background: #020812;
}

.landing-hero-chart-compact .landing-chart-image {
 min-height: 140px;
}

#landing-hero > div:last-child {
 width: 100vw;
 margin-inline: calc(50% - 50vw);
 border-top-color: rgba(98, 230, 255, 0.08) !important;
 color: rgba(255, 243, 223, 0.36) !important;
}

#dashboardView > main > section,
#dashboardView > aside > section,
#trainingView > section,
#calendarView > section,
#referralView > section,
#billingView > section,
#module-training-card,
#daily-hard-question-card,
#training-modules-container > section,
#calendar-onboarding section,
#studyView {
 border-radius: 0.35rem !important;
}

#dashboardView > main > section,
#dashboardView > aside > section,
#trainingView > section,
#calendarView > section,
#referralView > section,
#billingView > section,
#module-training-card,
#daily-hard-question-card {
 background:
 linear-gradient(rgba(98, 230, 255, 0.028) 1px, transparent 1px),
 linear-gradient(90deg, rgba(98, 230, 255, 0.024) 1px, transparent 1px),
 linear-gradient(135deg, rgba(255, 157, 61, 0.06), transparent 26%),
 rgba(3, 12, 20, 0.62) !important;
 background-size: 42px 42px, 42px 42px, auto, auto !important;
 border-color: rgba(98, 230, 255, 0.135) !important;
}

.calendar-day,
.training-lesson-card,
.dashboard-scenario-card {
 border-radius: 0 !important;
}

@keyframes nexusFieldBreathe {
 from {
 opacity: 0.62;
 transform: scale(1);
 }
 to {
 opacity: 0.92;
 transform: scale(1.012);
 }
}

@keyframes landingMarquee {
 from {
 transform: translateX(0);
 }
 to {
 transform: translateX(-50%);
 }
}

@keyframes landingHoverOne {
 0%,
 100% {
 opacity: 1;
 translate: 0 0;
 }
 50% {
 opacity: 1;
 translate: 0 -15px;
 }
}

@keyframes landingHoverTwo {
 0%,
 100% {
 opacity: 1;
 translate: 0 0;
 }
 50% {
 opacity: 1;
 translate: 0 -11px;
 }
}

@keyframes landingHoverThree {
 0%,
 100% {
 opacity: 1;
 translate: 0 0;
 }
 50% {
 opacity: 1;
 translate: 0 -13px;
 }
}

@media (max-width: 1023px) {
 .landing-hero-canvas {
 grid-template-columns: 1fr !important;
 }

 .landing-tech-column {
 min-height: 560px;
 padding-top: 0;
 }
}

@media (max-width: 640px) {
 .landing-hero-title {
 font-size: clamp(2.65rem, 14vw, 4.3rem) !important;
 }

 .landing-tech-column {
 min-height: auto;
 }

 .landing-marquee {
 position: relative;
 left: auto;
 top: auto;
 width: calc(100% + 2.5rem);
 margin: 1.5rem -1.25rem;
 }

 .landing-marquee span {
 padding: 1rem 1.45rem;
 font-size: 0.62rem;
 }

 .landing-marquee strong {
 font-size: 1.25rem;
 }
}

/* Mirror the landing-page system across auth and in-app views. */
.auth-page-shell {
 position: relative;
 min-height: 100vh;
 overflow: hidden;
 background:
 linear-gradient(var(--nexus-line-soft) 1px, transparent 1px),
 linear-gradient(90deg, var(--nexus-line-soft) 1px, transparent 1px),
 linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
 linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
 radial-gradient(circle at 76% 24%, rgba(98, 230, 255, 0.16), transparent 34%),
 radial-gradient(circle at 18% 78%, rgba(77, 255, 180, 0.095), transparent 32%),
 linear-gradient(135deg, #02060b 0%, #04111a 44%, #02060b 100%) !important;
 background-size: 88px 88px, 88px 88px, 22px 22px, 22px 22px, auto, auto, auto !important;
 animation: appShellReveal 1.1s ease-out both;
}

.auth-page-shell::before,
.auth-page-shell::after {
 content: "";
 position: fixed;
 inset: 0;
 pointer-events: none;
}

.auth-page-shell::before {
 background:
 repeating-linear-gradient(115deg, transparent 0 118px, rgba(98, 230, 255, 0.035) 119px, transparent 121px),
 radial-gradient(circle at 77% 45%, transparent 0 11%, rgba(98, 230, 255, 0.09) 11.2% 11.5%, transparent 11.7% 22%, rgba(255, 157, 61, 0.08) 22.2% 22.45%, transparent 22.7% 37%, rgba(98, 230, 255, 0.06) 37.2% 37.42%, transparent 37.7%);
 animation: nexusFieldBreathe 8s ease-in-out infinite alternate;
}

.auth-page-shell::after {
 background:
 linear-gradient(90deg, rgba(2, 6, 11, 0.86), transparent 30%, transparent 70%, rgba(2, 6, 11, 0.74)),
 linear-gradient(180deg, rgba(2, 6, 11, 0.36), transparent 32%, rgba(2, 6, 11, 0.52));
}

.auth-page-shell > section {
 position: relative;
 z-index: 1;
 max-width: min(1120px, calc(100vw - 2rem)) !important;
 border-radius: 0.35rem !important;
 border-color: rgba(98, 230, 255, 0.14) !important;
 background:
 linear-gradient(rgba(98, 230, 255, 0.028) 1px, transparent 1px),
 linear-gradient(90deg, rgba(98, 230, 255, 0.024) 1px, transparent 1px),
 linear-gradient(135deg, rgba(255, 157, 61, 0.07), transparent 28%),
 rgba(3, 12, 20, 0.66) !important;
 background-size: 42px 42px, 42px 42px, auto, auto !important;
 box-shadow:
 0 34px 120px rgba(0, 0, 0, 0.48),
 0 0 90px rgba(98, 230, 255, 0.11) !important;
 backdrop-filter: blur(22px);
 animation: appViewSlideLeft 780ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both;
}

.auth-page-shell aside {
 border-color: rgba(98, 230, 255, 0.12) !important;
}

.auth-page-shell aside::after {
 content: "";
 position: absolute;
 right: -32%;
 bottom: 9%;
 width: 560px;
 height: 560px;
 border-radius: 999px;
 border: 1px solid rgba(98, 230, 255, 0.12);
 box-shadow:
 inset 0 0 0 94px transparent,
 inset 0 0 0 95px rgba(98, 230, 255, 0.08),
 inset 0 0 0 198px transparent,
 inset 0 0 0 199px rgba(255, 157, 61, 0.07);
 pointer-events: none;
 animation: appRadarDrift 94s linear infinite;
}

.auth-page-shell aside h1,
.auth-page-shell section > div h1 {
 letter-spacing: 0 !important;
}

.auth-page-shell aside h1 {
 max-width: 480px;
 color: transparent !important;
 background: linear-gradient(180deg, #fff8ea, #dbeafe 55%, rgba(98, 230, 255, 0.88));
 -webkit-background-clip: text;
 background-clip: text;
 font-size: clamp(3rem, 5vw, 5.2rem) !important;
}

.auth-page-shell section > div h1 {
 color: var(--nexus-cream) !important;
}

.auth-page-shell a:first-child span:first-child {
 background:
 radial-gradient(circle, var(--nexus-amber) 0 13%, transparent 15%),
 radial-gradient(circle, transparent 0 46%, rgba(98, 230, 255, 0.24) 47% 49%, transparent 51%),
 rgba(2, 8, 18, 0.66) !important;
 color: var(--nexus-cream) !important;
}

.auth-page-shell .rounded-3xl,
.auth-page-shell .rounded-2xl {
 border-radius: 0.35rem !important;
}

.auth-mode-button {
 border-radius: 0.25rem !important;
}

.auth-mode-button.active {
 background: linear-gradient(135deg, var(--nexus-cream), #bafcff) !important;
 color: #02060b !important;
}

.auth-field input {
 border-radius: 0.35rem !important;
 border-color: rgba(98, 230, 255, 0.14) !important;
 background:
 linear-gradient(rgba(98, 230, 255, 0.026) 1px, transparent 1px),
 linear-gradient(90deg, rgba(98, 230, 255, 0.022) 1px, transparent 1px),
 rgba(2, 8, 18, 0.72) !important;
 background-size: 28px 28px, 28px 28px, auto !important;
}

.auth-field input:focus {
 border-color: rgba(98, 230, 255, 0.55) !important;
 box-shadow: 0 0 0 4px rgba(98, 230, 255, 0.10), 0 0 36px rgba(98, 230, 255, 0.12) !important;
}

#signup-button,
#login-button,
#forgot-password-button,
#rebuild-calendar-plan,
#clear-calendar-plan,
#calendar-prev-month,
#calendar-next-month,
#calendar-today,
#submit-study-answer,
#skip-study-answer {
 border-radius: 999px !important;
}

#appShell > div {
 width: min(100%, 1480px);
 margin-inline: auto;
}

#appShell > aside {
 background:
 linear-gradient(rgba(98, 230, 255, 0.034) 1px, transparent 1px),
 linear-gradient(90deg, rgba(98, 230, 255, 0.028) 1px, transparent 1px),
 rgba(2, 8, 18, 0.76) !important;
 background-size: 44px 44px, 44px 44px, auto !important;
}

#dashboardView,
#trainingView,
#calendarView,
#referralView,
#billingView {
 gap: 1.1rem !important;
}

#dashboardView > main > section,
#dashboardView > aside > section,
#trainingView > section,
#calendarView > section,
#referralView > section,
#billingView > section,
#module-training-card,
#daily-hard-question-card,
#training-modules-container > section {
 backdrop-filter: blur(22px);
}

#dashboardView > main > section:first-child h1,
#trainingView > section:first-child h1,
#calendarView > section:first-child h1,
#referralView > section:first-child h1,
#billingView h1 {
 color: transparent !important;
 background: linear-gradient(180deg, #fff8ea, #dbeafe 58%, rgba(98, 230, 255, 0.86));
 -webkit-background-clip: text;
 background-clip: text;
 font-size: clamp(2rem, 4vw, 3.6rem) !important;
 line-height: 0.98 !important;
}

#calendar-grid {
 border: 1px solid rgba(98, 230, 255, 0.11);
}

.calendar-day {
 background:
 linear-gradient(rgba(98, 230, 255, 0.024) 1px, transparent 1px),
 linear-gradient(90deg, rgba(98, 230, 255, 0.02) 1px, transparent 1px),
 rgba(2, 8, 18, 0.50) !important;
 background-size: 28px 28px, 28px 28px, auto !important;
}

.calendar-event {
 border-radius: 0.25rem !important;
}

/* Premium app polish: dashboard, calendar, training bank, and referral UI. */
#dashboardView > main > section:first-child > .flex {
 align-items: flex-start !important;
}

#marketStatus {
 margin-left: auto;
 white-space: nowrap;
}

#dashboardView > main > section:first-child #marketStatus {
 position: absolute;
 right: clamp(1.5rem, 4vw, 4.5rem);
 top: 2.35rem;
 z-index: 2;
}

#module-training-card .video-thumbnail-card {
 width: 100%;
 max-height: 292px;
 min-height: 0;
 border-radius: 0.45rem !important;
}

.video-thumbnail-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 520px));
 gap: 1rem;
 align-items: start;
 justify-content: center;
}

#module-training-card .video-play-button {
 width: 3.8rem;
 height: 3.8rem;
 padding-left: 0;
 font-size: 0.72rem;
 font-weight: 900;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}

.calendar-view-toggle {
 border-radius: 0.55rem !important;
}

.calendar-view-button {
 border-radius: 0.35rem !important;
 color: rgba(203, 213, 225, 0.72);
 transition: background 160ms ease, color 160ms ease, transform 120ms ease;
}

.calendar-view-button.active {
 background: rgba(98, 230, 255, 0.14);
 color: #ecfeff;
 box-shadow: inset 0 0 0 1px rgba(98, 230, 255, 0.24);
}

#calendar-grid.calendar-grid-week {
 grid-auto-rows: minmax(320px, auto);
}

.calendar-day {
 min-height: 156px !important;
 padding: 0.65rem !important;
}

.calendar-grid-week .calendar-day {
 min-height: 320px !important;
}

.calendar-event {
 margin-top: 0.45rem !important;
 border-radius: 0.28rem !important;
 padding: 0.48rem 0.55rem !important;
 white-space: normal;
 color: rgba(248, 250, 252, 0.94) !important;
 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 8px 20px rgba(0, 0, 0, 0.18) !important;
}

.calendar-event div {
 overflow: visible;
 text-overflow: clip;
 white-space: normal;
}

.calendar-event-cyan {
 background: linear-gradient(135deg, #0d4d5c, #166b78) !important;
}

.calendar-event-emerald {
 background: linear-gradient(135deg, #104b3a, #1e6d51) !important;
}

.calendar-event-blue {
 background: linear-gradient(135deg, #1b3458, #294e78) !important;
}

.calendar-event-amber {
 background: linear-gradient(135deg, #5d3b18, #876024) !important;
}

.calendar-event-purple {
 background: linear-gradient(135deg, #332858, #4d4071) !important;
}

.calendar-event-teal {
 background: linear-gradient(135deg, #123f46, #176061) !important;
}

.calendar-event-rose {
 background: linear-gradient(135deg, #572239, #7b3650) !important;
}

.training-lesson-card {
 gap: 1.25rem;
 align-items: center;
}

.training-progress-track {
 border: 1px solid rgba(255, 255, 255, 0.07);
 background: rgba(148, 163, 184, 0.13) !important;
}

.training-progress-bar {
 background: linear-gradient(90deg, #62e6ff, #4ade80);
 box-shadow: 0 0 18px rgba(98, 230, 255, 0.26);
}

.training-progress-copy {
 color: #a5f3fc;
}

#referralView {
 width: min(100%, 1120px);
 margin-inline: auto;
 gap: 1.25rem !important;
}

#referralView > section {
 width: 100%;
}

#referralView > section:nth-of-type(2) {
 grid-template-columns: minmax(0, 760px) !important;
 justify-content: center;
}

#referralView > section:nth-of-type(2) > div,
#referralView > section:nth-of-type(2) > aside {
 width: 100%;
}

#referralView aside {
 align-self: start;
}

#referral-used-count {
 font-size: clamp(2.25rem, 4vw, 3rem) !important;
 line-height: 1;
}

#referralView aside .space-y-3 {
 display: grid;
 gap: 0.85rem;
}

#referralView aside .space-y-3 > p {
 margin: 0 !important;
 padding-top: 0.7rem;
 border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 1180px) {
 .video-thumbnail-grid {
 grid-template-columns: minmax(0, 1fr);
 }
}

/* Breathing-room pass: prevent app panels from clipping long labels. */
#calendarView > section:first-child {
 overflow: visible;
}

#calendarView > section:first-child > div:first-child > div:first-child {
 min-width: 0;
 max-width: min(100%, 860px);
}

#calendar-summary {
 max-width: 78ch;
 white-space: normal;
 overflow-wrap: anywhere;
 line-height: 1.65;
}

#calendarView .calendar-event {
 min-width: 0 !important;
 border-radius: 0.45rem !important;
 padding: 0.55rem 0.6rem !important;
 font-size: clamp(0.62rem, 0.58vw, 0.74rem) !important;
 line-height: 1.22 !important;
}

#calendarView .calendar-event div {
 min-width: 0;
 overflow-wrap: anywhere;
}

#calendarView .calendar-event div:first-child {
 margin-bottom: 0.1rem;
}

#calendarView .calendar-event div:nth-child(2) {
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

#referralView {
 width: min(100%, 980px);
}

#referralView > section:nth-of-type(2) {
 grid-template-columns: minmax(0, 900px) !important;
}

#referral-active-panel > div {
 align-items: stretch;
}

#referral-code-copy {
 min-width: 0;
 overflow-wrap: anywhere;
 white-space: normal;
 letter-spacing: 0.16em !important;
}

#trainingView > section:first-child h1,
#calendarView > section:first-child h1,
#referralView > section:first-child h1 {
 line-height: 1.12 !important;
 padding-bottom: 0.08em;
}

#referralView > section:nth-of-type(2) {
 padding: 0 !important;
 border: 0 !important;
 background: transparent !important;
 box-shadow: none !important;
 backdrop-filter: none !important;
}

#referralView > section:nth-of-type(2)::before {
 display: none !important;
}

#referralView > section:nth-of-type(2) > div,
#referralView > section:nth-of-type(2) > aside {
 border: 1px solid rgba(98, 230, 255, 0.135) !important;
 background:
 linear-gradient(rgba(98, 230, 255, 0.028) 1px, transparent 1px),
 linear-gradient(90deg, rgba(98, 230, 255, 0.024) 1px, transparent 1px),
 rgba(3, 12, 20, 0.72) !important;
 background-size: 42px 42px, 42px 42px, auto !important;
 box-shadow:
 0 26px 90px rgba(0, 0, 0, 0.30),
 inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

#studyView {
 border-color: rgba(98, 230, 255, 0.14) !important;
}

#study-content article {
 animation: appViewSlideRight 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (max-width: 1023px) {
 .auth-page-shell > section {
 max-width: min(620px, calc(100vw - 2rem)) !important;
 }

 #appShell > div {
 width: 100%;
 }
}

/* Auth page final pass: make login feel like the unboxed landing canvas. */
.auth-page-shell {
 display: grid !important;
 place-items: stretch !important;
 padding: 0 !important;
}

.auth-page-shell > section {
 display: grid !important;
 grid-template-columns: minmax(0, 1fr) minmax(420px, 0.78fr) !important;
 width: 100% !important;
 max-width: none !important;
 min-height: 100vh !important;
 border: 0 !important;
 border-radius: 0 !important;
 background: transparent !important;
 box-shadow: none !important;
 overflow: hidden !important;
}

.auth-page-shell > section > aside {
 display: block !important;
 min-height: 100vh !important;
 border-right: 1px solid rgba(98, 230, 255, 0.10) !important;
 background:
 linear-gradient(rgba(98, 230, 255, 0.026) 1px, transparent 1px),
 linear-gradient(90deg, rgba(98, 230, 255, 0.022) 1px, transparent 1px),
 linear-gradient(135deg, rgba(255, 157, 61, 0.05), transparent 32%),
 rgba(2, 8, 18, 0.34) !important;
 background-size: 88px 88px, 88px 88px, auto, auto !important;
 padding: clamp(2rem, 4vw, 4rem) !important;
}

.auth-page-shell > section > aside > a {
 position: relative;
 z-index: 2;
}

.auth-page-shell > section > aside > a span:first-child {
 width: 3.35rem !important;
 height: 3.35rem !important;
 border: 1px solid rgba(255, 243, 223, 0.25);
 box-shadow: 0 0 34px rgba(98, 230, 255, 0.12);
}

.auth-page-shell > section > aside .absolute {
 left: clamp(2rem, 4vw, 4rem) !important;
 right: clamp(2rem, 9vw, 9rem) !important;
 bottom: clamp(3rem, 8vw, 7rem) !important;
 z-index: 2;
}

.auth-page-shell > section > aside h1 {
 font-family: "Space Grotesk", Manrope, ui-sans-serif, system-ui, sans-serif !important;
 font-size: clamp(4rem, 8vw, 8.1rem) !important;
 line-height: 0.88 !important;
 font-weight: 700 !important;
 max-width: 820px !important;
}

.auth-page-shell > section > aside p:last-child {
 max-width: 620px;
 color: rgba(226, 232, 240, 0.82) !important;
 font-size: 1.02rem;
}

.auth-page-shell > section > section {
 position: relative;
 z-index: 2;
 align-self: center;
 width: min(100%, 560px);
 margin-inline: auto;
 padding: clamp(1.5rem, 4vw, 4rem) !important;
 border: 1px solid rgba(98, 230, 255, 0.14);
 border-radius: 0.45rem;
 background:
 linear-gradient(rgba(98, 230, 255, 0.028) 1px, transparent 1px),
 linear-gradient(90deg, rgba(98, 230, 255, 0.024) 1px, transparent 1px),
 linear-gradient(140deg, rgba(255, 157, 61, 0.075), transparent 31%),
 rgba(3, 12, 20, 0.72) !important;
 background-size: 36px 36px, 36px 36px, auto, auto !important;
 box-shadow:
 0 34px 120px rgba(0, 0, 0, 0.48),
 0 0 90px rgba(98, 230, 255, 0.10);
 backdrop-filter: blur(22px);
 animation: appViewSlideRight 780ms cubic-bezier(0.16, 1, 0.3, 1) 240ms both;
}

.auth-page-shell > section > section::before {
 content: "";
 position: absolute;
 right: -18%;
 top: -16%;
 width: 320px;
 height: 320px;
 border-radius: 999px;
 border: 1px solid rgba(98, 230, 255, 0.12);
 box-shadow:
 inset 0 0 0 58px transparent,
 inset 0 0 0 59px rgba(98, 230, 255, 0.07),
 inset 0 0 0 112px transparent,
 inset 0 0 0 113px rgba(255, 157, 61, 0.06);
 pointer-events: none;
}

.auth-page-shell > section > section > a:first-child {
 color: rgba(255, 243, 223, 0.76) !important;
}

.auth-page-shell > section > section > div:nth-of-type(1) p:first-child,
.auth-page-shell .auth-field span,
.auth-page-shell .rounded-3xl p:first-child {
 color: var(--nexus-cyan) !important;
}

.auth-page-shell > section > section > div:nth-of-type(1) h1 {
 color: transparent !important;
 background: linear-gradient(180deg, #fff8ea, #dbeafe 58%, rgba(98, 230, 255, 0.86));
 -webkit-background-clip: text;
 background-clip: text;
 font-size: clamp(2.5rem, 4.2vw, 4.4rem) !important;
 line-height: 0.96 !important;
}

.auth-page-shell > section > section > div:nth-of-type(2) {
 border-color: rgba(98, 230, 255, 0.16) !important;
 background:
 linear-gradient(rgba(98, 230, 255, 0.032) 1px, transparent 1px),
 linear-gradient(90deg, rgba(98, 230, 255, 0.026) 1px, transparent 1px),
 rgba(2, 22, 25, 0.62) !important;
 background-size: 32px 32px, 32px 32px, auto !important;
}

.auth-page-shell form {
 position: relative;
 z-index: 2;
}

.auth-page-shell #signup-button,
.auth-page-shell #login-button {
 background: linear-gradient(135deg, #62e6ff, #4dffb4) !important;
 border-radius: 999px !important;
}

.auth-page-shell #forgot-password-button {
 border-color: rgba(98, 230, 255, 0.20) !important;
 background: rgba(98, 230, 255, 0.07) !important;
}

@media (max-width: 1023px) {
 .auth-page-shell > section {
 grid-template-columns: 1fr !important;
 }

 .auth-page-shell > section > aside {
 display: none !important;
 }

 .auth-page-shell > section > section {
 width: min(100% - 2rem, 560px);
 margin-block: 2rem;
 }
}

/* Clean auth composition + subtle living objects. */
.auth-page-shell {
 place-items: center !important;
 padding: clamp(1.5rem, 4vw, 4rem) !important;
}

.auth-page-shell > section {
 grid-template-columns: minmax(420px, 0.95fr) minmax(420px, 520px) !important;
 gap: clamp(2rem, 5vw, 5rem);
 width: min(1240px, 100%) !important;
 min-height: min(780px, calc(100vh - 5rem)) !important;
 max-height: none !important;
 align-items: center;
 overflow: visible !important;
}

.auth-page-shell > section > aside {
 min-height: min(720px, calc(100vh - 7rem)) !important;
 border-right: 0 !important;
 border: 1px solid rgba(98, 230, 255, 0.10) !important;
 border-radius: 0.55rem !important;
 background:
 linear-gradient(rgba(98, 230, 255, 0.022) 1px, transparent 1px),
 linear-gradient(90deg, rgba(98, 230, 255, 0.018) 1px, transparent 1px),
 radial-gradient(circle at 86% 78%, rgba(98, 230, 255, 0.08), transparent 26%),
 rgba(2, 8, 18, 0.40) !important;
 background-size: 76px 76px, 76px 76px, auto, auto !important;
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.auth-page-shell > section > aside::after {
 right: -14%;
 bottom: 9%;
 width: 360px;
 height: 360px;
 opacity: 0.42;
}

.auth-page-shell > section > aside .absolute {
 right: clamp(2rem, 5vw, 5rem) !important;
 bottom: clamp(2.5rem, 5vw, 4.5rem) !important;
}

.auth-page-shell > section > aside h1 {
 font-size: clamp(3rem, 5.8vw, 5.85rem) !important;
 line-height: 0.95 !important;
 max-width: 640px !important;
}

.auth-page-shell > section > aside p:last-child {
 max-width: 560px;
 font-size: 0.98rem;
}

.auth-page-shell > section > section {
 width: min(100%, 500px) !important;
 margin-inline: 0 !important;
 justify-self: end;
 padding: clamp(1.65rem, 3vw, 2.6rem) !important;
 border-radius: 0.55rem !important;
 background:
 linear-gradient(rgba(98, 230, 255, 0.026) 1px, transparent 1px),
 linear-gradient(90deg, rgba(98, 230, 255, 0.022) 1px, transparent 1px),
 linear-gradient(145deg, rgba(255, 157, 61, 0.06), transparent 34%),
 rgba(3, 12, 20, 0.74) !important;
 box-shadow:
 0 30px 90px rgba(0, 0, 0, 0.42),
 0 0 56px rgba(98, 230, 255, 0.08);
 animation:
 appViewSlideRight 720ms cubic-bezier(0.16, 1, 0.3, 1) 140ms both,
 nexusFloatTiny 6.8s ease-in-out 1.2s infinite;
}

.auth-page-shell > section > section::before {
 right: -48px;
 top: -48px;
 width: 150px;
 height: 150px;
 opacity: 0.38;
 animation: nexusSpinSlow 42s linear infinite;
}

.auth-page-shell > section > section > div:nth-of-type(1) {
 margin-top: 2rem !important;
}

.auth-page-shell > section > section > div:nth-of-type(1) h1 {
 font-size: clamp(2.15rem, 3vw, 3.05rem) !important;
 line-height: 1.05 !important;
}

.auth-page-shell > section > section > div:nth-of-type(2) {
 padding: 1.15rem !important;
 animation: nexusFloatMicro 5.6s ease-in-out 900ms infinite;
}

.auth-page-shell .auth-field input {
 min-height: 3.55rem;
}

.auth-page-shell #signup-button,
.auth-page-shell #login-button {
 min-height: 3.5rem;
}

.auth-page-shell > section > aside > a span:first-child,
#landing-hero header > a:first-child {
 animation: nexusFloatMicro 4.8s ease-in-out infinite;
}

.landing-metric:nth-child(1) {
 animation: nexusFloatMicro 5.4s ease-in-out 300ms infinite;
}

.landing-metric:nth-child(2) {
 animation: nexusFloatTiny 6.3s ease-in-out 900ms infinite;
}

.landing-metric:nth-child(3) {
 animation: nexusFloatMicro 5.9s ease-in-out 1.4s infinite;
}

.landing-copy .mt-9 a:first-child {
 animation: nexusFloatMicro 5.2s ease-in-out 800ms infinite;
}

.landing-kicker {
 animation: nexusFloatMicro 6.4s ease-in-out 500ms infinite;
}

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

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

@keyframes nexusSpinSlow {
 to {
 transform: rotate(360deg);
 }
}

@media (prefers-reduced-motion: reduce) {
 .auth-page-shell > section > section,
 .auth-page-shell > section > section::before,
 .auth-page-shell > section > section > div:nth-of-type(2),
 .auth-page-shell > section > aside > a span:first-child,
 #landing-hero header > a:first-child,
 .landing-metric,
 .landing-copy .mt-9 a:first-child,
 .landing-kicker {
 animation: none !important;
 transform: none !important;
 }
}

@media (max-width: 1023px) {
 .auth-page-shell {
 padding: 1.25rem !important;
 }

 .auth-page-shell > section {
 width: min(100%, 560px) !important;
 min-height: auto !important;
 }

 .auth-page-shell > section > section {
 justify-self: center;
 margin-block: 0 !important;
 }
}

/* Auth cleanup: consistent fields, compact checkout note, unified badge. */
.auth-page-shell > section > section {
 display: flex;
 flex-direction: column;
}

.auth-page-shell > section > section > a:first-child {
 order: 1;
}

.auth-page-shell > section > section > div:nth-of-type(1) {
 order: 2;
}

.auth-page-shell > section > section > div:nth-of-type(3) {
 order: 3;
 margin-top: 1.35rem !important;
}

.auth-page-shell #auth-form {
 order: 4;
 margin-top: 1.15rem !important;
}

.auth-page-shell > section > section > div:nth-of-type(2) {
 order: 5;
 margin-top: 1rem !important;
 padding: 0.9rem 1rem !important;
 animation: nexusFloatMicro 6.2s ease-in-out 900ms infinite;
}

.auth-page-shell > section > section > div:nth-of-type(2) .flex {
 align-items: center !important;
}

.auth-page-shell > section > section > div:nth-of-type(2) h2 {
 margin-top: 0.25rem !important;
 font-size: 1rem !important;
 line-height: 1.25 !important;
}

.auth-page-shell > section > section > div:nth-of-type(2) p {
 margin-top: 0.25rem !important;
 font-size: 0.76rem !important;
 line-height: 1.45 !important;
}

.auth-page-shell > section > section > div:nth-of-type(2) span {
 padding: 0.35rem 0.65rem !important;
}

.auth-page-shell .auth-field input,
.auth-page-shell .auth-field input:-webkit-autofill,
.auth-page-shell .auth-field input:-webkit-autofill:hover,
.auth-page-shell .auth-field input:-webkit-autofill:focus {
 min-height: 3.55rem;
 border: 1px solid rgba(98, 230, 255, 0.18) !important;
 background:
 linear-gradient(rgba(98, 230, 255, 0.026) 1px, transparent 1px),
 linear-gradient(90deg, rgba(98, 230, 255, 0.022) 1px, transparent 1px),
 rgba(5, 13, 23, 0.92) !important;
 background-size: 28px 28px, 28px 28px, auto !important;
 color: #eef8ff !important;
 -webkit-text-fill-color: #eef8ff !important;
 box-shadow: inset 0 0 0 1000px rgba(5, 13, 23, 0.92) !important;
 caret-color: var(--nexus-cyan);
}

.auth-page-shell .auth-field input::placeholder {
 color: rgba(203, 226, 239, 0.66) !important;
 opacity: 1;
}

.auth-page-shell .auth-field input:focus {
 border-color: rgba(98, 230, 255, 0.58) !important;
 box-shadow:
 inset 0 0 0 1000px rgba(5, 13, 23, 0.92),
 0 0 0 3px rgba(98, 230, 255, 0.10),
 0 0 30px rgba(98, 230, 255, 0.10) !important;
}

.auth-page-shell > section > aside > a {
 display: inline-flex !important;
 align-items: center !important;
 gap: 0.85rem !important;
 padding: 0.45rem 0.7rem 0.45rem 0.45rem;
 border: 1px solid rgba(98, 230, 255, 0.12);
 border-radius: 999px;
 background: rgba(2, 8, 18, 0.50);
}

.auth-page-shell > section > aside > a > span:first-child {
 display: grid !important;
 width: 2.75rem !important;
 height: 2.75rem !important;
 place-items: center !important;
 margin: 0 !important;
 border-radius: 999px !important;
 font-size: 0.95rem !important;
}

.auth-page-shell > section > aside > a > span:last-child {
 display: block !important;
 line-height: 1.1;
}

.auth-page-shell > section > aside > a > span:last-child > span:first-child {
 display: block !important;
 width: auto !important;
 height: auto !important;
 border: 0 !important;
 border-radius: 0 !important;
 background: transparent !important;
 color: rgba(203, 226, 239, 0.68) !important;
 box-shadow: none !important;
 letter-spacing: 0.28em;
}

.auth-page-shell > section > aside > a > span:last-child > span:last-child {
 margin-top: 0.18rem;
}

.auth-page-shell > section > aside,
.auth-page-shell > section > section {
 transition: transform 220ms ease, box-shadow 220ms ease;
}

.auth-page-shell > section > aside:hover,
.auth-page-shell > section > section:hover {
 transform: translateY(-5px);
 box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34), 0 0 40px rgba(98, 230, 255, 0.10);
}

/* Landing readability and mobile polish. */
.landing-feature-card p,
#landing-outcomes p,
#landing-curriculum p {
 color: rgba(226, 238, 246, 0.82) !important;
}

.landing-marquee span {
 color: rgba(255, 243, 223, 0.82) !important;
 font-weight: 1000;
}

.landing-marquee strong {
 color: #fff8ea !important;
}

.landing-metric {
 padding-block: 1.25rem !important;
}

.landing-copy .mt-10 {
 margin-top: 2.25rem !important;
 margin-bottom: 0.75rem;
}

@media (max-width: 640px) {
 .landing-copy .mt-10 {
 grid-template-columns: 1fr;
 margin-top: 2rem !important;
 }

 .landing-marquee span {
 color: rgba(255, 243, 223, 0.88) !important;
 font-size: 0.68rem;
 }

 .landing-disclaimer-grid {
 grid-template-columns: 1fr;
 }

 .landing-legal-footer {
 align-items: flex-start;
 flex-direction: column;
 }

 .legal-link-grid {
 grid-template-columns: 1fr 1fr;
 }
}

@media (max-width: 560px) {
 .legal-link-grid {
 grid-template-columns: 1fr;
 }
}
/* Universal Smooth Scroll */
html {
 scroll-behavior: smooth !important;
}

/* Stability override: no refresh-like replay animations on app chrome or clicks. */
#appShell,
#appShell > aside,
#appShell > div,
#dashboardView > main > section,
#dashboardView > aside > section,
#trainingView > section,
#calendarView > section,
#referralView > section,
#billingView > section,
#module-training-card,
#daily-hard-question-card,
#training-modules-container > section {
 animation: none !important;
 filter: none !important;
 opacity: 1 !important;
 transform: none !important;
}

#dashboardView:not(.app-view-enter),
#trainingView:not(.app-view-enter),
#calendarView:not(.app-view-enter),
#referralView:not(.app-view-enter),
#billingView:not(.app-view-enter),
#studyView:not(.app-view-enter) {
 animation: none !important;
 filter: none !important;
 opacity: 1 !important;
 transform: none !important;
}

#dashboardView.app-view-enter,
#trainingView.app-view-enter,
#calendarView.app-view-enter,
#referralView.app-view-enter,
#billingView.app-view-enter,
#studyView.app-view-enter {
 filter: none !important;
 will-change: opacity, transform;
}

#dashboardView.app-view-enter-left,
#trainingView.app-view-enter-left,
#calendarView.app-view-enter-left,
#referralView.app-view-enter-left,
#billingView.app-view-enter-left,
#studyView.app-view-enter-left {
 animation: appViewSlideLeft 520ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

#dashboardView.app-view-enter-right,
#trainingView.app-view-enter-right,
#calendarView.app-view-enter-right,
#referralView.app-view-enter-right,
#billingView.app-view-enter-right,
#studyView.app-view-enter-right {
 animation: appViewSlideRight 520ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

[role="button"],
.btn,
.nav-btn,
.landing-cta-primary,
.landing-cta-secondary,
.auth-mode-button,
.training-start-button,
.calendar-view-button,
#training-shortcut,
#lesson-video-card,
#copy-referral-code,
#referral-upgrade-button,
#rebuild-calendar-plan,
#clear-calendar-plan,
#calendar-prev-month,
#calendar-next-month,
#calendar-today,
#submit-study-answer,
#next-question,
#close-study-mode {
 transition: filter 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease !important;
 will-change: auto !important;
}

[role="button"]:active,
.btn:active,
.nav-btn:active,
.landing-cta-primary:active,
.landing-cta-secondary:active,
.auth-mode-button:active,
.training-start-button:active,
.calendar-view-button:active,
#training-shortcut:active,
#lesson-video-card:active,
#copy-referral-code:active,
#referral-upgrade-button:active,
#rebuild-calendar-plan:active,
#clear-calendar-plan:active,
#calendar-prev-month:active,
#calendar-next-month:active,
#calendar-today:active,
#submit-study-answer:active,
#next-question:active,
#close-study-mode:active {
 transform: none !important;
}

/* Trader workstation refinements: compact nav, drawer panels, micro-interactions. */
#appShell > aside {
 width: 260px;
 transition: width 240ms ease, padding 240ms ease, box-shadow 240ms ease;
}

.sidebar-brand {
 position: relative;
 min-height: 4.2rem;
 padding-right: 2.6rem;
}

.sidebar-brand-lockup {
 display: flex;
 align-items: center;
 gap: 0.8rem;
 min-width: 0;
}

.sidebar-nx-mark {
 display: grid;
 width: 2.6rem;
 height: 2.6rem;
 flex: 0 0 2.6rem;
 place-items: center;
 padding: 0.18rem;
 border: 1px solid rgba(98, 230, 255, 0.22);
 border-radius: 0.85rem;
 background: rgba(2, 8, 18, 0.86);
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 34px rgba(98, 230, 255, 0.13);
 overflow: hidden;
}

.sidebar-nx-mark img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: contain;
}

.sidebar-brand-copy {
 min-width: 0;
}

.sidebar-toggle-button {
 position: absolute;
 right: 0;
 top: 0;
 display: grid;
 width: 2rem;
 height: 2rem;
 place-items: center;
 border: 1px solid rgba(98, 230, 255, 0.16);
 border-radius: 0.45rem;
 background: rgba(98, 230, 255, 0.07);
}

.sidebar-toggle-button span {
 position: absolute;
 width: 0.82rem;
 height: 1px;
 background: rgba(236, 254, 255, 0.9);
}

.sidebar-toggle-button span:first-child {
 transform: translateY(-2.5px);
}

.sidebar-toggle-button span:last-child {
 transform: translateY(2.5px);
}

.nav-btn::before {
 content: none !important;
}

.nav-icon {
 display: inline-grid;
 width: 2rem;
 height: 2rem;
 flex: 0 0 2rem;
 place-items: center;
 border: 1px solid rgba(98, 230, 255, 0.13);
 border-radius: 0.45rem;
 color: #62e6ff;
 background: rgba(98, 230, 255, 0.045);
}

.nav-icon svg {
 width: 1rem;
 height: 1rem;
 fill: none;
 stroke: currentColor;
 stroke-width: 1.9;
 stroke-linecap: round;
 stroke-linejoin: round;
}

.nav-btn.text-white .nav-icon,
.nav-btn.bg-white\/10 .nav-icon {
 border-color: rgba(251, 146, 60, 0.62);
 color: #fff7ed;
 background: rgba(251, 146, 60, 0.12);
 box-shadow: 0 0 18px rgba(251, 146, 60, 0.12);
}

.nav-label,
#appShell > aside section,
#profile-menu-button .min-w-0,
#profile-menu-button > span,
.sidebar-brand-copy {
 transition: opacity 180ms ease, width 180ms ease, transform 180ms ease;
}

body.sidebar-collapsed #appShell {
 gap: 1rem;
}

body.sidebar-collapsed #appShell > aside {
 width: 86px !important;
 padding-inline: 0 !important;
 align-items: center;
}

body.sidebar-collapsed .sidebar-brand {
 min-height: 3rem;
 padding-right: 0;
}

body.sidebar-collapsed .sidebar-brand-copy,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed #appShell > aside section {
 width: 0;
 opacity: 0;
 overflow: hidden;
 pointer-events: none;
}

body.sidebar-collapsed .sidebar-toggle-button {
 position: relative;
 margin-inline: auto;
}

body.sidebar-collapsed #appShell > aside > div:first-child {
 display: flex;
 width: 100%;
 flex-direction: column;
 align-items: center;
 gap: 1.25rem;
}

body.sidebar-collapsed .sidebar-brand-lockup {
 width: 100%;
 justify-content: center;
}

body.sidebar-collapsed .sidebar-brand {
 width: 100%;
 display: grid;
 gap: 0.85rem;
 justify-items: center;
}

body.sidebar-collapsed .sidebar-nx-mark {
 width: 2.6rem;
 height: 2.6rem;
 flex-basis: 2.6rem;
 margin-inline: auto;
 transform: translateX(4px);
 border-radius: 50%;
}

body.sidebar-collapsed #appShell > aside nav {
 display: flex;
 width: 100%;
 flex-direction: column;
 align-items: center;
 gap: 1.25rem;
 margin-top: 0 !important;
}

body.sidebar-collapsed .nav-btn {
 width: 2rem;
 height: 2rem;
 display: grid !important;
 place-items: center !important;
 justify-content: center;
 padding: 0 !important;
 border-color: transparent !important;
 transform: none !important;
}

body.sidebar-collapsed .nav-btn:hover,
body.sidebar-collapsed .nav-btn.bg-white\/10,
body.sidebar-collapsed .nav-btn.text-white {
 border-color: transparent !important;
 transform: none !important;
}

body.sidebar-collapsed #profile-menu-button {
 width: 2rem !important;
 height: 2rem !important;
 display: grid !important;
 place-items: center !important;
 justify-content: center;
 padding: 0 !important;
 border-color: transparent !important;
 background: transparent !important;
 box-shadow: none !important;
}

body.sidebar-collapsed #profile-menu-button .settings-label,
body.sidebar-collapsed #profile-menu-button .settings-chevron {
 display: none;
}

#profile-menu-button {
 border-radius: 0.8rem !important;
 border-color: rgba(98, 230, 255, 0.14) !important;
 background:
 linear-gradient(135deg, rgba(98, 230, 255, 0.10), rgba(77, 255, 180, 0.045)),
 rgba(2, 8, 18, 0.70) !important;
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 18px 38px rgba(0, 0, 0, 0.22);
}

#profile-menu-button .settings-label {
 flex: 1;
 color: #f8fafc;
 font-size: 0.92rem;
 font-weight: 900;
}

.settings-icon {
 display: inline-grid;
 width: 2rem;
 height: 2rem;
 flex: 0 0 2rem;
 place-items: center;
 border: 1px solid rgba(98, 230, 255, 0.20);
 border-radius: 0.45rem;
 background: rgba(98, 230, 255, 0.08);
 color: #a5f3fc;
}

.settings-icon svg {
 width: 1rem;
 height: 1rem;
 fill: none;
 stroke: currentColor;
 stroke-width: 1.8;
 stroke-linecap: round;
 stroke-linejoin: round;
}

#profile-menu-button:hover {
 border-color: rgba(98, 230, 255, 0.28) !important;
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 46px rgba(0, 0, 0, 0.32), 0 0 32px rgba(98, 230, 255, 0.10);
}

#profile-initials {
 border-radius: 0.55rem !important;
 border: 1px solid rgba(236, 254, 255, 0.20);
 box-shadow: 0 0 26px rgba(98, 230, 255, 0.14);
}

#profile-menu {
 width: 100% !important;
 max-width: 100% !important;
 background:
 linear-gradient(rgba(98, 230, 255, 0.035) 1px, transparent 1px),
 linear-gradient(90deg, rgba(98, 230, 255, 0.028) 1px, transparent 1px),
 linear-gradient(145deg, rgba(7, 16, 27, 0.98), rgba(2, 8, 18, 0.98)) !important;
 background-size: 32px 32px, 32px 32px, auto !important;
 border-color: rgba(98, 230, 255, 0.18) !important;
 box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58), 0 0 46px rgba(98, 230, 255, 0.10) !important;
}

.profile-menu-head {
 background:
 radial-gradient(circle at 88% 8%, rgba(98, 230, 255, 0.15), transparent 32%),
 rgba(255, 255, 255, 0.018);
}

#profile-settings-button,
#logout-button {
 min-height: 3.15rem;
}

body.sidebar-collapsed #profile-menu {
 left: 0 !important;
 bottom: calc(100% + 0.65rem) !important;
 width: 100% !important;
}

.training-lesson-card {
 transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
}

.training-lesson-card:hover {
 transform: translateY(-4px) !important;
 border-color: rgba(98, 230, 255, 0.34) !important;
 box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35), 0 0 44px rgba(98, 230, 255, 0.10);
}

.training-module-toggle {
 cursor: pointer;
 transition: background 180ms ease, border-color 180ms ease;
}

.training-module-toggle:hover {
 background: rgba(6, 18, 31, 0.86) !important;
}

.training-module-panel {
 max-height: 0;
 overflow: hidden;
 opacity: 0;
 transition: max-height 320ms ease, opacity 180ms ease;
}

.training-module-shell.is-open .training-module-panel {
 max-height: 4000px;
 opacity: 1;
}

.training-module-shell.is-locked .training-module-toggle {
 cursor: pointer;
}

.training-module-shell.is-locked .training-module-toggle:hover {
 background: rgba(35, 24, 8, 0.62) !important;
}

.training-module-shell.is-locked .training-module-panel {
 max-height: 0 !important;
 opacity: 0 !important;
 pointer-events: none;
}

.training-module-chevron {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 2rem;
 height: 2rem;
 border: 1px solid rgba(103, 232, 249, 0.2);
 border-radius: 999px;
 background: rgba(8, 28, 43, 0.82);
 transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.training-module-shell.is-open .training-module-chevron {
 transform: rotate(180deg);
 border-color: rgba(103, 232, 249, 0.42);
 background: rgba(20, 184, 166, 0.14);
}

.training-module-shell.is-locked .training-module-chevron {
 opacity: 0.42;
}

.training-module-actions {
 white-space: nowrap;
}

.checklist-progress-bar {
 background: linear-gradient(90deg, #62e6ff, #4dffb4);
 box-shadow: 0 0 22px rgba(98, 230, 255, 0.28);
 transition: width 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.skeleton-loader,
#training-modules-container:empty::before,
#calendar-grid:empty::before {
 content: "";
 display: block;
 min-height: 9rem;
 border-radius: 0.7rem;
 background:
 linear-gradient(90deg, rgba(148, 163, 184, 0.06), rgba(148, 163, 184, 0.14), rgba(148, 163, 184, 0.06));
 background-size: 220% 100%;
 animation: skeletonPulse 1.35s ease-in-out infinite;
}

@keyframes skeletonPulse {
 from {
 background-position: 120% 0;
 }
 to {
 background-position: -120% 0;
 }
}

.abra-inline-loader,
.nexus-inline-loader {
 display: inline-flex;
 align-items: center;
 gap: 0.75rem;
 color: #a5f3fc;
}

.abra-loader-dot,
.nexus-loader-dot {
 width: 0.72rem;
 height: 0.72rem;
 border-radius: 999px;
 background: #22d3ee;
 box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.38), 0 0 24px rgba(34, 211, 238, 0.34);
 animation: nexusLoaderPulse 1.2s ease-out infinite;
}

@keyframes nexusLoaderPulse {
 0% {
 transform: scale(0.86);
 box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.42), 0 0 24px rgba(34, 211, 238, 0.28);
 }
 70% {
 transform: scale(1);
 box-shadow: 0 0 0 0.65rem rgba(34, 211, 238, 0), 0 0 30px rgba(34, 211, 238, 0.34);
 }
 100% {
 transform: scale(0.86);
 box-shadow: 0 0 0 0 rgba(34, 211, 238, 0), 0 0 24px rgba(34, 211, 238, 0.28);
 }
}

.dashboard-hero-card > .flex {
 align-items: flex-start !important;
}

.dashboard-risk-copy {
 color: rgba(255, 237, 213, 0.74) !important;
 text-wrap: pretty;
}

.dashboard-hero-card .market-status-pill {
 margin-left: auto;
 flex-shrink: 0;
}

@media (max-width: 720px) {
 .dashboard-hero-card > .flex {
 flex-direction: column;
 }

 .dashboard-hero-card .market-status-pill {
 margin-left: 0;
 align-self: flex-start;
 }
}

#landing-hero header {
 padding-top: 1.15rem !important;
 padding-bottom: 0.75rem !important;
}

@media (max-width: 768px) {
 html,
 body {
 width: 100%;
 overflow-x: hidden;
 }

 .auth-page-shell {
 min-height: 100dvh;
 padding: 0.5rem !important;
 place-items: stretch !important;
 }

 .auth-page-shell::before,
 .auth-page-shell::after {
 display: none !important;
 }

 .auth-page-shell > section {
 width: min(100%, calc(100vw - 1rem)) !important;
 max-width: calc(100vw - 1rem) !important;
 min-height: auto !important;
 grid-template-columns: 1fr !important;
 border-radius: 1.35rem !important;
 margin: 0 auto !important;
 overflow: hidden !important;
 }

 .auth-page-shell > section > aside {
 display: none !important;
 }

 .auth-page-shell > section > section {
 width: 100% !important;
 min-width: 0 !important;
 padding: 1rem !important;
 overflow: visible !important;
 }

 .auth-page-shell > section > section > div:first-of-type {
 margin-top: 1.25rem !important;
 }

 .auth-page-shell > section > section > div:nth-of-type(2) {
 padding: 1rem !important;
 }

 .auth-page-shell > section > section > div:nth-of-type(2) h2 {
 font-size: 1.1rem !important;
 }

 .auth-page-shell > section > section > div:nth-of-type(2) p {
 font-size: 0.8rem !important;
 line-height: 1.45 !important;
 }

 .auth-page-shell > section > section > div:nth-of-type(2) .flex {
 align-items: flex-start !important;
 gap: 0.75rem !important;
 }

 .auth-page-shell > section > section > div:nth-of-type(2) span {
 flex-shrink: 0;
 }

 .auth-page-shell #auth-form {
 width: 100% !important;
 gap: 0.85rem !important;
 }

 .auth-page-shell .auth-field input {
 min-height: 3.35rem;
 font-size: 16px;
 }

 .auth-page-shell .legal-ack-card {
 padding: 0.85rem !important;
 font-size: 0.72rem !important;
 line-height: 1.45 !important;
 }

 .auth-page-shell #signup-button,
 .auth-page-shell #login-button,
 .auth-page-shell #forgot-password-button {
 min-height: 3.4rem;
 padding-inline: 1rem;
 }

 .auth-page-shell a:first-child {
 margin-top: 0.15rem;
 }

 .auth-page-shell a:first-child span:last-child {
 font-size: 0.9rem;
 }
}

@media (max-width: 480px) {
 .auth-page-shell {
 padding: 0.35rem !important;
 }

 .auth-page-shell > section {
 width: calc(100vw - 0.7rem) !important;
 max-width: calc(100vw - 0.7rem) !important;
 border-radius: 1.1rem !important;
 }

 .auth-page-shell > section > section {
 padding: 0.85rem !important;
 }

 .auth-page-shell > section > section > div:nth-of-type(1) h1 {
 font-size: 2rem !important;
 line-height: 1.05 !important;
 }

 .auth-page-shell > section > section > div:nth-of-type(2) {
 padding: 0.9rem !important;
 }

 .auth-page-shell .auth-field span {
 font-size: 0.68rem;
 letter-spacing: 0.15em;
 }

 .auth-page-shell #signup-button,
 .auth-page-shell #login-button,
 .auth-page-shell #forgot-password-button {
 width: 100%;
 }
}
/* --- DEVICE-AWARE LAYOUT POLISH --- */

/* 1. Phone Optimization (Screens smaller than 640px) */
@media (max-width: 640px) {
 #appShell {
 padding: 0.5rem !important;
 }
 
 /* Make cards stack vertically on phones */
 .training-lesson-card {
 flex-direction: column !important;
 align-items: flex-start !important;
 }

 /* Reduce font sizes for readability on tiny screens */
 h1 { font-size: 1.75rem !important; }
 h2 { font-size: 1.25rem !important; }
}

/* 2. iPad/Tablet Optimization (641px to 1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
 #appShell {
 gap: 0.5rem !important;
 }

 /* Slightly shrink sidebar on iPads to give more room for charts */
 body:not(.sidebar-collapsed) #appShell > aside {
 width: 200px !important;
 }
 
 /* Force dashboard grid to 2 columns on tablets */
 #dashboardView > main {
 grid-template-columns: 1fr 1fr !important;
 }
}

/* --- FINAL RESPONSIVE LAYOUT PASS: phones, tablets, desktop safety --- */
:root {
 --fluid-page-pad: clamp(0.75rem, 2vw, 1.5rem);
 --fluid-card-pad: clamp(1rem, 2.6vw, 1.5rem);
 --fluid-title: clamp(1.75rem, 5vw, 3.8rem);
 --fluid-section-title: clamp(1.25rem, 3vw, 2rem);
}

#appShell,
#dashboardView,
#trainingView,
#calendarView,
#referralView,
#billingView,
#studyView,
.training-module-shell,
.training-lesson-card,
.daily-hard-card,
.video-thumbnail-card {
 min-width: 0;
}

img,
svg,
canvas,
iframe,
video {
 max-width: 100%;
}

.daily-hard-visual,
.video-thumbnail-card,
#study-content,
#study-options,
.calendar-day,
.calendar-event {
 overflow: hidden;
}

.daily-hard-visual img,
.chart-visual img,
.video-thumbnail-card img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

#dashboardView h1,
#trainingView h1,
#calendarView h1,
#referralView h1,
#billingView h1 {
 font-size: var(--fluid-title) !important;
 line-height: 0.98 !important;
}

#dashboardView h2,
#trainingView h2,
#calendarView h2,
#referralView h2,
#billingView h2 {
 font-size: var(--fluid-section-title) !important;
}

@media (max-width: 640px) {
 html,
 body {
 max-width: 100%;
 overflow-x: hidden;
 }

 body {
 font-size: 15px;
 }

 #appShell {
 display: block !important;
 width: 100%;
 max-width: 100%;
 padding: 0.65rem !important;
 }

 #appShell > aside {
 position: relative !important;
 top: auto !important;
 width: 100% !important;
 height: auto !important;
 min-height: 0 !important;
 margin: 0 0 0.75rem !important;
 padding: 0.85rem !important;
 border-radius: 1.25rem !important;
 }

 body.sidebar-collapsed #appShell > aside {
 width: 100% !important;
 padding-inline: 0.85rem !important;
 }

 body.sidebar-collapsed .sidebar-brand-copy,
 body.sidebar-collapsed .nav-label,
 body.sidebar-collapsed #appShell > aside section {
 width: auto !important;
 opacity: 1 !important;
 overflow: visible !important;
 pointer-events: auto !important;
 }

 body.sidebar-collapsed #profile-menu-button .settings-label,
 body.sidebar-collapsed #profile-menu-button .settings-chevron {
 display: inline-flex !important;
 }

 #appShell > aside > div:first-child {
 gap: 0.75rem !important;
 }

 .sidebar-brand {
 align-items: center !important;
 gap: 0.8rem !important;
 }

 #app-sidebar nav {
 display: grid !important;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 0.55rem !important;
 }

 .nav-btn {
 min-height: 3rem;
 width: 100% !important;
 justify-content: flex-start !important;
 padding: 0.75rem !important;
 }

 #profile-menu-button {
 width: 100% !important;
 height: auto !important;
 min-height: 3.2rem;
 }

 #profile-menu {
 left: 0 !important;
 right: 0 !important;
 width: 100% !important;
 max-width: 100% !important;
 }

 #appShell > div {
 width: 100%;
 min-width: 0;
 }

 #dashboardView,
 #dashboardView > main,
 #dashboardView > aside,
 #calendarView,
 #trainingView,
 #referralView,
 #billingView {
 display: flex !important;
 flex-direction: column !important;
 gap: 1rem !important;
 width: 100%;
 }

 #dashboardView.hidden,
 #calendarView.hidden,
 #trainingView.hidden,
 #referralView.hidden,
 #billingView.hidden,
 #studyView.hidden,
 #learningView.hidden {
 display: none !important;
 }

 #dashboardView > main > section,
 #dashboardView > aside > section,
 #trainingView > section,
 #calendarView > section,
 #referralView > section,
 #billingView > section,
 #module-training-card,
 #daily-hard-question-card,
 .training-module-shell {
 padding: var(--fluid-card-pad) !important;
 border-radius: 1.25rem !important;
 }

 .dashboard-hero-card > .flex,
 #module-training-card > .flex,
 #calendarView section > .flex,
 #trainingView section > .flex,
 .training-module-toggle {
 flex-direction: column !important;
 align-items: flex-start !important;
 }

 .dashboard-hero-card .market-status-pill,
 .training-module-actions {
 margin-left: 0 !important;
 width: 100% !important;
 }

 .training-module-actions {
 flex-wrap: wrap;
 justify-content: flex-start !important;
 white-space: normal !important;
 }

 .training-module-toggle,
 .training-lesson-card {
 padding: 1rem !important;
 }

 .training-lesson-card > div,
 .training-lesson-card .flex {
 width: 100%;
 min-width: 0;
 }

 .training-lesson-card button,
 .training-lesson-card a,
 .training-start-button {
 width: 100%;
 justify-content: center;
 }

 .video-thumbnail-grid,
 #dashboardView > aside .grid,
 .settings-modal-grid {
 grid-template-columns: 1fr !important;
 }

 .daily-hard-visual {
 min-height: clamp(175px, 48vw, 260px);
 }

 .daily-hard-card .p-5 {
 padding: 1rem !important;
 }

 #calendar-grid {
 display: grid !important;
 grid-template-columns: 1fr !important;
 overflow: visible !important;
 border-radius: 1rem !important;
 }

 .calendar-day {
 min-height: auto !important;
 padding: 0.85rem !important;
 border-right: 0 !important;
 }

 .calendar-event {
 width: 100%;
 white-space: normal !important;
 }

 #calendarView .calendar-weekday,
 #calendarView [data-weekday],
 .calendar-weekday-row {
 display: none !important;
 }

 #studyView {
 height: auto !important;
 min-height: 100dvh;
 overflow: visible !important;
 border-radius: 1.25rem !important;
 }

 #studyView header {
 position: sticky;
 top: 0;
 z-index: 20;
 padding: 1rem !important;
 flex-wrap: wrap;
 gap: 0.75rem;
 }

 #studyView > div,
 #studyView .grid {
 display: flex !important;
 flex-direction: column !important;
 min-height: 0 !important;
 }

 #study-content,
 #studyView aside,
 #study-options {
 width: 100% !important;
 min-width: 0 !important;
 overflow: visible !important;
 }

 #study-content article h3 {
 font-size: clamp(1.35rem, 6vw, 2.25rem) !important;
 }
}

@media (min-width: 641px) and (max-width: 1024px) {
 #appShell {
 max-width: 100%;
 padding: 1rem !important;
 gap: 1rem !important;
 }

 body:not(.sidebar-collapsed) #appShell > aside {
 width: 220px !important;
 }

 #dashboardView {
 grid-template-columns: 1fr !important;
 }

 #dashboardView > aside {
 display: grid !important;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 1rem !important;
 }

 #dashboardView > aside > section:last-child {
 grid-column: 1 / -1;
 }

 .video-thumbnail-grid,
 .training-lessons-grid {
 grid-template-columns: 1fr !important;
 }

 .daily-hard-visual {
 min-height: clamp(260px, 42vw, 420px);
 }

 .training-lesson-card > div {
 gap: 1rem !important;
 }

 #calendar-grid {
 overflow-x: auto;
 }

 .calendar-day {
 min-height: 126px;
 }

 #studyView {
 height: auto !important;
 min-height: calc(100dvh - 2rem);
 }

 #studyView > div {
 grid-template-columns: 1fr !important;
 }
}

/* Final responsive guardrails for deployment. Keep this layer last. */
.calendar-mobile-weekday {
 display: none;
}

.calendar-empty-week-card {
 position: relative;
 overflow: hidden;
 min-height: 15rem;
 background:
 radial-gradient(circle at 92% 24%, rgba(34, 211, 238, 0.18), transparent 34%),
 linear-gradient(135deg, rgba(8, 145, 178, 0.13), rgba(15, 23, 42, 0.72)) !important;
}

.calendar-empty-week-card::after {
 content: "->";
 position: absolute;
 right: 2rem;
 bottom: 1.5rem;
 color: rgba(103, 232, 249, 0.28);
 font-size: clamp(3rem, 8vw, 7rem);
 font-weight: 900;
 line-height: 1;
 pointer-events: none;
}

@media (max-width: 640px) {
 #appShell {
 padding: 0.45rem !important;
 }

 #app-sidebar {
 position: relative !important;
 width: 100% !important;
 max-width: 100% !important;
 min-height: 0 !important;
 }

 .sidebar-toggle-button,
 #profile-menu-button,
 .nav-btn,
 .calendar-event,
 .study-option {
 touch-action: manipulation;
 }

 .dashboard-hero-card .market-status-pill {
 width: auto !important;
 max-width: 100%;
 white-space: nowrap;
 align-self: flex-start !important;
 margin-top: 0.4rem;
 }

 #dashboardView {
 grid-template-columns: 1fr !important;
 }

 #dashboardView > aside {
 display: grid !important;
 grid-template-columns: 1fr !important;
 }

 .daily-hard-card,
 #daily-hard-question-card {
 overflow: hidden;
 }

 .daily-hard-card img,
 .daily-hard-visual img,
 #daily-hard-question-card img {
 width: 100% !important;
 max-width: 100% !important;
 height: auto !important;
 object-fit: contain !important;
 }

 #calendar-grid {
 display: flex !important;
 flex-direction: column !important;
 gap: 0.75rem !important;
 border: 0 !important;
 background: transparent !important;
 }

 #calendar-grid.calendar-grid-empty {
 display: block !important;
 }

 .calendar-empty-card {
 width: 100% !important;
 }

 .calendar-day {
 display: block !important;
 width: 100% !important;
 border: 1px solid rgba(98, 230, 255, 0.12) !important;
 border-radius: 1rem !important;
 background: rgba(4, 14, 26, 0.72) !important;
 }

 .calendar-day-empty {
 display: none !important;
 }

 .calendar-date-number {
 display: flex !important;
 width: 100% !important;
 justify-content: space-between;
 gap: 0.75rem;
 border-radius: 0.8rem;
 background: rgba(255, 255, 255, 0.04);
 padding: 0.55rem 0.7rem;
 }

 .calendar-mobile-weekday {
 display: inline;
 color: #67e8f9;
 text-transform: uppercase;
 letter-spacing: 0.18em;
 }

 .calendar-event {
 min-height: 4.25rem;
 padding: 0.85rem !important;
 font-size: 0.86rem !important;
 }

 #studyView {
 width: 100% !important;
 height: auto !important;
 min-height: 100dvh !important;
 overflow: visible !important;
 }

 body.study-mode-active {
 overflow: auto !important;
 }

 body.study-mode-active #appShell {
 display: block !important;
 }

 #studyView header {
 align-items: flex-start !important;
 }

 #studyView header h2 {
 font-size: clamp(1rem, 5vw, 1.35rem) !important;
 }

 #studyView > div {
 display: flex !important;
 flex-direction: column !important;
 height: auto !important;
 }

 #study-question-sidebar {
 max-height: 34dvh;
 overflow-y: auto !important;
 }

 #study-content {
 border-right: 0 !important;
 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 padding: 1rem !important;
 }

 #study-content article {
 max-width: 100% !important;
 }

 #study-options {
 gap: 0.8rem !important;
 }

 #studyView section:last-child {
 padding: 1rem !important;
 }

 #submit-study-answer {
 position: sticky;
 bottom: 0.75rem;
 z-index: 15;
 width: 100%;
 box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
 }
}

@media (min-width: 641px) and (max-width: 1024px) {
 #dashboardView {
 grid-template-columns: 1fr !important;
 }

 #dashboardView > aside {
 display: grid !important;
 grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 }

 #calendar-grid.calendar-grid-week {
 grid-auto-rows: minmax(220px, auto) !important;
 }

 #studyView > div {
 display: grid !important;
 grid-template-columns: minmax(190px, 0.55fr) minmax(0, 1.25fr) minmax(0, 1fr) !important;
 }

 #study-content,
 #studyView section:last-child {
 padding: 1.25rem !important;
 }
}

/* Final auth, focus-mode, and collapsed-navigation guardrails. */
.auth-loading-screen {
 position: fixed;
 inset: 0;
 z-index: 100;
 place-items: center;
 padding: 1.5rem;
 background:
 radial-gradient(circle at 50% 38%, rgba(98, 230, 255, 0.12), transparent 28%),
 #02060b;
}

.auth-loading-card {
 display: grid;
 width: min(100%, 360px);
 justify-items: center;
 gap: 1rem;
 padding: 2.25rem;
 border: 1px solid rgba(98, 230, 255, 0.16);
 border-radius: 1.5rem;
 background: rgba(4, 13, 22, 0.88);
 box-shadow: 0 30px 90px rgba(0, 0, 0, 0.48);
 text-align: center;
 backdrop-filter: blur(20px);
}

.auth-loading-mark {
 display: grid;
 width: 3.25rem;
 height: 3.25rem;
 place-items: center;
 padding: 0.22rem;
 border: 1px solid rgba(98, 230, 255, 0.32);
 border-radius: 1rem;
 background: rgba(98, 230, 255, 0.08);
 overflow: hidden;
}

.auth-loading-mark img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: contain;
}

.auth-loading-spinner {
 width: 2.5rem;
 height: 2.5rem;
 border: 3px solid rgba(98, 230, 255, 0.14);
 border-top-color: #62e6ff;
 border-radius: 50%;
 animation: nexusLoadingSpin 780ms linear infinite;
}

.auth-loading-card p {
 margin: 0;
 color: #ffffff;
 font-size: 1.05rem;
 font-weight: 800;
}

.auth-loading-card span {
 color: #94a3b8;
 font-size: 0.82rem;
}

@keyframes nexusLoadingSpin {
 to {
 transform: rotate(360deg);
 }
}

@media (min-width: 861px) {
 body.sidebar-collapsed .nav-label,
 body.sidebar-collapsed .sidebar-brand-copy,
 body.sidebar-collapsed #appShell > aside section {
 display: none !important;
 }

 body.sidebar-collapsed #appShell > aside {
 flex-basis: 86px;
 min-width: 86px;
 max-width: 86px;
 }

 body.study-mode-active #appShell > div {
 width: 100%;
 min-width: 0;
 }

 body.study-mode-active #studyView > div {
 display: grid !important;
 grid-template-columns: minmax(180px, 0.45fr) minmax(320px, 1.15fr) minmax(320px, 1fr) !important;
 min-width: 0;
 }

 body.study-mode-active #study-content,
 body.study-mode-active #studyView section:last-child {
 display: flex !important;
 min-width: 0;
 visibility: visible !important;
 }
}

/* Final mobile authority layer: keep the app usable on phones without fighting desktop polish. */
@media (max-width: 640px) {
 html,
 body {
 width: 100% !important;
 max-width: 100% !important;
 overflow-x: hidden !important;
 }

 body {
 min-width: 0 !important;
 }

 #appShell {
 display: flex !important;
 flex-direction: column !important;
 gap: 0.85rem !important;
 width: 100% !important;
 max-width: 100% !important;
 padding: max(0.55rem, env(safe-area-inset-top)) 0.55rem max(0.85rem, env(safe-area-inset-bottom)) !important;
 }

 #app-sidebar {
 position: sticky !important;
 top: 0.45rem !important;
 z-index: 50 !important;
 width: 100% !important;
 max-width: 100% !important;
 height: auto !important;
 min-height: 0 !important;
 max-height: calc(100dvh - 1rem) !important;
 margin: 0 !important;
 overflow: visible !important;
 border-radius: 1.2rem !important;
 padding: 0.85rem !important;
 }

 #appShell > div {
 width: 100% !important;
 min-width: 0 !important;
 }

 .sidebar-brand {
 display: flex !important;
 min-height: 3.35rem !important;
 align-items: center !important;
 justify-content: space-between !important;
 gap: 0.75rem !important;
 padding-right: 0 !important;
 }

 .sidebar-brand-lockup {
 min-width: 0 !important;
 }

 .sidebar-brand-copy {
 width: auto !important;
 min-width: 0 !important;
 opacity: 1 !important;
 transform: none !important;
 }

 .sidebar-toggle-button {
 position: static !important;
 flex: 0 0 auto !important;
 width: 2.75rem !important;
 height: 2.75rem !important;
 margin-left: auto !important;
 }

 #app-sidebar nav {
 display: grid !important;
 grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 gap: 0.65rem !important;
 margin-top: 0.9rem !important;
 }

 .nav-btn {
 min-width: 0 !important;
 min-height: 3.05rem !important;
 width: 100% !important;
 justify-content: flex-start !important;
 gap: 0.65rem !important;
 padding: 0.7rem !important;
 overflow: hidden !important;
 text-align: left !important;
 transform: none !important;
 }

 .nav-label {
 display: inline !important;
 width: auto !important;
 min-width: 0 !important;
 opacity: 1 !important;
 overflow: hidden !important;
 text-overflow: ellipsis !important;
 white-space: nowrap !important;
 }

 #profile-menu-button {
 width: 100% !important;
 min-height: 3.25rem !important;
 margin-top: 0.85rem !important;
 }

 #profile-menu {
 position: static !important;
 width: 100% !important;
 margin-top: 0.55rem !important;
 }

 body.sidebar-collapsed #app-sidebar {
 max-height: 5.35rem !important;
 overflow: hidden !important;
 }

 body.sidebar-collapsed #app-sidebar nav,
 body.sidebar-collapsed #profile-menu-button,
 body.sidebar-collapsed #profile-menu,
 body.sidebar-collapsed #appShell > aside section {
 display: none !important;
 }

 body.sidebar-collapsed .sidebar-brand {
 width: 100% !important;
 }

 body.sidebar-collapsed .sidebar-brand-copy {
 display: block !important;
 width: auto !important;
 opacity: 1 !important;
 overflow: visible !important;
 }

 body.sidebar-collapsed .sidebar-toggle-button {
 display: grid !important;
 }

 #dashboardView,
 #calendarView,
 #trainingView,
 #referralView,
 #billingView,
 #learningView {
 width: 100% !important;
 min-width: 0 !important;
 overflow: visible !important;
 }

 #dashboardView:not(.hidden),
 #calendarView:not(.hidden),
 #trainingView:not(.hidden),
 #referralView:not(.hidden),
 #billingView:not(.hidden),
 #learningView:not(.hidden) {
 display: flex !important;
 flex-direction: column !important;
 }

 #dashboardView > main,
 #dashboardView > aside {
 width: 100% !important;
 min-width: 0 !important;
 }

 #dashboardView > aside {
 display: flex !important;
 flex-direction: column !important;
 }

 .dashboard-hero-card > .flex {
 align-items: flex-start !important;
 }

 .market-status-pill {
 position: static !important;
 width: fit-content !important;
 max-width: 100% !important;
 margin: 0.65rem 0 0 !important;
 transform: none !important;
 white-space: nowrap !important;
 }

 .daily-hard-card,
 #daily-hard-question-card,
 .dashboard-hero-card,
 #lesson-video-card,
 #module-training-card,
 #calendarView > section,
 #trainingView > section,
 #referralView > section,
 #billingView > section {
 width: 100% !important;
 min-width: 0 !important;
 max-width: 100% !important;
 padding: clamp(1rem, 4vw, 1.25rem) !important;
 border-radius: 1.05rem !important;
 overflow: hidden !important;
 }

 .daily-hard-visual,
 .daily-hard-card img,
 #daily-hard-question-card img,
 .question-visual,
 .study-chart-image,
 #study-content img {
 width: 100% !important;
 max-width: 100% !important;
 height: auto !important;
 object-fit: contain !important;
 }

 #calendarView > section:first-child > div:first-child {
 display: flex !important;
 flex-direction: column !important;
 align-items: flex-start !important;
 }

 #calendarView > section:first-child .flex-wrap,
 #calendarView > section:first-child .calendar-view-toggle {
 width: 100% !important;
 }

 #calendar-grid {
 display: flex !important;
 flex-direction: column !important;
 gap: 0.75rem !important;
 width: 100% !important;
 min-width: 0 !important;
 overflow: visible !important;
 border: 0 !important;
 background: transparent !important;
 }

 #calendar-grid.calendar-grid-empty {
 display: block !important;
 }

 .calendar-day {
 display: block !important;
 width: 100% !important;
 min-height: auto !important;
 border: 1px solid rgba(98, 230, 255, 0.14) !important;
 border-radius: 1rem !important;
 padding: 0.8rem !important;
 }

 .calendar-day-empty {
 display: none !important;
 }

 .calendar-date-number {
 display: flex !important;
 width: 100% !important;
 height: auto !important;
 justify-content: space-between !important;
 padding: 0.55rem 0.7rem !important;
 }

 .calendar-event {
 min-width: 0 !important;
 min-height: 4rem !important;
 white-space: normal !important;
 overflow-wrap: anywhere !important;
 }

 .training-module-toggle,
 .training-lesson-card {
 display: flex !important;
 flex-direction: column !important;
 align-items: stretch !important;
 gap: 0.85rem !important;
 }

 .training-module-actions,
 .training-lesson-card .training-module-actions {
 display: grid !important;
 grid-template-columns: 1fr !important;
 width: 100% !important;
 gap: 0.6rem !important;
 }

 .training-module-actions button,
 .training-module-actions a,
 .training-start-button {
 width: 100% !important;
 justify-content: center !important;
 }

 body.study-mode-active #appShell {
 padding: 0 !important;
 }

 body.study-mode-active #app-sidebar {
 display: none !important;
 }

 #studyView {
 width: 100vw !important;
 max-width: 100vw !important;
 min-height: 100dvh !important;
 height: auto !important;
 border-radius: 0 !important;
 overflow: visible !important;
 }

 #studyView header {
 position: sticky !important;
 top: 0 !important;
 z-index: 60 !important;
 display: grid !important;
 grid-template-columns: 1fr auto !important;
 gap: 0.75rem !important;
 padding: 0.9rem !important;
 }

 #studyView header > div {
 min-width: 0 !important;
 }

 #studyView header h2 {
 font-size: clamp(1rem, 5.5vw, 1.3rem) !important;
 line-height: 1.12 !important;
 }

 #study-timer,
 #study-progress {
 font-size: 0.8rem !important;
 }

 #studyView > div {
 display: flex !important;
 flex-direction: column !important;
 height: auto !important;
 min-height: 0 !important;
 }

 #study-question-sidebar {
 display: flex !important;
 max-height: none !important;
 overflow-x: auto !important;
 overflow-y: hidden !important;
 gap: 0.55rem !important;
 padding-bottom: 0.35rem !important;
 }

 #study-question-sidebar button {
 flex: 0 0 auto !important;
 min-width: 4.75rem !important;
 }

 #study-content {
 width: 100% !important;
 min-width: 0 !important;
 overflow: visible !important;
 border-right: 0 !important;
 padding: 1rem !important;
 }

 #study-content article,
 #study-content h3 {
 width: 100% !important;
 max-width: 100% !important;
 }

 #study-content h3 {
 font-size: clamp(1.25rem, 6vw, 1.9rem) !important;
 line-height: 1.18 !important;
 }

 #studyView section:last-child {
 width: 100% !important;
 min-width: 0 !important;
 padding: 1rem !important;
 }

 #study-options {
 display: flex !important;
 flex-direction: column !important;
 gap: 0.75rem !important;
 }

 .study-option {
 width: 100% !important;
 min-width: 0 !important;
 padding: 0.9rem !important;
 }

 #submit-study-answer {
 position: sticky !important;
 bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
 z-index: 40 !important;
 width: 100% !important;
 }
}

@media (min-width: 641px) and (max-width: 1024px) {
 #appShell {
 display: grid !important;
 grid-template-columns: minmax(86px, 220px) minmax(0, 1fr) !important;
 gap: 1rem !important;
 max-width: 100% !important;
 padding: 1rem !important;
 }

 #appShell > div,
 #dashboardView,
 #calendarView,
 #trainingView,
 #referralView,
 #billingView {
 min-width: 0 !important;
 }

 #dashboardView {
 grid-template-columns: 1fr !important;
 }

 #dashboardView > aside {
 display: grid !important;
 grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 gap: 1rem !important;
 }

 .daily-hard-visual,
 .daily-hard-card img,
 #daily-hard-question-card img {
 width: 100% !important;
 object-fit: contain !important;
 }

 #calendar-grid.calendar-grid-week {
 grid-auto-rows: minmax(210px, auto) !important;
 }

 .calendar-day {
 min-height: 120px !important;
 }

 #studyView > div {
 grid-template-columns: minmax(150px, 0.45fr) minmax(0, 1fr) !important;
 }

 #studyView section:last-child {
 grid-column: 1 / -1 !important;
 }
}

/* Final mobile authority layer: keep navigation and focus mode usable on phones. */
@media (max-width: 640px) {
 html,
 body {
 max-width: 100%;
 overflow-x: hidden;
 }

 #appShell {
 width: 100%;
 max-width: 100%;
 padding-left: 0.75rem !important;
 padding-right: 0.75rem !important;
 }

 #app-sidebar {
 width: 100% !important;
 max-width: 100% !important;
 min-height: 0 !important;
 }

 body.sidebar-collapsed #app-sidebar {
 max-height: 5.75rem !important;
 min-height: 0 !important;
 overflow: hidden !important;
 padding: 0.85rem !important;
 }

 body.sidebar-collapsed #app-sidebar nav,
 body.sidebar-collapsed #profile-menu-button,
 body.sidebar-collapsed #profile-menu,
 body.sidebar-collapsed #app-sidebar section,
 body.sidebar-collapsed #app-sidebar .mt-auto {
 display: none !important;
 visibility: hidden !important;
 height: 0 !important;
 min-height: 0 !important;
 margin: 0 !important;
 padding: 0 !important;
 overflow: hidden !important;
 }

 body.sidebar-collapsed #app-sidebar .sidebar-brand,
 body.sidebar-collapsed #app-sidebar > div:first-child {
 display: flex !important;
 align-items: center !important;
 justify-content: space-between !important;
 width: 100% !important;
 gap: 0.8rem !important;
 }

 body.sidebar-collapsed #sidebar-toggle {
 display: inline-flex !important;
 visibility: visible !important;
 position: static !important;
 width: 2.7rem !important;
 height: 2.7rem !important;
 margin-left: auto !important;
 }

 #dashboardView > header,
 #calendarView > header {
 display: grid !important;
 grid-template-columns: 1fr !important;
 gap: 1rem !important;
 }

 #marketStatus {
 position: static !important;
 width: fit-content !important;
 max-width: 100% !important;
 justify-self: start !important;
 transform: none !important;
 }

 body.study-mode-active #appShell {
 display: block !important;
 width: 100vw !important;
 max-width: 100vw !important;
 padding: 0 !important;
 }

 body.study-mode-active #app-sidebar {
 display: none !important;
 }

 body.study-mode-active #dashboardView,
 body.study-mode-active #calendarView,
 body.study-mode-active #trainingView,
 body.study-mode-active #referralView,
 body.study-mode-active #billingView,
 body.study-mode-active #learningView {
 display: none !important;
 }

 body.study-mode-active #studyView:not(.hidden) {
 display: flex !important;
 flex-direction: column !important;
 width: 100vw !important;
 max-width: 100vw !important;
 min-height: 100dvh !important;
 margin: 0 !important;
 border: 0 !important;
 border-radius: 0 !important;
 }

 #studyView header {
 grid-template-columns: minmax(0, 1fr) auto !important;
 align-items: start !important;
 }

 #studyView header .flex,
 #studyView header > div {
 min-width: 0 !important;
 flex-wrap: wrap !important;
 }

 #studyView > div {
 display: flex !important;
 flex-direction: column !important;
 width: 100% !important;
 min-height: 0 !important;
 }

 #studyView aside,
 #studyView section {
 width: 100% !important;
 max-width: 100% !important;
 min-width: 0 !important;
 }

 #studyView aside {
 max-height: 34dvh !important;
 overflow-y: auto !important;
 border-right: 0 !important;
 border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
 padding: 1rem !important;
 }

 #study-question-sidebar {
 display: flex !important;
 flex-direction: row !important;
 overflow-x: auto !important;
 overflow-y: hidden !important;
 gap: 0.6rem !important;
 padding-bottom: 0.45rem !important;
 }

 #study-content {
 min-height: auto !important;
 padding: 1rem !important;
 }

 #study-content article,
 #study-content h3,
 #study-content p {
 max-width: 100% !important;
 overflow-wrap: anywhere !important;
 }

 #studyView section:last-child {
 padding: 1rem 1rem calc(7rem + env(safe-area-inset-bottom)) !important;
 }

 #submit-study-answer {
 bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
 }
}

/* Final mobile focus-mode override: let phones scroll instead of cramming the lesson into one viewport. */
@media (max-width: 640px) {
 body.study-mode-active {
 height: auto !important;
 min-height: 100dvh !important;
 overflow-x: hidden !important;
 overflow-y: auto !important;
 }

 body.study-mode-active #pageShell,
 body.study-mode-active #appShell,
 body.study-mode-active #appShell > div {
 height: auto !important;
 min-height: 100dvh !important;
 overflow: visible !important;
 }

 body.study-mode-active #studyView:not(.hidden) {
 height: auto !important;
 min-height: 100dvh !important;
 overflow: visible !important;
 padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
 }

 body.study-mode-active #studyView header {
 position: relative !important;
 top: auto !important;
 min-height: auto !important;
 }

 body.study-mode-active #studyView > div,
 body.study-mode-active #study-content,
 body.study-mode-active #studyView section:last-child {
 height: auto !important;
 min-height: 0 !important;
 max-height: none !important;
 overflow: visible !important;
 }

 body.study-mode-active #studyView aside {
 max-height: none !important;
 overflow: visible !important;
 }

 body.study-mode-active #study-question-sidebar {
 overflow-x: auto !important;
 overflow-y: hidden !important;
 -webkit-overflow-scrolling: touch;
 }

 body.study-mode-active #studyView section:last-child {
 padding: 1rem 1rem max(1.5rem, env(safe-area-inset-bottom)) !important;
 }

 body.study-mode-active #study-options {
 display: flex !important;
 flex-direction: column !important;
 gap: 0.8rem !important;
 }

 body.study-mode-active .study-option {
 min-height: auto !important;
 }

 body.study-mode-active #submit-study-answer {
 position: static !important;
 bottom: auto !important;
 z-index: auto !important;
 margin-top: 1rem !important;
 width: 100% !important;
 }

 body.study-mode-active #skip-study-answer {
 position: static !important;
 display: block !important;
 margin: 0.85rem auto 0 !important;
 width: auto !important;
 }

 body.study-mode-active #study-content img,
 body.study-mode-active .question-chart-image,
 body.study-mode-active .chart-rep-card img,
 body.study-mode-active svg {
 max-width: 100% !important;
 height: auto !important;
 }
}

/* Account/settings modal must scroll naturally on phones, especially after opening billing controls. */
#account-settings-modal {
 overflow-x: hidden !important;
 overflow-y: auto !important;
 -webkit-overflow-scrolling: touch;
}

#account-settings-modal > section {
 max-height: calc(100dvh - 2rem) !important;
 overflow-x: hidden !important;
 overflow-y: auto !important;
 -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
 #account-settings-modal {
 align-items: flex-start !important;
 justify-content: flex-start !important;
 padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem max(5rem, env(safe-area-inset-bottom)) !important;
 }

 #account-settings-modal > section {
 width: 100% !important;
 max-width: 100% !important;
 max-height: none !important;
 height: auto !important;
 margin: 0 auto !important;
 border-radius: 1.35rem !important;
 overflow: visible !important;
 }

 #account-settings-modal > section > header {
 position: sticky !important;
 top: 0 !important;
 z-index: 2 !important;
 padding: 1rem !important;
 background: rgba(5, 12, 24, 0.94) !important;
 backdrop-filter: blur(18px);
 }

 #account-settings-modal > section > div {
 display: flex !important;
 flex-direction: column !important;
 gap: 1rem !important;
 padding: 1rem !important;
 }
}
body.modal-open {
 overflow: hidden;
}

.plan-required-modal-backdrop {
 position: fixed;
 inset: 0;
 z-index: 9999;
 display: none;
 align-items: center;
 justify-content: center;
 padding: clamp(18px, 5vw, 42px);
 background: rgba(2, 8, 14, 0.74);
 backdrop-filter: blur(16px);
}

.plan-required-modal-backdrop.is-visible {
 display: flex;
}

.plan-required-modal {
 position: relative;
 width: min(500px, 100%);
 overflow: hidden;
 border: 1px solid rgba(34, 211, 238, 0.34);
 border-radius: 30px;
 background:
 radial-gradient(circle at top right, rgba(45, 212, 191, 0.18), transparent 38%),
 linear-gradient(145deg, rgba(7, 18, 29, 0.98), rgba(5, 34, 39, 0.96));
 box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58), 0 0 42px rgba(34, 211, 238, 0.14);
 color: #f8fafc;
 padding: clamp(22px, 6vw, 34px);
}

.plan-required-modal::before {
 content: "";
 position: absolute;
 inset: -45% auto auto 48%;
 width: 260px;
 height: 260px;
 border-radius: 999px;
 background: rgba(34, 211, 238, 0.11);
 filter: blur(4px);
 pointer-events: none;
}

.plan-required-modal__close {
 position: absolute;
 top: 18px;
 right: 18px;
 z-index: 1;
 display: grid;
 width: 38px;
 height: 38px;
 place-items: center;
 border: 1px solid rgba(148, 163, 184, 0.22);
 border-radius: 14px;
 background: rgba(15, 23, 42, 0.72);
 color: #cbd5e1;
 font-weight: 800;
 cursor: pointer;
 transition: border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.plan-required-modal__close:hover,
.plan-required-modal__close:focus-visible {
 border-color: rgba(103, 232, 249, 0.62);
 color: #ffffff;
 transform: translateY(-1px);
 outline: none;
}

.plan-required-modal__eyebrow {
 position: relative;
 margin: 0 44px 12px 0;
 color: #67e8f9;
 font-size: 0.74rem;
 font-weight: 900;
 letter-spacing: 0.25em;
 text-transform: uppercase;
}

.plan-required-modal__title {
 position: relative;
 margin: 0;
 max-width: 11ch;
 color: #ffffff;
 font-size: clamp(2rem, 8vw, 3.35rem);
 font-weight: 900;
 line-height: 0.96;
 letter-spacing: -0.055em;
}

.plan-required-modal__body {
 position: relative;
 margin: 20px 0 0;
 color: #cbd5e1;
 font-size: 1rem;
 line-height: 1.75;
}

.plan-required-modal__context {
 position: relative;
 margin: 20px 0 0;
 padding: 14px 16px;
 border: 1px solid rgba(250, 204, 21, 0.24);
 border-radius: 18px;
 background: rgba(113, 63, 18, 0.2);
 color: #fde68a;
 font-weight: 800;
 line-height: 1.55;
}

.plan-required-modal__actions {
 position: relative;
 display: grid;
 grid-template-columns: 1fr 0.7fr;
 gap: 12px;
 margin-top: 24px;
}

.plan-required-modal__primary,
.plan-required-modal__secondary {
 min-height: 54px;
 border: 0;
 border-radius: 18px;
 font-weight: 900;
 cursor: pointer;
 transition: transform 180ms ease, filter 180ms ease, border-color 180ms ease;
}

.plan-required-modal__primary {
 background: linear-gradient(135deg, #22d3ee, #63e6be);
 color: #001018;
}

.plan-required-modal__secondary {
 border: 1px solid rgba(148, 163, 184, 0.24);
 background: rgba(15, 23, 42, 0.76);
 color: #e2e8f0;
}

.plan-required-modal__primary:hover,
.plan-required-modal__secondary:hover,
.plan-required-modal__primary:focus-visible,
.plan-required-modal__secondary:focus-visible {
 transform: translateY(-1px);
 filter: brightness(1.05);
 outline: none;
}

@media (max-width: 640px) {
 .plan-required-modal-backdrop {
 align-items: flex-end;
 padding: 14px;
 }

 .plan-required-modal {
 border-radius: 26px;
 padding: 24px 20px 20px;
 }

 .plan-required-modal__title {
 max-width: 12ch;
 }

 .plan-required-modal__actions {
 grid-template-columns: 1fr;
 }
}

/* Nexus checkout & billing — Stripe layout, site colors */
.checkout-page {
  margin: 0;
  min-height: 100vh;
  background: #04070d;
  color: #e2e8f0;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  color-scheme: dark;
}

.checkout-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(400px, 1fr);
}

.checkout-summary-panel {
  padding: 2.5rem clamp(1.75rem, 4vw, 4.5rem);
  background:
    radial-gradient(circle at top left, rgba(34, 211, 238, 0.12), transparent 32%),
    radial-gradient(circle at bottom right, rgba(16, 185, 129, 0.1), transparent 28%),
    linear-gradient(160deg, #07101b 0%, #0b1628 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.checkout-payment-panel {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2.5rem clamp(1.25rem, 3vw, 3rem);
  background: #04070d;
}

.checkout-payment-card {
  width: min(100%, 420px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.checkout-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #94a3b8;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.checkout-back-link:hover { color: #fff; }

.checkout-brand-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.checkout-brand-mark {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.85rem;
  background: #fff;
  color: #04070d;
  font-weight: 900;
  font-size: 0.95rem;
}

.checkout-brand-name {
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  font-family: "Space Grotesk", Manrope, sans-serif;
}

.checkout-brand-sub {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #67e8f9;
}

.checkout-summary-title {
  margin-top: 1.75rem;
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  font-weight: 900;
  line-height: 1.25;
  color: #fff;
  font-family: "Space Grotesk", Manrope, sans-serif;
}

.checkout-summary-copy {
  margin-top: 0.65rem;
  max-width: 28rem;
  color: #94a3b8;
  line-height: 1.6;
  font-size: 0.95rem;
}

.checkout-price-hero {
  margin-top: 1.75rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.checkout-price-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
}

.checkout-price-value {
  margin-top: 0.25rem;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 900;
  color: #fff;
}

.checkout-line-items {
  margin-top: 1rem;
  display: grid;
  gap: 0.65rem;
}

.checkout-line-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  color: #cbd5e1;
}

.checkout-line-discount { color: #6ee7b7; }

.checkout-line-total {
  padding-top: 0.75rem;
  margin-top: 0.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 800;
  color: #fff;
}

.checkout-feature-list {
  margin-top: 1.25rem;
  padding-left: 1.1rem;
  color: #94a3b8;
  line-height: 1.75;
  font-size: 0.875rem;
}

.checkout-summary-footnote {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: #64748b;
}

.checkout-payment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.checkout-payment-header h2 {
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  font-family: "Space Grotesk", Manrope, sans-serif;
}

.checkout-secure-badge {
  border-radius: 999px;
  background: #fff;
  color: #04070d;
  border: 0;
  padding: 0.3rem 0.65rem;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.checkout-section-title {
  margin: 1.5rem 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  font-family: "Space Grotesk", Manrope, sans-serif;
}

.checkout-field-label {
  display: block;
  margin-top: 1rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
}

.checkout-optional {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: #475569;
}

.checkout-field-input,
.checkout-field-select,
.checkout-card-shell {
  margin-top: 0.35rem;
  width: 100%;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #04070d;
  color: #fff;
  padding: 0.72rem 0.85rem;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.checkout-field-select option {
  background: #0b1628;
  color: #fff;
}

.checkout-field-input:focus,
.checkout-field-select:focus {
  outline: none;
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
}

.checkout-field-input[readonly] {
  background: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
}

.checkout-field-row {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 0.55rem;
}

.checkout-field-mono {
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.checkout-field-hint {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #64748b;
}

.checkout-field-success { color: #6ee7b7 !important; }
.checkout-field-error { color: #fca5a5 !important; }

.checkout-divider {
  margin: 1.5rem 0 0.25rem;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.checkout-legal-check {
  display: flex;
  gap: 0.65rem;
  margin-top: 1.25rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #94a3b8;
}

.checkout-legal-check a {
  color: #67e8f9;
  font-weight: 700;
  text-decoration: none;
}

.checkout-legal-check a:hover { text-decoration: underline; }

.checkout-submit {
  margin-top: 1.25rem;
  width: 100%;
  border: 0;
  border-radius: 0.95rem;
  background: linear-gradient(90deg, #22d3ee, #34d399);
  color: #041018;
  padding: 0.95rem 1.1rem;
  font-weight: 900;
  font-size: 0.95rem;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.checkout-submit:hover:not(:disabled) {
  opacity: 0.92;
  transform: scale(1.01);
}

.checkout-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.checkout-submit-price {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.85;
}

.checkout-message {
  margin-top: 1rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(251, 191, 36, 0.25);
  background: rgba(251, 191, 36, 0.08);
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fde68a;
}

.checkout-powered {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: #64748b;
  text-align: center;
}

.billing-manage-card {
  max-width: 100%;
}

.billing-status-pill {
  display: inline-flex;
  margin-top: 1rem;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.billing-status-pill.is-active {
  background: rgba(52, 211, 153, 0.12);
  color: #6ee7b7;
  border: 1px solid rgba(52, 211, 153, 0.25);
}

.billing-status-pill.is-canceling {
  background: rgba(251, 191, 36, 0.12);
  color: #fcd34d;
  border: 1px solid rgba(251, 191, 36, 0.25);
}

.billing-banner {
  border-radius: 0.85rem;
  padding: 0.9rem 1rem;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.55;
  margin-bottom: 1rem;
}

.billing-banner-success {
  border: 1px solid rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.12);
  color: #a7f3d0;
}

.billing-banner-error {
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.1);
  color: #fecaca;
}

.billing-detail-grid {
  display: grid;
  gap: 0;
  margin-top: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.85rem;
  overflow: hidden;
}

.billing-detail-row {
  display: grid;
  grid-template-columns: minmax(7rem, 9rem) 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.22);
}

.billing-detail-row:last-child { border-bottom: 0; }

.billing-detail-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #94a3b8;
}

.billing-detail-value {
  font-size: 0.9rem;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.45;
  word-break: break-word;
}

.billing-cancel-box {
  margin-top: 1.25rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(248, 113, 113, 0.22);
  background: rgba(248, 113, 113, 0.06);
  padding: 1rem 1.1rem;
}

.billing-cancel-box.is-scheduled {
  border-color: rgba(251, 191, 36, 0.22);
  background: rgba(251, 191, 36, 0.06);
}

.billing-cancel-box h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: #fecaca;
}

.billing-cancel-box.is-scheduled h3 {
  color: #fde68a;
}

.billing-cancel-box p {
  margin: 0.4rem 0 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: #cbd5e1;
}

.billing-cancel-button {
  margin-top: 0.85rem;
  width: 100%;
  border-radius: 0.85rem;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.12);
  color: #fecaca;
  padding: 0.8rem 1rem;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease;
}

.billing-cancel-button:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.2);
}

.billing-cancel-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

@media (max-width: 960px) {
  .checkout-shell { grid-template-columns: 1fr; }
  .checkout-summary-panel {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .checkout-field-row {
    grid-template-columns: 1fr;
  }
}

/* Violet-inspired landing enhancements */
#landingView.landing-shell {
  overflow-x: clip;
  overflow-y: visible;
}

.landing-section {
  position: relative;
}

.landing-section-head {
  max-width: 42rem;
  margin-bottom: 2.5rem;
}

.landing-section-kicker {
  display: inline-flex;
  margin: 0;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, 0.22);
  background: rgba(34, 211, 238, 0.1);
  color: #a5f3fc;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.landing-section-title {
  margin: 1rem 0 0;
  color: #f8fafc;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.landing-section-copy {
  margin: 1rem 0 0;
  color: #94a3b8;
  font-size: 1.05rem;
  line-height: 1.75;
}

.landing-logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  align-items: center;
}

.landing-logo-strip span {
  color: rgba(148, 163, 184, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.landing-logo-strip span:not(:last-child)::after {
  content: "•";
  margin-left: 1.25rem;
  color: rgba(148, 163, 184, 0.35);
}

#landing-hero {
  position: relative;
}

/* Tailwind hero: chart cards use opacity-only fade; left copy uses styles.css + landing.js. */
#landing-hero .landing-hero-loader,
#landing-hero .landing-hero-loader-bar {
  display: none !important;
}

.landing-hero-wave {
  display: none;
}

.landing-footer-wave {
  display: none;
}

.landing-wave-layer {
  position: absolute;
  inset: auto -20% -40% -20%;
  height: 180%;
  border-radius: 45%;
  filter: blur(42px);
  opacity: 0.55;
  animation: landingWaveDrift 14s ease-in-out infinite alternate;
}

.landing-wave-layer-one {
  background: radial-gradient(circle at 30% 40%, rgba(34, 211, 238, 0.42), transparent 58%);
}

.landing-wave-layer-two {
  background: radial-gradient(circle at 70% 60%, rgba(52, 211, 153, 0.28), transparent 60%);
  animation-delay: -4s;
  animation-duration: 18s;
}

.landing-wave-layer-three {
  background: radial-gradient(circle at 50% 50%, rgba(98, 230, 255, 0.32), transparent 62%);
  animation-delay: -8s;
  animation-duration: 22s;
}

@keyframes landingWaveDrift {
  0% { transform: translate3d(-4%, 0, 0) rotate(-2deg) scale(1); }
  100% { transform: translate3d(4%, -6%, 0) rotate(2deg) scale(1.06); }
}

.landing-reveal,
.landing-reveal-stagger > * {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}

.landing-reveal.is-in-view,
.landing-reveal-stagger > *.is-in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

#landing-bento {
  isolation: isolate;
}

.landing-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(168px, auto);
  gap: 1rem;
  align-items: stretch;
}

.landing-bento-grid > .landing-bento-card:nth-child(1) {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.landing-bento-grid > .landing-bento-card:nth-child(2) {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.landing-bento-grid > .landing-bento-card:nth-child(3) {
  grid-column: 1;
  grid-row: 2;
}

.landing-bento-grid > .landing-bento-card:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
}

.landing-bento-grid > .landing-bento-card:nth-child(5) {
  grid-column: 1 / span 2;
  grid-row: 3;
}

.landing-bento-grid > .landing-bento-card:nth-child(6) {
  grid-column: 3;
  grid-row: 3;
}

.landing-bento-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 168px;
  padding: 1.35rem 1.4rem 1.5rem;
  border-radius: 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  transition: border-color 300ms ease-in-out, background 300ms ease-in-out, box-shadow 300ms ease-in-out;
}

.landing-bento-row-span-2 {
  min-height: 100%;
}

.landing-bento-card:hover {
  transform: none;
  border-color: rgba(34, 211, 238, 0.28);
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.07), rgba(255, 255, 255, 0.02));
  box-shadow: 0 24px 60px rgba(34, 211, 238, 0.12);
}

.landing-bento-span-2 {
  grid-column: span 2;
}

.landing-bento-glow {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #22d3ee;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.85);
  animation: landingBentoPulse 2.4s ease-in-out infinite;
}

@keyframes landingBentoPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

.landing-bento-label {
  margin: 0;
  color: #67e8f9;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.landing-bento-card h3 {
  margin: 0.85rem 0 0;
  color: #f8fafc;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.landing-bento-card p {
  margin: 0.65rem 0 0;
  color: #94a3b8;
  font-size: 0.92rem;
  line-height: 1.65;
}

.landing-roi-shell {
  display: grid;
  gap: 2rem;
  padding: 1.75rem;
  border-radius: 1.75rem;
  border: 1px solid rgba(34, 211, 238, 0.16);
  background:
    radial-gradient(circle at top right, rgba(34, 211, 238, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
}

@media (min-width: 900px) {
  .landing-roi-shell {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    padding: 2rem 2.25rem;
  }
}

.landing-roi-result {
  margin-top: 1.75rem;
  padding: 1.15rem 1.25rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(34, 211, 238, 0.18);
  background: rgba(8, 12, 22, 0.72);
}

.landing-roi-result p {
  margin: 0;
  color: #cbd5e1;
  font-size: 1rem;
  line-height: 1.65;
}

.landing-roi-result strong {
  color: #ecfeff;
  font-size: 1.35rem;
}

.landing-roi-money {
  margin-top: 0.55rem !important;
  color: #94a3b8 !important;
  font-size: 0.92rem !important;
}

.landing-roi-money strong {
  color: #67e8f9 !important;
  font-size: 1.05rem !important;
}

.landing-roi-controls {
  display: grid;
  gap: 1.35rem;
}

.landing-roi-field {
  display: grid;
  gap: 0.75rem;
}

.landing-roi-field span {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: #e2e8f0;
  font-size: 0.88rem;
  font-weight: 700;
}

.landing-roi-field em {
  color: #67e8f9;
  font-style: normal;
  font-weight: 900;
}

.landing-roi-field input[type="range"] {
  width: 100%;
  accent-color: #22d3ee;
  cursor: pointer;
}

.landing-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.landing-review-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 220px;
  padding: 1.25rem 1.3rem 1.35rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
  transition: all 300ms ease-in-out;
}

.landing-review-card:hover {
  transform: scale(1.02);
  border-color: rgba(34, 211, 238, 0.22);
  background: rgba(34, 211, 238, 0.06);
}

.landing-review-stars {
  color: #fbbf24;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
}

.landing-review-card p {
  flex: 1;
  margin: 0;
  color: #cbd5e1;
  font-size: 0.95rem;
  line-height: 1.7;
}

.landing-review-card footer {
  display: grid;
  gap: 0.15rem;
}

.landing-review-card footer strong {
  color: #f8fafc;
  font-size: 0.88rem;
}

.landing-review-card footer span {
  color: #64748b;
  font-size: 0.78rem;
}

.landing-faq-list {
  display: grid;
  gap: 0.75rem;
}

.landing-faq-item {
  overflow: hidden;
  border-radius: 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 220ms ease, background 220ms ease;
}

.landing-faq-item.is-open {
  border-color: rgba(34, 211, 238, 0.24);
  background: rgba(34, 211, 238, 0.06);
}

.landing-faq-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border: 0;
  background: transparent;
  color: #f8fafc;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.landing-faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  transition: transform 300ms ease-in-out;
}

.landing-faq-icon::before,
.landing-faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.9rem;
  height: 2px;
  background: #67e8f9;
  transform: translate(-50%, -50%);
  transition: transform 260ms ease, opacity 260ms ease;
}

.landing-faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.landing-faq-item.is-open .landing-faq-icon {
  transform: rotate(45deg);
}

.landing-faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-faq-panel > p {
  margin: 0;
  padding: 0 1.25rem 0;
  color: #94a3b8;
  font-size: 0.95rem;
  line-height: 1.7;
  opacity: 0;
  transition: opacity 280ms ease 80ms, padding 300ms ease;
}

.landing-faq-item.is-open .landing-faq-panel {
  max-height: 12rem;
}

.landing-faq-item.is-open .landing-faq-panel > p {
  padding: 0 1.25rem 1.15rem;
  opacity: 1;
}

.landing-gradient-text {
  background: linear-gradient(90deg, #ecfeff 0%, #67e8f9 48%, #6ee7b7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.landing-metric-bar {
  display: block;
  width: 0;
  height: 3px;
  margin-bottom: 0.85rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #22d3ee, #34d399);
  transition: width 1000ms cubic-bezier(0.16, 1, 0.3, 1) var(--bar-delay, 0ms);
}

.landing-reveal-metric.is-in-view .landing-metric-bar {
  width: 100%;
}

.landing-site-footer {
  position: relative;
  margin-top: 2rem;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #03050a;
}

.landing-footer-inner {
  position: relative;
  z-index: 1;
}

.landing-footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem 3rem;
}

.landing-footer-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 2rem 3rem;
}

.landing-footer-col h3 {
  margin: 0 0 1rem;
  color: #f8fafc;
  font-size: 0.95rem;
  font-weight: 800;
}

.landing-footer-col a {
  display: block;
  margin-top: 0.55rem;
  color: rgba(148, 163, 184, 0.88);
  font-size: 0.88rem;
  text-decoration: none;
  transition: color 180ms ease;
}

.landing-footer-col a:hover {
  color: #f8fafc;
}

.landing-footer-social p {
  margin: 0 0 0.85rem;
  color: #f8fafc;
  font-size: 0.95rem;
  font-weight: 800;
  text-align: right;
}

.landing-footer-social {
  margin-left: auto;
}

.landing-social-btn {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.landing-social-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 211, 238, 0.35);
  background: rgba(34, 211, 238, 0.12);
  color: #ecfeff;
}

.landing-social-btn svg {
  width: 1.05rem;
  height: 1.05rem;
}

.landing-footer-bottom {
  display: flex;
  justify-content: flex-end;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.landing-footer-bottom p {
  margin: 0;
  color: rgba(148, 163, 184, 0.72);
  font-size: 0.82rem;
}

@media (max-width: 960px) {
  .landing-bento-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .landing-bento-grid > .landing-bento-card {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .landing-bento-span-2 {
    grid-column: auto;
  }

  .landing-bento-row-span-2 {
    min-height: 168px;
  }

  .landing-reviews-grid {
    grid-template-columns: 1fr;
  }

  .landing-footer-columns {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .landing-footer-social {
    width: 100%;
    margin-left: 0;
  }

  .landing-footer-social p {
    text-align: left;
  }

  .landing-footer-bottom {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .landing-footer-columns {
    grid-template-columns: 1fr;
  }

  .landing-logo-strip span:not(:last-child)::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-reveal,
  .landing-reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .landing-hero-loader-bar {
    animation: none !important;
    width: 100%;
    opacity: 0;
  }

  .landing-wave-layer,
  .landing-bento-glow {
    animation: none;
  }
}