body{background-color:#cdcdcd;font-family:Roboto,sans-serif;margin:0;padding:0;box-sizing:border-box}.app-container{max-width:1200px;margin:0 auto;position:relative;padding:20px}.main-layout{display:flex;gap:20px}.query-section{flex:1;min-width:0}.results-table{flex:2;min-width:0}.query-history-sidebar{position:fixed;top:0;right:-320px;width:300px;height:100%;background-color:#f0f0f0;box-shadow:-2px 0 5px #0000001a;transition:right .3s ease;z-index:1000}.query-history-sidebar.open{right:0}.query-history-content{padding:20px;height:100%;overflow-y:auto}.query-history-content .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.query-history-content ul{list-style:none;padding:0}.query-history-content li{cursor:pointer;padding:10px;border-bottom:1px solid #ddd}.query-history-content li:hover{background-color:#e0e0e0}.query-history-content .timestamp{font-size:.8em;color:#666}.query-history-content .query-text{margin:5px 0;word-wrap:break-word}.query-history-content .row-count{font-size:.8em;color:#888}.query-buttons{display:grid}.toggle-history-btn{padding:8px 16px;color:#000;font-weight:700;cursor:pointer}.query-editor{display:flex;justify-content:space-between}.toggle-history-btn1{margin-bottom:10px;padding:8px 16px;color:#000;cursor:pointer}.table-container{max-height:400px;overflow-y:auto;margin-bottom:30px}table{width:100%;border-collapse:collapse}th,td{padding:8px;border:1px solid #2f2d2d;text-align:left}th{background-color:#f4f4f4}.query-display{margin-bottom:20px}.query-display h4{margin-bottom:5px}.header{background-color:#282c34;color:#fff;padding:10px;text-align:center;font-family:cursive;border-radius:10px}.toggle-history-btn,.toggle-history-btn1{background:none;--border-radius: 15px;--border-width: 4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;border:0;margin-left:5px;font-family:Poppins,sans-serif;font-size:18px;font-weight:500;color:#000;z-index:2}.toggle-history-btn:after,.toggle-history-btn1:after{--m-i: linear-gradient(#000, #000);--m-o: content-box, padding-box;content:"";position:absolute;left:0;top:0;width:100%;height:100%;padding:var(--border-width);border-radius:var(--border-radius);background-image:conic-gradient(#488cfb,#29dbbc,#ddf505,#ff9f0e,#e440bb,#655adc,#488cfb);-webkit-mask-image:var(--m-i),var(--m-i);mask-image:var(--m-i),var(--m-i);-webkit-mask-origin:var(--m-o);mask-origin:var(--m-o);-webkit-mask-clip:var(--m-o);mask-composite:exclude;-webkit-mask-composite:destination-out;filter:hue-rotate(0);animation:rotate-hue linear .5s infinite;animation-play-state:paused}.toggle-history-btn:hover:after,.toggle-history-btn1:hover:after{animation-play-state:running}@keyframes rotate-hue{to{filter:hue-rotate(1turn)}}.toggle-history-btn,.toggle-history-btn1,.toggle-history-btn:after,.toggle-history-btn1:after{box-sizing:border-box}.toggle-history-btn:active,.toggle-history-btn1:active{--border-width: 5px}.query-input{width:80%;height:100px;padding:10px;margin-bottom:10px;border:1px solid #203570;border-radius:5px;font-size:16px;font-family:Poppins,sans-serif;box-sizing:border-box}.header1{border-bottom:#0a0d11 solid 2px;color:#bd1414;padding:10px;text-align:center;font-family:cursive;text-decoration:underline;text-decoration-color:#488cfb;text-decoration-thickness:2px;text-decoration-style:double;text-decoration-skip-ink:auto}.drop-down{display:flex;justify-content:center;margin-top:30px;margin-left:auto;margin-right:auto;padding:5px;border:1px solid #203570;border-radius:5px;font-size:16px;font-family:Poppins,sans-serif}.header2{font-family:cursive;color:#488cfb;font-size:20px;margin-top:20px}p{font-family:cursive;color:#970fa9}.par{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}.button{position:relative;width:150px;height:40px;cursor:pointer;display:flex;align-items:center;border:1px solid #17795E;background-color:#209978;overflow:hidden}.button,.button__icon,.button__text{transition:all .3s}.button .button__text{transform:translate(5px);color:#fff;font-size:16px}.button .button__icon{position:absolute;transform:translate(109px);height:100%;width:39px;background-color:#17795e;display:flex;align-items:center;justify-content:center}.button .svg{width:20px;fill:#fff}.button:hover{background:#17795e}.button:hover .button__text{color:transparent}.button:hover .button__icon{width:148px;transform:translate(0)}.button:active .button__icon{background-color:#146c54}.button:active{border:1px solid #146c54}.foot{display:flex;justify-content:center;border-top:#9e8f30 solid 2px;padding-top:10px}@media (max-width: 1200px){.app-container{padding:15px}.query-history-sidebar{width:250px}.query-history-sidebar.open{right:0}}@media (max-width: 1024px){.main-layout{flex-direction:column}.query-section,.results-table{flex:none;width:100%}.query-history-sidebar{width:100%;max-width:300px}}@media (max-width: 768px){.query-input{height:80px;font-size:14px}.toggle-history-btn,.toggle-history-btn1{font-size:16px;padding:6px 12px}.header1{font-size:1.2em}.header2{font-size:18px}.drop-down{max-width:250px}.button{width:120px;height:35px}.button .button__text{font-size:14px}}@media (max-width: 480px){.app-container{padding:10px}.header{font-size:1.5em}.query-buttons{flex-direction:column;gap:5px}.query-input{height:60px;font-size:12px}.toggle-history-btn,.toggle-history-btn1{font-size:14px;padding:5px 10px}.header1{font-size:1em}.header2{font-size:16px}.drop-down{max-width:200px;font-size:14px}.par{flex-direction:row;align-items:flex-start}.button{width:100%;max-width:150px}th,td{font-size:12px;padding:6px}.query-history-sidebar{width:100%}}