/* ========================================================
STYLE CSS FINAL
======================================================== */

body {
font-family: Arial, sans-serif;
background-color: #111;
color: #fff;
margin: 0;
padding: 20px;
}

.card {
background-color: #1c1c1c;
padding: 15px 20px;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

h1 {
font-size: 1.5em;
margin-bottom: 15px;
text-align: center;
}

.time {
text-align: center;
font-size: 1.2em;
margin-bottom: 15px;
}

.row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
flex-wrap: wrap; /* responsive */
}

.label {
font-weight: bold;
flex: 1 1 40%;
}

.value, .diff {
flex: 1 1 50%;
text-align: right;
min-width: 80px;
}

.diff.up {
color: #4caf50;
}

.diff.down {
color: #f44336;
}

.diff.neutral {
color: #ccc;
}

#spread, #profit {
margin-top: 10px;
text-align: center;
font-weight: bold;
font-size: 1.1em;
}

.btn {
background-color: #2e7d32;
border: none;
color: white;
padding: 8px 12px;
margin: 5px 3px 0 0;
border-radius: 6px;
cursor: pointer;
font-size: 0.9em;
}

.btn:hover {
background-color: #388e3c;
}

#accountPanel .account-card {
background-color: #2c2c2c;
padding: 10px;
border-radius: 8px;
margin-bottom: 10px;
}

#accountPanel .account-card b {
display: block;
font-size: 1.1em;
margin-bottom: 5px;
}

/* tombol akun individual: Reset/Stop, Delete, Limit */
#accountPanel .account-card button {
background-color: #ffffff; /* putih */
color: #000000;
margin-top: 5px;
}

#accountPanel .account-card button:hover {
background-color: #e0e0e0;
}

/* tombol global: + Tambah Akun, Reset Semua Akun */
#accountPanelWrapper > .btn {
background-color: #2e7d32;
color: white;
}

#accountPanelWrapper > .btn:hover {
background-color: #388e3c;
}

/* audio looping volume max */
audio#loopSound {
display: none;
}

/* responsive tweaks */
@media screen and (max-width: 400px) {
.row {
font-size: 14px;
}
.btn {
padding: 6px 10px;
font-size: 0.8em;
}
#accountPanel .account-card button {
font-size: 0.8em;
padding: 5px 8px;
}
}