*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
      --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

      --r-sm: 8px;
      --r-md: 12px;
      --r-lg: 18px;
      --r-xl: 22px;

      /* Font-size ramp (extract): the single source of truth for type sizes,
         matching the role scale DESIGN.md documents (the Density Rule). Use
         var(--fs-*) in place of bare font-size literals. All ramp sizes
         scale with the UI-size setting through --ui-scale. */
      --ui-scale: 1;
      --fs-10: calc(10px * var(--ui-scale));
      --fs-11: calc(11px * var(--ui-scale));
      --fs-12: calc(12px * var(--ui-scale));
      --fs-13: calc(13px * var(--ui-scale));
      --fs-14: calc(14px * var(--ui-scale));
      --fs-15: calc(15px * var(--ui-scale));
      --fs-16: calc(16px * var(--ui-scale));
      --fs-18: calc(18px * var(--ui-scale));
      --fs-20: calc(20px * var(--ui-scale));

    }

    html, body { height: 100%; }
    body {
      font-family: var(--sans);
      -webkit-font-smoothing: antialiased;
      background: var(--bg);
      color: var(--text);
      font-size: var(--fs-14);
      line-height: 1.6;
      min-height: 100vh;
      position: relative;
    }
    /* ── Layout ── */
    .app-shell {
      display: grid;
      grid-template-columns: 300px 1fr;
      grid-template-rows: 56px 1fr;
      grid-template-areas: "topbar topbar" "sidebar main";
      height: 100vh;
      overflow: hidden;
      position: relative;
      z-index: 1;
    }

    /* ── Top bar ── */
    .topbar {
      grid-area: topbar;
      background: var(--bg2);
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      padding: 0 24px;
      gap: 16px;
      box-shadow: none;
      position: relative;
      z-index: 2;
    }
    .topbar-logo { display: flex; align-items: center; gap: 10px; }
    .logo-mark {
      width: 32px; height: 32px;
      border-radius: var(--r-sm);
      overflow: hidden;
      /* The icon carries its own blue tile, so no frame is needed. */
      border: none;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .logo-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .topbar-title { font-size: var(--fs-14); font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
    .topbar-sub { font-family: var(--mono); font-size: var(--fs-10); color: var(--text3); margin-left: 6px; }
    .topbar-sep { flex: 1; }
    .badge-pill {
      font-family: var(--mono); font-size: var(--fs-10);
      padding: 3px 10px; border-radius: 20px;
      border: 1px solid var(--line);
      color: var(--accent-text, var(--oracle-red)); background: rgba(var(--accent-rgb),0.08);
      letter-spacing: 0.04em;
      box-shadow: none;
    }
    .conn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text3); transition: background 0.3s; }
    .conn-dot.pending   { background: var(--amber); }
    .conn-dot.connected { background: var(--green); }
    .conn-label { font-size: var(--fs-11); color: var(--text3); }

    /* ── Sidebar ── */
    .sidebar {
      grid-area: sidebar;
      position: relative;
      background: var(--sidebar);
      border-right: 1px solid var(--line);
      overflow-y: auto;
      padding: 20px 18px;
      display: flex; flex-direction: column; gap: 20px;
      box-shadow: none;
      z-index: 1;
    }
    .sidebar-resize-handle {
      position: absolute; top: 0; right: -3px;
      width: 6px; height: 100%;
      cursor: col-resize; z-index: 20;
      background: transparent;
      transition: background 0.15s;
    }
    .sidebar-resize-handle:hover,
    .sidebar-resize-handle.dragging { background: var(--accent); }
    .section-label {
      font-size: var(--fs-10); font-weight: 600;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--text3); margin-bottom: 8px;
    }
    label.field-label { display: block; font-size: var(--fs-11); color: var(--text2); margin-bottom: 4px; }
    input[type="text"], input[type="password"], textarea, select {
      width: 100%;
      background: var(--bg2);
      border: 1px solid var(--control-border);
      border-radius: var(--r-sm);
      padding: 8px 11px;
      color: var(--text);
      font-family: var(--mono); font-size: var(--fs-12);
      outline: none;
      box-shadow: none;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    input:focus, textarea:focus, select:focus {
      border-color: var(--accent);
      box-shadow: var(--glow-sm);
    }
    .field { margin-bottom: 12px; }
    .field:last-child { margin-bottom: 0; }
    .cred-group { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; box-shadow: none; }
    .endpoint-display {
      font-family: var(--mono); font-size: var(--fs-10); color: var(--text3);
      background: var(--bg); border: 1px solid var(--line);
      border-radius: var(--r-sm); padding: 7px 10px;
      word-break: break-all; line-height: 1.5;
    }
    /* ── Main panel ── */
    .main { grid-area: main; display: flex; flex-direction: column; overflow: hidden; }

    /* ── Query tabs bar (above editor) ── */
    .query-tabs-bar {
      display: flex;
      align-items: center;
      background: var(--bg);
      border-bottom: 1px solid var(--line);
      padding: 0 16px;
      gap: 0;
      flex-shrink: 0;
      overflow-x: auto;
      box-shadow: none;
    }
    .query-tabs-bar::-webkit-scrollbar { height: 3px; }
    .query-tab {
      display: flex; align-items: center; gap: 6px;
      padding: 9px 14px;
      font-size: var(--fs-12); font-family: var(--mono);
      color: var(--text3);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      white-space: nowrap;
      transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
      user-select: none;
    }
    .query-tab:hover { color: var(--text2); }
    .query-tab.active { color: var(--text); font-weight: 600; background: var(--bg2); box-shadow: none; border-bottom-color: var(--accent); }
    .query-tab .qtab-close {
      font-size: var(--fs-10); color: var(--text3);
      width: 22px; height: 22px;
      margin: -3px -4px;              /* keep the visual box ~16px, enlarge the hit area */
      display: flex; align-items: center; justify-content: center;
      border-radius: 3px;
      background: none; border: none; padding: 0; cursor: pointer;
      font-family: inherit; line-height: 1;
      transition: background 0.15s, color 0.15s;
    }
    .query-tab .qtab-close:hover { background: rgba(var(--danger-rgb),0.2); color: var(--danger-text); }
    .qtab-status {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--text3); flex-shrink: 0;
    }
    .qtab-status.ok  { background: var(--green); }
    .qtab-status.err { background: var(--danger); }
    .qtab-status.busy { background: var(--amber); animation: pulse 1s ease-in-out infinite; }
    /* Repeat-schedule badge on the owning tab: a soft amber pulse that says
       "this query is on a timer" without competing with the run dot. */
    .qtab-repeat {
      font-family: var(--mono); font-size: var(--fs-10);
      color: var(--amber); background: rgba(var(--amber-rgb),0.12);
      border: 1px solid rgba(var(--amber-rgb),0.35); border-radius: 10px;
      padding: 0 6px; line-height: 16px; white-space: nowrap;
      animation: tabRepeatPulse 1.6s ease-in-out infinite;
    }
    @keyframes tabRepeatPulse {
      0%, 100% { opacity: 1; }
      50%      { opacity: 0.55; }
    }
    .add-query-btn {
      padding: 6px 10px; font-size: var(--fs-18); color: var(--text3);
      cursor: pointer; border: none; background: none;
      line-height: 1; transition: color 0.15s; flex-shrink: 0;
    }
    .add-query-btn:hover { color: var(--oracle-red); }

    /* Vertical split container (editor + results) */
    .split-container {
      flex: 1; min-height: 0;
      display: flex; flex-direction: column; overflow: hidden;
    }
    .split-top { display: flex; flex-direction: column; min-height: 80px; overflow: hidden; }
    .split-handle {
      height: 6px; flex-shrink: 0;
      background: var(--line);
      cursor: row-resize;
      position: relative;
      transition: background 0.15s;
      z-index: 10;
      touch-action: none;   /* touch drags resize the pane instead of scrolling */
    }
    .split-handle::after {
      content: '';
      position: absolute;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      width: 36px; height: 2px;
      border-radius: 2px;
      background: var(--line2);
      pointer-events: none;
    }
    .split-handle:hover, .split-handle.dragging { background: var(--accent); }
    /* .split-bottom defined below with results-area */

    /* SQL editor area */
    .editor-area {
      padding: 14px 20px 0;
      display: flex; flex-direction: column; gap: 8px;
      flex: 1; min-height: 0;
    }
    .editor-toolbar { display: flex; align-items: center; gap: 8px; }
    .editor-toolbar .tl { font-size: var(--fs-11); color: var(--text2); }
    .editor-toolbar .sep { flex: 1; }

    /* Line-numbered editor */
    .editor-wrap {
      display: flex;
      border: 1px solid var(--line2);
      border-radius: var(--r-md);
      background: var(--bg2);
      overflow: hidden;
      flex: 1;
      min-height: 60px;
      box-shadow: none;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .editor-wrap:focus-within {
      border-color: var(--accent);
      box-shadow: var(--glow-sm);
    }
    .line-numbers {
      padding: 12px 10px 12px 12px;
      /* Match the editor's own background instead of the lighter --bg3 —
         a strong shade jump plus the rounded editor-wrap corners was making
         the gutter read as a separate floating box instead of one editor. */
      background: var(--bg2);
      border-right: 1px solid var(--line2);
      font-family: var(--mono); font-size: var(--fs-13); line-height: 1.7;
      color: var(--text3);
      text-align: right;
      user-select: none;
      overflow: hidden;
      min-width: 42px;
      white-space: pre;
      flex-shrink: 0;
      height: 100%;
      box-sizing: border-box;
    }
    .editor-body {
      position: relative; flex: 1; min-width: 0;
      display: flex; align-items: stretch;
    }
    /* Syntax-highlight mirror: same box as the textarea so glyph positions
       line up 1:1. The textarea's own text is transparent; the mirror renders
       the colored tokens beneath it. Both keep `white-space: pre` so line
       breaks (and therefore vertical alignment) always match. */
    .sql-hl {
      position: absolute; inset: 0;
      margin: 0; padding: 12px 14px;
      font-family: var(--mono); font-size: var(--fs-13); line-height: 1.7;
      tab-size: 2; white-space: pre;
      color: var(--text);
      overflow: hidden;
      pointer-events: none; user-select: none;
      box-sizing: border-box;
    }
    .hl-kw    { color: var(--kw); font-weight: 600; }
    .hl-str   { color: var(--green); }
    .hl-cmt   { color: var(--text3); font-style: italic; }
    .hl-num   { color: var(--amber); }
    .hl-param { color: var(--accent-text, var(--oracle-red)); }
    .sql-editor {
      font-family: var(--mono); font-size: var(--fs-13); line-height: 1.7;
      resize: none;
      background: transparent;
      border: none;
      padding: 12px 14px;
      color: transparent; caret-color: var(--text); tab-size: 2;
      flex: 1;
      outline: none;
      overflow-y: auto;
      overflow-x: auto;
      white-space: pre;
      height: 100%;
      width: 100%;
      box-sizing: border-box;
    }
    .sql-editor::placeholder { color: var(--text3); opacity: 0.7; }
    .sql-editor::selection { background: rgba(var(--accent-rgb), 0.35); }

    /* Connection + Run + row limit bar, directly above the SQL editor */
    .run-bar { display:flex; align-items:center; gap:8px; }
    .run-bar select { width:auto; }
    .run-bar #connSelector { flex:1; min-width:150px; height:34px; padding:0 10px; }

    .btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 14px; border-radius: var(--r-sm);
      font-family: var(--sans); font-size: var(--fs-13); font-weight: 500;
      cursor: pointer; border: none;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
    }
    .btn-primary {
      background: var(--accent);
      color: var(--on-accent);
      border: 1px solid var(--accent);
      box-shadow: none;
      font-weight: 600;
    }
    .btn-primary:hover { filter: brightness(1.08); }
    .btn-primary:active { filter: brightness(0.94); }
    .btn-primary:disabled { background: var(--bg4); color: var(--text3); cursor: not-allowed; box-shadow: none; transform: none; }
    .btn-ghost {
      background: var(--bg2);
      border: 1px solid var(--control-border); color: var(--text);
      box-shadow: none;
    }
    .btn-ghost:hover { background: var(--bg3); }
    .btn-ghost:active { background: var(--bg4); }
    /* Compact controls shared by the toolbar rows and sidebar (index.html
       uses these classes instead of repeated inline styles) */
    .mini-btn    { padding: 4px 10px; font-size: var(--fs-11); }
    .mini-select { height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg3); color: var(--text); font-size: var(--fs-11); cursor: pointer; }
    .tool-select { height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg3); color: var(--text); font-size: var(--fs-11); cursor: pointer; }
    .side-search { width: 100%; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg3); color: var(--text); font-size: var(--fs-11); outline: none; box-sizing: border-box; }
    .side-search:focus { border-color: var(--oracle-red); }
    .run-btn     { padding: 0 10px; font-size: var(--fs-11); height: 34px; }
    .run-select  { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg3); color: var(--text); font-size: var(--fs-12); cursor: pointer; }
    @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }

    /* Results */
    .results-area { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
    .split-bottom { flex: 1; display: flex; flex-direction: column; min-height: 80px; overflow: hidden; }
    .tabs { display: flex; border-bottom: 1px solid var(--line); padding: 6px 20px 8px; gap: 2px; flex-shrink: 0; overflow-x: auto; }
    .tabs::-webkit-scrollbar { height: 3px; }
    /* Results tabs read as a segmented control — a view switcher over one
       surface, not documents. No underline; the active segment is an
       elevated pill. Distinct from query tabs (underline) and sidebar tabs
       (quiet border). */
    .tab {
      padding: 5px 13px; font-size: var(--fs-12); color: var(--text3);
      cursor: pointer; border-radius: 6px;
      transition: color 0.15s, background 0.15s, box-shadow 0.15s; font-family: var(--sans);
      display: inline-flex; align-items: center;
      box-shadow: none;
    }
    .tab:hover { color: var(--text2); background: var(--bg3); }
    .tab.active { background: var(--bg3); color: var(--text); box-shadow: none; font-weight: 600; }
    .tab-content { flex: 1; overflow: auto; padding: 16px 20px; min-height: 0; flex-direction: column; display: flex; }
    /* Table tab — overflow must be hidden so only table-wrap scrolls */
    #tab-table { overflow: hidden; padding: 12px 20px 0; }
    #tableContainer { flex: 1; display: flex; flex-direction: column; min-height: 0; gap: 8px; }
    .tbl-toolbar { flex-shrink: 0; }
    .table-wrap {
      flex: 1; overflow: auto; min-height: 0;
      border-radius: var(--r-md);
    }
    .table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
    .table-wrap::-webkit-scrollbar-track { background: var(--bg3); }
    .table-wrap::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }
    .table-wrap::-webkit-scrollbar-thumb:hover { background: var(--text3); }
    .table-wrap:focus { outline: none; box-shadow: 0 0 0 2px var(--oracle-red) inset; }
    /* Sticky header — must be on th, not thead tr */
    thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--bg2);
      box-shadow: inset 0 -1px 0 var(--line2);
    }

    /* Empty state */
    .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 160px; gap: 10px; color: var(--text3); }
    .empty-icon { font-size: calc(30px * var(--ui-scale)); opacity: 0.4; }
    .empty-state p { font-size: var(--fs-13); }

    /* Table toolbar */
    .tbl-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .tbl-toolbar input { flex:1; min-width:180px; padding:6px 10px; border:1px solid var(--line); border-radius:6px; background:var(--bg3); color:var(--text); font-size: var(--fs-12); }
    .tbl-toolbar input:focus { outline:none; border-color:var(--oracle-red); }
    table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-12); font-family: var(--mono); direction: ltr; }
    /* Opt-in only (Settings > Results grid direction). Cells carry dir="auto",
       so Arabic values read correctly without mirroring the whole grid. */
    table.results-tbl.rtl { direction: rtl; }
    thead tr { background: var(--bg3); }
    th { cursor: pointer; user-select: none; }
    th:hover { background: var(--bg4); }
    th .sort-icon { margin-right:4px; opacity:0.4; font-style:normal; }
    th.asc .sort-icon::after  { content:'▲'; opacity:1; }
    th.desc .sort-icon::after { content:'▼'; opacity:1; }
    th.asc .sort-icon, th.desc .sort-icon { opacity:1; }
    td.row-num { color:var(--text3); font-size: var(--fs-10); text-align:center; padding:6px 8px; min-width:36px; border-right:1px solid var(--line); }
    td.cell-sel { outline: 2px solid var(--accent); outline-offset: -2px; }
    th { padding: 9px 14px; text-align: left; font-weight: 600; font-size: var(--fs-11); letter-spacing: 0.06em; text-transform: uppercase; color: var(--th-text, var(--text3)); border-bottom: 2px solid var(--line2); border-right: 1px solid var(--line); white-space: nowrap; }
    th:first-child { border-left: none; }
    th:last-child  { border-right: none; }
    td { padding: 7px 14px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); color: var(--text); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
    td:first-child { border-left: none; }
    td:last-child  { border-right: none; }
    tr:last-child td { border-bottom: none; }
    /* Zebra striping — a neutral gray overlay (not theme bg-specific, not
       accent-tinted) so it reads as a quiet stripe and works the same way
       whether the active theme is dark or light. Placed before :hover so
       hover still wins on both odd and even rows. */
    tr:nth-child(even) td { background: rgba(127,127,127,0.05); }
    tr:hover td { background: var(--bg3); }

    .row-badge { display: inline-block; font-size: var(--fs-10); font-family: var(--mono); padding: 2px 8px; border-radius: 20px; background: rgba(var(--green-rgb),0.1); color: var(--green); border: 1px solid rgba(var(--green-rgb),0.2); margin-left: 10px; vertical-align: middle; }

    /* Code viewer */
    .code-viewer { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; font-family: var(--mono); font-size: calc(11.5px * var(--ui-scale)); line-height: 1.8; color: var(--text2); white-space: pre-wrap; word-break: break-all; overflow: auto; max-height: 100%; box-shadow: none; }

    /* Error box */
    .err-box { background: rgba(var(--danger-rgb),0.07); border: 1px solid rgba(var(--danger-rgb),0.25); border-radius: var(--r-md); padding: 14px 16px; color: var(--err-text); font-family: var(--mono); font-size: var(--fs-12); line-height: 1.7; box-shadow: var(--shadow-1); }
    .err-box strong { color: var(--danger-text); display: block; margin-bottom: 6px; }

    /* Status strip */
    .status-strip { display: flex; align-items: center; gap: 8px; padding: 0 20px; height: 30px; border-top: 1px solid var(--line); background: var(--bg2); flex-shrink: 0; }
    .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text3); transition: background 0.3s; }
    .status-dot.ok   { background: var(--green); }
    .status-dot.err  { background: var(--danger); }
    .status-dot.busy { background: var(--amber); animation: pulse 1s ease-in-out infinite; }
    .status-text { font-size: var(--fs-11); font-family: var(--mono); color: var(--text3); }
    .status-timer { font-size: var(--fs-11); font-family: var(--mono); color: var(--text3); }

    /* Utility */
    .util-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .util-box { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; box-shadow: none; }
    .util-box textarea { min-height: 80px; font-size: var(--fs-11); resize: vertical; }
    .util-box .btn { margin-top: 8px; width: 100%; justify-content: center; }

    /* ── History tab ── */
    .history-list { display: flex; flex-direction: column; gap: 8px; }
    .history-entry {
      background: var(--bg2); border: 1px solid var(--line);
      border-radius: var(--r-md); padding: 12px 14px;
      cursor: pointer; box-shadow: none;
      transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    }
    .history-entry:hover { border-color: var(--line2); background: var(--bg3); }
    .history-entry.he-err { border-left: 3px solid var(--danger); }
    .history-entry.he-ok  { border-left: 3px solid var(--green); }
    .history-entry.he-cancel { border-left: 3px solid var(--amber); }
    .history-meta {
      display: flex; align-items: center; gap: 10px;
      font-size: var(--fs-10); font-family: var(--mono); color: var(--text3);
      margin-bottom: 6px;
    }
    .history-meta .hm-qname { color: var(--accent-text, var(--oracle-red)); font-weight: 600; }
    .history-meta .hm-rows  { color: var(--green); }
    .history-meta .hm-dur   { color: var(--amber); }
    .history-meta .hm-err   { color: var(--danger-text); }
    .history-meta .hm-cancel { color: var(--amber); }
    .history-sql {
      font-family: var(--mono); font-size: var(--fs-11); color: var(--text2);
      white-space: pre-wrap; word-break: break-all;
      max-height: 60px; overflow: hidden;
      position: relative;
    }
    .history-sql::after {
      content:''; position:absolute; bottom:0; left:0; right:0;
      height:20px; background: linear-gradient(transparent, var(--bg2));
    }
    /* The history card itself is the `role="button"` affordance and loads the
       query, so the inner "Open in editor" <button> was removed in the Polish
       pass — it was redundant AND an ARIA anti-pattern (interactive nested
       inside interactive). */
    .history-empty { text-align:center; color:var(--text3); font-size: var(--fs-12); padding:40px 0; }
    .history-clear { font-size: var(--fs-11); color:var(--text3); cursor:pointer; background:none; border:none; padding:6px 8px; border-radius:4px; transition:color 0.15s; }
    .history-clear:hover { color: var(--danger-text); }

    /* Parameter modal — fades in with a small rise; exits softly (ease-out).
       Visibility stays in the transition so the exit fade completes before the
       overlay drops out of the hit-test tree. */
    .param-overlay { display:flex; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000; align-items:center; justify-content:center;
      opacity:0; visibility:hidden; transition: opacity .18s ease, visibility 0s linear .18s; }
    .param-overlay.open { opacity:1; visibility:visible; transition: opacity .18s ease, visibility 0s; }
    .param-modal { background:var(--bg2); border:1px solid var(--line);       border-radius:var(--r-lg); padding:24px; width:360px; max-width:90vw; box-shadow: var(--shadow-3);
      transition: transform .18s ease; }
    .param-overlay:not(.open) .param-modal { transform: translateY(10px); }
    .param-modal h3 { margin:0 0 16px; font-size: var(--fs-14); color:var(--text); text-wrap: balance; }
    .param-row { margin-bottom:12px; }
    .param-row label { display:block; font-size: var(--fs-11); color:var(--text2); margin-bottom:4px; }
    .param-row input { width:100%; }
    .param-row .cm-radio { display:flex; align-items:center; gap:7px; font-size: var(--fs-11); color:var(--text); margin:4px 0; cursor:pointer; }
    .param-row .cm-radio input { width:auto; margin:0; accent-color: var(--oracle-red); }
    .badge-pill.trial { color: var(--amber); }
    .param-actions { display:flex; gap:8px; margin-top:18px; justify-content:flex-end; }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text3); }

    /* Saved query items */
    .saved-query-item {
      display: flex; align-items: center; gap: 6px;
      background: var(--bg2); border: 1px solid var(--line);
      border-radius: var(--r-sm); padding: 7px 10px;
      cursor: pointer; box-shadow: none;
      transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    }
    .saved-query-item:hover { border-color: var(--line2); background: var(--bg3); }
    .saved-query-item .sq-name {
      flex: 1; font-size: var(--fs-12); color: var(--text);
      font-family: var(--mono); overflow: hidden;
      text-overflow: ellipsis; white-space: nowrap;
    }
    .saved-query-item .sq-date { font-size: var(--fs-10); color: var(--text3); white-space: nowrap; }
    .saved-query-item .sq-del {
      font-size: var(--fs-13); color: var(--text3); cursor: pointer;
      background: none; border: none; padding: 6px;
      line-height: 1; transition: color 0.15s; flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .saved-query-item .sq-del:hover { color: var(--danger-text); }
    .saved-query-item .tbl-menu-pop { min-width: 170px; }
    .saved-query-item .sq-mi-danger { color: var(--danger-text); }
    /* D-7: folder group headers in the saved-queries list */
    .sq-folder-hdr {
      font-size: var(--fs-10); font-weight: 600; color: var(--text3);
      text-transform: uppercase; letter-spacing: .08em;
      padding: 8px 2px 2px; border-bottom: 1px solid var(--line);
      margin-top: 4px;
    }
    .sq-folder-hdr:first-child { margin-top: 0; }

    /* ── Sidebar tabs (Saved Queries / History / Schema) ── */
    .sb-tabs {
      display:flex; gap:2px; flex-shrink:0;
      margin:-20px -18px 8px; padding:0 10px;
      border-bottom:1px solid var(--line);
    }
    .sb-tab {
      padding:9px 8px; font-size:calc(10.5px * var(--ui-scale)); font-weight:600; letter-spacing:.02em;
      color:var(--text3); cursor:pointer; border-bottom:2px solid transparent;
      white-space:nowrap; transition:color 0.15s;
    }
    .sb-tab:hover { color:var(--text2); }
    .sb-tab.active { color: var(--accent-text); font-weight: 600; box-shadow: none; background: none; border-bottom-color: var(--accent); }
    .sb-pane { display:none; flex:1; min-height:0; flex-direction:column; gap:8px; }
    .sb-pane.active { display:flex; }

    /* ── Schema browser ── */
    .schema-split { display:flex; height:100%; overflow:hidden; }
    /* Stack the toolbar controls when the Data Files browser lives in the narrow sidebar */
    .sidebar #tab-data .data-toolbar { flex-direction:column; align-items:stretch; }
    .sidebar #tab-data .data-toolbar input,
    .sidebar #tab-data .data-toolbar select { width:100%; min-width:0; }
    .sidebar #tab-data .data-file-card { min-width:0; }
    .schema-left {
      width:280px; min-width:160px; flex:0 1 280px;   /* adapt: shrink on narrow mains */
      border-right:1px solid var(--line);
      display:flex; flex-direction:column; overflow:hidden;
      background:var(--bg2);
    }
    .schema-toolbar {
      padding:10px 12px; border-bottom:1px solid var(--line);
      display:flex; flex-direction:column; gap:6px; flex-shrink:0;
    }
    .schema-toolbar input  { font-size: var(--fs-12); font-family:var(--sans); }
    .schema-toolbar select { font-size: var(--fs-11); padding:4px 8px; }
    .schema-stats { font-size: var(--fs-10); color:var(--text3); font-family:var(--mono); padding:5px 12px 2px; flex-shrink:0; }
    .schema-list  { flex:1; overflow-y:auto; padding:4px 6px; }
    .schema-item {
      padding:7px 8px; border-radius:var(--r-sm); cursor:pointer;
      border:1px solid transparent; transition:background .1s;
    }
    .schema-item:hover  { background:var(--bg3); }
    .schema-item.active { background: var(--selected); border-color: var(--accent); }
    .schema-item .si-name {
      font-family:var(--mono); font-size: var(--fs-11); font-weight:600;
      color:var(--text); display:flex; align-items:center; gap:5px;
    }
    .schema-item .si-section { font-size: var(--fs-10); color:var(--text3); margin-top:2px; }
    .stype { font-size: var(--fs-10); font-family:var(--mono); padding:1px 5px; border-radius:3px; letter-spacing:.04em; flex-shrink:0; }
    .stype-tbl { background:rgba(var(--info-rgb),.12);  color:var(--info);  border:1px solid rgba(var(--info-rgb),.2); }
    .stype-viw { background:rgba(var(--green-rgb),.10); color:var(--green); border:1px solid rgba(var(--green-rgb),.2); }
    .schema-pager {
      display:flex; align-items:center; justify-content:space-between;
      padding:7px 10px; border-top:1px solid var(--line); flex-shrink:0; gap:6px;
    }
    .schema-pager button { padding:3px 8px; font-size: var(--fs-11); }
    .schema-pager span   { font-size: var(--fs-11); font-family:var(--mono); color:var(--text3); white-space:nowrap; }
    .schema-right { flex:1; overflow-y:auto; padding:16px 20px; min-width:0; }
    .sd-name { font-family:var(--mono); font-size: var(--fs-15); font-weight:700; color:var(--text); word-break:break-all; }
    .sd-meta { font-size: var(--fs-11); color:var(--text3); font-family:var(--mono); margin:4px 0 8px; }
    .sd-desc {
      font-size: var(--fs-12); color:var(--text2); line-height:1.65;
      background:var(--bg2); border:1px solid var(--line);
      border-radius:var(--r-sm); padding:10px 12px; margin-bottom:12px;
    }
    .sd-hdr { font-size: var(--fs-10); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); margin:14px 0 6px; }
    .sd-pk { font-family:var(--mono); font-size: var(--fs-11); color:var(--accent-text, var(--oracle-red)); padding:6px 10px; background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-sm); }
    .col-tbl { width:100%; font-size: var(--fs-11); font-family:var(--mono); border-collapse:collapse; }
    .col-tbl th {
      text-align:left; padding:5px 10px; font-size: var(--fs-10); font-weight:600;
      letter-spacing:.07em; text-transform:uppercase; color:var(--th-text, var(--text3));
      border-bottom:1px solid var(--line2); background:var(--bg3);
      position:sticky; top:0; z-index:1;
    }
    .col-tbl td { padding:5px 10px; border-bottom:1px solid var(--line); vertical-align:top; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
    .col-tbl td.cd { white-space:normal; font-family:var(--sans); font-size: var(--fs-11); color:var(--text3); max-width:260px; }
    .col-tbl tr:hover td { background:var(--bg3); }
    .col-nn  { color:var(--danger-text); font-size: var(--fs-10); }
    .col-name-btn { background:none; border:none; cursor:pointer; color:var(--accent-text, var(--oracle-red)); font-family:var(--mono); font-size: var(--fs-11); font-weight:600; padding:0; text-align:left; transition:opacity .15s; }
    .col-name-btn:hover { opacity:.7; }
    .sd-actions { display:flex; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); flex-wrap:wrap; }

    /* ── Autocomplete dropdown ── */
    #acDrop {
      position:fixed; z-index:900;
      background:var(--bg2); border:1px solid var(--line2);
      border-radius:var(--r-md); box-shadow: var(--shadow-3);
      min-width:240px; max-width:440px; max-height:420px; overflow-y:auto; display:none;
    }
    .ac-item {
      display:flex; align-items:center; gap:8px; padding:7px 12px;
      cursor:pointer; transition:background .08s; white-space:nowrap;
    }
    .ac-item:hover, .ac-item.sel { background:var(--bg3); }
    .ac-tag {
      font-size: var(--fs-10); font-family:var(--mono); padding:1px 5px;
      border-radius:3px; letter-spacing:.04em; flex-shrink:0;
    }
    .ac-tag.kw  { background:rgba(var(--kw-rgb),.15); color:var(--kw); border:1px solid rgba(var(--kw-rgb),.2); }
    .ac-tag.tbl { background:rgba(var(--info-rgb),.12);  color:var(--info);  border:1px solid rgba(var(--info-rgb),.2); }
    .ac-tag.viw { background:rgba(var(--green-rgb),.10); color:var(--green); border:1px solid rgba(var(--green-rgb),.2); }
    .ac-tag.col { background:rgba(var(--amber-rgb),.10); color:var(--amber); border:1px solid rgba(var(--amber-rgb),.2); }
    .ac-label { font-family:var(--mono); font-size: var(--fs-12); color:var(--text); flex:1; overflow:hidden; text-overflow:ellipsis; }
    .ac-hint  { font-size: var(--fs-10); color:var(--text3); font-family:var(--mono); flex-shrink:0; }

    /* Connection manager list items */
    .conn-item {
      display: flex; align-items: center; gap: 8px;
      background: var(--bg2); border: 1px solid var(--line);
      border-radius: var(--r-sm); padding: 8px 10px;
      box-shadow: none;
      transition: border-color .15s, box-shadow .15s;
    }
    .conn-item:hover { border-color: var(--line2); background: var(--bg3); }
    .conn-item.active { background: var(--selected); border-color: var(--accent); box-shadow: none; }
    .conn-item .ci-name { flex:1; font-size: var(--fs-12); font-family:var(--mono); color:var(--text); font-weight:600; }
    .conn-item .ci-url  { font-size: var(--fs-10); color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
    .conn-item .ci-url .ci-tested { color: var(--green); font-weight:600; }
    .conn-item .ci-btn  { background:none; border:none; font-size: var(--fs-11); cursor:pointer; padding:5px 8px; border-radius:4px; transition:color .15s, background .15s; }
    .conn-item .ci-edit { color:var(--info); }
    .conn-item .ci-edit:hover { background:rgba(var(--info-rgb),.12); }
    .conn-item .ci-del  { color:var(--text3); }
    .conn-item .ci-del:hover  { color:var(--danger-text); background:rgba(var(--danger-rgb),.12); }

    /* Inline tab rename */
    .qtab-name-input {
      background: transparent; border: none; border-bottom: 1px solid var(--oracle-red);
      color: var(--text); font-family: var(--mono); font-size: var(--fs-12);
      outline: none; width: 80px; padding: 0;
    }

    /* ── Settings drawer ── */
    .settings-overlay {
      display: block; position: fixed; inset: 0;
      background: rgba(0,0,0,.4); z-index: 900;
      opacity: 0; visibility: hidden;
      transition: opacity .2s ease, visibility 0s linear .2s;
    }
    .settings-overlay.open { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
    .settings-drawer {
      position: fixed; top: 0; right: -420px; bottom: 0;
      width: 400px; max-width: 95vw;
      background: var(--bg2); border-left: 1px solid var(--line);
      z-index: 901; display: flex; flex-direction: column;
      transition: right 0.25s ease;
      box-shadow: var(--shadow-3);
    }
    .settings-drawer.open { right: 0; }
    .settings-header {
      display: flex; align-items: center; gap: 10px;
      padding: 18px 20px; border-bottom: 1px solid var(--line);
      flex-shrink: 0;
    }
    .settings-header h2 { font-size: var(--fs-14); font-weight: 600; flex: 1; }
    .settings-close {
      background: none; border: none; color: var(--text3);
      font-size: var(--fs-20); cursor: pointer; line-height: 1;
      padding: 8px 10px; margin: -8px -10px;   /* enlarge the hit area, keep the visual box */
      transition: color 0.15s;
    }
    .settings-close:hover { color: var(--text); }
    .settings-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 24px; }
    .settings-footer {
      padding: 14px 20px; border-top: 1px solid var(--line);
      display: flex; gap: 8px; flex-shrink: 0;
    }
    .settings-section-title {
      font-size: var(--fs-10); font-weight: 600; letter-spacing: .1em;
      text-transform: uppercase; color: var(--text3); margin-bottom: 12px;
    }

    /* Theme presets */
    .theme-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .theme-swatch {
      background: var(--bg2);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px;
      cursor: pointer;
      transition: border-color 0.2s ease, background 0.2s ease;
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
      box-shadow: none;
    }
    .theme-swatch:hover {
      border-color: var(--line2);
      background: var(--bg3);
    }
    .theme-swatch.active {
      background: var(--selected);
      border-color: var(--accent);
      box-shadow: none;
    }
    .theme-swatch .sw-mockup {
      width: 100%;
      height: 44px;
      border-radius: 4px;
      border: 1px solid var(--line);
      display: flex;
      overflow: hidden;
    }
    .theme-swatch .sw-sidebar {
      width: 18px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .theme-swatch .sw-indicator {
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }
    .theme-swatch .sw-content {
      flex: 1;
      height: 100%;
      padding: 4px 6px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
    }
    .theme-swatch .sw-line {
      height: 3px;
      border-radius: 2px;
      width: 80%;
    }
    .theme-swatch .sw-line.short {
      width: 50%;
    }
    .theme-swatch .sw-label {
      font-size: var(--fs-11);
      font-weight: 500;
      color: var(--text2);
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 100%;
    }

    /* Color pickers */
    .color-row {
      display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
    }
    .color-row label { font-size: var(--fs-12); color: var(--text2); flex: 1; }
    .color-row input[type="color"] {
      width: 36px; height: 28px; padding: 2px; border-radius: 6px;
      border: 1px solid var(--line2); background: var(--bg3); cursor: pointer;
    }
    .color-row .color-hex {
      font-family: var(--mono); font-size: var(--fs-11); color: var(--text3);
      width: 64px;
    }

    /* Sliders */
    .slider-row { margin-bottom: 12px; }
    .slider-row label { font-size: var(--fs-12); color: var(--text2); display:flex; justify-content:space-between; margin-bottom: 6px; }
    .slider-row label span { color: var(--oracle-red); font-family: var(--mono); font-size: var(--fs-11); }
    input[type="range"] {
      width: 100%; accent-color: var(--oracle-red); cursor: pointer;
    }

    /* Gear button */
    .gear-btn {
      background: none; border: none; color: var(--text3);
      cursor: pointer; padding: 4px; border-radius: 6px;
      transition: color 0.15s, background 0.15s, box-shadow 0.15s;
      display: flex; align-items: center;
    }
    .gear-btn:hover { color: var(--text); background: var(--bg3); box-shadow: var(--shadow-1); }

    /* ── Data Files tab ── */
    .data-file-cards { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; flex-shrink:0; }
    .data-file-card {
      flex:1; min-width:220px;
      background:var(--bg2); border:2px solid var(--line);
      border-radius:var(--r-lg); padding:14px 16px;
      cursor:pointer; box-shadow: none;
      transition:border-color .15s, background .15s;
      user-select:none;
    }
    .data-file-card:hover  { border-color:var(--line2); background:var(--bg3); }
    .data-file-card.active { background: var(--selected); border-color: var(--accent); box-shadow: none; }
    .dfc-title { font-size: var(--fs-12); font-weight:600; color:var(--text); font-family:var(--mono); margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .dfc-stats { display:flex; gap:12px; flex-wrap:wrap; }
    .dfc-stat  { font-size: var(--fs-10); font-family:var(--mono); }
    .dfc-stat .ds-val { color:var(--accent-text, var(--oracle-red)); font-weight:600; }
    .dfc-stat .ds-lbl { color:var(--text3); }
    .data-browser { flex:1; display:flex; flex-direction:column; min-height:0; }
    .data-toolbar { display:flex; align-items:center; gap:8px; flex-shrink:0; margin-bottom:8px; flex-wrap:wrap; }
    .data-toolbar input  { flex:1; min-width:180px; }
    .data-toolbar select { width:130px; }
    .data-obj-wrap { flex:1; overflow:auto; border:1px solid var(--line); border-radius:var(--r-md); min-height:0; }
    .data-obj-tbl  { width:100%; border-collapse:collapse; font-size: var(--fs-12); font-family:var(--mono); }
    .data-obj-tbl th {
      position:sticky; top:0; z-index:2;
      background:var(--bg3); padding:8px 12px;
      text-align:left; font-size: var(--fs-10); font-weight:600;
      letter-spacing:.07em; text-transform:uppercase;
      color:var(--text3); border-bottom:2px solid var(--line2);
      cursor:pointer; white-space:nowrap; user-select:none;
    }
    .data-obj-tbl th:hover { background:var(--bg4); }
    .data-obj-tbl th .sort-icon { margin-left:4px; opacity:.4; font-style:normal; }
    .data-obj-tbl th.asc  .sort-icon::after { content:'▲'; opacity:1; }
    .data-obj-tbl th.desc .sort-icon::after { content:'▼'; opacity:1; }
    .data-obj-tbl td { padding:7px 12px; border-bottom:1px solid var(--line); color:var(--text); vertical-align:top; }
    .data-obj-tbl tr:hover td { background:var(--bg3); }
    .data-obj-tbl tr:last-child td { border-bottom:none; }
    .data-obj-name { color:var(--accent-text, var(--oracle-red)); font-weight:600; cursor:pointer; }
    .data-obj-name:hover { text-decoration:underline; }
    .data-obj-desc { font-family:var(--sans); font-size: var(--fs-11); color:var(--text3); max-width:340px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .data-footer { display:flex; align-items:center; gap:10px; padding-top:8px; flex-shrink:0; }
    .data-footer button { padding:3px 10px; font-size: var(--fs-11); }
    .data-footer span   { font-size: var(--fs-11); font-family:var(--mono); color:var(--text3); }

    /* ── Results toolbar menus (Export ▾ / Copy ▾) ── */
    .tbl-menu { position: relative; display: inline-flex; flex-shrink: 0; }
    .tbl-menu-btn { display: inline-flex; align-items: center; gap: 5px; }
    .tbl-menu-pop {
      position: absolute; top: calc(100% + 4px); right: 0; z-index: 60;
      background: var(--bg3); border: 1px solid var(--line2); border-radius: var(--r-sm);
      box-shadow: var(--shadow-3); padding: 4px; min-width: 150px;
      display: none; flex-direction: column; gap: 1px;
    }
    .tbl-menu-pop.open { display: flex; }
    .tbl-menu-pop.up { top: auto; bottom: calc(100% + 4px); }
    .tbl-menu-item {
      display: flex; align-items: center; width: 100%;
      background: none; border: none; color: var(--text2);
      font-size: var(--fs-12); font-family: var(--mono); padding: 7px 10px;
      border-radius: 6px; cursor: pointer; text-align: left; white-space: nowrap;
      transition: background 0.12s, color 0.12s;
    }
    .tbl-menu-item:hover { background: var(--bg4); color: var(--text); }

    @media (max-width: 700px) {
      .app-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
      .sidebar { display: none; }
    }

/* Quiet control layer: solid surfaces, one blue primary action;
   decoration removed in the redesign (Task 3/4). */


.run-bar .btn-primary { font-weight: 600; letter-spacing: 0.01em; }

/* ── Active tabs: "where am I" must be unmistakable, on every tab
      system — but each system wears its own grammar. Query tabs keep the
      document-underline treatment; results tabs are a segmented control
      (defined above); sidebar tabs are a quiet accent underline. ──── */
.query-tab.active {
  color: var(--text);
  font-weight: 600;
  background: var(--bg2);
  box-shadow: none;
  border-bottom-color: var(--accent);
}
.sb-tab.active {
  color: var(--accent-text);
  font-weight: 600;
  box-shadow: none;
  background: none;
}

    /* ── Empty states: from throwaway to a confident, branded pause ── */
    .empty-state { height: 220px; gap: 16px; }
    .empty-icon {
      font-size: calc(44px * var(--ui-scale));
      opacity: 0.55;
    }
    .empty-state p { font-size: var(--fs-14); color: var(--text2); letter-spacing: 0.01em; }

/* ── Status strip: the live-data channel, given presence + pulse */
.status-strip {
  height: 34px;
  background: var(--bg2);
  position: relative;
}
.status-dot.busy { box-shadow: none; }
.status-text { letter-spacing: 0.02em; }

/* COLORIZE LAYER · main GUI — semantic color in the last gray status zones.
   JS-free: driven by existing state classes on the adjacent status dot. */
.conn-dot.connected + .conn-label { color: var(--green); }
.conn-dot.pending   + .conn-label { color: var(--amber); }
.status-dot.ok   + .status-text { color: var(--green); }
.status-dot.busy + .status-text { color: var(--amber); }
.status-dot.err  + .status-text { color: var(--danger-text); }
td.row-num { border-right-color: var(--line); }
/* Row numbers stay visible while scrolling sideways. The cell is first in LTR
   and last in RTL (which direction:rtl renders leftmost), so left:0 fits both.
   Opaque (!important beats the zebra/hover/.virt rules) so data scrolls under it. */
table.results-tbl td.row-num { position: sticky; left: 0; z-index: 1; background: var(--bg) !important; }
table.results-tbl:not(.rtl) thead th:first-child,
table.results-tbl.rtl thead th:last-child { left: 0; z-index: 3; }
.editor-toolbar .tl { color: var(--accent-text, var(--oracle-red)); font-weight: 600; letter-spacing: 0.02em; }


/* LAYOUT LAYER · main GUI — spacing rhythm + inset alignment (impeccable layout).
   Preserves the grid shell, split-pane structure, and all behavior; only
   unifies rhythm and tightens consistency. Additive; reversible. */

/* Main column: one uniform 20px horizontal inset from the query tabs down to
   the status strip. Fixes the query-tabs-bar 16px outlier so the whole left
   edge reads as a single clean vertical line. */
.query-tabs-bar { padding: 0 20px; }

/* Sidebar width fallback now matches the JS default (DEFAULT_SETTINGS.
   sidebarWidth = 340), so the pre-JS / no-JS shell isn't 40px too narrow. */
.app-shell { grid-template-columns: 340px 1fr; }

/* Run bar wraps gracefully on narrow main columns instead of overflowing the
   editor pane when the sidebar is wide. */
.run-bar { flex-wrap: wrap; }


/* AUDIT-FIX · A1 — prefers-reduced-motion (impeccable audit). Disables
   animations/transitions for motion-sensitive users, incl. bolder sheen,
   pulse/spin and tab-repeat pulse. Additive; reversible. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* AUDIT-FIX · R1 — mobile sidebar as off-canvas drawer (impeccable audit).
   Desktop: hamburger hidden, sidebar in flow. Mobile (<=700px): sidebar
   slides in from the left; backdrop, Escape, resize-to-desktop dismiss.
   The !important on grid columns also fixes a latent mobile offset caused by
   the JS inline gridTemplateColumns carrying the desktop width onto mobile. */
.nav-toggle { display: none; }
.sidebar-backdrop { display: none; }
@media (max-width: 700px) {
  .app-shell { grid-template-columns: 1fr !important; grid-template-areas: "topbar" "main" !important; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text2); cursor: pointer; padding: 6px; border-radius: 6px; }
  .nav-toggle:hover { color: var(--text); background: var(--bg3); }
  .sidebar { display: flex !important; position: fixed; top: 56px; left: 0; bottom: 0; width: 86% !important; max-width: 320px; transform: translateX(-100%); transition: transform 0.25s ease; z-index: 50; box-shadow: var(--shadow-3); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop { display: block; position: fixed; inset: 56px 0 0 0; background: rgba(0,0,0,0.5); z-index: 40; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
}


    /* ── Virtualised results table (see _drawVirtual in index.html) ──
       Only a window of rows is in the DOM, so :nth-child striping would
       repaint on every scroll. The .zeb class carries the ABSOLUTE row
       parity instead. Fixed layout + the measured <colgroup> keep columns
       from resizing as different data scrolls into the window. */
    table.results-tbl.virt { table-layout: fixed; }
    table.results-tbl.virt th { overflow: hidden; text-overflow: ellipsis; }
    table.results-tbl.virt tbody tr:nth-child(even) td { background: none; }
    table.results-tbl.virt tbody tr.zeb td { background: rgba(127,127,127,0.05); }
    table.results-tbl.virt tbody tr.vspacer td { background: none; border: none; padding: 0; }
    table.results-tbl.virt tbody tr.vspacer:hover td { background: none; }
    table.results-tbl.virt tbody tr:hover td { background: var(--bg3); }
    /* G-3: selected row (click a cell) */
    table.results-tbl tbody tr.sel td { background: color-mix(in srgb, var(--accent) 18%, transparent); }
    table.results-tbl tbody tr.sel:hover td { background: color-mix(in srgb, var(--accent) 24%, transparent); }

    /* ── Truncation warning on the results count badge ── */
    .row-badge.warn {
      background: rgba(var(--amber-rgb),0.12); color: var(--amber);
      border-color: rgba(var(--amber-rgb),0.35); cursor: help;
    }
    .status-dot.warn { background: var(--amber); }

    /* ── Unsaved-changes marker on a query tab ── */
    .query-tab .qtab-dirty { color: var(--amber); font-weight: 700; margin-left: 2px; }

    /* ── Keyboard shortcut reference (Settings drawer) ── */
    .field-hint { font-size: calc(10.5px * var(--ui-scale)); color: var(--text3); margin-top: 5px; line-height: 1.5; }
    .shortcut-list { width: 100%; border-collapse: collapse; font-size: var(--fs-11); }
    .shortcut-list td { padding: 4px 0; border: none; white-space: normal; color: var(--text2); }
    .shortcut-list td:first-child { width: 46%; white-space: nowrap; }
    .shortcut-list kbd {
      display: inline-block; font-family: var(--mono); font-size: var(--fs-10);
      padding: 2px 5px; margin: 0 1px; border-radius: 4px;
      background: var(--bg4); border: 1px solid var(--line2);
      box-shadow: none; color: var(--text);
    }

    /* ── Toast (base style + variants; element created by JS) ── */
    #appToast {
      position: fixed; bottom: 24px; right: 24px;
      background: var(--bg3); border: 1px solid var(--line2);
      color: var(--text); font-size: var(--fs-12); font-family: var(--mono);
      padding: 10px 16px; border-radius: var(--r-sm); z-index: 9999;
      opacity: 0; transition: opacity 0.2s; cursor: pointer;
      max-width: 420px;
    }
    #appToast.on { opacity: 1; }
    #appToast.t-ok   { border-color: rgba(var(--green-rgb),0.55);  box-shadow: 0 0 0 1px rgba(var(--green-rgb),0.15), var(--shadow-1); }
    #appToast.t-err  { border-color: rgba(var(--danger-rgb),0.6);    box-shadow: 0 0 0 1px rgba(var(--danger-rgb),0.18), var(--shadow-1); color: var(--err-text); }
    #appToast.t-warn { border-color: rgba(var(--amber-rgb),0.55);  box-shadow: 0 0 0 1px rgba(var(--amber-rgb),0.18), var(--shadow-1); }

    /* ── Danger button (themed confirm dialog) ── */
    .btn-danger {
      color: #fff;
      background: var(--danger-btn);
      border: 1px solid var(--danger-btn);
      box-shadow: none;
    }
    .btn-danger:hover { filter: brightness(1.08); }
    .btn-danger:active { filter: brightness(0.94); }

    /* Confirm dialog body text */
    .confirm-msg { font-size: var(--fs-12); color: var(--text2); line-height: 1.6; margin-bottom: 4px; text-wrap: pretty; }

    /* Touch targets (adapt): desktop-first app, but on coarse-pointer
       devices (web mode on tablets) interactive elements get a 44px floor. */
    @media (pointer: coarse) {
      .btn { min-height: 44px; }
      .mini-btn, .tbl-menu-btn { min-height: 40px; }
      .side-search, .mini-select, .tool-select, .run-select { min-height: 44px; }
    }

    /* Narrow-width density (adapt): let the run cluster and editor toolbar
       wrap instead of overflowing on mid-size windows. */
    @media (max-width: 860px) {
      .run-bar { flex-wrap: wrap; row-gap: 8px; }
      .editor-toolbar { flex-wrap: wrap; row-gap: 8px; }
    }

    /* Environment chips (harden): prod/dev/test tags on connections */
    .env-chip {
      display: inline-block; font-family: var(--mono); font-size: var(--fs-10);
      font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
      padding: 1px 6px; border-radius: var(--r-sm); vertical-align: middle;
      line-height: 14px; white-space: nowrap;
    }
    .env-chip.env-prod  { color: var(--danger-text); background: rgba(var(--danger-rgb), .12); border: 1px solid rgba(var(--danger-rgb), .35); }
    .env-chip.env-dev   { color: var(--info);        background: rgba(var(--info-rgb), .12);    border: 1px solid rgba(var(--info-rgb), .35); }
    .env-chip.env-test  { color: var(--green);       background: rgba(var(--green-rgb), .10);   border: 1px solid rgba(var(--green-rgb), .35); }
    .env-chip.env-other { color: var(--text2);       background: rgba(var(--kw-rgb), .10);      border: 1px solid rgba(var(--kw-rgb), .35); }
    #connEnvChip { margin-left: 4px; }

    /* Collapsible SQL Formatter group (distill): the drawer's densest
       group folds behind its title; the summary reuses the section title
       look so the drawer reads identically when closed. */
    .fmt-summary {
      cursor: pointer; list-style: none; user-select: none;
      display: flex; align-items: center; justify-content: space-between;
    }
    .fmt-summary::-webkit-details-marker { display: none; }
    .fmt-summary .fmt-chev { color: var(--text3); font-size: var(--fs-10); transition: transform .15s; }
    details[open] .fmt-summary .fmt-chev { transform: rotate(180deg); }

    /* Settings unsaved-changes dot on the Save button */
    #settingsDirtyDot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--amber); flex-shrink: 0;
    }

    /* ── Keyboard accessibility: visible focus ring on every interactive
          element (inputs already get their own glow via :focus) ── */
    button:focus-visible,
    a:focus-visible,
    [tabindex]:focus-visible,
    .tab:focus-visible,
    .sb-tab:focus-visible,
    .query-tab:focus-visible,
    .theme-swatch:focus-visible {
      outline: 2px solid var(--oracle-red);
      outline-offset: 2px;
    }
    .theme-swatch { outline-offset: 2px; }

    /* ── Background-run completion: amber pulse on the owning tab's dot ── */
    .qtab-status.flash { animation: tabFlash 0.6s ease-in-out 4; }
    @keyframes tabFlash {
      0%, 100% { box-shadow: none; }
      50%      { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.35); }
    }

    /* ── Quiet secondary action (Explain): present but lighter than the
          controls it sits beside, so the hero Run keeps its weight ── */
    .btn-quiet {
      background: transparent;
      border: 1px solid transparent;
      color: var(--text3);
      box-shadow: none;
    }
    .btn-quiet:hover {
      color: var(--text2);
      background: var(--bg3);
      border-color: var(--line);
      transform: none;
      box-shadow: none;
    }

    /* ═══════════════════════════════════════════════════════════════════
       MICRO-MOTION + HIT-AREA LAYER · make-interfaces-feel-better pass
       Additive; reversible. Preserves the incumbent motion grammar (modal
       translateY + visibility, ease-out) and only fixes the spots where
       motion or hit areas fall below the shared bar. */
    /* Toast: rise in on show, settle down on hide, and leave the hit-test
       tree when hidden — the old opacity-only fade left a 420px invisible
       click dead zone over the results area (bottom-right corner). Mirrors
       the .param-overlay visibility pattern exactly. */
    #appToast {
      transform: translateY(8px);
      visibility: hidden;
      transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    }
    #appToast.on {
      transform: translateY(0);
      visibility: visible;
      transition: opacity .18s ease, transform .18s ease, visibility 0s;
    }

    /* Settings drawer: slide on transform (GPU-composited) instead of the
       `right` property, which reflows layout on every frame of the slide.
       Matches the R1 mobile-sidebar pattern (transform + ease-out). */
    .settings-drawer {
      right: 0;
      transform: translateX(100%);
      transition: transform 0.25s ease-out;
    }
    .settings-drawer.open { transform: translateX(0); }

    /* Topbar icon buttons: 16px icon + 4px padding = 24px hit area — below
       the 40px desktop floor. 8px padding (32px) is the density ceiling
       here: 40px boxes would collide with the topbar's 16px gap in this
       56px bar. */
    .gear-btn { padding: 8px; }

    /* Settings-drawer close button hosts an SVG now; keep the glyph's
       vertical centering in flex so the icon aligns with the header. */
    .settings-close { display: inline-flex; align-items: center; justify-content: center; }

