/* GIAO DIỆN SOFT BRUTALISM & NAMESPACED - BASE CONVERTER */
.baseconv-container {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    max-width: 1000px; margin: 20px auto;
    border: 3px solid #111111; border-radius: 12px;
    box-shadow: 6px 6px 0px #111111; padding: 30px;
    background: #ffffff; color: #111111; box-sizing: border-box;
}

.baseconv-container * { box-sizing: border-box; }

.baseconv-title {
    font-family: 'Montserrat', sans-serif; font-size: 2rem; text-align: center;
    text-transform: uppercase; margin-top: 0; margin-bottom: 10px; font-weight: 900;
}

.baseconv-desc { text-align: center; color: #444; font-weight: 600; margin-bottom: 30px; line-height: 1.5; }

.baseconv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 40px; }

.baseconv-card {
    border: 3px solid #111111; border-radius: 10px; padding: 20px;
    box-shadow: 4px 4px 0px #111111; position: relative; transition: transform 0.2s;
}
.baseconv-card:focus-within { transform: translateY(-4px); box-shadow: 6px 6px 0px #111111; }

.baseconv-dec { background-color: #fdfd96; } /* Vàng */
.baseconv-bin { background-color: #b5ead7; } /* Xanh lá */
.baseconv-hex { background-color: #ffb7b2; } /* Đỏ nhạt */
.baseconv-oct { background-color: #cbaacb; } /* Tím nhạt */

.baseconv-label { display: block; font-weight: 800; font-size: 0.95rem; margin-bottom: 12px; color: #111; }

.baseconv-input-wrap { display: flex; align-items: stretch; gap: 8px; }

.baseconv-prefix {
    background-color: #111; color: #fff; font-family: 'Montserrat', sans-serif;
    font-weight: 900; font-size: 0.9rem; padding: 0 12px; display: flex;
    align-items: center; border-radius: 6px; letter-spacing: 1px;
}

.baseconv-input {
    flex: 1; padding: 12px 15px; font-size: 1.2rem; font-weight: 800;
    font-family: 'Courier New', Courier, monospace; border: 3px solid #111111;
    border-radius: 6px; outline: none; background-color: #fff; width: 100%;
}
.baseconv-input:focus { border-color: #2d7bb5; }
.baseconv-input.is-invalid { border-color: #e05a47; background-color: #ffe6e6; }

.baseconv-btn-copy {
    background-color: #fff; border: 3px solid #111; border-radius: 6px;
    padding: 0 12px; font-size: 1.2rem; cursor: pointer; box-shadow: 2px 2px 0px #111;
    display: flex; align-items: center; justify-content: center; transition: transform 0.1s;
}
.baseconv-btn-copy:active { transform: translate(2px, 2px); box-shadow: 0px 0px 0px #111; }

/* Custom Base Section */
.baseconv-custom-section {
    background-color: #f4f4f4; border: 3px dashed #111; border-radius: 10px; padding: 25px;
}

.baseconv-subtitle { font-family: 'Montserrat', sans-serif; font-size: 1.3rem; font-weight: 900; margin: 0 0 5px 0; }

.baseconv-custom-flex { display: flex; gap: 15px; flex-wrap: wrap; align-items: flex-start; }

.baseconv-custom-group { display: flex; flex-direction: column; }

.baseconv-btn-primary {
    background-color: #111; color: #fff; font-family: 'Montserrat', sans-serif;
    font-weight: 900; font-size: 1rem; padding: 0 20px; height: 50px;
    border: 3px solid #111; border-radius: 6px; cursor: pointer;
    box-shadow: 3px 3px 0px #888; transition: transform 0.1s;
}
.baseconv-btn-primary:active { transform: translate(3px, 3px); box-shadow: 0px 0px 0px #888; }

.baseconv-custom-result-wrap { margin-top: 20px; border-top: 2px solid #ccc; padding-top: 15px; }
.baseconv-custom-result-box { display: flex; gap: 10px; align-items: stretch; margin-top: 10px; }
.baseconv-custom-result {
    flex: 1; background-color: #fff; border: 3px solid #111; border-radius: 6px;
    padding: 15px; font-family: 'Courier New', Courier, monospace; font-size: 1.2rem;
    font-weight: 900; word-break: break-all; min-height: 50px; display: flex; align-items: center;
}

/* Toast */
#baseconvToast {
    visibility: hidden; min-width: 200px; background-color: #111111; color: #ffffff;
    text-align: center; border-radius: 8px; padding: 12px; position: fixed;
    z-index: 9999; bottom: 30px; left: 50%; transform: translateX(-50%);
    font-weight: bold; opacity: 0; transition: opacity 0.3s, bottom 0.3s;
}
#baseconvToast.show { visibility: visible; opacity: 1; bottom: 50px; }

@media (max-width: 850px) {
    .baseconv-grid { grid-template-columns: 1fr; }
    .baseconv-custom-flex { flex-direction: column; }
    .baseconv-custom-group { width: 100% !important; }
    .baseconv-btn-primary { width: 100%; margin-top: 10px; }
}