*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,Helvetica,sans-serif;background-color:#f4f6f8;color:#333;min-height:100vh;display:block;padding:1rem}.app-container{max-width:960px;margin:0 auto}.card{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 4px 12px #0000001a;text-align:center}.card h1{color:#007acc;font-size:1.8rem;margin-bottom:2rem}.image-uploader{display:flex;flex-direction:column;gap:1rem;max-width:500px;margin:1rem auto;align-items:center}.preview img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 2px 6px #0000001a}.ocr-output{background:#f9f9f9;padding:1rem;border-radius:8px;white-space:pre-wrap;font-family:monospace;font-size:.9rem;border:1px solid #ddd}.error-text{color:#d00;font-weight:700}.save-button{margin-top:1rem;padding:.5rem 1rem;background-color:#0078d4;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:700;transition:background-color .2s ease}.save-button:hover{background-color:#005ea2}.table-wrapper{overflow-x:auto;width:100%}.scan-table{min-width:700px;width:100%;border-collapse:collapse;font-family:system-ui,sans-serif}.scan-table th,.scan-table td{padding:12px 16px;border:1px solid #ccc;text-align:left}.expired-row{background-color:#db5c5c}.expiring-soon-row{background-color:#efc20e}.valid-row{background-color:transparent}.delete-button{background-color:#ff4d4d;color:#fff;border:none;padding:4px 8px;cursor:pointer;border-radius:4px}.delete-button:hover{background-color:#e60000}@media (max-width: 600px){.scan-table th,.scan-table td{padding:8px 12px;font-size:.9rem}}.preview-panel{margin-top:1rem;padding:1rem;border:1px solid #ddd;border-radius:6px;background-color:#f9f9f9}.preview-title{margin-bottom:1rem;font-size:1.2rem}.preview-field{margin-bottom:1rem}.preview-field label{display:block;font-weight:700;margin-bottom:.25rem}.preview-input{width:100%;padding:.5rem;font-size:1rem;border:1px solid #ccc;border-radius:4px}.preview-actions{display:flex;gap:1rem;margin-top:1rem}.cancel-button{background-color:#eee;border:1px solid #ccc;padding:.5rem 1rem;border-radius:4px;cursor:pointer}.cancel-button:hover{background-color:#ddd}.refresh-button{background-color:#f0f0f0;border:1px solid #ccc;padding:.5rem 1rem;font-size:1rem;cursor:pointer;margin-bottom:1rem;border-radius:4px;transition:background-color .2s ease}.refresh-button:hover{background-color:#e0e0e0}.search-input{width:100%;max-width:400px;padding:.5rem;margin-bottom:1rem;font-size:1rem;border:1px solid #ccc;border-radius:4px}.export-button{background-color:#dff0d8;border:1px solid #a2cfa5;padding:.5rem 1rem;font-size:1rem;cursor:pointer;margin-top:.5rem;border-radius:4px;transition:background-color .2s ease}.export-button:hover{background-color:#cdeac0}.import-section{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:1rem;border:1px solid #ccc;border-radius:8px;background-color:#f9f9f9}.hidden-input{display:none}.import-section button{padding:.6rem 1rem;font-size:1rem;background-color:#0078d4;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease}.import-section button:hover{background-color:#005ea2}@media (max-width: 600px){.import-section{padding:.5rem;gap:.5rem}.import-section button{width:100%;font-size:.9rem}}.button-row{display:flex;gap:1rem;margin-top:1rem}.refresh-button,.export-button{padding:.6rem 1rem;font-size:1rem;background-color:#e6e5f0;color:#000;font-weight:700;border:2px solid #1209b8;border-radius:4px;cursor:pointer;transition:background-color .2s ease;margin-top:8px}.refresh-button:hover,.export-button:hover{background-color:#005ea2}.preview-table{width:100%;border-collapse:collapse;overflow-x:auto;display:block}.preview-table th,.preview-table td{padding:.75rem;border:1px solid #ddd;text-align:left;white-space:nowrap}.preview-modal{max-width:100%;overflow-x:auto}.image-advise{margin-top:2rem;border:1px solid #0800ff;padding:6px;color:#fc0000;background-color:#fff;border-radius:6px;font-weight:700}.refresh-note{margin-top:2rem;font-weight:700;font-size:1.1rem;color:#333;border-top:1px solid #ccc;padding-top:1rem}ul{margin-top:.5rem;padding-left:1.5rem}.bullet-point{margin-bottom:.5rem;font-size:.95rem;line-height:1.5;color:#555;position:relative}.bullet-point:before{content:"•";position:absolute;left:-1.2rem;color:#0078d4;font-size:1.2rem}
