/* Custom Theme Colors */
        :root {
            --color-primary: #0f4e8a; /* SCSG Emerald */
            --color-primary-light: #e6f3f0;
            --color-accent: #D4AF37; /* Gold */
            --color-text: #374151;
            --color-bg: #FAFAF9; /* Warm off-white */
        }

        body {
            font-family: 'Noto Sans JP', sans-serif;
            background-color: var(--color-bg);
            color: var(--color-text);
        }

        h1, h2, h3, .serif {
            font-family: 'Noto Serif JP', serif;
        }

        /* Chart Container Styling - MANDATORY */
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 500px; /* Max width constraint */
            margin-left: auto;
            margin-right: auto;
            height: 350px; /* Base height */
            max-height: 400px; /* Max height constraint */
        }

        @media (min-width: 768px) {
            .chart-container {
                height: 400px;
            }
        }

        /* Custom Utilities */
        .btn-hover-slide {
            transition: all 0.3s ease;
        }
        .btn-hover-slide:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .card-active {
            border-left: 4px solid var(--color-primary);
            background-color: white;
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }