/* =========================================================
   QUANTUM INTELLIGENCE — COMMAND CENTER V2
   SMI TERMINAL
========================================================= */

:root {
    --q-bg: #020409;
    --q-bg-2: #050914;
    --q-panel: rgba(7, 13, 25, 0.78);
    --q-panel-2: rgba(10, 18, 34, 0.88);

    --q-white: #eef7ff;
    --q-text: #d9e6f5;
    --q-muted: #73849d;
    --q-dim: #46566e;

    --q-cyan: #58e8ff;
    --q-cyan-2: #1bbbd9;
    --q-blue: #7194ff;
    --q-violet: #9d7cff;
    --q-green: #57e7ae;
    --q-yellow: #ffd36a;
    --q-red: #ff5c79;

    --q-border: rgba(115, 155, 210, 0.14);
    --q-border-bright: rgba(88, 232, 255, 0.28);

    --q-radius: 20px;

    --q-font:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --q-display:
        "Space Grotesk",
        Inter,
        system-ui,
        sans-serif;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--q-bg);
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;

    color: var(--q-text);

    font-family: var(--q-font);

    background:
        radial-gradient(
            circle at 78% 8%,
            rgba(55, 87, 170, 0.14),
            transparent 28%
        ),
        radial-gradient(
            circle at 8% 45%,
            rgba(35, 185, 214, 0.055),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #010309 0%,
            #040711 48%,
            #020409 100%
        );

    overflow-x: hidden;
}


/* =========================================================
   GLOBAL FUTURE GRID
========================================================= */

body::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            rgba(95, 145, 205, 0.028) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(95, 145, 205, 0.028) 1px,
            transparent 1px
        );

    background-size: 64px 64px;

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            rgba(0, 0, 0, 0.7) 50%,
            transparent 100%
        );

    z-index: 0;
}


/* =========================================================
   AMBIENT LIGHT
========================================================= */

body::after {
    content: "";

    position: fixed;

    width: 700px;
    height: 700px;

    top: 20%;
    right: -360px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(70, 211, 239, 0.065),
            transparent 68%
        );

    filter: blur(18px);

    pointer-events: none;

    z-index: 0;
}


/* =========================================================
   APP
========================================================= */

.quantum-app {
    position: relative;

    width: 100%;
    min-height: 100vh;

    z-index: 1;
}


/* =========================================================
   TOP NAV
========================================================= */

.quantum-nav {
    position: sticky;

    top: 0;

    z-index: 100;

    height: 76px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 34px;

    border-bottom:
        1px solid
        rgba(120, 160, 215, 0.12);

    background:
        rgba(3, 6, 13, 0.84);

    backdrop-filter:
        blur(22px);
}


/* =========================================================
   BRAND
========================================================= */

.nav-brand {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 220px;
}

.quantum-symbol {
    position: relative;

    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(88, 232, 255, 0.38);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(88, 232, 255, 0.13),
            rgba(2, 7, 14, 0.8) 68%
        );

    box-shadow:
        0 0 25px rgba(88, 232, 255, 0.1),
        inset 0 0 20px rgba(88, 232, 255, 0.05);
}

.quantum-symbol::before {
    content: "";

    position: absolute;

    width: 25px;
    height: 25px;

    border:
        1px solid
        rgba(88, 232, 255, 0.25);

    border-radius: 50%;

    animation:
        qSpin 8s linear infinite;
}

.quantum-symbol::after {
    content: "";

    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--q-cyan);

    box-shadow:
        0 0 10px var(--q-cyan),
        0 0 28px rgba(88, 232, 255, 0.65);
}

.brand-copy {
    display: flex;

    flex-direction: column;

    gap: 2px;
}

.brand-mini {
    color: #60718a;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.28em;
}

.brand-copy strong {
    color: var(--q-white);

    font-family: var(--q-display);

    font-size: 17px;

    letter-spacing: 0.08em;
}


/* =========================================================
   NAV LINKS
========================================================= */

.quantum-nav-links {
    display: flex;

    align-items: center;

    gap: 4px;

    height: 100%;
}

.nav-link {
    position: relative;

    height: 100%;

    padding:
        0 15px;

    border: 0;

    background: transparent;

    color: #61728b;

    font-family: var(--q-font);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.16em;

    cursor: pointer;

    transition:
        color 180ms ease,
        background 180ms ease;
}

.nav-link::after {
    content: "";

    position: absolute;

    left: 18%;
    right: 18%;
    bottom: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--q-cyan),
            transparent
        );

    opacity: 0;

    transform: scaleX(0);

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.nav-link:hover,
.nav-link.active {
    color: #dcecff;
}

.nav-link.active::after {
    opacity: 1;

    transform: scaleX(1);
}


/* =========================================================
   SYSTEM STATUS
========================================================= */

.nav-system {
    min-width: 260px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 25px;
}

.system-time {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 3px;
}

.system-time span {
    color: #4e6078;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 0.18em;
}

.system-time strong {
    color: #91a2bb;

    font-family: var(--q-display);

    font-size: 10px;

    letter-spacing: 0.08em;
}

.system-status {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #61738d;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.15em;
}

.system-status b {
    color: var(--q-cyan);

    font-size: 7px;
}

.status-pulse {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: var(--q-cyan);

    box-shadow:
        0 0 7px var(--q-cyan),
        0 0 18px rgba(88, 232, 255, 0.65);

    animation:
        statusPulse 2s ease-in-out infinite;
}


/* =========================================================
   COMMAND STRIP
========================================================= */

.command-strip {
    position: relative;

    min-height: 54px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 34px;

    border-bottom:
        1px solid
        rgba(115, 155, 210, 0.08);

    background:
        rgba(3, 6, 12, 0.58);
}

.command-context {
    display: flex;

    align-items: center;

    gap: 13px;
}

.command-label {
    color: #7d8fa9;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.2em;
}

.command-divider {
    width: 30px;
    height: 1px;

    background:
        rgba(88, 232, 255, 0.25);
}

.command-mode {
    color: var(--q-cyan);

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.15em;
}

.command-actions {
    display: flex;

    gap: 8px;
}

.command-btn {
    height: 31px;

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        0 12px;

    border:
        1px solid
        rgba(115, 155, 210, 0.15);

    border-radius: 7px;

    background:
        rgba(255, 255, 255, 0.02);

    color: #8fa2bc;

    font-family: var(--q-font);

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.13em;

    cursor: pointer;

    transition:
        all 180ms ease;
}

.command-btn:hover {
    color: var(--q-white);

    border-color:
        rgba(88, 232, 255, 0.3);

    background:
        rgba(88, 232, 255, 0.035);
}

.command-primary {
    color: #061018;

    border-color:
        rgba(88, 232, 255, 0.65);

    background:
        linear-gradient(
            100deg,
            var(--q-cyan),
            #7b9cff
        );

    box-shadow:
        0 0 18px
        rgba(88, 232, 255, 0.1);
}

.btn-icon {
    color: var(--q-cyan);

    font-size: 13px;

    line-height: 1;
}


/* =========================================================
   MAIN
========================================================= */

.quantum-main {
    width: min(1780px, calc(100% - 48px));

    margin:
        0 auto;

    padding:
        22px 0 70px;
}


/* =========================================================
   COMMAND CENTER
========================================================= */

.command-center {
    position: relative;

    min-height: 570px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(460px, 0.92fr);

    overflow: hidden;

    border:
        1px solid
        rgba(105, 150, 215, 0.14);

    border-radius: 25px;

    background:
        radial-gradient(
            circle at 72% 48%,
            rgba(48, 93, 148, 0.13),
            transparent 33%
        ),
        linear-gradient(
            135deg,
            rgba(9, 17, 32, 0.94),
            rgba(3, 7, 14, 0.94)
        );

    box-shadow:
        0 30px 110px rgba(0, 0, 0, 0.28),
        inset 0 1px rgba(255, 255, 255, 0.025);
}

.command-center::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(88, 232, 255, 0.35),
            transparent
        );
}


/* =========================================================
   CENTER GRID
========================================================= */

.center-background-grid {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            rgba(88, 232, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(88, 232, 255, 0.025) 1px,
            transparent 1px
        );

    background-size:
        46px 46px;

    mask-image:
        radial-gradient(
            circle at 70% 50%,
            black,
            transparent 68%
        );

    pointer-events: none;
}


/* =========================================================
   CENTER COPY
========================================================= */

.center-copy {
    position: relative;

    z-index: 5;

    align-self: center;

    padding:
        55px 30px
        55px 58px;
}

.micro-label {
    color: #71839d;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.23em;
}

.center-copy h1 {
    margin:
        18px 0
        20px;

    color: #f0f7ff;

    font-family: var(--q-display);

    font-size:
        clamp(43px, 5.1vw, 79px);

    font-weight: 600;

    line-height: 0.94;

    letter-spacing: -0.06em;
}

.center-copy h1 span {
    background:
        linear-gradient(
            95deg,
            #ffffff 0%,
            #91eaff 38%,
            #7e9dff 70%,
            #a985ff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.center-copy > p {
    max-width: 650px;

    margin: 0;

    color: #7b8ca5;

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================================
   CENTER ACTIONS
========================================================= */

.center-actions {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 29px;
}

.big-primary {
    min-width: 240px;

    min-height: 55px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    padding:
        0 17px;

    border:
        1px solid
        rgba(88, 232, 255, 0.7);

    border-radius: 10px;

    color: #041016;

    background:
        linear-gradient(
            110deg,
            #54e7ff,
            #7899ff
        );

    font-family: var(--q-font);

    cursor: pointer;

    box-shadow:
        0 0 30px
        rgba(88, 232, 255, 0.11);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.big-primary:hover {
    transform: translateY(-2px);

    box-shadow:
        0 0 42px
        rgba(88, 232, 255, 0.22);
}

.big-primary span {
    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.13em;
}

.big-primary small {
    margin-top: 4px;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 0.18em;

    opacity: 0.62;
}

.big-secondary {
    height: 55px;

    padding:
        0 17px;

    border:
        1px solid
        rgba(115, 155, 210, 0.18);

    border-radius: 10px;

    color: #b0c0d5;

    background:
        rgba(255, 255, 255, 0.018);

    font-family: var(--q-font);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.13em;

    cursor: pointer;

    transition:
        all 180ms ease;
}

.big-secondary:hover {
    color: white;

    border-color:
        rgba(88, 232, 255, 0.28);

    background:
        rgba(88, 232, 255, 0.035);
}


/* =========================================================
   ANALYSIS STATE
========================================================= */

.analysis-state {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 25px;

    color: #52637b;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.15em;
}

.analysis-state strong {
    color: #8295af;

    font-weight: 700;
}

.state-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--q-cyan);

    box-shadow:
        0 0 10px var(--q-cyan);
}


/* =========================================================
   QUANTUM CORE STAGE
========================================================= */

.quantum-core-stage {
    position: relative;

    min-height: 570px;

    display: grid;

    place-items: center;

    overflow: hidden;
}


/* =========================================================
   STAR FIELD
========================================================= */

.core-star-field {
    position: absolute;

    inset: 0;

    opacity: 0.7;

    background-image:
        radial-gradient(
            circle,
            rgba(88, 232, 255, 0.55) 1px,
            transparent 1px
        );

    background-size:
        90px 90px;

    mask-image:
        radial-gradient(
            circle,
            black 10%,
            transparent 68%
        );
}


/* =========================================================
   CORE ORBITS
========================================================= */

.core-orbit {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(88, 232, 255, 0.2);

    box-shadow:
        0 0 35px
        rgba(88, 232, 255, 0.025);

    pointer-events: none;
}

.orbit-1 {
    width: 315px;
    height: 315px;

    animation:
        orbitA 18s linear infinite;
}

.orbit-2 {
    width: 245px;
    height: 365px;

    border-color:
        rgba(157, 124, 255, 0.2);

    transform:
        rotate(54deg);

    animation:
        orbitB 13s linear infinite;
}

.orbit-3 {
    width: 390px;
    height: 185px;

    border-color:
        rgba(88, 232, 255, 0.13);

    transform:
        rotate(-35deg);

    animation:
        orbitC 23s linear infinite;
}

.orbit-4 {
    width: 420px;
    height: 420px;

    border:
        1px dashed
        rgba(88, 232, 255, 0.09);

    animation:
        orbitA 35s linear infinite reverse;
}


/* =========================================================
   CORE AXIS
========================================================= */

.core-axis {
    position: absolute;

    width: 440px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(88, 232, 255, 0.2),
            transparent
        );

    opacity: 0.6;
}

.axis-x {
    transform:
        rotate(0deg);
}

.axis-y {
    transform:
        rotate(90deg);
}


/* =========================================================
   QUANTUM CORE
========================================================= */

.quantum-core {
    position: relative;

    z-index: 10;

    width: 190px;
    height: 190px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(88, 232, 255, 0.35);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 43%,
            rgba(42, 93, 134, 0.9),
            rgba(5, 10, 19, 0.97) 67%
        );

    box-shadow:
        0 0 70px
        rgba(88, 232, 255, 0.15),

        inset 0 0 50px
        rgba(88, 232, 255, 0.08);
}

.quantum-core::before {
    content: "";

    position: absolute;

    inset: 10px;

    border:
        1px solid
        rgba(88, 232, 255, 0.11);

    border-radius: 50%;
}

.quantum-core::after {
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: white;

    box-shadow:
        0 0 10px white,
        0 0 28px var(--q-cyan),
        0 0 50px rgba(88, 232, 255, 0.8);
}

.core-inner {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;
}

.core-word {
    color: #91a5be;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.3em;
}

.core-inner strong {
    margin:
        4px 0;

    color: #f4fbff;

    font-family: var(--q-display);

    font-size: 58px;

    line-height: 1;

    letter-spacing: -0.05em;
}

.core-sub {
    color: #63758e;

    font-size: 7px;

    letter-spacing: 0.18em;
}


/* =========================================================
   FLOATING DATA
========================================================= */

.floating-data {
    position: absolute;

    z-index: 20;

    min-width: 72px;

    padding:
        8px 10px;

    border:
        1px solid
        rgba(115, 155, 210, 0.15);

    border-radius: 8px;

    background:
        rgba(3, 8, 16, 0.78);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.25);
}

.floating-data span {
    display: block;

    color: #62748d;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 0.17em;
}

.floating-data strong {
    display: block;

    margin-top: 4px;

    color: #b7c8dd;

    font-family: var(--q-display);

    font-size: 12px;
}

.data-risk {
    top: 19%;
    right: 5%;
}

.data-growth {
    left: 5%;
    bottom: 19%;
}

.data-thesis {
    top: 50%;
    right: -1%;
}

.data-regime {
    top: 8%;
    left: 22%;
}


/* =========================================================
   METRICS
========================================================= */

.quantum-metrics {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;

    margin-top: 12px;
}

.metric {
    position: relative;

    min-height: 142px;

    padding: 19px 20px;

    overflow: hidden;

    border:
        1px solid
        var(--q-border);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(10, 18, 32, 0.84),
            rgba(4, 8, 15, 0.74)
        );

    transition:
        transform 180ms ease,
        border-color 180ms ease;
}

.metric:hover {
    transform: translateY(-2px);

    border-color:
        rgba(88, 232, 255, 0.22);
}

.metric::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    right: -70px;
    bottom: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(88, 232, 255, 0.08),
            transparent 68%
        );
}

.metric-top {
    display: flex;

    justify-content: space-between;

    align-items: center;
}

.metric-top span {
    color: #64758e;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.18em;
}

.metric-top i {
    color: #43536b;

    font-size: 6px;

    font-style: normal;

    letter-spacing: 0.14em;
}

.metric > strong {
    display: block;

    margin:
        14px 0;

    color: var(--q-white);

    font-family: var(--q-display);

    font-size: 31px;

    letter-spacing: -0.045em;
}

.metric-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;
}

.metric-bottom span {
    color: #475870;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 0.14em;
}

.metric-bottom b {
    color: #73859f;

    font-size: 7px;
}

.metric-cyan > strong {
    color: var(--q-cyan);
}

.metric-warning > strong {
    color: var(--q-yellow);
}

.metric-danger > strong {
    color: var(--q-red);
}


/* =========================================================
   GENERIC PANELS
========================================================= */

.universe-panel,
.warning-panel,
.future-map-panel,
.capital-panel,
.intelligence-panel {
    position: relative;

    margin-top: 12px;

    overflow: hidden;

    border:
        1px solid
        var(--q-border);

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            rgba(9, 16, 29, 0.83),
            rgba(3, 7, 14, 0.8)
        );

    box-shadow:
        0 18px 70px
        rgba(0, 0, 0, 0.13);
}

/* =========================================================
   FUTURE WEALTH MAP — QUANTUM SCENARIO VISUAL
========================================================= */

.future-map-panel {
    position: relative;
    margin-top: 18px;
    overflow: hidden;

    border: 1px solid rgba(88, 232, 255, 0.20);
    border-radius: 24px;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(88, 232, 255, 0.055),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 18%,
            rgba(157, 124, 255, 0.075),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(8, 16, 31, 0.98),
            rgba(2, 6, 15, 0.98)
        );

    box-shadow:
        0 28px 90px rgba(0,0,0,0.34),
        inset 0 1px rgba(255,255,255,0.035);
}


.future-map-panel::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #58e8ff 20%,
            #9d7cff 50%,
            #57e7ae 75%,
            transparent
        );

    box-shadow:
        0 0 22px rgba(88,232,255,0.35);
}


/* =========================================================
   HORIZON BUTTONS
========================================================= */

.future-horizon {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 5px;

    border:
        1px solid
        rgba(115,155,210,0.16);

    border-radius: 12px;

    background:
        rgba(3,8,17,0.72);
}


.future-horizon button {
    min-width: 52px;
    height: 34px;

    padding: 0 12px;

    border: 1px solid transparent;
    border-radius: 8px;

    background: transparent;

    color: #647993;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 0.12em;

    cursor: pointer;

    transition:
        all 180ms ease;
}


.future-horizon button:hover {
    color: #dff8ff;

    background:
        rgba(88,232,255,0.06);
}


.future-horizon button.active {
    color: #031018;

    border-color:
        rgba(88,232,255,0.75);

    background:
        linear-gradient(
            110deg,
            #58e8ff,
            #7899ff
        );

    box-shadow:
        0 0 20px
        rgba(88,232,255,0.18);
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.future-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        330px;

    gap: 22px;

    padding:
        24px 28px 28px;
}


/* =========================================================
   WEALTH CHART
========================================================= */

.wealth-chart {
    position: relative;

    min-height: 430px;

    overflow: hidden;

    border:
        1px solid
        rgba(115,155,210,0.12);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 50% 55%,
            rgba(42,90,135,0.10),
            transparent 55%
        ),
        rgba(2,7,15,0.70);
}


/* =========================================================
   GRID
========================================================= */

.chart-grid-lines {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            rgba(88,232,255,0.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(88,232,255,0.055) 1px,
            transparent 1px
        );

    background-size:
        25% 25%;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 95%
        );

    pointer-events: none;
}


/* =========================================================
   SVG
========================================================= */

.future-svg {
    position: absolute;

    inset:
        20px 25px 35px 55px;

    width:
        calc(100% - 80px);

    height:
        calc(100% - 55px);

    overflow: visible;
}


/* =========================================================
   AREA
========================================================= */

#futureUpsideArea {
    fill:
        url(#futureAreaGlow);

    opacity: 0.75;
}


/* =========================================================
   LINES
========================================================= */

#futureUpsideLine {
    fill: none;

    stroke:
        url(#futureGlow);

    stroke-width: 4;

    stroke-linecap: round;

    filter:
        drop-shadow(
            0 0 8px
            rgba(88,232,255,0.55)
        );
}


#futureBaseLine {
    fill: none;

    stroke: #9d7cff;

    stroke-width: 3;

    stroke-linecap: round;

    stroke-dasharray: 8 8;

    opacity: 0.90;

    filter:
        drop-shadow(
            0 0 7px
            rgba(157,124,255,0.40)
        );
}


#futureDownsideLine {
    fill: none;

    stroke: #ff5c79;

    stroke-width: 3;

    stroke-linecap: round;

    stroke-dasharray: 6 9;

    opacity: 0.82;

    filter:
        drop-shadow(
            0 0 7px
            rgba(255,92,121,0.35)
        );
}


/* =========================================================
   CURRENT MARKER
========================================================= */

#futureCurrentMarker {
    fill: #ffffff;

    stroke: #58e8ff;

    stroke-width: 3;

    filter:
        drop-shadow(
            0 0 8px
            rgba(88,232,255,0.9)
        );
}


/* =========================================================
   AXIS
========================================================= */

.wealth-chart .axis-y {
    position: absolute;

    left: 13px;
    top: 30px;
    bottom: 48px;

    display: flex;

    flex-direction: column;

    justify-content:
        space-between;

    z-index: 5;
}


.wealth-chart .axis-y span {
    color: #526984;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 0.12em;
}


.wealth-chart .axis-x {
    position: absolute;

    left: 55px;
    right: 25px;
    bottom: 14px;

    display: flex;

    justify-content:
        space-between;

    z-index: 5;
}


.wealth-chart .axis-x span {
    color: #526984;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 0.10em;
}


/* =========================================================
   SCENARIO LABELS
========================================================= */

.scenario-label {
    position: absolute;

    z-index: 8;

    padding:
        7px 10px;

    border-radius: 8px;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 0.12em;

    backdrop-filter:
        blur(10px);
}


.scenario-label.bull {
    top: 14%;

    right: 6%;

    color: #58e8ff;

    border:
        1px solid
        rgba(88,232,255,0.22);

    background:
        rgba(88,232,255,0.055);

    box-shadow:
        0 0 20px
        rgba(88,232,255,0.08);
}


.scenario-label.base {
    top: 43%;

    right: 8%;

    color: #b19cff;

    border:
        1px solid
        rgba(157,124,255,0.22);

    background:
        rgba(157,124,255,0.055);
}


.scenario-label.bear {
    bottom: 17%;

    right: 7%;

    color: #ff7890;

    border:
        1px solid
        rgba(255,92,121,0.22);

    background:
        rgba(255,92,121,0.055);
}


/* =========================================================
   SCENARIO PANEL
========================================================= */

.scenario-panel {
    position: relative;

    padding: 22px;

    border:
        1px solid
        rgba(115,155,210,0.14);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(12,21,38,0.90),
            rgba(3,8,17,0.92)
        );

    box-shadow:
        inset 0 1px
        rgba(255,255,255,0.025);
}


.scenario-title {
    display: block;

    margin-bottom: 14px;

    color: #60748f;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 0.20em;
}


/* =========================================================
   SCENARIO ROWS
========================================================= */

.scenario-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 68px;

    margin-bottom: 8px;

    padding:
        0 15px;

    border:
        1px solid
        rgba(115,155,210,0.10);

    border-radius: 12px;

    background:
        rgba(255,255,255,0.018);

    transition:
        transform 180ms ease,
        border-color 180ms ease;
}


.scenario-row:hover {
    transform:
        translateX(3px);
}


.scenario-row > span {
    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.14em;
}


.scenario-row > strong {
    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 18px;

    font-weight: 700;

    letter-spacing: -0.02em;
}


/* UPSIDE */

.scenario-upside {
    border-color:
        rgba(88,232,255,0.18);

    background:
        linear-gradient(
            100deg,
            rgba(88,232,255,0.055),
            rgba(88,232,255,0.012)
        );
}


.scenario-upside > span,
.scenario-upside > strong {
    color: #58e8ff;
}


/* BASE */

.scenario-base {
    border-color:
        rgba(157,124,255,0.18);

    background:
        linear-gradient(
            100deg,
            rgba(157,124,255,0.055),
            rgba(157,124,255,0.012)
        );
}


.scenario-base > span,
.scenario-base > strong {
    color: #aa94ff;
}


/* DOWNSIDE */

.scenario-downside {
    border-color:
        rgba(255,92,121,0.18);

    background:
        linear-gradient(
            100deg,
            rgba(255,92,121,0.055),
            rgba(255,92,121,0.012)
        );
}


.scenario-downside > span,
.scenario-downside > strong {
    color: #ff7189;
}


/* =========================================================
   DIVIDER
========================================================= */

.scenario-divider {
    height: 1px;

    margin:
        20px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(115,155,210,0.16),
            transparent
        );
}


/* =========================================================
   EXPECTED OUTCOME
========================================================= */

.scenario-expected {
    padding:
        12px 0 4px;
}


.scenario-expected strong {
    display: block;

    color: #f0f7ff;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 28px;

    letter-spacing: -0.04em;
}


.scenario-expected small {
    display: block;

    margin-top: 5px;

    color: #586d87;

    font-size: 7px;

    letter-spacing: 0.08em;
}


/* =========================================================
   CONFIDENCE
========================================================= */

.confidence-ring {
    width: 92px;
    height: 92px;

    margin:
        12px auto 20px;

    display: grid;

    place-items: center;

    border:
        2px solid
        rgba(88,232,255,0.45);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(88,232,255,0.10),
            rgba(4,10,19,0.9) 65%
        );

    box-shadow:
        0 0 30px
        rgba(88,232,255,0.10),

        inset 0 0 25px
        rgba(88,232,255,0.06);
}


.confidence-ring span {
    color: #58e8ff;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 22px;

    font-weight: 700;
}


/* =========================================================
   SCENARIO STATE
========================================================= */

.scenario-status {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 15px;

    border-top:
        1px solid
        rgba(115,155,210,0.08);
}


.scenario-status span {
    color: #536984;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 0.14em;
}


.scenario-status strong {
    color: #58e8ff;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 8px;

    letter-spacing: 0.10em;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

    .future-layout {
        grid-template-columns:
            1fr;
    }

    .scenario-panel {
        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 10px;
    }

    .scenario-title,
    .scenario-divider {
        grid-column:
            1 / -1;
    }

    .scenario-expected,
    .confidence-ring,
    .scenario-status {
        grid-column:
            1 / -1;
    }

}


@media (max-width: 700px) {

    .future-layout {
        padding:
            18px;
    }

    .panel-heading {
        flex-direction: column;
    }

    .future-horizon {
        align-self:
            flex-start;
    }

    .wealth-chart {
        min-height:
            350px;
    }

    .scenario-panel {
        display: block;
    }

}


/* =========================================================
   PANEL HEADING
========================================================= */

.panel-heading {
    position: relative;

    z-index: 5;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    padding:
        23px 24px
        0;
}

.panel-heading.compact {
    padding-top: 20px;
}

.section-code {
    color: #50627b;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 0.2em;
}

.panel-heading h2 {
    margin:
        5px 0
        5px;

    color: #dce9f7;

    font-family: var(--q-display);

    font-size: 20px;

    font-weight: 600;

    letter-spacing: -0.025em;
}

.panel-heading p {
    margin: 0;

    color: #5f7088;

    font-size: 9px;

    line-height: 1.6;
}

.panel-control {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 4px;
}

.panel-control span {
    color: #4e6078;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 0.17em;
}

.panel-control strong {
    color: var(--q-cyan);

    font-family: var(--q-display);

    font-size: 19px;
}

.engine-status {
    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        7px 10px;

    border:
        1px solid
        rgba(88, 232, 255, 0.13);

    border-radius: 20px;

    color: #68dff1;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 0.16em;
}

.model-chip {
    padding:
        7px 10px;

    border:
        1px solid
        rgba(157, 124, 255, 0.18);

    border-radius: 20px;

    color: #a68eff;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 0.16em;
}


/* =========================================================
   PORTFOLIO UNIVERSE
========================================================= */

.universe-stage {
    position: relative;

    height: 500px;

    margin-top: 15px;

    overflow: hidden;
}

.universe-grid {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            rgba(88, 232, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(88, 232, 255, 0.035) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;

    mask-image:
        radial-gradient(
            circle,
            black 8%,
            transparent 72%
        );
}

.universe-rings {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 450px;
    height: 450px;

    transform:
        translate(-50%, -50%);
}

.universe-rings span {
    position: absolute;

    inset: 0;

    border:
        1px solid
        rgba(88, 232, 255, 0.12);

    border-radius: 50%;
}

.universe-rings span:nth-child(2) {
    inset: 65px;

    border-color:
        rgba(157, 124, 255, 0.12);
}

.universe-rings span:nth-child(3) {
    inset: 135px;

    border-color:
        rgba(88, 232, 255, 0.17);
}

.universe-center {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 120px;
    height: 120px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    transform:
        translate(-50%, -50%);

    border:
        1px solid
        rgba(88, 232, 255, 0.25);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(27, 69, 102, 0.7),
            rgba(4, 9, 17, 0.95)
        );

    box-shadow:
        0 0 50px
        rgba(88, 232, 255, 0.08);
}

.universe-center div {
    color: #647991;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 0.2em;
}

.universe-center strong {
    margin-top: 4px;

    color: #dcecff;

    font-family: var(--q-display);

    font-size: 15px;

    letter-spacing: 0.06em;
}


/* =========================================================
   STOCK NODES — QUANTUM LIVE PORTFOLIO
========================================================= */

.stock-node {
    position: absolute;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 9px 13px;

    border: 1px solid
        rgba(115, 155, 210, 0.22);

    border-radius: 10px;

    background:
        rgba(2, 7, 14, 0.88);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 0 20px
        rgba(65, 190, 255, 0.06);

    transform:
        translate(-50%, -50%);

    transition:
        all 0.35s ease;

    white-space:
        nowrap;
}

