/* ============================================================
   PROMETHEUS v8 — Enterprise UI Refactoring
   Все стили в одном файле
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg: #080c14;
    --surface: #0e141f;
    --surface-2: #151d2b;
    --border: #1f2a3a;
    --text: #e8edf5;
    --muted: #7a8aa0;
    --muted-2: #3f4b5e;
    --risk: #f0684e;
    --recovered: #2dd4bf;
    --hot: #f0a63c;
    --neutral: #7c8aa5;
    --green: #00ff41;
    --cyan: #00d4ff;
    --mono: 'JetBrains Mono', monospace;
    --display: 'Space Grotesk', sans-serif;
    --body: 'Inter', sans-serif;
}

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    min-height: 100vh;
    line-height: 1.5;
    overflow-x: hidden;
}

/* ----- scanline (душа) ----- */
.scanline {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.03) 2px,
            rgba(0, 0, 0, 0.03) 4px);
}
.scanline::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(0, 255, 65, 0.03);
    animation: scanMove 15s linear infinite;
}
@keyframes scanMove {
    0% { top: -2px; }
    100% { top: 100%; }
}

.scan-beam {
    position: fixed;
    top: 0;
    left: -100%;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9997;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.012), transparent);
    animation: beamSweep 15s ease-in-out infinite;
    width: 60%;
}
@keyframes beamSweep {
    0% { left: -60%; }
    50% { left: 100%; }
    100% { left: -60%; }
}

/* ----- layout ----- */
.wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 20px 40px;
    position: relative;
    z-index: 10;
}

/* ----- top bar ----- */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.brand .mark {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--recovered), var(--hot));
    flex-shrink: 0;
}
.brand .name {
    font-family: var(--display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: var(--text);
}
.brand .sub {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted-2);
    margin-top: 1px;
}
.brand .sub .version { color: var(--green); }

.demo-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--hot);
    background: rgba(240, 166, 60, 0.08);
    border: 1px solid rgba(240, 166, 60, 0.2);
    border-radius: 6px;
    padding: 4px 12px;
}
.demo-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hot);
    animation: pulse 2s infinite;
}

/* ----- ribbon ----- */
.ribbon {
    font-family: var(--mono);
    font-size: 8px;
    color: var(--muted-2);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 4px 0 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    overflow: hidden;
    white-space: nowrap;
}
.ribbon .item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ribbon .item .val {
    color: var(--text);
    font-weight: 600;
}
.ribbon .item .val.green { color: var(--green); }
.ribbon .item .val.risk { color: var(--risk); }
.ribbon .item .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    display: inline-block;
}
.ribbon .item .dot.green {
    background: var(--green);
    animation: blink 1s step-end infinite;
}

/* ----- hero ----- */
.hero { margin-bottom: 20px; }
.hero h1 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(20px, 2.8vw, 30px);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 4px;
}
.hero h1 .highlight { color: var(--green); }
.hero p {
    color: var(--muted);
    font-size: 13px;
    max-width: 480px;
}
.hero .heartbeat-line {
    font-family: var(--display);
    font-size: clamp(13px, 1.6vw, 18px);
    font-weight: 500;
    color: var(--muted);
    margin-top: 4px;
}
.hero .heartbeat-line .heart {
    display: inline-block;
    animation: heartbeatPulse 1.8s ease-in-out infinite;
    color: var(--green);
}
@keyframes heartbeatPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    14% { transform: scale(1.15); opacity: 0.7; }
    28% { transform: scale(1); opacity: 1; }
    42% { transform: scale(1.1); opacity: 0.8; }
    56% { transform: scale(1); opacity: 1; }
}

/* ----- revenue card ----- */
.revenue-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 22px 16px;
    margin-bottom: 16px;
}
.revenue-card .head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}
.revenue-card .head .label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-2);
}
.revenue-card .head .label .fire { color: var(--hot); }
.revenue-card .head .date {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}

.metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 680px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .metrics { grid-template-columns: 1fr; } }

.metric {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 12px;
}
.metric .m-label {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.metric .m-value {
    font-family: var(--display);
    font-weight: 700;
    font-size: 24px;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}
.metric .m-value.risk { color: var(--risk); }
.metric .m-value.recovered { color: var(--recovered); }
.metric .m-value.hot { color: var(--hot); }
.metric .m-value.neutral { color: var(--text); }
.metric .m-trend {
    font-family: var(--mono);
    font-size: 10px;
    margin-top: 4px;
    color: var(--muted);
}
.metric .trend-bar {
    height: 3px;
    border-radius: 2px;
    background: var(--border);
    margin-top: 8px;
    overflow: hidden;
}
.metric .trend-bar span {
    display: block;
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}

/* ----- row ----- */
.row {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 14px;
    margin-bottom: 14px;
}
@media (max-width: 720px) { .row { grid-template-columns: 1fr; } }

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px 10px;
}
.panel .p-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}

.attn-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--surface-2);
    margin-bottom: 5px;
    font-size: 12.5px;
}
.attn-item .src { font-weight: 600; }
.attn-item .status {
    font-family: var(--mono);
    font-size: 10.5px;
}
.status.warn { color: var(--hot); }
.status.fire { color: var(--risk); }
.status.ok { color: var(--recovered); }

.event-item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--muted);
}
.event-item:last-child { border-bottom: none; }
.event-item .e-time {
    font-family: var(--mono);
    color: var(--muted-2);
    flex-shrink: 0;
}
.event-item .e-src {
    color: var(--text);
    font-weight: 600;
    flex-shrink: 0;
}
.event-item .e-action { flex: 1; text-align: left; }
.event-item .e-amt {
    font-family: var(--mono);
    color: var(--recovered);
    font-weight: 600;
    flex-shrink: 0;
}

/* ----- advanced toggle ----- */
.adv-toggle {
    display: flex;
    justify-content: center;
    margin: 18px 0 10px;
}
.adv-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 7px 20px;
    border-radius: 8px;
    font-family: var(--mono);
    font-size: 10.5px;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: all 0.2s ease;
}
.adv-btn:hover {
    border-color: var(--recovered);
    color: var(--recovered);
}
.adv-btn.active {
    border-color: var(--recovered);
    color: var(--recovered);
    background: rgba(45, 212, 191, 0.06);
}

/* ----- advanced panel ----- */
.advanced { display: none; margin-top: 14px; }
.advanced.active { display: block; animation: fadeIn 0.3s ease; }

.sys-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
@media (max-width: 720px) { .sys-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .sys-grid { grid-template-columns: 1fr; } }

