/* Conversor Base64 - portado para o padrao visual de calculadora-ip.css / conversor-url.css (2026-05-16).
   Referencia: css/conversor-url.css. Botoes de modo herdam .mode-btn de network-tools-transplant.css. */

.page-conversor-base64 .tool-dashboard { --dash-accent: #0c58b6; }

.page-conversor-base64 .form-group textarea#b64-input,
.page-conversor-base64 .form-group textarea#b64-output {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid #d8dfea;
    border-radius: 8px;
    background: #fff;
    font-size: 0.95rem;
    font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    resize: vertical;
    word-break: break-all;
}

.page-conversor-base64 .b64-variant-group {
    margin-top: 0.9rem;
    padding: 0.7rem 0.9rem;
    background: #f1f6fc;
    border: 1px solid #d8dfea;
    border-radius: 8px;
}
.page-conversor-base64 .b64-variant-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: #334155;
}
.page-conversor-base64 .b64-variant-radio {
    display: block;
    margin: 0.25rem 0;
    font-size: 0.92rem;
    color: #1e293b;
    cursor: pointer;
}
.page-conversor-base64 .b64-variant-radio input { margin-right: 0.4rem; }

/* ============================================================
   Resultado: tabelas multi-bloco (paridade visual com calculadora-ip)
   ============================================================ */
.page-conversor-base64 #b64-results {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.page-conversor-base64 .b64-results__panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem 1rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 12px;
}
.page-conversor-base64 .b64-results__group h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: #234061;
}
.page-conversor-base64 .b64-results__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #d8dfea;
    border-radius: 10px;
    overflow: hidden;
}
.page-conversor-base64 .b64-results__table th,
.page-conversor-base64 .b64-results__table td {
    padding: 0.55rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid #ecf0f6;
    font-size: 0.92rem;
    vertical-align: top;
}
.page-conversor-base64 .b64-results__table tr:last-child th,
.page-conversor-base64 .b64-results__table tr:last-child td {
    border-bottom: 0;
}
.page-conversor-base64 .b64-results__table th {
    width: 38%;
    font-weight: 700;
    color: #234061;
    background: #f8fafd;
}
.page-conversor-base64 .b64-results__table td { color: #1f2733; }
.page-conversor-base64 .b64-results__value {
    font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    word-break: break-all;
    white-space: pre-wrap;
    margin-right: 0.5rem;
}
.page-conversor-base64 .b64-results__copy {
    background: transparent;
    border: 1px solid #b9d6f7;
    color: #0c58b6;
    border-radius: 6px;
    padding: 0.12rem 0.5rem;
    font-size: 0.78rem;
    cursor: pointer;
    margin-left: 0.35rem;
    transition: background 0.15s ease;
}
.page-conversor-base64 .b64-results__copy:hover { background: #eaf3ff; }
.page-conversor-base64 .b64-results__alerts {
    background: #fff8e6;
    border: 1px solid #f3d780;
    border-radius: 10px;
    padding: 0.65rem 0.95rem;
}
.page-conversor-base64 .b64-results__alert {
    margin: 0.2rem 0;
    font-size: 0.9rem;
    color: #6b4a08;
    line-height: 1.4;
}

/* Dark mode */
body.dark-mode .page-conversor-base64 .form-group textarea#b64-input,
body.dark-mode .page-conversor-base64 .form-group textarea#b64-output {
    background: #1e293b;
    color: #d7dde7;
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .page-conversor-base64 .b64-variant-group {
    background: rgba(125, 211, 252, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .page-conversor-base64 .b64-variant-label { color: #94a3b8; }
body.dark-mode .page-conversor-base64 .b64-variant-radio { color: #d7dde7; }
body.dark-mode .page-conversor-base64 .b64-results__table {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .page-conversor-base64 .b64-results__table th {
    background: #243149;
    color: #d7dde7;
}
body.dark-mode .page-conversor-base64 .b64-results__table th,
body.dark-mode .page-conversor-base64 .b64-results__table td {
    border-bottom-color: rgba(255, 255, 255, 0.06);
    color: #d7dde7;
}
body.dark-mode .page-conversor-base64 .b64-results__copy {
    color: #7dd3fc;
    border-color: rgba(125, 211, 252, 0.4);
}
body.dark-mode .page-conversor-base64 .b64-results__copy:hover {
    background: rgba(125, 211, 252, 0.12);
}
body.dark-mode .page-conversor-base64 .b64-results__alerts {
    background: rgba(243, 215, 128, 0.12);
    border-color: rgba(243, 215, 128, 0.35);
}
body.dark-mode .page-conversor-base64 .b64-results__alert { color: #f3d780; }
body.dark-mode .page-conversor-base64 .b64-results__group h3 { color: #d7dde7; }

@media (max-width: 640px) {
    .page-conversor-base64 .b64-results__table th { width: 45%; }
}