fix: resolve compiler conflict in providers.ts, inline style in PrintableReport and implement mobile responsiveness

components/Header.tsx

@@ -71,11 +71,11 @@ export const Header: React.FC<HeaderProps> = ({ onReset, onClearKey, hasKey, pro
           {hasKey && (
             <button
               onClick={onClearKey}
-              className="hidden sm:flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium text-slate-500 hover:text-red-500 hover:bg-red-50 dark:text-slate-400 dark:hover:bg-red-900/20 transition-all border border-transparent hover:border-red-200 dark:hover:border-red-900"
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium text-slate-500 hover:text-red-500 hover:bg-red-50 dark:text-slate-400 dark:hover:bg-red-900/20 transition-all border border-transparent hover:border-red-200 dark:hover:border-red-900"
               title="Alterar Chave de API"
             >
               <SignOutIcon className="w-4 h-4" />
-              <span>Sair</span>
+              <span className="hidden sm:inline">Sair</span>
             </button>
           )}
 

components/PrintableReport.tsx

@@ -12,7 +12,6 @@ export const PrintableReport: React.FC<PrintableReportProps> = ({ reports }) =>
       id="printable-report-container" 
       data-report={JSON.stringify(reports)}
       className="light bg-white text-slate-900 flex flex-col gap-8"
-      style={{ background: 'white' }}
     >
       {reports.map((report, idx) => (
         <div key={idx} className="report-page bg-white w-full h-auto">

components/ReportDisplay.tsx

@@ -33,7 +33,7 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
   const confidence = report?.confidence || 0;
 
   return (
-    <div className="animate-fade-in w-full max-w-[210mm] mx-auto bg-white dark:bg-slate-900 shadow-xl print:shadow-none print:m-0 print:p-[8mm_12mm] p-[8mm] sm:p-[10mm_12mm] relative flex flex-col justify-between text-slate-800 dark:text-slate-200 border border-slate-200 dark:border-slate-800 rounded-lg print:rounded-none h-auto">
+    <div className="animate-fade-in w-full max-w-[210mm] mx-auto bg-white dark:bg-slate-900 shadow-xl print:shadow-none print:m-0 print:p-[8mm_12mm] p-4 sm:p-6 md:p-8 relative flex flex-col justify-between text-slate-800 dark:text-slate-200 border border-slate-200 dark:border-slate-800 rounded-lg print:rounded-none h-auto">
       
       {/* Cabeçalho (Header) */}
       <header className="border-b border-slate-100 dark:border-slate-800 pb-2.5">
@@ -137,8 +137,8 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
               2. Propriedades Mecânicas
             </h3>
             <div className="flex-grow border border-slate-100 dark:border-slate-800/60 rounded-xl overflow-hidden bg-white dark:bg-slate-900 shadow-[0_2px_10px_-3px_rgba(6,81,237,0.05)] flex flex-col justify-between">
-              <div className="overflow-hidden">
-                <table className="w-full table-fixed text-left border-collapse text-xs">
+              <div className="overflow-x-auto min-w-0 w-full scrollbar-none">
+                <table className="w-full min-w-[320px] sm:min-w-0 table-fixed text-left border-collapse text-xs">
                   <thead>
                     <tr className="bg-slate-50/80 dark:bg-slate-800/40 border-b border-slate-50 dark:border-slate-800/60 text-[9px] text-slate-500 dark:text-slate-400 font-bold uppercase tracking-wider">
                       <th className="py-0.5 px-1 w-[35%]">Propriedade</th>
@@ -191,8 +191,8 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
               3. Composição Química (%)
             </h3>
             <div className="flex-grow border border-slate-100 dark:border-slate-800/60 rounded-xl overflow-hidden bg-white dark:bg-slate-900 shadow-[0_2px_10px_-3px_rgba(6,81,237,0.05)] flex flex-col justify-start">
-              <div className="overflow-hidden">
-                <table className="w-full table-fixed text-left border-collapse text-xs">
+              <div className="overflow-x-auto min-w-0 w-full scrollbar-none">
+                <table className="w-full min-w-[320px] sm:min-w-0 table-fixed text-left border-collapse text-xs">
                   <thead>
                     <tr className="bg-slate-50/80 dark:bg-slate-800/40 border-b border-slate-50 dark:border-slate-800/60 text-[9px] text-slate-500 dark:text-slate-400 font-bold uppercase tracking-wider">
                       <th className="py-0.5 px-1.5 w-[15%]">Elem.</th>