/* SP2b: connection test result and report install panel */
#cmResult.ok { font-size: calc(12px * var(--ui-scale)); color: var(--text); }
#cmResult details { margin-top: 6px; }
#cmResult .cm-detail { font-family: var(--mono); font-size: calc(11px * var(--ui-scale)); white-space: pre-wrap; word-break: break-word; }
.cm-install-title { font-size: calc(11px * var(--ui-scale)); font-weight: 600; color: var(--text3); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.cm-steps { font-size: calc(12px * var(--ui-scale)); padding-left: 18px; line-height: 1.6; }
.cm-steps code { font-family: var(--mono); font-size: calc(11px * var(--ui-scale)); }
/* UI-02: shell shrinks to the viewport; overflow only inside editor/results */
.app-shell { grid-template-columns: 300px minmax(0, 1fr); }

.topbar,
.main,
.split-container,
.split-top,
.split-bottom,
.editor-area,
.results-area,
.editor-toolbar,
.run-bar { min-width: 0; }

.badge-pill,
.conn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.topbar .gear-btn,
.nav-toggle,
.topbar-logo { flex-shrink: 0; }

@media (max-width: 700px) {
  .app-shell { grid-template-columns: minmax(0, 1fr) !important; }
  .topbar { padding: 0 10px; gap: 8px; }
  .topbar-title,
  .topbar-sep { display: none; }
  /* The trial countdown is informational (reminder emails cover it); the
     connection label carries the text form of the verified state, so it keeps room. */
  #trialBadge { display: none !important; }
  .conn-label { min-width: 72px; }
  .badge-pill { flex-shrink: 1; }
  .conn-label { flex: 1 1 auto; }
  .split-top { height: auto !important; flex: 0 0 auto !important; }
  .editor-wrap { min-height: 140px; }
  .split-handle { display: none; }
  .split-bottom { min-height: 200px; }
  .editor-toolbar,
  .run-bar { flex-wrap: wrap; row-gap: 8px; }
  .editor-toolbar select,
  .run-bar select { min-width: 0; max-width: 100%; }
  .schema-split { flex-direction: column; }
  .schema-left { width: 100%; min-width: 0; flex: 0 1 auto; max-height: 42vh; border-right: none; border-bottom: 1px solid var(--line); }
  .schema-right { flex: 1 1 auto; min-height: 120px; }
}
.diag-switch { display:flex; gap:6px; margin-bottom:10px; }
.diag-switch .active { background: var(--selected); border-color: var(--accent); color: var(--text); }

/* Each pane only shows while its own view is active, so the pane marks its own
   button: correct even right after a run repaints the pane. */
#tab-soap .diag-switch [data-diag="soap"], #tab-raw .diag-switch [data-diag="raw"] { background: var(--selected); border-color: var(--accent); color: var(--text); }

.acct-pop { right: 0; left: auto; min-width: 220px; }
.acct-email { padding: 8px 10px 6px; font-size: var(--fs-12); color: var(--text2); border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
a.tbl-menu-item { display: block; text-decoration: none; color: inherit; }

.sw-radio { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.theme-swatch { position: relative; }
.theme-swatch:has(.sw-radio:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-nav { display:flex; gap:4px; padding:8px 16px 0; border-bottom:1px solid var(--line); }
.settings-nav-btn { background:none; border:none; border-bottom:2px solid transparent; padding:8px 10px; color:var(--text2); font:inherit; font-size:var(--fs-12); font-weight:600; cursor:pointer; }
.settings-nav-btn[aria-selected="true"] { color:var(--accent-text); border-bottom-color:var(--accent); }
.settings-nav-btn:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.settings-sec[hidden] { display:none; }

    /* ── First-run welcome: three steps + optional appearance ── */
    .welcome-steps { margin: 0 0 14px 18px; display: flex; flex-direction: column; gap: 10px; color: var(--text2); font-size: var(--fs-13); line-height: 1.5; }
    .welcome-steps strong { color: var(--text); }
    .welcome-steps .mini-btn { margin-left: 6px; }
    .welcome-appearance summary { cursor: pointer; color: var(--text2); font-size: var(--fs-12); margin-bottom: 8px; }

/* Tablet widths: cap the sidebar so the editor keeps room. applySettings sets
   the saved width inline, so the cap needs !important; wider screens keep it. */
@media (min-width: 701px) and (max-width: 900px) {
  .app-shell { grid-template-columns: min(var(--sidebar-width, 340px), 260px) minmax(0, 1fr) !important; }
  .sidebar { width: auto !important; }
}

/* Narrow or zoomed (<=700px): toolbars + a 140px editor + results can exceed
   short viewports (200% zoom, landscape phones); scroll the split area so the
   results stay reachable instead of being clipped. */
@media (max-width: 700px) {
  .split-container { overflow-y: auto !important; }
  /* Bounded, not auto: the results grid must keep its own scroll box (the
     virtual table sizes its row window from it), the container scrolls to it. */
  .split-bottom { flex: 0 0 auto !important; height: 70vh; min-height: 240px; }
}

/* Scheduled queries dialog */
.sched-modal { width: 460px; max-height: 90vh; overflow-y: auto; }
.sched-modal select, .sched-modal input[type="number"] { width: 100%; }
.sched-hint { font-size: var(--fs-11); color: var(--text3); margin: 0 0 10px; }
.sched-sub { margin: 18px 0 8px; font-size: var(--fs-12); color: var(--text2); }
.sched-item { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-top: 1px solid var(--line); }
.sched-main { flex: 1; min-width: 0; }
.sched-name { font-size: var(--fs-12); color: var(--text); overflow-wrap: anywhere; }
.sched-meta { font-size: var(--fs-11); color: var(--text3); overflow-wrap: anywhere; }
.sched-meta.sched-bad { color: var(--err-text); }
@media (max-width: 480px) { .sched-item { flex-wrap: wrap; } .sched-main { flex-basis: 100%; } }

/* Screen-reader-only text (e.g. the editor keyboard hint). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* The sidebar resize handle has no meaning in the phone drawer layout. */
@media (max-width: 700px) { .sidebar-resize-handle { display: none; } }

    /* Saved-query history and What's new dialogs */
    .sqv-list { max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
    .sqv-item { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
    .sqv-meta { font-size: var(--fs-11); color: var(--text3); }
    .sqv-line { font-family: var(--mono); font-size: var(--fs-12); color: var(--text); margin: 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sqv-actions { display: flex; gap: 6px; flex-wrap: wrap; }
    .sqv-empty { font-size: var(--fs-13); color: var(--text2); }
    .wn-ver { margin: 0 0 6px; font-size: var(--fs-12); color: var(--text3); }
    .wn-items { margin: 0 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-13); color: var(--text2); line-height: 1.5; }
/* Insights tab (summary / chart / compare) */
.ins-body { display: block; overflow: auto; }
.ins-scroll { overflow-x: auto; max-width: 100%; }
.ins-tbl { border-collapse: collapse; font-size: var(--fs-12); }
.ins-tbl th, .ins-tbl td { border: 1px solid var(--line); padding: 4px 8px; text-align: start; max-width: 260px; overflow-wrap: anywhere; }
.ins-tbl th { background: var(--bg3); color: var(--th-text); }
.ins-note { color: var(--text2); font-size: var(--fs-12); margin: 6px 0; }
.ins-h { font-size: var(--fs-12); color: var(--text); margin: 12px 0 4px; }
.ins-controls { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; font-size: var(--fs-12); color: var(--text2); }
.ins-chart { width: 100%; max-width: 720px; height: auto; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-md); }
#tab-insights .diag-switch { flex-wrap: wrap; }