.sys-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-family: var(--mono);
}
.sys-item .s-label {
    font-size: 9px;
    color: var(--muted-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sys-item .s-value {
    font-size: 14px;
    font-weight: 600;
    margin-top: 3px;
}
.sys-item .s-value.ok { color: var(--recovered); }
.sys-item .s-value.warn { color: var(--hot); }
.sys-item .s-value.risk { color: var(--risk); }

.log-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--muted);
    max-height: 180px;
    overflow-y: auto;
}
.log-panel::-webkit-scrollbar { width: 3px; }
.log-panel::-webkit-scrollbar-track { background: var(--bg); }
.log-panel::-webkit-scrollbar-thumb { background: var(--border); }
.log-line {
    padding: 3px 0;
    border-bottom: 1px solid var(--border);
}
.log-line:last-child { border-bottom: none; }
.log-line .tag { color: var(--recovered); }

.honesty-note {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted-2);
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    line-height: 1.6;
}

/* ----- footer ----- */
footer {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    font-family: var(--mono);
    font-size: 9.5px;
    color: var(--muted-2);
}

/* ----- animations ----- */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ----- utilities ----- */
.text-muted { color: var(--muted); }
.text-green { color: var(--green); }
.text-risk { color: var(--risk); }
.text-recovered { color: var(--recovered); }
.text-hot { color: var(--hot); }

.button {

display:inline-block;

padding:12px 25px;

margin-top:15px;

border:1px solid #00ccff;

border-radius:8px;

color:#00ccff;

text-decoration:none;

font-weight:bold;

background:rgba(0,150,255,0.1);

}


.button:hover {

background:rgba(0,200,255,0.25);

}




/* ===== NASA COMMAND CENTER LAYER ===== */

.nasa-widget {
    position: relative;
    overflow: hidden;
}


.nasa-widget::after {
    content:"";
    position:absolute;
    inset:0;
    border:1px solid rgba(0,255,65,.15);
    pointer-events:none;
    animation:nasaPulse 3s infinite;
}


@keyframes nasaPulse {
    0%,100% {
        opacity:.3;
    }
    50% {
        opacity:1;
    }
}


.radar-value {
    font-size:42px;
    font-weight:900;
    text-align:center;
    margin:20px;
}


.radar-line {
    text-align:center;
    font-family:monospace;
}


.online {
    display:inline-block;
    width:10px;
    height:10px;
    background:#00ff41;
    border-radius:50%;
    animation:heartbeat 1.5s infinite;
}


.green {
    color:#00ff41;
    font-weight:700;
}


.brain-status div,
.heartbeat div {
    padding:8px;
    border-bottom:1px solid rgba(255,255,255,.08);
}


#liveStream {
    font-family:monospace;
    line-height:2;
}


@keyframes heartbeat {
    0%,100% {
        transform:scale(1);
        box-shadow:0 0 5px #00ff41;
    }
    50% {
        transform:scale(1.4);
        box-shadow:0 0 20px #00ff41;
    }
}



/* ===== RIVALIX PSYCHO REVENUE EFFECT ===== */


header h2 {
    animation:
        typingGlow 2s ease-in-out,
        titlePulse 3s infinite;
}


@keyframes titlePulse {

    0%,100% {
        text-shadow:
        0 0 5px rgba(0,255,65,.4);
    }

    50% {
        text-shadow:
        0 0 25px rgba(0,255,65,1);
    }

}


/* главный удар */

.hero h1 {

    color:#ff4444;

    animation:
    dangerPulse 2s infinite;

    letter-spacing:.03em;

}


@keyframes dangerPulse {

    0%,100% {

        text-shadow:
        0 0 5px rgba(255,0,0,.4);

    }


    50% {

        text-shadow:
        0 0 30px rgba(255,0,0,1);

    }

}


/* мигание внимания */

.hero::before {

    content:"⚠️ ВНИМАНИЕ";

    display:block;

    color:#ff4444;

    font-family:
    'JetBrains Mono',
    monospace;

    font-weight:900;

    margin-bottom:10px;

    animation:
    alertPulse 1.5s infinite;

}


@keyframes alertPulse {

    0%,100% {
        opacity:.6;
    }

    50% {
        opacity:1;
    }

}


/* эффект появления текста */

header h2 {

overflow:hidden;

white-space:nowrap;

animation:
typing 3s steps(40),
titlePulse 3s infinite;

}


@keyframes typing {

from {
width:0;
}

to {
width:100%;
}

}


/* деньги под риском */

.danger {

border-color:#ff4444 !important;

animation:
dangerCard 3s infinite;

}


@keyframes dangerCard {


0%,100% {

box-shadow:
0 0 5px rgba(255,0,0,.2);

}


50% {

box-shadow:
0 0 35px rgba(255,0,0,.8);

}


}




/* ===== AI REVENUE ALARM ===== */


.revenue-alarm {

margin-bottom:25px;

padding:25px;

border-radius:18px;

background:
linear-gradient(
135deg,
rgba(255,0,0,.12),
rgba(0,255,65,.05)
);

border:1px solid rgba(255,80,80,.5);

position:relative;

overflow:hidden;

animation:
alarmPulse 4s infinite;

}


.alarm-header {

font-size:22px;

font-weight:900;

letter-spacing:2px;

color:#ff5555;

margin-bottom:15px;

}


.alarm-main {

display:flex;

gap:30px;

align-items:center;

}


.alarm-number {

font-size:56px;

font-weight:900;

font-family:
'JetBrains Mono',
monospace;

color:#fff;

text-shadow:
0 0 20px rgba(255,0,0,.8);

}


.alarm-text {

font-size:18px;

line-height:2;

}


.alarm-status {

color:#00ff41;

font-weight:900;

}


.alarm-text span {

color:#00d4ff;

font-weight:900;

}


@keyframes alarmPulse {

0%,100% {

box-shadow:
0 0 10px rgba(255,0,0,.2);

}


50% {

box-shadow:
0 0 40px rgba(255,0,0,.7);

}

}




/* =================================
   RIVALIX COMMAND CENTER V11
================================= */


.command-center {

margin-bottom:25px;

padding:25px;

border-radius:20px;

background:
linear-gradient(
135deg,
rgba(0,212,255,.08),
rgba(0,255,65,.05)
);

border:1px solid rgba(0,212,255,.35);

animation:
commandPulse 5s infinite;

}



.command-title {

font-size:26px;

font-weight:900;

letter-spacing:2px;

margin-bottom:20px;

color:#00d4ff;

text-shadow:
0 0 20px rgba(0,212,255,.8);

animation:titleBeat 3s infinite;

}



.advisor-grid {

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:15px;

}



.advisor-card {

background:
rgba(0,0,0,.25);

padding:20px;

border-radius:14px;

border:1px solid rgba(255,255,255,.1);

}



.advisor-card h3 {

margin-bottom:15px;

color:#fff;

}



.advisor-card p {

font-family:
'JetBrains Mono',
monospace;

line-height:2;

}



.money-number {

font-size:48px;

font-weight:900;

color:#ff5555;

text-shadow:
0 0 25px rgba(255,0,0,.8);

animation:
moneyPulse 2s infinite;

}



