*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f0f2f5; color: #1a1a2e; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 2rem 1rem; }
    .container { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 1.25rem; }
    header { text-align: center; }
    header h1 { font-size: 1.6rem; font-weight: 700; color: #1a1a2e; }
    header p { margin-top: 0.3rem; font-size: 0.9rem; color: #6b7280; }
    #status-box { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 0.9rem 1.1rem; display: flex; align-items: center; gap: 0.75rem; font-size: 0.88rem; color: #374151; }
    .spinner { width: 18px; height: 18px; border: 2.5px solid #e5e7eb; border-top-color: #4f46e5; border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .check-icon { width: 18px; height: 18px; background: #10b981; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .check-icon::after { content: ''; width: 5px; height: 9px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg) translateY(-1px); }
    .progress-bar-wrap { flex: 1; height: 6px; background: #e5e7eb; border-radius: 99px; overflow: hidden; }
    .progress-bar { height: 100%; background: #4f46e5; border-radius: 99px; transition: width 0.2s ease; width: 0%; }
    .card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.5rem; }
    .card h2 { font-size: 1rem; font-weight: 600; margin-bottom: 1.1rem; color: #111827; }
    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .field { display: flex; flex-direction: column; gap: 0.35rem; }
    .field.full { grid-column: span 2; }
    label { font-size: 0.8rem; font-weight: 600; color: #374151; text-transform: uppercase; letter-spacing: 0.04em; }
    input, select { border: 1px solid #d1d5db; border-radius: 7px; padding: 0.55rem 0.75rem; font-size: 0.93rem; color: #111827; background: #fff; transition: border-color 0.15s, box-shadow 0.15s; width: 100%; }
    input:focus, select:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,0.12); }
    input:disabled, select:disabled { background: #f9fafb; color: #9ca3af; cursor: not-allowed; }
    .input-prefix { position: relative; }
    .input-prefix span { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); font-size: 0.9rem; color: #6b7280; pointer-events: none; }
    .input-prefix input { padding-left: 1.9rem; }
    button#btn-analisar { margin-top: 1.25rem; width: 100%; padding: 0.8rem; background: #4f46e5; color: #fff; font-size: 1rem; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; transition: background 0.15s, transform 0.1s; }
    button#btn-analisar:hover:not(:disabled) { background: #4338ca; }
    button#btn-analisar:active:not(:disabled) { transform: scale(0.98); }
    button#btn-analisar:disabled { background: #c7d2fe; cursor: not-allowed; }
    #resultado { display: none; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.5rem; }
    #resultado h2 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; color: #111827; }
    .classe-badge { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; font-size: 1.6rem; font-weight: 800; }
    .classe-A { background: #fef3c7; color: #92400e; }
    .classe-B { background: #d1fae5; color: #065f46; }
    .classe-C { background: #dbeafe; color: #1e40af; }
    .classe-D { background: #fed7aa; color: #9a3412; }
    .classe-E { background: #fee2e2; color: #991b1b; }
    .resultado-destaque { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
    .resultado-texto h3 { font-size: 1.1rem; font-weight: 700; }
    .resultado-texto p { font-size: 0.85rem; color: #6b7280; margin-top: 0.15rem; }
    .barras { display: flex; flex-direction: column; gap: 0.55rem; }
    .barra-item { display: grid; grid-template-columns: 28px 1fr 52px; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
    .barra-label { font-weight: 700; text-align: center; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; }
    .barra-track { height: 10px; background: #f3f4f6; border-radius: 99px; overflow: hidden; }
    .barra-fill { height: 100%; border-radius: 99px; transition: width 0.6s cubic-bezier(.4,0,.2,1); }
    .barra-pct { color: #374151; font-weight: 600; text-align: right; }
    .barra-A .barra-label { background: #fef3c7; color: #92400e; } .barra-A .barra-fill { background: #f59e0b; }
    .barra-B .barra-label { background: #d1fae5; color: #065f46; } .barra-B .barra-fill { background: #10b981; }
    .barra-C .barra-label { background: #dbeafe; color: #1e40af; } .barra-C .barra-fill { background: #3b82f6; }
    .barra-D .barra-label { background: #fed7aa; color: #9a3412; } .barra-D .barra-fill { background: #f97316; }
    .barra-E .barra-label { background: #fee2e2; color: #991b1b; } .barra-E .barra-fill { background: #ef4444; }