@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    color-scheme: dark;
    font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: #e8edf7;
    background: #161618;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    --bg: #161618;
    --panel: #1b1b1f;
    --panel-raised: #202127;
    --line: rgba(255, 255, 255, 0.085);
    --line-strong: rgba(255, 255, 255, 0.14);
    --muted: #8993a5;
    --text: #e8edf7;
    --brand: #2ad6bf;
    --brand-strong: #00bfa6;
    --purple: #667eea;
    --warning: #ffc66b;
    --danger: #ff7a8b;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--bg); }

body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); }

button, input { font: inherit; }

button { -webkit-tap-highlight-color: transparent; }

.app-shell {
    min-height: 100vh;
    background:
        radial-gradient(circle at 68% -10%, rgba(102, 126, 234, 0.13), transparent 32rem),
        radial-gradient(circle at 5% 25%, rgba(0, 191, 166, 0.07), transparent 25rem),
        var(--bg);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 68px;
    display: flex;
    align-items: center;
    padding: 0 32px;
    border-bottom: 1px solid var(--line);
    background: rgba(22, 22, 24, 0.88);
    backdrop-filter: blur(18px);
}

.brand { display: flex; align-items: center; gap: 11px; min-width: 245px; }

.brand-mark {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(0, 191, 166, 0.26);
    border-radius: 9px;
    color: var(--brand);
    background: linear-gradient(145deg, rgba(0, 191, 166, 0.14), rgba(0, 191, 166, 0.02));
    box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 24px rgba(0, 191, 166, .08);
}

.brand-mark img { width: 27px; height: 27px; display: block; }

.brand-name { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }

.brand-name span { color: var(--muted); font-weight: 500; }

.breadcrumb { display: flex; gap: 9px; align-items: center; color: #697386; font-size: 13px; }

.breadcrumb strong { color: #c5ccda; font-weight: 600; }

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }

.environment {
    display: flex; align-items: center; gap: 8px; color: #aab3c2; font-size: 12px; font-weight: 600;
    padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.025);
}

.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-strong); box-shadow: 0 0 0 3px rgba(0,191,166,.10); }

.docs-link { color: #8f99ab; text-decoration: none; font-size: 13px; transition: color .2s; }

.docs-link:hover { color: var(--text); }

.layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); max-width: 1500px; margin: 0 auto; }

.sidebar {
    min-height: calc(100vh - 68px);
    padding: 30px 22px;
    border-right: 1px solid var(--line);
}

.nav-label { margin: 0 10px 12px; color: #5f6878; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

.nav-item {
    width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px 11px; margin-bottom: 4px;
    border: 0; border-radius: 8px; color: #7f899b; background: transparent; text-align: left; font-size: 13px; font-weight: 600;
}

.nav-item.active { color: var(--brand); background: rgba(0,191,166,.075); box-shadow: inset 2px 0 var(--brand-strong); }

.nav-item svg { width: 17px; height: 17px; }

.sidebar-note {
    margin-top: 34px; padding: 16px; border: 1px solid var(--line); border-radius: 10px;
    background: linear-gradient(150deg, rgba(102,126,234,.08), rgba(255,255,255,.015));
}

.sidebar-note svg { color: var(--purple); }

.sidebar-note strong { display: block; margin: 10px 0 5px; font-size: 12px; }

.sidebar-note p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }

.content { min-width: 0; padding: 46px clamp(28px, 4vw, 64px) 80px; }

.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }

.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 9px; color: var(--brand-strong); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

.eyebrow::before { content: ''; width: 18px; height: 1px; background: currentColor; }

h1 { margin: 0; max-width: 720px; font-size: clamp(30px, 3.3vw, 48px); line-height: 1.05; letter-spacing: -.045em; font-weight: 700; }

.subtitle { max-width: 680px; margin: 16px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

.run-meta { flex: 0 0 auto; display: grid; grid-template-columns: auto auto; gap: 7px 22px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.018); }