.score {

font-size:70px;

font-weight:900;

color:#00ff41;

text-align:center;

text-shadow:
0 0 30px rgba(0,255,65,.8);

animation:
scorePulse 2.5s infinite;

}



.green {

color:#00ff41;

font-weight:900;

}



.war-room {

margin-top:20px;

font-family:
'JetBrains Mono',
monospace;

}



#warStream {

line-height:2;

color:#00d4ff;

}



@keyframes commandPulse {

0%,100% {

box-shadow:
0 0 10px rgba(0,212,255,.2);

}

50% {

box-shadow:
0 0 35px rgba(0,212,255,.7);

}

}



@keyframes titleBeat {

0%,100% {

opacity:.8;

}

50% {

opacity:1;

transform:scale(1.03);

}

}



@keyframes moneyPulse {

0%,100% {

opacity:.8;

}

50% {

opacity:1;

}

}



@keyframes scorePulse {

0%,100% {

transform:scale(1);

}

50% {

transform:scale(1.08);

}

}




/* AI WATCHING MODE */


.ai-brain {

border-color:
rgba(0,255,65,.4);

}


#aiThinking {

font-family:
'JetBrains Mono',
monospace;

color:#00ff41;

line-height:2;

}


#aiThinking span {

display:inline-block;

animation:
aiLinePulse 2s infinite;

}


#aiThinking span:nth-child(2){

animation-delay:.5s;

}

#aiThinking span:nth-child(3){

animation-delay:1s;

}

#aiThinking span:nth-child(4){

animation-delay:1.5s;

}



@keyframes aiLinePulse {

0%,100%{

opacity:.45;

}


50%{

opacity:1;

text-shadow:
0 0 15px #00ff41;

}

}




/* REVENUE THREAT CENTER */


.threat-center {

margin-bottom:25px;

padding:25px;

border-radius:20px;

background:
linear-gradient(
135deg,
rgba(255,80,80,.08),
rgba(0,212,255,.05)
);

border:
1px solid rgba(255,80,80,.3);

}



.threat-title {

font-size:24px;

font-weight:900;

color:#ff5555;

margin-bottom:20px;

animation:
threatPulse 3s infinite;

}



.threat-grid {

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(180px,1fr));

gap:15px;

}



.threat-grid > div {

background:
rgba(0,0,0,.25);

padding:15px;

border-radius:12px;

}



.threat-label {

font-size:11px;

opacity:.6;

letter-spacing:2px;

}



.safe {

color:#00ff41;

font-weight:900;

}



.live {

color:#00d4ff;

font-weight:900;

}



@keyframes threatPulse {

0%,100% {

text-shadow:
0 0 5px rgba(255,80,80,.3);

}


50% {

text-shadow:
0 0 25px rgba(255,80,80,.9);

}

}




/* AI HEARTBEAT CORE */


.heartbeat-core {

margin-bottom:25px;

padding:25px;

border-radius:20px;

border:
1px solid rgba(0,255,65,.35);

background:
rgba(0,255,65,.04);

}



.heartbeat-title {

font-size:24px;

font-weight:900;

color:#00ff41;

margin-bottom:20px;

}



.heartbeat-status {

display:flex;

align-items:center;

gap:20px;

font-size:20px;

font-weight:800;

}



.heartbeat-status span {

font-size:13px;

color:#00d4ff;

}



.pulse-dot {

width:22px;

height:22px;

border-radius:50%;

background:#00ff41;

box-shadow:

0 0 10px #00ff41;

animation:

heartbeat 1.2s infinite;

}



.heartbeat-lines {

margin-top:20px;

font-family:

'JetBrains Mono',
monospace;

line-height:2;

color:#b8ffd0;

}



@keyframes heartbeat {


0% {

transform:scale(1);

}


20% {

transform:scale(1.25);

}


40% {

transform:scale(1);

}


100% {

transform:scale(1);

}


}




/* AI OWNER REPORT */


.advisor-owner {

margin-bottom:25px;

padding:30px;

border-radius:22px;

background:

linear-gradient(
135deg,
rgba(0,212,255,.08),
rgba(0,255,65,.06)
);

border:

1px solid rgba(0,212,255,.35);

}



.owner-title {

font-size:28px;

font-weight:900;

color:#00d4ff;

margin-bottom:20px;

text-shadow:

0 0 20px rgba(0,212,255,.8);

}



.owner-message {

font-family:

'JetBrains Mono',
monospace;

font-size:16px;

line-height:2;

color:#e8edf5;

}



.owner-action {

margin-top:20px;

padding:15px;

border-radius:12px;

background:

rgba(0,255,65,.08);

color:#00ff41;

font-weight:900;

}



.owner-action span {

font-family:

'JetBrains Mono',
monospace;

}




/* AI REVENUE SENTINEL */


.sentinel-core {

margin-bottom:25px;

padding:30px;

border-radius:25px;

background:

radial-gradient(
circle,
rgba(0,212,255,.15),
rgba(0,0,0,.2)
);

border:

1px solid rgba(0,212,255,.4);

}



.sentinel-title {

font-size:30px;

font-weight:900;

color:#00d4ff;

margin-bottom:25px;

}



.sentinel-main {

display:flex;

align-items:center;

gap:30px;

}



.radar {

width:120px;

height:120px;

position:relative;

}



.radar-circle {

width:120px;

height:120px;

border-radius:50%;

border:

2px solid #00ff41;

box-shadow:

0 0 30px #00ff41;

animation:

radarSpin 4s linear infinite;

}



.radar-circle::after {

content:"";

position:absolute;

width:50%;

height:2px;

background:#00ff41;

top:50%;

left:50%;

transform-origin:left;

animation:

beamSpin 2s linear infinite;

}



.sentinel-text {

font-family:

'JetBrains Mono',
monospace;

line-height:2.2;

font-size:15px;

color:#e8edf5;

}



@keyframes radarSpin {

0% {

transform:rotate(0deg);

}

100% {

transform:rotate(360deg);

}

}



@keyframes beamSpin {

0% {

transform:rotate(0deg);

}

100% {

transform:rotate(360deg);

}

}





/* MONEY MOMENT */


.money-moment {

margin-bottom:25px;

padding:30px;

border-radius:25px;

background:

linear-gradient(
135deg,
rgba(255,80,80,.15),
rgba(240,166,60,.08)
);

border:

1px solid rgba(255,80,80,.45);

animation:

moneyAlarm 4s infinite;

}



.money-title {

font-size:30px;

font-weight:900;

color:#ff5555;

margin-bottom:25px;

}



.money-alert {

display:flex;

gap:25px;

align-items:center;

}



.money-icon {

font-size:70px;

animation:

moneyBounce 2s infinite;

}



.money-info h2 {

font-size:22px;

}



.money-info p {

color:#aab;

margin:10px 0;

}



.money-row {

display:flex;

justify-content:space-between;

width:350px;

padding:10px 0;

font-family:

'JetBrains Mono',
monospace;

}



.money-row strong {

color:#00ff41;

font-size:22px;

}



.money-action {

margin-top:20px;

padding:15px;

border-radius:12px;

background:

rgba(0,255,65,.1);

color:#00ff41;

font-weight:900;

font-size:18px;

}



@keyframes moneyAlarm {


0%,100% {

box-shadow:

0 0 10px rgba(255,80,80,.2);

}


50% {

box-shadow:

0 0 40px rgba(255,80,80,.8);

}


}



@keyframes moneyBounce {


0%,100% {

transform:translateY(0);

}


50% {

transform:translateY(-10px);

}


}





/* AI DECISION TIMELINE */


.decision-timeline {

margin-bottom:25px;

padding:30px;

border-radius:25px;

background:

rgba(14,20,31,.9);

border:

1px solid rgba(0,212,255,.35);

}



.timeline-title {

font-size:28px;

font-weight:900;

color:#00d4ff;

margin-bottom:25px;

}



.timeline {

position:relative;

padding-left:25px;

}



.timeline::before {

content:"";

position:absolute;

left:7px;

top:0;

bottom:0;

width:2px;

background:

rgba(0,212,255,.35);

}



.timeline-item {

position:relative;

display:flex;

gap:20px;

margin-bottom:25px;

animation:

timelineAppear .8s ease;

}



.timeline-dot {

position:absolute;

left:-25px;

top:5px;

width:16px;

height:16px;

border-radius:50%;

background:#00ff41;

box-shadow:

0 0 15px #00ff41;

animation:

timelinePulse 2s infinite;

}



.timeline-time {

font-family:

'JetBrains Mono',
monospace;

font-size:12px;

color:#7a8aa0;

}



.timeline-text {

font-size:18px;

font-weight:800;

margin-top:4px;

}



.timeline-desc {

color:#aab5c5;

margin-top:4px;

}



.timeline-desc.action {

color:#00ff41;

font-weight:900;

font-size:20px;

}



@keyframes timelinePulse {


0%,100%{

transform:scale(1);

}


50%{

transform:scale(1.3);

}

}



@keyframes timelineAppear {


from {

opacity:0;

transform:translateX(-20px);

}


to {

opacity:1;

transform:translateX(0);

}

}




/* REVENUE FLOW MAP */


.revenue-flow {

margin-bottom:25px;

padding:30px;

border-radius:25px;

background:

linear-gradient(
180deg,
rgba(0,212,255,.08),
rgba(0,0,0,.15)
);

border:

1px solid rgba(0,212,255,.35);

}



.flow-title {

font-size:30px;

font-weight:900;

color:#00d4ff;

margin-bottom:25px;

}



.flow {

display:flex;

flex-direction:column;

align-items:center;

}



.flow-node {

width:280px;

text-align:center;

padding:15px;

border-radius:15px;

background:

rgba(255,255,255,.05);

border:

1px solid rgba(255,255,255,.15);

font-weight:800;

font-size:18px;

animation:

flowPulse 3s infinite;

}



.flow-node.green {

border-color:#00ff41;

color:#00ff41;

}



.flow-node.blue {

border-color:#00d4ff;

color:#00d4ff;

}



.flow-node.money {

border-color:#f0a63c;

color:#f0a63c;

}



.flow-node.action {

border-color:#00ff41;

color:#00ff41;

}



.flow-arrow {

font-size:28px;

color:#7a8aa0;

margin:8px;

}



@keyframes flowPulse {


0%,100% {

box-shadow:

0 0 5px transparent;

}


50% {

box-shadow:

0 0 25px rgba(0,212,255,.6);

}

}




/* AI COMMAND CENTER */


.ai-command {

margin-bottom:25px;

padding:30px;

border-radius:25px;

background:

linear-gradient(
135deg,
rgba(0,255,65,.10),
rgba(0,212,255,.08)
);

border:

1px solid rgba(0,255,65,.4);

}



.command-title {

font-size:32px;

font-weight:900;

color:#00ff41;

margin-bottom:25px;

text-shadow:

0 0 20px rgba(0,255,65,.6);

}



.command-box {

padding:25px;

border-radius:20px;

background:

rgba(0,0,0,.25);

}



.command-status {

font-family:

'JetBrains Mono',
monospace;

color:#00ff41;

margin-bottom:20px;

animation:

commandBlink 2s infinite;

}



.command-message {

font-size:20px;

line-height:1.8;

}



.command-message strong {

color:#00ff41;

font-size:24px;

}



.command-footer {

margin-top:25px;

padding:12px;

border-radius:10px;

background:

rgba(0,255,65,.12);

color:#00ff41;

font-weight:900;

text-align:center;

letter-spacing:2px;

}



@keyframes commandBlink {


0%,100% {

opacity:1;

}


50% {

opacity:.5;

}


}




/* MONEY LEAK MONITOR */


.money-leak {

margin-bottom:25px;

padding:30px;

border-radius:25px;

background:

rgba(240,166,60,.08);

border:

1px solid rgba(240,166,60,.45);

animation:

leakPulse 4s infinite;

}



.leak-title {

font-size:30px;

font-weight:900;

color:#f0a63c;

margin-bottom:20px;

}



.leak-box {

text-align:center;

}



.leak-status {

font-family:

'JetBrains Mono',
monospace;

color:#00ff41;

}



.leak-number {

font-size:60px;

font-weight:900;

margin:20px 0;

color:#ff5555;

}



.leak-label {

color:#7a8aa0;

letter-spacing:2px;

}



.leak-message {

margin-top:20px;

font-size:20px;

font-weight:900;

color:#00ff41;

}



@keyframes leakPulse {


0%,100% {

box-shadow:

0 0 10px rgba(240,166,60,.2);

}


50% {

box-shadow:

0 0 35px rgba(240,166,60,.7);

}


}




/* LIVE EVENT STREAM */


.live-stream {

margin-bottom:25px;

padding:30px;

border-radius:25px;

background:

rgba(0,212,255,.06);

border:

1px solid rgba(0,212,255,.35);

}



.stream-title {

font-size:30px;

font-weight:900;

color:#00d4ff;

margin-bottom:20px;

}



.stream-panel {

font-family:

'JetBrains Mono',
monospace;

}



.stream-item {

display:flex;

gap:15px;

align-items:center;

padding:14px;

margin-bottom:10px;

border-radius:12px;

background:

rgba(255,255,255,.04);

animation:

streamAppear .7s ease;

}



.stream-time {

color:#7a8aa0;

font-size:13px;

}



.stream-ok {

color:#00ff41;

}



.stream-ai {

color:#00d4ff;

}



.stream-money {

color:#f0a63c;

}



.stream-action {

color:#00ff41;

}



@keyframes streamAppear {


from {

opacity:0;

transform:translateX(-30px);

}


to {

opacity:1;

transform:translateX(0);

}


}




/* SYSTEM HEARTBEAT */


.heartbeat-panel {

margin-bottom:25px;

padding:25px;

border-radius:22px;

background:

rgba(0,255,65,.05);

border:

1px solid rgba(0,255,65,.35);

}



.heartbeat-title {

font-size:28px;

font-weight:900;

color:#00ff41;

margin-bottom:20px;

}



.heartbeat-grid {

display:flex;

gap:12px;

flex-wrap:wrap;

}



.heartbeat-item {

padding:12px 18px;

border-radius:12px;

background:

rgba(255,255,255,.04);

font-family:

'JetBrains Mono',
monospace;

font-size:14px;

}



.pulse-dot {

display:inline-block;

width:10px;

height:10px;

border-radius:50%;

background:#00ff41;

margin-right:8px;

animation:

heartbeatPulseDot 1.5s infinite;

}



.heartbeat-last {

margin-top:20px;

font-family:

'JetBrains Mono',
monospace;

color:#00ff41;

}



@keyframes heartbeatPulseDot {


0% {

transform:scale(1);

opacity:.5;

}


50% {

transform:scale(1.6);

opacity:1;

}


100% {

transform:scale(1);

opacity:.5;

}


}




/* REALITY LAYER */


.reality-layer {

margin-bottom:25px;

padding:30px;

border-radius:25px;

background:

linear-gradient(
135deg,
rgba(0,212,255,.08),
rgba(0,255,65,.05)
);

border:

1px solid rgba(0,212,255,.35);

}



.reality-title {

font-size:30px;

font-weight:900;

color:#00d4ff;

margin-bottom:25px;

}



.reality-grid {

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(180px,1fr));

gap:15px;

}



.reality-card {

padding:22px;

border-radius:18px;

background:

rgba(0,0,0,.25);

text-align:center;

animation:

realityPulse 5s infinite;

}



.reality-icon {

font-size:32px;

}



.reality-value {

margin-top:12px;

font-size:22px;

font-weight:900;

color:#00ff41;

}



.reality-label {

margin-top:8px;

font-size:12px;

color:#7a8aa0;

letter-spacing:1px;

}



@keyframes realityPulse {


0%,100% {

box-shadow:

0 0 8px rgba(0,212,255,.15);

}


50% {

box-shadow:

0 0 30px rgba(0,212,255,.45);

}


}




/* MISSION START SEQUENCE */


.mission-start {

margin-bottom:25px;

padding:28px;

border-radius:25px;

background:

rgba(0,255,65,.04);

border:

1px solid rgba(0,255,65,.35);

}



.mission-title {

font-size:30px;

font-weight:900;

color:#00ff41;

margin-bottom:20px;

animation:

missionGlow 3s infinite;

}



.mission-lines {

font-family:

'JetBrains Mono',
monospace;

}



.mission-line {

padding:10px 0;

font-size:16px;

color:#e8edf5;

}



.mission-line span {

margin-right:10px;

}



.mission-ready {

margin-top:20px;

padding:14px;

border-radius:12px;

text-align:center;

font-size:22px;

font-weight:900;

color:#00d4ff;

background:

rgba(0,212,255,.08);

letter-spacing:3px;

}



@keyframes missionGlow {


0%,100% {

text-shadow:

0 0 5px rgba(0,255,65,.3);

}


50% {

text-shadow:

0 0 25px rgba(0,255,65,.9);

}


}




/* ============================================================
   RIVALIX COMPACT MISSION CONTROL
   V25.1 — reduce vertical scroll without removing content
   ============================================================ */

.wrap {
    max-width: 1200px;
    padding: 14px 18px 24px;
}

header {
    margin-bottom: 10px;
}

.hero {
    margin-bottom: 12px;
}

.hero h1 {
    font-size: clamp(19px, 2.5vw, 27px);
    margin-bottom: 2px;
}

.hero p {
    font-size: 12px;
}

/* compact mission / heartbeat / reality blocks */

.mission-start,
.heartbeat-panel,
.reality-layer,
.money-leak,
.live-stream,
.ai-command {
    margin-bottom: 12px;
    padding: 18px 20px;
    border-radius: 18px;
}

.mission-title,
.heartbeat-title,
.reality-title,
.leak-title,
.stream-title,
.command-title {
    font-size: 23px;
    margin-bottom: 13px;
}

.mission-line {
    padding: 6px 0;
    font-size: 13px;
}

.mission-ready {
    margin-top: 12px;
    padding: 10px;
    font-size: 17px;
}

.heartbeat-grid {
    gap: 8px;
}

.heartbeat-item {
    padding: 8px 12px;
    font-size: 12px;
}

.heartbeat-last {
    margin-top: 12px;
    font-size: 11px;
}

.reality-grid {
    gap: 10px;
}

.reality-card {
    padding: 14px;
}

.reality-icon {
    font-size: 25px;
}

.reality-value {
    margin-top: 6px;
    font-size: 17px;
}

.reality-label {
    margin-top: 4px;
    font-size: 10px;
}

.leak-number {
    font-size: 46px;
    margin: 12px 0;
}

.leak-label {
    font-size: 11px;
}

.leak-message {
    margin-top: 10px;
    font-size: 16px;
}

.stream-item {
    padding: 9px 11px;
    margin-bottom: 6px;
    gap: 10px;
    font-size: 12px;
}

.stream-time {
    font-size: 10px;
}

.command-box {
    padding: 16px;
}

.command-message {
    font-size: 16px;
    line-height: 1.55;
}

.command-message strong {
    font-size: 19px;
}

.command-footer {
    margin-top: 14px;
    padding: 9px;
}

.grid {
    gap: 12px;
}

.card {
    padding: 16px;
}

.card h2 {
    margin-bottom: 8px;
}

footer {
    margin-top: 12px;
    padding-top: 10px;
}


@media (max-width: 700px) {

    .wrap {
        padding: 10px 12px 18px;
    }

    .mission-start,
    .heartbeat-panel,
    .reality-layer,
    .money-leak,
    .live-stream,
    .ai-command {
        padding: 15px;
        margin-bottom: 10px;
    }

    .mission-title,
    .heartbeat-title,
    .reality-title,
    .leak-title,
    .stream-title,
    .command-title {
        font-size: 20px;
    }

}




/* ============================================================
   V26 — AI BRAIN VISUALIZER
   ============================================================ */

.brain-visualizer {
    margin-bottom: 12px;
    padding: 18px 20px;
    border-radius: 18px;
    background:
        linear-gradient(
            90deg,
            rgba(0,212,255,.06),
            rgba(0,255,65,.04),
            rgba(240,166,60,.05)
        );
    border: 1px solid rgba(0,212,255,.35);
}

.brain-title {
    font-size: 23px;
    font-weight: 900;
    color: #00d4ff;
    margin-bottom: 16px;
}

