body {
    font-family: 'Noto Sans SC', sans-serif;
    background-color: #02040a;
    color: #e2e8f0;
    overflow-x: hidden;
    margin: 0;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

.cyber-font { font-family: 'Orbitron', sans-serif; }
.festive-font { font-family: 'ZCOOL KuaiLe', cursive; }

#canvas-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; 
    background: radial-gradient(circle at 50% 50%, #2a0a18 0%, #0f0518 50%, #000000 100%);
}

.glass-panel {
    background: rgba(20, 5, 10, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(251, 191, 36, 0.2);
    box-shadow: 0 4px 30px rgba(220, 38, 38, 0.15);
}

.horseshoe-card {
    background: rgba(40, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(244, 63, 94, 0.3);
    border-radius: 2rem 2rem 1rem 1rem; 
    transition: all 0.3s ease;
}

.horseshoe-card:hover {
    transform: translateY(-5px);
    border-color: rgba(251, 191, 36, 0.8);
    box-shadow: 0 10px 40px -10px rgba(251, 191, 36, 0.3);
}

.active-tab {
    background: linear-gradient(180deg, #dc2626 0%, #ea580c 100%);
    color: white; border: 1px solid #fcd34d;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.5); border-radius: 1rem;
}

.inactive-tab {
    background: rgba(255, 255, 255, 0.05);
    color: #fca5a5; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem;
}

.text-gradient {
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #fcd34d, #f43f5e, #c084fc);
}

/* 3D Chart Container */
#chart-3d-wrapper {
    position: relative;
    width: 100%; height: 500px; overflow: hidden;
    border-radius: 2rem; background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(251, 191, 36, 0.3);
}
#chart-3d-canvas { width: 100%; height: 100%; cursor: move; }
.chart-label {
    position: absolute; color: #fcd34d; font-weight: bold; font-size: 0.8rem;
    pointer-events: none; text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* Chat Window */
.chat-window {
    width: 350px; height: 500px; border-radius: 1.5rem;
    display: none; flex-direction: column; overflow: hidden;
    background: rgba(30, 5, 10, 0.95); border: 1px solid rgba(251, 191, 36, 0.4);
    box-shadow: 0 0 50px rgba(220, 38, 38, 0.5); z-index: 100;
}
@media (max-width: 640px) { .chat-window { width: 90vw; height: 60vh; right: 5vw; bottom: 80px; } }
.chat-window.open { display: flex; animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }

.ai-message { background: rgba(251, 191, 36, 0.1); color: #fef3c7; border-left: 3px solid #f59e0b; }
.user-message { background: linear-gradient(135deg, #be123c 0%, #be185d 100%); color: white; border-right: 3px solid #f472b6; }

/* Couplets */
.couplet-scroll {
    background: linear-gradient(180deg, #7f1d1d 0%, #450a0a 100%);
    border: 2px solid #fcd34d; padding: 1.5rem 0.8rem;
    writing-mode: vertical-rl; text-orientation: upright;
    font-size: 1.8rem; font-weight: 900; color: #fcd34d;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5); border-radius: 0.5rem; letter-spacing: 0.2em;
}
@media (min-width: 768px) { .couplet-scroll { font-size: 2.5rem; padding: 2.5rem 1.2rem; letter-spacing: 0.5em; } }
.couplet-horizontal {
    background: linear-gradient(90deg, #7f1d1d 0%, #450a0a 100%);
    border: 2px solid #fcd34d; padding: 0.5rem 1.5rem;
    font-size: 1.8rem; font-weight: 900; color: #fcd34d;
    margin-bottom: 1.5rem; border-radius: 0.5rem;
}
.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }