fix: explicit css media queries for printing to prevent blank pages

App.tsx

@@ -125,8 +125,8 @@ const App: React.FC = () => {
   };
 
   return (
-    <div className="min-h-screen print:bg-white print:m-0 print:p-0">
-      <div className="print:hidden">
+    <div className="min-h-screen">
+      <div className="app-main-content">
         {isLoading && <Loader />}
         <Header onReset={handleReset} onClearKey={handleClearKey} hasKey={hasKey} provider={provider} />
 
@@ -201,7 +201,7 @@ const App: React.FC = () => {
       </div>
 
       {reportsData && (
-        <div className="hidden print:block print:w-[210mm] print:mx-auto" aria-hidden="true">
+        <div className="app-print-wrapper">
           <PrintableReport reports={reportsData} />
         </div>
       )}

index.css

@@ -30,6 +30,13 @@
   animation: fade-in 0.5s ease-out forwards;
 }
 
+/* Screen specific rules */
+@media screen {
+  .app-print-wrapper {
+    display: none !important;
+  }
+}
+
 /* High-quality native browser printing */
 @media print {
   * {
@@ -37,9 +44,19 @@
     print-color-adjust: exact !important;
   }
   
+  .app-main-content {
+    display: none !important;
+  }
+  
+  .app-print-wrapper {
+    display: block !important;
+    position: relative !important;
+    width: 100% !important;
+  }
+  
   @page {
     margin: 0;
-    size: A4;
+    size: A4 portrait;
   }
 
   body {