/* =========================================================
   NODE SIGNAL
========================================================= */

.stock-node span {
    width: 9px;

    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--q-cyan);

    box-shadow:
        0 0 10px var(--q-cyan),
        0 0 18px
        rgba(75, 220, 255, 0.45);
}


/* =========================================================
   NODE LABEL
========================================================= */

.stock-node label {
    color: #d7e6f7;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 0.10em;

    line-height: 1;

    text-transform: uppercase;

    white-space: nowrap;
}

/* =========================================================
   QUANTUM NODE INTELLIGENCE PANEL
========================================================= */

.quantum-node-panel {
    position: fixed;

    top: 50%;
    right: 32px;

    width: 380px;

    padding: 24px;

    transform:
        translateY(-50%)
        translateX(30px);

    opacity: 0;

    pointer-events: none;

    z-index: 9999;

    border:
        1px solid
        rgba(80, 210, 255, 0.22);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(7, 16, 30, 0.97),
            rgba(2, 7, 15, 0.97)
        );

    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, 0.55),
        0 0 45px
        rgba(30, 190, 255, 0.08);

    backdrop-filter:
        blur(24px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


.quantum-node-panel.active {

    opacity: 1;

    pointer-events: auto;

    transform:
        translateY(-50%)
        translateX(0);
}


/* =========================================================
   PANEL HEADER
========================================================= */

.quantum-node-panel-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    padding-bottom: 18px;

    border-bottom:
        1px solid
        rgba(115, 155, 210, 0.12);
}


.quantum-node-panel-header h3 {

    margin: 6px 0 0;

    color: #edf7ff;

    font-size: 28px;

    font-weight: 800;

    letter-spacing: 0.04em;
}


.quantum-node-panel-header button {

    width: 34px;

    height: 34px;

    border: 1px solid
        rgba(115, 155, 210, 0.18);

    border-radius: 8px;

    background:
        rgba(255, 255, 255, 0.025);

    color: #7188a4;

    font-size: 24px;

    line-height: 1;

    cursor: pointer;

    transition:
        all 0.2s ease;
}


.quantum-node-panel-header button:hover {

    color: #ffffff;

    border-color:
        rgba(80, 220, 255, 0.45);

    background:
        rgba(80, 220, 255, 0.08);
}


/* =========================================================
   STATUS
========================================================= */

.quantum-node-status {

    display: flex;

    align-items: center;

    gap: 8px;

    margin:
        16px 0 20px;

    color: var(--q-cyan);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.16em;
}


.quantum-node-status .status-pulse {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--q-cyan);

    box-shadow:
        0 0 12px
        var(--q-cyan);
}


/* =========================================================
   METRICS GRID
========================================================= */

.quantum-node-metrics {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 9px;
}


.quantum-node-metrics > div {

    min-height: 62px;

    padding: 12px;

    border:
        1px solid
        rgba(115, 155, 210, 0.11);

    border-radius: 9px;

    background:
        rgba(255, 255, 255, 0.018);
}


.quantum-node-metrics span {

    display: block;

    margin-bottom: 7px;

    color: #617792;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.13em;
}


.quantum-node-metrics strong {

    color: #dcecff;

    font-size: 15px;

    font-weight: 750;

    letter-spacing: 0.02em;
}


/* =========================================================
   INTELLIGENCE
========================================================= */

.quantum-node-intelligence {

    margin-top: 18px;

    padding: 14px;

    border:
        1px solid
        rgba(115, 155, 210, 0.11);

    border-radius: 10px;

    background:
        rgba(3, 10, 19, 0.65);
}


.intelligence-line {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 0;

    border-bottom:
        1px solid
        rgba(115, 155, 210, 0.07);
}


.intelligence-line:last-child {

    border-bottom: none;

    padding-bottom: 2px;
}


.intelligence-line span {

    color: #637b98;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.13em;
}


.intelligence-line strong {

    color: #8ca5c1;

    font-size: 10px;

    letter-spacing: 0.08em;
}


/* =========================================================
   PANEL FOOTER
========================================================= */

.quantum-node-footer {

    display: flex;

    justify-content: space-between;

    margin-top: 18px;

    color: #526a85;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.12em;
}


.quantum-node-footer span {

    color: var(--q-cyan);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .quantum-node-panel {

        left: 16px;

        right: 16px;

        width: auto;

        top: auto;

        bottom: 16px;

        transform:
            translateY(30px);
    }


    .quantum-node-panel.active {

        transform:
            translateY(0);
    }

}


/* =========================================================
   LIVE NODE HOVER
========================================================= */

.quantum-live-node:hover {

    border-color:
        rgba(75, 220, 255, 0.45);

    background:
        rgba(5, 15, 28, 0.95);

    box-shadow:
        0 0 24px
        rgba(75, 220, 255, 0.14);

    transform:
        translate(-50%, -50%)
        scale(1.08);

}


/* =========================================================
   AUTOMATIC ORBITAL POSITIONING
========================================================= */

.quantum-live-node {

    left:
        calc(
            50% +
            cos(
                calc(
                    var(--node-index) *
                    30deg
                )
            ) * 36%
        );

    top:
        calc(
            50% +
            sin(
                calc(
                    var(--node-index) *
                    30deg
                )
            ) * 34%
        );

}

/* =========================================================
   WARNING ENGINE — COLOR INTELLIGENCE V3
   DO NOT CHANGE HTML / JS
========================================================= */

.warning-panel {
    position: relative;
    margin-top: 18px;
    overflow: hidden;

    border: 1px solid rgba(92, 164, 255, 0.22);
    border-radius: 24px;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(0, 225, 255, 0.07),
            transparent 24%
        ),
        radial-gradient(
            circle at 88% 20%,
            rgba(155, 92, 255, 0.08),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            rgba(8, 15, 30, 0.97),
            rgba(2, 6, 15, 0.98)
        );

    box-shadow:
        0 30px 100px rgba(0,0,0,0.38),
        inset 0 1px rgba(255,255,255,0.035);
}

/* subtle top energy line */

.warning-panel::before {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    top: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #58e8ff 20%,
            #7b8cff 45%,
            #b16cff 65%,
            #58e8ff 82%,
            transparent 100%
        );

    opacity: 0.85;

    box-shadow:
        0 0 18px rgba(88,232,255,0.35);
}


/* =========================================================
   HEADER
========================================================= */

.warning-panel .panel-heading {
    padding: 28px 28px 22px;

    align-items: center;
}

.warning-panel .section-code {
    color: #58e8ff;

    font-family:
        "IBM Plex Mono",
        "Courier New",
        monospace;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.24em;

    text-shadow:
        0 0 12px rgba(88,232,255,0.4);
}

.warning-panel .panel-heading h2 {
    margin: 7px 0 6px;

    color: #f4f8ff;

    font-family:
        "Space Grotesk",
        Inter,
        sans-serif;

    font-size: 27px;
    font-weight: 700;

    letter-spacing: -0.035em;
}

.warning-panel .panel-heading p {
    color: #71839d;

    font-family:
        "DM Sans",
        Inter,
        sans-serif;

    font-size: 11px;
    line-height: 1.6;
}


/* =========================================================
   LIVE MONITOR CHIP
========================================================= */

.warning-panel .engine-status {

    padding: 9px 14px;

    border:
        1px solid
        rgba(88,232,255,0.28);

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            rgba(88,232,255,0.09),
            rgba(123,105,255,0.08)
        );

    color: #69eaff;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 8px;

    letter-spacing: 0.16em;

    box-shadow:
        0 0 22px rgba(88,232,255,0.08);
}


/* =========================================================
   TOP SUMMARY — THE IMPORTANT PART
========================================================= */

.warning-summary {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;

    padding:
        0 28px 18px;
}


.warning-summary-card {

    position: relative;

    min-height: 128px;

    padding: 18px 18px 16px;

    overflow: hidden;

    border-radius: 17px;

    border:
        1px solid
        rgba(130,160,210,0.16);

    background:
        linear-gradient(
            145deg,
            rgba(18,28,48,0.90),
            rgba(5,10,21,0.92)
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,0.035),
        0 12px 35px rgba(0,0,0,0.18);

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}


.warning-summary-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(88,232,255,0.42);

    box-shadow:
        0 15px 45px rgba(0,0,0,0.3),
        0 0 30px rgba(88,232,255,0.07);
}


/* glowing corner */

.warning-summary-card::after {

    content: "";

    position: absolute;

    width: 95px;
    height: 95px;

    right: -45px;
    bottom: -45px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(88,232,255,0.16),
            transparent 68%
        );
}


/* CARD 1 — CYAN */

.warning-summary-card:nth-child(1) {

    border-color:
        rgba(88,232,255,0.24);

    background:
        linear-gradient(
            145deg,
            rgba(11,39,52,0.92),
            rgba(5,12,22,0.96)
        );
}

.warning-summary-card:nth-child(1)::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background:
        linear-gradient(
            #58e8ff,
            #1bbbd9
        );

    box-shadow:
        0 0 15px rgba(88,232,255,0.7);
}


/* CARD 2 — VIOLET */

.warning-summary-card:nth-child(2) {

    border-color:
        rgba(157,124,255,0.25);

    background:
        linear-gradient(
            145deg,
            rgba(35,25,62,0.92),
            rgba(8,7,20,0.96)
        );
}

.warning-summary-card:nth-child(2)::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background:
        linear-gradient(
            #9d7cff,
            #7458ff
        );

    box-shadow:
        0 0 15px rgba(157,124,255,0.65);
}


/* CARD 3 — AMBER */

.warning-summary-card:nth-child(3) {

    border-color:
        rgba(255,211,106,0.25);

    background:
        linear-gradient(
            145deg,
            rgba(50,39,18,0.88),
            rgba(12,9,5,0.96)
        );
}

.warning-summary-card:nth-child(3)::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background:
        linear-gradient(
            #ffd36a,
            #ff9d42
        );

    box-shadow:
        0 0 15px rgba(255,211,106,0.55);
}


/* CARD 4 — RED */

.warning-summary-card:nth-child(4) {

    border-color:
        rgba(255,92,121,0.25);

    background:
        linear-gradient(
            145deg,
            rgba(52,22,32,0.88),
            rgba(12,6,12,0.96)
        );
}

.warning-summary-card:nth-child(4)::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background:
        linear-gradient(
            #ff5c79,
            #ff315d
        );

    box-shadow:
        0 0 15px rgba(255,92,121,0.55);
}


/* =========================================================
   SUMMARY TEXT
========================================================= */

.warning-summary-card > span {

    display: block;

    color: #71849e;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.warning-summary-card > strong {

    display: block;

    margin-top: 12px;

    color: #f3f8ff;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 34px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: -0.05em;
}


/* individual number colors */

.warning-summary-card:nth-child(1) > strong {

    color: #58e8ff;

    text-shadow:
        0 0 18px rgba(88,232,255,0.28);
}

.warning-summary-card:nth-child(2) > strong {

    color: #b59cff;

    text-shadow:
        0 0 18px rgba(157,124,255,0.25);
}

.warning-summary-card:nth-child(3) > strong {

    color: #ffd36a;

    text-shadow:
        0 0 18px rgba(255,211,106,0.25);
}

.warning-summary-card:nth-child(4) > strong {

    color: #ff718b;

    text-shadow:
        0 0 18px rgba(255,92,121,0.25);
}


.warning-summary-card > small {

    display: block;

    margin-top: 9px;

    color: #71839b;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 9px;

    line-height: 1.4;
}


/* =========================================================
   MAIN WARNING AREA
========================================================= */

.warning-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        320px;

    gap: 18px;

    padding:
        8px 28px 28px;
}


.warning-list {

    display: flex;

    flex-direction: column;

    gap: 10px;
}


/* =========================================================
   WARNING ROWS
========================================================= */

.warning-row {

    position: relative;

    min-height: 92px;

    display: grid;

    grid-template-columns:
        1.15fr
        1fr
        115px;

    align-items: center;

    gap: 22px;

    padding:
        14px 17px;

    overflow: hidden;

    border-radius: 15px;

    border:
        1px solid
        rgba(115,155,210,0.13);

    background:
        linear-gradient(
            100deg,
            rgba(13,22,39,0.88),
            rgba(6,11,22,0.82)
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,0.025);

    transition:
        transform 200ms ease,
        border-color 200ms ease,
        background 200ms ease;
}


.warning-row:hover {

    transform:
        translateX(4px);

    border-color:
        rgba(88,232,255,0.28);

    background:
        linear-gradient(
            100deg,
            rgba(15,30,50,0.95),
            rgba(7,12,25,0.92)
        );
}


/* left color indicator */

.warning-row::before {

    content: "";

    position: absolute;

    left: 0;
    top: 15%;
    bottom: 15%;

    width: 3px;

    border-radius: 0 5px 5px 0;

    background:
        linear-gradient(
            #58e8ff,
            #7194ff
        );

    box-shadow:
        0 0 12px rgba(88,232,255,0.45);
}

.warning-row:nth-child(2)::before {

    background:
        linear-gradient(
            #9d7cff,
            #7194ff
        );

    box-shadow:
        0 0 12px rgba(157,124,255,0.45);
}

.warning-row:nth-child(3)::before {

    background:
        linear-gradient(
            #ffd36a,
            #ff9d42
        );

    box-shadow:
        0 0 12px rgba(255,211,106,0.4);
}

.warning-row:nth-child(4)::before {

    background:
        linear-gradient(
            #57e7ae,
            #58e8ff
        );

    box-shadow:
        0 0 12px rgba(87,231,174,0.4);
}


/* =========================================================
   WARNING IDENTITY
========================================================= */

.stock-identity {

    display: flex;

    align-items: center;

    gap: 12px;
}


.stock-avatar {

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 13px;

    font-weight: 700;

    background:
        rgba(88,232,255,0.07);

    border:
        1px solid
        rgba(88,232,255,0.25);

    color: #58e8ff;

    box-shadow:
        inset 0 0 15px rgba(88,232,255,0.05),
        0 0 15px rgba(88,232,255,0.05);
}


.stock-identity strong {

    display: block;

    color: #dcecff;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.08em;
}


.stock-identity small {

    display: block;

    margin-top: 5px;

    color: #637690;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 9px;
}


/* =========================================================
   HEALTH METER
========================================================= */

.health-meter > span {

    display: block;

    margin-bottom: 8px;

    color: #61758f;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.16em;
}


.meter {

    width: 100%;

    height: 7px;

    overflow: hidden;

    border-radius: 20px;

    background:
        rgba(115,155,210,0.08);

    box-shadow:
        inset 0 1px rgba(255,255,255,0.03);
}


.meter i {

    display: block;

    height: 100%;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #58e8ff 0%,
            #7194ff 45%,
            #9d7cff 100%
        );

    box-shadow:
        0 0 14px rgba(88,232,255,0.4);
}


/* =========================================================
   STATE
========================================================= */

