/*
 * Licensed to Apache Software Foundation (ASF) under one or more contributor
 * license agreements. See the NOTICE file distributed with
 * this work for additional information regarding copyright
 * ownership. Apache Software Foundation (ASF) licenses this file to you under
 * the Apache License, Version 2.0 (the "License"); you may
 * not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

  :root {
    --bg-app: #0d120e;
    --bg-sidebar: #090d0a;
    --panel: #131a15;
    --panel-2: #19211b;
    --panel-3: #1f2921;
    --bg-code: #0a0f0b;
    --scroll: #2b362e;
    --scroll-hover: #3a4840;
    --border: rgba(255,255,255,.075);
    --border-strong: rgba(255,255,255,.13);
    --text: #e8ebef;
    --text-dim: #9aa69c;
    --text-faint: #5e6a60;
    --ok: #3ecf8e;
    --warn: #d98a3c;
    --danger: #cf6b52;
    --info: #56c2d6;
    --accent: #3a9d5d;
    --accent-soft: rgba(58,157,93,.15);
    --accent-glow: rgba(58,157,93,.35);
    --row-h: 40px;
    --pad: 32px;
    /* syntax token colors for detected-JSON blocks */
    --tok-key: #7fc296;
    --tok-str: #d8b13c;
    --tok-num: #56c2d6;
    --tok-kw: #9b8cf0;
    --side-w: 256px;
    --side-w-collapsed: 64px;
    --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --sans: "IBM Plex Sans", system-ui, sans-serif;
  }

  * { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
  body {
    font-family: var(--sans);
    background: var(--bg-app);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  #root { height: 100%; }
  button { font-family: inherit; cursor: pointer; }
  ::selection { background: var(--accent-glow); }

  /* scrollbars */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); background-clip: padding-box; }

  .shell {
    display: grid;
    grid-template-columns: var(--side-w) 1fr;
    height: 100%;
    transition: grid-template-columns .24s cubic-bezier(.4,0,.2,1);
  }
  .shell:has(.sidebar.is-collapsed) { grid-template-columns: var(--side-w-collapsed) 1fr; }

  /* ============ SIDEBAR ============ */
  .sidebar {
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    z-index: 20;
  }

  .side-head {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
  .brand-mark { width: 28px; height: 28px; flex-shrink: 0; filter: drop-shadow(0 0 7px rgba(58,157,93,.4)); }
  .brand-text { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
  .brand-name {
    font-family: var(--mono);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -.2px;
    white-space: nowrap;
  }
  .brand-ver {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--text-faint);
    white-space: nowrap;
    letter-spacing: .2px;
  }
  .is-collapsed .brand-text { opacity: 0; width: 0; }

  .side-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 10px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* ---- recursive nav tree ---- */
  .nav-node { display: flex; flex-direction: column; }

  .nav-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: var(--row-h);
    padding: 0 12px;
    border: none;
    border-left: 2px solid transparent;
    background: transparent;
    color: var(--text-dim);
    border-radius: 0 8px 8px 0;
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    transition: background .14s, color .14s, border-color .14s;
    white-space: nowrap;
  }
  .nav-row:hover { background: rgba(255,255,255,.045); color: var(--text); }

  .nav-row.lvl-1 { font-size: 13px; height: calc(var(--row-h) - 3px); }
  .nav-row.lvl-2 { font-size: 12.5px; height: calc(var(--row-h) - 5px); font-weight: 450; }
  .nav-row.lvl-3 { font-size: 11.5px; height: calc(var(--row-h) - 7px); color: var(--text-faint); font-weight: 400; }
  .nav-row.lvl-3 .nav-ico { width: 14px; }
  .nav-row.lvl-3:hover { color: var(--text); background: rgba(255,255,255,.025); }
  .nav-row.lvl-3.is-active { color: var(--text); }
  .nav-row.is-leaf .nav-label { font-family: var(--mono); letter-spacing: -.2px; }

  .nav-row.has-active { color: var(--text); }
  .nav-row.is-active {
    background: var(--accent-soft);
    color: #fff;
    border-left-color: var(--accent);
  }
  .nav-row.is-active .nav-ico { color: var(--accent); }
  .nav-row.is-active .nav-dot { background: var(--accent); }

  .nav-ico { display: grid; place-items: center; flex-shrink: 0; width: 18px; color: var(--text-faint); transition: color .14s; }
  .nav-ico.grp { width: 16px; color: var(--text-faint); }
  .nav-row:hover .nav-ico { color: var(--text-dim); }

  .nav-dot {
    width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
    margin: 0 6px 0 6px; background: var(--text-faint);
  }
  .nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
  .is-collapsed .nav-label { opacity: 0; }

  .nav-chev { color: var(--text-faint); transition: transform .2s cubic-bezier(.4,0,.2,1); display: grid; place-items: center; flex-shrink: 0; }
  .nav-chev.is-open { transform: rotate(90deg); }
  .is-collapsed .nav-chev { display: none; }

  .nav-count {
    font-family: var(--mono); font-size: 10.5px; color: var(--text-faint);
    background: rgba(255,255,255,.05); padding: 1px 6px; border-radius: 20px; flex-shrink: 0;
  }
  .nav-row.is-active .nav-count { color: var(--accent); background: rgba(255,255,255,.08); }
  .is-collapsed .nav-count { display: none; }

  /* submenu height animation */
  .nav-sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .24s cubic-bezier(.4,0,.2,1);
  }
  .nav-sub.is-open { grid-template-rows: 1fr; }
  .nav-sub-inner { overflow: hidden; position: relative; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; }
  .is-collapsed .nav-sub { display: none; }

  /* vertical connector guide */
  .nav-guide {
    position: absolute;
    top: 2px; bottom: 8px;
    width: 1px;
    background: var(--border-strong);
    pointer-events: none;
  }

  .side-foot {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .side-foot-row { display: flex; align-items: center; gap: 8px; }

  /* account / role */
  .acct {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 9px; border-radius: 8px;
    background: var(--panel-2); border: 1px solid var(--border);
  }
  .acct.is-readonly { background: color-mix(in srgb, var(--warn) 13%, var(--panel-2)); border-color: color-mix(in srgb, var(--warn) 34%, transparent); }
  .acct-ico {
    width: 28px; height: 28px; flex-shrink: 0; border-radius: 7px;
    display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent);
  }
  .acct.is-readonly .acct-ico { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
  .acct-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
  .acct-role { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .acct-sub { font-family: var(--mono); font-size: 10px; letter-spacing: .3px; text-transform: uppercase; color: var(--text-faint); }
  .acct.is-readonly .acct-sub { color: var(--warn); }
  .acct-signout {
    flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center;
    background: transparent; border: 1px solid var(--border); border-radius: 7px;
    color: var(--text-faint); transition: all .15s;
  }
  .acct-signout:hover { color: var(--text); border-color: var(--border-strong); background: rgba(255,255,255,.04); }
  .is-collapsed .acct { padding: 6px; justify-content: center; }
  .is-collapsed .acct-text, .is-collapsed .acct-signout { display: none; }
  .is-collapsed .side-foot-row { flex-direction: column; }

  .conn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    min-width: 0;
    border-radius: 7px;
  }
  .conn-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ok); flex-shrink: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 16%, transparent);
    animation: pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
  .conn-text { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
  .conn-state { font-size: 11.5px; font-weight: 600; color: var(--text-dim); line-height: 1.3; }
  .conn-host { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; }
  /* BanyanDB unreachable — mirror the login page's lf-warn palette so the
     operator gets a consistent signal in both places. */
  .conn.is-unreachable {
    background: rgba(207, 107, 82, 0.10);
    border: 1px solid rgba(207, 107, 82, 0.35);
  }
  .conn.is-unreachable .conn-dot {
    background: var(--danger);
    box-shadow: 0 0 0 3px rgba(207, 107, 82, 0.18);
  }
  .conn.is-unreachable .conn-state { color: var(--danger); }
  .conn.is-unreachable .conn-host { color: rgba(207, 107, 82, 0.78); }
  .is-collapsed .conn-text { display: none; }
  .is-collapsed .conn { flex: 0; padding: 6px; justify-content: center; }
  .collapse-btn {
    flex-shrink: 0;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    background: transparent; border: 1px solid var(--border);
    border-radius: 7px; color: var(--text-faint);
    transition: all .15s;
  }
  .collapse-btn:hover { color: var(--text); border-color: var(--border-strong); background: rgba(255,255,255,.03); }
  .is-collapsed .collapse-btn svg { transform: rotate(180deg); }
  .is-collapsed .side-foot { flex-direction: column; }
  .is-collapsed .nav-row { padding-left: 0 !important; justify-content: center; gap: 0; border-left-color: transparent; }
  .is-collapsed .nav-row.has-active .nav-ico,
  .is-collapsed .nav-row.is-active .nav-ico { color: var(--accent); }

  /* collapsed flyout */
  .flyout {
    position: fixed;
    left: calc(var(--side-w-collapsed) + 6px);
    background: var(--panel);
    border: 1px solid var(--border-strong);
    border-radius: 11px;
    padding: 8px;
    min-width: 210px;
    max-height: 80vh; overflow-y: auto;
    box-shadow: 0 18px 48px rgba(0,0,0,.55);
    z-index: 100;
    animation: flyIn .14s ease;
  }
  @keyframes flyIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
  .flyout-head {
    font-family: var(--mono); font-size: 11px; letter-spacing: .5px;
    text-transform: uppercase; color: var(--text-dim);
    padding: 4px 9px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px;
  }
  .flyout-note { font-size: 12px; color: var(--text-faint); padding: 2px 9px 6px; }
  .flyout-sec { margin-bottom: 6px; }
  .flyout-sec-title {
    display: flex; align-items: center; gap: 7px; width: 100%;
    font-size: 11.5px; font-weight: 600; color: var(--text-dim);
    padding: 6px 9px 4px; border: none; background: transparent; text-align: left;
    border-radius: 7px;
  }
  .flyout-sec-title:hover { color: var(--text); background: rgba(255,255,255,.04); }
  .flyout-sec-title.is-active { color: var(--accent); }
  .flyout-sec-title svg { color: var(--text-faint); }
  .flyout-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 6px 9px 6px 24px; border: none; background: transparent;
    color: var(--text-dim); border-radius: 7px; font-family: var(--mono);
    font-size: 12px; font-weight: 450; text-align: left;
  }
  .flyout-item:hover { background: rgba(255,255,255,.05); color: var(--text); }
  .flyout-item.is-active { color: var(--accent); background: var(--accent-soft); }
  .flyout-item svg { color: var(--text-faint); flex-shrink: 0; }
  .flyout-item.is-active svg { color: var(--accent); }

  /* ============ CONTENT ============ */
  .content { min-width: 0; overflow: hidden; display: flex; }
  .content-scroll { flex: 1; overflow-y: auto; opacity: 1; animation: pageIn .26s cubic-bezier(.2,.6,.2,1); }
  @media (prefers-reduced-motion: reduce) { .content-scroll { animation: none; } }
  @keyframes pageIn { from { transform: translateY(7px); } to { transform: none; } }

  .page-body { padding: var(--pad) 40px; max-width: none; margin: 0; }

  .page-head { margin-bottom: 26px; }
  .crumbs { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; margin-bottom: 12px; }
  .crumb { color: var(--text-faint); }
  .crumb.is-last { color: var(--text-dim); }
  button.crumb { background: none; border: none; padding: 0; font: inherit; color: var(--text-faint); cursor: pointer; }
  button.crumb:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
  .crumb-sep { color: var(--text-faint); opacity: .5; }

  .page-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
  .page-title { font-size: 26px; font-weight: 600; letter-spacing: -.4px; margin: 0; }
  .page-meta { margin: 6px 0 0; color: var(--text-dim); font-size: 14px; }
  .page-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

  /* buttons */
  .btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 15px;
    white-space: nowrap;
    border-radius: 8px; border: 1px solid var(--border-strong);
    background: var(--panel-2); color: var(--text);
    font-size: 13.5px; font-weight: 500; white-space: nowrap;
    transition: all .15s;
  }
  .btn:hover { background: var(--panel-3); border-color: rgba(255,255,255,.2); }
  .btn-primary {
    background: var(--accent); border-color: transparent; color: #fff;
    box-shadow: 0 2px 12px var(--accent-glow);
  }
  .btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
  .btn-ghost { background: transparent; border-color: var(--border); color: var(--text-dim); }
  .btn-ghost:hover { color: var(--text); background: rgba(255,255,255,.03); }
  .kbd {
    font-family: var(--mono); font-size: 11px;
    background: rgba(255,255,255,.18); color: #fff;
    padding: 1px 5px; border-radius: 4px; margin-left: 3px;
  }

  .search-box {
    display: flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 12px;
    background: var(--panel); border: 1px solid var(--border-strong);
    border-radius: 8px; color: var(--text-faint);
    transition: border-color .15s;
  }
  .search-box:focus-within { border-color: var(--accent); color: var(--text-dim); }
  .search-box input {
    background: transparent; border: none; outline: none;
    color: var(--text); font-family: var(--sans); font-size: 13px; width: 150px;
  }
  .search-box input::placeholder { color: var(--text-faint); }

  /* empty state */
  .empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 64px 24px;
    border: 1px dashed var(--border-strong); border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.012), transparent);
  }
  .empty-ico {
    width: 60px; height: 60px; display: grid; place-items: center;
    border-radius: 14px; margin-bottom: 18px;
    background: var(--panel-2); border: 1px solid var(--border);
    color: var(--text-faint);
  }
  .empty-title { font-size: 16px; font-weight: 600; margin-bottom: 7px; }
  .empty-text { color: var(--text-dim); font-size: 13.5px; max-width: 380px; line-height: 1.55; margin-bottom: 22px; }
  .empty .btn { margin-top: 0; }

  /* home welcome */
  .welcome {
    display: flex; align-items: center; gap: 22px;
    padding: 24px; margin-bottom: 22px;
    background: radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.03), transparent 60%), var(--panel);
    border: 1px solid var(--border); border-radius: 14px;
  }
  .welcome-mark { width: 56px; height: 56px; flex-shrink: 0; }
  .welcome-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--accent); margin-bottom: 8px; }
  .welcome-lead { margin: 0; font-size: 15px; color: var(--text-dim); line-height: 1.6; max-width: 620px; }

  .quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
  .quick-card {
    position: relative;
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
    column-gap: 12px; row-gap: 3px;
    text-align: left; padding: 16px 18px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
    color: var(--text); transition: all .16s;
  }
  .quick-card:hover { border-color: var(--border-strong); background: var(--panel-2); transform: translateY(-1px); }
  .quick-ico {
    grid-row: 1 / 3; width: 38px; height: 38px; align-self: center;
    display: grid; place-items: center; border-radius: 9px;
    background: var(--accent-soft); color: var(--accent);
  }
  .quick-label { font-weight: 600; font-size: 14px; }
  .quick-desc { color: var(--text-dim); font-size: 12.5px; }
  .quick-arrow { position: absolute; top: 16px; right: 14px; color: var(--text-faint); transition: transform .16s, color .16s; }
  .quick-card:hover .quick-arrow { transform: translateX(2px); color: var(--text-dim); }

  /* ============ GROUP / METADATA ============ */
  .title-badge {
    font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .4px;
    color: var(--accent); background: var(--accent-soft);
    padding: 3px 8px; border-radius: 6px; margin-left: 12px; vertical-align: middle;
    position: relative; top: -3px;
  }
  .page-meta-em { color: var(--text); font-weight: 500; }
  .page-meta-em.is-warn { color: var(--warn); }

  /* resource-type overview: group cards */
  .grp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 12px; }
  .grp-card {
    position: relative; text-align: left;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    column-gap: 12px; row-gap: 4px;
    padding: 16px 18px; background: var(--panel);
    border: 1px solid var(--border); border-radius: 12px; color: var(--text);
    transition: all .16s;
  }
  .grp-card:hover { border-color: var(--border-strong); background: var(--panel-2); transform: translateY(-1px); }
  .grp-card-ico { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
  .grp-card-name { font-family: var(--mono); font-weight: 600; font-size: 14px; }
  .grp-card-count { grid-column: 3; grid-row: 1; font-family: var(--mono); font-size: 11.5px; color: var(--text-dim);
    background: rgba(255,255,255,.05); padding: 2px 8px; border-radius: 20px; justify-self: end; }
  .grp-card-meta { grid-column: 2; grid-row: 2; font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); }
  .grp-card-arrow { grid-column: 3; grid-row: 2; justify-self: end; color: var(--text-faint); transition: transform .16s, color .16s; }
  .grp-card:hover .grp-card-arrow { transform: translateX(2px); color: var(--text-dim); }

  /* group meta chips */
  .grp-meta { display: flex; flex-wrap: wrap; row-gap: 14px; margin-bottom: 24px; }
  .meta-chip { display: flex; flex-direction: column; gap: 3px; padding: 0 22px; }
  .meta-chip:first-child { padding-left: 0; }
  .meta-chip + .meta-chip { border-left: 1px solid var(--border); }
  .meta-k { font-family: var(--sans); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); white-space: nowrap; }
  .meta-v { font-family: var(--mono); font-size: 13px; color: var(--text); white-space: nowrap; }
  .meta-v.is-warn { color: var(--warn); }

  /* resource table */
  .res-table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--panel); }
  .res-head, .res-row {
    display: grid;
    grid-template-columns: minmax(0, 3fr) 100px minmax(0, 1.25fr) minmax(0, 1.2fr) 28px;
    align-items: center; gap: 14px; padding: 0 18px;
  }
  .res-head {
    height: 42px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.012);
    font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--text-faint);
  }
  .res-row {
    width: 100%; height: 54px; border: none; border-bottom: 1px solid var(--border);
    background: transparent; text-align: left; color: var(--text); transition: background .13s;
  }
  .res-row:last-child { border-bottom: none; }
  .res-row:hover { background: rgba(255,255,255,.025); }
  .rc-name { display: flex; align-items: center; gap: 11px; font-family: var(--mono); font-size: 13px; font-weight: 500; min-width: 0; }
  .rc-name span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .res-head .rc-name { font-family: inherit; font-size: inherit; font-weight: inherit; }
  .res-head .rc-name span:last-child { overflow: visible; }
  .rc-ico { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 7px;
    background: var(--panel-2); border: 1px solid var(--border); color: var(--accent); }
  .kind-badge {
    font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .3px;
    color: var(--text-dim); background: var(--panel-2); border: 1px solid var(--border);
    padding: 3px 7px; border-radius: 5px; white-space: nowrap;
  }
  .kind-badge.is-topn { color: #d98a3c; border-color: rgba(217,138,60,.3); background: rgba(217,138,60,.1); }
  .kind-badge.is-idx { color: var(--accent); }
  .rc-detail { font-family: var(--mono); font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rc-schema { display: flex; gap: 6px; flex-wrap: wrap; }
  .schema-chip { font-family: var(--mono); font-size: 11px; color: var(--text-faint); background: rgba(255,255,255,.04); padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
  .rc-go { color: var(--text-faint); display: grid; place-items: center; }
  .res-row:hover .rc-go { color: var(--text-dim); }
  @media (max-width: 760px) {
    .res-head, .res-row { grid-template-columns: 1fr auto; }
    .rc-detail, .rc-schema, .res-head .rc-detail, .res-head .rc-schema { display: none; }
  }

  /* ============ QUERY EDITOR ============ */
  /* Query page = full-height split: builder docks left as a 348px rail with its
     own scroll; results own the right side full-height (explore pattern). */
  .query-body { max-width: none; height: 100%; display: flex; flex-direction: column; padding: 24px 32px 32px; }
  .query-body .page-head { margin-bottom: 22px; }
  /* qb-page-head — horizontal title-row so the actions pin to the right edge */
  /* qb-page-head — slim header matching the handoff: title + meta on the left,
     Builder/Code mode switch pinned to the right. */
  .qb-page-head .page-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; width: 100%; }
  .qb-page-head .page-title { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
  .qb-page-head .page-meta { font-size: 14px; color: var(--text-dim); margin: 4px 0 0; }
  .qb-page-head .page-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; padding-top: 2px; }
  .qb-split { flex: 1; min-height: 0; display: flex; align-items: stretch; gap: 0; }
  .qb-rail { width: var(--qb-rail-w, 348px); flex-shrink: 0; min-height: 0; display: flex; flex-direction: column; }
  /* draggable divider between the builder rail and results */
  .qb-resizer {
    flex: 0 0 10px; align-self: stretch;
    display: flex; align-items: center; justify-content: center;
    background: transparent; cursor: col-resize; touch-action: none; outline: none;
  }
  .qb-resizer-grip {
    position: relative;
    width: 0; height: 100%;
    background: transparent;
  }
  /* centered drag handle */
  .qb-resizer-grip::before {
    content: '';
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 3px; height: 32px; border-radius: 2px;
    background: rgba(255,255,255,.18);
    transition: background .13s, width .13s;
  }
  .qb-resizer:hover .qb-resizer-grip::before, .qb-resizer:focus-visible .qb-resizer-grip::before { background: rgba(255,255,255,.30); width: 3px; }
  .qb-resizer.is-dragging .qb-resizer-grip::before, body.qb-resizing .qb-resizer .qb-resizer-grip::before { background: var(--accent); width: 3px; }
  body.qb-resizing { cursor: col-resize; user-select: none; }
  .qb-rail > .qb-card, .qb-rail > .editor-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .qb-rail-scroll { flex: 1; min-height: 0; overflow-y: auto; }
  .qb-rail-scroll > :last-child { border-bottom: none; }
  .qb-results { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
  .qb-results > .result-card { margin-top: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .qb-results .result-pane { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  /* in the rail layout the card fills its container — let the scroll region grow to
     fill and scroll internally (footer pins to the bottom) instead of a fixed cap */
  .qb-results > .result-card > .result-bar,
  .qb-results > .result-card > .mr-toolbar,
  .qb-results > .result-card > .slog-foot { flex: 0 0 auto; }
  .qb-results .slog, .qb-results .mtbl-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
  .qb-results .mtrace { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .qb-results > .result-card.is-trace > .rv-root > .tin { flex: 1 1 auto; min-height: 0; max-height: none; }

  /* narrow-rail adjustments: keyword sits above the clause body */
  .qb-rail .qb-clause { grid-template-columns: 1fr; gap: 9px; padding: 13px 14px 15px; }
  .qb-rail .qb-kw-col { flex-direction: row; align-items: baseline; gap: 8px; padding-top: 0; }
  .qb-rail .qb-acc-head { padding: 0 14px; }
  .qb-rail .qb-acc-head .qb-kw { width: auto; min-width: 86px; }
  .qb-rail .qb-acc-body { padding: 2px 14px 14px; }
  .qb-rail .qb-cat-btn { padding: 0 10px; }
  .qb-rail .qb-select { max-width: 100%; }
  .qb-rail .editor-area { flex: 1; min-height: 0; max-height: none; }
  .qb-rail .code-input { white-space: pre; overflow-x: auto; }

  /* rail foot: single row matching the handoff (Edit as code / Trace / gen / Run). */
  .qb-foot-row { display: flex; align-items: center; gap: 7px; min-width: 0; width: 100%; }
  .qb-rail .qb-foot { gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
  .qb-rail .qb-gen-line { max-width: 120px; min-width: 80px; font-size: 11px; }
  .qb-rail .qb-eject { padding: 0 8px; font-size: 11.5px; }
  .qb-rail .qb-trace-btn { padding: 0 10px; height: 32px; font-size: 12px; }
  .qb-rail-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); background: rgba(255,255,255,.012); flex-wrap: wrap; }
  .qb-rail-foot .qb-btn { height: 32px; padding: 0 11px; font-size: 12.5px; white-space: nowrap; }
  .qb-rail-foot .qb-btn-primary { margin-left: auto; }
  .qb-rail-foot .qb-kbd { display: none; }
  .qb-rail .qb-foot .btn { height: 32px; padding: 0 10px; font-size: 12px; }

  /* narrow viewports fall back to the stacked layout */
  @media (max-width: 1100px) {
    .query-body { height: auto; }
    .qb-split { display: block; }
    .qb-rail { width: auto; display: block; }
    .qb-resizer { display: none; }
    .qb-rail-scroll { overflow: visible; }
    .qb-results { display: block; overflow: visible; }
    .qb-results > .result-card { margin-top: 16px; flex: 0 0 auto; }
    /* stacked layout: page scrolls, so restore the internal caps */
    .qb-results .slog { flex: 0 1 auto; max-height: 460px; }
    .qb-results .mtbl-scroll { flex: 0 1 auto; max-height: 420px; }
    .qb-results .mtrace { flex: 0 1 auto; }
    .qb-results > .result-card.is-trace > .rv-root > .tin { flex: 0 1 auto; max-height: 460px; }
    .qb-rail .editor-area { max-height: 360px; }
  }
  .editor-card { border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; background: var(--panel); }
  .editor-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,.012);
  }
  .tb-left { display: flex; align-items: center; gap: 12px; }
  .lang-pill {
    font-family: var(--mono); font-size: 11.5px; font-weight: 600;
    color: var(--accent); background: var(--accent-soft);
    padding: 4px 9px; border-radius: 6px; letter-spacing: .3px;
  }
  .tb-hint { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); }
  .tb-right { display: flex; align-items: center; gap: 9px; }
  .tb-right .btn { height: 32px; padding: 0 12px; font-size: 12.5px; }

  .editor-area { display: flex; min-height: 220px; max-height: 360px; background: var(--bg-code); }
  .gutter {
    flex-shrink: 0; padding: 16px 0; width: 48px; text-align: right;
    overflow: hidden; user-select: none;
    background: rgba(0,0,0,.25); border-right: 1px solid var(--border);
  }
  .gutter-num { font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--text-faint); padding-right: 14px; }
  .code-input {
    flex: 1; resize: none; border: none; outline: none;
    background: transparent; color: #cdd6e0;
    font-family: var(--mono); font-size: 13px; line-height: 1.7;
    padding: 16px 18px; tab-size: 2;
  }
  .code-input::placeholder { color: var(--text-faint); }

  /* ============ VISUAL QUERY BUILDER ============ */
  /* mode toggle in the page header */
  /* qb-btn + variants — match handoff .btn / .btn-primary silhouette (pill, halo) */
  .qb-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 15px;
    border-radius: 8px; border: 1px solid var(--border-strong);
    background: var(--panel-2); color: var(--text);
    font-size: 13.5px; font-weight: 500;
    transition: all .15s;
    cursor: pointer;
    font-family: inherit;
  }
  .qb-btn:hover { background: var(--panel-3); border-color: rgba(255,255,255,.2); }
  .qb-btn:disabled { opacity: .5; cursor: not-allowed; }
  .qb-btn-primary {
    background: var(--accent); border-color: transparent; color: #fff;
    box-shadow: 0 2px 12px var(--accent-glow);
  }
  .qb-btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
  .qb-btn-ghost { background: transparent; border-color: var(--border); color: var(--text-dim); }
  .qb-btn-ghost:hover { color: var(--text); background: rgba(255,255,255,.03); }
  .qb-btn-danger {
    background: var(--danger); border-color: transparent; color: #fff;
  }
  .qb-btn-danger:hover { filter: brightness(1.06); }

  .qb-mode-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 9px; }
  .qb-mode-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px;
    border: none; background: transparent; color: var(--text-dim);
    border-radius: 6px; font-size: 12.5px; font-weight: 500; transition: all .14s;
  }
  .qb-mode-btn:hover { color: var(--text); }
  .qb-mode-btn.is-on { background: var(--accent-soft); color: var(--accent); }

  /* ---- property query console wrapper ---- */
  .propq { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
  .propq-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .propq-bar-left { display: flex; align-items: center; gap: 9px; color: var(--text-dim); }
  .propq-bar-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
  .propq-bar-sub {
    font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .3px;
    color: var(--text-faint); padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px;
  }
  .propq-lock {
    font-size: 13px; font-weight: 600; color: var(--text);
    padding: 3px 9px; border-radius: 6px; background: var(--accent-soft); border: 1px solid var(--border-strong);
  }
  .propq-ran { margin-right: 4px; }
  .propq-err {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; font-family: var(--mono); font-size: 12px; line-height: 1.5;
    color: var(--danger); background: rgba(192,57,47,.1);
    border-top: 1px solid var(--border);
  }

  .qb-card { border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; background: var(--panel); }

  /* search input above the catalog tabs in the FROM clause */
  .qb-search { position: relative; display: flex; align-items: center; }
  .qb-search-ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-faint); display: inline-flex; }
  .qb-search-input {
    width: 100%; height: 32px; padding: 0 10px 0 32px;
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 12.5px; font-family: inherit;
  }
  .qb-search-input::placeholder { color: var(--text-faint); }
  .qb-search-input:focus { outline: none; border-color: var(--accent); }

  /* native select wrapped in a styled container with a chevron — matches the
     handoff's qb-select-wrap / qb-select-chev silhouette */
  .qb-select-wrap { position: relative; display: inline-flex; align-items: center; min-width: 0; }
  .qb-select-wrap > select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    width: 100%; height: 30px; padding: 0 24px 0 10px;
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 7px;
    font-family: var(--mono); font-size: 12px;
    line-height: 1; cursor: pointer;
  }
  .qb-select-wrap > select:focus { outline: none; border-color: var(--accent); }
  .qb-select-wrap > select option { background: var(--panel); color: var(--text); }
  .qb-select-chev { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; display: inline-flex; }

  /* one clause row: keyword column + body. The handoff uses `.qb-clause` /
     `.qb-kw-col` / `.qb-kw`; the impl port (QueryBuilder.tsx) uses
     `.qb-section` / `.qb-section-h`. Both must render the same 2-column
     grid so the rendered DOM matches the handoff silhouette. The handoff
     overrides this inside the narrow rail (348px) to a single-column
     stack — keyword on top, body below — so the keyword sits at the
     top of each clause. */
  .qb-clause, .qb-section { display: grid; grid-template-columns: 116px 1fr; column-gap: 16px; row-gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--border); align-items: stretch; }
  .qb-rail .qb-clause, .qb-rail .qb-section { grid-template-columns: 1fr; column-gap: 0; row-gap: 9px; padding: 13px 14px 15px; }
  .qb-section:last-child { border-bottom: none; }
  /* Place the keyword in column 1 and any other direct child in column 2
     (only when the wide 2-column grid is in effect; the .qb-rail override
     above collapses to 1fr so the keyword and body stack vertically). */
  .qb-clause > .qb-kw-col, .qb-clause > .clause-body, .qb-section > .qb-section-h { grid-column: 1; }
  .qb-clause > :not(.qb-kw-col):not(.clause-body), .qb-section > :not(.qb-section-h) { grid-column: 2; }
  .qb-rail .qb-clause > .qb-kw-col, .qb-rail .qb-clause > .clause-body, .qb-rail .qb-section > .qb-section-h,
  .qb-rail .qb-clause > :not(.qb-kw-col):not(.clause-body), .qb-rail .qb-section > :not(.qb-section-h) { grid-column: 1; }
  .qb-kw-col { display: flex; flex-direction: column; gap: 5px; padding-top: 7px; }
  .qb-rail .qb-kw-col { flex-direction: row; align-items: baseline; gap: 8px; padding-top: 0; }
  .qb-kw.has-hint { cursor: help; }
  /* .qb-kw: the handoff's keyword col (stacks keyword + opt sub-label
     vertically in the wide layout). */
  .qb-kw {
    display: flex; flex-direction: column; gap: 5px;
    font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .5px; color: var(--accent); padding-top: 7px;
  }
  /* .qb-section-h: the impl's keyword row (WHERE + optional on the same
     row, with optional pushed to the right edge — matches the
     handoff's row layout in the empty-WHERE screenshot). */
  .qb-section-h {
    display: flex; flex-direction: row; align-items: baseline; gap: 8px;
    font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .5px; color: var(--accent); padding-top: 0;
  }
  .qb-rail .qb-kw, .qb-rail .qb-section-h { padding-top: 0; }
  .qb-opt { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); }
  .qb-body { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
  .qb-stack { display: flex; flex-direction: column; gap: 8px; }
  .qb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .qb-cond-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .qb-row-add { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px dashed var(--border-strong); border-radius: 7px; background: transparent; color: var(--text-dim); font-family: inherit; font-size: 12.5px; cursor: pointer; }
  .qb-row-add:hover { color: var(--text); border-color: var(--accent); }
  .qb-trace-row { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-dim); cursor: pointer; margin-top: 4px; }
  .qb-trace-row input { accent-color: var(--accent); cursor: pointer; }
  .qb-hint { font-size: 12px; color: var(--text-faint); line-height: 1.5; }
  .qb-dim { font-size: 12.5px; color: var(--text-faint); font-style: italic; }
  .qb-gap { flex: 1 1 auto; }

  .qb-inline-kw { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--text-faint); }
  .qb-of { font-size: 12px; color: var(--text-faint); }
  .qb-and { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .5px; color: var(--text-faint); margin-right: 2px; }

  /* ---- WHERE: recursive boolean group builder ---- */
  .qb-group { display: flex; flex-direction: column; gap: 10px; }
  .qb-group:not(.is-root) {
    border: 1px solid var(--border-strong);
    border-left: 2px solid var(--accent);
    border-radius: 10px;
    padding: 12px 12px 12px 14px;
    background: color-mix(in srgb, var(--accent) 4%, transparent);
  }
  .qb-group-head { display: flex; align-items: center; gap: 10px; min-height: 28px; }
  .qb-group-tag { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--text-faint); }

  /* nested WHERE group card — green left accent + panel-2 fill,
     matches the handoff's qb-group:not(.is-root) treatment. */
  .qb-group-card {
    display: flex; flex-direction: column; gap: 10px;
    border: 1px solid var(--border-strong);
    border-left: 2px solid var(--accent);
    border-radius: 10px;
    padding: 12px 12px 12px 14px;
    background: var(--panel-2);
  }

  /* AND / OR combinator toggle */
  .qb-comb-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: 8px; }
  .qb-comb-btn {
    height: 26px; padding: 0 13px; border: none; background: transparent; color: var(--text-dim);
    border-radius: 5px; font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .5px; transition: all .13s;
  }
  .qb-comb-btn:hover { color: var(--text); }
  .qb-comb-btn.is-on { background: var(--accent-soft); color: var(--accent); }

  .qb-group-children { display: flex; flex-direction: column; gap: 8px; }
  .qb-child { display: flex; flex-direction: column; gap: 8px; }
  /* per-row AND / OR connector toggle between sibling rows */
  .qb-conn-seg { align-self: flex-start; display: inline-flex; padding: 2px; gap: 2px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; }
  .qb-conn-btn {
    height: 20px; padding: 0 9px; border: none; background: transparent; color: var(--text-faint);
    border-radius: 5px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .6px; transition: all .13s;
  }
  .qb-conn-btn:hover { color: var(--text); }
  .qb-conn-btn.is-on { background: var(--accent-soft); color: var(--accent); }
  /* connector word between sibling rows */
  .qb-conn {
    align-self: flex-start;
    font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .6px;
    color: var(--accent); background: var(--accent-soft);
    padding: 2px 8px; border-radius: 5px;
  }
  .qb-cond { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .qb-group-foot { display: flex; flex-wrap: wrap; gap: 8px; }

  /* ---- TIME: absolute / relative ---- */
  .qb-time { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
  .qb-time-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: 9px; }
  .qb-time-tab {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px;
    border: none; background: transparent; color: var(--text-dim);
    border-radius: 6px; font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: all .14s;
  }
  .qb-time-tab:hover { color: var(--text); }
  .qb-time-tab.is-on { background: var(--accent-soft); color: var(--accent); }
  .qb-time-abs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
  .qb-time-field { display: flex; flex-direction: column; gap: 6px; }
  .qb-time-lbl { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); }
  .qb-time .qb-time-input { flex: 0 0 auto; height: 36px; min-width: 210px; color-scheme: dark; }
  .qb-time-arrow { color: var(--text-faint); padding-bottom: 9px; }
  .qb-time-clear {
    width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0;
    border: 1px solid var(--border); background: var(--panel-2); color: var(--text-faint);
    border-radius: 8px; transition: all .13s;
  }
  .qb-time-clear:hover { border-color: rgba(224,122,112,.5); color: var(--danger); background: rgba(192,57,47,.1); }

  /* catalog segmented control (slim row) */
  .qb-cat-seg { display: inline-flex; align-self: flex-start; max-width: 100%; flex-wrap: wrap; padding: 3px; gap: 2px; background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: 9px; }
  .qb-cat-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 30px; padding: 0 13px; border: none; border-radius: 7px;
    background: transparent; color: var(--text-dim); white-space: nowrap; transition: all .14s;
  }
  .qb-cat-btn svg { color: var(--text-faint); }
  .qb-cat-name { font-size: 12.5px; font-weight: 600; }
  .qb-cat-btn:hover { color: var(--text); }
  .qb-cat-btn.is-on { background: var(--accent-soft); color: var(--accent); }
  .qb-cat-btn.is-on svg { color: var(--accent); }

  /* fuzzy resource search (FROM) */
  .qb-search { position: relative; display: flex; align-items: center; margin-bottom: 12px; }
  .qb-search-ico { position: absolute; left: 11px; display: inline-flex; color: var(--text-faint); pointer-events: none; }
  .qb-search-input {
    width: 100%; height: 38px; padding: 0 34px;
    background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: 9px;
    color: var(--text); font-size: 13px; outline: none; transition: border-color .14s, box-shadow .14s;
  }
  .qb-search-input::placeholder { color: var(--text-faint); }
  .qb-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .qb-search-clear {
    position: absolute; right: 8px; display: inline-grid; place-items: center;
    width: 22px; height: 22px; border: none; border-radius: 6px; background: transparent; color: var(--text-faint); transition: all .13s;
  }
  .qb-search-clear:hover { background: rgba(255,255,255,.07); color: var(--text); }
  .qb-search-menu {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
    max-height: 322px; overflow-y: auto; padding: 5px;
    background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: 10px;
    box-shadow: 0 16px 42px rgba(0,0,0,.46);
  }
  .qb-search-empty { padding: 11px 10px; font-size: 12.5px; color: var(--text-faint); }
  .qb-search-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 9px; border: none; border-radius: 7px; background: transparent; text-align: left; cursor: pointer; transition: background .12s;
  }
  .qb-search-item.is-active { background: var(--accent-soft); }
  .qb-search-badge {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; width: 84px;
    font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-dim);
  }
  .qb-search-badge svg { color: var(--text-faint); }
  .qb-search-item.is-active .qb-search-badge,
  .qb-search-item.is-active .qb-search-badge svg { color: var(--accent); }
  .qb-search-name { flex: 0 1 auto; font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .qb-search-grp { margin-left: auto; flex-shrink: 0; font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }
  .qb-fz-hl { background: transparent; color: var(--accent); font-weight: 700; }

  /* selects + inputs */
  .qb-select-wrap { position: relative; display: inline-flex; }
  .qb-select {
    appearance: none; -webkit-appearance: none;
    height: 36px; padding: 0 30px 0 12px; max-width: 320px;
    background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: 8px;
    color: var(--text); font-family: var(--mono); font-size: 12.5px; cursor: pointer; transition: border-color .14s;
  }
  .qb-select:hover { border-color: rgba(255,255,255,.2); }
  .qb-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .qb-select:disabled { opacity: .5; cursor: not-allowed; }
  .qb-select option { background: var(--panel-2); color: var(--text); }
  .qb-select-chev { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
  .qb-input {
    height: 36px; padding: 0 12px; min-width: 120px; flex: 0 1 200px;
    background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: 8px;
    color: var(--text); font-size: 13px; outline: none; transition: border-color .14s;
  }
  .qb-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .qb-input::placeholder { color: var(--text-faint); }
  .qb-num { flex: 0 0 92px; min-width: 0; }

  /* segmented dir control */
  .qb-dir-seg, .qb-cat-seg-mini { display: inline-flex; padding: 3px; gap: 2px; background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: 8px; }
  .qb-dir-btn {
    height: 28px; padding: 0 12px; border: none; background: transparent; color: var(--text-dim);
    border-radius: 5px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; transition: all .13s;
  }
  .qb-dir-btn:hover:not(:disabled) { color: var(--text); }
  .qb-dir-btn.is-on { background: var(--accent-soft); color: var(--accent); }
  .qb-dir-btn:disabled { opacity: .4; cursor: not-allowed; }

  /* tag chips */
  .qb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .qb-chip {
    height: 30px; padding: 0 11px; border-radius: 7px; border: 1px solid var(--border-strong);
    white-space: nowrap;
    background: var(--panel-2); color: var(--text-dim); font-size: 12px; transition: all .13s;
  }
  .qb-chip:hover { border-color: rgba(255,255,255,.22); color: var(--text); }
  .qb-chip.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

  /* SELECT split: fields + tag projection (measures) */
  .qb-select-split { display: flex; flex-direction: column; gap: 16px; }
  .qb-select-sub { display: flex; flex-direction: column; gap: 8px; }
  .qb-sub-label {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim);
  }
  .qb-sub-opt { font-size: 9.5px; font-weight: 500; letter-spacing: .5px; color: var(--text-faint); }
  .qb-sub-req { font-size: 9.5px; font-weight: 600; letter-spacing: .5px; color: var(--accent); }

  /* add / delete row controls */
  .qb-add {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; justify-self: start;
    white-space: nowrap;
    height: 32px; padding: 0 12px; border-radius: 8px;
    border: 1px dashed var(--border-strong); background: transparent; color: var(--text-dim);
    font-size: 12.5px; transition: all .14s;
  }
  .qb-add:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
  .qb-add:disabled { opacity: .45; cursor: not-allowed; }
  .qb-del {
    display: inline-grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0;
    border: 1px solid var(--border); background: var(--panel-2); color: var(--text-faint);
    border-radius: 8px; transition: all .13s;
  }
  .qb-del:hover { border-color: rgba(224,122,112,.5); color: var(--danger); background: rgba(192,57,47,.1); }

  /* generated preview + actions — one compact row matching the handoff:
     Edit as code + Trace on the left, generated query preview pushed to the
     right, then Run. */
  .qb-foot { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; padding: 12px 20px; background: rgba(255,255,255,.012); }
  .qb-gen-line { flex: 0 1 auto; max-width: 320px; min-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: #cdd6e0; cursor: default; }
  .qb-eject {
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding: 0 11px; border-radius: 7px; border: 1px solid var(--border-strong);
    background: var(--panel-2); color: var(--accent); font-size: 12px; font-weight: 500; white-space: nowrap; transition: all .14s;
  }
  .qb-eject:hover { background: var(--accent-soft); border-color: var(--accent); }

  /* post-run accordion clauses (one open at a time) */
  .qb-acc { border-bottom: 1px solid var(--border); }
  .qb-acc-head {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px;
    padding: 0 20px; border: none; background: transparent; text-align: left; cursor: pointer;
  }
  .qb-acc-head:hover { background: rgba(255,255,255,.02); }
  .qb-acc-chev { color: var(--text-faint); font-size: 10px; width: 11px; flex-shrink: 0; }
  .qb-acc-head .qb-kw { width: 106px; flex-shrink: 0; }
  .qb-acc-sum { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
  .qb-acc-edit { margin-left: auto; font-size: 11px; color: var(--text-faint); opacity: 0; transition: opacity .13s; flex-shrink: 0; }
  .qb-acc-head:hover .qb-acc-edit, .qb-acc.is-open .qb-acc-edit { opacity: 1; }
  .qb-acc-body { padding: 2px 20px 16px 43px; background: rgba(0,0,0,.14); }

  @media (max-width: 760px) {
    .qb-clause { grid-template-columns: 1fr; gap: 8px; }
    .qb-kw-col { flex-direction: row; align-items: baseline; gap: 8px; padding-top: 0; }
  }

  .result-card { margin-top: 16px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--panel); }
  .result-bar {
    display: flex; align-items: center; gap: 14px;
    padding: 0 16px; min-height: 44px; border-bottom: 1px solid var(--border);
  }
  .result-tabs { display: flex; align-items: center; gap: 20px; }
  .result-tab {
    font-size: 13px; font-weight: 500; color: var(--text-faint);
    height: 44px; display: flex; align-items: center;
    border: none; border-bottom: 2px solid transparent; background: transparent;
    cursor: pointer; padding: 0 4px;
  }
  .result-tab.is-active { color: var(--text); border-bottom-color: var(--accent); }
  .result-meta { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ok); }
  .result-actions { display: flex; align-items: center; gap: 4px; }
  .result-view-btn {
    height: 28px; padding: 0 11px; border-radius: 7px; border: 1px solid var(--border-strong);
    background: transparent; color: var(--text-dim); font-size: 12px; font-weight: 500;
    transition: all .13s; cursor: pointer;
  }
  .result-view-btn:hover:not(:disabled) { color: var(--text); border-color: rgba(255,255,255,.22); }
  .result-view-btn.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
  .result-view-btn:disabled { opacity: .45; cursor: not-allowed; }
  .result-status { margin-left: auto; }
  .rs { font-family: var(--mono); font-size: 12px; }
  .rs.idle { color: var(--text-faint); }
  .rs.run { color: var(--accent); }
  .rs.ok { color: var(--ok); }
  .rs.fail { color: var(--danger); }
  .rs.meta { color: var(--info); }
  .result-pane .empty { border: none; padding: 48px 24px; background: none; text-align: center; }
  .result-pane .empty-title { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 6px; }
  .result-pane .empty-text { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 0; }

  /* ============ RESULT ERROR STATE ============ */
  .rv-error { align-items: center; text-align: center; }
  .rv-error-ico { background: rgba(207,107,82,.12); color: var(--danger); }
  .rv-error-title { color: var(--text); }
  .rv-error-hint { max-width: 420px; margin: 0 auto 20px; }
  .rv-error-msg { display: inline-flex; align-items: center; gap: 10px; max-width: 520px; margin: 0 auto 22px; padding: 10px 14px; background: rgba(207,107,82,.08); border: 1px solid rgba(207,107,82,.22); border-radius: 8px; text-align: left; }
  .rv-error-label { flex-shrink: 0; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--danger); }
  .rv-error-code { font-family: var(--mono); font-size: 12px; color: var(--text-dim); word-break: break-word; }
  .rv-error .btn { margin-bottom: 14px; }
  .rv-error-details-btn { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto; padding: 6px 10px; background: transparent; border: none; border-radius: 6px; color: var(--text-faint); font-size: 12px; cursor: pointer; transition: color .12s, background .12s; }
  .rv-error-details-btn:hover { color: var(--text-dim); background: rgba(255,255,255,.04); }
  .rv-error-details { max-width: 520px; margin: 12px auto 0; padding: 12px 14px; background: var(--bg-code); border: 1px solid var(--border); border-radius: 8px; text-align: left; }
  .rv-error-details pre { margin: 0; font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); white-space: pre-wrap; word-break: break-word; }

  /* ============ MEASURE RESULT VIEW (table ⇄ chart ⇄ trace) ============ */
  .result-bar button.result-tab { background: none; border: none; font-family: inherit; padding: 0; display: inline-flex; align-items: center; gap: 6px; }
  .mr-trace-on { width: 6px; height: 6px; border-radius: 50%; background: var(--info); box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 18%, transparent); }

  .mr-toolbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.012); }
  .mr-tool-label { font-size: 12.5px; color: var(--text-dim); }
  .mr-tool-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .mr-view-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 8px; }
  .mr-view-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: none; background: transparent; color: var(--text-dim); border-radius: 6px; font-size: 12px; font-weight: 500; transition: all .13s; }
  .mr-view-btn:hover:not(:disabled) { color: var(--text); }
  .mr-view-btn.is-on { background: var(--accent-soft); color: var(--accent); }
  .mr-view-btn:disabled { opacity: .4; cursor: not-allowed; }
  .mr-auto-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; }
  .mr-meta-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text-dim); font-size: 11.5px; transition: all .13s; }
  .mr-meta-btn:hover { color: var(--text); border-color: rgba(255,255,255,.22); }
  .mr-meta-btn.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
  .mr-chip { white-space: nowrap; height: 27px; padding: 0 11px; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text-dim); font-size: 11.5px; transition: all .13s; }
  .mr-chip:hover { color: var(--text); }
  .mr-chip.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

  /* ── measure result view (rv-*) — multi-series chart, table, legend ── */
  .rv-root { display: flex; flex-direction: column; min-height: 0; flex: 1; }
  .rv-tabs { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.012); }
  .rv-tab { background: transparent; border: none; padding: 5px 10px; border-radius: 6px; font-size: 12px; color: var(--text-dim); cursor: pointer; transition: all .13s; }
  .rv-tab:hover { color: var(--text); background: rgba(255,255,255,.04); }
  .rv-tab.is-on { color: var(--text); background: var(--panel-3); font-weight: 500; }
  .rv-tab:disabled { opacity: .35; cursor: not-allowed; }
  .rv-summary { margin-left: 10px; font-size: 11.5px; color: var(--text-faint); }
  .rv-auto-tag { margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; }
  .rv-empty { display: flex; align-items: center; justify-content: center; flex: 1; padding: 32px; font-size: 12.5px; color: var(--text-faint); }

  .rv-table-wrap { overflow: auto; flex: 1; min-height: 0; }
  .rv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .rv-table th, .rv-table td { padding: 7px 12px; border-bottom: 1px solid var(--border); text-align: left; }
  .rv-table thead th { position: sticky; top: 0; background: var(--panel-2); color: var(--text-dim); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
  .rv-table tbody tr:hover { background: rgba(255,255,255,.025); }
  .rv-loadmore { display: flex; justify-content: center; padding: 12px; border-top: 1px solid var(--border); }
  .rv-loadmore-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text); font-size: 12px; cursor: pointer; transition: all .13s; }
  .rv-loadmore-btn:hover { background: var(--panel-3); border-color: rgba(255,255,255,.22); }
  .rv-loadmore-btn:disabled { opacity: .55; cursor: not-allowed; }

  .rv-chart-fields { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--border); }
  .rv-chart-wrap { padding: 12px 14px; }
  .rv-chart-svg { display: block; width: 100%; height: auto; max-height: 360px; }
  .rv-chart-grid { stroke: rgba(255,255,255,.06); stroke-width: 1; }
  .rv-chart-axis-label { fill: var(--text-faint); font-size: 10px; font-family: var(--mono); }
  .rv-chart-axis-time { fill: var(--text-faint); font-size: 10px; font-family: var(--mono); }

  .rv-legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; padding: 10px 14px 16px; border-top: 1px solid var(--border); }
  .rv-legend-row { display: flex; align-items: baseline; gap: 10px; font-size: 11.5px; min-width: 0; }
  .rv-legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .rv-legend-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
  .rv-legend-metric { display: inline-flex; align-items: baseline; gap: 4px; color: var(--text-dim); white-space: nowrap; }
  .rv-legend-metric i { font-style: normal; color: var(--text-faint); }
  .rv-legend-metric .mono { font-family: var(--mono); color: var(--text); }
  .rv-legend-last { font-weight: 600; }
  .rv-legend-delta { margin-left: auto; font-family: var(--mono); font-size: 11px; white-space: nowrap; }
  .rv-up { color: var(--ok); }
  .rv-down { color: var(--danger); }

  .rv-trace { padding: 12px 14px; max-height: 480px; overflow: auto; }
  .rv-trace pre { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); white-space: pre-wrap; word-break: break-word; margin: 0; }

  .num { text-align: right; }
  .result-card .strong { color: var(--text); font-weight: 500; }
  .result-card .dim { color: var(--text-dim); }
  .result-card .faint { color: var(--text-faint); }
  .up { color: var(--ok); }
  .down { color: var(--danger); }

  /* table */
  .mtbl-scroll { max-height: 420px; overflow: auto; }
  .mtbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .mtbl thead { position: sticky; top: 0; z-index: 1; }
  .mtbl thead th { font-weight: 500; text-align: left; color: var(--text-faint); background: var(--panel); }
  .mtbl-tier th { padding: 8px 14px 4px; font-size: 9.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--text-faint); border-bottom: 1px solid var(--border); }
  .mtbl-tier .tier-time { color: var(--accent); }
  .mtbl-tier .tier-grp { color: var(--text-dim); border-left: 1px solid var(--border); }
  .mtbl-tier .tier-fields { color: var(--ok); }
  .mtbl-tier .tier-meta { color: var(--text-faint); }
  .mtbl .meta-col { color: var(--text-faint); background: rgba(255,255,255,.012); }
  .mtbl thead .meta-col { color: var(--text-faint); }
  .mtbl-cols th { padding: 7px 14px; font-size: 11px; font-family: var(--mono); border-bottom: 1px solid var(--border-strong); background: var(--panel-2); }
  .mtbl-cols th.num { text-align: right; }
  .mtbl tbody td { padding: 7px 14px; border-bottom: 1px solid var(--border); color: var(--text-dim); white-space: nowrap; }
  .mtbl tbody tr:hover td { background: rgba(255,255,255,.02); }
  .mtbl tbody tr:last-child td { border-bottom: none; }
  .tagpill { display: inline-block; padding: 1px 8px; border-radius: 5px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim); font-size: 11.5px; }

  /* timestamp cell tooltip: full ISO + epoch on hover (ported to body so it
     escapes the scroll container and can be hovered for copying). Both
     flavors share .ts-tip; .ts-cell is the <td> variant, .ts-text is the
     inline-span variant used by trace row headers. */
  .ts-cell { cursor: help; }
  .ts-text {
    cursor: help;
    border-radius: 3px;
  }
  .ts-text:focus-visible { outline: 1px solid var(--border-strong); outline-offset: 1px; }
  .ts-tip {
    position: fixed;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    background: var(--panel-2);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
    font-size: 11px;
    font-family: var(--mono);
    color: var(--text-dim);
    white-space: nowrap;
    pointer-events: auto;
    user-select: text;
  }
  .ts-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--border-strong);
  }
  .ts-tip-row { display: flex; gap: 8px; align-items: baseline; }
  .ts-tip-row b { width: 42px; flex-shrink: 0; color: var(--accent); font-weight: 600; text-transform: uppercase; font-size: 9px; letter-spacing: .5px; }

  /* CopyableId popover: hover the truncated trace_id/span_id cell to see the
     full value + a Copy button. Reuses .ts-tip chrome (panel-2, border-strong,
     rounded) and positions with the same translate(-50%, -100%) convention.
     The cell uses inline-block + max-width:100% so it truncates with
     ellipsis inside any container — the trace row grid (120px/52px columns),
     the .tin-v detail-card value cell (flex/grid 1fr), or anywhere else. */
  .ti-id-cell {
    cursor: copy;
    outline: none;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
  .ti-id-cell:focus-visible { box-shadow: 0 0 0 2px rgba(86,194,214,.32); border-radius: 3px; }
  .ti-id-tip {
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 9px 12px 10px;
    background: var(--panel-2);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
    color: var(--text-dim);
    pointer-events: auto;
    user-select: text;
  }
  .ti-id-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--border-strong);
  }
  .ti-id-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .ti-id-label { font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); font-weight: 600; }
  .ti-id-copy {
    appearance: none;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 10.5px;
    padding: 2px 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
  }
  .ti-id-copy:hover { background: rgba(255,255,255,.10); color: var(--text); border-color: var(--border-strong); }
  .ti-id-copy.is-on { color: var(--info); border-color: rgba(86,194,214,.4); background: rgba(86,194,214,.12); }
  .ti-id-value {
    font-size: 11.5px;
    color: var(--text);
    background: rgba(0,0,0,.18);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 5px 8px;
    word-break: break-all;
    cursor: text;
    user-select: text;
  }

  /* chart */
  .mchart-wrap { padding: 4px 0 0; }
  .mchart-fields { display: flex; gap: 6px; padding: 12px 16px 2px; }
  .mchart { padding: 10px 14px 4px; }
  .mc-svg { display: block; width: 100%; height: auto; }
  .mc-axis { fill: var(--text-faint); font-family: var(--mono); font-size: 10px; }
  .mlegend { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; padding: 10px 18px 16px; border-top: 1px solid var(--border); }
  .mlg-row { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 12.5px; min-width: 0; }
  .mlg-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
  .mlg-name { color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mlg-gap { flex: 1 1 auto; }
  .mlg-metric { display: inline-flex; align-items: baseline; gap: 5px; color: var(--text-dim); font-size: 11px; }
  .mlg-metric i { color: var(--text-faint); font-style: normal; font-size: 10px; }
  .mlg-metric .mono { font-size: 12px; }
  .mlg-delta { font-family: var(--mono); font-size: 11px; min-width: 58px; text-align: right; }

  /* trace */
  .mtrace { padding: 4px 0 8px; }
  .mtrace-head { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px 8px; }
  .mtrace-head .mono { font-size: 12.5px; color: var(--text); }
  .mtrace-sub { font-size: 11.5px; color: var(--text-faint); }
  .mtrace-rows { display: flex; flex-direction: column; }
  .mtrace-row { display: grid; grid-template-columns: 168px 1fr 150px 64px; align-items: center; gap: 12px; padding: 7px 16px; border-top: 1px solid var(--border); font-size: 12px; }
  .mtrace-row.depth-1 .mtrace-name { padding-left: 14px; }
  .mtrace-row.depth-2 .mtrace-name { padding-left: 28px; }
  .mtrace-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mtrace-detail { color: var(--text-faint); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mtrace-bar-wrap { height: 7px; background: rgba(255,255,255,.05); border-radius: 4px; overflow: hidden; }
  .mtrace-bar { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
  .mtrace-dur { text-align: right; color: var(--text-dim); font-size: 11.5px; }
  .mtrace-off { padding: 40px 28px; color: var(--text-dim); font-size: 13px; line-height: 1.6; text-align: center; }
  .mtrace-off .mono { color: var(--accent); }

  /* query-trace toggle in builder actions */
  .qb-trace-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text-dim); font-size: 12.5px; transition: all .14s; }
  .qb-trace-btn:hover { color: var(--text); border-color: rgba(255,255,255,.22); }
  .qb-trace-btn.is-on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); }
  .qb-trace-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); transition: all .14s; }
  .qb-trace-btn.is-on .qb-trace-dot { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }

  /* ============ STREAM RESULT VIEW (console ⇄ table) ============ */
  .warn-txt { color: var(--warn); }
  .result-card .sdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-right: 7px; vertical-align: middle; }
  .lvltag { font-size: 11px; font-weight: 600; letter-spacing: .3px; }
  .pg-btn { height: 26px; padding: 0 11px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text-dim); font-size: 11.5px; }
  .pg-btn:hover:not(:disabled) { color: var(--text); }
  .pg-btn:disabled { opacity: .4; cursor: not-allowed; }

  /* log console */
  .slog { display: flex; flex-direction: column; font-size: 12.5px; max-height: 460px; overflow: auto; }
  .slog-row { border-bottom: 1px solid var(--border); }
  .slog-row:last-child { border-bottom: none; }
  .slog-main { display: grid; grid-template-columns: 16px 96px minmax(0,1fr); align-items: center; gap: 14px; padding: 8px 16px; cursor: pointer; transition: background .12s; }
  .slog-row:hover .slog-main { background: rgba(255,255,255,.022); }
  .slog-row.is-open .slog-main { background: rgba(255,255,255,.03); }
  .slog-chev { color: var(--text-faint); font-size: 9px; text-align: center; }
  .slog-ts { color: var(--text-faint); font-size: 11.5px; white-space: nowrap; }
  .slog-lvl { font-size: 10px; font-weight: 600; letter-spacing: .4px; padding: 2px 7px; border-radius: 5px; text-align: center; }
  .slog-svc { display: flex; align-items: center; color: var(--text-dim); font-size: 12px; white-space: nowrap; min-width: 0; }
  .slog-msg { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .slog-row.is-open .slog-msg { white-space: normal; }
  .slog-ep { color: var(--text-faint); font-size: 11px; white-space: nowrap; }
  .slog-detail { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2px 28px; padding: 4px 16px 14px 132px; background: rgba(0,0,0,.18); }
  .slog-kv { display: flex; gap: 12px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 11.5px; }
  .slog-k { color: var(--text-faint); min-width: 132px; }
  .slog-v { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .slog-foot { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-faint); }

  /* ===== tag-render engine: value cells (shared by console + table) ===== */
  .scat { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 5px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .3px; line-height: 1; white-space: nowrap; border: 1px solid transparent; vertical-align: middle; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .sid { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); white-space: nowrap; }
  .sid .sid-pre { color: var(--text); }
  .sid .sid-tail { color: var(--text-faint); }
  .sbody { color: var(--text); }
  .snum { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text-dim); }
  .snum.strong { color: var(--text); }
  .sbin { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 7px; border-radius: 5px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-faint); font-family: var(--mono); font-size: 10.5px; vertical-align: middle; white-space: nowrap; }
  .sbin svg { opacity: .7; }
  /* binary inspector: opaque-blob chip that expands to a hex / base64 view */
  .sbin-wrap { display: inline-flex; align-items: center; vertical-align: middle; max-width: 100%; }
  button.sbin-btn { cursor: pointer; font-family: var(--mono); transition: color .12s, border-color .12s, background .12s; }
  button.sbin-btn:hover { color: var(--text-dim); border-color: var(--border-strong); }
  button.sbin-btn.is-open { color: var(--text); border-color: var(--border-strong); background: var(--panel-3); }
  .sbin-caret { font-size: 8px; opacity: .55; margin-left: 1px; }
  .sbin-backdrop { position: fixed; inset: 0; z-index: 60; }
  .sbin-pop { z-index: 61; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden auto; box-shadow: 0 14px 36px rgba(0,0,0,.42); }
  .sbin-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; border-bottom: 1px solid var(--border); font-size: 10.5px; color: var(--text-dim); flex-shrink: 0; }
  .sbin-acts { display: flex; gap: 6px; flex-shrink: 0; }
  .sbin-acts button { height: 20px; padding: 0 8px; border-radius: 5px; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text-dim); font-family: var(--mono); font-size: 9.5px; cursor: pointer; transition: color .12s, border-color .12s; }
  .sbin-acts button:hover { color: var(--text); border-color: var(--text-faint); }
  .sbin-hex { display: flex; flex-direction: column; padding: 8px 9px; gap: 3px; }
  .sbin-hexrow { display: grid; grid-template-columns: 30px 1fr 12ch; gap: 12px; font-family: var(--mono); font-size: 10.5px; line-height: 1.4; white-space: nowrap; }
  .sbin-off { color: var(--text-faint); }
  .sbin-bytes { color: var(--text-dim); letter-spacing: .2px; }
  .sbin-ascii { color: var(--accent); }
  .sbin-note { padding: 7px 9px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 10px; line-height: 1.5; flex-shrink: 0; }
  .sarr { display: inline-flex; flex-wrap: wrap; gap: 4px; }
  .sarr .scat { background: var(--panel-2); border-color: var(--border); color: var(--text-dim); font-weight: 500; }

  /* console main line: timestamp | [badges] body [meta] */
  .slog-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .slog-badges { display: flex; gap: 6px; flex-shrink: 0; }
  .slog-body { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
  .slog-body.is-fallback { color: var(--text-faint); font-family: var(--mono); font-size: 11.5px; }
  .slog-row.is-open .slog-body { white-space: normal; }
  .slog-meta { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-shrink: 0; }
  .slog-metacell { white-space: nowrap; }
  .slog-detail .slog-v .scat, .slog-detail .slog-v .sbin { vertical-align: baseline; }

  /* fields popover */
  .sf-wrap { position: relative; }
  .sf-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text-dim); font-size: 11.5px; }
  .sf-btn:hover, .sf-btn.is-on { color: var(--text); }
  .sf-btn.is-on { background: var(--panel-3); }
  .sf-backdrop { position: fixed; inset: 0; z-index: 40; }
  .sfields-pop { position: absolute; right: 0; top: 34px; z-index: 41; width: 466px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 16px 44px rgba(0,0,0,.55); padding: 6px; }
  .sfields-head { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 10px 7px; font-size: 12px; font-weight: 600; color: var(--text); }
  .sfields-head .mono { font-size: 10.5px; font-weight: 400; color: var(--text-faint); }
  .sfields-row { display: grid; grid-template-columns: 20px minmax(0,1fr) 58px 14px 96px 44px; align-items: center; gap: 9px; padding: 5px 10px; border-radius: 6px; }
  .sf-pin { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 5px; color: var(--text-faint); cursor: pointer; padding: 0; transition: color .12s, background .12s; }
  .sf-pin:hover:not(:disabled) { background: var(--panel-3); color: var(--text-dim); }
  .sf-pin.is-on { color: var(--accent); }
  .sf-pin:disabled { opacity: .28; cursor: default; }
  .sfields-row:hover { background: rgba(255,255,255,.03); }
  .sf-name { font-size: 11.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sf-type { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }
  .sf-arrow { color: var(--text-faint); display: flex; }
  .sf-sel { height: 24px; width: 100%; border-radius: 6px; background: var(--panel-3); border: 1px solid var(--border-strong); color: var(--text-dim); font-family: var(--mono); font-size: 10.5px; padding: 0 4px; cursor: pointer; }
  .sf-sel:hover { color: var(--text); }
  .sf-src { font-size: 9px; font-family: var(--mono); font-weight: 600; letter-spacing: .4px; text-align: center; padding: 2px 0; border-radius: 4px; }
  .sf-src.type { color: #4a9fe8; background: rgba(74,159,232,.13); }
  .sf-src.value { color: var(--accent); background: var(--accent-soft); }
  .sf-src.convention { color: var(--warn); background: rgba(217,138,60,.14); }
  .sf-src.user { color: var(--tok-kw); background: rgba(155,140,240,.16); }
  .sfields-note { padding: 10px; margin: 4px 4px 2px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 10.5px; line-height: 1.55; }
  .sfields-note b { color: var(--text-dim); font-weight: 600; }
  .sfields-note .mono { color: var(--text-dim); }

  /* table header role pill */
  .mtbl th .sf-role { display: inline-block; margin-left: 7px; font-family: var(--mono); font-size: 8.5px; font-weight: 500; letter-spacing: .3px; text-transform: none; color: var(--text-faint); border: 1px solid var(--border); border-radius: 4px; padding: 1px 4px; vertical-align: middle; }
  .mtbl th.num .sf-role { margin-left: 5px; }

  /* ============ STREAM RESULT VIEW (toolbar + view switcher) ============ */
  .sr-toolbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.012); }
  .sr-count { font-size: 12.5px; color: var(--text-faint); }
  .sr-tool-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .sr-view-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 8px; }
  .sr-view-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: none; background: transparent; color: var(--text-dim); border-radius: 6px; font-size: 12px; font-weight: 500; transition: all .13s; }
  .sr-view-btn:hover:not(:disabled) { color: var(--text); }
  .sr-view-btn.is-on { background: var(--accent-soft); color: var(--accent); }
  .sr-view-btn:disabled { opacity: .4; cursor: not-allowed; }

  /* Tag rendering popover fine-tuning */
  .sf-btn svg { color: var(--text-faint); }

  /* ============ TRACE RESULT VIEW (span inspector) ============ */
  .layer-tag { font-size: 9.5px; padding: 1px 6px; border-radius: 4px; display: inline-block; white-space: nowrap; justify-self: start; }
  .tin { display: flex; flex-direction: column; font-size: 12.5px; max-height: 460px; overflow: auto; }
  .tin-colhead, .tin-main { display: grid; grid-template-columns: 22px 116px 120px 52px minmax(0,1fr); align-items: center; gap: 12px; }
  .tin-colhead { padding: 7px 16px; font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); border-bottom: 1px solid var(--border-strong); background: var(--panel-2); position: sticky; top: 0; z-index: 1; }
  .tin-colhead .num { text-align: right; }
  .tin-row { border-bottom: 1px solid var(--border); }
  .tin-row:last-child { border-bottom: none; }
  .tin-main { padding: 8px 16px; cursor: pointer; transition: background .12s; }
  .tin-row:hover .tin-main { background: rgba(255,255,255,.022); }
  .tin-row.is-open .tin-main { background: rgba(255,255,255,.03); }
  .tin-row.is-err .tin-main { box-shadow: inset 2px 0 0 var(--danger); }
  .tin-chev { color: var(--text-faint); font-size: 9px; }
  .tin-tid { color: var(--text-dim); font-size: 11.5px; }
  .tin-sid { color: var(--text-faint); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .tin-tid { color: var(--text-dim); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .tin-svc { display: flex; align-items: center; color: var(--text-dim); font-size: 12px; white-space: nowrap; }
  .tin-op { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .tin-status { font-size: 12px; }
  .tin-detail { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,0.85fr); gap: 24px; padding: 8px 16px 16px 50px; background: rgba(0,0,0,.2); }
  .tin-col-h { font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-faint); padding: 8px 0 9px; display: flex; gap: 8px; align-items: baseline; }
  .tin-col-h .faint { text-transform: none; letter-spacing: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tin-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; }
  .tin-tag { display: grid; grid-template-columns: minmax(92px,auto) 1fr; align-items: baseline; gap: 10px; padding: 4px 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; min-width: 0; }
  /* Key column is block-level: the type badge (TRACE ID / TIMESTAMP / …)
     stacks under the tag name, so the grid track sizes to the name alone and
     narrow cards keep the full value visible (e.g. start_time's 21:08:58.602). */
  .tin-k { font-size: 11px; color: var(--text-faint); display: block; line-height: 1.35; }
  .tin-k .tin-res { display: block; width: fit-content; margin-top: 2px; }
  .tin-res { font-size: 8px; font-weight: 600; letter-spacing: .3px; color: var(--text-dim); background: rgba(255,255,255,.08); padding: 1px 4px; border-radius: 3px; text-transform: uppercase; }
  .tin-res.is-trace { color: #e6a14a; background: rgba(230,161,74,.12); }
  .tin-res.is-span { color: #e6a14a; background: rgba(230,161,74,.12); }
  .tin-res.is-parent { color: #c9a14a; background: rgba(201,161,74,.12); }
  .tin-res.is-time { color: var(--info); background: rgba(86,194,214,.12); }
  .tin-v { font-size: 11px; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
  .tin-tag .tin-v .snum.dim,
  .tin-tag .tin-v .sid { white-space: nowrap; }
  /* Timestamps are the exception: break them onto a second line when the
     card is narrow — truncating a timestamp makes it useless, and the full
     ISO is one wrap away. Numerics keep the single-line ellipsis. */
  .tin-tag .tin-v .snum.dim:not(.snum-time) { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
  .tin-tag .tin-v .snum.dim.snum-time { white-space: normal; overflow-wrap: anywhere; }
  .tin-raw { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 1px; }
  .tin-raw-size { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 5px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-faint); font-family: var(--mono); font-size: 10.5px; vertical-align: middle; white-space: nowrap; cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
  .tin-raw-size:hover { color: var(--text-dim); border-color: var(--border-strong); }
  .tin-raw-size.is-open { color: var(--text); border-color: var(--border-strong); background: var(--panel-3); }
  .tin-raw-size svg { opacity: .7; }
  .tin-raw-empty { font-size: 11px; color: var(--text-faint); }
  .tin-note { display: flex; gap: 9px; margin-top: 11px; padding: 10px 12px; background: rgba(217,138,60,.07); border: 1px solid rgba(217,138,60,.22); border-radius: 8px; font-size: 11px; line-height: 1.5; color: var(--text-dim); }
  .tin-note-i { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; background: rgba(217,138,60,.2); color: var(--warn); font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
  .tin-note .mono { color: var(--text); }
  .tin-note-em { color: var(--warn); font-weight: 500; }

  /* span-bytes decoder */
  .td-btn.is-bound { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong)); background: var(--accent-soft); }
  .td-btn.is-bound:hover { color: var(--accent); }
  .td-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
  .td-raw-toggle { margin-left: auto; height: 20px; padding: 0 8px; border-radius: 5px; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text-dim); font-size: 10px; letter-spacing: .3px; text-transform: none; cursor: pointer; transition: all .13s; white-space: nowrap; flex-shrink: 0; align-self: center; }
  .td-raw-toggle:hover { color: var(--accent); border-color: var(--accent); }
  .td-decoded { margin-top: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-deep, rgba(0,0,0,.28)); overflow: hidden; }
  .td-code { margin: 0; padding: 10px 12px; max-height: 280px; overflow: auto; font-family: var(--mono); font-size: 11.5px; line-height: 1.55; color: var(--text-dim); white-space: pre; }
  .td-code .td-key { color: var(--accent); }
  .td-code .td-str { color: #7fb685; }
  .td-code .td-num { color: #d8a657; }
  .td-code .td-kw { color: #9b8cf0; }
  .td-plain { color: var(--text); }

  /* decoder modal */
  .td-modal { display: flex; flex-direction: column; gap: 16px; }
  .td-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 20px; border: 1.5px dashed var(--border-strong); border-radius: 12px; background: var(--panel-2); color: var(--text-faint); text-align: center; cursor: pointer; transition: all .15s; }
  .td-drop:hover, .td-drop.is-drag { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
  .td-drop-main { font-size: 13px; color: var(--text); }
  .td-drop-sub { font-size: 11.5px; color: var(--text-faint); }
  .td-err { padding: 9px 12px; border-radius: 8px; background: rgba(192,57,47,.1); border: 1px solid rgba(224,122,112,.4); color: var(--danger); font-size: 12.5px; }
  .td-summary { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  .td-summary-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 14px; background: rgba(255,255,255,.02); border-bottom: 1px solid var(--border); }
  .td-file { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
  .td-file svg { color: var(--ok); }
  .td-meta { margin-left: auto; font-size: 11.5px; color: var(--text-faint); }
  .td-root { color: var(--accent); }
  .td-fields-h { padding: 9px 14px 4px; font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--text-faint); }
  .td-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; padding: 0 14px 12px; }
  .td-field { display: flex; align-items: baseline; gap: 7px; font-size: 11.5px; padding: 2px 0; }
  .td-field-type { color: #9b8cf0; flex-shrink: 0; }
  .td-field-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .td-field-num { color: var(--text-faint); margin-left: auto; flex-shrink: 0; }
  .td-field-more { grid-column: 1 / -1; font-size: 11px; color: var(--text-faint); padding-top: 4px; }
  .td-note { margin: 0; font-size: 12px; line-height: 1.55; color: var(--text-dim); }
  .td-note .mono, .td-summary .mono { color: var(--text); }
  .td-remove { color: var(--danger); }
  .td-remove svg { color: var(--danger); }
  .is-compact .page-title { font-size: 23px; }
  .is-compact .btn { height: 34px; }

  /* ============ BUTTONS (danger) ============ */
  .btn-danger { background: #b8492f; border-color: transparent; color: #fff; box-shadow: 0 2px 12px rgba(184,73,47,.32); }
  .btn-danger:hover { filter: brightness(1.08); }
  .btn-danger:disabled { background: var(--panel-2); color: var(--text-faint); box-shadow: none; cursor: not-allowed; border-color: var(--border); }
  .btn-danger-ghost { background: transparent; border-color: var(--border-strong); color: var(--danger); }
  .btn-danger-ghost:hover { background: rgba(207,107,82,.12); border-color: rgba(207,107,82,.5); color: #e8957c; }

  /* ============ GROUP DETAIL TOOLBAR ============ */
  .res-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
  .res-count { font-family: var(--sans); font-size: 12.5px; color: var(--text-faint); white-space: nowrap; }

  /* ============ MODAL ============ */
  .modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(4,6,9,.66); backdrop-filter: blur(3px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 6vh 20px; overflow-y: auto;
    animation: ovIn .16s ease;
  }
  @keyframes ovIn { from { opacity: 0; } to { opacity: 1; } }
  .modal {
    width: 100%; max-width: 480px;
    background: var(--panel); border: 1px solid var(--border-strong);
    border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.6);
    animation: modIn .2s cubic-bezier(.2,.7,.3,1);
    display: flex; flex-direction: column; max-height: 88vh;
  }
  .modal.is-wide { max-width: 620px; }
  .modal.is-danger { max-width: 460px; }
  @keyframes modIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
  .modal-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 22px 24px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  .modal-title { font-size: 19px; font-weight: 600; letter-spacing: -.3px; margin: 0; }
  .modal-sub { margin: 7px 0 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; }
  .modal-x {
    position: relative; width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 7px; border: 1px solid var(--border);
    background: transparent; color: var(--text-dim); font-size: 0;
    transition: all .14s; cursor: pointer;
  }
  /* × glyph drawn from two crossed pseudo-elements so we don't have to
     change the JSX in 16+ modal sites. The 1px diagonal lines sit on top
     of the empty 30×30 box. */
  .modal-x::before, .modal-x::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 13px; height: 1.5px; border-radius: 1px;
    background: currentColor; transform-origin: center;
  }
  .modal-x::before { transform: translate(-50%, -50%) rotate(45deg); }
  .modal-x::after  { transform: translate(-50%, -50%) rotate(-45deg); }
  .modal-x:hover { background: rgba(255,255,255,.05); color: var(--text); border-color: var(--border-strong); }
  .modal-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .modal-body { padding: 20px 24px; overflow-y: auto; }
  .modal-foot { display: flex; justify-content: flex-end; gap: 10px;
    padding: 16px 24px; border-top: 1px solid var(--border); flex-shrink: 0; }

  /* ============ SPAN BYTES DECODER MODAL ============ */
  .tdm-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 28px 24px;
    border: 1.5px dashed var(--border-strong); border-radius: 12px;
    background: rgba(255,255,255,.02); cursor: pointer;
    transition: border-color .14s, background .14s;
    text-align: center;
  }
  .tdm-drop:hover, .tdm-drop.is-dragover {
    border-color: var(--accent);
    background: rgba(255,255,255,.04);
  }
  .tdm-drop.has-file { border-style: solid; border-color: var(--accent); }
  .tdm-drop-icon {
    font-family: var(--mono); font-size: 26px; color: var(--text-dim);
    line-height: 1; margin-bottom: 2px;
  }
  .tdm-drop-text { font-size: 14px; color: var(--text); font-weight: 500; }
  .tdm-drop-sub { font-size: 12px; color: var(--text-faint); line-height: 1.45; }
  .tdm-note {
    margin: 18px 0 0; font-size: 13px; color: var(--text-dim); line-height: 1.6;
  }

  /* ============ FORM ============ */
  .f-section { margin-bottom: 22px; }
  .f-section:last-child { margin-bottom: 0; }
  .f-section-title {
    font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .6px;
    text-transform: uppercase; color: var(--text-dim); white-space: nowrap;
    padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
  }
  .f-optional { font-family: var(--sans); font-size: 10.5px; letter-spacing: .3px; text-transform: none;
    color: var(--text-faint); background: rgba(255,255,255,.05); padding: 2px 7px; border-radius: 20px; font-weight: 500; }
  .f-section-desc { margin: -8px 0 14px; font-size: 12.5px; color: var(--text-dim); }

  .f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  @media (max-width: 540px) { .f-grid { grid-template-columns: 1fr; } }

  .f-field { display: flex; flex-direction: column; min-width: 0; }
  .f-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--text-dim); margin-bottom: 7px; }
  .f-req { color: var(--accent); }
  .f-lock { font-family: var(--mono); font-size: 10px; letter-spacing: .3px; text-transform: uppercase;
    color: var(--text-faint); border: 1px solid var(--border); padding: 1px 6px; border-radius: 5px; margin-left: auto; }
  .f-input {
    width: 100%; height: 38px; padding: 0 12px;
    background: var(--bg-app); border: 1px solid var(--border-strong); border-radius: 8px;
    color: var(--text); font-family: var(--sans); font-size: 13.5px; outline: none;
    transition: border-color .14s, box-shadow .14s;
  }
  .f-input.mono { font-family: var(--mono); }
  .f-input::placeholder { color: var(--text-faint); }
  .f-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .f-input:disabled { color: var(--text-dim); background: rgba(255,255,255,.02); cursor: not-allowed; }
  .has-error .f-input { border-color: #d9645a; }
  .has-error .f-input:focus { box-shadow: 0 0 0 3px rgba(217,100,90,.18); }
  .f-hint { font-size: 11.5px; color: var(--text-faint); margin-top: 6px; line-height: 1.4; }
  .f-error { font-size: 11.5px; color: #e98c83; margin-top: 6px; }

  /* segmented control */
  .f-seg { display: inline-flex; background: var(--bg-app); border: 1px solid var(--border-strong); border-radius: 8px; padding: 3px; gap: 3px; }
  .cat-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .seg-btn {
    flex: 1; height: 30px; padding: 0 12px; border: none; background: transparent;
    color: var(--text-dim); border-radius: 6px; font-family: var(--mono); font-size: 11.5px; font-weight: 500;
    letter-spacing: .3px; transition: all .13s; white-space: nowrap;
  }
  .seg-btn:hover:not(:disabled) { color: var(--text); }
  .seg-btn.is-on { background: var(--accent); color: #fff; }
  .seg-btn:disabled { cursor: not-allowed; opacity: .55; }
  .seg-btn.is-on:disabled { opacity: 1; background: var(--accent-soft); color: var(--accent); }

  .iv-row { display: flex; gap: 10px; align-items: stretch; }
  .iv-num { width: 80px; flex-shrink: 0; }
  .iv-row .f-seg { flex: 1; }

  .f-check { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-dim); margin-top: 14px; cursor: pointer; }
  .f-check input { width: 15px; height: 15px; accent-color: var(--accent); }

  /* lifecycle stages */
  .stages { display: flex; flex-direction: column; gap: 12px; }
  .stage-card { border: 1px solid var(--border); border-radius: 11px; padding: 16px; background: var(--bg-app); }
  .stage-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .stage-idx { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text-dim); }
  .stage-del { border: none; background: transparent; color: var(--danger); font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 6px; }
  .stage-del:hover { background: rgba(207,107,82,.12); }
  .stage-card .f-input { background: var(--panel); }
  .stage-card .f-seg { background: var(--panel); }
  .stage-add { width: 100%; justify-content: center; }

  /* delete confirm */
  .del-warn { font-size: 13.5px; color: var(--text-dim); line-height: 1.6; margin: 0 0 20px; }
  .del-warn b { color: var(--text); }
  .del-warn .mono { font-family: var(--mono); color: #f0a59c; }
  .modal.is-danger .f-label .mono { font-family: var(--mono); color: #f0a59c; }

  /* ============ TOAST ============ */
  .toast {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
    z-index: 300; display: flex; align-items: center; gap: 11px;
    padding: 13px 18px; border-radius: 11px;
    background: var(--panel-2); border: 1px solid var(--border-strong);
    box-shadow: 0 18px 48px rgba(0,0,0,.5);
    font-size: 13.5px; color: var(--text); font-weight: 500;
    animation: toastIn .26s cubic-bezier(.2,.7,.3,1);
  }
  @keyframes toastIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
  .toast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex-shrink: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 16%, transparent); }
  .toast-danger .toast-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(207,107,82,.16); }
  .toast-undo {
    margin-left: 6px; height: 26px; padding: 0 11px; border-radius: 7px;
    border: 1px solid var(--border-strong); background: transparent; color: var(--text);
    font-size: 12px; font-weight: 600; cursor: pointer; transition: all .14s; flex-shrink: 0;
  }
  .toast-undo:hover { border-color: var(--accent); color: var(--accent); }

  /* sidebar chevron — a real focusable control beside the row, not nested in it */
  .nav-rowline { position: relative; display: flex; }
  .nav-rowline .nav-row { flex: 1; min-width: 0; }
  .nav-chev-btn {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; display: grid; place-items: center; padding: 0;
    border: none; border-radius: 6px; background: transparent;
    color: var(--text-faint); cursor: pointer; transition: background .14s, color .14s;
  }
  .nav-chev-btn:hover { background: rgba(255,255,255,.07); color: var(--text); }
  .nav-chev-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .is-collapsed .nav-chev-btn { display: none; }

  /* modal: unsaved-changes confirm overlay */
  .modal { position: relative; }
  .modal-confirm {
    position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
    background: rgba(4,6,9,.6); border-radius: 16px; animation: ovIn .14s ease;
  }
  .modal-confirm-card {
    width: min(340px, 88%); background: var(--panel-2); border: 1px solid var(--border-strong);
    border-radius: 12px; padding: 20px; box-shadow: 0 18px 48px rgba(0,0,0,.5);
  }
  .modal-confirm-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
  .modal-confirm-text { margin: 0 0 16px; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
  .modal-confirm-btns { display: flex; justify-content: flex-end; gap: 10px; }

  /* query console: post-run view-density bar */
  .qb-viewbar {
    display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 5px 14px;
    border-bottom: 1px solid var(--border); font-size: 11.5px; color: var(--text-faint);
    background: rgba(0,0,0,.12);
  }
  .qb-viewbar button {
    margin-left: auto; border: none; background: transparent; color: var(--accent);
    font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 4px 7px; border-radius: 6px; flex-shrink: 0;
  }
  .qb-viewbar button:hover { background: var(--accent-soft); }

  /* ============ RESOURCE TABLE (rows clickable + per-row actions) ============ */
  .res-toolbar-right { display: flex; align-items: center; gap: 14px; }
  .res-toolbar-right .btn { height: 38px; }
  .res-head, .res-row {
    grid-template-columns: minmax(0, 3fr) 92px minmax(0, 1.2fr) minmax(0, 1.2fr) 72px;
  }
  .res-row { cursor: pointer; }
  .res-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .rc-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
  .rc-act {
    width: 30px; height: 30px; display: grid; place-items: center;
    border: 1px solid transparent; background: transparent; color: var(--text-faint);
    border-radius: 7px; transition: all .14s; opacity: .5;
  }
  .res-row:hover .rc-act, .res-row:focus-within .rc-act { opacity: 1; }
  .rc-act:hover { background: rgba(255,255,255,.06); color: var(--text); border-color: var(--border); }
  .rc-act.is-danger:hover { background: rgba(192,57,47,.14); color: #f0a59c; border-color: rgba(224,122,112,.4); }
  @media (max-width: 760px) {
    .res-head, .res-row { grid-template-columns: 1fr auto; }
    .rc-act { opacity: 1; }
  }

  /* ============ SELECT (form) ============ */
  .f-select-wrap { position: relative; }
  .f-select {
    appearance: none; -webkit-appearance: none;
    padding-right: 30px; cursor: pointer; width: 100%;
  }
  .f-select-chev { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
  .f-select option { background: var(--panel-2); color: var(--text); }

  /* ============ SPEC EDITORS (tags / fields) ============ */
  .spec-list { display: flex; flex-direction: column; gap: 8px; }
  .spec-row, .field-row { display: grid; align-items: start; gap: 8px; }
  .spec-row { grid-template-columns: 1fr 132px 32px; }
  .field-row { grid-template-columns: 1fr 116px 116px 116px 32px; }
  @media (max-width: 560px) {
    .field-row { grid-template-columns: 1fr 1fr 32px; }
  }
  .spec-cell { min-width: 0; }
  .spec-cell.grow { min-width: 0; }
  .spec-cell.type .f-select { width: 100%; }
  .spec-cell .f-input { height: 36px; }
  .spec-del {
    width: 32px; height: 36px; display: grid; place-items: center; align-self: start;
    border: 1px solid var(--border); background: transparent; color: var(--text-faint);
    border-radius: 7px; transition: all .14s;
  }
  .spec-del:hover { color: #f0a59c; border-color: rgba(224,122,112,.4); background: rgba(192,57,47,.1); }
  .spec-add {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
    margin-top: 2px; padding: 7px 11px; border: 1px dashed var(--border-strong); background: transparent;
    color: var(--text-dim); border-radius: 8px; font-family: var(--mono); font-size: 12px; font-weight: 500;
    transition: all .14s;
  }
  .spec-add:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }

  /* tag families */
  .fam-list { display: flex; flex-direction: column; gap: 12px; }
  .fam-card { border: 1px solid var(--border); border-radius: 11px; padding: 14px; background: var(--bg-app); }
  .fam-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
  .fam-name { flex: 1; min-width: 0; }
  .fam-name .f-input { height: 36px; font-weight: 600; }
  .fam-del { flex-shrink: 0; border: none; background: transparent; color: var(--danger); font-size: 12px; font-weight: 500; padding: 8px 8px 0 0; }
  .fam-del:hover { color: #e8957c; text-decoration: underline; }
  .fam-card .f-input { background: var(--panel); }

  /* tag-name picker (entity / sharding key) */
  .picker { display: flex; flex-direction: column; gap: 10px; }
  .picker-empty { font-size: 12.5px; color: var(--text-faint); font-style: italic; padding: 4px 0; }
  .picker-selected, .picker-avail { display: flex; flex-wrap: wrap; gap: 7px; }
  .picker-avail { padding-top: 2px; border-top: 1px dashed var(--border); }
  .picker-all { font-size: 12px; color: var(--text-faint); padding: 4px 0; }
  .picker-chip {
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
    height: 30px; padding: 0 11px; border-radius: 7px;
    border: 1px solid var(--border-strong); background: var(--bg-app);
    color: var(--text-dim); font-family: var(--mono); font-size: 12px; transition: all .14s;
  }
  .picker-chip:hover { color: var(--text); border-color: var(--accent); }
  .picker-chip.is-on { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
  .picker-ord {
    display: grid; place-items: center; width: 16px; height: 16px; border-radius: 5px;
    background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
  }

  /* ============ COMBOBOX (fuzzy-search select) ============ */
  .f-combo { position: relative; }
  .f-combo-inputwrap { position: relative; }
  .f-combo-input {
    width: 100%; padding-right: 28px;
    font-family: var(--mono);
  }
  .f-combo-chev {
    position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
    color: var(--text-faint); pointer-events: none;
  }
  .f-combo-chips {
    display: flex; flex-wrap: wrap; gap: 7px;
    margin-bottom: 8px;
  }
  .f-combo-chip { /* alias of .picker-chip.is-on; explicit class for clarity */
  }
  .f-combo-pop {
    position: fixed;
    background: var(--panel-2);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,.45);
    max-height: 280px; overflow-y: auto;
    z-index: 1000;
  }
  .f-combo-list { list-style: none; margin: 0; padding: 4px; }
  .f-combo-option {
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    display: flex; align-items: center; gap: 4px;
    font-family: var(--mono);
  }
  .f-combo-option:hover { background: var(--bg-app); }
  .f-combo-option.is-highlight {
    background: var(--accent-soft);
    color: var(--accent);
  }
  .f-combo-option.is-selected { font-weight: 600; }
  .f-combo-empty {
    padding: 14px 12px;
    color: var(--text-faint);
    font-style: italic;
    font-size: 12.5px;
    text-align: center;
  }
  .f-combo-hl {
    background: transparent;
    color: var(--accent);
    font-weight: 700;
    padding: 0;
  }

  /* Read-only "Never expires" indicator rendered in place of the Expire-at
     input. Sized to match .f-input but visually distinct so the user can tell
     at a glance that no date applies here. */
  .f-never-expires {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    color: var(--accent);
    font-family: var(--mono);
    font-size: 12.5px;
    cursor: default;
    user-select: none;
  }
  .f-never-expires .never-icon {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
  }

  /* ============ RESOURCE DETAIL ============ */
  .detail-block { margin-bottom: 20px; }
  .detail-h {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: .1px;
    color: var(--text); margin-bottom: 11px;
  }
  .detail-h svg { color: var(--text-faint); }
  .detail-h .mono { color: var(--text); }

  .spec-table { border: 1px solid var(--border); border-radius: 11px; overflow: hidden; background: var(--panel); }
  .spec-thead, .spec-trow { display: grid; grid-template-columns: minmax(0,1.6fr) 120px minmax(0,1.6fr); gap: 14px; padding: 0 16px; align-items: center; }
  .spec-table.cols-4 .spec-thead, .spec-table.cols-4 .spec-trow {
    grid-template-columns: minmax(0,1.1fr) 100px minmax(0,0.65fr) minmax(0,2.1fr);
  }
  .spec-thead {
    height: 38px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.012);
    font-family: var(--sans); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .55px; color: var(--text-faint);
  }
  .spec-trow { height: 44px; border-bottom: 1px solid var(--border); font-size: 13px; }
  .spec-table.cols-4 .spec-trow { height: auto; min-height: 46px; padding-top: 7px; padding-bottom: 7px; }
  .spec-trow:last-child { border-bottom: none; }
  .spec-trow .mono { font-family: var(--mono); font-size: 12.5px; }
  .spec-trow .dim { color: var(--text-faint); }
  .type-pill {
    font-family: var(--mono); font-size: 11px; color: var(--text-dim);
    background: var(--panel-2); border: 1px solid var(--border); padding: 2px 8px; border-radius: 5px;
  }
  .role-cell { display: flex; gap: 6px; flex-wrap: wrap; }
  .role-tag {
    font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .3px;
    padding: 2px 7px; border-radius: 5px;
  }
  .role-tag.is-entity { color: var(--accent); background: var(--accent-soft); }
  .role-tag.is-shard { color: #d98a3c; background: rgba(217,138,60,.12); }
  .role-tag.is-reserved { color: #7c6cf0; background: rgba(124,108,240,.14); }

  .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip-row .dim { color: var(--text-faint); }
  .ord-chip {
    display: inline-flex; align-items: center; gap: 7px;
    height: 32px; padding: 0 12px; border-radius: 8px;
    border: 1px solid var(--border-strong); background: var(--panel);
    font-family: var(--mono); font-size: 12.5px; color: var(--text);
  }

  /* ============ PROPERTY (schema-free group/name/id) ============ */
  .prop-note, .key-banner {
    display: flex; align-items: center; gap: 9px;
    border: 1px solid var(--border); background: var(--bg-app);
    border-radius: 10px; padding: 11px 14px; color: var(--text-dim); font-size: 12.5px;
  }
  .prop-note { margin-top: 4px; }
  .prop-note svg, .key-banner svg { color: var(--accent); flex-shrink: 0; }
  .prop-note .mono, .key-banner .mono { color: var(--text); }

  .key-banner { margin-bottom: 18px; }  .key-banner-text { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
  .key-sep { color: var(--text-faint); }
  .key-id { color: var(--accent); }
  .key-banner-note { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
  @media (max-width: 620px) { .key-banner-note { display: none; } }

  /* property document key picker (id within group/name) */
  .prop-key-grid { display: flex; align-items: flex-end; gap: 10px; }
  .prop-key-grid .f-field { flex: 1; min-width: 0; }
  .prop-key-sep { font-family: var(--mono); font-size: 18px; color: var(--text-faint); padding-bottom: 9px; }
  @media (max-width: 560px) {
    .prop-key-grid { flex-direction: column; align-items: stretch; }
    .prop-key-sep { display: none; }
  }

  /* key-value tag editor row (id-level document) */
  .kv-row { display: grid; grid-template-columns: minmax(0,1fr) 116px minmax(0,1.3fr) 32px; gap: 8px; align-items: start; }
  .kv-row .f-input { height: 36px; }
  @media (max-width: 560px) { .kv-row { grid-template-columns: 1fr 1fr 32px; } }

  /* document cards */
  .doc-list { display: flex; flex-direction: column; gap: 12px; }
  .doc-card { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); overflow: hidden; }
  .doc-head {
    display: flex; align-items: center; gap: 12px; padding: 13px 16px;
    border-bottom: 1px solid var(--border); background: rgba(255,255,255,.012);
  }
  .doc-id { min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .doc-id-key { color: var(--text-faint); }
  .doc-id-val { color: var(--text); font-weight: 600; }
  .doc-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
  /* document-card actions are always visible (cards aren't a hover-row) */
  .doc-actions .rc-act { opacity: 1; border-color: var(--border); }
  .doc-card:hover .doc-actions .rc-act { border-color: var(--border-strong); }
  .doc-tagcount { font-family: var(--mono); font-size: 11px; color: var(--text-faint); margin-right: 6px; }
  .doc-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; }
  .doc-tags .dim { color: var(--text-faint); font-size: 12.5px; font-style: italic; }
  .kv-chip {
    display: inline-flex; align-items: stretch; border: 1px solid var(--border-strong);
    border-radius: 7px; overflow: hidden; font-family: var(--mono); font-size: 12px;
  }
  .kv-k { padding: 4px 9px; background: var(--accent-soft); color: var(--accent); font-weight: 600; white-space: nowrap; }
  .kv-type { padding: 4px 7px; background: var(--panel-2); color: var(--text-faint); font-size: 10px; display: inline-flex; align-items: center; border-left: 1px solid var(--border); white-space: nowrap; }
  .kv-v { padding: 4px 10px; color: var(--text); background: var(--bg-app); border-left: 1px solid var(--border); white-space: nowrap; }

  /* long string values open in the code viewer */
  .kv-chip.is-long { align-items: stretch; }
  .kv-view {
    display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
    padding: 4px 10px; background: var(--bg-app); color: var(--text-dim);
    border-left: 1px solid var(--border); font-family: var(--mono); font-size: 12px; transition: color .14s, background .14s;
  }
  .kv-view:hover { color: var(--text); background: rgba(255,255,255,.03); }
  .kv-view svg { color: var(--accent); flex-shrink: 0; }
  .kv-v-preview { color: var(--text-dim); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kv-view:hover .kv-v-preview { color: var(--text); }

  /* ---- field rows (option A): one row per tag, adaptive value cells ---- */
  .fr-rows { display: flex; flex-direction: column; }
  .fr-row { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.045); }
  .fr-row:last-child { border-bottom: none; }
  .fr-keycol { display: flex; align-items: baseline; align-content: flex-start; gap: 7px; row-gap: 4px; flex-wrap: wrap; min-width: 0; padding-top: 2px; }
  .fr-key { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--tok-key); flex-shrink: 0; }
  .fr-val { min-width: 0; font-size: 13px; color: var(--text); align-self: center; }
  .fr-val .mono { font-size: 12.5px; }
  .fr-val-int { color: var(--tok-num); font-family: var(--mono); }

  /* stored-type pill + detection badge (detection is presentation, not schema) */
  .pd-type {
    font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .4px;
    color: var(--text-faint); border: 1px solid var(--border); border-radius: 5px;
    padding: 1px 6px; white-space: nowrap; flex-shrink: 0;
  }
  .pd-type.is-int { color: var(--tok-num); border-color: rgba(86,194,214,.3); }
  .pd-det {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .3px;
    border-radius: 5px; padding: 1px 6px; white-space: nowrap; flex-shrink: 0;
    border: 1px dashed rgba(127,194,150,.35); color: var(--tok-key); background: rgba(127,194,150,.06);
  }
  .pd-det.is-text { border-color: rgba(217,138,60,.35); color: var(--warn); background: rgba(217,138,60,.06); }

  /* small controls inside value blocks */
  .pd-ibtn {
    display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px;
    border: 1px solid var(--border); border-radius: 6px; background: transparent;
    color: var(--text-faint); font-family: var(--mono); font-size: 10.5px; transition: all .13s;
  }
  .pd-ibtn:hover { color: var(--text); border-color: var(--border-strong); }
  .pd-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; flex-shrink: 0; }
  .pd-seg button { height: 20px; padding: 0 8px; border: none; background: transparent; color: var(--text-faint); font-family: var(--mono); font-size: 10px; }
  .pd-seg button.is-on { background: var(--accent-soft); color: var(--accent); }
  .pd-meta { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }
  .pd-gap { flex: 1; }

  /* highlighted code lines */
  .pd-code { font-family: var(--mono); font-size: 12px; line-height: 1.65; margin: 0; overflow-x: auto; }
  .pd-code .ln { display: flex; min-width: 0; }
  .pd-code .ln-n { width: 34px; flex-shrink: 0; text-align: right; padding-right: 14px; color: var(--text-faint); opacity: .55; user-select: none; }
  .pd-code .ln-c { white-space: pre; }
  .tok-key { color: var(--tok-key); }
  .tok-str { color: var(--tok-str); }
  .tok-num { color: var(--tok-num); }
  .tok-kw { color: var(--tok-kw); }
  .tok-punc { color: var(--text-dim); }

  /* embedded code block in a field row */
  .fr-block { border: 1px solid var(--border); border-radius: 9px; background: rgba(0,0,0,.22); overflow: hidden; }
  .fr-block-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; row-gap: 5px; min-height: 30px; padding: 4px 10px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.015); }
  .fr-block-bar .pd-meta { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .fr-block-body { padding: 8px 12px 10px 4px; }
  .fr-block.is-collapsed .fr-block-body { max-height: 76px; overflow: hidden; position: relative; }
  .fr-block.is-collapsed .fr-block-body::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38px; background: linear-gradient(transparent, var(--panel)); }

  /* prose value */
  .fr-prose { font-size: 13px; line-height: 1.6; color: var(--text-dim); max-width: 70ch; }
  .fr-prose.is-clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .fr-more { background: none; border: none; padding: 0; margin-top: 3px; color: var(--accent); font-size: 12px; }
  .fr-more:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* pager under the document list */
  .doc-pager {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
    font-size: 11.5px; color: var(--text-faint);
  }
  .doc-pager-btns { display: flex; align-items: center; gap: 8px; }
  .doc-pager-page { color: var(--text-dim); font-size: 11.5px; }

  /* property tag editor: per-tag code toggle + inline editor */
  .kv-item { display: flex; flex-direction: column; gap: 8px; }
  .kv-valuecell { display: flex; align-items: flex-start; gap: 6px; }
  .kv-valuecell .f-input { flex: 1; min-width: 0; }
  .kv-codehint {
    flex: 1; display: inline-flex; align-items: center; height: 36px; padding: 0 12px;
    border: 1px dashed var(--border-strong); border-radius: 8px;
    color: var(--text-faint); font-size: 11.5px; background: rgba(255,255,255,.015);
  }
  .kv-code-toggle {
    flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center;
    border: 1px solid var(--border-strong); background: var(--panel); color: var(--text-faint);
    border-radius: 8px; transition: all .14s;
  }
  .kv-code-toggle:hover { color: var(--text); border-color: var(--accent); }
  .kv-code-toggle.is-on { color: var(--accent); border-color: transparent; background: var(--accent-soft); }
  .kv-code { padding-left: 0; }

  /* ============ CODE AREA (editor) + VIEWER ============ */
  .ca, .cv { border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; background: var(--bg-code); }
  .ca-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    height: 36px; padding: 0 10px 0 12px; background: var(--panel);
    border-bottom: 1px solid var(--border);
  }
  .ca-lang { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; }
  .ca-lang svg { color: var(--text-faint); }
  .ca-lang.is-bad { color: #e98c83; }
  .ca-ok { font-size: 10px; color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); padding: 1px 6px; border-radius: 5px; letter-spacing: .2px; }
  .ca-err { font-size: 10px; color: #e98c83; background: rgba(217,100,90,.14); padding: 1px 6px; border-radius: 5px; letter-spacing: .2px; }
  .ca-tools { display: flex; align-items: center; gap: 6px; }
  .ca-tool {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
    border: 1px solid var(--border-strong); background: var(--bg-app); color: var(--text-dim);
    border-radius: 6px; font-family: var(--mono); font-size: 11px; transition: all .14s;
  }
  .ca-tool:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
  .ca-tool:disabled { opacity: .4; cursor: not-allowed; }
  .ca-tool svg { color: var(--text-faint); }

  /* overlay highlight layer behind a transparent textarea */
  .ca-edit { position: relative; min-height: 120px; }
  .ca-pre, .ca-ta {
    margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
    padding: 14px 16px; tab-size: 2; border: 0;
    letter-spacing: 0; word-spacing: 0;
  }
  .ca-pre {
    position: absolute; inset: 0; pointer-events: none; color: #cdd6e0;
    overflow: hidden; white-space: pre; z-index: 0;
  }
  .ca-ta {
    position: relative; z-index: 1; display: block; width: 100%; min-height: inherit;
    outline: none; resize: vertical; background: transparent; white-space: pre; overflow: auto;
    color: transparent; caret-color: #cdd6e0;
  }
  .ca-ta::placeholder { color: var(--text-faint); }
  .ca-ta::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

  .cv-pre {
    margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
    padding: 16px 18px; tab-size: 2; white-space: pre-wrap; word-break: break-word;
    color: #cdd6e0; max-height: 460px; overflow: auto;
  }

  /* tag → index-rule links (resource detail) */
  .tag-idx-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .tag-noidx { color: var(--text-faint); font-size: 12px; font-style: italic; }
  .tag-idx-chip {
    display: inline-flex; align-items: center; gap: 5px;
    height: 24px; padding: 0 9px; border-radius: 6px;
    border: 1px solid var(--border-strong); background: var(--bg-app);
    color: var(--text-dim); font-size: 11.5px; transition: all .14s; flex: 0 0 auto;
  }
  .tag-idx-chip .mono { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
  .tag-idx-name { white-space: nowrap; }
  /* a rule chip + the indexed tag chip, grouped */
  .tag-idx-pair { display: inline-flex; align-items: stretch; }
  .tag-idx-pair .tag-idx-chip {
    border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-width: 0;
  }
  .tag-idx-tagchip {
    display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
    border: 1px solid var(--border-strong); border-top-left-radius: 0; border-bottom-left-radius: 0;
    border-top-right-radius: 6px; border-bottom-right-radius: 6px;
    background: rgba(255,255,255,.025); color: var(--text-faint);
    font-family: var(--mono); font-size: 11.5px; white-space: nowrap; transition: all .14s;
  }
  /* highlight every chip pair that shares the hovered rule */
  .tag-idx-pair.is-hot .tag-idx-tagchip { color: var(--text); border-color: var(--text-faint); }
  .tag-idx-pair .tag-idx-chip.is-highlight {
    background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
  }
  .tag-idx-pair .tag-idx-chip.is-highlight svg { color: var(--accent); }
  .tag-idx-shared {
    flex-shrink: 0; font-family: var(--sans); font-size: 10px; font-weight: 600;
    line-height: 1; padding: 2px 4px; border-radius: 4px;
    background: rgba(255,255,255,.07); color: var(--text-faint);
  }
  .tag-idx-chip svg { flex-shrink: 0; opacity: .85; }
  .tag-idx-chip:hover { color: var(--text); }
  .tag-idx-chip.is-inv  { border-color: rgba(122,162,247,.0); }
  .tag-idx-chip.is-inv:hover  { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
  .tag-idx-chip.is-inv svg  { color: var(--accent); }
  .tag-idx-chip.is-skip svg { color: #d98a3c; }
  .tag-idx-chip.is-skip:hover { background: rgba(217,138,60,.12); border-color: rgba(217,138,60,.55); color: #e6b27a; }
  .tag-idx-chip.is-tree svg { color: #7c6cf0; }
  .tag-idx-chip.is-tree:hover { background: rgba(124,108,240,.13); border-color: rgba(124,108,240,.55); color: #a99bf5; }

  /* focus glow when arriving from a tag link */
  .idx-rule-row.is-focus { background: var(--accent-soft) !important; animation: idxFocusPulse 2.2s ease-out; }
  @keyframes idxFocusPulse {
    0% { box-shadow: inset 3px 0 0 var(--accent); }
    70% { box-shadow: inset 3px 0 0 var(--accent); }
    100% { box-shadow: inset 3px 0 0 transparent; }
  }

  /* JSON syntax tokens */
  .cj-key { color: #79b8ff; }
  .cj-str { color: #9ecbff; }
  .cj-num { color: #f8c555; }
  .cj-bool { color: #c792ea; }
  .cj-null { color: #c792ea; }

  /* ============ INDEX (rules + bindings) ============ */
  /* tabs */
  .idx-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
  .idx-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; margin-bottom: -1px;
    background: transparent; border: none; border-bottom: 2px solid transparent;
    color: var(--text-dim); font-size: 13.5px; font-weight: 500; transition: all .15s;
  }
  .idx-tab:hover { color: var(--text); }
  .idx-tab.is-active { color: var(--text); border-bottom-color: var(--accent); }
  .idx-tab svg { color: var(--text-faint); }
  .idx-tab.is-active svg { color: var(--accent); }
  .idx-tab-n {
    font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text-dim);
    background: rgba(255,255,255,.06); padding: 1px 7px; border-radius: 20px;
  }
  .idx-tab.is-active .idx-tab-n { background: var(--accent-soft); color: var(--accent); }

  /* binding filter segmented control */
  .idx-bind-toolbar { align-items: flex-start; }
  .idx-filter { display: inline-flex; gap: 4px; padding: 3px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
  .idx-filter-btn {
    position: relative; display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border: none; background: transparent; border-radius: 7px;
    color: var(--text-dim); font-size: 12.5px; font-weight: 500; transition: all .14s;
  }
  .idx-filter-btn:hover { color: var(--text); }
  .idx-filter-btn.is-on { background: var(--panel-3); color: var(--text); }
  .idx-filter-n { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
  .idx-filter-btn.is-on .idx-filter-n { color: var(--text-dim); }
  .idx-filter-warn { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 3px rgba(217,138,60,.18); }

  .idx-attention-note {
    display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px;
    padding: 11px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5;
    background: rgba(217,138,60,.08); border: 1px solid rgba(217,138,60,.25); color: #e6b27a;
  }
  .idx-attention-note svg { flex-shrink: 0; margin-top: 1px; color: var(--warn); }
  .idx-attention-note b { color: #f0c896; }
  .idx-attention-note .mono { font-family: var(--mono); font-size: 12px; }

  /* shared table shell */
  .idx-table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--panel); }
  .idx-rule-head, .idx-rule-row {
    display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1.7fr) 104px minmax(0,1.8fr) 96px;
    align-items: center; gap: 14px; padding: 0 18px;
  }
  .idx-bind-head, .idx-bind-row {
    display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1.4fr) minmax(0,1.5fr) 150px 96px 72px;
    align-items: center; gap: 14px; padding: 0 18px;
  }
  .idx-rule-head, .idx-bind-head {
    height: 42px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.012);
    font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--text-faint);
  }
  .idx-rule-row, .idx-bind-row {
    min-height: 58px; border-bottom: 1px solid var(--border); transition: background .13s; padding-top: 10px; padding-bottom: 10px;
  }
  .idx-rule-head > span, .idx-rule-row > span,
  .idx-bind-head > span, .idx-bind-row > span { min-width: 0; overflow: hidden; }
  .idx-rule-row > .idx-chiprow, .idx-bind-row > .idx-chiprow { overflow: visible; }
  .idx-rule-row:last-child, .idx-bind-row:last-child { border-bottom: none; }
  .idx-rule-row:hover, .idx-bind-row:hover { background: rgba(255,255,255,.022); }
  .idx-bind-row.is-attention { background: rgba(217,138,60,.045); }
  .idx-bind-row.is-attention:hover { background: rgba(217,138,60,.07); }
  .idx-actions-h { text-align: right; }

  .idx-name-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }
  .idx-ico { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 7px;
    background: var(--panel-2); border: 1px solid var(--border); color: var(--accent); }
  .idx-name-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .idx-name { font-family: var(--mono); font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .idx-name-cell > .idx-name { min-width: 0; }
  .idx-name-sub { display: flex; flex-wrap: wrap; gap: 8px; }
  .idx-opt { font-size: 11px; color: var(--text-faint); }
  .idx-opt b { color: var(--text-dim); font-weight: 600; }
  .idx-opt.is-flag { font-family: var(--mono); font-size: 10px; color: var(--text-dim); background: var(--panel-2);
    border: 1px solid var(--border); padding: 0 6px; border-radius: 5px; }

  .idx-chiprow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .idx-tag { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim);
    background: var(--panel-2); border: 1px solid var(--border); padding: 2px 8px; border-radius: 5px; }
  .idx-tag.is-missing { color: var(--danger); border-color: rgba(224,122,112,.35); background: rgba(192,57,47,.1);
    text-decoration: line-through; }
  .idx-multi { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--accent); }
  .idx-dim { color: var(--text-faint); font-style: italic; font-size: 12px; }

  /* index type badge */
  .idx-type-badge { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .3px;
    padding: 2px 8px; border-radius: 5px; text-transform: lowercase; }
  .idx-type-badge.is-inv  { color: var(--accent); background: var(--accent-soft); }
  .idx-type-badge.is-skip { color: #d98a3c; background: rgba(217,138,60,.13); }
  .idx-type-badge.is-tree { color: #7c6cf0; background: rgba(124,108,240,.14); }

  /* subject chip (links to resource) */
  .subj-chip {
    display: inline-flex; align-items: center; gap: 5px;
    height: 26px; padding: 0 9px; border-radius: 7px;
    border: 1px solid var(--border-strong); background: var(--bg-app);
    color: var(--text-dim); font-family: var(--mono); font-size: 11.5px; transition: all .14s; max-width: 100%;
  }
  button.subj-chip:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
  .subj-chip svg { flex-shrink: 0; opacity: .7; }
  .subj-chip.is-danger { color: var(--danger); border-color: rgba(224,122,112,.35); background: rgba(192,57,47,.08); }
  .subj-chip.is-warn { color: var(--warn); border-color: rgba(217,138,60,.35); }
  .idx-link-cta {
    display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px;
    border: 1px dashed var(--border-strong); background: transparent; border-radius: 7px;
    color: var(--text-faint); font-family: var(--mono); font-size: 11.5px; transition: all .14s;
  }
  .idx-link-cta:hover { color: var(--accent); border-color: var(--accent); }

  .idx-subj-cell { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
  .idx-subj-cat { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-faint); }

  /* validity window */
  .idx-window { display: flex; flex-direction: column; gap: 2px; }
  .idx-win-row { display: flex; align-items: center; gap: 7px; font-size: 12px; }
  .idx-win-k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-faint); width: 26px; }
  .idx-win-row .mono { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
  .idx-win-row.is-bad .mono { color: var(--danger); }

  /* status badge */
  .idx-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .2px; }
  .idx-status-dot { width: 7px; height: 7px; border-radius: 50%; }
  .idx-status.is-ok { color: var(--ok); }
  .idx-status.is-ok .idx-status-dot { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 16%, transparent); }
  .idx-status.is-danger { color: var(--danger); }
  .idx-status.is-danger .idx-status-dot { background: var(--danger); box-shadow: 0 0 0 3px rgba(224,122,112,.16); }
  .idx-status.is-warn { color: var(--warn); }
  .idx-status.is-warn .idx-status-dot { background: var(--warn); box-shadow: 0 0 0 3px rgba(217,138,60,.16); }

  .idx-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
  .idx-act {
    width: 30px; height: 30px; display: grid; place-items: center;
    border: 1px solid transparent; background: transparent; color: var(--text-faint);
    border-radius: 7px; transition: all .14s; opacity: 0;
  }
  .idx-rule-row:hover .idx-act, .idx-rule-row:focus-within .idx-act,
  .idx-bind-row:hover .idx-act, .idx-bind-row:focus-within .idx-act { opacity: 1; }
  .idx-act:hover { background: rgba(255,255,255,.06); color: var(--text); border-color: var(--border); }
  .idx-act.is-danger:hover { background: rgba(192,57,47,.14); color: #f0a59c; border-color: rgba(224,122,112,.4); }

  /* index-type choice cards (rule form) */
  .idx-type-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  @media (max-width: 620px) { .idx-type-choices { grid-template-columns: 1fr; } }
  .idx-type-card {
    text-align: left; display: flex; flex-direction: column; gap: 8px;
    padding: 13px 14px; border-radius: 11px; border: 1px solid var(--border);
    background: var(--bg-app); color: var(--text); transition: all .14s;
  }
  .idx-type-card:hover { border-color: var(--border-strong); background: var(--panel-2); }
  .idx-type-card.is-on { border-color: var(--accent); background: var(--accent-soft); }
  .idx-type-card-h { display: flex; align-items: center; justify-content: space-between; }
  .idx-type-card-h svg { color: var(--accent); }
  .idx-type-card-hint { font-size: 11.5px; color: var(--text-dim); line-height: 1.45; }

  .inline-add { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
  .inline-add .f-input { height: 30px; width: 130px; display: inline-block; }
  .btn-sm { height: 30px; padding: 0 10px; font-size: 12px; }

  .idx-inline-warn {
    display: flex; align-items: flex-start; gap: 8px; margin-top: 10px;
    padding: 9px 12px; border-radius: 9px; font-size: 12.5px; line-height: 1.5;
    background: rgba(217,138,60,.08); border: 1px solid rgba(217,138,60,.25); color: #e6b27a;
  }
  .idx-inline-warn svg { flex-shrink: 0; margin-top: 1px; color: var(--warn); }
  .idx-inline-warn b { color: #f0c896; }

  /* ============ PIPELINES overview ============ */
  .pipe-intro { margin-bottom: 20px; }
  .pipe-lead { font-size: 14.5px; line-height: 1.6; color: var(--text-dim); max-width: 70ch; }
  .pipe-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px;
  }
  @media (max-width: 820px) { .pipe-stats { grid-template-columns: 1fr; } }
  .pipe-stat {
    display: flex; flex-direction: column; gap: 4px;
    border: 1px solid var(--border); background: var(--panel); border-radius: 11px; padding: 16px 18px;
  }
  .pipe-stat-v { font-family: var(--mono); font-size: 28px; font-weight: 600; line-height: 1; color: var(--text); }
  .pipe-stat-k { font-size: 12px; color: var(--text-faint); }

  .pipe-kinds { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
  .pipe-kind {
    position: relative; text-align: left; width: 100%;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
    border: 1px solid var(--border-strong); background: var(--panel); border-radius: 13px;
    padding: 18px 20px; cursor: pointer; transition: border-color .16s, background .16s, transform .16s;
  }
  .pipe-kind:hover { border-color: var(--accent); background: var(--panel-2); transform: translateY(-1px); }
  .pipe-kind-ico {
    width: 46px; height: 46px; display: grid; place-items: center;
    border-radius: 11px; background: var(--accent-soft); color: var(--accent);
  }
  .pipe-kind-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .pipe-kind-name { font-size: 16px; font-weight: 600; color: var(--text); }
  .pipe-kind-desc { font-size: 13px; line-height: 1.55; color: var(--text-dim); max-width: 64ch; }
  .pipe-kind-stat { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
  .pipe-kind-go { color: var(--text-faint); transition: transform .16s, color .16s; }
  .pipe-kind:hover .pipe-kind-go { transform: translateX(3px); color: var(--accent); }

  .pipe-recent { display: flex; flex-direction: column; margin-top: 12px;
    border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
  .pipe-recent-row {
    display: flex; align-items: center; gap: 12px; text-align: left;
    padding: 12px 16px; background: var(--panel); border: none; border-bottom: 1px solid var(--border);
    cursor: pointer; transition: background .13s;
  }
  .pipe-recent-row:hover { background: var(--panel-2); }
  .pipe-type-chip {
    display: inline-flex; align-items: center;
    height: 22px; padding: 0 8px; border-radius: 6px;
    border: 1px solid var(--border-strong); background: var(--accent-soft);
    color: var(--accent); font-family: var(--mono); font-size: 11px; flex-shrink: 0;
  }
  .pipe-recent-name { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pipe-recent-go { color: var(--text-faint); display: inline-flex; }
  .pipe-recent-row:hover .pipe-recent-go { color: var(--text-dim); }
  .pipe-recent-all {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 12px; background: rgba(255,255,255,.012); border: none; cursor: pointer;
    font-family: var(--mono); font-size: 12px; color: var(--accent); transition: background .13s;
  }
  .pipe-recent-all:hover { background: var(--accent-soft); }

  /* ============ TOPN (Pipelines → TopN) ============ */
  .topn-head, .topn-row {
    display: grid;
    grid-template-columns: minmax(0,1.5fr) minmax(0,1.7fr) 116px minmax(0,1.5fr) 82px 72px;
    align-items: center; gap: 14px; padding: 0 18px;
  }
  .topn-head {
    height: 42px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.012);
    font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--text-faint);
  }
  .topn-row {
    min-height: 58px; border-bottom: 1px solid var(--border); transition: background .13s;
    padding-top: 10px; padding-bottom: 10px; cursor: pointer;
  }
  .topn-row:last-child { border-bottom: none; }
  .topn-row:hover { background: rgba(255,255,255,.022); }
  .topn-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .topn-row > span { min-width: 0; overflow: hidden; }
  .topn-row > .idx-chiprow { overflow: visible; }
  .topn-row:hover .idx-act, .topn-row:focus-within .idx-act { opacity: 1; }

  .topn-src-cell { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
  .topn-field { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
  .topn-field::before { content: "· "; }
  .topn-counters { font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); }
  .subj-chip.is-static { cursor: default; }

  /* cross-group table adds a Group column */
  .topn-x .topn-head, .topn-x .topn-row {
    grid-template-columns: minmax(0,1.4fr) 132px minmax(0,1.5fr) 104px minmax(0,1.3fr) 72px;
  }
  .topn-group-chip {
    display: inline-flex; align-items: center; gap: 5px;
    height: 24px; padding: 0 9px; border-radius: 6px;
    border: 1px solid var(--border-strong); background: var(--bg-app);
    color: var(--text-dim); font-family: var(--mono); font-size: 11.5px; max-width: 100%;
  }
  .topn-group-chip svg { color: var(--text-faint); flex-shrink: 0; }

  /* filter toolbar */
  .topn-toolbar { align-items: flex-start; flex-wrap: wrap; }
  .topn-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .topn-filter { display: flex; align-items: center; gap: 7px; }
  .topn-filter-label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); }
  .topn-select-wrap { position: relative; }
  .topn-select {
    appearance: none; -webkit-appearance: none;
    height: 38px; padding: 0 30px 0 12px;
    background: var(--panel); border: 1px solid var(--border-strong); border-radius: 8px;
    color: var(--text); font-family: var(--mono); font-size: 12.5px; cursor: pointer;
    transition: border-color .14s;
  }
  .topn-select:hover { border-color: rgba(255,255,255,.2); }
  .topn-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .topn-select option { background: var(--panel-2); color: var(--text); }
  .topn-select-chev { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }

  /* rank badge — topN / bottomN / both */
  .topn-rank {
    display: inline-flex; align-items: center; gap: 5px;
    height: 24px; padding: 0 9px; border-radius: 6px;
    font-family: var(--mono); font-size: 11.5px; font-weight: 600; white-space: nowrap;
  }
  .topn-rank svg { flex-shrink: 0; }
  .topn-rank.is-topn   { color: var(--accent); background: var(--accent-soft); }
  .topn-rank.is-bottomn { color: #d98a3c; background: rgba(217,138,60,.12); }
  .topn-rank.is-bothn  { color: #7c6cf0; background: rgba(124,108,240,.14); }
  .topn-rank-lg {
    display: inline-flex; align-items: center; gap: 7px;
    height: 32px; padding: 0 13px; border-radius: 8px;
    font-family: var(--mono); font-size: 13px; font-weight: 600;
  }
  .topn-rank-lg.is-topn   { color: var(--accent); background: var(--accent-soft); }
  .topn-rank-lg.is-bottomn { color: #d98a3c; background: rgba(217,138,60,.12); }
  .topn-rank-lg.is-bothn  { color: #7c6cf0; background: rgba(124,108,240,.14); }
  .topn-k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-faint); margin-right: 8px; }

  /* source-measure card (detail) */
  .topn-source-card {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
    border: 1px solid var(--border); background: var(--panel); border-radius: 11px; padding: 14px 16px;
  }
  .topn-source-link {
    display: inline-flex; align-items: center; gap: 4px;
    height: 34px; padding: 0 13px; border-radius: 8px;
    border: 1px solid var(--border-strong); background: var(--bg-app); color: var(--text);
    font-size: 13px; transition: all .14s;
  }
  .topn-source-link:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
  .topn-source-link svg { color: var(--text-faint); }
  .topn-source-link:hover svg { color: var(--accent); }
  .topn-source-key { color: var(--text-faint); }
  .topn-source-name { color: var(--text); font-weight: 600; }
  .topn-source-link:hover .topn-source-key, .topn-source-link:hover .topn-source-name { color: var(--accent); }
  .topn-source-field { font-size: 12.5px; color: var(--text-dim); }
  .topn-source-field .mono { font-family: var(--mono); color: var(--text); }
  .topn-source-missing { display: inline-flex; align-items: center; gap: 8px; color: var(--danger); font-size: 13px; }
  .topn-source-missing svg { color: var(--danger); }
  .topn-warn-inline { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: var(--warn); font-size: 11.5px; }

  /* criteria condition chips */
  .topn-cond-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .topn-and { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .5px; color: var(--text-faint); }
  .topn-cond {
    display: inline-flex; align-items: stretch; border: 1px solid var(--border-strong);
    border-radius: 7px; overflow: hidden; font-family: var(--mono); font-size: 12px;
  }
  .topn-cond-tag { padding: 4px 9px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
  .topn-cond-op { padding: 4px 8px; background: var(--panel-2); color: var(--text-dim); border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
  .topn-cond-val { padding: 4px 10px; background: var(--bg-app); color: var(--text); }

  @media (max-width: 1180px) {
    .topn-head { display: none; }
    .topn-row {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
      position: relative; padding: 15px 18px; min-height: 0;
    }
    .topn-row .idx-name-cell { flex: 1 1 100%; padding-right: 80px; }
    .topn-row .topn-src-cell { flex-direction: row; align-items: center; }
    .topn-row .idx-actions { position: absolute; top: 12px; right: 14px; opacity: 1; }
    .topn-row .idx-act { opacity: 1; }
  }

  /* ============ TOP-N QUERY (builder seed note + leaderboard result) ============ */
  .qb-seed-note {
    display: flex; align-items: center; gap: 8px;
    margin: 0 20px; margin-top: 14px; padding: 0;
    border: none;
    background: transparent; color: var(--text-faint); font-size: 12px; line-height: 1.4;
  }
  .qb-seed-note svg { color: var(--accent); flex-shrink: 0; }
  .qb-seed-note .mono { font-family: var(--mono); color: var(--text-dim); font-weight: 600; }

  /* leaderboard */
  .tnlb { display: flex; flex-direction: column; }
  .tnlb-head, .tnlb-row {
    display: grid; grid-template-columns: 44px minmax(0, 1.4fr) minmax(0, 3fr) 120px;
    align-items: center; gap: 16px; padding: 0 18px;
  }
  .tnlb-head {
    height: 38px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.012);
    font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint);
  }
  .tnlb-h-rank { text-align: center; }
  .tnlb-h-val.num { text-align: right; }
  .tnlb-row { height: 46px; border-bottom: 1px solid var(--border); transition: background .12s; }
  .tnlb-row:last-child { border-bottom: none; }
  .tnlb-row:hover { background: rgba(255,255,255,.025); }
  .tnlb-rank {
    width: 26px; height: 26px; justify-self: center; display: grid; place-items: center;
    border-radius: 7px; font-family: var(--mono); font-size: 12px; font-weight: 600;
    background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim);
  }
  .tnlb-rank.rank-1 { color: #f0c33c; background: rgba(240,195,60,.13); border-color: rgba(240,195,60,.32); }
  .tnlb-rank.rank-2 { color: #c4ccd6; background: rgba(196,204,214,.1); border-color: rgba(196,204,214,.26); }
  .tnlb-rank.rank-3 { color: #d8945c; background: rgba(216,148,92,.12); border-color: rgba(216,148,92,.3); }
  .tnlb-label { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tnlb-bar-wrap { height: 9px; background: rgba(255,255,255,.05); border-radius: 5px; overflow: hidden; }
  .tnlb-bar { display: block; height: 100%; border-radius: 5px;
    background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 62%, #ffffff)); }
  .tnlb-row.is-podium .tnlb-bar { background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 45%, #ffffff)); }
  .tnlb-val { text-align: right; color: var(--text); font-weight: 500; font-size: 12.5px; }

  /* entity (repeated model.v1.Tag) rendered as key=value chips */
  .tnlb-ent { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
  .tnlb-ent-tag {
    display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%;
    padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--panel-2); font-size: 12px;
  }
  .tnlb-ent-k { font-size: 10px; color: var(--text-faint); }
  .tnlb-ent-v { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* per-timestamp list stepper (TopNResponse.lists ranked by time) */
  .tnlb-ts-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.012);
  }
  .tnlb-ts-nav {
    width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center;
    border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text-dim);
    border-radius: 7px; transition: all .13s;
  }
  .tnlb-ts-nav:hover:not(:disabled) { color: var(--text); border-color: rgba(255,255,255,.22); }
  .tnlb-ts-nav:disabled { opacity: .4; cursor: not-allowed; }
  .tnlb-ts-pills { display: flex; gap: 4px; overflow-x: auto; flex: 1 1 auto; min-width: 0; padding: 1px; }
  .tnlb-ts-pill {
    flex: 0 0 auto; height: 28px; padding: 0 11px; border-radius: 7px;
    border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text-dim);
    font-size: 11.5px; transition: all .13s;
  }
  .tnlb-ts-pill:hover { color: var(--text); }
  .tnlb-ts-pill.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
  .tnlb-ts-meta { flex-shrink: 0; font-size: 11.5px; color: var(--text-faint); }
  @media (max-width: 760px) {
    .tnlb-head { display: none; }
    .tnlb-row { grid-template-columns: 30px minmax(0,1fr) 88px; height: auto; padding: 11px 16px; gap: 12px; }
    .tnlb-bar-wrap { display: none; }
  }

  @media (max-width: 1180px) {
    .idx-rule-head, .idx-bind-head { display: none; }
    .idx-rule-row, .idx-bind-row {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
      position: relative; padding: 15px 18px 15px; min-height: 0;
    }
    .idx-name-cell { flex: 1 1 100%; padding-right: 80px; }
    .idx-subj-cell { flex-direction: row; align-items: center; gap: 8px; }
    .idx-window { flex-direction: row; gap: 14px; }
    .idx-actions { position: absolute; top: 12px; right: 14px; opacity: 1; }
    .idx-rule-row .idx-act, .idx-bind-row .idx-act { opacity: 1; }
  }

  /* ============ LOADING SHELL ============ */
  .loading-shell {
    height: 100%; display: flex; align-items: center; justify-content: center;
  }

  /* ============ LOGIN FORM ============ */
  .lf {
    position: relative; min-height: 100vh; overflow: hidden;
    display: flex; align-items: center; justify-content: center; padding: 48px 32px;
    background:
      radial-gradient(80% 60% at 50% 0%, rgba(58,157,93,.2), transparent 58%),
      radial-gradient(60% 50% at 50% 8%, rgba(58,157,93,.12), transparent 60%),
      var(--bg-app);
  }
  .lf-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(120% 110% at 50% 32%, #000, transparent 72%);
            mask-image: radial-gradient(120% 110% at 50% 32%, #000, transparent 72%);
  }
  .lf-card {
    position: relative; display: flex; width: 880px; max-width: 100%;
    background: var(--panel); border: 1px solid var(--border-strong);
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 30px 90px rgba(0,0,0,.5);
  }
  @media (prefers-reduced-motion: no-preference) {
    .lf-card { animation: rise .5s cubic-bezier(.4,0,.2,1) both; }
    .lf-form > * { animation: rise .5s cubic-bezier(.4,0,.2,1) both; }
    .lf-form > *:nth-child(2) { animation-delay: .04s; }
    .lf-form > *:nth-child(3) { animation-delay: .08s; }
    .lf-form > *:nth-child(4) { animation-delay: .12s; }
    .lf-form > *:nth-child(5) { animation-delay: .16s; }
    @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  }
  .lf-brand {
    width: 348px; flex-shrink: 0; padding: 48px 42px;
    display: flex; flex-direction: column; align-items: flex-start;
    background:
      radial-gradient(130% 80% at 15% 0%, rgba(58,157,93,.2), transparent 62%),
      var(--bg-sidebar);
    border-right: 1px solid var(--border);
  }
  .lf-formwrap {
    flex: 1; min-width: 0; padding: 52px 56px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .lf-wordmark {
    font-family: var(--mono); font-weight: 600; letter-spacing: -1px;
    font-size: 34px; margin: 22px 0 8px; color: var(--text);
  }
  .lf-eyebrow {
    font-family: var(--mono); font-size: 11px; letter-spacing: 1.6px;
    text-transform: uppercase; color: var(--accent); margin: 0;
  }

  .lf-form { display: flex; flex-direction: column; gap: 15px; width: 100%; }
  .lf-formwrap .f-input { height: 40px; }

  /* input + eye button overlay */
  .f-inputwrap { position: relative; display: flex; align-items: center; }
  .f-input.has-eye { padding-right: 42px; }
  .f-eye {
    position: absolute; right: 6px; width: 30px; height: 30px;
    border: none; background: transparent; color: var(--text-faint);
    display: grid; place-items: center; border-radius: 6px;
    transition: color .14s, background .14s;
  }
  .f-eye:hover { color: var(--text-dim); background: rgba(255,255,255,.04); }

  /* role picker */
  .lf-roles { display: flex; flex-direction: column; }
  .lf-seg {
    display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px;
    background: var(--bg-app); border: 1px solid var(--border-strong); border-radius: 11px;
  }
  .lf-seg-btn {
    display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 13px;
    border: 1px solid transparent; border-radius: 8px; background: transparent;
    color: var(--text-dim); transition: background .14s, border-color .14s, color .14s; text-align: left;
  }
  .lf-seg-btn .seg-ico {
    display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px;
    background: var(--panel-3); color: var(--text-dim); flex-shrink: 0; transition: background .14s, color .14s;
  }
  .lf-seg-btn .seg-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .lf-seg-btn .seg-t { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.1; }
  .lf-seg-btn .seg-d { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }
  .lf-seg-btn:hover { border-color: var(--border-strong); }
  .lf-seg-btn.on { background: var(--accent-soft); border-color: rgba(58,157,93,.34); }
  .lf-seg-btn.on .seg-ico { background: var(--accent); color: #fff; }
  .lf-seg-btn.on .seg-t { color: var(--accent-2, #4fbd72); }

  /* remember toggle */
  .lf-row { display: flex; align-items: center; }
  .lf-toggle {
    display: inline-flex; align-items: center; gap: 9px;
    cursor: pointer; user-select: none; background: none; border: none; padding: 0;
  }
  .lf-switch {
    width: 34px; height: 19px; border-radius: 999px;
    background: var(--panel-3); border: 1px solid var(--border-strong);
    position: relative; transition: background .16s, border-color .16s; flex-shrink: 0;
  }
  .lf-switch::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 13px; height: 13px; border-radius: 50%; background: var(--text-dim);
    transition: transform .16s, background .16s;
  }
  .lf-toggle.on .lf-switch { background: var(--accent-soft); border-color: rgba(58,157,93,.34); }
  .lf-toggle.on .lf-switch::after { transform: translateX(15px); background: var(--accent-2, #4fbd72); }
  .lf-toggle-label { font-size: 12.5px; color: var(--text-dim); }

  /* button states (login) */
  .btn-primary:disabled { cursor: default; filter: none; opacity: .92; }
  .btn-primary.is-ok { background: #2f8a4d; }

  /* spinner */
  .spin {
    display: inline-block; width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
    animation: spin .7s linear infinite; flex-shrink: 0;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* status banners */
  .lf-banner {
    display: flex; align-items: center; gap: 10px; padding: 11px 13px;
    border-radius: 9px; font-size: 12.5px; line-height: 1.45; border: 1px solid var(--border);
  }
  .lf-banner.err { background: rgba(207,107,82,.1); border-color: rgba(207,107,82,.34); color: #ecae9f; }
  .lf-banner.ok { background: var(--accent-soft); border-color: rgba(58,157,93,.34); color: var(--accent-2, #4fbd72); }
  .lf-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .lf-banner.err .lf-dot { background: var(--danger); }
  .lf-banner.ok .lf-dot { background: var(--accent-2, #4fbd72); box-shadow: 0 0 8px var(--accent-glow); }

  .lf-hint { text-align: center; font-size: 11.5px; color: var(--text-faint); margin: 2px 0 0; }
  .lf-hint code { font-family: var(--mono); color: var(--text-dim); background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-size: 11px; }

  /* footer meta */
  .lf-meta {
    display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 11px;
    color: var(--text-faint); margin-top: auto; padding-top: 30px;
  }
  .lf-sep { width: 1px; height: 11px; background: var(--border-strong); }
  .lf-live { display: inline-flex; align-items: center; gap: 6px; }
  .lf-live::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-2, #4fbd72); box-shadow: 0 0 7px var(--accent-glow);
  }
  /* Eye-catching unreachable indicator — pulls from the danger palette so it
     contrasts with the otherwise muted footer text and isn't missed. */
  .lf-warn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px; border-radius: 6px;
    color: var(--danger);
    background: rgba(207, 107, 82, 0.12);
    border: 1px solid rgba(207, 107, 82, 0.42);
    box-shadow: 0 0 0 1px rgba(207, 107, 82, 0.06), 0 0 12px rgba(207, 107, 82, 0.18);
    animation: lf-warn-pulse 1.8s ease-in-out infinite;
    font-weight: 600;
  }
  .lf-warn-ico { flex: none; }
  .lf-warn-label { letter-spacing: 0.02em; }
  .lf-warn-hint {
    margin: 12px 0 0; padding: 8px 10px;
    font-size: 11.5px; line-height: 1.45;
    color: var(--danger); background: rgba(207, 107, 82, 0.08);
    border-left: 2px solid var(--danger); border-radius: 0 4px 4px 0;
    font-family: var(--mono);
  }
  .lf-warn-hint code {
    color: var(--danger); background: rgba(207, 107, 82, 0.14);
    border: 1px solid rgba(207, 107, 82, 0.32); border-radius: 4px;
    padding: 0 5px; font-size: 11px;
  }
  @keyframes lf-warn-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(207, 107, 82, 0.06), 0 0 12px rgba(207, 107, 82, 0.18); }
    50%      { box-shadow: 0 0 0 1px rgba(207, 107, 82, 0.18), 0 0 18px rgba(207, 107, 82, 0.34); }
  }

  @media (max-width: 720px) {
    .lf-card { flex-direction: column; }
    .lf-brand { width: auto; border-right: none; border-bottom: 1px solid var(--border); padding: 32px 28px; }
    .lf-formwrap { padding: 32px 28px; }
  }
