:root {
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --text-color: #191919; --text-secondary: #787774; --bg-color: #FFFFFF;
    --bg-secondary: #F7F7F5; --border-color: rgba(0, 0, 0, 0.09);
    --green-color: #28A745; --red-color: #DC3545; --yellow-color: #FFC107; --blue-color: #007BFF;
}
body { font-family: var(--font-main); background-color: var(--bg-secondary); margin: 0; padding: 10px; color: var(--text-color); }
.container { max-width: 800px; margin: auto; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 8px; }

/* --- HEADER & TOTAL DISPLAY STYLES --- */
.header {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-color);
    text-align: right; /* Align the total to the right */
}
.header h3 {
    margin: 0;
    font-size: 1.3em;
    font-weight: 500;
    color: var(--text-color);
}
.header span {
    color: var(--blue-color);
    font-weight: 700;
    margin-left: 10px;
}

/* --- ADAPTIVE LAYOUT --- */
/* Default: 1-column layout for phones/portrait */
.cash-list {
    padding: 12px; display: grid; grid-template-columns: 1fr; gap: 0;
}
.row {
    display: flex; align-items: center; padding: 5px 0; gap: 12px; border-bottom: 1px solid var(--border-color);
}
.cash-list .row:last-child { border-bottom: none; }

/* 2-column layout for landscape/tablets/desktops */
@media (min-width: 720px) {
    .cash-list {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(5, auto);
        grid-auto-flow: column;
        gap: 0 20px;
    }
    .cash-list .row:nth-of-type(5), 
    .cash-list .row:nth-of-type(10) {
        border-bottom: none;
    }
}
.denom-group { display: flex; align-items: center; gap: 12px; }
.denom-image { width: 100px; display: block; }
.denom-text { font-weight: 500; font-size: 1.1em; }
.stock { font-size: .85em; color: var(--text-secondary); }
.controls { display: flex; align-items: center; justify-content: flex-end; gap: 6px; width: 100%; }
input[type=number] { width: 55px; height: 38px; font-family: var(--font-main); font-size: 1.1em; font-weight: 500; border: 1px solid var(--border-color); border-radius: 4px; text-align: center; background-color: #fafafa; }
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-btn { width: 38px; height: 38px; border: 1px solid var(--border-color); background-color: #fff; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color .1s; }
.stepper-btn:active { background-color: #f0f0f0; }
.stepper-btn svg { width: 22px; height: 22px; }
.btn-up svg { fill: var(--green-color); }
.btn-down svg { fill: var(--red-color); }

/* The .total-display styles are now removed */

.header h3.shake { animation: shake .5s; } /* NOTE: Changed from .total-display h3.shake */
@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}
.buttons { display: flex; padding: 12px; gap: 8px; border-top: 1px solid var(--border-color); }
.main-btn { flex-grow: 1; padding: 12px; font-family: var(--font-main); font-size: 1em; font-weight: 500; border: none; border-radius: 4px; color: #fff; cursor: pointer; }
.main-btn:disabled { opacity: .5; cursor: not-allowed; }
#btn-masuk { background-color: var(--green-color); }
#btn-keluar { background-color: var(--red-color); }
#btn-reset { background-color: var(--yellow-color); flex-grow: 0; width: 90px; }
.loader { padding: 40px; text-align: center; }