.promql-studio-page{--promql-bg:var(--tool-bg);--promql-card-bg:var(--tool-card-bg);--promql-border:var(--tool-border);--promql-border-strong:var(--tool-border-strong);--promql-input-bg:var(--tool-input-bg);--promql-text:var(--tool-text);--promql-muted:var(--tool-text-muted);--promql-accent:var(--tool-accent);--promql-accent-soft:var(--tool-accent-soft);--promql-success:var(--tool-success);--promql-danger:var(--tool-danger);--promql-radius:12px;--promql-shadow:var(--tool-shadow-soft);color:var(--promql-text);display:grid;gap:18px}.promql-studio-page *{box-sizing:border-box}.promql-studio-hero{position:relative;border:1px solid var(--promql-border);border-radius:16px;background:radial-gradient(circle at 86% 18%,rgba(9,105,218,.18),transparent 45%),radial-gradient(circle at 10% 86%,rgba(26,127,55,.14),transparent 52%),linear-gradient(135deg,var(--promql-card-bg),var(--promql-bg));box-shadow:var(--promql-shadow);padding:20px;display:grid;grid-template-columns:minmax(0,1.55fr)minmax(0,1fr);gap:18px}.promql-kicker{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--promql-muted);font-weight:700}.promql-hero-content h2{margin:8px 0;font-size:clamp(1.55rem,3vw,2rem);letter-spacing:-.02em}.promql-hero-content p{margin:0;color:var(--promql-muted);line-height:1.6}.promql-hero-pills{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}.promql-pill{border:1px solid var(--promql-border);border-radius:999px;padding:6px 11px;font-size:11px;font-weight:600;color:var(--promql-text);background:rgba(9,105,218,8%)}.promql-trust-card{border:1px solid var(--promql-border);border-radius:var(--promql-radius);background:rgba(9,105,218,6%);padding:16px}.promql-trust-card h3{margin:0 0 8px;font-size:1rem}.promql-trust-card ul{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--promql-muted);font-size:13px}.promql-trust-card p{margin:10px 0 0}.promql-studio-layout{display:grid;grid-template-columns:minmax(0,1.2fr)minmax(0,1fr);gap:18px}.promql-studio-layout>*{min-width:0}.promql-builder-card,.promql-visual-card{background:var(--promql-card-bg);border:1px solid var(--promql-border);border-radius:16px;box-shadow:var(--promql-shadow);padding:16px}.promql-builder-card{display:grid;gap:14px}.promql-step-card{border:1px solid var(--promql-border);border-radius:var(--promql-radius);background:var(--promql-bg);padding:14px;display:grid;gap:10px}.promql-step-header{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}.promql-step-number{width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--promql-accent),#2e8af3)}.promql-step-header h3{margin:0;font-size:.98rem;letter-spacing:.01em}.promql-step-header p{margin:2px 0 0}.promql-domain-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.promql-domain-btn{border:1px solid var(--promql-border);border-radius:10px;background:var(--promql-input-bg);color:var(--promql-muted);font-size:12px;font-weight:700;letter-spacing:.03em;cursor:pointer;padding:9px 8px;transition:all .15s ease}.promql-domain-btn.is-active{color:var(--promql-text);border-color:var(--promql-accent);box-shadow:0 0 0 3px var(--promql-accent-soft)}.promql-domain-btn[data-domain=k8s].is-active{border-color:#326ce5;box-shadow:0 0 0 3px rgba(50,108,229,.16)}.promql-domain-btn[data-domain=infra].is-active{border-color:#c2410c;box-shadow:0 0 0 3px rgba(194,65,12,.16)}.promql-domain-btn[data-domain=node].is-active{border-color:#15803d;box-shadow:0 0 0 3px rgba(21,128,61,.16)}.promql-domain-btn[data-domain=app].is-active{border-color:#be123c;box-shadow:0 0 0 3px rgba(190,18,60,.16)}.promql-template-description{margin:0;font-size:12px;color:var(--promql-muted);line-height:1.5;background:var(--promql-accent-soft);border:1px solid var(--promql-border);border-radius:10px;padding:10px}.promql-filter-grid,.promql-control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.promql-studio-page .tool-input-group{display:grid;gap:4px}.promql-studio-page .tool-input-group label{font-size:12px;color:var(--promql-muted);font-weight:600}.promql-studio-page select,.promql-studio-page textarea{border:1px solid var(--promql-border-strong);border-radius:10px;background:var(--promql-input-bg);color:var(--promql-text);padding:8px 10px;font-size:13px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.promql-studio-page select:focus,.promql-studio-page textarea:focus{border-color:var(--promql-accent);box-shadow:0 0 0 3px var(--promql-accent-soft)}.promql-query-output{width:100%;min-height:116px;resize:vertical;font-family:var(--tool-font-mono);font-size:12px;line-height:1.55}.promql-query-explanation{margin:0;color:var(--promql-muted);font-size:12px;line-height:1.6}.promql-copy-state{font-size:12px;color:var(--promql-success);min-height:18px;display:inline-flex;align-items:center}.promql-visual-card{display:grid;gap:12px;min-width:0;overflow:hidden}.promql-visual-header{display:grid;gap:10px}.promql-visual-controls{display:flex;align-items:center;gap:10px;justify-content:space-between;width:100%;min-width:0}.promql-mode-toggle{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overflow:visible;max-width:100%;flex:auto;width:100%;min-width:0;border:1px solid var(--promql-border);border-radius:999px;background:var(--promql-bg);padding:0}.promql-visual-header h3{margin:0;font-size:1rem}.promql-visual-header p{margin:2px 0 0}.promql-mode-btn{border:1px solid var(--promql-border);border-radius:999px;background:var(--promql-bg);color:var(--promql-muted);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;padding:6px 10px;white-space:nowrap;transition:all .15s ease}.promql-table-mode-btn{flex:none;margin-right:6px}.promql-mode-toggle .promql-mode-btn{border:none;border-radius:0;border-left:1px solid var(--promql-border);background:0 0;padding:7px 8px;box-shadow:none;min-width:0;text-align:center;white-space:nowrap}.promql-mode-toggle .promql-mode-btn:first-child{border-left:none}.promql-mode-toggle .promql-mode-btn:hover{border-color:transparent;background:rgba(9,105,218,8%)}.promql-mode-toggle .promql-mode-btn.is-active{border-color:transparent;background:var(--promql-accent-soft)}.promql-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.promql-summary-item{border:1px solid var(--promql-border);border-radius:10px;background:var(--promql-bg);padding:10px;display:grid;gap:2px}.promql-summary-item strong{font-size:1.05rem;line-height:1.2}.promql-summary-item span{font-size:11px;color:var(--promql-muted);text-transform:uppercase;letter-spacing:.05em}.promql-mode-btn:hover{border-color:var(--promql-accent);color:var(--promql-text)}.promql-mode-btn.is-active{border-color:var(--promql-accent);background:var(--promql-accent-soft);color:var(--promql-text)}.promql-view-panel{display:none;width:100%;min-width:0}.promql-view-panel.is-active{display:block}.promql-chart{width:100%;min-height:380px;border:1px solid var(--promql-border);border-radius:var(--promql-radius);background:var(--promql-bg)}.promql-empty-state{min-height:380px;border:1px dashed var(--promql-border-strong);border-radius:var(--promql-radius);background:var(--promql-bg);color:var(--promql-muted);display:flex;align-items:center;justify-content:center;font-size:13px;text-align:center;padding:16px}.promql-truncation-note{margin:0;color:var(--promql-muted);font-size:12px;min-height:18px}.promql-table-wrap{width:100%;max-width:100%;overflow-x:auto;border:1px solid var(--promql-border);border-radius:var(--promql-radius);background:var(--promql-bg)}.promql-data-table{width:max-content;min-width:100%;border-collapse:collapse}.promql-data-table th,.promql-data-table td{border-bottom:1px solid var(--promql-border);padding:9px 10px;font-size:12px;text-align:left;white-space:nowrap}.promql-data-table th{background:rgba(9,105,218,8%);color:var(--promql-muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em}.promql-data-table td:last-child,.promql-data-table th:last-child{border-right:none}.promql-insights{border:1px solid var(--promql-border);border-radius:var(--promql-radius);background:var(--promql-bg);padding:12px}.promql-insights h4{margin:0 0 8px;font-size:.92rem}.promql-insights ul{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--promql-muted);font-size:12px}@media(max-width:1180px){.promql-studio-layout{grid-template-columns:minmax(0,1fr)}.promql-visual-card{order:2}}@media(max-width:860px){.promql-studio-hero{grid-template-columns:minmax(0,1fr)}.promql-domain-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.promql-filter-grid,.promql-control-grid,.promql-summary-grid{grid-template-columns:minmax(0,1fr)}.promql-visual-controls{flex-direction:column;align-items:stretch;gap:8px}.promql-table-mode-btn{margin-right:0;align-self:flex-start}.promql-chart,.promql-empty-state{min-height:320px}.promql-data-table{min-width:560px}}@media(max-width:520px){.promql-studio-hero,.promql-builder-card,.promql-visual-card{padding:12px}.promql-step-card{padding:11px}.promql-chart,.promql-empty-state{min-height:260px}.promql-copy-state{width:100%}.promql-data-table{min-width:460px}}@media(prefers-reduced-motion:reduce){.promql-domain-btn,.promql-studio-page select,.promql-studio-page textarea{transition:none}}