/* =========================================================
   FIX: KONTRAS WARNA (TEKS PUTIH DI TERANG & TEKS HITAM DI GELAP)
   ========================================================= */

/* 1. FIX MODE TERANG: Menggelapkan tombol 'info' agar teks putih terbaca. 
   Warna cyan bawaan Bootstrap diubah menjadi teal agar senada dengan tema Earth Green. */
.btn-info, .bg-info { 
    background-color: #3a8b8b !important; 
    border-color: #3a8b8b !important; 
    color: #ffffff !important; 
}
.btn-info:hover { 
    background-color: #2d6b6b !important; 
}

/* =========================================================
   TEMA TOKYO KAWAII MANGA (CERAH, LUCU, POLKADOT)
   ========================================================= */

body.tokyo-mode {
    background-color: #fff9fb !important; 
    background-image: radial-gradient(#ffdae9 15%, transparent 16%); 
    background-size: 20px 20px;
    color: #4a4a4a !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: all 0.3s ease;
}

/* --- TRANSFORMASI NAVBAR MENJADI SIDEBAR KIRI (DIPERBAIKI) --- */
@media (min-width: 992px) {
    /* 1. Paksa Body untuk memberikan ruang kosong di sebelah kiri sebesar 270px */
    body.tokyo-mode {
        padding-left: 270px !important; 
    }

    /* 2. Menu Samping: Solid, Menempel, Tidak Transparan */
    body.tokyo-mode .navbar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 260px !important;
        height: 100vh !important;
        background-color: #ffffff !important; /* Warna solid putih, hapus transparansi */
        opacity: 1 !important;
        backdrop-filter: none !important; /* Matikan efek glassmorphism sebelumnya */
        border-right: 4px solid #000 !important; 
        border-bottom: none !important;
        z-index: 9999 !important; /* Paksa selalu berada di lapisan paling atas */
        overflow-y: auto !important; /* Jika menu kepanjangan, bisa di-scroll */
        box-shadow: 8px 0 0 rgba(255, 105, 180, 0.2) !important;
        align-items: flex-start !important;
        padding: 20px !important;
    }

    /* 3. Perbaiki Tata Letak Container di dalam Navbar */
    body.tokyo-mode .navbar > .container,
    body.tokyo-mode .navbar > .container-fluid {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        padding: 0 !important;
    }

    body.tokyo-mode .navbar-brand {
        margin-bottom: 30px;
        font-weight: 800;
        font-size: 1.5rem;
        color: #ff69b4 !important; 
        border-bottom: 3px solid #000;
        width: 100%;
        padding-bottom: 10px;
    }

    /* 4. Susun Item Menu ke Bawah */
    body.tokyo-mode .navbar-collapse {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        align-items: flex-start !important;
    }

    body.tokyo-mode .navbar-nav {
        flex-direction: column !important;
        width: 100% !important;
    }

    body.tokyo-mode .nav-item {
        width: 100%;
        margin-bottom: 8px;
    }

    body.tokyo-mode .nav-link {
        border-radius: 12px !important;
        padding: 10px 15px !important;
        border: 2px solid transparent;
        font-weight: 700;
        display: block;
        width: 100%;
    }
    
    body.tokyo-mode .nav-link:hover {
        background-color: #ffdae9 !important;
        border-color: #000 !important;
        color: #000 !important;
        transform: translate(-2px, -2px);
        box-shadow: 4px 4px 0 #000 !important;
    }
}

/* --- ELEMEN VISUAL ALA KOMIK (KAWAII) --- */
/* (Biarkan sisa kode card, button, form yang dari jawaban sebelumnya tetap ada di bawah sini) */
body.tokyo-mode .card {
    background: #ffffff !important;
    border: 3px solid #000 !important; 
    border-radius: 20px !important;
    box-shadow: 8px 8px 0px #ffdae9 !important; 
    overflow: hidden;
    margin-bottom: 20px;
}

body.tokyo-mode .card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 10px 10px 0px #ffb6c1 !important;
}

/* Label & Teks */
body.tokyo-mode h1, body.tokyo-mode h2, body.tokyo-mode h3, body.tokyo-mode h4, body.tokyo-mode h5 {
    color: #ff4d94 !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

/* Tombol ala Anime */
body.tokyo-mode .btn {
    border: 2px solid #000 !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    text-transform: uppercase;
    box-shadow: 4px 4px 0px #000 !important;
    transition: 0.1s;
}

body.tokyo-mode .btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0px 0px 0px #000 !important;
}

