:root {
    --crt-green: #8bffae;
    --crt-amber: #ffbf6e;
    --crt-blue: #6ad0ff;
    --crt-purple: #c594ff;
    --crt-cyan: #7af7f1;
    --panel-metal: #0f131a;
    --panel-highlight: #1c2533;
    --panel-border: #4a5568;
    --panel-shadow: rgba(0, 0, 0, 0.55);
    --text-main: #d8ffe1;
    --text-muted: #9fb4a8;
    --glow-green: 0 0 14px rgba(139, 255, 174, 0.38);
    --glow-amber: 0 0 14px rgba(255, 191, 110, 0.36);
    --scanline-color: rgba(0, 0, 0, 0.12);
    --noise-filter: contrast(1.05) brightness(1.03);
}

/* ===========================
   Base retro CPD look
   =========================== */
body.retro-cpd {
    background: #020403;
    color: var(--text-main);
    font-family: "IBM Plex Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;
    letter-spacing: 0.02em;
    text-shadow: 0 0 6px rgba(0, 255, 145, 0.12);
}

body.retro-cpd .cw-background {
    background: radial-gradient(circle at 20% 20%, rgba(0, 255, 204, 0.06), transparent 30%),
                radial-gradient(circle at 80% 70%, rgba(255, 194, 92, 0.08), transparent 32%),
                #050607;
    filter: var(--noise-filter);
}

.retro-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
    mix-blend-mode: screen;
    z-index: 0;
}

.retro-scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.03) 0px,
        rgba(255,255,255,0.01) 1px,
        transparent 2px,
        transparent 4px
    );
    opacity: 0.35;
    z-index: 0;
    animation: scan-move 14s linear infinite;
}

@keyframes scan-move {
    0% { background-position: 0 0; }
    100% { background-position: 0 120px; }
}

/* ===========================
   Structural frames
   =========================== */
.cw-header, .cw-footer, .cw-main {
    position: relative;
    z-index: 1;
}

.cw-header {
    background: linear-gradient(145deg, rgba(18,26,32,0.95), rgba(10,13,17,0.94));
    border: 1px solid rgba(122, 153, 166, 0.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 30px rgba(0,0,0,0.45);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cw-logo {
    color: var(--crt-amber);
    text-shadow: var(--glow-amber);
}

.cw-logo span { color: var(--crt-green); }

.cw-nav a {
    color: var(--text-main);
    border-color: rgba(139, 255, 174, 0.18);
    background: rgba(7, 11, 16, 0.6);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 0 12px rgba(0,0,0,0.4);
}

.cw-nav a:hover {
    background: rgba(13, 21, 30, 0.9);
    box-shadow: 0 0 12px rgba(123, 255, 188, 0.25);
}

.cw-main {
    max-width: 1240px;
    padding: 18px 18px 40px 18px;
}

.cw-title, .section-title {
    font-family: "DM Mono", "IBM Plex Mono", monospace;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--crt-green);
    text-shadow: 0 0 12px rgba(139, 255, 174, 0.45);
}

.cw-subtitle { color: var(--text-muted); }

.cw-separator { border-top: 1px dashed rgba(255,255,255,0.14); }

/* ===========================
   Retro panels / widgets
   =========================== */
.retro-panel {
    position: relative;
    margin: 22px 0;
    padding: 14px 14px 16px 14px;
    background: linear-gradient(160deg, rgba(18,24,32,0.9), rgba(10,14,18,0.92));
    border-radius: 14px;
    border: 1px solid rgba(96, 132, 156, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 20px 40px rgba(0,0,0,0.55);
    overflow: hidden;
}

.retro-panel::before, .retro-panel::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.6) 70%);
    box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
    z-index: 2;
}

.retro-panel::before { top: 10px; left: 10px; }
.retro-panel::after { top: 10px; right: 10px; }

.retro-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px 6px 4px;
    border-bottom: 1px solid rgba(124, 156, 178, 0.35);
    margin-bottom: 10px;
    position: relative;
    z-index: 3;
}

.retro-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 18px;
    color: var(--crt-green);
}

.retro-panel-subtitle {
    color: var(--text-muted);
    font-size: 13px;
    margin-top: -4px;
}

