@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: #FAFAFA; /* Soft white/gray background */
            color: #1A1A1A;
            -webkit-font-smoothing: antialiased;
        }

        html[dir="rtl"] body {
            font-family: 'Cairo', sans-serif;
        }

        /* Custom Tailwind config for brand colors fallback */
        .text-brand-dark { color: #0d3b0d; }
        .text-brand-main { color: #1A5D1A; }
        .text-brand-light { color: #3CB371; }
        .bg-brand-dark { background-color: #0d3b0d; }
        .bg-brand-main { background-color: #1A5D1A; }
        .bg-brand-light { background-color: #3CB371; }
        .bg-brand-soft { background-color: #f0fdf4; }
        .border-brand-main { border-color: #1A5D1A; }
        .border-brand-light { border-color: #3CB371; }

        .chart-container {
            position: relative;
            width: 100%;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            height: 350px;
            max-height: 450px;
        }

        .fade-in {
            animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

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

        .spinner {
            border: 4px solid rgba(26, 93, 26, 0.1);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border-left-color: #1A5D1A;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Realistic Nol Card CSS Art */
        .nol-card-silver {
            background: linear-gradient(135deg, #e4e9f2 0%, #caced4 100%);
            box-shadow: inset 0 0 15px rgba(255,255,255,0.8), 0 10px 20px -5px rgba(0, 0, 0, 0.15);
            position: relative;
            overflow: hidden;
        }
        .nol-card-silver::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0; height: 60%;
            background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg"><path d="M0,50 C30,10 60,40 100,0 L100,50 Z" fill="rgba(30,58,138,0.12)"/><path d="M0,50 C40,25 70,45 100,15 L100,50 Z" fill="rgba(147,51,234,0.08)"/></svg>') no-repeat bottom;
            background-size: cover;
            pointer-events: none;
        }
        .nol-card-silver::before {
            content: '';
            position: absolute;
            top: -50%; left: -50%; width: 200%; height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 60%);
            transform: rotate(30deg);
            pointer-events: none;
        }
        
        .nol-card-gold {
            background: linear-gradient(135deg, #e6c27a 0%, #fff2cd 40%, #c59b27 100%);
            box-shadow: inset 0 0 15px rgba(255,255,255,0.6), 0 10px 20px -5px rgba(0, 0, 0, 0.15);
            position: relative;
            overflow: hidden;
        }
        .nol-card-gold::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0; height: 60%;
            background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg"><path d="M0,50 C30,10 60,40 100,0 L100,50 Z" fill="rgba(139,69,19,0.15)"/><path d="M0,50 C40,25 70,45 100,15 L100,50 Z" fill="rgba(218,165,32,0.15)"/></svg>') no-repeat bottom;
            background-size: cover;
            pointer-events: none;
        }
        
        .nol-logo-container {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            line-height: 0.8;
        }
        .nol-logo-ar {
            font-family: 'Cairo', sans-serif;
            font-weight: 800;
            color: #374151; /* dark gray */
            font-size: 1.25rem;
        }
        .nol-logo-en {
            font-family: 'Arial', sans-serif;
            font-weight: 900;
            font-style: italic;
            color: #374151; /* dark gray */
            font-size: 1.5rem;
            letter-spacing: -1px;
        }

        .smart-chip {
            background: linear-gradient(135deg, #ffd700 0%, #d4af37 50%, #b8860b 100%);
            border-radius: 6px;
            border: 1px solid #a67c00;
            position: relative;
            box-shadow: inset 0 1px 3px rgba(255,255,255,0.5);
        }
        .smart-chip::after {
            content: '';
            position: absolute;
            top: 25%; left: 0; right: 0; bottom: 25%;
            border-top: 1px solid rgba(0,0,0,0.3);
            border-bottom: 1px solid rgba(0,0,0,0.3);
        }
        .smart-chip::before {
            content: '';
            position: absolute;
            left: 30%; top: 0; bottom: 0; right: 30%;
            border-left: 1px solid rgba(0,0,0,0.3);
            border-right: 1px solid rgba(0,0,0,0.3);
        }