/* Style Dasar Form Grid */
.bsc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
.bsc-field label { display: block; font-weight: bold; margin-bottom: 5px; font-size: 14px; }
.bsc-field input, .bsc-field select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
.bsc-field.full { grid-column: 1 / -1; }

/* Tombol */
.bsc-btn { width: 100%; padding: 12px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 16px; margin-bottom: 10px; transition: all 0.3s; }
.bsc-btn.primary { background: #0073aa; color: white; }
.bsc-btn.primary:hover { background: #005177; }
.bsc-btn.secondary { background: #28a745; color: white; } /* PDF Hijau */
.bsc-btn.svg { background: #6f42c1; color: white; } /* SVG Ungu */
.bsc-btn.svg:hover { background: #5a32a3; }

/* Loading State */
.bsc-btn.loading { opacity: 0.7; cursor: wait; }
.bsc-btn.loading::after { content: ' ⏳'; }

/* Hasil Area */
.bsc-result { background: #f9f9f9; padding: 20px; border-radius: 8px; border: 1px solid #e0e0e0; margin-top: 20px; text-align: center; }
.bsc-val { font-size: 36px; font-weight: 800; color: #0073aa; margin: 10px 0; }
.bsc-note { color: #666; font-style: italic; font-size: 12px; }
.bsc-hint { font-size: 11px; color: #999; margin-top: 5px; }

.bsc-canvas-wrapper {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

#bsc-preview-canvas {
    max-width: 100%;
    height: auto;
    background: #f9f9f9;
}

.bsc-canvas-note {
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: #888;
    margin-top: 5px;
}


/* Responsive Mobile */
@media (max-width: 600px) {
    .bsc-grid { grid-template-columns: 1fr; }
}