.warning-state {

    justify-self: end;

    padding:
        7px 10px;

    border-radius: 999px;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 0.12em;

    color: #58e8ff;

    background:
        rgba(88,232,255,0.055);

    border:
        1px solid
        rgba(88,232,255,0.16);
}


/* =========================================================
   RADAR
========================================================= */

.radar-visual {

    position: relative;

    min-height: 330px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(157,124,255,0.14);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at center,
            rgba(88,232,255,0.055),
            transparent 48%
        ),
        linear-gradient(
            145deg,
            rgba(14,21,39,0.8),
            rgba(5,8,18,0.9)
        );

    overflow: hidden;
}


.radar-visual::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            rgba(88,232,255,0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(88,232,255,0.025) 1px,
            transparent 1px
        );

    background-size: 28px 28px;

    mask-image:
        radial-gradient(
            circle,
            black,
            transparent 75%
        );
}


.radar-circle {

    width: 205px;
    height: 205px;

    border:
        1px solid
        rgba(88,232,255,0.28);

    background:
        radial-gradient(
            circle,
            rgba(88,232,255,0.08),
            rgba(7,13,25,0.3) 48%,
            transparent 70%
        );

    box-shadow:
        0 0 35px rgba(88,232,255,0.08),
        inset 0 0 35px rgba(88,232,255,0.05);
}


.radar-circle::before {

    border-color:
        rgba(157,124,255,0.18);
}


.radar-circle::after {

    border-color:
        rgba(255,211,106,0.18);
}


.radar-caption {

    margin-top: 18px;
}


.radar-caption span {

    color: #6d7e98;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 7px;

    letter-spacing: 0.2em;
}


.radar-caption strong {

    margin-top: 4px;

    color: #58e8ff;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.16em;

    text-shadow:
        0 0 14px rgba(88,232,255,0.35);
}


/* =========================================================
   BOTTOM STATUS COUNTERS
========================================================= */

.warning-panel .warning-footer,
.warning-panel .warning-stats {

    font-family:
        "IBM Plex Mono",
        monospace;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .warning-summary {

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

    .warning-layout {

        grid-template-columns: 1fr;
    }

    .radar-visual {

        min-height: 280px;
    }
}


@media (max-width: 700px) {

    .warning-panel .panel-heading {

        padding: 22px 18px;
    }

    .warning-summary {

        grid-template-columns: 1fr;

        padding:
            0 18px 15px;
    }

    .warning-layout {

        padding:
            8px 18px 20px;
    }

    .warning-row {

        grid-template-columns: 1fr;

        gap: 12px;
    }

    .warning-state {

        justify-self: start;
    }

    .warning-summary-card > strong {

        font-size: 31px;
    }
}

/* =========================================================
   FUTURE MAP
========================================================= */

.future-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        240px;

    gap: 20px;

    padding:
        25px;
}

.future-horizon {
    display: flex;

    gap: 4px;
}

.future-horizon button {
    min-width: 38px;
    height: 26px;

    border:
        1px solid
        rgba(115, 155, 210, 0.12);

    border-radius: 6px;

    color: #586b84;

    background:
        transparent;

    font-size: 6px;

    font-weight: 700;

    cursor: pointer;
}

.future-horizon button.active {
    color: var(--q-cyan);

    border-color:
        rgba(88, 232, 255, 0.25);

    background:
        rgba(88, 232, 255, 0.035);
}

.wealth-chart {
    position: relative;

    height: 390px;

    overflow: hidden;

    border:
        1px solid
        rgba(115, 155, 210, 0.08);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.012);
}

.chart-grid-lines {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            rgba(115, 155, 210, 0.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(115, 155, 210, 0.04) 1px,
            transparent 1px
        );

    background-size:
        100% 25%,
        20% 100%;
}

.future-svg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}

.future-area {
    fill:
        url(#futureGlow);

    opacity: 0.07;
}

.future-line {
    fill: none;

    stroke:
        url(#futureGlow);

    stroke-width: 3;

    filter:
        drop-shadow(
            0 0 7px
            rgba(88, 232, 255, 0.45)
        );
}

.future-base {
    fill: none;

    stroke:
        rgba(115, 155, 210, 0.5);

    stroke-width: 2;

    stroke-dasharray: 7 7;
}

.future-bear {
    fill: none;

    stroke:
        rgba(255, 92, 121, 0.55);

    stroke-width: 2;

    stroke-dasharray: 4 8;
}

.chart-axis {
    position: absolute;

    z-index: 3;

    display: flex;

    color: #465871;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 0.12em;
}

.axis-y {
    left: 12px;
    top: 25px;
    bottom: 25px;

    flex-direction: column;

    justify-content: space-between;
}

.axis-x {
    left: 55px;
    right: 20px;
    bottom: 10px;

    justify-content: space-between;
}

.scenario-label {
    position: absolute;

    z-index: 5;

    padding:
        5px 7px;

    border-radius: 5px;

    background:
        rgba(3, 8, 15, 0.7);

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 0.1em;
}

.scenario-label.bull {
    top: 16%;

    right: 10%;

    color: var(--q-cyan);
}

.scenario-label.base {
    top: 47%;

    right: 18%;

    color: #71839c;
}

.scenario-label.bear {
    bottom: 17%;

    right: 9%;

    color: var(--q-red);
}


/* =========================================================
   SCENARIO PANEL
========================================================= */

.scenario-panel {
    padding:
        18px;

    border:
        1px solid
        rgba(115, 155, 210, 0.09);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.012);
}

.scenario-title {
    color: #52647c;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 0.18em;
}

.scenario-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        15px 0;

    border-bottom:
        1px solid
        rgba(115, 155, 210, 0.07);
}

.scenario-row span {
    color: #64758d;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.12em;
}

.scenario-row strong {
    color: #b5c7dc;

    font-family: var(--q-display);

    font-size: 16px;
}

.scenario-divider {
    height: 1px;

    margin:
        18px 0;

    background:
        rgba(115, 155, 210, 0.08);
}

.confidence-ring {
    width: 100px;
    height: 100px;

    display: grid;

    place-items: center;

    margin:
        18px auto
        5px;

    border:
        1px solid
        rgba(88, 232, 255, 0.22);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(88, 232, 255, 0.08),
            transparent 67%
        );

    box-shadow:
        0 0 30px
        rgba(88, 232, 255, 0.06);
}

.confidence-ring span {
    color: var(--q-cyan);

    font-family: var(--q-display);

    font-size: 19px;
}


/* =========================================================
   CAPITAL REALLOCATION
========================================================= */

.capital-flow {
    display: grid;

    grid-template-columns:
        1fr
        55px
        1fr
        55px
        1fr;

    align-items: center;

    gap: 12px;

    padding:
        25px;
}

.capital-column {
    min-width: 0;
}

.flow-label {
    display: block;

    margin-bottom: 8px;

    color: #53657d;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 0.16em;
}

.flow-card,
.outcome-card,
.replacement-card {
    min-height: 115px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        16px;

    border:
        1px solid
        rgba(115, 155, 210, 0.1);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.014);
}

.flow-card.weak {
    border-color:
        rgba(255, 92, 121, 0.12);
}

.flow-card span,
.outcome-card span {
    color: #55677f;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 0.13em;
}

.flow-card strong,
.outcome-card strong {
    margin:
        8px 0;

    color: #9aacbf;

    font-family: var(--q-display);

    font-size: 17px;
}

.flow-card small,
.outcome-card small,
.replacement-card small {
    color: #4d5f77;

    font-size: 7px;

    line-height: 1.5;
}

.flow-arrow {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;
}

.flow-arrow span {
    color: #4b5e77;

    font-size: 5px;

    font-weight: 700;

    letter-spacing: 0.12em;
}

.flow-arrow strong {
    color: var(--q-cyan);

    font-size: 20px;

    font-weight: 400;

    text-shadow:
        0 0 12px
        rgba(88, 232, 255, 0.5);
}

.replacement-stack {
    display: flex;

    flex-direction: column;

    gap: 7px;
}

.replacement-card {
    min-height: 54px;

    display: grid;

    grid-template-columns:
        22px
        1fr
        1.5fr;

    align-items: center;

    gap: 7px;

    padding:
        9px 11px;
}

.replacement-card span {
    color: var(--q-violet);

    font-size: 6px;
}

.replacement-card strong {
    color: #9aacc2;

    font-family: var(--q-display);

    font-size: 11px;
}

.replacement-card small {
    font-size: 6px;
}


/* =========================================================
   INTELLIGENCE GRID
========================================================= */

.intelligence-grid {
    display: grid;

    grid-template-columns:
        1.2fr
        0.8fr;

    gap: 12px;

    margin-top: 12px;
}

.intelligence-panel {
    min-height: 285px;
}

.quantum-feed {
    padding:
        10px 24px 20px;
}

.feed-event {
    padding:
        14px 0;

    border-bottom:
        1px solid
        rgba(115, 155, 210, 0.07);
}

.feed-event:last-child {
    border-bottom: 0;
}

.feed-event span {
    color: var(--q-cyan);

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 0.17em;
}

.feed-event p {
    margin:
        6px 0 0;

    color: #71839c;

    font-size: 9px;

    line-height: 1.6;
}


/* =========================================================
   CORE STATUS
========================================================= */

.core-status-list {
    padding:
        12px 24px 22px;
}

.core-status-list > div {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        13px 0;

    border-bottom:
        1px solid
        rgba(115, 155, 210, 0.07);
}

.core-status-list > div:last-child {
    border-bottom: 0;
}

.core-status-list span {
    color: #65768e;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.11em;
}

.core-status-list strong {
    color: #50627b;

    font-size: 6px;

    letter-spacing: 0.13em;
}

.core-status-list > div:first-child strong {
    color: var(--q-cyan);
}


/* =========================================================
   FOOTER
========================================================= */

.quantum-footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 22px;

    padding:
        18px 5px;

    border-top:
        1px solid
        rgba(115, 155, 210, 0.08);
}

