body{font-family:Sarabun,sans-serif;height:100vh;width:100vw;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#f3f4f6;transition:background-color .3s,color .3s;overflow:hidden;margin:0}#root{width:100%;display:flex;justify-content:center;align-items:center}.scrollable-content{overflow-y:auto;padding-right:.5rem}.scrollable-content::-webkit-scrollbar{width:8px}.scrollable-content::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.scrollable-content::-webkit-scrollbar-thumb{background:#888;border-radius:10px}.scrollable-content::-webkit-scrollbar-thumb:hover{background:#555}.drop-area{border:2px dashed #93c5fd;background-color:#eff6ff;border-radius:.75rem;transition:all .2s ease;min-height:150px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;text-align:center}.drop-area.dragover{background-color:#dbeafe;border-color:#60a5fa;transform:scale(1.01)}.toast-container{position:fixed;top:1rem;right:1rem;z-index:3000;display:flex;flex-direction:column;gap:.5rem;max-width:300px}.toast{padding:.75rem 1rem;border-radius:.5rem;box-shadow:0 4px 6px #0000001a;color:#fff;opacity:.95;transform:translateY(0);transition:all .3s ease;animation:slideIn .3s ease-out}.toast.success{background-color:#10b981}.toast.error{background-color:#ef4444}.toast.info{background-color:#3b82f6}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:.95;transform:translateY(0)}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-overlay.show{opacity:1;visibility:visible}.modal-content{background-color:#fff;padding:2rem;border-radius:1rem;box-shadow:0 20px 25px -5px #0000001a;width:90%;max-width:600px;max-height:90vh;overflow-y:auto;position:relative}.modal-close-button{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.5rem;cursor:pointer;color:#9ca3af;transition:color .2s}.modal-close-button:hover{color:#4b5563}.file-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;margin-bottom:.25rem;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:.5rem;font-size:.85rem;color:#334155;cursor:grab;transition:box-shadow .2s}.file-item:hover{box-shadow:0 2px 4px #0000000d;border-color:#cbd5e1}.file-item .remove-btn{background:none;border:none;cursor:pointer;font-size:1.1rem;color:#ef4444;padding:0 .25rem;transition:color .2s}.file-item .remove-btn:hover{color:#dc2626}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#ffffffe6;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:2000;color:#374151;opacity:0;visibility:hidden;transition:opacity .3s ease}.loading-overlay.show{opacity:1;visibility:visible}.loader{border:5px solid #e5e7eb;border-top:5px solid #3b82f6;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite;margin:20px auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}body.dark{background-color:#111827;color:#d1d5db}body.dark .bg-white{background-color:#1f2937}body.dark input,body.dark select,body.dark textarea{background-color:#374151;border-color:#4b5563;color:#f9fafb}body.dark input::placeholder{color:#9ca3af}body.dark .drop-area{background-color:#374151;border-color:#60a5fa}body.dark .drop-area p{color:#93c5fd}body.dark .drop-area.dragover{background-color:#4b5563}body.dark .file-item{background-color:#374151;border-color:#4b5563;color:#d1d5db}body.dark .modal-content{background-color:#1f2937;color:#f3f4f6}body.dark .scrollable-content::-webkit-scrollbar-track{background:#374151}body.dark .scrollable-content::-webkit-scrollbar-thumb{background:#6b7280}body.dark .loading-overlay{background-color:#111827e6;color:#e5e7eb}body.dark .loading-overlay .loader{border-color:#374151;border-top-color:#3b82f6}