:root { --primary: #0056b3; --secondary: #6c757d; --success: #28a745; --danger: #dc3545; --white: #ffffff; }
body { font-family: 'Segoe UI', sans-serif; background: #f4f7f6; margin: 0; padding: 20px; }
#container { max-width: 900px; margin: auto; }
.card { background: var(--white); padding: 25px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin-bottom: 25px; }

/* TABS */
.tab-bar { display: flex; border-bottom: 2px solid #ddd; margin-bottom: 20px; }
.tab-btn { flex: 1; padding: 12px; border: none; background: #e9ecef; cursor: pointer; font-weight: bold; transition: 0.3s; }
.tab-btn.active { background: var(--primary); color: white; }
.tab-btn.disabled { opacity: 0.5; cursor: not-allowed; }
.tab-content { display: none; animation: fadeIn 0.4s; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.tab-btn {
    opacity: 1;
    cursor: pointer;
    background: #e9ecef;
}

/* Only use this if you explicitly want to lock a tab */
.tab-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ELEMENTS */
input, select { width: 100%; padding: 12px; margin: 8px 0; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
.row { display: flex; gap: 15px; flex-wrap: wrap; }
.btn { padding: 12px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; width: 100%; text-transform: uppercase; }
.primary { background: var(--primary); color: white; }
.secondary { background: var(--secondary); color: white; }
.danger { background: var(--danger) !important; color: white !important; }

/* MODAL & RECURSIVE */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); overflow-y: auto; }
.modal-content { background: white; margin: 5% auto; padding: 25px; width: 90%; max-width: 600px; border-radius: 8px; }
.close { float: right; font-size: 28px; cursor: pointer; }
.mat-block { border-left: 4px solid var(--primary); padding: 15px; background: #fdfdfd; margin-top: 15px; }
.n-inputs { margin-left: 20px; padding-left: 10px; border-left: 2px dashed #ddd; }
.v-in { width: 80px !important; display: inline-block; }
.btn-xs { font-size: 0.7em; padding: 3px 6px; cursor: pointer; margin: 2px; }

/* DISPLAYS */
.reference-box { background: #f0f7ff; padding: 10px; border-radius: 4px; font-weight: bold; color: var(--primary); }
.adjusted-display { font-size: 1.2em; font-weight: bold; color: var(--success); margin: 15px 0; }
.log-entry { display: flex; justify-content: space-between; border-bottom: 1px solid #eee; padding: 10px 0; }
#profit-status { font-weight: bold; margin-top: 15px; padding: 10px; border-radius: 4px; }