:root {
    /* == Warna Aksen (Kuning) == */
    --primary: #f1ea39; 
    --primary-light: #f5f06e; /* Sedikit lebih terang untuk hover jika perlu */
    --primary-dark: #d4c82a;  /* Lebih gelap untuk hover/status aktif */
    
    /* == Warna Dasar Dark Mode == */
    --dark: #000000;         /* Background utama */
    --dark-card: #222222;    /* Background untuk card/elemen menonjol */
    --light: #f3f4f6;        /* Warna teks utama */
    --secondary: #9ca3af;    /* Warna teks sekunder (abu-abu terang) */
    --border-color: #374151; /* Warna border gelap */

    /* == Warna Status (Mungkin perlu disesuaikan kontrasnya jika perlu) == */
    --success: #10b981; 
    --danger: #ef4444; 
    --warning: #f59e0b; 
    --info: #ffffff; 
}

* {
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

body {
    font-family: 'Inter', sans-serif; 
    line-height: 1.7; 
    /* == Background Gelap, Teks Terang == */
    color: var(--light); 
    background-color: var(--dark); 
    position: relative; 
}

/* Lab Header (Sudah gelap, mungkin perlu penyesuaian kecil jika --dark berubah) */
.lab-header {
    background-color: var(--dark-card); /* Header sedikit beda dari body */
    color: var(--light); 
    padding: 1rem 0; 
    position: sticky; 
    top: 0; 
    z-index: 100; 
    border-bottom: 1px solid var(--border-color); /* Tambah border tipis */
}

.lab-brand {
    display: flex; 
    align-items: center; 
    font-weight: 700; 
    font-size: 1.25rem; 
    color: var(--light); /* Pastikan teks brand terang */
}

.lab-controls {
    display: flex; 
    align-items: center; 
    gap: 1rem; 
    /* Kontrol mungkin perlu styling khusus jika ada tombol/ikon */
}

/* Main Lab Content */
.lab-content {
    max-width: 1140px; 
    margin: 0 auto; 
    padding: 2rem 1rem; 
}

/* Challenge Card */
.challenge-card {
    /* == Background Card Gelap == */
    background-color: var(--dark-card); 
    border-radius: 0.75rem; 
    overflow: hidden; 
    margin-bottom: 2rem; 
    /* == Bayangan mungkin kurang terlihat, bisa dihilangkan atau disesuaikan == */
    box-shadow: none; 
    border: 1px solid var(--border-color); /* Ganti shadow dengan border */
}

.challenge-header {
    /* == Header Card menggunakan warna aksen == */
    background: var(--primary); 
    /* == Teks pada background kuning harus gelap == */
    color: var(--dark); 
    padding: 1.25rem 1.5rem; 
    font-weight: 600; 
}

.challenge-body {
    padding: 1.5rem; 
    /* Teks di body card akan otomatis terang (dari body) */
}

/* Tabs Navigation */
.lab-tabs {
    display: flex; 
    border-bottom: 2px solid var(--border-color); /* Border gelap */
    margin-bottom: 1.5rem; 
}

.lab-tab {
    padding: 0.75rem 1.25rem; 
    font-weight: 500; 
    color: var(--secondary); /* Teks tab inaktif abu-abu terang */
    cursor: pointer; 
    border-bottom: 2px solid transparent; 
    margin-bottom: -2px; 
    transition: all 0.3s ease; 
}

.lab-tab.active {
    /* == Tab aktif menggunakan warna aksen == */
    color: var(--primary); 
    border-bottom-color: var(--primary); 
}

.lab-tab:hover {
    color: var(--primary-light); /* Hover sedikit lebih terang */
}

/* Tab Content */
.tab-content {
    display: none; 
}

.tab-content.active {
    display: block; 
}

/* Bank Interface Styles */
.bank-interface {
    background-color: var(--dark-card); /* Background gelap */
    border-radius: 0.75rem; 
    overflow: hidden; 
    box-shadow: none; /* Hilangkan shadow */
    border: 1px solid var(--border-color); /* Ganti dengan border */
    margin-bottom: 2rem; 
}

.bank-header {
    background-color: var(--primary); /* Background aksen */
    color: var(--dark); /* Teks gelap */
    padding: 1rem 1.5rem; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
}

.bank-brand {
    display: flex; 
    align-items: center; 
    font-weight: 600; 
    font-size: 1.25rem; 
}

.bank-url {
    background-color: rgba(0, 0, 0, 0.2); /* Background sedikit gelap di atas kuning */
    color: var(--dark); /* Pastikan teks tetap gelap */
    padding: 0.5rem 1rem; 
    border-radius: 0.5rem; 
    font-family: monospace; 
    font-size: 0.875rem; 
    cursor: pointer; 
    transition: background-color 0.3s ease; 
    user-select: all; 
}

.bank-url:hover {
    background-color: rgba(0, 0, 0, 0.3); 
}

.bank-content {
    padding: 1.5rem; 
     /* Teks terang dari body */
}

/* Button Styles */
.btn-custom {
    padding: 0.75rem 1.5rem; 
    font-weight: 600; 
    border-radius: 0.5rem; 
    transition: all 0.3s ease; 
    border: none; 
    cursor: pointer;
}

.btn-primary-custom {
    background-color: var(--primary); /* Background aksen */
    border-color: var(--primary); 
    color: var(--dark); /* Teks gelap */
}

.btn-primary-custom:hover {
    background-color: var(--primary-dark); /* Aksen lebih gelap */
    border-color: var(--primary-dark); 
    color: var(--dark); /* Teks tetap gelap */
    transform: translateY(-2px); 
    /* Shadow mungkin perlu disesuaikan atau dihilangkan di dark mode */
    box-shadow: 0 2px 4px -1px rgba(241, 234, 57, 0.2); 
}

/* Help and Hints */
.help-trigger {
    position: fixed; 
    bottom: 2rem; 
    right: 2rem; 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    background-color: var(--primary); /* Background aksen */
    color: var(--dark); /* Ikon/Teks gelap */
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.5rem; 
    cursor: pointer; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4); /* Shadow lebih gelap */
    transition: all 0.3s ease; 
    z-index: 1000; 
}