.quantum-footer > div:first-child {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.quantum-footer span {
    color: #667890;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.16em;
}

.quantum-footer small {
    color: #3e4e64;

    font-size: 6px;
}

.footer-system {
    display: flex;

    gap: 8px;

    color: #405168;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes qSpin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes statusPulse {

    0%,
    100% {
        opacity: 0.45;
        transform: scale(0.85);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

@keyframes orbitA {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes orbitB {

    from {
        transform: rotate(54deg);
    }

    to {
        transform: rotate(414deg);
    }
}

@keyframes orbitC {

    from {
        transform: rotate(-35deg);
    }

    to {
        transform: rotate(325deg);
    }
}

@keyframes radarSweep {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1250px) {

    .quantum-nav-links {
        display: none;
    }

    .command-center {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(370px, 0.8fr);
    }

    .center-copy {
        padding-left: 42px;
    }

    .warning-layout {
        grid-template-columns:
            1fr
            230px;
    }

    .capital-flow {
        grid-template-columns:
            1fr
            35px
            1fr
            35px
            1fr;
    }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 950px) {

    .quantum-main {
        width: min(100% - 28px, 900px);
    }

    .quantum-nav {
        padding:
            0 18px;
    }

    .command-strip {
        padding:
            10px 18px;
    }

    .command-center {
        grid-template-columns:
            1fr;

        min-height: auto;
    }

    .center-copy {
        padding:
            42px 34px
            15px;
    }

    .quantum-core-stage {
        min-height: 430px;
    }

    .quantum-metrics {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .warning-layout,
    .future-layout {
        grid-template-columns:
            1fr;
    }

    .radar-visual {
        min-height: 220px;
    }

    .capital-flow {
        grid-template-columns:
            1fr;

        gap: 15px;
    }

    .flow-arrow {
        transform:
            rotate(90deg);
    }

    .intelligence-grid {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    body::before {
        background-size:
            45px 45px;
    }

    .quantum-nav {
        height: 62px;

        padding:
            0 12px;
    }

    .nav-brand {
        min-width: auto;
    }

    .quantum-symbol {
        width: 34px;
        height: 34px;
    }

    .brand-mini {
        font-size: 6px;
    }

    .brand-copy strong {
        font-size: 12px;
    }

    .nav-system {
        min-width: auto;

        gap: 9px;
    }

    .system-time {
        display: none;
    }

    .system-status span:nth-child(2) {
        display: none;
    }

    .command-strip {
        min-height: auto;

        flex-direction: column;

        align-items: stretch;

        gap: 10px;

        padding:
            10px 12px;
    }

    .command-context {
        justify-content: center;
    }

    .command-actions {
        width: 100%;
    }

    .command-btn {
        flex: 1;
    }

    .quantum-main {
        width:
            calc(100% - 20px);

        padding-top:
            10px;
    }

    .command-center {
        border-radius:
            18px;
    }

    .center-copy {
        padding:
            31px 20px
            8px;
    }

    .micro-label {
        font-size: 6px;
    }

    .center-copy h1 {
        margin:
            14px 0
            17px;

        font-size:
            clamp(34px, 10vw, 47px);
    }

    .center-copy > p {
        font-size: 10px;
    }

    .center-actions {
        flex-direction: column;

        align-items: stretch;
    }

    .big-primary,
    .big-secondary {
        width: 100%;
    }

    .quantum-core-stage {
        min-height: 340px;
    }

    .core-orbit.orbit-1 {
        width: 235px;
        height: 235px;
    }

    .core-orbit.orbit-2 {
        width: 180px;
        height: 270px;
    }

    .core-orbit.orbit-3 {
        width: 290px;
        height: 140px;
    }

    .core-orbit.orbit-4 {
        width: 310px;
        height: 310px;
    }

    .quantum-core {
        width: 145px;
        height: 145px;
    }

    .core-inner strong {
        font-size: 43px;
    }

    .floating-data {
        min-width: 58px;

        padding:
            6px 7px;
    }

    .floating-data span {
        font-size: 5px;
    }

    .floating-data strong {
        font-size: 9px;
    }

    .data-risk {
        top: 12%;
        right: 5%;
    }

    .data-growth {
        left: 4%;
        bottom: 13%;
    }

    .data-thesis {
        right: 0;
        top: 48%;
    }

    .data-regime {
        left: 9%;
        top: 9%;
    }

    .quantum-metrics {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 7px;
    }

    .metric {
        min-height: 116px;

        padding:
            15px;
    }

    .metric > strong {
        font-size: 22px;
    }

    .metric-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 4px;
    }

    .panel-heading {
        padding:
            18px 16px 0;
    }

    .panel-heading h2 {
        font-size: 17px;
    }

    .panel-heading p {
        font-size: 8px;
    }

    .universe-stage {
        height: 340px;
    }

    .universe-rings {
        width: 300px;
        height: 300px;
    }

    .universe-rings span:nth-child(2) {
        inset: 45px;
    }

    .universe-rings span:nth-child(3) {
        inset: 95px;
    }

    .universe-center {
        width: 85px;
        height: 85px;
    }

    .universe-center strong {
        font-size: 11px;
    }

    .stock-node {
        padding:
            5px 6px;
    }

    .stock-node label {
        font-size: 5px;
    }

    .node-a {
        left: 7%;
        top: 20%;
    }

    .node-b {
        left: 12%;
        bottom: 18%;
    }

    .node-c {
        right: 7%;
        top: 19%;
    }

    .node-d {
        right: 12%;
        bottom: 17%;
    }

    .node-e {
        left: 38%;
        top: 4%;
    }

    .node-f {
        right: 2%;
        top: 49%;
    }

    .warning-layout,
    .future-layout {
        padding:
            15px;
    }

    .warning-row {
        grid-template-columns:
            1fr;

        gap: 10px;

        padding:
            13px;
    }

    .warning-state {
        justify-self: start;
    }

    .radar-circle {
        width: 150px;
        height: 150px;
    }

    .wealth-chart {
        height: 290px;
    }

    .scenario-panel {
        min-height: 250px;
    }

    .capital-flow {
        padding:
            18px;
    }

    .quantum-footer {
        flex-direction: column;

        align-items: flex-start;

        gap: 12px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .brand-copy strong {
        font-size: 10px;
    }

    .command-label {
        font-size: 6px;
    }

    .command-mode {
        display: none;
    }

    .center-copy h1 {
        font-size: 32px;
    }

    .quantum-metrics {
        grid-template-columns:
            1fr 1fr;
    }

    .metric {
        padding:
            12px;
    }

    .metric > strong {
        font-size: 19px;
    }

    .floating-data {
        transform:
            scale(0.9);
    }

}

/* =========================================================
   QUANTUM TYPOGRAPHY — LARGE / PREMIUM
========================================================= */

/* TOP NAV */
.nav-link {
    font-size: 13px !important;
}

.brand-mini {
    font-size: 10px !important;
}

.brand-copy strong {
    font-size: 21px !important;
}

.system-time span {
    font-size: 9px !important;
}

.system-time strong {
    font-size: 13px !important;
}

.system-status,
.system-status b {
    font-size: 9px !important;
}


/* COMMAND BAR */
.command-label,
.command-mode {
    font-size: 10px !important;
}

.command-btn {
    font-size: 11px !important;
}

.btn-icon {
    font-size: 17px !important;
}


/* HERO */
.micro-label {
    font-size: 11px !important;
}

.center-copy h1 {
    font-size: clamp(48px, 5.5vw, 82px) !important;
}

.center-copy > p {
    max-width: 720px !important;

    font-size: 16px !important;

    line-height: 1.8 !important;
}

.big-primary span {
    font-size: 12px !important;
}

.big-primary small {
    font-size: 9px !important;
}

.big-secondary {
    font-size: 11px !important;
}

.analysis-state {
    font-size: 10px !important;
}

.analysis-state strong {
    font-size: 11px !important;
}


/* QUANTUM CORE */
.core-word {
    font-size: 10px !important;
}

.core-inner strong {
    font-size: 62px !important;
}

.core-sub {
    font-size: 9px !important;
}

.floating-data span {
    font-size: 9px !important;
}

.floating-data strong {
    font-size: 16px !important;
}


/* METRICS */
.metric-top span {
    font-size: 11px !important;
}

.metric-top i {
    font-size: 9px !important;
}

.metric > strong {
    font-size: 36px !important;
}

.metric-bottom span {
    font-size: 9px !important;
}

.metric-bottom b {
    font-size: 10px !important;
}


/* SECTION HEADINGS */
.section-code {
    font-size: 10px !important;
}

.panel-heading h2 {
    font-size: 26px !important;
}

.panel-heading p {
    font-size: 13px !important;

    line-height: 1.7 !important;
}

.panel-control span {
    font-size: 9px !important;
}

.panel-control strong {
    font-size: 24px !important;
}

.engine-status,
.model-chip {
    font-size: 9px !important;
}


/* PORTFOLIO UNIVERSE */
.stock-node label {
    font-size: 10px !important;
}

.universe-center div {
    font-size: 9px !important;
}

.universe-center strong {
    font-size: 18px !important;
}


/* EARLY WARNING */
.stock-identity strong {
    font-size: 12px !important;
}

.stock-identity small {
    font-size: 10px !important;
}

.health-meter > span {
    font-size: 9px !important;
}

.warning-state {
    font-size: 9px !important;
}

.radar-caption span {
    font-size: 9px !important;
}

.radar-caption strong {
    font-size: 11px !important;
}


/* FUTURE WEALTH */
.future-horizon button {
    font-size: 10px !important;
}

.chart-axis {
    font-size: 9px !important;
}

.scenario-label {
    font-size: 9px !important;
}

.scenario-title {
    font-size: 9px !important;
}

.scenario-row span {
    font-size: 11px !important;
}

.scenario-row strong {
    font-size: 20px !important;
}


/* CAPITAL ENGINE */
.flow-label {
    font-size: 10px !important;
}

.flow-card span,
.outcome-card span {
    font-size: 10px !important;
}

.flow-card strong,
.outcome-card strong {
    font-size: 22px !important;
}

.flow-card small,
.outcome-card small,
.replacement-card small {
    font-size: 10px !important;
}

.flow-arrow span {
    font-size: 8px !important;
}

.replacement-card span {
    font-size: 10px !important;
}

.replacement-card strong {
    font-size: 15px !important;
}


/* LIVE INTELLIGENCE */
.feed-event span {
    font-size: 10px !important;
}

.feed-event p {
    font-size: 13px !important;

    line-height: 1.65 !important;
}

.core-status-list span {
    font-size: 11px !important;
}

.core-status-list strong {
    font-size: 10px !important;
}


/* FOOTER */
.quantum-footer span {
    font-size: 10px !important;
}

.quantum-footer small {
    font-size: 9px !important;
}

.footer-system {
    font-size: 9px !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .nav-link {
        font-size: 11px !important;
    }

    .command-label,
    .command-mode {
        font-size: 8px !important;
    }

    .center-copy h1 {
        font-size: 38px !important;
    }

    .center-copy > p {
        font-size: 14px !important;
    }

    .panel-heading h2 {
        font-size: 22px !important;
    }

    .panel-heading p {
        font-size: 11px !important;
    }

    .metric > strong {
        font-size: 27px !important;
    }

    .metric-top span {
        font-size: 9px !important;
    }

    .stock-identity strong {
        font-size: 10px !important;
    }

    .stock-identity small {
        font-size: 9px !important;
    }

    .feed-event p {
        font-size: 11px !important;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }

}

/* =========================================================
   QUANTUM LOGIN GATE
========================================================= */

.quantum-login-overlay {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 24px;

    background:
        rgba(1, 4, 9, 0.72);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}


.quantum-login-overlay.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


.quantum-login-modal {
    position: relative;

    width: min(
        430px,
        100%
    );

    padding: 38px 34px 30px;

    border:
        1px solid
        rgba(115, 155, 210, 0.22);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(8, 17, 30, 0.98),
            rgba(2, 7, 14, 0.98)
        );

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, 0.65),

        0 0 45px
        rgba(0, 210, 255, 0.08);

    transform:
        translateY(18px)
        scale(0.97);

    transition:
        transform 0.35s ease;
}


.quantum-login-overlay.active
.quantum-login-modal {

    transform:
        translateY(0)
        scale(1);
}


.quantum-login-close {
    position: absolute;

    top: 13px;

    right: 15px;

    width: 30px;

    height: 30px;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.04);

    color:
        #7387a1;

    font-size: 22px;

    line-height: 1;

    cursor: pointer;

    transition:
        0.2s ease;
}


.quantum-login-close:hover {

    color:
        #ffffff;

    background:
        rgba(255, 255, 255, 0.08);
}


.quantum-login-brand {

    display: flex;

    flex-direction: column;

    gap: 3px;

    margin-bottom: 28px;
}


.quantum-login-brand span {

    color:
        #657992;

    font-size: 9px;

    font-weight: 700;

    letter-spacing:
        0.22em;
}


.quantum-login-brand strong {

    color:
        #ffffff;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 26px;

    letter-spacing:
        0.08em;
}


.quantum-login-heading span {

    display: block;

    margin-bottom: 7px;

    color:
        var(--q-cyan);

    font-size: 9px;

    font-weight: 700;

    letter-spacing:
        0.18em;
}


.quantum-login-heading h2 {

    margin: 0;

    color:
        #ffffff;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 21px;

    letter-spacing:
        0.03em;
}


.quantum-login-heading p {

    margin:
        9px 0 25px;

    color:
        #6f829b;

    font-size: 12px;

    line-height: 1.6;
}


.quantum-login-field {

    margin-bottom: 17px;
}


.quantum-login-field label {

    display: block;

    margin-bottom: 7px;

    color:
        #70849d;

    font-size: 9px;

    font-weight: 700;

    letter-spacing:
        0.14em;
}


.quantum-login-field input {

    width: 100%;

    box-sizing: border-box;

    padding:
        13px 14px;

    border:
        1px solid
        rgba(115, 155, 210, 0.16);

    border-radius: 9px;

    outline: none;

    background:
        rgba(255, 255, 255, 0.035);

    color:
        #ffffff;

    font-family:
        inherit;

    font-size: 13px;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}


.quantum-login-field input::placeholder {

    color:
        #43556b;
}


.quantum-login-field input:focus {

    border-color:
        rgba(0, 210, 255, 0.55);

    background:
        rgba(0, 210, 255, 0.035);
}


.quantum-login-submit {

    width: 100%;

    margin-top: 6px;

    padding:
        13px 16px;

    border: 0;

    border-radius: 9px;

    background:
        var(--q-cyan);

    color:
        #031018;

    font-size: 10px;

    font-weight: 800;

    letter-spacing:
        0.14em;

    cursor: pointer;

    transition:
        0.2s ease;
}


.quantum-login-submit:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 25px
        rgba(0, 210, 255, 0.18);
}


.quantum-login-register {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 22px;

    color:
        #52657c;

    font-size: 10px;
}


.quantum-login-register button {

    padding: 0;

    border: 0;

    background: transparent;

    color:
        var(--q-cyan);

    font-size: 10px;

    font-weight: 700;

    cursor: pointer;
}


.quantum-login-message {

    min-height: 16px;

    margin-top: 14px;

    text-align: center;

    color:
        #7387a1;

    font-size: 10px;
}

/* =========================================================
   QUANTUM REGISTER PANEL
========================================================= */

.quantum-register-panel {
    display: none;
}


.quantum-register-panel.active {
    display: block;
}


.quantum-register-title {
    margin-bottom: 6px;

    color: #ffffff;

    font-size: 20px;

    font-weight: 700;

    letter-spacing: 0.04em;
}


.quantum-register-subtitle {
    margin: 0 0 22px;

    color: #6f829b;

    font-size: 11px;

    line-height: 1.5;
}


.quantum-back-login {
    width: 100%;

    margin-top: 14px;

    padding: 10px;

    border: 1px solid
        rgba(115, 155, 210, 0.16);

    border-radius: 8px;

    background: transparent;

    color: #7387a1;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.12em;

    cursor: pointer;
}


.quantum-back-login:hover {
    color: var(--q-cyan);

    border-color:
        rgba(0, 210, 255, 0.35);
}

/* ==========================================================
   QUANTUM EARLY WARNING RADAR — FINAL VISUAL OVERRIDE
   ========================================================== */

.warning-panel .warning-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 22px !important;
    align-items: stretch !important;
}


/* ==========================================================
   RIGHT RADAR AREA
   ========================================================== */

.warning-panel .radar-visual {
    position: relative !important;

    min-height: 430px !important;

    padding: 28px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    border: 1px solid rgba(72, 219, 255, 0.18) !important;

    border-radius: 22px !important;

    background:
        radial-gradient(
            circle at 50% 32%,
            rgba(35, 180, 255, 0.10),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(8, 17, 34, 0.96),
            rgba(5, 9, 20, 0.98)
        ) !important;

    box-shadow:
        inset 0 0 50px rgba(0, 180, 255, 0.035),
        0 0 35px rgba(0, 0, 0, 0.25) !important;

    overflow: hidden !important;
}


/* ==========================================================
   RADAR CIRCLE
   ========================================================== */

.warning-panel .radar-circle {
    position: relative !important;

    width: 250px !important;
    height: 250px !important;

    min-width: 250px !important;
    min-height: 250px !important;

    margin: 4px auto 0 !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle at center,
            rgba(35, 210, 255, 0.13) 0%,
            rgba(25, 80, 130, 0.07) 28%,
            rgba(5, 12, 25, 0.25) 58%,
            rgba(2, 6, 15, 0.8) 100%
        ) !important;

    border:
        1px solid rgba(74, 222, 255, 0.42) !important;

    box-shadow:
        0 0 20px rgba(0, 200, 255, 0.10),
        inset 0 0 45px rgba(0, 200, 255, 0.08) !important;

    overflow: hidden !important;
}


/* ==========================================================
   RADAR GRID
   ========================================================== */

.warning-panel .radar-circle::before {
    content: "" !important;

    position: absolute !important;

    inset: 24px !important;

    border-radius: 50% !important;

    border:
        1px solid rgba(71, 215, 255, 0.18) !important;

    box-shadow:
        0 0 0 42px rgba(70, 210, 255, 0.025),
        0 0 0 84px rgba(70, 210, 255, 0.018) !important;

    pointer-events: none !important;
}


.warning-panel .radar-circle::after {
    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 8px !important;
    height: 8px !important;

    transform: translate(-50%, -50%) !important;

    border-radius: 50% !important;

    background: #55e8ff !important;

    box-shadow:
        0 0 8px #55e8ff,
        0 0 22px rgba(85, 232, 255, 0.75) !important;

    z-index: 8 !important;
}


/* ==========================================================
   RADAR RINGS
   ========================================================== */

.warning-panel .radar-ring {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    border-radius: 50% !important;

    pointer-events: none !important;
}


.warning-panel .radar-ring.ring-a {
    width: 70px !important;
    height: 70px !important;

    border:
        1px solid rgba(65, 225, 255, 0.34) !important;
}


.warning-panel .radar-ring.ring-b {
    width: 140px !important;
    height: 140px !important;

    border:
        1px solid rgba(92, 168, 255, 0.24) !important;
}


.warning-panel .radar-ring.ring-c {
    width: 210px !important;
    height: 210px !important;

    border:
        1px solid rgba(153, 104, 255, 0.18) !important;
}


/* ==========================================================
   CROSS HAIR
   ========================================================== */

.warning-panel .radar-cross {
    position: absolute !important;

    background: rgba(68, 218, 255, 0.12) !important;

    pointer-events: none !important;
}


.warning-panel .radar-cross.horizontal {
    left: 0 !important;
    right: 0 !important;

    top: 50% !important;

    height: 1px !important;

    transform: translateY(-50%) !important;
}