.retro-panel-label {
    background: linear-gradient(90deg, rgba(139,255,174,0.18), rgba(255,191,110,0.14));
    border: 1px solid rgba(139,255,174,0.4);
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text-main);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.55);
}

.retro-panel-body {
    position: relative;
    z-index: 3;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 14px 12px;
    box-shadow: inset 0 0 14px rgba(0,0,0,0.45);
}

.retro-heartbeat {
    position: relative;
    height: 3px;
    width: 100%;
    margin: 6px 0 10px 0;
    background: linear-gradient(90deg, transparent 0%, rgba(139,255,174,0.35) 50%, transparent 100%);
    animation: heartbeat 2.4s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(139,255,174,0.45));
}

@keyframes heartbeat {
    0% { opacity: 0.3; transform: scaleX(0.96); }
    35% { opacity: 1; transform: scaleX(1.04); }
    55% { opacity: 0.75; transform: scaleX(0.98); }
    100% { opacity: 0.4; transform: scaleX(0.94); }
}

.retro-panel.booted .retro-heartbeat {
    animation: heartbeat 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* CRT skin */
.crt-surface {
    background: radial-gradient(circle at 20% 20%, rgba(139,255,174,0.06), transparent 30%),
                radial-gradient(circle at 80% 80%, rgba(255,191,110,0.05), transparent 30%),
                rgba(3,5,7,0.85);
    box-shadow: inset 0 0 24px rgba(0,0,0,0.75), 0 0 24px rgba(139,255,174,0.08);
    backdrop-filter: blur(2px);
}

.crt-glow {
    box-shadow: 0 0 18px rgba(139,255,174,0.4);
}

/* ===========================
   LED system
   =========================== */
.led-txrx {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
    background: #0b0f12;
    position: relative;
}

.led-txrx::after {
    content: "";
    position: absolute;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 60%);
    opacity: 0.12;
}

