body { font-family: Arial, sans-serif; margin: 15px; background-color: #f0f2f5; color: #333; }
        .container { max-width: 1000px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); }

        .secao { border: 1px solid #ddd; padding: 15px; border-radius: 6px; background: #fff; margin-bottom: 20px; }
        .topo-config { background: #e7f3fe; border-left: 6px solid #0078d4; }

        .flex-lab { display: flex; gap: 20px; }
        .painel-pesos { width: 45%; border: 1px solid #ddd; padding: 15px; border-radius: 6px; background: #fafafa; text-align: center; }
        .painel-balanca { width: 55%; border: 1px solid #ddd; padding: 15px; border-radius: 6px; background: #fff; text-align: center; }

        input, select, button { padding: 8px; font-size: 0.95rem; margin: 5px 0; border-radius: 4px; border: 1px solid #ccc; }
        .acao-btn { background: #0078d4; color: white; border: none; font-weight: bold; cursor: pointer; padding: 10px 20px; }
        .acao-btn:hover { background: #005a9e; }
        .acao-btn:disabled { background: #cccccc; cursor: not-allowed; color: #666; }

        .peso-btn { background: #e1e1e1; border: 2px solid #aaa; padding: 10px 15px; font-size: 0.95rem; border-radius: 4px; cursor: pointer; margin: 4px; font-weight: bold; color: #333; }
        .peso-btn.ativo { background: #5c2d91; color: white; border-color: #401e68; }
        .peso-btn:disabled { background: #eee; border-color: #ddd; color: #aaa; cursor: not-allowed; }

        .bloco-peso-visual { font-size: 1.3rem; font-weight: bold; background: #8e8e93; color: white; padding: 15px; border-radius: 8px; margin: 15px auto; width: 60%; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .bloco-peso-visual.vazio { background: #e1e1e1; color: #999; box-shadow: none; border: 2px dashed #bbb; }

        .prato-balanca { width: 240px; height: 40px; background: #a8a8a8; border-bottom: 8px solid #7a7a7a; border-radius: 4px; margin: 15px auto; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: #fff; font-weight: bold; }
        .prato-balanca.ocupado { background: #6cce7f; border-bottom-color: #479e57; color: #107c41; }
        .display-balanca { font-size: 2.5rem; background: #1e1e1e; color: #00ff33; padding: 12px; display: inline-block; font-family: monospace; border-radius: 6px; width: 240px; text-align: right; }

        table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 0.9rem; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
        th { background-color: #0078d4; color: white; }
        .status-badge { display: inline-block; padding: 8px 15px; border-radius: 20px; font-weight: bold; margin: 10px 0; background-color: #fde7e9; color: #a80000; border: 1px solid #a80000; }
        .status-badge.luz-verde { background-color: #dff6dd; color: #107c41; border: 1px solid #107c41; }

        /* Layout do Grafico Expandido com Grid */
        .grafico-wrapper { margin-top: 25px; padding: 15px; background: #fafafa; border: 1px solid #ddd; border-radius: 6px; position: relative; }
        .painel-topo-grafico { display: flex; justify-content: space-between; align-items: center; padding-left: 85px; margin-bottom: 10px; }
        .eixo-y-titulo { font-size: 0.8rem; font-weight: bold; color: #555; }
        .legenda-grafico { display: flex; gap: 25px; font-size: 0.85rem; font-weight: bold; }
        .eixo-x-titulo { text-align: center; font-size: 0.8rem; font-weight: bold; color: #555; margin-top: 45px; }

        .barra-grafico-container { display: flex; align-items: flex-end; justify-content: space-around; height: 300px; border-left: 2px solid #333; border-bottom: 2px solid #333; padding: 0 10px 0 85px; background: #fff; position: relative; }
        .linha-zero-referencia { position: absolute; left: 85px; right: 0; top: 150px; height: 1px; border-top: 2px solid #333; z-index: 1; }
        .linha-grid-h { position: absolute; left: 85px; right: 0; height: 1px; border-top: 1px solid #eef0f2; z-index: 0; }
        .escala-y-valor { position: absolute; left: 10px; font-size: 0.75rem; font-weight: bold; color: #555; text-align: right; width: 65px; transform: translateY(-50%); }

        .coluna-grafico { display: flex; flex-direction: column; align-items: center; width: 65px; position: relative; height: 100%; justify-content: flex-end; z-index: 2; }
        .marcador-tendencia { font-family: Arial, sans-serif; font-size: 15px; font-weight: bold; color: #d83b01; position: absolute; left: 50%; transform: translate(-50%, -50%); z-index: 5; }
        .traço-repetibilidade-sup, .traço-repetibilidade-inf { position: absolute; width: 14px; height: 2px; background-color: #f2994a; left: 50%; transform: translate(-50%, -50%); z-index: 4; }
        .linha-conexao-re { position: absolute; width: 1px; background-color: rgba(242, 153, 74, 0.6); left: 50%; transform: translateX(-50%); z-index: 3; }
        .rotulo-coluna { font-size: 0.75rem; margin-top: 5px; font-weight: bold; text-align: center; width: 65px; }

/* Layout adaptável para telas estreitas e tablets. */
@media (max-width: 720px) {
    body { margin: 8px; }
    .container { padding: 12px; }
    .flex-lab { flex-direction: column; }
    .painel-pesos, .painel-balanca { box-sizing: border-box; width: 100%; }
    .display-balanca { box-sizing: border-box; max-width: 100%; }
    .secao { overflow-x: auto; }
    table { min-width: 760px; }
    .grafico-wrapper { overflow-x: auto; }
    .barra-grafico-container { min-width: 600px; }
}

.questao-metrologia { margin: 14px 0; padding: 12px; border: 1px solid #ddd; border-radius: 6px; }
.questao-metrologia legend { font-weight: bold; padding: 0 5px; }
.questao-metrologia label { display: block; margin: 8px 0; }
.questao-metrologia input[type="radio"] { margin-right: 6px; }
.feedback-exercicio { min-height: 1.2em; font-size: .9rem; font-weight: bold; }

.fontes-exercicios { max-width:700px; margin:18px auto 0; color:#59636a; font-size:.85rem; line-height:1.5; }
.incerteza-painel { border:1px solid #d5d9dd; border-radius:8px; padding:18px; background:#f7f9fb; }
.incerteza-progresso { max-width:760px; margin:0 auto 14px; font-weight:bold; color:#0078d4; }
.incerteza-conteudo { max-width:760px; min-height:180px; margin:auto; padding:16px; background:#fff; border:1px solid #e0e4e7; border-radius:6px; }
.incerteza-conteudo h4 { margin:0 0 10px; color:#263238; }
.incerteza-conteudo p { line-height:1.5; }
.incerteza-medicoes { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.incerteza-medicao { padding:8px 10px; background:#edf4f7; border:1px solid #c6d8df; border-radius:5px; font-family:monospace; }
.incerteza-dados { overflow-x:auto; margin:12px 0; }
.incerteza-dados table { min-width:420px; margin-top:0; background:#fff; }
.incerteza-dados th { background:#496875; }
.incerteza-entrada { margin:8px 12px 8px 0; }
.incerteza-entrada label { display:block; font-weight:bold; margin-bottom:3px; }
.incerteza-entrada input { width:150px; }
.incerteza-formula { padding:10px 12px; background:#f0f5ff; border-left:4px solid #0078d4; border-radius:4px; line-height:1.6; }
.incerteza-status { max-width:760px; min-height:24px; margin:12px auto; font-weight:bold; }
.incerteza-acoes { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
@media (max-width: 600px) {
    .incerteza-painel { padding:12px; }
    .incerteza-conteudo { padding:12px; }
}