body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #1a1a1a;
            color: #d1c7b1;
        }
        .bg-stone-950 { background-color: #0c0a09; }
        .bg-stone-800 { background-color: #292524; }
        .bg-stone-700 { background-color: #44403c; }
        .border-stone-600 { border-color: #57534e; }
        .text-amber-400 { color: #facc15; }
        .text-amber-500 { color: #f59e0b; }
        .text-stone-300 { color: #d6d3d1; }
        .text-stone-400 { color: #a8a29e; }
        .nav-item {
            transition: all 0.2s ease-in-out;
            filter: grayscale(80%);
            opacity: 0.6;
        }
        .nav-item.active, .nav-item:hover {
            filter: grayscale(0%);
            opacity: 1;
            transform: scale(1.1);
            background-color: #44403c;
        }
        .content-section {
            display: none;
        }
        .content-section.active {
            display: block;
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        .modal {
            transition: opacity 0.3s ease;
        }
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            height: 450px;
            max-height: 60vh;
        }
        @media (min-width: 768px) {
            .chart-container {
                height: 600px;
            }
        }
        .loader {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #f59e0b;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

/* === cleanup: remove default page margins & hide unused site menu placeholders === */
html, body { margin: 0; padding: 0; }
#top-menu, .site-menu, .site-navbar { display: none !important; height: 0 !important; overflow: hidden !important; }