.led-txrx.led-idle { background: radial-gradient(circle, #1a1f25 0%, #080b0f 60%); }
.led-txrx.led-active { background: radial-gradient(circle, var(--crt-green) 15%, #0c2718 65%); box-shadow: var(--glow-green); animation: led-breathe 2.6s ease-in-out infinite; }
.led-txrx.led-warning { background: radial-gradient(circle, var(--crt-amber) 18%, #2e1a07 70%); box-shadow: var(--glow-amber); animation: led-breathe 1.8s ease-in-out infinite; }
.led-txrx.led-error { background: radial-gradient(circle, #ff5a5f 20%, #2b0a0a 70%); box-shadow: 0 0 14px rgba(255, 90, 95, 0.55); animation: led-breathe 1s ease-in-out infinite; }

@keyframes led-breathe {
    0%, 100% { filter: brightness(0.9); transform: scale(0.96); }
    50% { filter: brightness(1.15); transform: scale(1); }
}

/* API color accents */
.api-binance .retro-heartbeat { background: linear-gradient(90deg, transparent 0%, rgba(139,255,174,0.65) 50%, transparent 100%); }
.api-bitmart .retro-heartbeat { background: linear-gradient(90deg, transparent 0%, rgba(197,148,255,0.55) 50%, transparent 100%); }
.api-kraken .retro-heartbeat { background: linear-gradient(90deg, transparent 0%, rgba(106,208,255,0.6) 50%, transparent 100%); }
.api-cmc .retro-heartbeat { background: linear-gradient(90deg, transparent 0%, rgba(102,178,255,0.6) 50%, transparent 100%); }
.api-feargreed .retro-heartbeat { background: linear-gradient(90deg, transparent 0%, rgba(255,191,110,0.7) 50%, transparent 100%); }

/* Tables + cards */
.retro-panel .bitmart-table,
.retro-panel .bitmart-table th,
.retro-panel .bitmart-table td,
.retro-panel .kr-card,
.retro-panel .fng-box,
.retro-panel .bitmart-wrapper {
    background: rgba(8,12,16,0.75);
    color: var(--text-main);
    border-color: rgba(139,255,174,0.2) !important;
}

.retro-panel .bitmart-table tr:hover { background: rgba(32,42,46,0.55); }
.retro-panel .bitmart-table th { text-transform: uppercase; letter-spacing: 0.03em; }

.kr-card, .bitmart-wrapper, .fng-box {
    box-shadow: inset 0 0 10px rgba(0,0,0,0.55), 0 0 10px rgba(139,255,174,0.12);
    border-radius: 10px !important;
}

/* Accordion accent */
.accordion-wrapper .acc-item {
    border-color: rgba(139,255,174,0.2);
    background: rgba(5,8,12,0.85);
    box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
}
.accordion-wrapper .acc-header {
    background: linear-gradient(90deg, rgba(15,22,29,0.9), rgba(10,14,18,0.8));
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.accordion-wrapper .acc-header.open { color: var(--crt-green); }
.accordion-wrapper .acc-panel { background: rgba(6,9,12,0.9); }

/* Utility badges */
.cw-tag, .status-state, .status-item.ok, .status-item.fail {
    font-family: "DM Mono", monospace;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.status-item.ok { box-shadow: 0 0 12px rgba(139,255,174,0.18); }
.status-item.fail { box-shadow: 0 0 12px rgba(255,90,95,0.25); }

/* Buttons */
.cw-btn {
    background: linear-gradient(180deg, rgba(14,20,28,0.95), rgba(6,10,14,0.95));
    color: var(--text-main);
    border: 1px solid rgba(139,255,174,0.35);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.65), 0 0 12px rgba(139,255,174,0.18);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cw-btn:hover { box-shadow: 0 0 16px rgba(139,255,174,0.28); }

/* Labels + forms */
.settings-row label { color: var(--text-main); }
.settings-row input { background: rgba(7,10,14,0.8); border: 1px solid rgba(139,255,174,0.25); color: var(--text-main); box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }

/* Heartbeat separators for headings with LEDs */
.led-title {
    position: relative;
    padding-top: 10px;
}

.led-title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(139,255,174,0.45) 50%, transparent 100%);
    animation: heartbeat 2.8s steps(4) infinite;
}

.small-note, .cw-subtitle.small { color: var(--text-muted); }

/* Activity pulse bar for panels */
.retro-meter {
    height: 8px;
    width: 100%;
    background: linear-gradient(90deg, rgba(30,40,46,0.8), rgba(8,12,16,0.9));
    border: 1px solid rgba(139,255,174,0.25);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.7);
    margin-top: 8px;
}

.retro-meter span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, rgba(139,255,174,0.75), rgba(255,191,110,0.65));
    width: 45%;
    animation: loading-stripe 3.2s linear infinite;
}

@keyframes loading-stripe {
    0% { transform: translateX(-20%); }
    100% { transform: translateX(120%); }
}

/* Terminal blink */
.terminal-caret { animation: blink 1.2s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Retro grids + cards */
.cw-grid .cw-card, .freq-item, .status-item, .credits-box {
    background: rgba(8,12,16,0.82);
    border: 1px solid rgba(139,255,174,0.22);
    box-shadow: inset 0 0 14px rgba(0,0,0,0.6), 0 0 14px rgba(139,255,174,0.12);
}

.freq-item h3 { color: var(--crt-amber); text-shadow: var(--glow-amber); }

.fetch-grid button { font-weight: 700; }

/* Oscilloscope line */
.retro-osc {
    position: relative;
    height: 32px;
    background: linear-gradient(180deg, rgba(5,8,12,0.8), rgba(3,5,8,0.7));
    border: 1px solid rgba(139,255,174,0.2);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 8px;
}

.retro-osc::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to right,
        rgba(139,255,174,0.08) 0,
        rgba(139,255,174,0.08) 1px,
        transparent 2px,
        transparent 6px
    );
    opacity: 0.7;
}

.retro-osc::after {
    content: "";
    position: absolute;
    left: -20%;
    top: 50%;
    width: 40%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(139,255,174,0.9), transparent);
    animation: osc-move 2.8s linear infinite;
}

@keyframes osc-move {
    0% { left: -40%; }
    100% { left: 110%; }
}

/* Error badge */
.error-text { color: #ff9b9f; text-shadow: 0 0 10px rgba(255,90,95,0.4); }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(139,255,174,0.5), rgba(255,191,110,0.45)); border-radius: 999px; }
::-webkit-scrollbar-track { background: rgba(5,8,12,0.6); }