:root {
    /* Gradasi Cerah yang Diminta: Oranye -> Hijau Muda -> Kuning/Oranye */
    --grad-theme: linear-gradient(135deg, #FF8C00 0%, #b2ff59 50%, #FFC107 100%);
    --grad-theme-hover: linear-gradient(135deg, #F57C00 0%, #9ccc65 50%, #FFA000 100%);
           
    /* Warna Tombol Browse (Cyan cerah agar kontras dan modern) */
    --bttn-browse-bg: linear-gradient(180deg, #00d2ff 0%, #00a0e6 100%);
    --bttn-browse-hover: linear-gradient(180deg, #00b8e6 0%, #008cbd 100%);
            
    /* Solid Colors */
    --primary: #FF8C00;
    --accent: #8bc34a;
            
    /* Backgrounds & Text */
    --bg-main: #f0f4f8;
    --bg-card: #ffffff;
    --text-main: #2d3436;
    --text-muted: #636e72;
    --border-color: #dfe6e9;
    
    /* Shapes & Shadows */
    --radius-pill: 50px;
    --radius-card: 20px;
    --shadow-sm: 0 4px 10px rgba(0,0,0,0.05);
    --shadow-md: 0 15px 35px rgba(0,0,0,0.1);
    --shadow-bttn: 0 6px 15px rgba(0,0,0,0.2);
}	
.app-header {
    background: var(--grad-theme);
    /* background: var(--grad-bg); */
    padding: 2px 0px;
    color: #333; 
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.app-header span { font-weight: 500; margin-right: 8px; opacity: 0.8;}

.modern-select {
	background: linear-gradient(to right, #10b981, #eab308) !important;
    color: black !important;
    border: none !important;
    /*border-radius: 25px !important; */
    /*padding: 8px 20px !important; */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%238bc34a%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
}
/* =========================================
    MODERN NATIVE SELECT STYLES
========================================= */
.select-wrapper {
    background: linear-gradient(to right, #10b981, #eab308) !important;  
    position: relative;
    flex: 1;
    width: 10%;
}
/* Animasi saat dropdown di-klik / fokus */
.modern-select:focus {
    background: linear-gradient(to right, #10b981, #eab308) !important;
    color: black !important;
    border: none !important;
    /*border-radius: 25px !important; */
    /*padding: 8px 20px !important; */
    box-shadow: 2 4px 6px rgba(0,0,0,0.1) !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%238bc34a%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
}

/* Styling Options (Keterbatasan native select: hanya bisa ubah warna dasar dan font tebal) */
.modern-select option {
	background: linear-gradient(to right, #10b981, #eab308) !important;  
    font-weight:lighter;
    color: var(--text-dark);
    padding: 1px;
}

.modern-select:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
    transform: translateY(-1px) !important;
    opacity: 0.95 !important;
}

.modern-select.btn-sm {
    padding: 6px 18px !important;
    font-size: 13px !important;
}