:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#1f2937;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;font-family:inherit}#root{min-height:100vh;width:100%}button{font-family:inherit;cursor:pointer}code{font-family:Monaco,Menlo,Ubuntu Mono,Consolas,Courier New,monospace}.sql-card{background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;padding:20px;margin-bottom:20px;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease-in-out}.sql-card:hover{box-shadow:0 4px 6px #0000001a}.sql-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.sql-title-section{display:flex;align-items:center;gap:12px;flex:1}.sql-title{margin:0;font-size:18px;font-weight:600;color:#1f2937}.sql-type{padding:4px 8px;border-radius:4px;color:#fff;font-size:12px;font-weight:500;text-transform:uppercase}.sql-actions{display:flex;gap:8px}.action-btn{background:none;border:1px solid #d1d5db;border-radius:4px;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6b7280;transition:all .2s ease-in-out}.action-btn:hover{background-color:#f3f4f6;color:#374151}.edit-btn:hover{border-color:#3b82f6;color:#3b82f6}.copy-btn:hover{border-color:#10b981;color:#10b981}.format-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.delete-btn:hover{border-color:#ef4444;color:#ef4444}.delete-confirm-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000}.delete-confirm-modal{background:white;border-radius:8px;padding:24px;max-width:400px;width:90%;box-shadow:0 20px 25px -5px #0000001a}.delete-confirm-modal h3{margin:0 0 16px;color:#374151;font-size:18px;font-weight:600}.delete-confirm-modal p{margin:0 0 8px;color:#6b7280;line-height:1.5}.delete-confirm-modal p:last-of-type{margin-bottom:24px;font-weight:500;color:#ef4444}.confirm-actions{display:flex;gap:12px;justify-content:flex-end}.confirm-delete-btn,.cancel-delete-btn{padding:8px 16px;border-radius:6px;border:none;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease-in-out}.confirm-delete-btn{background-color:#ef4444;color:#fff}.confirm-delete-btn:hover{background-color:#dc2626}.cancel-delete-btn{background-color:#f3f4f6;color:#6b7280;border:1px solid #d1d5db}.cancel-delete-btn:hover{background-color:#e5e7eb;color:#374151}.sql-description{color:#6b7280;margin:0 0 16px;line-height:1.5}.sql-code-block{background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;overflow-x:auto}.sql-code-block pre{margin:0!important;padding:16px!important;font-family:Monaco,Menlo,Ubuntu Mono,Consolas,Courier New,monospace!important;font-size:14px!important;line-height:1.5!important;background:transparent!important;border-radius:0!important}.sql-code-block pre>div{white-space:pre-wrap;word-break:break-word}.sql-editor{border:1px solid #d1d5db;border-radius:6px;overflow:hidden;background:#f8fafc}.editor-field{padding:16px;border-bottom:1px solid #e2e8f0}.editor-field:last-of-type{border-bottom:none}.editor-field label{display:block;margin-bottom:8px;font-weight:500;color:#374151;font-size:14px}.sql-input,.sql-select{width:100%;border:1px solid #d1d5db;border-radius:4px;padding:8px 12px;font-size:14px;outline:none;transition:border-color .2s ease-in-out;background:white}.sql-input:focus,.sql-select:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.sql-textarea-description{width:100%;border:1px solid #d1d5db;border-radius:4px;padding:8px 12px;font-size:14px;line-height:1.5;resize:vertical;outline:none;transition:border-color .2s ease-in-out;background:white;font-family:inherit}.sql-textarea-description:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.sql-textarea{width:100%;border:1px solid #d1d5db;border-radius:4px;padding:12px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;line-height:1.5;resize:vertical;min-height:120px;outline:none;background:white;transition:border-color .2s ease-in-out}.sql-textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.editor-actions{display:flex;gap:8px;padding:12px 16px;background:#f1f5f9;border-top:1px solid #e2e8f0}.save-btn,.cancel-btn{padding:6px 12px;border-radius:4px;border:none;cursor:pointer;font-size:14px;font-weight:500;transition:background-color .2s ease-in-out}.save-btn{background-color:#3b82f6;color:#fff}.save-btn:hover{background-color:#2563eb}.cancel-btn{background-color:#6b7280;color:#fff}.cancel-btn:hover{background-color:#4b5563}.search-bar{margin-bottom:30px}.search-input-container{position:relative;max-width:600px;margin:0 auto;display:flex;align-items:center;gap:12px}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#6b7280;font-size:18px}.search-input{flex:1;padding:12px 12px 12px 40px;border:2px solid #e5e7eb;border-radius:8px;font-size:16px;outline:none;transition:border-color .2s ease-in-out;background:white}.search-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.search-input::placeholder{color:#9ca3af}.add-btn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:#10b981;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease-in-out;font-size:18px}.add-btn:hover{background:#059669;transform:translateY(-2px);box-shadow:0 4px 8px #10b9814d}.toast{position:fixed;top:20px;right:20px;padding:12px 16px;border-radius:6px;color:#fff;font-weight:500;font-size:14px;z-index:1000;animation:slideIn .3s ease-out;box-shadow:0 4px 12px #00000026}.toast-success{background-color:#10b981}.toast-error{background-color:#ef4444}.toast-info{background-color:#3b82f6}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}*{box-sizing:border-box}.app{min-height:100vh;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:20px}.app-header{text-align:center;margin-bottom:40px;color:#fff}.header-title{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:10px}.app-logo{width:150px;height:150px;object-fit:contain;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.3))}.app-header h1{font-size:3rem;margin:0;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.app-header p{font-size:1.2rem;margin:0 0 20px;opacity:.9}.file-controls{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:20px}.file-btn{display:flex;align-items:center;gap:8px;padding:12px 24px;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease-in-out}.open-btn{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.3)}.open-btn:hover{background:rgba(255,255,255,.3);transform:translateY(-2px)}.download-btn{background:#3b82f6;color:#fff}.download-btn:hover{background:#2563eb;transform:translateY(-2px)}.file-status{background:rgba(34,197,94,.2);color:#fff;padding:6px 12px;border-radius:20px;font-size:14px;border:1px solid rgba(34,197,94,.3)}.fallback-controls{display:flex;flex-direction:column;align-items:center;gap:12px}.browser-warning{background:rgba(251,146,60,.2);color:#fff;padding:8px 16px;border-radius:6px;font-size:14px;text-align:center;border:1px solid rgba(251,146,60,.3);max-width:400px;margin:0}.app-main{max-width:900px;margin:0 auto}.sql-stats{margin-bottom:20px;text-align:center}.stats-text{background:rgba(255,255,255,.2);color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.sql-list{display:flex;flex-direction:column;gap:20px}.loading,.error,.no-results{text-align:center;padding:40px 20px;background:rgba(255,255,255,.1);border-radius:8px;color:#fff;font-size:18px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.error{background:rgba(239,68,68,.2)}.loading{background:rgba(59,130,246,.2)}.no-results{background:rgba(156,163,175,.2)}.no-file-selected{text-align:center;padding:60px 20px;background:rgba(255,255,255,.1);border-radius:12px;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:500px;margin:0 auto}.no-file-selected h2{font-size:1.8rem;margin:0 0 16px;font-weight:600}.no-file-selected p{font-size:1.1rem;margin:0 0 24px;opacity:.9;line-height:1.5}.file-btn.large{font-size:18px;padding:16px 32px}@media (max-width: 768px){.app{padding:15px}.header-title{flex-direction:column;gap:8px}.app-logo{width:90px;height:90px}.app-header h1{font-size:2.5rem}.app-header p{font-size:1rem}}