.warning-panel .radar-cross.vertical {
    top: 0 !important;
    bottom: 0 !important;

    left: 50% !important;

    width: 1px !important;

    transform: translateX(-50%) !important;
}


/* ==========================================================
   RADAR SWEEP
   ========================================================== */

.warning-panel .radar-sweep {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 50% !important;
    height: 50% !important;

    transform-origin: 0 0 !important;

    background:
        conic-gradient(
            from 0deg,
            rgba(67, 226, 255, 0.00),
            rgba(67, 226, 255, 0.20),
            rgba(67, 226, 255, 0.00)
        ) !important;

    clip-path: polygon(
        0 0,
        100% 0,
        0 100%
    ) !important;

    animation:
        quantumRadarSweep 4s linear infinite !important;

    z-index: 2 !important;

    pointer-events: none !important;
}


@keyframes quantumRadarSweep {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* ==========================================================
   RADAR POINTS
   ========================================================== */

.warning-panel .radar-point {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 7px !important;
    height: 7px !important;

    margin:
        -3.5px 0 0 -3.5px !important;

    border-radius: 50% !important;

    z-index: 7 !important;

    pointer-events: none !important;
}


.warning-panel .radar-point.p1 {
    background: #45e7ff !important;

    box-shadow:
        0 0 7px #45e7ff,
        0 0 18px rgba(69, 231, 255, 0.9) !important;
}


.warning-panel .radar-point.p2 {
    background: #ffc94d !important;

    box-shadow:
        0 0 7px #ffc94d,
        0 0 18px rgba(255, 201, 77, 0.9) !important;
}


.warning-panel .radar-point.p3 {
    background: #ff4f81 !important;

    box-shadow:
        0 0 7px #ff4f81,
        0 0 18px rgba(255, 79, 129, 0.9) !important;
}


/* ==========================================================
   RADAR CORE
   ========================================================== */

.warning-panel .radar-core {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    transform:
        translate(-50%, -50%) !important;

    width: 108px !important;
    height: 108px !important;

    border-radius: 50% !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    background:
        radial-gradient(
            circle,
            rgba(20, 60, 95, 0.95),
            rgba(4, 12, 25, 0.98)
        ) !important;

    border:
        1px solid rgba(69, 224, 255, 0.30) !important;

    box-shadow:
        0 0 25px rgba(48, 211, 255, 0.12),
        inset 0 0 22px rgba(70, 180, 255, 0.08) !important;

    z-index: 6 !important;
}


.warning-panel .radar-core-label {
    display: block !important;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        sans-serif !important;

    font-size: 8px !important;

    font-weight: 700 !important;

    letter-spacing: 2px !important;

    color: #7592ad !important;
}


.warning-panel .radar-score {
    display: block !important;

    margin: 4px 0 !important;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        sans-serif !important;

    font-size: 30px !important;

    line-height: 1 !important;

    font-weight: 800 !important;

    letter-spacing: -1px !important;

    color: #5ce9ff !important;

    text-shadow:
        0 0 15px rgba(92, 233, 255, 0.45) !important;
}


.warning-panel .radar-core-subtitle {
    display: block !important;

    font-size: 7px !important;

    font-weight: 700 !important;

    letter-spacing: 1.7px !important;

    color: #71869f !important;
}


/* ==========================================================
   RADAR CAPTION
   ========================================================== */

.warning-panel .radar-caption {
    width: 100% !important;

    margin-top: 18px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    gap: 7px !important;

    text-align: center !important;
}


.warning-panel .radar-caption-label {
    display: block !important;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        sans-serif !important;

    font-size: 8px !important;

    font-weight: 700 !important;

    letter-spacing: 2px !important;

    color: #647c96 !important;
}


.warning-panel .radar-state {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-width: 105px !important;

    padding: 7px 14px !important;

    border-radius: 999px !important;

    border:
        1px solid rgba(69, 229, 255, 0.30) !important;

    background:
        rgba(34, 206, 255, 0.07) !important;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        sans-serif !important;

    font-size: 9px !important;

    font-weight: 800 !important;

    letter-spacing: 1.4px !important;

    color: #54e6ff !important;

    text-shadow:
        0 0 10px rgba(84, 230, 255, 0.35) !important;
}


/* ==========================================================
   QUANTUM OBSERVATION
   ========================================================== */

.warning-panel .warning-insight {
    width: 100% !important;

    margin-top: 20px !important;

    padding:
        18px 18px 17px !important;

    box-sizing: border-box !important;

    border-radius: 15px !important;

    border:
        1px solid rgba(130, 105, 255, 0.20) !important;

    background:
        linear-gradient(
            135deg,
            rgba(80, 65, 170, 0.10),
            rgba(22, 180, 220, 0.045)
        ) !important;

    box-shadow:
        inset 0 0 30px rgba(90, 90, 255, 0.025) !important;
}


.warning-panel .warning-insight-label {
    display: block !important;

    margin-bottom: 9px !important;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        sans-serif !important;

    font-size: 9px !important;

    font-weight: 800 !important;

    letter-spacing: 1.7px !important;

    color: #b28cff !important;
}


.warning-panel .warning-insight p {
    display: block !important;

    margin: 0 !important;

    max-width: 100% !important;

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size: 13px !important;

    line-height: 1.55 !important;

    font-weight: 500 !important;

    color: #aebed1 !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1100px) {

    .warning-panel .warning-layout {
        grid-template-columns: 1fr !important;
    }

    .warning-panel .radar-visual {
        min-height: 390px !important;
    }

}


@media (max-width: 700px) {

    .warning-panel .radar-circle {
        width: 220px !important;
        height: 220px !important;
        min-width: 220px !important;
        min-height: 220px !important;
    }

    .warning-panel .radar-ring.ring-c {
        width: 185px !important;
        height: 185px !important;
    }

}

/* =========================================================
   FUTURE WEALTH MAP — PREMIUM READABILITY OVERRIDE
   Paste at the VERY END of quantum.css
========================================================= */

.future-map-panel {
    padding: 28px 28px 30px;
}

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.future-map-panel .section-code {
    font-size: 12px;
    letter-spacing: 2.4px;
    font-weight: 700;
}

.future-map-panel .panel-heading h2 {
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -0.7px;
    margin-top: 8px;
}

.future-map-panel .panel-heading p {
    font-size: 15px;
    line-height: 1.6;
    margin-top: 9px;
}

/* ---------------------------------------------------------
   HORIZON BUTTONS
--------------------------------------------------------- */

.future-horizon {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px;
    border: 1px solid rgba(100, 180, 255, 0.16);
    border-radius: 13px;
    background: rgba(7, 14, 27, 0.82);
}

.future-horizon button {
    min-width: 52px;
    height: 36px;

    padding: 0 13px;

    border: 1px solid rgba(100, 180, 255, 0.12);
    border-radius: 9px;

    background: rgba(10, 18, 32, 0.9);

    color: #71839d;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;

    cursor: pointer;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.future-horizon button:hover {
    color: #ffffff;
    border-color: rgba(83, 220, 255, 0.5);
    transform: translateY(-1px);
}

.future-horizon button.active {
    color: #5ee8ff;

    border-color: rgba(69, 222, 255, 0.55);

    background:
        linear-gradient(
            135deg,
            rgba(40, 180, 220, 0.15),
            rgba(111, 92, 255, 0.12)
        );

    box-shadow:
        0 0 18px rgba(57, 210, 255, 0.12);
}

/* ---------------------------------------------------------
   MAIN FUTURE LAYOUT
--------------------------------------------------------- */

.future-layout {
    gap: 22px;
}

/* ---------------------------------------------------------
   CHART
--------------------------------------------------------- */

.wealth-chart {
    min-height: 440px;
}

/* Axis labels */

.chart-axis span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

/* X-axis years */

.axis-x span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

/* ---------------------------------------------------------
   CORRIDOR LABELS
--------------------------------------------------------- */

.wealth-chart .corridor-label,
.wealth-chart .upside-label,
.wealth-chart .base-label,
.wealth-chart .downside-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

/* ---------------------------------------------------------
   SCENARIO ENGINE
--------------------------------------------------------- */

.scenario-panel {
    padding: 22px 20px;

    min-width: 265px;

    border-radius: 17px;
}

/* Scenario headings */

.scenario-title {
    display: block;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;

    line-height: 1.4;
}

/* Scenario rows */

.scenario-row {
    min-height: 68px;

    padding: 0 15px;

    border-radius: 13px;
}

.scenario-row > span {
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.4px;
}

.scenario-row strong {
    font-size: 20px;
    font-weight: 800;

    letter-spacing: -0.3px;
}

/* ---------------------------------------------------------
   EXPECTED OUTCOME
--------------------------------------------------------- */

.scenario-expected {
    padding: 10px 0 5px;
}

.scenario-expected strong {
    display: block;

    font-size: 29px;
    line-height: 1.2;

    font-weight: 850;

    letter-spacing: -0.8px;
}

.scenario-expected small {
    display: block;

    margin-top: 7px;

    font-size: 11px;
    line-height: 1.5;

    color: rgba(145, 163, 190, 0.78);
}

/* ---------------------------------------------------------
   CONFIDENCE
--------------------------------------------------------- */

.confidence-ring {
    width: 108px;
    height: 108px;

    margin: 18px auto;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
}

.confidence-ring span {
    font-size: 23px;
    font-weight: 850;

    letter-spacing: -0.4px;
}

/* ---------------------------------------------------------
   SCENARIO STATUS
--------------------------------------------------------- */

.scenario-status {
    margin-top: 14px;

    padding-top: 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-top: 1px solid rgba(120, 160, 200, 0.12);
}

.scenario-status span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.scenario-status strong {
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 1px;
}

/* ---------------------------------------------------------
   DIVIDERS
--------------------------------------------------------- */

.scenario-divider {
    margin: 18px 0;
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 1100px) {

    .future-map-panel .panel-heading h2 {
        font-size: 26px;
    }

    .future-layout {
        grid-template-columns: 1fr;
    }

    .scenario-panel {
        width: 100%;
    }

}


@media (max-width: 700px) {

    .future-map-panel {
        padding: 20px 16px;
    }

    .future-map-panel .panel-heading h2 {
        font-size: 23px;
    }

    .future-map-panel .panel-heading p {
        font-size: 14px;
    }

    .wealth-chart {
        min-height: 350px;
    }

    .scenario-row strong {
        font-size: 18px;
    }

    .scenario-expected strong {
        font-size: 25px;
    }

}

/* ==========================================================
   QUANTUM — CAPITAL REALLOCATION VISUAL OVERRIDE
   Typography / Color Enhancement Only
   ========================================================== */

/* ----------------------------------------------------------
   SECTION TITLE
   ---------------------------------------------------------- */

.capital-reallocation h2,
.capital-reallocation .section-title,
#capitalReallocationEngine h2,
#capitalReallocationEngine .section-title {
    font-size: 32px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    background: linear-gradient(
        90deg,
        #38e8ff 0%,
        #6c9cff 45%,
        #c77dff 100%
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ----------------------------------------------------------
   SECTION SUBTITLE
   ---------------------------------------------------------- */

.capital-reallocation > p,
#capitalReallocationEngine > p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #8da3bd !important;
}


/* ==========================================================
   COLUMN HEADINGS
   ========================================================== */

.capital-reallocation .column-title,
.capital-reallocation .field-label,
.capital-reallocation .panel-label,
#capitalReallocationEngine .column-title,
#capitalReallocationEngine .field-label,
#capitalReallocationEngine .panel-label {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
}


/* WEAK EQUITY */

.capital-reallocation .weak-equity .field-label,
#capitalReallocationEngine .weak-equity .field-label {
    color: #ff6478 !important;
}


/* REPLACEMENT */

.capital-reallocation .replacement-universe .field-label,
#capitalReallocationEngine .replacement-universe .field-label {
    color: #43d9ff !important;
}


/* FUTURE OUTCOME */

.capital-reallocation .future-outcome .field-label,
#capitalReallocationEngine .future-outcome .field-label {
    color: #55f5a7 !important;
}


/* ==========================================================
   ADANIPORTS — KEEP DATA SAME, MAKE IT PROMINENT
   ========================================================== */

#capitalWeakSymbol {
    font-size: 30px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.4px !important;
    color: #f1f6ff !important;
}


/* Weak status */

#capitalWeakStatus {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    color: #ff6175 !important;
}


/* Weak reason */

#capitalWeakReason {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #a5b5c9 !important;
}


/* ==========================================================
   QUALITY / RISK TEXT
   ========================================================== */

.capital-reallocation .weak-equity strong,
#capitalReallocationEngine .weak-equity strong {
    font-size: 20px !important;
    font-weight: 800 !important;
}

.capital-reallocation .weak-equity .quality,
#capitalReallocationEngine .weak-equity .quality {
    color: #ff6b7d !important;
}

.capital-reallocation .weak-equity .risk,
#capitalReallocationEngine .weak-equity .risk {
    color: #ffc857 !important;
}


/* ==========================================================
   REPLACEMENT SYMBOLS
   ========================================================== */

#capitalReplacementSymbol1,
#capitalReplacementSymbol2 {
    font-size: 21px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #e8f7ff !important;
    letter-spacing: 0.3px !important;
}


/* Replacement descriptions */

#capitalReplacementReason1,
#capitalReplacementReason2 {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #8fa6bd !important;
}


/* ==========================================================
   EXPECTED IMPACT
   IMPORTANT:
   VALUE +45 IQ IS NOT CHANGED.
   ONLY VISUAL SIZE/WEIGHT.
   ========================================================== */

#capitalExpectedImpact {
    font-size: 32px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    color: #55f5a7 !important;
    letter-spacing: -0.5px !important;
}


/* Outcome explanation */

#capitalOutcomeReason {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #a5b8ca !important;
}


/* ==========================================================
   CAPITAL REALLOCATION CARD — EXTRA VISUAL DEPTH
   ========================================================== */

.capital-reallocation .weak-equity,
#capitalReallocationEngine .weak-equity {
    border-color: rgba(255, 82, 105, 0.38) !important;
}

.capital-reallocation .replacement-universe,
#capitalReallocationEngine .replacement-universe {
    border-color: rgba(49, 205, 255, 0.30) !important;
}

.capital-reallocation .future-outcome,
#capitalReallocationEngine .future-outcome {
    border-color: rgba(63, 245, 158, 0.38) !important;
}


/* ==========================================================
   MOBILE / SMALL SCREEN
   ========================================================== */

@media (max-width: 900px) {

    .capital-reallocation h2,
    .capital-reallocation .section-title,
    #capitalReallocationEngine h2,
    #capitalReallocationEngine .section-title {
        font-size: 25px !important;
    }

    #capitalWeakSymbol {
        font-size: 25px !important;
    }

    #capitalExpectedImpact {
        font-size: 28px !important;
    }

}

/* ==========================================================
   CAPITAL REALLOCATION — REPLACEMENT UNIVERSE
   ========================================================== */

#capitalReplacementSymbol1,
#capitalReplacementSymbol2 {
    font-size: 30px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;
    color: #f2f7ff !important;
}

#capitalReplacementReason1,
#capitalReplacementReason2 {
    font-size: 25px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #8fa9c2 !important;
}

/* 01 / 02 */

.capital-reallocation .replacement-number,
#capitalReallocationEngine .replacement-number {
    font-size: 25px !important;
    font-weight: 800 !important;
    color: #9b7cff !important;
}

/* ==========================================================
   CAPITAL REALLOCATION ENGINE — LARGE INTELLIGENCE UI
   ========================================================== */

.capital-reallocation-engine {
    font-size: 200% !important;
}

/* ----------------------------------------------------------
   SECTION LABELS
   ---------------------------------------------------------- */

.capital-reallocation-engine .field-label,
.capital-reallocation-engine .section-label,
.capital-reallocation-engine .eyebrow,
.capital-reallocation-engine .micro-label {
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 1.8px !important;
}

/* ----------------------------------------------------------
   WEAK EQUITY
   ---------------------------------------------------------- */

.capital-reallocation-engine .weak-equity-label,
.capital-reallocation-engine .weak-equity h4 {
    font-size: 20px !important;
    font-weight: 900 !important;
    letter-spacing: 1.5px !important;
    color: #ff4d67 !important;
}

/* ----------------------------------------------------------
   ADANIPORTS / WEAK STOCK SYMBOL
   ---------------------------------------------------------- */

.capital-reallocation-engine .weak-equity strong,
.capital-reallocation-engine .weak-equity .symbol,
.capital-reallocation-engine .weak-equity .stock-symbol {
    font-size: 34px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
    color: #f2f7ff !important;
}

/* ----------------------------------------------------------
   QUALITY / RISK
   ---------------------------------------------------------- */

.capital-reallocation-engine .weak-equity p,
.capital-reallocation-engine .weak-equity .metrics,
.capital-reallocation-engine .weak-equity .meta {
    font-size: 17px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    color: #9eb4cc !important;
}

/* ----------------------------------------------------------
   REPLACEMENT UNIVERSE
   ---------------------------------------------------------- */

.capital-reallocation-engine .replacement-universe {
    font-size: 18px !important;
}

.capital-reallocation-engine .replacement-universe .replacement-number {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #9b7cff !important;
}

.capital-reallocation-engine .replacement-universe strong,
.capital-reallocation-engine .replacement-universe .symbol {
    font-size: 25px !important;
    font-weight: 900 !important;
    color: #f2f7ff !important;
}

.capital-reallocation-engine .replacement-universe span,
.capital-reallocation-engine .replacement-universe p {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #8fa9c2 !important;
}

/* ----------------------------------------------------------
   ANALYZE / SIMULATE
   ---------------------------------------------------------- */

.capital-reallocation-engine .analyze,
.capital-reallocation-engine .simulate,
.capital-reallocation-engine .arrow-label {
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
}

/* ----------------------------------------------------------
   FUTURE OUTCOME
   ---------------------------------------------------------- */

.capital-reallocation-engine .future-outcome .label,
.capital-reallocation-engine .future-outcome .eyebrow {
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
}

.capital-reallocation-engine .future-outcome strong,
.capital-reallocation-engine .expected-impact {
    font-size: 34px !important;
    font-weight: 900 !important;
    color: #42f5a7 !important;
}

.capital-reallocation-engine .future-outcome p,
.capital-reallocation-engine .future-outcome span {
    font-size: 17px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    color: #a9bdd1 !important;
}

/* ----------------------------------------------------------
   CAPITAL LAB
   ---------------------------------------------------------- */

.capital-reallocation-engine .capital-lab {
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    color: #b38cff !important;
}

/* =========================================================
   QUANTUM PREMIUM — HOW TO USE
   Command Center Navigation Button
========================================================= */

.quantum-nav-links {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100%;

}


/* =========================================================
   MAIN BUTTON
========================================================= */

#howToUseBtn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 218px;

    height: 40px;

    padding: 0 22px;

    border: 1px solid
        rgba(67, 225, 255, 0.42);

    border-radius: 7px;

    outline: none;

    background:
        linear-gradient(
            180deg,
            rgba(13, 30, 43, 0.92) 0%,
            rgba(3, 12, 21, 0.96) 100%
        );

    color: #9fdfea;

    font-family: inherit;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.8px;

    line-height: 1;

    white-space: nowrap;

    cursor: pointer;

    overflow: hidden;

    isolation: isolate;

    box-shadow:

        0 0 0 1px
        rgba(64, 224, 255, 0.035),

        0 0 12px
        rgba(44, 211, 245, 0.10),

        0 0 30px
        rgba(44, 211, 245, 0.045),

        inset 0 1px 0
        rgba(255, 255, 255, 0.055),

        inset 0 -1px 0
        rgba(0, 0, 0, 0.5);

    transform: translateY(0);

    transition:

        color 220ms ease,

        border-color 220ms ease,

        background 220ms ease,

        box-shadow 220ms ease,

        transform 220ms ease;

    animation:

        quantumNavBreathing
        4s
        ease-in-out
        infinite;

}


/* =========================================================
   OUTER AURA
========================================================= */

#howToUseBtn::before {

    content: "";

    position: absolute;

    inset: -5px;

    z-index: -1;

    border-radius: 11px;

    border: 1px solid
        rgba(65, 226, 255, 0.08);

    box-shadow:

        0 0 10px
        rgba(65, 226, 255, 0.08),

        0 0 24px
        rgba(65, 226, 255, 0.055),

        0 0 45px
        rgba(65, 226, 255, 0.025);

    opacity: 0.75;

    animation:

        quantumOuterPulse
        3.8s
        ease-in-out
        infinite;

}


/* =========================================================
   MOVING SCAN LIGHT
========================================================= */

#howToUseBtn::after {

    content: "";

    position: absolute;

    top: -20%;

    left: -75%;

    width: 45%;

    height: 140%;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(88, 237, 255, 0.02) 20%,
            rgba(88, 237, 255, 0.22) 50%,
            rgba(88, 237, 255, 0.02) 80%,
            transparent 100%
        );

    filter:
        blur(1px);

    transform:
        skewX(-18deg);

    animation:

        quantumNavScan
        4.5s
        ease-in-out
        infinite;

}


/* =========================================================
   TOP MICRO-LINE
========================================================= */

#howToUseBtn {

    --quantum-cyan:
        rgba(76, 231, 255, 1);

}


/* =========================================================
   CORNER ACCENTS
========================================================= */

#howToUseBtn .quantum-corner {

    position: absolute;

    width: 6px;

    height: 6px;

    border-color:
        rgba(82, 232, 255, 0.85);

    pointer-events: none;

}


/* =========================================================
   HOVER
========================================================= */

#howToUseBtn:hover {

    color: #e1fbff;

    border-color:
        rgba(74, 231, 255, 0.82);

    background:
        linear-gradient(
            180deg,
            rgba(16, 40, 55, 0.98) 0%,
            rgba(4, 17, 28, 0.98) 100%
        );

    transform:
        translateY(-2px)
        scale(1.015);

    box-shadow:

        0 0 0 1px
        rgba(64, 224, 255, 0.08),

        0 0 14px
        rgba(64, 224, 255, 0.24),

        0 0 30px
        rgba(64, 224, 255, 0.13),

        0 0 55px
        rgba(64, 224, 255, 0.06),

        inset 0 1px 0
        rgba(255, 255, 255, 0.08),

        inset 0 0 18px
        rgba(64, 224, 255, 0.055);

}


/* =========================================================
   HOVER OUTER AURA
========================================================= */

#howToUseBtn:hover::before {

    border-color:
        rgba(72, 230, 255, 0.18);

    opacity: 1;

    box-shadow:

        0 0 12px
        rgba(72, 230, 255, 0.18),

        0 0 28px
        rgba(72, 230, 255, 0.12),

        0 0 55px
        rgba(72, 230, 255, 0.055);

}


/* =========================================================
   ACTIVE / CLICK
========================================================= */

#howToUseBtn:active {

    transform:
        translateY(0)
        scale(0.975);

    border-color:
        rgba(85, 237, 255, 0.95);

    box-shadow:

        0 0 8px
        rgba(67, 229, 255, 0.25),

        0 0 20px
        rgba(67, 229, 255, 0.15),

        inset 0 0 18px
        rgba(67, 229, 255, 0.10);

}


/* =========================================================
   FOCUS
========================================================= */

#howToUseBtn:focus-visible {

    border-color:
        rgba(82, 235, 255, 0.95);

    box-shadow:

        0 0 0 2px
        rgba(82, 235, 255, 0.08),

        0 0 18px
        rgba(82, 235, 255, 0.22);

}


/* =========================================================
   BREATHING ANIMATION
========================================================= */

@keyframes quantumNavBreathing {

    0%,
    100% {

        box-shadow:

            0 0 0 1px
            rgba(64, 224, 255, 0.035),

            0 0 12px
            rgba(44, 211, 245, 0.09),

            0 0 30px
            rgba(44, 211, 245, 0.04),

            inset 0 1px 0
            rgba(255, 255, 255, 0.055),

            inset 0 -1px 0
            rgba(0, 0, 0, 0.5);

    }

    50% {

        box-shadow:

            0 0 0 1px
            rgba(64, 224, 255, 0.055),

            0 0 16px
            rgba(44, 211, 245, 0.14),

            0 0 36px
            rgba(44, 211, 245, 0.065),

            inset 0 1px 0
            rgba(255, 255, 255, 0.065),

            inset 0 -1px 0
            rgba(0, 0, 0, 0.5);

    }

}


/* =========================================================
   OUTER GLOW PULSE
========================================================= */

@keyframes quantumOuterPulse {

    0%,
    100% {

        transform:
            scale(0.995);

        opacity: 0.55;

    }

    50% {

        transform:
            scale(1.018);

        opacity: 0.95;

    }

}


/* =========================================================
   SCANNING LIGHT
========================================================= */

@keyframes quantumNavScan {

    0% {

        left: -75%;

        opacity: 0;

    }

    10% {

        opacity: 0.85;

    }

    42% {

        left: 135%;

        opacity: 0;

    }

    100% {

        left: 135%;

        opacity: 0;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    #howToUseBtn,
    #howToUseBtn::before,
    #howToUseBtn::after {

        animation: none;

    }

}


/* =========================================================
   SMALL SCREENS
========================================================= */

@media (max-width: 700px) {

    #howToUseBtn {

        min-width: auto;

        padding:
            0 15px;

        font-size: 9px;

        letter-spacing: 1.4px;

    }

}

/* =========================================================
   PREMIUM CORNERS + ICON
========================================================= */

.quantum-howto-btn {

    gap: 9px;

}


.quantum-howto-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 15px;

    height: 15px;

    border: 1px solid
        rgba(76, 231, 255, 0.45);

    border-radius: 50%;

    color: #5ceaff;

    font-size: 12px;

    font-weight: 500;

    line-height: 1;

    box-shadow:
        0 0 8px
        rgba(76, 231, 255, 0.14);

}


/* CORNER LIGHTS */

.quantum-howto-corner {

    position: absolute;

    width: 5px;

    height: 5px;

    pointer-events: none;

}


.corner-tl {

    top: -1px;

    left: -1px;

    border-top: 1px solid #58eaff;

    border-left: 1px solid #58eaff;

}


.corner-tr {

    top: -1px;

    right: -1px;

    border-top: 1px solid #58eaff;

    border-right: 1px solid #58eaff;

}


.corner-bl {

    bottom: -1px;

    left: -1px;

    border-bottom: 1px solid #58eaff;

    border-left: 1px solid #58eaff;

}


.corner-br {

    bottom: -1px;

    right: -1px;

    border-bottom: 1px solid #58eaff;

    border-right: 1px solid #58eaff;

}

/* =========================================================
   QUANTUM HOW TO USE — PREMIUM PANEL
========================================================= */

.quantum-howto-panel {

    display: none;

    position: relative;

    margin: 24px 28px;

    padding: 42px;

    border: 1px solid rgba(255, 255, 255, 0.14);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(0, 220, 255, 0.08),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 90%,
            rgba(120, 80, 255, 0.07),
            transparent 35%
        ),
        rgba(8, 12, 20, 0.96);

    box-shadow:
        0 0 0 1px rgba(0, 220, 255, 0.04),
        0 20px 60px rgba(0, 0, 0, 0.45),
        inset 0 0 40px rgba(0, 220, 255, 0.025);

    overflow: hidden;

}


/* =========================================================
   TOP GLOW LINE
========================================================= */

.quantum-howto-panel::before {

    content: "";

    position: absolute;

    top: 0;
    left: 8%;

    width: 84%;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 220, 255, 0.8),
        transparent
    );

    box-shadow:
        0 0 14px rgba(0, 220, 255, 0.55);

}


/* =========================================================
   HEADER
========================================================= */

.howto-header {

    text-align: center;

    max-width: 760px;

    margin: 0 auto 38px;

}


.howto-eyebrow {

    display: inline-block;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

    color: #00d9ff;

    margin-bottom: 12px;

}


.howto-header h2 {

    margin: 0;

    font-size: 34px;

    font-weight: 800;

    letter-spacing: 1px;

    color: #ffffff;

}


.howto-header p {

    margin: 12px auto 0;

    max-width: 650px;

    font-size: 15px;

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.58);

}


/* =========================================================
   STEP
========================================================= */

.howto-step {

    display: flex;

    gap: 24px;

    padding: 25px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

}


.howto-step-number {

    flex: 0 0 54px;

    width: 54px;
    height: 54px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(0, 220, 255, 0.28);

    border-radius: 12px;

    background:
        rgba(0, 220, 255, 0.055);

    color: #00d9ff;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 1px;

    box-shadow:
        0 0 18px rgba(0, 220, 255, 0.08);

}


.howto-step-content {

    flex: 1;

}


.howto-step-label {

    display: block;

    margin-bottom: 6px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    color: rgba(0, 220, 255, 0.72);

}


.howto-step-content h3 {

    margin: 0 0 8px;

    font-size: 19px;

    color: #ffffff;

}


.howto-step-content p {

    margin: 0;

    max-width: 820px;

    font-size: 14px;

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.62);

}


.howto-subtext {

    margin-top: 8px !important;

    font-size: 13px !important;

    color: rgba(255, 255, 255, 0.42) !important;

}


/* =========================================================
   IMPORTANT NOTE
========================================================= */

.howto-note {

    display: flex;

    gap: 12px;

    align-items: flex-start;

    margin-top: 15px;

    padding: 13px 15px;

    border-left: 2px solid #00d9ff;

    background:
        rgba(0, 220, 255, 0.035);

    border-radius: 0 8px 8px 0;

}


.howto-note strong {

    flex-shrink: 0;

    font-size: 10px;

    letter-spacing: 1.5px;

    color: #00d9ff;

}


.howto-note span {

    font-size: 12px;

    line-height: 1.6;

    color: rgba(255, 255, 255, 0.55);

}


/* =========================================================
   DOWNLOAD BUTTON
========================================================= */

.howto-download-btn {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin-top: 16px;

    padding: 11px 18px;

    border: 1px solid rgba(0, 220, 255, 0.45);

    border-radius: 8px;

    background:
        rgba(0, 220, 255, 0.07);

    color: #00d9ff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.2px;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;

}


.howto-download-btn:hover {

    transform: translateY(-2px);

    background:
        rgba(0, 220, 255, 0.14);

    box-shadow:
        0 0 22px rgba(0, 220, 255, 0.16);

}


/* =========================================================
   READY
========================================================= */

.howto-ready {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 15px;

    padding: 9px 13px;

    border: 1px solid rgba(0, 255, 160, 0.25);

    border-radius: 7px;

    background:
        rgba(0, 255, 160, 0.035);

    color: #55ffc1;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.3px;

}


.howto-ready-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #55ffc1;

    box-shadow:
        0 0 10px rgba(85, 255, 193, 0.8);

}


/* =========================================================
   QUICK RULES
========================================================= */

.howto-rules {

    margin-top: 32px;

    padding: 24px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.018);

}


.howto-rules-title {

    margin-bottom: 17px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    color: #ffffff;

}


.howto-rule {

    display: flex;

    gap: 12px;

    padding: 8px 0;

    font-size: 13px;

    color: rgba(255, 255, 255, 0.58);

}


.howto-rule span {

    width: 22px;

    color: #00d9ff;

    font-size: 10px;

    font-weight: 800;

}


/* =========================================================
   FOOTER
========================================================= */

.howto-footer {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 32px;

}


.howto-footer-line {

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0, 220, 255, 0.2),
            transparent
        );

}


.howto-footer p {

    margin: 0;

    text-align: center;

    font-size: 12px;

    letter-spacing: 0.5px;

    color: rgba(255, 255, 255, 0.42);

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .quantum-howto-panel {

        margin: 15px;

        padding: 25px 20px;

    }


    .howto-header h2 {

        font-size: 27px;

    }


    .howto-step {

        gap: 15px;

    }


    .howto-step-number {

        flex-basis: 42px;

        width: 42px;
        height: 42px;

    }

}

/* =========================================================
   HOW TO USE — OPEN STATE
========================================================= */

.quantum-howto-panel.active {

    display: block;

    animation:
        quantumHowToOpen
        0.45s
        ease
        both;

}


@keyframes quantumHowToOpen {

    from {

        opacity: 0;

        transform:
            translateY(-18px)
            scale(0.985);

        filter:
            brightness(0.7);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            brightness(1);

    }

}

/* =========================================================
   QUANTUM HOW TO USE — LARGE RED EXIT
========================================================= */

.quantum-howto-panel .quantum-howto-content {
    position: relative;
}

.quantum-howto-panel .quantum-howto-close {
    position: absolute !important;

    top: 28px !important;
    right: 30px !important;
    left: auto !important;
    bottom: auto !important;

    width: 125px !important;
    height: 52px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: #b80000 !important;

    border: 2px solid #ff4a4a !important;
    border-radius: 8px !important;

    color: #ffffff !important;

    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;

    cursor: pointer !important;

    z-index: 99999 !important;

    box-shadow:
        0 0 10px rgba(255, 0, 0, 0.45),
        0 0 28px rgba(255, 0, 0, 0.22),
        inset 0 0 15px rgba(255, 255, 255, 0.08) !important;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease !important;
}

.quantum-howto-panel .quantum-howto-close span {
    color: #ffffff !important;

    font-size: 27px !important;
    font-weight: 400 !important;

    line-height: 1 !important;
}

.quantum-howto-panel .quantum-howto-close small {
    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
}


/* =========================================================
   HOVER
========================================================= */

.quantum-howto-panel .quantum-howto-close:hover {

    background: #e00000 !important;

    border-color: #ff7777 !important;

    color: #ffffff !important;

    box-shadow:
        0 0 14px rgba(255, 0, 0, 0.7),
        0 0 38px rgba(255, 0, 0, 0.35),
        inset 0 0 18px rgba(255, 255, 255, 0.12) !important;

    transform: scale(1.04) !important;
}

.quantum-howto-panel .quantum-howto-close:hover span {
    color: #ffffff !important;
    transform: none !important;
}

.quantum-howto-panel .quantum-howto-close:hover small {
    color: #ffffff !important;
}


/* =========================================================
   CLICK
========================================================= */

.quantum-howto-panel .quantum-howto-close:active {
    transform: scale(0.97) !important;
}


/* =========================================================
   FOCUS
========================================================= */

.quantum-howto-panel .quantum-howto-close:focus {
    outline: none !important;
}

/* ==========================================================
   QUANTUM LOGOUT BUTTON — PREMIUM
========================================================== */

.quantum-account-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 18px;
}

.quantum-logout-btn {
    position: relative;

    min-width: 112px;
    height: 42px;

    padding: 0 20px;

    border: 1px solid rgba(255, 70, 70, 0.55);
    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 45, 45, 0.18),
            rgba(120, 0, 0, 0.08)
        );

    color: #ff6b6b;

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;

    cursor: pointer;

    overflow: hidden;

    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


/* subtle inner glow */

.quantum-logout-btn::before {
    content: "";

    position: absolute;

    inset: 1px;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.055),
            transparent 45%,
            rgba(255,50,50,0.04)
        );

    pointer-events: none;
}


/* animated scanning glow */

.quantum-logout-btn::after {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 100, 100, 0.18),
            transparent
        );

    transform: skewX(-20deg);

    transition: left 0.6s ease;

    pointer-events: none;
}


/* hover */

.quantum-logout-btn:hover {

    color: #ffffff;

    border-color:
        rgba(255, 75, 75, 0.95);

    background:
        linear-gradient(
            135deg,
            rgba(255, 45, 45, 0.30),
            rgba(120, 0, 0, 0.16)
        );

    box-shadow:
        0 0 12px rgba(255, 45, 45, 0.20),
        0 0 28px rgba(255, 45, 45, 0.10),
        inset 0 0 15px rgba(255, 45, 45, 0.06);

    transform:
        translateY(-1px);
}


.quantum-logout-btn:hover::after {
    left: 130%;
}


/* click */

.quantum-logout-btn:active {

    transform:
        translateY(1px)
        scale(0.98);

    box-shadow:
        0 0 8px rgba(255, 45, 45, 0.18),
        inset 0 0 12px rgba(255, 45, 45, 0.10);
}


/* keyboard focus */

.quantum-logout-btn:focus-visible {

    outline: none;

    border-color: #ff6666;

    box-shadow:
        0 0 0 2px rgba(255, 60, 60, 0.12),
        0 0 20px rgba(255, 50, 50, 0.18);
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 900px) {

    .quantum-account-actions {
        margin-left: 8px;
    }

    .quantum-logout-btn {

        min-width: 92px;
        height: 38px;

        padding: 0 14px;

        font-size: 10px;
        letter-spacing: 1.4px;

    }

}

/* =========================================================
   QUANTUM ACTIVE WARNINGS POPUP
========================================================= */

.quantum-warning-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 55, 80, 0.08),
            transparent 45%
        ),
        rgba(2, 6, 13, 0.88);

    backdrop-filter: blur(12px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.quantum-warning-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   POPUP
========================================================= */

.quantum-warning-modal {
    position: relative;

    width: min(720px, 92vw);
    max-height: 82vh;

    overflow: hidden;

    border: 1px solid rgba(255, 70, 90, 0.30);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(10, 18, 29, 0.98),
            rgba(3, 8, 16, 0.99)
        );

    box-shadow:
        0 0 0 1px rgba(255, 60, 80, 0.04),
        0 30px 100px rgba(0, 0, 0, 0.75),
        0 0 50px rgba(255, 50, 70, 0.10);

    transform:
        translateY(18px)
        scale(0.97);

    transition:
        transform 0.28s ease;
}


.quantum-warning-overlay.active
.quantum-warning-modal {
    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   CLOSE
========================================================= */

.quantum-warning-close {
    position: absolute;

    top: 17px;
    right: 17px;

    width: 40px;
    height: 40px;

    border-radius: 10px;

    border: 1px solid rgba(255,255,255,0.12);

    background:
        rgba(255,255,255,0.035);

    color: #ffffff;

    font-size: 25px;
    line-height: 1;

    cursor: pointer;

    transition:
        all 0.2s ease;

    z-index: 5;
}


.quantum-warning-close:hover {
    color: #ff6378;

    border-color:
        rgba(255,70,90,0.55);

    background:
        rgba(255,50,70,0.12);

    box-shadow:
        0 0 20px rgba(255,50,70,0.18);
}


/* =========================================================
   HEADER
========================================================= */

.warning-modal-header {
    padding: 34px 38px 24px;

    border-bottom:
        1px solid rgba(255,255,255,0.07);
}


.warning-modal-eyebrow {
    display: block;

    margin-bottom: 8px;

    color: #ff6075;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2.3px;
}


.warning-modal-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: 28px;
    font-weight: 800;
}


.warning-modal-header p {
    margin: 8px 0 0;

    color: #7f8da2;

    font-size: 13px;
}


/* =========================================================
   WARNING LIST
========================================================= */

.warning-modal-list {
    padding: 20px 28px;

    max-height: 48vh;

    overflow-y: auto;
}


.warning-modal-list::-webkit-scrollbar {
    width: 5px;
}


.warning-modal-list::-webkit-scrollbar-thumb {
    background:
        rgba(255,70,90,0.35);

    border-radius: 10px;
}


/* =========================================================
   WARNING ITEM
========================================================= */

.quantum-warning-item {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    padding: 16px 18px;

    margin-bottom: 10px;

    border-radius: 12px;

    border:
        1px solid rgba(255,70,90,0.16);

    background:
        linear-gradient(
            90deg,
            rgba(255,50,70,0.065),
            rgba(255,50,70,0.015)
        );

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}


.quantum-warning-item:hover {
    border-color:
        rgba(255,70,90,0.40);

    background:
        rgba(255,50,70,0.08);
}


/* =========================================================
   ICON
========================================================= */

.warning-icon {
    flex-shrink: 0;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    color: #ff5c72;

    background:
        rgba(255,50,70,0.10);

    border:
        1px solid rgba(255,50,70,0.22);

    font-size: 15px;
}


/* =========================================================
   TEXT
========================================================= */

.warning-content {
    min-width: 0;
}


.warning-title {
    color: #ffffff;

    font-size: 14px;
    font-weight: 750;
}


.warning-description {
    margin-top: 4px;

    color: #7f8da2;

    font-size: 12px;

    line-height: 1.5;
}


/* =========================================================
   FOOTER
========================================================= */

.warning-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px 28px;

    border-top:
        1px solid rgba(255,255,255,0.07);

    color: #627085;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.4px;
}


.warning-modal-footer strong {
    color: #ff5c72;

    font-size: 11px;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.quantum-warning-empty {
    padding: 45px 20px;

    text-align: center;

    color: #65758b;

    font-size: 13px;
}


.quantum-warning-empty strong {
    display: block;

    margin-bottom: 7px;

    color: #4ce5ff;

    font-size: 15px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .quantum-warning-overlay {
        padding: 15px;
    }

    .quantum-warning-modal {
        width: 100%;
        max-height: 88vh;
    }

    .warning-modal-header {
        padding: 28px 22px 20px;
    }

    .warning-modal-list {
        padding: 16px;
    }

    .warning-modal-footer {
        padding: 14px 18px;
    }

}

/* =========================================================
   RETURN TO HOME
========================================================= */

.quantum-return-home {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    height: 38px;

    padding: 0 15px;

    border: 1px solid rgba(55, 220, 255, .35);

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            rgba(8, 24, 38, .95),
            rgba(3, 12, 22, .95)
        );

    color: #ffd54a;

    border: 1px solid rgba(55, 220, 255, .35);

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;

    white-space: nowrap;

    box-shadow:
        0 0 12px rgba(0, 210, 255, .08);

    transition:
        all .25s ease;

}


/* Arrow */

.quantum-return-home .return-arrow {

    font-size: 17px;

    line-height: 1;

    color: #43e5ff;

    transition:
        transform .25s ease;

}


/* Hover */

.quantum-return-home:hover {

    color: #fff4c2;

    border-color: rgba(255, 193, 7, .9);

    background: rgba(35, 28, 5, .98);

    box-shadow:
        0 0 18px rgba(255, 193, 7, .25),
        inset 0 0 12px rgba(255, 193, 7, .06);
}


.quantum-return-home:hover .return-arrow {

    transform:
        translateX(-4px);

}

/* =========================================================
   PCRVOL TRACKER BUTTON
========================================================= */

.quantum-pcrvol-btn {

    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 38px;
    padding: 0 18px;

    margin-right: 10px;

    border: 1px solid rgba(87, 231, 255, 0.45);
    border-radius: 4px;

    background:
        linear-gradient(
            135deg,
            rgba(87, 231, 255, 0.10),
            rgba(87, 231, 255, 0.025)
        );

    color: #57e7ff;

    font-family:
        "Inter",
        sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.2px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;

    box-shadow:
        inset 0 0 12px rgba(87, 231, 255, 0.025);
}


/* TOP/BOTTOM QUANTUM DETAIL */

.quantum-pcrvol-btn::before {

    content: "";

    position: absolute;

    top: -1px;
    left: 8px;
    right: 8px;

    height: 1px;

    background: rgba(87, 231, 255, 0.7);

    opacity: 0.65;
}


.quantum-pcrvol-btn::after {

    content: "";

    position: absolute;

    bottom: -1px;
    left: 8px;
    right: 8px;

    height: 1px;

    background: rgba(87, 231, 255, 0.35);

    opacity: 0.65;
}


/* HOVER */

.quantum-pcrvol-btn:hover {

    color: #ffffff;

    border-color: #57e7ff;

    background:
        linear-gradient(
            135deg,
            rgba(87, 231, 255, 0.18),
            rgba(87, 231, 255, 0.05)
        );

    box-shadow:
        0 0 14px rgba(87, 231, 255, 0.12),
        inset 0 0 12px rgba(87, 231, 255, 0.04);

    transform: translateY(-1px);
}


/* ACTIVE / CLICK STATE */

.quantum-pcrvol-btn:active {

    transform: translateY(0);

    background:
        rgba(87, 231, 255, 0.20);

    box-shadow:
        0 0 18px rgba(87, 231, 255, 0.18);
}