.help-trigger:hover {
    transform: scale(1.1); 
    background-color: var(--primary-dark); /* Aksen lebih gelap */
}

/* Modal Overlay */
.hints-modal, .success-modal {
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.7); /* Overlay lebih gelap */
    z-index: 1001; /* hints-modal z-index */
    align-items: center; 
    justify-content: center; 
}
.success-modal { z-index: 1002; } /* success-modal di atas hints */

/* Modal Content */
.hints-content, .success-content {
    background-color: var(--dark-card); /* Background modal gelap */
    border-radius: 0.75rem; 
    width: 100%; 
    max-width: 600px; /* hints-content max-width */
    max-height: 90vh; 
    overflow-y: auto; 
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* Shadow gelap */
    border: 1px solid var(--border-color);
    color: var(--light); /* Pastikan teks modal terang */
}
.success-content { max-width: 500px; text-align: center !important; padding: 2rem; display: flex !important; flex-direction: column !important;
    align-items: center !important; }

/* Modal Headers */
.hints-header {
    background-color: var(--primary); /* Background aksen */
    color: var(--dark); /* Teks gelap */
    padding: 1rem 1.5rem; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    border-bottom: 1px solid var(--primary-dark); /* Border bawah header */
}

.hints-header h3 {
    margin: 0; 
    font-size: 1.25rem; 
}

/* Modal Body */
.hints-body {
    padding: 1.5rem; 
}

/* Modal Close Button */
.hints-close {
    background: none; 
    border: none; 
    color: var(--dark); /* Warna ikon close gelap (di atas background kuning) */
    font-size: 1.5rem; 
    cursor: pointer; 
    transition: transform 0.3s ease; 
}