.brain-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.brain-node {
    min-width: 130px;
    padding: 12px 10px;
    text-align: center;
    border-radius: 13px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(0,212,255,.25);
    animation: brainPulse 3s infinite;
}

.brain-node span {
    display: block;
    font-size: 23px;
    margin-bottom: 4px;
}

.brain-node strong {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 1px;
}

.brain-node small {
    display: block;
    margin-top: 3px;
    color: #7a8aa0;
    font-size: 9px;
}

.brain-arrow {
    color: #00ff41;
    font-size: 22px;
    font-weight: 900;
    animation: brainArrow 1.4s infinite;
}

.danger-node {
    border-color: rgba(240,104,78,.5);
}

.danger-node strong {
    color: #f0684e;
}

.money-node {
    border-color: rgba(240,166,60,.5);
}

.money-node strong {
    color: #f0a63c;
}

.action-node {
    border-color: rgba(0,255,65,.5);
}

.action-node strong {
    color: #00ff41;
}

.brain-status {
    margin-top: 14px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    color: #00ff41;
}

@keyframes brainPulse {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 0 5px rgba(0,212,255,.08);
    }

    50% {
        transform: translateY(-3px);
        box-shadow: 0 0 18px rgba(0,212,255,.25);
    }
}

@keyframes brainArrow {
    0%, 100% {
        opacity: .35;
        transform: translateX(0);
    }

    50% {
        opacity: 1;
        transform: translateX(4px);
    }
}

@media (max-width: 700px) {

    .brain-visualizer {
        padding: 15px;
    }

    .brain-title {
        font-size: 20px;
    }

    .brain-node {
        min-width: 105px;
        padding: 10px 8px;
    }

    .brain-arrow {
        font-size: 18px;
    }
}




/* ============================================================
   V27 — LIVE REACTION ENGINE
   Real dashboard values react when backend data changes.
   ============================================================ */

.live-reaction {
    animation: liveReactionFlash 1.2s ease;
}

.live-reaction-money {
    animation: liveReactionMoney 1.4s ease;
}

.live-reaction-hot {
    animation: liveReactionHot 1.2s ease;
}

#liveReactionToast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9998;
    max-width: 360px;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(8, 12, 20, .94);
    border: 1px solid rgba(0, 255, 65, .45);
    box-shadow: 0 0 30px rgba(0, 255, 65, .18);
    color: #e8edf5;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    opacity: 0;
    transform: translateY(15px);
    pointer-events: none;
    transition:
        opacity .25s ease,
        transform .25s ease;
}

#liveReactionToast.active {
    opacity: 1;
    transform: translateY(0);
}

#liveReactionToast .reaction-label {
    color: #00ff41;
    font-weight: 700;
    margin-bottom: 4px;
}

@keyframes liveReactionFlash {

    0% {
        transform: scale(1);
        text-shadow: none;
    }

    35% {
        transform: scale(1.08);
        text-shadow: 0 0 18px rgba(0, 212, 255, .9);
    }

    100% {
        transform: scale(1);
        text-shadow: none;
    }

}

@keyframes liveReactionMoney {

    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.12);
        text-shadow: 0 0 24px rgba(240, 166, 60, 1);
    }

    100% {
        transform: scale(1);
    }

}

@keyframes liveReactionHot {

    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.12);
        text-shadow: 0 0 24px rgba(240, 104, 78, 1);
    }

    100% {
        transform: scale(1);
    }

}




/* ============================================================
   V27.1 — LOWER PANELS COMPACT POLISH
   Keep the dashboard dense, premium and readable.
   ============================================================ */

.card {
    padding: 13px 15px;
    border-radius: 15px;
}

.card h2 {
    font-size: 16px;
    margin-bottom: 6px;
}

.card p {
    margin-bottom: 4px;
    font-size: 12px;
}

#events {
    max-height: 170px;
    overflow-y: auto;
}

.button {
    padding: 10px 16px;
    font-size: 12px;
    border-radius: 10px;
}

.grid {
    gap: 10px;
}

footer {
    margin-top: 8px;
    padding-top: 8px;
    font-size: 10px;
}


/* Keep important money numbers visually strong */

#mAtRisk,
#mRecovered,
#mHotLeads,
#mUnanswered {
    line-height: 1.05;
}


/* Compact lower AI sections */

.ai-report,
.revenue-threat,
.ai-opportunity,
.decision-timeline,
.revenue-flow,
.ai-command,
.money-leak,
.live-events {
    padding: 14px 16px;
    margin-bottom: 10px;
}


/* Mobile */

@media (max-width: 700px) {

    .card {
        padding: 11px 13px;
    }

    .card h2 {
        font-size: 14px;
    }

    .grid {
        gap: 8px;
    }

}



/* ============================================================
   V27.2 — MONEY FIRST
   Make financial signals visually dominant.
   ============================================================ */

#mAtRisk,
#mRecovered {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 900;
    letter-spacing: -0.04em;
}

#mAtRisk {
    color: #f0684e;
    text-shadow:
        0 0 8px rgba(240,104,78,.25),
        0 0 24px rgba(240,104,78,.12);
}

#mRecovered {
    color: #2dd4bf;
    text-shadow:
        0 0 8px rgba(45,212,191,.25),
        0 0 24px rgba(45,212,191,.12);
}

#mHotLeads,
#mUnanswered {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(25px, 3vw, 36px);
    font-weight: 900;
}

.card.danger {
    position: relative;
    overflow: hidden;
}

.card.danger::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow:
        inset 0 0 35px rgba(240,104,78,.06);
    animation: dangerBreath 3s ease-in-out infinite;
}

@keyframes dangerBreath {

    0%, 100% {
        opacity: .35;
    }

    50% {
        opacity: 1;
    }

}


/* AI decision center gets command-center emphasis */

.card:has(#mCommandSignal) {
    border-color: rgba(0,212,255,.28);
    box-shadow:
        0 0 20px rgba(0,212,255,.05);
}

#mCommandSignal,
#mCommandPriority,
#mCommandFocus,
#mCommandActions {
    font-family: 'JetBrains Mono', monospace;
    color: #00d4ff;
    font-weight: 700;
}


/* Mobile */

@media (max-width: 700px) {

    #mAtRisk,
    #mRecovered {
        font-size: 34px;
    }

    #mHotLeads,
    #mUnanswered {
        font-size: 28px;
    }

}



/* ============================================================
   V28 — MONEY ALERT SYSTEM
   ============================================================ */

.card.danger {
    transition:
        border-color .4s ease,
        box-shadow .4s ease,
        background .4s ease;
}


/* SAFE */

.money-safe {
    border-color: rgba(45,212,191,.35) !important;
    box-shadow:
        0 0 18px rgba(45,212,191,.08),
        inset 0 0 25px rgba(45,212,191,.025);
}


/* WARNING */

