:root{--accent:#6d28d9;--accent-light:#ede9fe;--accent-dark:#4c1d95}.tool-header h1{background:linear-gradient(135deg,#6d28d9,#2563eb);color:#0000;-webkit-background-clip:text;background-clip:text;display:inline-block}.sql-input{resize:vertical;border-radius:var(--radius);tab-size:4;border:1px solid #ccc;width:100%;min-height:220px;padding:1rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.95rem;line-height:1.6;transition:border-color .15s,box-shadow .15s;display:block}.sql-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);outline:none}.tool-actions{flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:1.25rem;display:flex}.action-group{flex-wrap:wrap;gap:.5rem;display:flex}.tool-actions button{font:inherit;border-radius:var(--radius);cursor:pointer;background:#fff;border:1.5px solid #ddd;padding:.65rem 1.2rem;font-size:.9rem;font-weight:600;transition:background .15s,border-color .15s,transform .1s,box-shadow .15s}.tool-actions button:hover{border-color:var(--accent);color:var(--accent-dark);transform:translateY(-1px);box-shadow:0 2px 8px #6d28d91f}.primary-button{color:#fff!important;background:linear-gradient(135deg,#6d28d9,#2563eb)!important;border-color:#0000!important}.primary-button:hover{filter:brightness(1.08);box-shadow:0 4px 14px #6d28d959!important}.danger-button{color:#c62828;border-color:#ef9a9a!important}.danger-button:hover{color:#c62828!important;background:#ffebee!important;border-color:#e57373!important}.explain-status{color:#c62828;min-height:1.5rem;margin-top:1rem;font-size:.9rem;font-weight:600}.output{margin-top:2.5rem}.output-block{margin-bottom:2.25rem}.output-block h2{align-items:center;gap:.5rem;margin:0 0 .5rem;font-size:1.15rem;display:flex}.output-block h2:before{content:"";background:linear-gradient(#6d28d9,#2563eb);border-radius:3px;width:6px;height:1.1em;display:inline-block}.hint{color:#666;margin:0 0 .75rem;font-size:.85rem}.badge{background:linear-gradient(135deg, var(--accent-light), #dbeafe);color:var(--accent-dark);border:1px solid #ddd6fe;border-radius:999px;padding:.4rem 1rem;font-size:.9rem;font-weight:700;display:inline-block}.highlighted-sql{border-radius:var(--radius);white-space:pre-wrap;word-break:break-word;background:#fbfaff;border:1px solid #e2e2f5;margin:0;padding:1rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;line-height:1.7;overflow-x:auto}.tok-keyword{color:#7c3aed;font-weight:700}.tok-string{color:#15803d}.tok-number{color:#b45309}.tok-comment{color:#9ca3af;font-style:italic}.tok-function{color:#1d4ed8;font-weight:600}.warnings-list{flex-direction:column;gap:.6rem;margin:0;padding:0;list-style:none;display:flex}.warnings-list li{border-radius:var(--radius);color:#92400e;background:#fffbeb;border-left:4px solid #f59e0b;padding:.75rem 1rem;font-size:.92rem}.warnings-list li:before{content:"⚠ "}.warnings-list .no-warnings{color:#166534;background:#f0fdf4;border-left-color:#22c55e}.warnings-list .no-warnings:before{content:"✓ "}.clause-breakdown{flex-direction:column;gap:.75rem;display:flex}.clause-card{border-radius:var(--radius);background:#fff;border:1px solid #e5e5e5;border-left:4px solid #ccc;padding:1rem 1.1rem;transition:box-shadow .15s}.clause-card:hover{box-shadow:0 2px 10px #0000000f}.clause-card .clause-tag{letter-spacing:.02em;border-radius:6px;margin-bottom:.4rem;padding:.2rem .65rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;font-weight:700;display:inline-block}.clause-card p{margin:0}.clause-select{border-left-color:#2563eb}.clause-select .clause-tag{color:#1e3a8a;background:#dbeafe}.clause-from{border-left-color:#059669}.clause-from .clause-tag{color:#065f46;background:#d1fae5}.clause-join{border-left-color:#7c3aed}.clause-join .clause-tag{color:#5b21b6;background:#ede9fe}.clause-where{border-left-color:#ea580c}.clause-where .clause-tag{color:#9a3412;background:#ffedd5}.clause-group-by{border-left-color:#0d9488}.clause-group-by .clause-tag{color:#115e59;background:#ccfbf1}.clause-having{border-left-color:#db2777}.clause-having .clause-tag{color:#9d174d;background:#fce7f3}.clause-order-by{border-left-color:#4f46e5}.clause-order-by .clause-tag{color:#3730a3;background:#e0e7ff}.clause-limit{border-left-color:#0891b2}.clause-limit .clause-tag{color:#155e75;background:#cffafe}.clause-offset{border-left-color:#0891b2}.clause-offset .clause-tag{color:#155e75;background:#cffafe}.clause-with{border-left-color:#7c3aed}.clause-with .clause-tag{color:#5b21b6;background:#ede9fe}.clause-union,.clause-union-all{border-left-color:#d97706}.clause-union .clause-tag,.clause-union-all .clause-tag{color:#92400e;background:#fef3c7}.clause-insert-into,.clause-values{border-left-color:#16a34a}.clause-insert-into .clause-tag,.clause-values .clause-tag{color:#166534;background:#dcfce7}.clause-update,.clause-set{border-left-color:#d97706}.clause-update .clause-tag,.clause-set .clause-tag{color:#92400e;background:#fef3c7}.clause-delete-from{border-left-color:#dc2626}.clause-delete-from .clause-tag{color:#991b1b;background:#fee2e2}.clause-create-table,.clause-alter-table,.clause-drop-table{border-left-color:#475569}.clause-create-table .clause-tag,.clause-alter-table .clause-tag,.clause-drop-table .clause-tag{color:#334155;background:#e2e8f0}.execution-order{counter-reset:step;flex-direction:column;gap:.5rem;margin:0;padding-left:0;list-style:none;display:flex}.execution-order li{counter-increment:step;border-radius:var(--radius);border:1px solid #0000;padding:.65rem .9rem .65rem 2.5rem;position:relative}.execution-order li:before{content:counter(step);border-radius:50%;justify-content:center;align-items:center;width:1.4rem;height:1.4rem;font-size:.75rem;font-weight:700;display:flex;position:absolute;top:50%;left:.7rem;transform:translateY(-50%)}.execution-order li.present{color:var(--accent-dark);background:linear-gradient(135deg,#f5f3ff,#eff6ff);border-color:#ddd6fe;font-weight:700}.execution-order li.present:before{color:#fff;background:linear-gradient(135deg,#6d28d9,#2563eb)}.execution-order li.absent{color:#aaa}.execution-order li.absent:before{color:#999;background:#eee}.join-diagrams{flex-wrap:wrap;gap:1.5rem;display:flex}.join-diagram-card{text-align:center;border-radius:var(--radius);background:#fafaff;border:1px solid #eee;width:160px;padding:.75rem}.join-diagram-card svg{width:120px;height:90px}.join-diagram-card .join-name{color:var(--accent-dark);margin-top:.4rem;font-size:.85rem;font-weight:700}.join-diagram-card .join-desc{color:#666;margin-top:.2rem;font-size:.78rem}.subqueries-list{flex-direction:column;gap:.75rem;display:flex}.subquery-card{border-radius:var(--radius);background:#fafaff;border:1px solid #e5e5e5;border-left:4px solid #6d28d9;padding:1rem}.subquery-card strong{color:var(--accent-dark)}.subquery-card pre{white-space:pre-wrap;word-break:break-word;margin:.5rem 0 0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem}.functions-list{flex-direction:column;gap:.5rem;margin:0;padding-left:0;list-style:none;display:flex}.functions-list li{border-radius:var(--radius);background:#eff6ff;border-left:4px solid #2563eb;padding:.6rem .9rem;font-size:.9rem}.functions-list code{color:#1e3a8a;background:#dbeafe;border-radius:4px;padding:.1rem .4rem;font-weight:600}.about-tool{border-top:1px solid #eee;margin-top:3rem;padding-top:2.5rem}.about-tool h2{margin:2rem 0 .6rem;font-size:1.15rem}.about-tool h2:first-child{margin-top:0}.about-tool h3{color:var(--accent-dark);margin:1.5rem 0 .4rem;font-size:1rem}.about-tool p{color:#444;margin:0 0 .75rem}.about-tool code{background:#f3f4f6;border-radius:4px;padding:.1rem .4rem;font-size:.9em}@media (width<=700px){.tool-actions{flex-direction:column;align-items:stretch;gap:.6rem}.action-group{flex-direction:column;width:100%}.tool-actions button{width:100%}.join-diagrams{justify-content:center}}