.hints-close:hover {
    transform: rotate(90deg); 
}

/* Terminal Output (Sudah cocok dengan dark mode) */
.terminal {
    background-color: #1e293b; 
    color: #e2e8f0; 
    font-family: 'Fira Code', monospace; 
    padding: 1.25rem; 
    border-radius: 0.5rem; 
    margin: 1.5rem 0; 
    overflow-x: auto; 
    border: 1px solid var(--border-color);
}

.terminal pre {
    margin: 0; 
    white-space: pre-wrap; 
}

/* Success Modal Specifics */
.success-icon {
    font-size: 4rem; 
    color: var(--success); /* Warna ikon success tetap */
    margin-bottom: 1rem; 
}

/* Confetti (Biarkan seperti adanya) */
.confetti { 
	    position: absolute;
            width: 10px;
            height: 10px;
            opacity: 0; }
@keyframes confettiDrop { 
	0% {
                transform: translateY(-100vh) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(720deg);
                opacity: 0;
            } }

/* Dashboard UI */
.dashboard-card {
    background-color: var(--dark-card); /* Background gelap */
    border-radius: 0.5rem; 
    box-shadow: none;
    border: 1px solid var(--border-color);
    margin-bottom: 1.5rem; 
    overflow: hidden; 
}

.dashboard-card-header {
    padding: 1rem 1.25rem; 
    background-color: var(--dark); /* Header sedikit lebih gelap dari card body */
    border-bottom: 1px solid var(--border-color); 
    font-weight: 600; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    color: var(--light); /* Teks header terang */
}

.dashboard-card-body {
    padding: 1.25rem; 
    /* Teks terang dari body */
}

/* Tabel */
.account-summary {
    width: 100%; /* Pastikan tabel mengisi card */
    border-collapse: collapse; /* Hapus spasi antar border */
}
.account-summary td, .account-summary th {
    padding: 0.75rem 1rem; 
    border-bottom: 1px solid var(--border-color); /* Border gelap */
    text-align: left;
}
.account-summary tr:last-child td,
.account-summary tr:last-child th {
    border-bottom: none; /* Hapus border di baris terakhir */
}

.account-summary th {
    font-weight: 500; 
    color: var(--secondary); /* Header tabel abu-abu terang */
}

.account-summary td {
    font-weight: 400; 
    color: var(--light); /* Data tabel terang */
}

/* Form Styling */
.form-label {
    font-weight: 500; 
    margin-bottom: 0.5rem; 
    display: block; 
    color: var(--light); /* Label terang */
}

.form-control-custom {
    width: 100%; 
    padding: 0.75rem 1rem; 
    border: 1px solid var(--border-color); /* Border gelap */
    background-color: var(--dark); /* Background input = background body */
    color: var(--light); /* Teks input terang */
    border-radius: 0.5rem; 
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; 
}
.form-control-custom::placeholder { /* Style placeholder */
    color: var(--secondary);
    opacity: 0.7;
}

.form-control-custom:focus {
    border-color: var(--primary); /* Border focus aksen kuning */
    background-color: var(--dark-card); /* Sedikit beda saat focus */
    /* == Shadow disesuaikan untuk dark mode == */
    box-shadow: 0 0 0 3px rgba(241, 234, 57, 0.3); /* Opacity sedikit dinaikkan */
    outline: none; 
}

.form-group {
    margin-bottom: 1.25rem; 
}

/* Alert Styles */
.alert-custom {
    border-radius: 0.5rem; 
    padding: 1rem 1.25rem; 
    margin-bottom: 1.5rem; 
    border-left: 4px solid transparent; 
    background-color: var(--dark-card); /* Background alert gelap */
    color: var(--light); /* Teks alert terang */
}

/* Hanya border kiri yang menunjukkan status */
.alert-info-custom { border-left-color: var(--info); }
.alert-success-custom { border-left-color: var(--success); }
.alert-warning-custom { border-left-color: var(--warning); }
.alert-danger-custom { border-left-color: var(--danger); }