body.tokyo-mode .btn-primary {
    background: #ff69b4 !important; /* Strawberry */
    color: white !important;
}

body.tokyo-mode .btn-success {
    background: #b2fab4 !important; /* Mint Green */
    color: #2d5a2f !important;
}

/* Input Form */
body.tokyo-mode .form-control {
    border: 2px solid #000 !important;
    border-radius: 12px !important;
    background: #fff !important;
}

/* Polkadot Kecil di Tabel Header */
body.tokyo-mode .table-light {
    background-color: #fff0f5 !important;
    border-bottom: 3px solid #000 !important;
}

body.tokyo-mode .table td, body.tokyo-mode .table th {
    border-color: #fce4ec !important;
}

/* Badge Lucu */
body.tokyo-mode .badge {
    border: 1.5px solid #000;
    border-radius: 8px;
    padding: 5px 10px;
    color: #000 !important;
    font-weight: 700;
}

body.tokyo-mode .bg-warning { background-color: #fff176 !important; }
body.tokyo-mode .bg-info { background-color: #81d4fa !important; }

/* Custom Badge untuk Stok Rendah */
body.tokyo-mode .bg-danger {
    background-color: #ff8a80 !important;
    box-shadow: 2px 2px 0 #000;
}

/* =========================================================
   DASHBOARD INTERAKTIF & AESTHETIC
   ========================================================= */
/* Hover Effect untuk Summary Cards */
.card-clickable { 
    cursor: pointer; 
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s; 
}
.card-clickable:hover { 
    transform: translateY(-4px); 
    box-shadow: 0 12px 28px rgba(74, 112, 75, 0.25) !important; 
}

/* Progress Bar Target Harian */
.progress-target { 
    height: 10px; 
    border-radius: 10px; 
    background-color: #e9ecef; 
    overflow: hidden; 
}
.progress-target .progress-bar { 
    background: linear-gradient(135deg, #5c8b5d 0%, #4A704B 100%); 
    transition: width 1s cubic-bezier(0.16, 1, 0.3, 1); 
}

/* Top 3 PBF Scorecard Badges */
.pbf-rank-badge { 
    width: 38px; 
    height: 38px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 800; 
    border-radius: 50%; 
    font-size: 1.1rem; 
}
.rank-1 { background: linear-gradient(135deg, #FFDF00, #D4AF37); color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); }
.rank-2 { background: linear-gradient(135deg, #E0E0E0, #9E9E9E); color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); }
.rank-3 { background: linear-gradient(135deg, #CD7F32, #8B4513); color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); }

/* =========================================================
   WIDGET JAM ESTETIK (MEDIPOS)
   ========================================================= */
.aesthetic-clock {
    background: linear-gradient(135deg, #3a8b8b 0%, #2d6b6b 100%);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(58, 139, 139, 0.3);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    user-select: none;
    min-width: 90px;
}
.aesthetic-clock:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(58, 139, 139, 0.4);
    background: linear-gradient(135deg, #4A704B 0%, #3b5a3c 100%);
}
.clock-time {
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}
.clock-date {
    font-size: 0.7rem;
    font-weight: 600;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
    white-space: nowrap;
}
/* Class yang memicu munculnya tanggal saat di-klik */
.aesthetic-clock.show-date .clock-date {
    max-height: 20px;
    opacity: 1;
    margin-top: 2px;
}
/* Menyesuaikan Jam saat Mode Gelap aktif */
.dark-mode .aesthetic-clock {
    background: linear-gradient(135deg, #2c362d 0%, #1e241e 100%);
    border-color: #3b473b;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    color: #e0e6e0;
}
.dark-mode .aesthetic-clock:hover {
    background: linear-gradient(135deg, #3b473b 0%, #2c362d 100%);
}

        /* =========================================================
           TEMA HIJAU BUMI HANGAT (EARTH GREEN) & MODERN UI
           ========================================================= */
        :root { 
            --primary: #4A704B; /* Hijau Bumi (Forest/Sage Green) */
            --primary-hover: #3b5a3c;
            --bg: #F4F6F2; /* Putih tulang kehijauan */
            --surface: #ffffff;
            --text-main: #2c362d;
            --card-shadow: 0 8px 24px rgba(74, 112, 75, 0.08); 
        }

        /* Mengaktifkan Smooth Scroll Global */
        html { scroll-behavior: smooth; }
        
        body { 
            background-color: var(--bg); 
            color: var(--text-main); 
            /* Memastikan Font Modern Termuat */
            font-family: 'Plus Jakarta Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
            font-size: 0.9rem; 
            transition: background-color 0.3s, color 0.3s; 
            letter-spacing: -0.2px;
        }
        
        /* ---------------------------------------------------------
           NAVBAR (HEADER) - HIJAU BUMI SOLID EYE-CATCHING
           --------------------------------------------------------- */
        .navbar { 
            background: linear-gradient(135deg, #5c8b5d 0%, #4A704B 100%) !important; 
            box-shadow: 0 4px 15px rgba(74, 112, 75, 0.3); 
            border-bottom: none !important; 
            padding: 12px 0;
            z-index: 1040;
        }
        .navbar-brand { color: #ffffff !important; }
        #btnDarkMode { color: #ffffff; border-color: rgba(255,255,255,0.4); }
        #btnDarkMode:hover { background-color: rgba(255,255,255,0.2); }
        
        /* Icon Garis 3 (Menu HP) jadi Putih */
        .navbar-toggler { border-color: rgba(255,255,255,0.4) !important; }
        .navbar-toggler-icon { filter: brightness(0) invert(1); } 

        .nav-link { 
            cursor: pointer; 
            font-weight: 600; 
            color: #eaf0ea !important; 
            border-radius: 8px; 
            padding: 8px 16px !important; 
            margin: 0 4px; 
            transition: all 0.2s ease; 
        }
        .nav-link:hover, .nav-link.active { 
            background-color: rgba(255,255,255,0.2) !important; 
            color: #ffffff !important; 
            transform: translateY(-1px);
        }

        /* ---------------------------------------------------------
           MENU MOBILE (DI KIRI, BUKA KIRI KE KANAN, HIJAU)
           --------------------------------------------------------- */
        @media (max-width: 991.98px) {
            .navbar-collapse { 
                background: linear-gradient(135deg, #5c8b5d 0%, #3b5a3c 100%) !important; 
                padding: 15px; 
                border-radius: 12px; 
                box-shadow: 0 15px 35px rgba(0,0,0,0.4) !important; 
                position: absolute; 
                top: 100%; 
                left: 15px; /* Pindah ke Kiri */
                right: auto; 
                width: max-content; 
                min-width: 220px; 
                z-index: 9999 !important; 
                border: 1px solid #7cb37d; 
                transform-origin: top left; /* Animasi dari kiri atas */
                animation: fadeInMenuLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            }

            @keyframes fadeInMenuLeft {
                from { opacity: 0; transform: translateX(-20px) scale(0.95); }
                to { opacity: 1; transform: translateX(0) scale(1); }
            }

            .navbar-nav { align-items: flex-start !important; }
            .nav-link, .dropdown-item { 
                text-align: left !important; 
                width: 100%; 
                border-bottom: 1px dashed rgba(255,255,255,0.2); 
                color: #ffffff !important; 
            }
            .nav-link:hover, .nav-link.active, .dropdown-item:hover { 
                background-color: rgba(255,255,255,0.15) !important; 
                color: #ffffff !important; 
            }
            .dropdown-menu { 
                border: none; 
                background: rgba(0, 0, 0, 0.15) !important; 
                margin-left: 10px; 
                border-left: 3px solid #a3c9a3; 
                border-radius: 0 8px 8px 0; 
                padding-top: 5px;
                padding-bottom: 5px;
            }
        }

        /* ---------------------------------------------------------
           KARTU & ANIMASI MENU (CUBIC-BEZIER)
           --------------------------------------------------------- */
        .card { 
            background: var(--surface); 
            border: 1px solid rgba(74, 112, 75, 0.08); 
            border-radius: 16px; 
            box-shadow: var(--card-shadow); 
            margin-bottom: 1.25rem; 
            padding: 1.5rem; 
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
        }
        .card:hover { box-shadow: 0 12px 28px rgba(74, 112, 75, 0.12); transform: translateY(-2px); }

        .menu-section { 
            display: none; 
            animation: fadeInMenu 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
        }
        @keyframes fadeInMenu {
            from { opacity: 0; transform: translateY(20px) scale(0.98); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* ---------------------------------------------------------
           TOMBOL (BUTTON) - FIX WARNA TEKS AGAR SELALU KELIHATAN
           --------------------------------------------------------- */
        .btn { 
            border-radius: 8px; 
            font-weight: 600; 
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
            letter-spacing: 0.3px; 
        }
        /* FIX: Memastikan Primary selalu hijau dengan teks putih terang */
        .btn-primary { background-color: var(--primary) !important; border-color: var(--primary) !important; color: #ffffff !important; }
        .btn-primary:hover { background-color: var(--primary-hover) !important; border-color: var(--primary-hover) !important; color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(74, 112, 75, 0.3); }
        
        .btn-outline-primary { color: var(--primary) !important; border-color: var(--primary) !important; background-color: transparent; }
        .btn-outline-primary:hover { background-color: var(--primary) !important; color: #ffffff !important; }

        /* FIX: Paksa warna putih untuk tombol lain agar tidak transparan */
        .btn-success, .btn-info, .btn-danger { color: #ffffff !important; }
        .btn-warning { color: #212529 !important; } /* Tombol kuning teks harus gelap */

        /* ---------------------------------------------------------
           FORM & TABEL
           --------------------------------------------------------- */
        .form-control, .form-select { 
            border-radius: 8px; 
            border: 1px solid #c8d6c8; 
            background-color: #fcfdfc; 
            padding: 0.5rem 0.8rem; 
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
        }
        .form-control:focus, .form-select:focus { 
            border-color: var(--primary); 
            box-shadow: 0 0 0 0.25rem rgba(74, 112, 75, 0.15); 
            background-color: #fff;
        }

        .table { font-size: 0.85rem; vertical-align: middle; }
        .table thead th { 
            background-color: #eaf0ea !important; 
            border-bottom: 2px solid #c8d6c8; 
            color: var(--primary); 
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.5px;
            padding: 12px 8px;
        }
        .table-hover tbody tr:hover { background-color: #f4f8f4; }

        /* ---------------------------------------------------------
           SCROLLABLE TABLE & CUSTOM SCROLLBAR
           --------------------------------------------------------- */
        .mo-scrollable-table {
            max-height: 550px;
            overflow-y: auto;
            scroll-behavior: smooth;
            border-bottom: 1px solid #dee2e6;
        }
        .mo-scrollable-table thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background-color: #eaf0ea !important;
            box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
        }
        
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #c8d6c8; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #a3b3a3; }

        /* ---------------------------------------------------------
           DARK MODE DENGAN TONE HIJAU GELAP
           --------------------------------------------------------- */
        body.dark-mode { --bg: #1a1f1a; --surface: #222922; --text-main: #e0e6e0; background-color: var(--bg); color: var(--text-main); }
        .dark-mode .navbar { background: linear-gradient(135deg, #1f2e1f 0%, #152215 100%) !important; border-bottom: 1px solid #333d33 !important; }
        .dark-mode .card, .dark-mode .modal-content { background-color: var(--surface) !important; color: var(--text-main); border: 1px solid #333d33; box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
        .dark-mode .table { color: var(--text-main); }
        .dark-mode .table thead th, .dark-mode .table-light, .dark-mode .list-group-item { background-color: #2c362d !important; color: #8fbc8f !important; border-color: #3b473b; }
        .dark-mode .form-control, .dark-mode .form-select { background-color: #1e241e; color: #fff; border-color: #3b473b; }
        .dark-mode .form-control:focus, .dark-mode .form-select:focus { background-color: #2c362d; border-color: #8fbc8f; }
        .dark-mode .bg-light, .dark-mode .modal-header.bg-light { background-color: #2c362d !important; border-color: #3b473b !important; }
        .dark-mode .text-muted { color: #9aa89a !important; }
        .dark-mode .mo-scrollable-table thead th { background-color: #2c362d !important; box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.5); }
        .dark-mode ::-webkit-scrollbar-thumb { background: #3b473b; }

        /* ---------------------------------------------------------
           LOGIN SCREEN & BOTTOM NAV (MOBILE)
           --------------------------------------------------------- */
        #main-loading { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--bg); z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
        #login-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: linear-gradient(135deg, #eaf0ea 0%, #cddacb 100%); z-index: 9999; display: flex; align-items: center; justify-content: center; }
        .login-card { background: white; padding: 2.5rem; border-radius: 20px; box-shadow: 0 20px 40px rgba(74, 112, 75, 0.15); border-top: 6px solid var(--primary); width: 340px; text-align: center; }
        
        .bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #fff; box-shadow: 0 -4px 15px rgba(0,0,0,0.05); display: flex; justify-content: space-around; align-items: flex-end; padding: 10px 0 8px 0; z-index: 1050; border-top-left-radius: 24px; border-top-right-radius: 24px; }
        .bottom-nav-item { text-align: center; color: #a0aabf; font-size: 0.7rem; font-weight: 600; flex: 1; cursor: pointer; display: flex; flex-direction: column; align-items: center; transition: all 0.3s ease; }
        .bottom-nav-item span.icon { font-size: 1.4rem; margin-bottom: 3px; }
        .bottom-nav-item:hover, .bottom-nav-item:active { color: var(--primary); transform: translateY(-2px); }
        
        .bottom-nav-center-wrapper { position: relative; flex: 1.2; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
        .bottom-nav-center { position: absolute; top: -35px; background: linear-gradient(135deg, #6ba16d, #4A704B); width: 58px; height: 58px; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 6px 15px rgba(74, 112, 75, 0.4); color: white; font-size: 1.8rem; border: 4px solid var(--bg); z-index: 1060; transition: transform 0.2s; }
        .bottom-nav-center:active { transform: scale(0.9); }
        .bottom-nav-center-text { margin-top: 28px; font-size: 0.7rem; font-weight: 700; color: #4A704B; }
        
        @media (max-width: 991.98px) { body { padding-bottom: 85px; } }
        @media (min-width: 992px) { .bottom-nav { display: none !important; } }
        .dark-mode .bottom-nav { background-color: #1e1e1e; border-top: 1px solid #333; }
        .dark-mode .bottom-nav-center { border-color: #121212; }
   
           /* ---------------------------------------------------------
           FIX: WARNA TAB MENU (LAPORAN) AGAR TERLIHAT JELAS
           --------------------------------------------------------- */
        .nav-pills .nav-link {
            color: var(--primary) !important; 
            background-color: #eaf0ea !important; /* Latar hijau sangat muda */
            border-radius: 8px;
            margin-right: 8px;
            font-weight: 700;
        }
        .nav-pills .nav-link.active, .nav-pills .nav-link:hover {
            color: #ffffff !important; /* Teks putih */
            background-color: var(--primary) !important; /* Latar hijau bumi solid */
            box-shadow: 0 4px 10px rgba(74, 112, 75, 0.3);
        }
        
        /* Dukungan untuk Mode Gelap */
        .dark-mode .nav-pills .nav-link { 
            background-color: #1e241e !important; 
            color: #8fbc8f !important; 
        }
        .dark-mode .nav-pills .nav-link.active { 
            background-color: #4A704B !important; 
            color: #ffffff !important; 
        }
 
 /* =========================================================
   STYLE UNTUK MENU PEGAWAI (BOX DINAMIS & HEADER)
========================================================= */
.kotak-dinamis {
    background: white;
    border: 2px solid transparent !important;
    transition: all 0.3s ease;
}
.kotak-dinamis:hover {
    transform: translateY(-5px);
    border-color: #10b981 !important; /* Warna Emerald */
    background-color: #f0fdf4 !important;
}
.kotak-logout-dinamis {
    background: white;
    border: 2px solid transparent !important;
    transition: all 0.3s ease;
}
.kotak-logout-dinamis:hover {
    transform: translateY(-5px);
    border-color: #ef4444 !important; /* Warna Merah Logout */
    background-color: #fef2f2 !important;
}
#headerPegawai h4 {
    font-weight: 800; /* Font tebal untuk angka penting */
}

/* =========================================================
   STYLE UNTUK SUB-MENU (NESTED DROPDOWN KESAMPING)
========================================================= */
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%; /* Membuka ke arah kanan */
    margin-top: -8px;
    display: none; 
}
.dropdown-submenu:hover > .dropdown-menu {
    display: block; /* Muncul otomatis saat kursor diarahkan */
}

/* =========================================================
   MEDIPOS AESTHETIC GEN Z & GLASSMORPHISM AI
   ========================================================= */
.ai-glass-box {
    background: rgba(255, 193, 7, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.15);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-glass-box:hover {
    transform: translateY(-3px);
    background: rgba(255, 193, 7, 0.12);
}
.badge-ai-yellow {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    font-weight: 800;
    border: 1px solid #b45309;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
    padding: 6px 12px;
    border-radius: 8px;
    letter-spacing: 0.5px;
}