.money-warning {
    border-color: rgba(240,166,60,.65) !important;
    box-shadow:
        0 0 22px rgba(240,166,60,.14),
        inset 0 0 30px rgba(240,166,60,.035);
    animation: moneyWarningPulse 2.5s ease-in-out infinite;
}


/* CRITICAL */

.money-critical {
    border-color: rgba(240,104,78,.9) !important;
    box-shadow:
        0 0 28px rgba(240,104,78,.22),
        inset 0 0 40px rgba(240,104,78,.05);
    animation: moneyCriticalPulse 1.4s ease-in-out infinite;
}


.money-alert-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    padding: 4px 9px;
    border-radius: 7px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}


.money-alert-label.safe {
    color: #2dd4bf;
    background: rgba(45,212,191,.08);
}


.money-alert-label.warning {
    color: #f0a63c;
    background: rgba(240,166,60,.09);
}


.money-alert-label.critical {
    color: #f0684e;
    background: rgba(240,104,78,.10);
    animation: alertLabelBlink 1.2s step-end infinite;
}


@keyframes moneyWarningPulse {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2px);
    }

}


@keyframes moneyCriticalPulse {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }

}


@keyframes alertLabelBlink {

    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .55;
    }

}




/* ============================================================
   V29 — REVENUE PULSE
   ============================================================ */

.revenue-pulse-wrap {
    margin: 10px 0 8px;
    padding: 9px 10px 6px;
    border-radius: 10px;
    background: rgba(0,0,0,.20);
    border: 1px solid rgba(240,104,78,.12);
}

.revenue-pulse-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    letter-spacing: 1px;
    color: #7a8aa0;
}

#revenuePulseStatus {
    color: #00ff41;
    animation: pulseStatus 1.8s ease-in-out infinite;
}

.revenue-pulse {
    display: block;
    width: 100%;
    height: 62px;
    overflow: visible;
}

#revenuePulseLine {
    fill: none;
    stroke: #f0684e;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px rgba(240,104,78,.45));
    transition: points .5s ease;
}

#revenuePulseFill {
    fill: rgba(240,104,78,.08);
    stroke: none;
}

@keyframes pulseStatus {

    0%, 100% {
        opacity: .45;
    }

    50% {
        opacity: 1;
    }

}



/* ============================================================
   RIVALIX V30 — COMPACT COMMAND CENTER
   Нижние панели: меньше высота, больше плотность
   ============================================================ */

.grid > .card {
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

/* Все обычные нижние карточки компактнее */
.grid > .card:nth-child(n+5) {
    padding: 14px 16px;
}

.grid > .card:nth-child(n+5) h2 {
    font-size: 13px;
    margin-bottom: 8px;
    line-height: 1.2;
}

.grid > .card:nth-child(n+5) p {
    font-size: 11px;
    line-height: 1.35;
    margin-bottom: 5px;
}

/* AI Decision Center */
.grid > .card:nth-child(5) {
    min-height: 125px;
}

.grid > .card:nth-child(5) p {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.grid > .card:nth-child(5) span {
    font-family: var(--mono);
}

/* Live Events */
.grid > .card:nth-child(6) {
    min-height: 100px;
}

#events {
    max-height: 58px;
    overflow: hidden;
    font-family: var(--mono);
    font-size: 10px;
}

/* Payments / Account */
.grid > .card:nth-child(n+7) {
    min-height: 82px;
}

.grid > .card:nth-child(n+7) .button {
    padding: 8px 14px;
    font-size: 10px;
}

/* Низ превращаем в плотную командную строку */
.grid > .card:nth-child(n+5):hover {
    transform: translateY(-2px);
}

/* На десктопе последние панели компактнее */
@media (min-width: 800px) {
    .grid > .card:nth-child(n+5) {
        padding: 12px 15px;
    }

    .grid > .card:nth-child(n+5) h2 {
        font-size: 12px;
    }
}

/* На мобильном вообще без лишней высоты */
@media (max-width: 799px) {
    .grid > .card:nth-child(n+5) {
        padding: 12px 14px;
        min-height: 0;
    }

    .grid > .card:nth-child(n+5) h2 {
        font-size: 12px;
    }
}


/* ============================================================
   RIVALIX V31 — AI REVENUE WAR ROOM
   Opportunity / Decision Timeline / Revenue Flow
   ============================================================ */

.ai-opportunity,
.ai-decision-timeline,
.revenue-flow-map {
    position: relative;
    overflow: hidden;
}

/* ---------- AI FOUND A REVENUE OPPORTUNITY ---------- */

.ai-opportunity {
    border: 1px solid rgba(240, 166, 60, .35);
    background:
        linear-gradient(
            135deg,
            rgba(240, 166, 60, .09),
            rgba(8, 12, 20, .96) 55%
        );
    box-shadow:
        0 0 30px rgba(240, 166, 60, .08),
        inset 0 0 30px rgba(240, 166, 60, .025);
}

.ai-opportunity::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(240, 166, 60, .07),
        transparent
    );
    transform: translateX(-100%);
    animation: opportunitySweep 4s ease-in-out infinite;
}

@keyframes opportunitySweep {
    0%, 55% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.ai-opportunity h2 {
    color: var(--hot);
    text-shadow: 0 0 12px rgba(240, 166, 60, .35);
    animation: opportunityPulse 2.2s ease-in-out infinite;
}

@keyframes opportunityPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .68; }
}

/* ---------- AI DECISION TIMELINE ---------- */

.ai-decision-timeline {
    border-left: 2px solid var(--cyan);
    background:
        linear-gradient(
            90deg,
            rgba(0, 212, 255, .07),
            transparent 45%
        );
}

.ai-decision-timeline h2 {
    color: var(--cyan);
}

.ai-decision-timeline .timeline-item {
    position: relative;
    padding-left: 18px;
    margin-bottom: 7px;
    font-family: var(--mono);
    font-size: 10px;
}

.ai-decision-timeline .timeline-item::before {
    content: '';
    position: absolute;
    left: 1px;
    top: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 10px var(--cyan);
    animation: timelinePulse 1.5s infinite;
}

@keyframes timelinePulse {
    0%, 100% {
        transform: scale(1);
        opacity: .7;
    }
    50% {
        transform: scale(1.7);
        opacity: 1;
    }
}

/* ---------- REVENUE FLOW MAP ---------- */

.revenue-flow,
.revenue-flow-map {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 16px 18px;
    border: 1px solid rgba(0, 212, 255, .20);
    border-radius: 10px;
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(0, 212, 255, .045),
            transparent 62%
        ),
        var(--surface);
    box-shadow:
        0 0 32px rgba(0, 212, 255, .035),
        inset 0 0 28px rgba(0, 212, 255, .012);
}

.revenue-flow .flow-title,
.revenue-flow-map h2 {
    margin: 0 0 12px;
    color: var(--cyan);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-shadow: 0 0 10px rgba(0, 212, 255, .22);
}

