:root {
    --color-primary: #2a9d8f;
    --color-primary-hover: #23897d;
}

body {
    font-family: system-ui, sans-serif;
    max-width: 960px;
    margin: 30px auto;
    padding: 0 16px; 
    color: #222; 
    line-height: 1.5;
}

.landing {
    text-align: center; 
    margin-top: 80px; 
}

.landing p {
    max-width: 500px; 
    margin: 16px auto 32px; 
    color: #555;
}

.btn-mulai {
    font-size: 18px; 
    padding: 16px 32px;
    background: var(--color-primary);
    color: white; 
    cursor: pointer;
    border-radius: 8px;
}

.btn-mulai:hover {
    background: var(--color-primary-hover)
}

h1 {
    font-size: 24px;
}

.link-kembali {
    color: var(--color-primary);
    text-decoration: none; 
    font-size: 16px;
}

.link-kembali:hover {
    text-decoration: underline;
}

.langkah {
    color: #888;
    font-size: 13px; 
    margin: 1px 0 16px; 
}

form fieldset {
    margin-bottom: 24px;
    padding: 16px 32px; 
    border: 1px solid #ddd; 
    border-radius: 6px;
}

form legend {
    font-weight: bold; 
}

form label {
    display: block;
    padding: 16px; 
    cursor: pointer; 
    border-radius: 4px;
}

form label:hover {
    background: #f0f0f0;
}

.btn-lanjut {
    font-size: 18px; 
    padding: 16px 32px; 
    background: var(--color-primary);
    color: white;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

.btn-lanjut:hover {
    background: var(--color-primary-hover);
}

.catatan {
    font-size: 13px;
    color: #666;
    background: #f5f5f5;
    padding: 8px 12px;
    border-radius: 8px;
    margin: 8px 0;
}

.btn-connect {
    font-size: 16px;
    padding: 16px 24px;
    margin-top: 8px;
    background: var(--color-primary);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 8px;
}

.btn-dummy {
    font-size: 16px;
    padding: 16px 24px;
    cursor: pointer;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
}

.btn-connect:hover {
    background: var(--color-primary-hover);
}

.btn-dummy:hover {
    background: #f0fdda;
}

.bands-list {
    display: flex;
    gap: 16px;
    list-style: none;
    padding-left: 0;
    margin: 8px 0 16px;
}

.card {
    background: #f5f5f5;
    padding: 8px 16px;
    border-radius: 8px;
    min-width: 110px;
    border-left: 6px solid; 
}

.card .label small {
    color: #999; 
    font-weight: normal; 
    font-size: 11px; 
}

.card .value {
    font-size: 20px; 
    font-weight: bold; 
    display: block;
}

.card.band-delta { border-left-color: #3b82f6}
.card.band-theta { border-left-color: #8b5cf6}
.card.band-alpha { border-left-color: #10b981}
.card.band-beta { border-left-color: #f59e0b}
.card.band-gamma { border-left-color: #ef4444}

/* Tombol yang sedang dikunci (misalnya "Mulai Rekam" waktu data belum
   mengalir atau elektroda masih jelek). Tanpa ini tombol terkunci kelihatan
   sama persis dengan tombol biasa, jadi orang mengira aplikasinya rusak
   waktu diklik tapi tidak terjadi apa-apa. */
button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Status koneksi yang bermasalah (lihat handleStatusChange di eeg.js).
   Kelasnya sudah lama dipasang lewat JS tapi belum pernah diberi tampilan,
   jadi pesan error tampil sama saja dengan status biasa. Sekarang dibedakan,
   karena "relay belum dijalankan" adalah kesalahan yang paling sering
   terjadi dan paling mudah diperbaiki begitu terlihat. */
.status-error {
    color: #7f1d1d;
    background: #fee2e2;
    border-left: 6px solid #ef4444;
    padding: 8px 12px;
    border-radius: 8px;
}

/* Kualitas sinyal tiap elektroda (lihat bagian "Kualitas Sinyal" di
   eegmonitor.html). Warnanya sengaja dibikin lampu lalu lintas — hijau /
   kuning / merah — supaya peneliti bisa menilai sekilas tanpa membaca
   tulisannya dulu. Tulisannya tetap ada ("bagus"/"sedang"/"jelek") supaya
   tidak bergantung pada warna saja, karena tidak semua orang membedakan
   merah dan hijau dengan mudah. */
.kualitas-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding-left: 0;
    margin: 8px 0;
}

.kualitas-list li {
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 8px;
    background: #f5f5f5;
    border-left: 6px solid #ccc;
}

/* Selector-nya sengaja ".kualitas-list li.kualitas-bagus", bukan cuma
   ".kualitas-bagus" saja. Kalau cuma ".kualitas-bagus", specificity-nya
   (1 class) kalah dibanding ".kualitas-list li" di atas (1 class + 1
   elemen), jadi border-left-color abu-abu dari situ selalu menang dan
   warnanya tidak pernah kelihatan berubah — padahal className-nya sudah
   benar dipasang lewat JS. Menambahkan "li" di depan membuat specificity-nya
   pasti lebih tinggi, jadi tidak lagi kalah gara-gara urutan di file ini. */
.kualitas-list li.kualitas-bagus { border-left-color: #10b981; }
.kualitas-list li.kualitas-sedang { border-left-color: #f59e0b; }
.kualitas-list li.kualitas-jelek { border-left-color: #ef4444; }

.peringatan {
    font-size: 14px;
    color: #7f1d1d;
    background: #fee2e2;
    border-left: 6px solid #ef4444;
    padding: 8px 12px;
    border-radius: 8px;
    margin: 8px 0;
}

figure {
    margin-left: 0;
}

canvas {
    border: 1px solid #ddd; 
    border-radius: 6px; 
}

.btn-rekam {
    font-size: 16px;
    padding: 16px 24px;
    margin-top: 8px;
    background: var(--color-primary);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 8px;
}

#downloadCsvBtn {
    font-size: 16px;
    padding: 16px 24px;
    margin-top: 8px;
    background: var(--color-primary);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 8px;
}

#mulaiLagiBtn {
    font-size: 16px;
    padding: 16px 24px;
    cursor: pointer;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
}

#downloadCsvBtn:hover {
    background: var(--color-primary-hover);
}

#mulaiLagiBtn:hover {
    background: #f0fdda;
}