*{box-sizing:border-box;margin:0;padding:0;scroll-behavior:smooth}body{font-family:Inter,sans-serif;background:linear-gradient(135deg,#0a0a0a 0,#1e1e2e 50%,#2d2d3a 100%);color:#e2e8f0;display:flex;height:100vh;overflow:hidden;user-select:none;-webkit-overflow-scrolling:touch}.wrapper{display:grid;grid-template-columns:var(--sidebar-width) 1fr;gap:1rem;max-width:1600px;width:100%;height:100vh;margin:0 auto;padding:1rem}:root{--sidebar-width:80px;--sidebar-bg:rgba(20,20,30,.98);--sidebar-hover:#10b981;--primary:#10b981;--primary-light:#34d399;--bg-dark:#1e1e2e;--bg-darker:#111827;--text-primary:#f9fafb;--text-secondary:#9ca3af;--border:rgba(55,65,81,0.5)}.sidebar{background:var(--sidebar-bg);backdrop-filter:blur(20px);border-radius:12px;padding:1.5rem 0;display:flex;flex-direction:column;align-items:center;gap:1.2rem;box-shadow:0 10px 40px rgb(0 0 0 / .4),inset 0 1px 0 rgb(255 255 255 / .1);border:1px solid var(--border);max-height:100vh;overflow-y:auto;overflow-x:hidden;position:sticky;top:1rem;scrollbar-width:thin;scrollbar-color:var(--sidebar-hover) rgb(255 255 255 / .1)}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:rgb(255 255 255 / .05);border-radius:3px}.sidebar::-webkit-scrollbar-thumb{background:var(--sidebar-hover);border-radius:3px;box-shadow:0 0 4px rgb(16 185 129 / .3)}.sidebar::-webkit-scrollbar-thumb:hover{background:#059669}.sidebar-item{position:relative;cursor:pointer;transition:.3s cubic-bezier(.4,0,.2,1)}.sidebar-item img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 2px 8px rgb(16 185 129 / .2));transition:.3s;opacity:.8}.sidebar-item:hover img{transform:scale(1.1) translateY(-2px);filter:drop-shadow(0 4px 12px var(--sidebar-hover));opacity:1}.sidebar-item::after{content:attr(data-lang);position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);font-size:.75rem;font-weight:500;color:var(--text-secondary);white-space:nowrap;opacity:0;transition:opacity .3s,transform .3s}.sidebar-item:hover::after{opacity:1;transform:translateX(-50%) translateY(-2px)}.container{display:flex;flex:1;margin:0;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgb(0 0 0 / .3);background:var(--bg-dark);border:1px solid var(--border)}.content-sidebar,.tables{width:320px;background:#1f2937;padding:24px;border-right:1px solid var(--border);overflow-y:auto}.tables{border-right:none;background:#111827}.content-sidebar h3,.tables h3{font-weight:600;font-size:18px;margin-bottom:16px;color:var(--primary);display:flex;align-items:center;gap:8px}.content-sidebar h3::before,.tables h3::before{content:'';width:4px;height:20px;background:var(--primary);border-radius:2px}.content-sidebar ul{list-style:none;margin-bottom:32px;color:var(--text-secondary);font-size:14px;line-height:1.6}.content-sidebar ul li{padding:10px 12px;border-radius:8px;transition:.3s;margin-bottom:4px;border-left:3px solid #fff0}.content-sidebar ul li:hover{background:rgb(16 185 129 / .1);color:var(--text-primary);border-left-color:var(--primary);transform:translateX(4px)}.editor{flex:1;background:var(--bg-darker);padding:32px;display:flex;flex-direction:column;border-radius:0 16px 16px 0}.editor h3{font-weight:600;font-size:22px;margin-bottom:24px;color:var(--text-primary);display:flex;align-items:center;gap:8px}.editor h3::before{content:'';width:4px;height:20px;background:var(--primary);border-radius:2px}textarea#sqlInput{width:100%;height:220px;font-family:'Fira Code',monospace;font-size:15px;padding:20px;border-radius:12px;border:1px solid var(--border);background:#0f172a;color:#e2e8f0;box-shadow:inset 0 1px 3px rgb(0 0 0 / .3),0 1px 2px rgb(255 255 255 / .05);resize:vertical;transition:.3s;outline:0;caret-color:var(--primary);overflow-y:auto}textarea#sqlInput:focus{border-color:var(--primary);background:#0f172a;box-shadow:inset 0 1px 3px rgb(0 0 0 / .3),0 0 0 3px rgb(16 185 129 / .1);color:#f9fafb}button{margin-top:16px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#0f172a;border:none;padding:12px 28px;font-size:15px;font-weight:600;border-radius:10px;cursor:pointer;transition:.3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 14px rgb(16 185 129 / .3),0 1px 2px rgb(0 0 0 / .1);text-transform:uppercase;letter-spacing:.5px}button:hover{background:linear-gradient(135deg,var(--primary-light),#059669);box-shadow:0 8px 20px rgb(16 185 129 / .4);transform:translateY(-1px)}button:active{transform:translateY(0);box-shadow:0 2px 8px rgb(16 185 129 / .2)}#output{margin-top:-25px;max-height:390px;overflow-x:auto;overflow-y:auto;background:#0f172a;border-radius:12px;padding:24px;box-shadow:inset 0 1px 3px rgb(0 0 0 / .3),0 1px 2px rgb(255 255 255 / .05);color:#d1d5db;font-family:'Fira Code',monospace;font-size:13px;line-height:1.5;opacity:0;transform:translateY(10px);animation:.4s forwards fadeInUp;border:1px solid var(--border)}table{border-collapse:collapse;width:100%;border-radius:10px;background:#1f2937;overflow:hidden;box-shadow:0 2px 8px rgb(0 0 0 / .2)}td,th{padding:14px 12px;border-bottom:1px solid var(--border);font-weight:500;color:var(--text-primary);text-align:left;transition:.2s}th{background:linear-gradient(135deg,var(--primary),var(--primary-light));text-transform:uppercase;font-size:12px;letter-spacing:1px;color:#0f172a;font-weight:600}tr:hover td{background:rgb(16 185 129 / .05);color:var(--text-primary);transform:scale(1.01)}.loading{display:none;margin-top:16px;font-size:15px;color:var(--primary);animation:.5s fadeIn;display:flex;align-items:center;gap:8px}.loading::after{content:'';width:16px;height:16px;border:2px solid var(--primary-light);border-top:2px solid #fff0;border-radius:50%;animation:1s linear infinite spin}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:1024px){body{overflow-y:auto;height:auto;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.wrapper{grid-template-columns:1fr;padding:.5rem;height:auto;min-height:100vh}.sidebar{display:none!important}.container{flex-direction:column;border-radius:12px;overflow:visible;position:relative}#output,#output *,textarea#sqlInput{user-select:text!important;-webkit-user-select:text!important}.mobile-sections{display:flex;flex-direction:column;min-height:100vh}.editor-section,.info-section,.tables-section{display:none;flex-direction:column;flex:1}.editor-section{display:flex}.mobile-tabs{position:sticky;bottom:0;background:rgb(17 24 39 / .95);backdrop-filter:blur(20px);border-top:1px solid var(--border);display:flex;padding:env(safe-area-inset-bottom) 0 0}.mobile-tabs label{flex:1;text-align:center;padding:16px 8px;font-size:14px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:.3s}.mobile-tabs label.active{color:var(--primary);border-top:3px solid var(--primary)}.copy-btn{margin:16px 0 8px;align-self:flex-end;padding:10px 20px;font-size:14px;background:rgb(16 185 129 / .2);color:var(--primary)}.editor{flex:none;padding:24px;border-radius:12px 12px 0 0;min-height:auto}textarea#sqlInput{height:45vh;min-height:220px;max-height:50vh;font-size:16px}#output{max-height:none;min-height:200px;margin:24px 0;font-size:14px}@media (orientation:landscape){.editor-section{flex-direction:row}.editor{flex:1;border-radius:12px 0 0 12px}#output{flex:1;border-radius:0 12px 12px 0;margin:0}textarea#sqlInput{height:60vh}}}@media (max-width:480px){.wrapper{padding:.25rem}.container{border-radius:8px}.editor{padding:20px}.editor h3{font-size:20px}textarea#sqlInput{height:50vh;font-size:15px;padding:16px}button{padding:14px 24px;font-size:16px;width:100%}#output{padding:16px;font-size:13.5px}.mobile-tabs label{padding:14px 4px;font-size:13px}}