/* Compact vertical pipeline */

.revenue-flow .flow,
.revenue-flow-map .flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.revenue-flow .flow-node,
.revenue-flow-map .flow-node {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(260px, 82%);
    min-width: 0;
    min-height: 34px;
    padding: 7px 12px;
    margin: 3px 0;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: rgba(14, 20, 31, .88);
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: .03em;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.revenue-flow .flow-node:hover,
.revenue-flow-map .flow-node:hover {
    transform: translateY(-1px);
    border-color: var(--cyan);
    box-shadow: 0 0 14px rgba(0, 212, 255, .14);
}

/* Connected channels */

.revenue-flow .flow-node.green {
    width: auto;
    min-width: 110px;
    min-height: 28px;
    padding: 5px 10px;
    margin: 2px 0;
    border-color: rgba(0, 255, 65, .28);
    border-radius: 999px;
    font-size: 9px;
    letter-spacing: .06em;
}

.revenue-flow .flow-node.green:hover {
    border-color: var(--green);
    box-shadow: 0 0 12px rgba(0, 255, 65, .12);
}

/* Pipeline states */

.revenue-flow .flow-node.blue {
    border-color: rgba(0, 212, 255, .28);
}

.revenue-flow .flow-node.money {
    border-color: rgba(255, 196, 0, .32);
}

.revenue-flow .flow-node.action {
    border-color: rgba(0, 255, 65, .36);
    box-shadow: 0 0 12px rgba(0, 255, 65, .06);
}

/* Flow arrows */

.revenue-flow .flow-arrow,
.revenue-flow-map .flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 14px;
    margin: 0;
    color: var(--green);
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1;
    animation: arrowFlowVertical 1.4s ease-in-out infinite;
}

@keyframes arrowFlowVertical {
    0%, 100% {
        opacity: .25;
        transform: translateY(-1px);
    }
    50% {
        opacity: 1;
        transform: translateY(2px);
    }
}

/* Mobile */

@media (max-width: 799px) {
    .revenue-flow,
    .revenue-flow-map {
        padding: 12px;
    }

    .revenue-flow .flow-node,
    .revenue-flow-map .flow-node {
        width: min(230px, 88%);
        min-height: 32px;
        padding: 6px 10px;
    }

    .revenue-flow .flow-node.green {
        min-width: 105px;
    }

    .revenue-flow .flow-arrow,
    .revenue-flow-map .flow-arrow {
        display: flex;
    }
}

/* ============================================================
   RIVALIX V32 — LIVE MONEY IMPACT
   Existing HTML only — CSS layer
   ============================================================ */

/* ---------- GLOBAL LIVE SIGNAL ---------- */

@keyframes rivalixSignal {
    0%, 100% {
        opacity: 1;
        filter: brightness(1);
    }
    50% {
        opacity: .72;
        filter: brightness(1.35);
    }
}

@keyframes rivalixGlow {
    0%, 100% {
        box-shadow: 0 0 0 rgba(0,255,65,0);
    }
    50% {
        box-shadow: 0 0 24px rgba(0,255,65,.12);
    }
}

/* ---------- REALITY LAYER ---------- */

.grid > .card:first-child {
    position: relative;
}

.grid > .card:first-child h2 {
    animation: rivalixSignal 2.4s ease-in-out infinite;
}

/* ---------- OPPORTUNITY ---------- */

.grid > .card:nth-child(2) {
    position: relative;
}

.grid > .card:nth-child(2) h2 {
    animation: rivalixSignal 1.8s ease-in-out infinite;
}

/* ---------- MONEY / RISK VISUAL IMPACT ---------- */

#mAtRisk,
#mRecovered {
    font-family: var(--display);
    font-weight: 900;
    letter-spacing: -0.035em;
    transition:
        transform .3s ease,
        filter .3s ease,
        text-shadow .3s ease;
}

#mAtRisk {
    text-shadow:
        0 0 12px rgba(240,104,78,.18);
}

#mRecovered {
    text-shadow:
        0 0 12px rgba(45,212,191,.18);
}

/* ---------- AI OPPORTUNITY ---------- */

.grid > .card h2 {
    transition:
        text-shadow .25s ease,
        transform .25s ease;
}

.grid > .card:hover h2 {
    text-shadow: 0 0 14px rgba(0,212,255,.25);
}

/* ---------- DECISION TIMELINE ---------- */

.grid > .card:nth-child(3) {
    position: relative;
}

.grid > .card:nth-child(3)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        180deg,
        transparent,
        var(--cyan),
        transparent
    );
    animation: timelineBeam 2.5s linear infinite;
}

@keyframes timelineBeam {
    0% {
        opacity: .25;
        transform: translateY(-20%);
    }
    50% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: .25;
        transform: translateY(20%);
    }
}

/* ---------- REVENUE FLOW MAP — MAIN EVENT ---------- */

.grid > .card:nth-child(4) {
    position: relative;
    overflow: hidden;
}

.grid > .card:nth-child(4)::after {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(0,255,65,.07),
        transparent
    );

    animation: revenueFlowSweep 3.8s ease-in-out infinite;
}

@keyframes revenueFlowSweep {
    0% {
        left: -30%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

/* ---------- LIVE EVENT STREAM ---------- */

.grid > .card:nth-child(5) {
    position: relative;
}

.grid > .card:nth-child(5) #events {
    font-family: var(--mono);
    font-size: 10px;
}

/* ---------- HEARTBEAT ---------- */

.grid > .card:nth-child(6) {
    animation: rivalixGlow 2s ease-in-out infinite;
}

/* ---------- COMPACT LOWER PANELS ---------- */

.grid > .card:nth-child(n+5) {
    padding-top: 12px;
    padding-bottom: 12px;
}

.grid > .card:nth-child(n+5) h2 {
    margin-bottom: 7px;
}

.grid > .card:nth-child(n+5) p {
    margin-bottom: 3px;
}

/* ---------- COMMAND CENTER TEXT ---------- */

.grid > .card span {
    transition:
        color .25s ease,
        text-shadow .25s ease;
}

.grid > .card span:not(:empty) {
    text-shadow: 0 0 8px rgba(0,212,255,.18);
}

/* ---------- BUTTONS ---------- */

.button {
    position: relative;
    overflow: hidden;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.button:hover {
    transform: translateY(-2px);
    filter: brightness(1.15);
    box-shadow: 0 0 18px rgba(0,212,255,.18);
}

.button:active {
    transform: translateY(0) scale(.98);
}

/* ---------- MOBILE ---------- */

@media (max-width: 799px) {

    .grid > .card:nth-child(4) {
        min-height: 0;
    }

    #mAtRisk,
    #mRecovered {
        font-size: 28px;
    }

    .grid > .card:nth-child(n+5) {
        padding: 10px 12px;
    }
}