.db-index-visualizer{max-width:1200px;margin:0 auto}.visualizer-header{margin-bottom:2rem}.visualizer-header h1{margin:0 0 .5rem;font-size:2rem;color:#111827}.visualizer-header p{margin:0;color:#6b7280;line-height:1.6}.visualizer-header code{background:#f3f4f6;padding:.125rem .375rem;border-radius:3px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.875rem;color:#1f2937}.visualizer-form{background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;padding:2rem;margin-bottom:2rem}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:#374151}.sql-textarea{width:100%;padding:1rem;border:1px solid #d1d5db;border-radius:4px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.875rem;line-height:1.5;resize:vertical;background:#f9fafb;color:#1f2937;transition:border-color .2s,background-color .2s}.sql-textarea:focus{outline:none;border-color:#3b82f6;background:#ffffff}.sql-textarea:disabled{opacity:.6;cursor:not-allowed}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-weight:500;color:#374151}.checkbox-label input[type=checkbox]{width:1.125rem;height:1.125rem;cursor:pointer}.checkbox-label input[type=checkbox]:disabled{cursor:not-allowed}.help-text{margin:.5rem 0 0 1.625rem;font-size:.875rem;color:#6b7280;line-height:1.5}.form-actions{display:flex;gap:1rem}.btn-analyze,.btn-sample{padding:.75rem 1.5rem;border:none;border-radius:4px;font-weight:500;cursor:pointer;transition:background-color .2s,transform .1s}.btn-analyze{background:#3b82f6;color:#ffffff}.btn-analyze:hover:not(:disabled){background:#2563eb}.btn-analyze:active:not(:disabled){transform:scale(.98)}.btn-analyze:disabled{background:#9ca3af;cursor:not-allowed}.btn-sample{background:#f3f4f6;color:#374151}.btn-sample:hover:not(:disabled){background:#e5e7eb}.btn-sample:disabled{opacity:.6;cursor:not-allowed}.results{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.error-message{padding:1.5rem;background:#fef2f2;border:1px solid #fecaca;border-left:4px solid #dc2626;border-radius:4px;color:#991b1b;line-height:1.6}.error-message strong{color:#7f1d1d}.results-summary{background:#f0f9ff;border:1px solid #bfdbfe;border-left:4px solid #3b82f6;border-radius:4px;padding:1.5rem;margin-bottom:2rem}.results-summary h2{margin:0 0 .5rem;font-size:1.5rem;color:#1e40af}.results-summary p{margin:0;color:#1e3a8a}.has-suggestions{color:#d97706;font-weight:500}.no-suggestions{color:#059669;font-weight:500}.table-section{background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;padding:2rem;margin-bottom:1.5rem}.table-name{margin:0 0 1.5rem;font-size:1.5rem;color:#111827;font-family:Monaco,Menlo,Ubuntu Mono,monospace;background:#f9fafb;padding:.5rem 1rem;border-radius:4px;border-left:4px solid #3b82f6}.indexes-container{display:grid;grid-template-columns:1fr 1fr;gap:2rem}@media (max-width:768px){.indexes-container{grid-template-columns:1fr}}.existing-indexes h4,.suggested-indexes h4{margin:0 0 1rem;font-size:1.125rem;color:#374151}.index-list{list-style:none;padding:0;margin:0}.index-item{padding:.75rem;background:#f9fafb;border-radius:4px;margin-bottom:.5rem;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.index-type{display:inline-block;padding:.25rem .5rem;border-radius:3px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.025em}.type-primary{background:#dbeafe;color:#1e40af}.type-unique{background:#dcfce7;color:#166534}.type-key{background:#fef3c7;color:#92400e}.type-fulltext{background:#f3e8ff;color:#6b21a8}.index-name{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-weight:500;color:#1f2937}.index-columns{color:#6b7280;font-size:.875rem}.no-indexes{padding:1rem;background:#fef2f2;border:1px dashed #fca5a5;border-radius:4px;color:#991b1b;margin:0;text-align:center}.suggestions-list{display:flex;flex-direction:column;gap:1rem}.suggestion-item{background:#fffbeb;border:1px solid #fde68a;border-left:4px solid #f59e0b;border-radius:4px;padding:1rem}.suggestion-header{margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.suggestion-name{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-weight:600;color:#92400e}.suggestion-columns,.suggestion-reason{color:#78350f;font-size:.875rem}.suggestion-reason{margin:0 0 1rem;line-height:1.5}.suggestion-sql{background:#ffffff;border:1px solid #d1d5db;border-radius:4px;padding:.75rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}.suggestion-sql code{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.875rem;color:#1f2937;flex:1;word-break:break-all}.btn-copy{padding:.375rem .75rem;background:#3b82f6;color:#ffffff;border:none;border-radius:3px;font-size:.875rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:background-color .2s}.btn-copy:hover{background:#2563eb}.btn-copy:active{transform:scale(.95)}.warning-box{background:#fffbeb;border:1px solid #fde68a;border-left:4px solid #f59e0b;border-radius:4px;padding:1.5rem;margin-top:2rem}.warning-box strong{display:block;margin-bottom:.75rem;color:#92400e}.warning-box ul{margin:0;padding-left:1.5rem;color:#78350f;line-height:1.8}.warning-box li{margin-bottom:.25rem}