.run-meta-label { color: #687184; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.run-meta-value { color: #d5dbe7; font: 500 12px 'DM Mono', monospace; text-align: right; }

.panel { border: 1px solid var(--line); border-radius: 14px; background: rgba(14, 19, 29, .84); box-shadow: 0 16px 60px rgba(0,0,0,.16); overflow: hidden; }

.panel-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--line); }

.panel-title-wrap { display: flex; align-items: center; gap: 12px; }

.step-number { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: #08130e; background: var(--brand); font: 800 12px 'DM Mono', monospace; }

.panel-title { margin: 0; font-size: 14px; font-weight: 700; }

.panel-description { margin: 4px 0 0; color: var(--muted); font-size: 12px; }

.current-pill { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(0,191,166,.16); border-radius: 999px; color: var(--brand); background: rgba(0,191,166,.055); font-size: 11px; font-weight: 700; }

.database-grid { display: grid; grid-template-columns: repeat(5, minmax(135px, 1fr)); gap: 1px; background: var(--line); }

.db-card {
    position: relative; min-height: 164px; padding: 20px; border: 0; color: var(--text); background: var(--panel);
    text-align: left; cursor: pointer; transition: background .2s, transform .2s;
}

.db-card:hover:not(:disabled) { z-index: 1; background: #25262d; box-shadow: inset 0 -2px var(--brand-strong); }

.db-card:focus-visible { z-index: 2; outline: 2px solid var(--brand); outline-offset: -2px; }

.db-card:disabled { cursor: not-allowed; }

.db-card.visited { opacity: .52; }

.db-icon { width: 35px; height: 35px; display: grid; place-items: center; margin-bottom: 25px; border: 1px solid var(--line-strong); border-radius: 9px; color: #bcc5d5; background: rgba(255,255,255,.025); }

.db-card:hover:not(:disabled) .db-icon { color: var(--brand); border-color: rgba(0,191,166,.24); }

.db-name { display: block; font-size: 13px; font-weight: 700; }

.db-engine { display: block; margin-top: 4px; color: #747e90; font-size: 10px; }

.db-action { display: flex; align-items: center; gap: 5px; margin-top: 14px; color: var(--brand-strong); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

.db-card.visited .db-action { color: #7c8697; }

.status-bar { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 22px; border-top: 1px solid var(--line); color: var(--muted); font: 500 11px 'DM Mono', monospace; }

.status-icon { width: 18px; height: 18px; display: grid; place-items: center; color: var(--brand-strong); }

.status-icon.running { width: 15px; height: 15px; border: 2px solid rgba(0,191,166,.2); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; }

.status-bar.error { color: var(--danger); }

.status-spacer { flex: 1; }

.status-hint { color: #555f70; font-family: 'Manrope', sans-serif; }

@keyframes spin { to { transform: rotate(360deg); } }

.section { margin-top: 26px; }

.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 12px; }

.section-heading h2 { margin: 0; font-size: 16px; letter-spacing: -.015em; }

.section-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }

.section-tag { color: #667083; font: 500 10px 'DM Mono', monospace; }

.results-wrap { overflow-x: auto; }

.results-table { width: 100%; border-collapse: collapse; font-size: 12px; }

.results-table th, .results-table td { padding: 14px 18px; border-bottom: 1px solid var(--line); }

.results-table tr:last-child td { border-bottom: 0; }

.results-table th { color: #788295; background: rgba(255,255,255,.018); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: right; white-space: nowrap; }

.results-table th:first-child { text-align: left; min-width: 240px; }

.results-table td:first-child { color: #c3cbd9; font-weight: 600; }

.results-table td.metric { color: #d6ddea; text-align: right; white-space: nowrap; font: 500 12px 'DM Mono', monospace; }

.results-table td.fastest { color: var(--brand); background: rgba(0,191,166,.025); }

.results-table tr:hover td { background-color: rgba(255,255,255,.018); }

.arrival-label { display: inline-flex; align-items: center; gap: 7px; }

.arrival-label::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--purple); }

.insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

details.insight { border: 1px solid var(--line); border-radius: 11px; background: rgba(14,19,29,.7); overflow: hidden; }

details.insight[open] { border-color: rgba(102,126,234,.2); }

details.insight summary { list-style: none; display: flex; align-items: center; gap: 11px; padding: 16px 18px; cursor: pointer; color: #c9d0dc; font-size: 12px; font-weight: 600; }

details.insight summary::-webkit-details-marker { display: none; }

.summary-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: var(--purple); background: rgba(102,126,234,.09); }

.summary-copy { min-width: 0; }

.summary-copy small { display: block; margin-top: 3px; color: #697386; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }

.chevron { margin-left: auto; color: #606a7b; transition: transform .2s; }

details[open] .chevron { transform: rotate(180deg); }

.code { max-height: 460px; margin: 0; padding: 18px; overflow: auto; border-top: 1px solid var(--line); color: #aab7c9; background: #141416; font: 400 11px/1.65 'DM Mono', monospace; tab-size: 4; }

.source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.source-card { border: 1px solid var(--line); border-radius: 11px; background: rgba(14,19,29,.64); overflow: hidden; }

.source-card summary { list-style: none; display: flex; align-items: center; padding: 17px 18px; cursor: pointer; color: #c7cfdb; font: 500 11px 'DM Mono', monospace; }

.source-card summary::-webkit-details-marker { display: none; }

.file-dot { width: 7px; height: 7px; margin-right: 10px; border-radius: 2px; background: var(--brand-strong); box-shadow: 0 0 10px rgba(0,191,166,.35); }

.reset-button { border: 1px solid var(--line-strong); border-radius: 7px; padding: 7px 11px; color: #aab3c2; background: rgba(255,255,255,.025); cursor: pointer; font-size: 11px; font-weight: 600; }

.reset-button:hover { color: var(--text); background: rgba(255,255,255,.06); }

@media (max-width: 1050px) {
    .layout { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .database-grid { grid-template-columns: repeat(3, 1fr); }
    .page-header { align-items: flex-start; }
}

@media (max-width: 720px) {
    .topbar { height: 60px; padding: 0 18px; }
    .brand { min-width: 0; }
    .brand-name span, .breadcrumb, .docs-link { display: none; }
    .content { padding: 32px 16px 60px; }
    .page-header { display: block; }
    .run-meta { margin-top: 22px; width: 100%; }
    .database-grid { grid-template-columns: 1fr 1fr; }
    .db-card { min-height: 145px; }
    .panel-header { align-items: flex-start; }
    .current-pill { display: none; }
    .insight-grid, .source-grid { grid-template-columns: 1fr; }
    .status-hint { display: none; }
}

@media (max-width: 430px) {
    .database-grid { grid-template-columns: 1fr; }
    .db-card { min-height: auto; }
    .db-icon { margin-bottom: 14px; }
    h1 { font-size: 34px; }
    .environment { padding: 7px; }
    .environment span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.nav-item:disabled { cursor: default; opacity: .52; }

.nav-soon { margin-left: auto; color: #626d7e; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }

.benchmark-header { align-items: stretch; }

.benchmark-run-card {
    width: 285px; flex: 0 0 285px; align-self: flex-end; padding: 17px; border: 1px solid var(--line);
    border-radius: 12px; background: linear-gradient(145deg, rgba(102,126,234,.07), rgba(255,255,255,.018));
}

.run-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

.run-control label { color: #7d8798; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.run-control select {
    min-width: 125px; padding: 7px 26px 7px 9px; border: 1px solid var(--line-strong); border-radius: 7px;
    color: #d6ddea; background: #141416; outline: none; font: 500 10px 'DM Mono', monospace;
}

.run-control select:focus { border-color: rgba(0,191,166,.4); }

.run-benchmark {
    width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0;
    border-radius: 8px; color: #07130d; background: var(--brand); cursor: pointer; font-size: 11px; font-weight: 800;
    box-shadow: 0 8px 24px rgba(0,191,166,.12); transition: transform .18s, background .18s;
}

.run-benchmark:hover:not(:disabled) { transform: translateY(-1px); background: #b6ffda; }

.run-benchmark:disabled { cursor: wait; opacity: .78; }

.button-spinner { width: 13px; height: 13px; border: 2px solid rgba(7,19,13,.25); border-top-color: #07130d; border-radius: 50%; animation: spin .65s linear infinite; }

.benchmark-overview { overflow: visible; }

.suite-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--line); }

.suite-kicker { display: block; margin-bottom: 4px; color: #667184; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.suite-heading h2 { margin: 0; font-size: 14px; }

.suite-status { max-width: 55%; display: flex; align-items: center; gap: 8px; color: #7f899b; font: 500 10px 'DM Mono', monospace; text-align: right; }

.pulse-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 4px rgba(255,198,107,.1); animation: pulse 1.2s ease-in-out infinite; }

@keyframes pulse { 50% { opacity: .45; transform: scale(.8); } }

.engine-status-grid { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 1px; background: var(--line); }

.engine-status { min-height: 183px; padding: 17px; background: var(--panel); }

.engine-status.complete { background: linear-gradient(160deg, rgba(0,191,166,.045), var(--panel) 54%); }

.engine-status.failed { background: linear-gradient(160deg, rgba(255,122,139,.04), var(--panel) 54%); }

.engine-status-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 21px; }

.engine-status .db-icon { width: 32px; height: 32px; margin: 0; }

.engine-state { padding-top: 3px; color: #5f697a; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.engine-status.complete .engine-state { color: var(--brand-strong); }

.engine-status.failed .engine-state { color: var(--danger); }

.engine-state.testing { color: var(--warning); }

.engine-status strong { display: block; color: #cbd3df; font-size: 12px; }

.engine-status small { display: block; margin-top: 4px; color: #667083; font-size: 9px; }

.engine-total { margin-top: 19px; padding-top: 11px; border-top: 1px solid var(--line); }

.engine-total span { display: block; margin-bottom: 3px; color: #5f697a; font-size: 8px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.engine-total b { color: #dce3ed; font: 500 12px 'DM Mono', monospace; }

.engine-error { margin-top: 15px; color: var(--danger); font-size: 8px; }

.engine-error strong { color: var(--danger); font-size: 8px; }

.engine-error span { display: block; margin-top: 3px; overflow: hidden; color: #9b6670; font: 400 7px/1.4 'DM Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }

.benchmark-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.kpi-card { min-height: 124px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 11px; background: rgba(14,19,29,.72); }

.kpi-card > span { display: block; color: #6e788a; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.kpi-card strong { display: block; margin: 12px 0 6px; color: #e2e8f1; font-size: 22px; letter-spacing: -.03em; }

.kpi-card:first-child strong { color: var(--brand); }

.kpi-card strong em { color: #606a7b; font-size: 13px; font-style: normal; font-weight: 500; }

.kpi-card small { color: #667184; font-size: 9px; }

.runtime-chart { padding: 24px; }

.runtime-row { display: grid; grid-template-columns: 100px minmax(100px, 1fr) 90px; align-items: center; gap: 16px; margin-bottom: 16px; }

.runtime-row:last-child { margin-bottom: 0; }

.runtime-label { color: #abb4c3; font-size: 11px; font-weight: 600; }

.runtime-track { height: 8px; border-radius: 3px; background: rgba(255,255,255,.035); overflow: hidden; }

.runtime-bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7c6dd7, #667eea); box-shadow: 0 0 14px rgba(102,126,234,.16); transition: width .6s ease; }

.runtime-bar.best { background: linear-gradient(90deg, #3dc98d, var(--brand)); box-shadow: 0 0 14px rgba(0,191,166,.18); }

.runtime-row strong { color: #cbd3df; text-align: right; font: 500 10px 'DM Mono', monospace; }

.benchmark-table th:first-child { min-width: 260px; }

.benchmark-empty { margin-top: 26px; padding: 55px 25px; border: 1px dashed var(--line-strong); border-radius: 14px; text-align: center; background: rgba(14,19,29,.35); }

.empty-visual { position: relative; width: 64px; height: 55px; display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin: 0 auto 18px; color: var(--purple); }

.empty-visual svg { position: absolute; top: 0; left: 0; opacity: .8; }

.empty-visual span { width: 7px; border-radius: 2px 2px 0 0; background: rgba(102,126,234,.3); }

.empty-visual span:nth-of-type(1) { height: 13px; }

.empty-visual span:nth-of-type(2) { height: 23px; }

.empty-visual span:nth-of-type(3) { height: 34px; background: rgba(0,191,166,.45); }

.benchmark-empty h2 { margin: 0 0 7px; font-size: 15px; }

.benchmark-empty p { max-width: 440px; margin: 0 auto; color: var(--muted); font-size: 11px; line-height: 1.6; }

@media (max-width: 1050px) {
    .engine-status-grid { grid-template-columns: repeat(3, 1fr); }
    .benchmark-kpis { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
    .benchmark-run-card { width: 100%; margin-top: 22px; }
    .engine-status-grid { grid-template-columns: 1fr 1fr; }
    .suite-heading { align-items: flex-start; }
    .suite-status { max-width: 50%; }
}

@media (max-width: 480px) {
    .engine-status-grid, .benchmark-kpis { grid-template-columns: 1fr; }
    .engine-status { min-height: 150px; }
    .runtime-row { grid-template-columns: 75px minmax(70px, 1fr) 72px; gap: 9px; }
}

/* Query inspector */

.inspector-header { align-items: center; }

.inspector-badge { display: flex; align-items: center; gap: 12px; min-width: 190px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 11px; color: var(--purple); background: rgba(102,126,234,.055); }

.inspector-badge strong, .inspector-badge span { display: block; }

.inspector-badge strong { color: #d5dce7; font-size: 12px; }

.inspector-badge span { margin-top: 3px; color: #707a8c; font-size: 9px; }

.inspector-layout { display: grid; grid-template-columns: 225px minmax(0, 1fr); gap: 14px; align-items: start; }

.query-list { position: sticky; top: 88px; padding: 8px; }

.query-list-title { display: flex; justify-content: space-between; padding: 11px 10px 13px; color: #7b8596; font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }

.query-list-title span { color: #515b6c; }

.query-list-item { width: 100%; padding: 13px 12px; border: 0; border-radius: 8px; color: #9aa4b5; background: transparent; text-align: left; cursor: pointer; }

.query-list-item:hover { background: rgba(255,255,255,.025); }

.query-list-item.active { color: var(--text); background: rgba(0,191,166,.065); box-shadow: inset 2px 0 var(--brand-strong); }

.query-type { display: block; margin-bottom: 6px; color: var(--brand-strong); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.query-list-item strong, .query-list-item small { display: block; }

.query-list-item strong { font-size: 10px; line-height: 1.4; }

.query-list-item small { margin-top: 4px; overflow: hidden; color: #626c7d; font: 400 8px 'DM Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }

.query-workspace { min-width: 0; display: grid; gap: 14px; }

.editor-header { display: flex; justify-content: space-between; gap: 22px; padding: 21px 22px; border-bottom: 1px solid var(--line); }

.editor-header h2 { margin: 0; font-size: 16px; }

.editor-header p { max-width: 590px; margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }

.copy-button { height: 32px; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 7px; color: #a7b0bf; background: rgba(255,255,255,.025); cursor: pointer; font-size: 9px; font-weight: 700; }

.copy-button:hover { color: var(--brand); border-color: rgba(0,191,166,.22); }

.code-editor { display: grid; grid-template-columns: 43px minmax(0,1fr); min-height: 210px; overflow: auto; color: #aebbd0; background: #121214; font: 400 11px/1.75 'DM Mono', monospace; }

.line-numbers { display: flex; flex-direction: column; padding: 20px 12px; border-right: 1px solid var(--line); color: #3f4858; text-align: right; user-select: none; }

.code-editor pre { margin: 0; padding: 20px; color: #acb9cd; font: inherit; }

.code-prefix { color: var(--purple); }

.parameter-strip { display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 10px 18px; border-top: 1px solid var(--line); }

.parameter-strip > span { margin-right: 4px; color: #5f697a; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.parameter { display: flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; font: 500 8px 'DM Mono', monospace; }

.parameter b { padding: 5px 7px; color: #7c8798; background: rgba(255,255,255,.025); }

.parameter code { padding: 5px 7px; color: var(--brand); background: rgba(0,191,166,.035); }

.mini-panel-header { min-height: 67px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 19px; border-bottom: 1px solid var(--line); }

.mini-panel-header h2 { margin: 0; font-size: 12px; }

.mini-panel-header p { margin: 4px 0 0; color: #697386; font-size: 9px; }

.mini-panel-header > span { color: #646e7f; font: 500 9px 'DM Mono', monospace; }

.mini-panel-header select { min-width: 120px; padding: 7px 25px 7px 9px; border: 1px solid var(--line); border-radius: 6px; color: #b9c2d0; background: #141416; font: 500 9px 'DM Mono', monospace; }

.pipeline-steps { display: grid; grid-template-columns: repeat(4, 1fr); padding: 21px 19px; }

.pipeline-step { display: flex; align-items: center; gap: 9px; color: #9ba5b5; font-size: 9px; white-space: nowrap; }

.pipeline-step i { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(0,191,166,.17); border-radius: 6px; color: var(--brand); background: rgba(0,191,166,.05); font: normal 600 8px 'DM Mono', monospace; }

.pipeline-step svg { margin-left: auto; margin-right: 10px; color: #4e5869; }

.plan-code { max-height: 320px; }

.plan-empty { min-height: 145px; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 30px; }

.plan-empty strong { display: block; color: #c4ccd9; font-size: 11px; }

.plan-empty p { max-width: 460px; margin: 5px 0 0; color: #6f798b; font-size: 9px; line-height: 1.55; }

.compatibility-pill { display: flex !important; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid rgba(0,191,166,.15); border-radius: 999px; color: var(--brand) !important; background: rgba(0,191,166,.045); font-family: 'Manrope', sans-serif !important; }

.compatibility-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); }

.compatibility-grid > div { min-width: 0; padding: 15px; background: var(--panel); }

.compatibility-grid .db-icon { width: 27px; height: 27px; margin: 0 0 12px; }

.compatibility-grid strong { display: block; overflow: hidden; color: #b9c2cf; font-size: 9px; text-overflow: ellipsis; }

.compatibility-grid small { display: flex; align-items: center; gap: 4px; margin-top: 5px; color: var(--brand-strong); font-size: 8px; }

/* Configuration */

.config-header { align-items: center; }

.config-actions { display: flex; gap: 8px; flex: 0 0 auto; }

.secondary-button, .save-button { min-height: 36px; padding: 0 13px; border-radius: 7px; cursor: pointer; font-size: 9px; font-weight: 700; }

.secondary-button { border: 1px solid var(--line-strong); color: #99a3b3; background: rgba(255,255,255,.02); }

.save-button { min-width: 118px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; color: #08130e; background: var(--brand); }

.config-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; align-items: start; }

.config-layout > div { display: grid; gap: 14px; }

.settings-title { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }

.settings-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--brand); background: rgba(0,191,166,.065); }

.settings-icon.purple { color: var(--purple); background: rgba(102,126,234,.07); }

.settings-title h2 { margin: 0; font-size: 12px; }

.settings-title p { margin: 4px 0 0; color: #6b7587; font-size: 9px; }

.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 20px; }

.setting-row label { display: block; color: #c5cdd9; font-size: 10px; font-weight: 700; }

.setting-row p { margin: 5px 0 0; color: #687284; font-size: 9px; }

.setting-row select { min-width: 125px; padding: 8px 28px 8px 10px; border: 1px solid var(--line-strong); border-radius: 7px; color: #d5dce7; background: #141416; font: 500 10px 'DM Mono', monospace; }

.config-warning { display: flex; align-items: center; gap: 10px; margin: 0 20px 20px; padding: 10px 12px; border: 1px solid rgba(255,198,107,.14); border-radius: 7px; background: rgba(255,198,107,.045); }

.config-warning > span { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: #1a1205; background: var(--warning); font-size: 10px; font-weight: 800; }

.config-warning p { margin: 0; color: #8b806e; font-size: 8px; }

.config-warning strong { display: block; margin-bottom: 2px; color: var(--warning); font-size: 9px; }

.operation-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 18px 20px 20px; }

.operation-toggle { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; color: #737d8e; background: rgba(255,255,255,.012); text-align: left; cursor: pointer; }

.operation-toggle:hover { background: rgba(255,255,255,.025); }

.operation-toggle > span { width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 4px; }

.operation-toggle.enabled > span { color: #07130d; border-color: var(--brand); background: var(--brand); }

.operation-toggle strong, .operation-toggle small { display: block; }

.operation-toggle strong { color: #aeb7c6; font-size: 9px; }

.operation-toggle small { margin-top: 2px; color: #5d6778; font-size: 7px; }

.segmented-control { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 18px 20px 20px; }

.segmented-control button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; border: 1px solid var(--line); border-radius: 7px; color: #7b8596; background: rgba(255,255,255,.012); cursor: pointer; font-size: 9px; font-weight: 700; }

.segmented-control button.active { color: var(--brand); border-color: rgba(0,191,166,.22); background: rgba(0,191,166,.05); }

.config-summary { position: sticky; top: 88px; padding: 21px; background: linear-gradient(155deg, rgba(102,126,234,.065), var(--panel) 42%); }

.config-summary h2 { margin: 5px 0 7px; font-size: 14px; }

.config-summary > p { margin: 0; color: #6d7788; font-size: 9px; line-height: 1.6; }

.config-summary-list { margin: 20px 0; border-top: 1px solid var(--line); }

.config-summary-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 9px; }

.config-summary-list span { color: #697385; }

.config-summary-list strong { color: #bdc6d3; font-weight: 600; }

.apply-button { width: 100%; min-height: 39px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 7px; color: #07130d; background: var(--brand); cursor: pointer; font-size: 9px; font-weight: 800; }

.apply-button:hover { background: #b6ffda; }

.config-summary > small { display: block; margin-top: 9px; color: #555f70; font-size: 7px; text-align: center; }

@media (max-width: 1050px) {
    .inspector-layout { grid-template-columns: 190px minmax(0,1fr); }
    .pipeline-steps { grid-template-columns: 1fr 1fr; gap: 16px; }
    .operation-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
    .inspector-layout, .config-layout { grid-template-columns: 1fr; }
    .query-list { position: static; display: grid; grid-template-columns: 1fr 1fr; }
    .query-list-title { grid-column: 1 / -1; }
    .config-summary { position: static; }
    .compatibility-grid { grid-template-columns: repeat(3, 1fr); }
    .config-actions { margin-top: 20px; }
}

@media (max-width: 520px) {
    .query-list, .pipeline-steps, .operation-grid, .segmented-control { grid-template-columns: 1fr; }
    .compatibility-grid { grid-template-columns: 1fr 1fr; }
    .editor-header, .setting-row { align-items: flex-start; flex-direction: column; }
    .parameter-strip { align-items: flex-start; flex-wrap: wrap; }
    .config-actions { width: 100%; }
    .config-actions button { flex: 1; }
}