.gql{margin-bottom:2rem;}
.gql-wrap{display:flex;flex-direction:column;gap:1.5rem;}
.gql-mode-strip{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:0.75rem;}
.gql-mode-btn{padding:0.5rem 1rem;font-size:0.875rem;font-weight:500;color:var(--text-muted,#555);background:var(--surface-muted,rgba(0,0,0,.04));border:1px solid var(--border,rgba(0,0,0,.1));border-radius:10px;cursor:pointer;transition:color .2s ease,background .2s ease,border-color .2s ease;-webkit-tap-highlight-color:transparent;}
.gql-mode-btn:hover{color:var(--text-main,#111);background:var(--surface-muted,rgba(0,0,0,.08));border-color:var(--border,rgba(0,0,0,.18));}
.gql-mode-btn.is-active{color:#fff;background:var(--primary,#0d6efd);border-color:var(--primary,#0d6efd);}
.gql-main{display:grid;grid-template-columns:1fr;gap:1.25rem;}
@media (min-width:992px){.gql-main{grid-template-columns:1fr 1fr;}}
.gql-builder{display:flex;flex-direction:column;gap:1rem;padding:1.25rem;background:var(--surface,#fff);border:1px solid var(--border,rgba(0,0,0,.08));border-radius:14px;box-shadow:0 2px 12px rgba(0,0,0,.04);}
.gql-output-card{display:flex;flex-direction:column;padding:1.25rem;background:var(--surface,#fff);border:1px solid var(--border,rgba(0,0,0,.08));border-radius:14px;box-shadow:0 2px 12px rgba(0,0,0,.04);}
.gql-panel-title,.gql-block-title{font-size:1.125rem;font-weight:600;color:var(--text-main,#111);margin:0 0 0.75rem;}
.gql-block-title{margin-bottom:0.5rem;}
.gql-field{margin-bottom:1rem;}
.gql-label{display:block;font-size:0.8125rem;font-weight:600;color:var(--text-muted,#555);margin-bottom:0.35rem;}
.gql-input,.gql-select{width:100%;padding:0.6rem 0.85rem;font-size:0.9375rem;line-height:1.4;color:var(--text-main,#111);background:var(--surface,#fff);border:1px solid var(--border,rgba(0,0,0,.12));border-radius:10px;transition:border-color .2s ease,box-shadow .2s ease;-webkit-appearance:none;appearance:none;}
.gql-input:focus,.gql-select:focus{border-color:var(--primary,#0d6efd);box-shadow:0 0 0 3px rgba(13,110,253,.12);outline:none;}
.gql-input::placeholder{color:var(--text-muted);opacity:.8;}
.gql-block{margin-top:1rem;}
.gql-block-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.5rem;margin-bottom:0.5rem;}
.gql-rows{display:flex;flex-direction:column;gap:0.5rem;}
.gql-row{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;}
.gql-row .gql-input{flex:1;min-width:0;}
.gql-row .gql-select{width:auto;min-width:6rem;}
.gql-row .gql-remove{flex-shrink:0;width:2rem;height:2rem;padding:0;font-size:1rem;line-height:1;color:#fff;background:#dc3545;border:none;border-radius:8px;cursor:pointer;transition:background .2s ease;}
.gql-row .gql-remove:hover{background:#c82333;}
.gql-row label{display:inline-flex;align-items:center;gap:0.35rem;font-size:0.8125rem;color:var(--text-muted);white-space:nowrap;}
.gql-actions{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border,rgba(0,0,0,.08));}
.gql-btn{padding:0.5rem 1rem;font-size:0.875rem;font-weight:500;border-radius:10px;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease;-webkit-tap-highlight-color:transparent;border:1px solid transparent;}
.gql-btn-primary{color:#fff;background:var(--primary,#0d6efd);border-color:var(--primary,#0d6efd);}
.gql-btn-primary:hover{background:#0b5ed7;border-color:#0a58ca;}
.gql-btn-secondary{color:#fff;background:#198754;border-color:#198754;}
.gql-btn-secondary:hover{background:#157347;}
.gql-btn-success{color:#fff;background:#198754;border-color:#198754;}
.gql-btn-success:hover{background:#157347;}
.gql-btn-add{color:var(--text-main,#111);background:var(--surface-muted,rgba(0,0,0,.06));border-color:var(--border,rgba(0,0,0,.12));}
.gql-btn-add:hover{background:var(--surface-muted,rgba(0,0,0,.1));}
.gql-btn-ghost{color:var(--text-muted);background:transparent;border-color:var(--border,rgba(0,0,0,.12));}
.gql-btn-ghost:hover{background:var(--surface-muted,rgba(0,0,0,.05));}
.gql-btn-sm{padding:0.35rem 0.75rem;font-size:0.8125rem;}
.gql-output-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.5rem;margin-bottom:0.75rem;}
.gql-output-actions{display:flex;gap:0.35rem;}
.gql-tabs{display:flex;gap:0;margin-bottom:0.75rem;border-bottom:1px solid var(--border,rgba(0,0,0,.1));}
.gql-tab{padding:0.5rem 1rem;font-size:0.8125rem;font-weight:500;color:var(--text-muted);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color .2s ease,border-color .2s ease;-webkit-tap-highlight-color:transparent;}
.gql-tab:hover{color:var(--text-main,#111);}
.gql-tab.is-active{color:var(--primary,#0d6efd);border-bottom-color:var(--primary,#0d6efd);}
.gql-output-wrap{margin-bottom:0.75rem;}
.gql-output-area{width:100%;min-height:280px;padding:1rem;font-family:ui-monospace,monospace;font-size:0.8125rem;line-height:1.5;color:var(--text-main,#111);background:var(--surface-muted,rgba(0,0,0,.02));border:1px solid var(--border,rgba(0,0,0,.1));border-radius:10px;resize:vertical;-webkit-appearance:none;appearance:none;}
.gql-output-area:focus{border-color:var(--primary,#0d6efd);outline:none;}
.gql-output-meta{display:flex;flex-wrap:wrap;gap:1rem;font-size:0.8125rem;color:var(--text-muted);}
.gql-validation{margin-top:0.5rem;font-size:0.8125rem;}
.gql-templates-title{font-size:1.125rem;font-weight:600;color:var(--text-main,#111);margin:0 0 0.75rem;}
.gql-templates-scroll{display:flex;flex-wrap:wrap;gap:0.5rem;}
.gql-template{display:flex;flex-direction:column;align-items:flex-start;gap:0.25rem;padding:0.85rem 1rem;text-align:left;background:var(--surface,#fff);border:1px solid var(--border,rgba(0,0,0,.1));border-radius:12px;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .1s ease;-webkit-tap-highlight-color:transparent;}
.gql-template:hover{border-color:var(--primary,#0d6efd);background:rgba(13,110,253,.04);}
.gql-template-name{font-size:0.9375rem;font-weight:600;color:var(--text-main,#111);}
.gql-template-desc{font-size:0.8125rem;color:var(--text-muted);}
.gql-tips{padding:1rem 1.25rem;background:var(--surface-muted,rgba(0,0,0,.02));border:1px solid var(--border,rgba(0,0,0,.06));border-radius:12px;}
.gql-tips-title{font-size:1rem;font-weight:600;color:var(--text-main,#111);margin:0 0 0.5rem;}
.gql-tips-list{margin:0;padding-left:1.25rem;font-size:0.875rem;color:var(--text-muted);line-height:1.6;}
.field-row,.arg-row{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;}
.field-input{flex:1;min-width:0;padding:0.5rem 0.75rem;font-size:0.875rem;border:1px solid var(--border,rgba(0,0,0,.12));border-radius:8px;}
.field-type-select{width:auto;min-width:6rem;padding:0.5rem 0.75rem;font-size:0.875rem;border:1px solid var(--border,rgba(0,0,0,.12));border-radius:8px;}
.remove-btn{flex-shrink:0;width:2rem;height:2rem;padding:0;font-size:1rem;line-height:1;color:#fff;background:#dc3545;border:none;border-radius:8px;cursor:pointer;}