:root {
    --background:        hsl(0 0% 100%);
    --foreground:        hsl(222.2 84% 4.9%);
    --card:              hsl(0 0% 100%);
    --muted:             hsl(210 40% 96.1%);
    --muted-foreground:  hsl(215.4 16.3% 46.9%);
    --border:            hsl(214.3 31.8% 91.4%);
    --input:             hsl(214.3 31.8% 91.4%);
    --primary:           hsl(222.2 47.4% 11.2%);
    --primary-foreground:hsl(210 40% 98%);
    --secondary:         hsl(210 40% 96.1%);
    --accent:            hsl(210 40% 96.1%);
    --ring:              hsl(222.2 84% 4.9%);
    --destructive:       hsl(0 84% 60%);
    --success:           hsl(142 71% 45%);
    --warning:           hsl(38 92% 50%);
    --radius:            0.375rem;  /* 6px — shadcn/ui rounded-md */
    --radius-lg:         0.5rem;    /* 8px — shadcn/ui rounded-lg */
    --radius-sm:         0.25rem;   /* 4px — shadcn/ui rounded-sm */
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--muted);
    color: var(--foreground);
    font-size: 13.5px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .app-main {
    flex: 1;
    display: flex; flex-direction: column;
    overflow: hidden;
  }

  /* Top navigation bar */
  .app-topbar {
    height: 52px; flex-shrink: 0;
    display: flex; align-items: center; gap: 6px;
    padding: 0 16px;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    z-index: 11;
  }
  .tb-logo { display: flex; align-items: center; gap: 8px; cursor: pointer; margin-right: 16px; color: var(--foreground); }
  .tb-logo span { font-weight: 600; font-size: 15px; }
  .tb-nav { display: flex; gap: 2px; padding: 2px; border-radius: var(--radius); }
  .tb-btn {
    padding: 6px 12px; font-size: 14px; font-weight: 500;
    border: none; background: transparent; color: var(--muted-foreground);
    cursor: pointer; border-radius: var(--radius); font-family: inherit;
  }
  .tb-btn:hover { color: var(--foreground); background: var(--muted); }
  .tb-btn.active { background: var(--primary); color: var(--primary-foreground); }
  .tb-btn-icon { padding: 6px 8px; }
  .tb-right { display: flex; align-items: center; gap: 8px; }
  .tb-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--primary); border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: var(--primary-foreground); cursor: pointer;
    position: relative; overflow: hidden;
    box-shadow: 0 0 0 0 hsl(217 91% 55% / 0), 0 1px 2px hsl(222 47% 11% / 0.08);
    transition: box-shadow 0.15s;
  }
  .tb-avatar::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background:
      radial-gradient(circle at 20% 25%, hsl(0 0% 100% / 0.15) 1.5px, transparent 1.5px),
      radial-gradient(circle at 75% 20%, hsl(0 0% 100% / 0.10) 1px, transparent 1px),
      radial-gradient(circle at 30% 75%, hsl(0 0% 100% / 0.10) 1px, transparent 1px),
      radial-gradient(circle at 80% 70%, hsl(0 0% 100% / 0.12) 1.2px, transparent 1.2px);
    pointer-events: none;
  }
  .tb-avatar:hover { box-shadow: 0 0 0 3px hsl(217 91% 55% / 0.2), 0 1px 2px hsl(222 47% 11% / 0.08); }
  .brand { display: flex; align-items: center; gap: 10px; }
  .brand-icon {
    width: 28px; height: 28px;
    background: var(--primary);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary-foreground);
  }
  .brand-icon svg { width: 15px; height: 15px; }
  .brand h1 { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
  .brand .sub { font-size: 12px; color: var(--muted-foreground); margin-left: 4px; }
  .sep { width: 1px; height: 22px; background: var(--border); }
  .header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
  .api-pill {
    display: inline-flex; align-items: center; gap: 5px;
    height: 26px; padding: 0 10px;
    border-radius: 13px; font-size: 11px; font-weight: 500;
    background: var(--muted); color: var(--muted-foreground);
    cursor: pointer;
  }
  .api-pill.live { background: hsl(142 71% 45% / 0.12); color: hsl(142 71% 28%); }
  .api-pill-blue { background: hsl(217 60% 92%); color: hsl(217 50% 30%); }
  .api-pill-green { background: hsl(142 40% 92%); color: hsl(142 50% 30%); }
  .api-pill-purple { background: hsl(263 40% 92%); color: hsl(263 50% 40%); }
  .api-pill-orange { background: hsl(30 80% 92%); color: hsl(30 80% 40%); }
  .api-pill-red { background: hsl(0 70% 92%); color: hsl(0 70% 40%); }
  .api-pill-teal { background: hsl(180 40% 90%); color: hsl(180 50% 30%); }
  .api-pill-pink { background: hsl(330 50% 92%); color: hsl(330 50% 35%); }
  .api-pill-indigo { background: hsl(240 50% 92%); color: hsl(240 50% 35%); }
  .api-pill-lime { background: hsl(80 50% 90%); color: hsl(80 50% 30%); }
  .api-pill-amber { background: hsl(45 90% 90%); color: hsl(45 80% 30%); }
  .api-pill::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; opacity: 0.7;
  }

  /* ── Buttons (shadcn/ui) ──
     Variants: default, primary, secondary, ghost, destructive, outline, link
     Sizes: default (h-9), sm (h-8), xs (h-7), lg (h-10), icon (h-9 w-9)
  */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; padding: 0 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    font-size: 14px; font-weight: 500; font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .btn:hover { background: var(--accent); }
  .btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
  .btn svg { width: 14px; height: 14px; flex-shrink: 0; }

  /* Variant: primary (filled) */
  .btn-primary { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
  .btn-primary:hover { background: hsl(222.2 47.4% 18%); }

  /* Variant: secondary */
  .btn-secondary { background: var(--secondary); color: var(--foreground); border-color: var(--secondary); }
  .btn-secondary:hover { background: hsl(210 40% 90%); }

  /* Variant: ghost (no border) */
  .btn-ghost { border-color: transparent; background: transparent; }
  .btn-ghost:hover { background: var(--accent); }

  /* Variant: destructive */
  .btn-destructive { background: var(--destructive); color: white; border-color: var(--destructive); }
  .btn-destructive:hover { background: hsl(0 84% 50%); }

  /* Variant: outline-destructive (text red, border) */
  .btn-danger { color: var(--destructive); border-color: var(--border); background: transparent; }
  .btn-danger:hover { background: hsl(0 84% 60% / 0.08); }

  /* Variant: link */
  .btn-link { border: none; background: transparent; color: var(--primary); padding: 0; height: auto; text-decoration: underline; }
  .btn-link:hover { text-decoration: none; }

  /* Size: sm (h-8) */
  .btn-sm { height: 32px; padding: 0 12px; font-size: 14px; border-radius: var(--radius); }
  .btn-sm svg { width: 13px; height: 13px; }

  /* Size: xs (h-7) */
  .btn-xs { height: 28px; padding: 0 8px; font-size: 12px; gap: 4px; border-radius: var(--radius); }
  .btn-xs svg { width: 12px; height: 12px; }

  /* Size: lg (h-10) */
  .btn-lg { height: 40px; padding: 0 32px; font-size: 14px; }

  /* Size: icon (square) */
  .icon-btn {
    width: 36px; height: 36px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius); border: 1px solid transparent;
    background: transparent; cursor: pointer; color: var(--muted-foreground);
    transition: background 0.15s, color 0.15s;
  }
  .icon-btn:hover { background: var(--accent); color: var(--foreground); }
  .icon-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  .icon-btn svg { width: 16px; height: 16px; }
  .icon-btn-sm { width: 28px; height: 28px; }
  .icon-btn-sm svg { width: 14px; height: 14px; }

  /* ── Badges (shadcn/ui) ──
     Variants: default, secondary, destructive, outline, success, warning, system
  */
  .badge {
    display: inline-flex; align-items: center;
    font-size: 12px; font-weight: 500; line-height: 1;
    padding: 2px 10px; border-radius: 9999px;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: background 0.15s;
  }
  .badge-default { background: var(--primary); color: var(--primary-foreground); }
  .badge-secondary { background: var(--secondary); color: var(--foreground); }
  .badge-destructive { background: var(--destructive); color: white; }
  .badge-outline { background: transparent; color: var(--foreground); border-color: var(--border); }
  .badge-success { background: hsl(142 70% 90%); color: hsl(142 70% 25%); }
  .badge-warning { background: hsl(38 92% 90%); color: hsl(38 70% 30%); }
  .badge-system { background: hsl(263 70% 93%); color: hsl(263 70% 40%); }
  .badge-muted { background: var(--muted); color: var(--muted-foreground); }

  /* ── Cards (shadcn/ui) ── */
  .card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
  }
  .card-header {
    display: flex; align-items: center; gap: 8px;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
  }
  .card-header-title { font-size: 14px; font-weight: 600; color: var(--foreground); }
  .card-header-desc { font-size: 12px; color: var(--muted-foreground); }
  .card-body { padding: 20px; }
  .card-footer {
    padding: 12px 20px; border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; gap: 8px;
    background: var(--muted);
  }

  /* ── Separator ── */
  .separator { height: 1px; background: var(--border); margin: 8px 0; }
  .separator-v { width: 1px; background: var(--border); align-self: stretch; }

  /* ── Dropdown / Popover (unified) ── */
  .dropdown {
    position: absolute;
    z-index: 50;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px hsl(222 47% 11% / 0.12);
    padding: 4px 0;
    font-size: 14px;
    overflow: hidden;
    animation: dropdown-in 0.12s ease;
  }
  @keyframes dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .dropdown-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.1s;
    user-select: none;
  }
  .dropdown-item:hover { background: var(--accent); }
  .dropdown-item.selected { background: hsl(217 91% 95%); font-weight: 500; }
  .dropdown-item.action { color: hsl(217 91% 50%); font-weight: 500; border-top: 1px solid var(--border); margin-top: 2px; padding-top: 8px; }
  .dropdown-search {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
  }
  .dropdown-search input {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 6px 8px; font-size: 14px; font-family: inherit;
    outline: none; background: var(--background);
  }
  .dropdown-search input:focus { border-color: var(--ring); }
  .dropdown-list {
    overflow-y: auto;
    max-height: 260px;
    padding: 4px 0;
  }

  /* ── Inputs (shadcn/ui) ── */
  .input, .select, .textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-size: 14px; font-family: inherit;
    background: var(--background); color: var(--foreground);
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
  }
  .input:focus, .select:focus, .textarea:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 2px hsl(222.2 84% 4.9% / 0.08);
  }
  .input.invalid { border-color: var(--destructive); }
  .textarea { resize: vertical; min-height: 74px; line-height: 1.55; }
  .input-sm { padding: 5px 8px; font-size: 12px; }
  .input-mono { font-family: var(--mono); font-size: 12px; }
  .label {
    display: block;
    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--muted-foreground);
    margin-bottom: 6px;
  }
  .err {
    font-size: 11px; color: var(--destructive); margin-top: 4px;
  }

  /* Layout */
  main {
    flex: 1;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 0;
    overflow: hidden;
  }
  .col {
    background: var(--background);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .col:last-child { border-right: none; border-left: 1px solid var(--border); }
  .col-head {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
    background: var(--background);
  }
  .col-title { font-size: 13px; font-weight: 600; }
  .col-sub { font-size: 11.5px; color: var(--muted-foreground); margin-top: 1px; }
  .col-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }

  /* Layer cards (left column) */
  .layer-group-label {
    display: flex; align-items: baseline; gap: 10px;
    padding: 12px 0 8px; margin: 0;
    border-bottom: 1px solid var(--border);
  }
  .layer-group-label .label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); line-height: 1; }
  .layer-group-label .count { font-size: 10px; color: var(--muted-foreground); line-height: 1; }
  .layer-group-label:first-child { padding-top: 0; }
  .layer-group-arrows { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; }
  .layer-group-label:hover .layer-group-arrows { opacity: 1; }
  .layer-group-arrows .icon-btn { width: 18px; height: 18px; padding: 1px; }
  .layer-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
  }
  .layer-card:hover { background: var(--accent); }
  .layer-card.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
  }
  .layer-card-top {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  .layer-card-name {
    font-size: 13px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: flex; align-items: center; gap: 5px;
  }
  .layer-card-tname { font-family: var(--mono); font-size: 10.5px; color: var(--muted-foreground); margin-top: 1px; }
  .layer-card-chip {
    font-size: 10.5px; font-weight: 600;
    padding: 1px 6px; border-radius: 8px;
    background: var(--muted); color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .layer-card-chip.has { background: hsl(222.2 47.4% 11.2%); color: var(--primary-foreground); }
  .layer-card-chip.gap { background: hsl(38 92% 50% / 0.15); color: hsl(30 85% 36%); }
  .custom-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: hsl(217 91% 50%);
    flex-shrink: 0;
  }
  .layer-card-actions {
    display: none;
    position: absolute;
    top: 6px; right: 6px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1px;
    box-shadow: 0 1px 3px hsl(222 47% 11% / 0.06);
  }
  .layer-card:hover .layer-card-actions { display: flex; }
  .layer-card-actions .icon-btn { width: 22px; height: 22px; border-radius: 3px; }
  .layer-card-actions .icon-btn svg { width: 11px; height: 11px; }
  .layer-card-actions .icon-btn:disabled { opacity: 0.3; pointer-events: none; }
  .new-layer-btn {
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted-foreground);
    font-family: inherit; font-size: 12.5px; font-weight: 500;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
  }
  .new-layer-btn:hover {
    background: var(--accent); color: var(--foreground);
    border-color: var(--border-strong, var(--ring));
  }
  .new-layer-btn svg { width: 13px; height: 13px; }

  /* Middle column sections */
  .section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 12px;
  }
  .section-title {
    font-size: 12.5px; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
  }
  .section-title .count {
    font-size: 11px; color: var(--muted-foreground);
    font-weight: 500;
    padding: 0 6px; height: 18px; line-height: 18px;
    background: var(--muted); border-radius: 9px;
    font-variant-numeric: tabular-nums;
  }
  .section-title .actions { margin-left: auto; display: flex; gap: 5px; }

  /* Question card */
  .question-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  }
  .q-select {
    flex: 1; border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 6px 28px 6px 10px;
    background: var(--background); font-family: inherit; font-size: 13px;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
    cursor: pointer;
  }
  .question-title-input {
    font-size: 15px; font-weight: 600;
    border: 1px solid transparent;
    padding: 6px 8px; margin: -6px -8px 4px;
    border-radius: var(--radius-sm); width: calc(100% + 16px);
    background: transparent; outline: none; font-family: inherit;
    transition: background 0.12s, border-color 0.12s;
  }
  .question-title-input:hover { background: var(--accent); }
  .question-title-input:focus { background: var(--background); border-color: var(--border); }

  /* Required field rows */
  .req-table { width: 100%; border-collapse: collapse; }
  .req-row {
    border-bottom: 1px solid var(--border);
  }
  .req-row:last-child { border-bottom: none; }
  .req-row td { padding: 8px 6px; vertical-align: top; }
  .req-row td:first-child { padding-left: 0; }
  .req-row td:last-child { padding-right: 0; text-align: right; }
  .layer-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 500;
    padding: 2px 8px; border-radius: 10px;
    background: var(--muted); color: var(--foreground);
    white-space: nowrap;
  }
  .field-name-mono {
    font-family: var(--mono); font-size: 12px;
    background: var(--muted); padding: 2px 6px; border-radius: 4px;
  }
  .status-dot {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 500;
    padding: 2px 8px; border-radius: 10px;
  }
  .status-dot.ok { background: hsl(142 71% 45% / 0.12); color: hsl(142 71% 30%); }
  .status-dot.missing { background: hsl(0 84% 60% / 0.1); color: hsl(0 70% 45%); }
  .status-dot::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
  }
  .req-reason {
    font-size: 11.5px; color: var(--muted-foreground);
    margin-top: 3px; line-height: 1.4;
  }

  .empty {
    font-size: 12.5px; color: var(--muted-foreground);
    padding: 14px 10px; text-align: center;
    border: 1px dashed var(--border); border-radius: var(--radius-sm);
    background: var(--muted);
  }

  /* Gap summary bar */
  .gap-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
  }
  .gap-status {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600;
  }
  .gap-status.ready { color: hsl(142 71% 30%); }
  .gap-status.blocked { color: hsl(0 70% 45%); }
  .gap-status .icon {
    width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .gap-status.ready .icon { background: hsl(142 71% 45% / 0.15); color: hsl(142 71% 30%); }
  .gap-status.blocked .icon { background: hsl(0 84% 60% / 0.12); color: hsl(0 70% 45%); }
  .gap-numbers {
    display: flex; gap: 14px; margin-left: auto;
    font-size: 12px; color: var(--muted-foreground);
  }
  .gap-numbers b { color: var(--foreground); font-weight: 600; }

  /* SQL workbench */
  .sql-editor {
    width: 100%; min-height: 130px;
    font-family: var(--mono); font-size: 12px; line-height: 1.55;
    padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: hsl(222.2 47.4% 11.2%);
    color: hsl(210 40% 92%);
    outline: none; resize: vertical;
    tab-size: 2;
  }
  .sql-editor:focus { border-color: var(--ring); }
  .sql-controls {
    display: flex; gap: 6px; margin-top: 8px; align-items: center;
  }
  .sql-status {
    margin-left: auto; font-size: 11.5px; color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
  }
  .sql-status.ok { color: hsl(142 71% 30%); }
  .sql-status.err { color: var(--destructive); }
  .results-table {
    width: 100%; border-collapse: collapse; margin-top: 10px;
    font-size: 11.5px; font-family: var(--mono);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    overflow: hidden;
  }
  .results-table th {
    text-align: left; padding: 7px 10px; background: var(--muted);
    font-weight: 600; color: var(--muted-foreground);
    border-bottom: 1px solid var(--border);
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
  }
  .results-table td {
    padding: 6px 10px; border-bottom: 1px solid var(--border);
    color: var(--foreground); white-space: nowrap;
    max-width: 240px; overflow: hidden; text-overflow: ellipsis;
  }
  .results-table tr:last-child td { border-bottom: none; }
  .results-table tr:hover td { background: var(--muted); }
  .results-wrap { max-height: 320px; overflow: auto; margin-top: 10px; border-radius: var(--radius-sm); }
  .err-block {
    margin-top: 10px; padding: 10px 12px;
    background: hsl(0 84% 60% / 0.08); color: hsl(0 70% 38%);
    border: 1px solid hsl(0 84% 60% / 0.25); border-radius: var(--radius-sm);
    font-family: var(--mono); font-size: 12px; line-height: 1.5;
    white-space: pre-wrap;
  }

  /* Schema editor (right column) */
  .contract-layer-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 10px;
    background: var(--card);
    overflow: hidden;
  }
  .contract-layer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px;
    background: var(--muted);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    gap: 8px;
  }
  .contract-layer-head:hover { background: hsl(210 40% 93%); }
  .contract-layer-head .name { font-size: 12.5px; font-weight: 600; }
  .contract-layer-head .tname {
    font-family: var(--mono); font-size: 10.5px; color: var(--muted-foreground); margin-top: 1px;
  }
  .contract-layer-body { padding: 10px 12px; display: none; }
  .contract-layer-card.open .contract-layer-body { display: block; }
  .contract-layer-card.open .chev { transform: rotate(90deg); }
  .chev { width: 14px; height: 14px; transition: transform 0.15s; color: var(--muted-foreground); }

  .schema-field {
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
  }
  .schema-field:last-of-type { border-bottom: none; }
  .schema-field.is-child {
    padding: 6px 0 6px 14px;
    border-left: 2px solid hsl(217 91% 85%);
    margin-left: 4px;
    border-bottom: 1px dashed var(--border);
  }
  .schema-field.is-container > .schema-field-row .input-mono { color: hsl(217 91% 35%); font-weight: 500; }
  .schema-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 78px 56px auto;
    gap: 5px; align-items: center;
  }
  .row-actions { display: flex; gap: 0; }
  .row-actions .icon-btn { width: 22px; height: 22px; }
  .row-actions .icon-btn svg { width: 11px; height: 11px; }
  .row-actions .icon-btn:disabled { opacity: 0.25; pointer-events: none; }
  .field-children {
    margin-top: 6px;
    padding-left: 6px;
  }
  .add-child-btn {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 4px;
    padding: 3px 8px;
    background: transparent; border: 1px dashed var(--border);
    border-radius: 4px; cursor: pointer;
    font-family: inherit; font-size: 11px; font-weight: 500;
    color: hsl(217 91% 40%);
    transition: background 0.12s, border-color 0.12s;
  }
  .add-child-btn:hover { background: hsl(217 91% 96%); border-color: hsl(217 91% 70%); }
  .add-child-btn svg { width: 10px; height: 10px; }
  .schema-field input, .schema-field select {
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 12px;
    background: transparent; outline: none;
    transition: background 0.1s, border-color 0.1s;
  }
  .schema-field input.input-mono, .schema-field select { font-family: var(--mono); }
  .schema-field input:hover, .schema-field select:hover { background: var(--muted); }
  .schema-field input:focus, .schema-field select:focus {
    background: var(--background); border-color: var(--border);
  }
  .schema-field input.invalid { border-color: var(--destructive); background: hsl(0 84% 60% / 0.05); }
  .key-pk { color: hsl(38 92% 35%); font-weight: 600; }
  .key-fk { color: hsl(217 91% 50%); font-weight: 600; }
  .schema-field .desc-input {
    width: 100%; font-family: inherit; font-size: 11.5px;
    color: var(--muted-foreground);
    margin-top: 4px; padding-left: 6px;
  }
  .fk-target {
    display: grid; grid-template-columns: auto 1fr 1fr;
    gap: 5px; align-items: center;
    margin-top: 5px; padding: 4px 6px;
    background: hsl(217 91% 95%); border-radius: 4px;
    font-size: 11px;
  }
  .fk-target-label { color: hsl(217 91% 40%); font-weight: 600; font-size: 10.5px; padding: 0 4px; }
  .fk-target select { font-size: 11px; padding: 3px 5px; background: var(--background); border: 1px solid var(--border); }
  .schema-field-empty {
    font-size: 12px; color: var(--muted-foreground);
    padding: 8px 0; font-style: italic;
  }
  .synth-preview {
    margin-top: 10px; padding: 8px 10px;
    background: hsl(222.2 47.4% 11.2%);
    color: hsl(210 40% 92%);
    border-radius: var(--radius-sm);
    font-family: var(--mono); font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap; word-break: break-all;
    max-height: 180px; overflow-y: auto;
  }
  .synth-preview .k { color: hsl(210 60% 80%); }
  .synth-preview .s { color: hsl(100 50% 70%); }
  .synth-preview .n { color: hsl(30 90% 70%); }

  /* Modal */
  .modal-backdrop {
    position: fixed; inset: 0; background: hsl(222 15% 5% / 0.5);
    display: none; align-items: center; justify-content: center;
    z-index: 100; padding: 20px;
  }
  .modal-backdrop.open { display: flex; }
  .modal {
    background: var(--background); border-radius: var(--radius-lg);
    width: 100%; max-width: 600px; max-height: 85vh;
    display: flex; flex-direction: column;
    border: 1px solid var(--border);
    box-shadow: 0 10px 40px hsl(222 47% 11% / 0.2);
    overflow: hidden;
  }
  .modal-head {
    padding: 14px 18px; border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
  }
  .modal-head h3 { font-size: 14px; font-weight: 600; }
  .modal-body { padding: 18px; overflow-y: auto; flex: 1; }
  .custom-select {
    position: relative;
  }
  .custom-select-trigger {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--background); font-size: 13px;
    transition: border-color 0.15s;
  }
  .custom-select-trigger:hover { border-color: var(--ring); }
  .custom-select-trigger.open { border-color: var(--ring); }
  .custom-select-trigger svg { width: 12px; height: 12px; color: var(--muted-foreground); flex-shrink: 0; }
  .custom-select-dropdown {
    display: none; position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px;
    z-index: 50; background: var(--background); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: 0 4px 16px hsl(222 47% 11% / 0.12);
    padding: 4px 0; max-height: 220px; overflow-y: auto; font-size: 14px;
  }
  .custom-select-dropdown.open { display: block; }
  .custom-select-option {
    padding: 6px 12px; cursor: pointer; transition: background 0.1s;
  }
  .custom-select-option:hover { background: var(--accent); }
  .custom-select-option.selected { background: hsl(217 91% 95%); font-weight: 500; }
  .custom-select-option.action { color: hsl(217 91% 50%); font-weight: 500; border-top: 1px solid var(--border); margin-top: 2px; padding-top: 8px; }
  .ref-multi-dd {
    position: fixed; z-index: 50; background: var(--background);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px hsl(222 47% 11% / 0.12); width: 280px; max-height: 320px;
    display: flex; flex-direction: column;
  }
  .ref-multi-dd .ref-multi-search {
    padding: 8px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  .ref-multi-dd .ref-multi-search input {
    width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--border);
    border-radius: 6px; font-size: 12px; outline: none; font-family: var(--font);
  }
  .ref-multi-dd .ref-multi-search input:focus { border-color: var(--ring); }
  .ref-multi-dd .ref-multi-list {
    overflow-y: auto; flex: 1; padding: 4px 0;
  }
  .ref-multi-dd .ref-multi-item {
    display: flex; align-items: center; gap: 8px; padding: 6px 12px;
    cursor: pointer; font-family: var(--mono); font-size: 12px;
    transition: background 0.1s;
  }
  .ref-multi-dd .ref-multi-item:hover { background: var(--accent); }
  .ref-multi-dd .ref-multi-item.checked { background: hsl(217 91% 95%); }
  .ref-multi-dd .ref-multi-item input { margin: 0; flex-shrink: 0; pointer-events: none; }
  .custom-select-trigger.disabled { opacity: 0.5; cursor: default; }
  .custom-select-trigger.disabled:hover { border-color: var(--border); }
  .modal-foot {
    padding: 12px 18px; border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; gap: 8px;
    background: var(--muted);
  }
  .yaml-view {
    font-family: var(--mono); font-size: 12px; line-height: 1.6;
    background: hsl(222.2 47.4% 11.2%); color: hsl(210 40% 92%);
    border-radius: var(--radius-sm); padding: 14px 16px;
    margin: 0; white-space: pre-wrap; word-break: break-word; overflow-y: auto;
    max-height: 70vh; tab-size: 2;
  }
  .yl-key { color: hsl(210 60% 80%); }
  .yl-colon { color: hsl(210 20% 60%); }
  .yl-str { color: hsl(100 50% 70%); }
  .yl-num { color: hsl(30 90% 70%); }
  .yl-bool { color: hsl(30 90% 70%); }
  .yl-comment { color: hsl(210 15% 50%); font-style: italic; }
  .yl-text { color: hsl(40 60% 72%); }
  .modal:has(.yaml-view) { max-width: 820px; }
  .code-block {
    font-family: var(--mono); font-size: 11.5px;
    background: var(--muted); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 10px;
    white-space: pre-wrap; word-break: break-all;
    max-height: 260px; overflow-y: auto; line-height: 1.5;
  }

  /* Misc */
  .add-row {
    display: grid; gap: 6px;
    grid-template-columns: 150px minmax(0, 1fr) 80px auto;
    align-items: center;
    margin-top: 10px;
  }
  .add-row .btn { height: 30px; }
  .spinner {
    width: 12px; height: 12px;
    border: 1.5px solid currentColor; border-bottom-color: transparent;
    border-radius: 50%; animation: spin 0.7s linear infinite;
    display: inline-block;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  @media (max-width: 1200px) {
    main { grid-template-columns: 280px 1fr; }
  }
  @media (max-width: 1024px) {
    main { grid-template-columns: 1fr; grid-template-rows: auto auto; }
    .col { border-right: none; border-bottom: 1px solid var(--border); max-height: 50vh; }
    .col:last-child { border-left: none; }
  }
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-thumb { background: hsl(214 25% 85%); border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: hsl(214 20% 75%); }
  ::-webkit-scrollbar-track { background: transparent; }

  /* ── Floating Claude chat ── */
  #chatFab {
    position: fixed; bottom: 24px; right: 24px;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--primary); color: var(--primary-foreground);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px hsl(222 47% 11% / 0.28), 0 1px 3px hsl(222 47% 11% / 0.12);
    z-index: 50;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  #chatFab:hover { transform: translateY(-2px); box-shadow: 0 8px 24px hsl(222 47% 11% / 0.35); }
  #chatFab svg { width: 20px; height: 20px; }

  #chatPanel {
    position: fixed; bottom: 24px; right: 24px;
    width: 400px; height: 580px; max-height: calc(100vh - 48px);
    background: var(--background); color: var(--foreground);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px hsl(222 47% 11% / 0.18), 0 2px 8px hsl(222 47% 11% / 0.06);
    display: flex; flex-direction: column;
    z-index: 60; overflow: hidden;
    animation: chatPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes chatPop { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
  #chatPanel.closed { display: none; }
  #chatPanel.expanded { width: min(840px, calc(100vw - 48px)); height: calc(100vh - 48px); }
  #chatPanel.dragover .chat-drop-overlay { display: flex; }

  .chat-drop-overlay {
    position: absolute; inset: 0; z-index: 5;
    display: none; flex-direction: column; align-items: center; justify-content: center;
    background: hsl(222 47% 11% / 0.5);
    backdrop-filter: blur(4px);
    color: white; pointer-events: none;
  }
  .chat-drop-overlay-inner {
    border: 2px dashed hsl(0 0% 100% / 0.6);
    border-radius: 12px;
    padding: 28px 36px;
    text-align: center;
  }
  .chat-drop-overlay svg { width: 32px; height: 32px; margin-bottom: 8px; opacity: 0.9; }
  .chat-drop-overlay .t { font-size: 14px; font-weight: 600; }
  .chat-drop-overlay .s { font-size: 11.5px; opacity: 0.75; margin-top: 4px; }

  .chat-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--background); flex-shrink: 0;
  }
  .chat-head-icon {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, hsl(222 47% 16%), hsl(222 47% 8%));
    color: hsl(45 100% 70%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px hsl(222 47% 11% / 0.15);
    flex-shrink: 0;
  }
  .chat-head-icon svg { width: 14px; height: 14px; }
  .chat-head-title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
  .chat-head-sub { font-size: 10.5px; color: var(--muted-foreground); margin-top: 1px; font-family: var(--mono); }
  .chat-head-actions {
    margin-left: auto; display: flex; gap: 1px;
    background: var(--muted); border-radius: 6px; padding: 2px;
  }
  .chat-head-actions .icon-btn { width: 24px; height: 24px; border-radius: 4px; }
  .chat-head-actions .icon-btn svg { width: 12px; height: 12px; }
  .chat-head-actions .icon-btn:hover { background: var(--background); color: var(--foreground); }
  .chat-head-actions .chat-layers-toggle.active,
  .chat-head-actions .icon-btn.active {
    background: hsl(217 91% 50%); color: white;
  }
  .chat-head-actions .chat-layers-toggle.active:hover,
  .chat-head-actions .icon-btn.active:hover {
    background: hsl(217 91% 45%); color: white;
  }

  /* Thread tab strip */
  .chat-threads {
    display: flex; gap: 3px;
    padding: 6px 10px;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    overflow-x: auto; overflow-y: hidden;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  .chat-threads::-webkit-scrollbar { height: 3px; }
  .chat-thread-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 4px 3px 9px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 11px; color: var(--muted-foreground);
    cursor: pointer; user-select: none;
    flex-shrink: 0; white-space: nowrap;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
    max-width: 200px;
  }
  .chat-thread-pill:hover { background: var(--muted); color: var(--foreground); }
  .chat-thread-pill.active {
    background: var(--primary); color: var(--primary-foreground);
    border-color: var(--primary);
  }
  .chat-thread-title {
    overflow: hidden; text-overflow: ellipsis;
    max-width: 150px;
  }
  .chat-thread-count {
    font-size: 9.5px; font-weight: 600;
    padding: 0 5px; border-radius: 7px;
    background: hsl(330 50% 92%); color: hsl(330 50% 35%);
    font-variant-numeric: tabular-nums;
  }
  .chat-thread-pill.active .chat-thread-count {
    background: hsl(0 0% 100% / 0.2); color: var(--primary-foreground);
  }
  .chat-thread-close {
    width: 15px; height: 15px; padding: 0;
    border: none; border-radius: 50%;
    background: transparent; color: inherit;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0.5;
  }
  .chat-thread-close:hover { opacity: 1; background: hsl(0 84% 60% / 0.25); }
  .chat-thread-close svg { width: 8px; height: 8px; }

  #chatMessages {
    flex: 1; overflow-y: auto;
    padding: 14px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .chat-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; text-align: center;
    color: var(--muted-foreground); font-size: 12.5px; line-height: 1.6;
    padding: 0 24px;
  }
  .chat-empty .icon-lg {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--muted); display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px; color: var(--foreground);
  }
  .chat-empty .icon-lg svg { width: 22px; height: 22px; }
  .chat-empty .examples {
    margin-top: 16px; display: flex; flex-direction: column; gap: 6px; width: 100%;
  }
  .chat-empty .ex-btn {
    text-align: left; padding: 8px 12px; border-radius: 6px;
    background: var(--muted); color: var(--foreground);
    border: 1px solid var(--border); cursor: pointer;
    font-size: 12px; font-family: inherit;
    transition: background 0.12s, border-color 0.12s;
  }
  .chat-empty .ex-btn:hover { background: var(--accent); border-color: var(--ring); }

  .chat-msg {
    max-width: 85%;
    padding: 9px 12px; border-radius: 12px;
    font-size: 13px; line-height: 1.5;
    word-wrap: break-word;
  }
  .chat-msg.user {
    align-self: flex-end;
    background: var(--primary); color: var(--primary-foreground);
    border-bottom-right-radius: 4px;
  }
  .chat-msg.assistant {
    align-self: flex-start;
    background: var(--muted); color: var(--foreground);
    border-bottom-left-radius: 4px;
    max-width: 92%;
  }
  .chat-msg.assistant:has(.chat-json-block) {
    width: 100%;
    max-width: 100%;
  }
  .chat-msg.assistant .chat-json-block { width: 100%; }
  .chat-msg.assistant .chat-json-block pre { width: 100%; box-sizing: border-box; }
  .chat-msg.assistant.error { background: hsl(0 84% 60% / 0.1); color: hsl(0 70% 38%); }
  .chat-msg.typing {
    color: var(--muted-foreground); display: flex; align-items: center; gap: 8px;
  }
  .chat-msg pre {
    background: hsl(222 47% 11%); color: hsl(210 40% 92%);
    padding: 8px 10px; border-radius: 6px;
    margin: 6px 0; overflow-x: auto;
    font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
    white-space: pre-wrap; word-break: break-all;
  }
  .chat-msg code {
    background: hsl(222 47% 11% / 0.06);
    padding: 1px 5px; border-radius: 3px;
    font-family: var(--mono); font-size: 12px;
  }
  .chat-msg.user code { background: hsl(0 0% 100% / 0.18); }
  .chat-msg p { margin: 0 0 6px; }
  .chat-msg p:last-child { margin-bottom: 0; }
  .chat-msg ul, .chat-msg ol { margin: 4px 0 4px 18px; padding: 0; }
  .chat-msg li { margin: 2px 0; }
  .chat-msg strong { font-weight: 600; }
  .chat-msg em { font-style: italic; }

  /* Headings */
  .chat-msg h1, .chat-msg h2, .chat-msg h3, .chat-msg h4, .chat-msg h5 {
    font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
    margin: 12px 0 6px;
  }
  .chat-msg h1 { font-size: 17px; }
  .chat-msg h2 { font-size: 15px; }
  .chat-msg h3 { font-size: 13.5px; }
  .chat-msg h4 { font-size: 12.5px; }
  .chat-msg h1:first-child, .chat-msg h2:first-child,
  .chat-msg h3:first-child, .chat-msg h4:first-child { margin-top: 0; }

  /* Tables (GFM) */
  .chat-msg .md-table-wrap {
    overflow-x: auto;
    margin: 8px 0;
    border-radius: 6px;
    max-width: 100%;
  }
  .chat-msg table {
    border-collapse: collapse;
    font-size: 11.5px;
    line-height: 1.4;
    width: max-content;
    max-width: 100%;
  }
  .chat-msg.user table { color: white; }
  .chat-msg th, .chat-msg td {
    padding: 5px 9px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    vertical-align: top;
  }
  .chat-msg th:last-child, .chat-msg td:last-child { border-right: none; }
  .chat-msg th {
    background: var(--muted);
    font-weight: 600;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
    white-space: nowrap;
    position: sticky; top: 0;
  }
  .chat-msg tr:last-child td { border-bottom: none; }
  .chat-msg tr:nth-child(even) td { background: hsl(210 40% 98%); }

  /* In user bubble (dark primary bg), flip table styling */
  .chat-msg.user .md-table-wrap { background: hsl(0 0% 100% / 0.06); }
  .chat-msg.user table { color: white; }
  .chat-msg.user th, .chat-msg.user td {
    border-bottom-color: hsl(0 0% 100% / 0.12);
    border-right-color: hsl(0 0% 100% / 0.12);
  }
  .chat-msg.user th { background: hsl(0 0% 100% / 0.08); color: hsl(0 0% 100% / 0.8); }
  .chat-msg.user tr:nth-child(even) td { background: hsl(0 0% 100% / 0.04); }

  /* Blockquote, hr, links */
  .chat-msg blockquote {
    border-left: 3px solid var(--border);
    padding: 2px 10px; margin: 6px 0;
    color: var(--muted-foreground);
    background: var(--muted);
    border-radius: 0 4px 4px 0;
  }
  .chat-msg.user blockquote {
    border-left-color: hsl(0 0% 100% / 0.3);
    background: hsl(0 0% 100% / 0.06);
    color: hsl(0 0% 100% / 0.85);
  }
  .chat-msg hr {
    border: none; border-top: 1px solid var(--border);
    margin: 10px 0;
  }
  .chat-msg.user hr { border-top-color: hsl(0 0% 100% / 0.2); }
  .chat-msg a {
    color: hsl(217 91% 50%);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .chat-msg.user a { color: white; }

  /* Better code blocks */
  .chat-msg pre {
    background: hsl(222 47% 11%);
    color: hsl(210 40% 92%);
    padding: 10px 12px; border-radius: 7px;
    margin: 8px 0;
    overflow-x: auto;
    font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
    border: 1px solid hsl(0 0% 100% / 0.06);
  }
  .chat-msg.user pre {
    background: hsl(0 0% 0% / 0.35);
    border-color: hsl(0 0% 100% / 0.1);
  }
  .chat-msg pre code {
    background: none; padding: 0; border-radius: 0;
    font-size: 11.5px; color: inherit;
    white-space: pre;
  }

  /* Mermaid diagrams */
  .mermaid-diagram {
    background: white;
    padding: 14px;
    border-radius: 8px;
    margin: 10px 0;
    border: 1px solid var(--border);
    overflow-x: auto;
    text-align: center;
    box-shadow: 0 1px 3px hsl(222 47% 11% / 0.04);
  }
  .mermaid-diagram svg {
    max-width: 100%;
    height: auto;
  }
  .mermaid-error {
    margin-top: 8px; padding: 6px 8px;
    background: hsl(0 84% 60% / 0.1);
    color: hsl(0 70% 38%);
    font-size: 11px; border-radius: 4px;
    font-family: var(--mono);
  }

  .chat-input-wrap {
    border-top: 1px solid var(--border);
    padding: 10px 12px 10px;
    background: var(--background);
    flex-shrink: 0;
  }
  .chat-attachments {
    display: none; flex-wrap: wrap; gap: 6px;
    margin-bottom: 8px;
  }
  .chat-attachments.has { display: flex; }
  .att-thumb {
    position: relative;
    width: 56px; height: 56px;
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--border);
    background: var(--muted);
  }
  .att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .att-thumb .att-rm {
    position: absolute; top: 2px; right: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: hsl(222 47% 11% / 0.85); color: white;
    border: 1px solid white;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; font-size: 11px; line-height: 1;
  }
  .att-thumb .att-rm:hover { background: hsl(0 84% 60%); }
  .att-thumb .att-rm svg { width: 9px; height: 9px; }

  .att-file {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 26px 6px 8px;
    height: 38px; max-width: 260px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--muted);
    font-size: 12px;
  }
  .att-file-ext {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 2px 6px;
    background: hsl(217 91% 50%); color: white;
    font-family: var(--mono); font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 3px;
    min-width: 32px;
  }
  .att-file-name {
    font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0; flex: 1;
  }
  .att-file-size { color: var(--muted-foreground); font-size: 10.5px; flex-shrink: 0; }
  .att-file .att-rm {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    width: 18px; height: 18px; border-radius: 50%;
    background: transparent; color: var(--muted-foreground);
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
  }
  .att-file .att-rm:hover { background: hsl(0 84% 60%); color: white; }
  .att-file .att-rm svg { width: 10px; height: 10px; }
  .msg-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
  .att-file.msg-file { padding-right: 10px; background: hsl(0 0% 100%); border-color: var(--border); }
  .chat-msg.user .att-file.msg-file { background: hsl(0 0% 100% / 0.15); border-color: hsl(0 0% 100% / 0.25); color: white; }
  .chat-msg.user .att-file.msg-file .att-file-size { color: hsl(0 0% 100% / 0.7); }

  .chat-input-shell {
    display: flex; flex-direction: column;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--background);
    transition: border-color 0.12s, box-shadow 0.12s;
  }
  .chat-input-shell:focus-within {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px hsl(222.2 84% 4.9% / 0.06);
  }
  .chat-input-shell textarea {
    width: 100%;
    border: none;
    padding: 10px 12px 4px;
    font-size: 13.5px; font-family: inherit;
    background: transparent; color: var(--foreground);
    outline: none; resize: none;
    min-height: 36px; max-height: 160px;
    line-height: 1.5; box-sizing: border-box;
  }
  .chat-input-shell textarea::placeholder { color: var(--muted-foreground); }
  .chat-input-toolbar {
    display: flex; align-items: center; gap: 4px;
    padding: 4px 6px 6px 6px;
  }
  .chat-tool-btn {
    width: 28px; height: 28px; padding: 0;
    border-radius: 6px; border: none; cursor: pointer;
    background: transparent; color: var(--muted-foreground);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.12s, color 0.12s;
  }
  .chat-tool-btn:hover { background: var(--muted); color: var(--foreground); }
  .chat-tool-btn svg { width: 14px; height: 14px; }
  .chat-send-btn {
    margin-left: auto;
    width: 30px; height: 30px;
    border-radius: 8px; border: none;
    background: var(--primary); color: var(--primary-foreground);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.12s, transform 0.12s;
  }
  .chat-send-btn:hover:not(:disabled) { background: hsl(222.2 47.4% 22%); transform: scale(1.05); }
  .chat-send-btn:disabled { opacity: 0.35; cursor: not-allowed; }
  .chat-send-btn svg { width: 13px; height: 13px; }

  .chat-hint {
    font-size: 10.5px; color: var(--muted-foreground);
    margin-top: 8px; padding: 0 2px;
    display: flex; justify-content: space-between; align-items: center;
  }
  .chat-hint kbd {
    font-family: var(--mono); font-size: 9.5px;
    background: var(--muted); border: 1px solid var(--border);
    padding: 1px 5px; border-radius: 3px;
    color: var(--muted-foreground);
  }

  /* Image inside chat message bubble */
  .chat-msg .msg-image {
    display: block;
    max-width: 100%;
    max-height: 220px;
    border-radius: 8px;
    margin: 0 0 6px;
    border: 1px solid hsl(0 0% 100% / 0.15);
  }
  .chat-msg.assistant .msg-image { border-color: var(--border); }

  @media (max-width: 540px) {
    #chatPanel { width: calc(100vw - 24px); right: 12px; bottom: 12px; }
  }

  /* ── Layer Structure Editor (full modal) ── */
  #layerEditor {
    position: fixed; inset: 0; z-index: 90;
    background: hsl(222 15% 5% / 0.55);
    backdrop-filter: blur(2px);
    display: none; align-items: center; justify-content: center;
    padding: 16px;
  }
  #layerEditor.open { display: flex; animation: chatPop 0.18s ease; }
  #iskEditor {
    position: fixed; inset: 0; z-index: 90;
    background: hsl(222 15% 5% / 0.55);
    backdrop-filter: blur(2px);
    display: none; align-items: center; justify-content: center;
    padding: 16px;
  }
  #iskEditor.open { display: flex; animation: chatPop 0.18s ease; }
  .le-root {
    width: 100%; max-width: 2100px;
    height: calc(100vh - 32px);
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px hsl(222 47% 11% / 0.35);
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .le-top-bar {
    flex-shrink: 0;
    background: var(--background);
  }
  .le-main-grid {
    flex: 1; min-height: 0;
    display: grid;
    grid-template-columns: calc(50% + 187px) calc(50% - 187px);
    overflow: hidden;
  }
  .le-shell {
    display: flex; flex-direction: column;
    overflow: hidden;
    min-width: 0;
    border-right: 1px solid var(--border);
    position: relative;
  }
  .le-chat-slot {
    display: flex; flex-direction: column;
    overflow: hidden;
    background: hsl(210 40% 98%);
    min-width: 0;
  }
  .le-chat-slot > #chatPanel.docked-le {
    position: static !important;
    width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important;
    right: auto !important; bottom: auto !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    background: var(--background) !important;
  }
  /* Hide chat head entirely when docked — top-bar already has close and actions */
  #chatPanel.docked-le .chat-head { display: none !important; }

  /* Row 2 — align exactly with le-tabbar */
  #chatPanel.docked-le .chat-threads {
    height: 46px; box-sizing: border-box;
    padding: 0 10px;
    background: var(--muted);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center;
    overflow-x: auto; overflow-y: hidden;
    gap: 4px;
  }

  /* Row 3 — align with le-tree-head / le-data-nav */
  #chatPanel.docked-le .chat-dock-toolbar {
    display: flex; align-items: center; gap: 8px;
    padding: 0 14px; height: 40px; box-sizing: border-box;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    font-size: 11.5px; color: var(--muted-foreground);
  }
  #chatPanel.docked-le .chat-dock-toolbar .toggle-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 12px;
    background: var(--muted); border: 1px solid var(--border);
    font-size: 11px; font-weight: 500; cursor: pointer;
    color: var(--muted-foreground);
  }
  #chatPanel.docked-le .chat-dock-toolbar .toggle-chip svg { width: 11px; height: 11px; }
  #chatPanel.docked-le .chat-dock-toolbar .toggle-chip.active {
    background: hsl(217 91% 95%); border-color: hsl(217 91% 70%); color: hsl(217 91% 30%);
  }
  #chatPanel.docked-le .chat-dock-toolbar .hint { margin-left: auto; font-size: 10.5px; }

  .le-shell.drop-replace-layer {
    outline: 3px dashed hsl(25 95% 53%);
    outline-offset: -4px;
  }
  .le-shell.drop-replace-layer::after {
    content: "↻ Drop JSON to replace this entire layer (schema + data)";
    position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
    background: hsl(25 95% 53%); color: white;
    padding: 8px 18px; border-radius: 20px;
    font-size: 13px; font-weight: 600;
    box-shadow: 0 4px 14px hsl(25 95% 35% / 0.35);
    pointer-events: none; z-index: 10;
  }
  .le-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 14px;
    background: var(--background);
    flex-shrink: 0;
  }
  .le-head-icon {
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--muted);
    display: flex; align-items: center; justify-content: center;
    color: var(--foreground);
    flex-shrink: 0;
  }
  .le-head-icon svg { width: 18px; height: 18px; }
  .le-head-info { flex: 1; min-width: 0; }
  .le-head-name {
    font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
    display: flex; align-items: center; gap: 8px;
  }
  .le-head-meta {
    font-size: 11.5px; color: var(--muted-foreground); margin-top: 2px;
    display: flex; gap: 10px; align-items: center;
  }
  .le-head-meta code {
    font-family: var(--mono); background: var(--muted);
    padding: 1px 5px; border-radius: 3px;
  }
  .le-head-actions { display: flex; gap: 6px; }

  /* Tab bar */
  .le-tabbar {
    display: flex; align-items: center; gap: 10px;
    padding: 0 18px; height: 46px; box-sizing: border-box;
    background: var(--muted);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .le-tabs {
    display: flex; gap: 2px;
    background: var(--background);
    padding: 3px;
    border-radius: 7px;
    border: 1px solid var(--border);
  }
  .le-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    border: none; border-radius: 5px;
    background: transparent;
    color: var(--muted-foreground);
    font-family: inherit; font-size: 12.5px; font-weight: 500;
    cursor: pointer;
    transition: all 0.12s;
  }
  .le-tab svg { width: 12px; height: 12px; }
  .le-tab:hover { color: var(--foreground); }
  .le-tab.active {
    background: var(--primary); color: var(--primary-foreground);
    box-shadow: 0 1px 2px hsl(222 47% 11% / 0.1);
  }
  .le-tab-count {
    font-size: 10px; font-weight: 600;
    padding: 0 5px; border-radius: 8px;
    background: hsl(0 0% 100% / 0.15);
    color: inherit;
  }
  .le-tab:not(.active) .le-tab-count {
    background: var(--muted); color: var(--muted-foreground);
  }

  .le-body {
    flex: 1; display: grid;
    grid-template-columns: minmax(360px, 1fr) 380px;
    overflow: hidden; min-height: 0;
  }

  /* Data tab */
  .le-data-nav {
    display: flex; align-items: center; gap: 8px;
    padding: 0 18px; height: 40px; box-sizing: border-box;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .le-data-rowlabel { font-size: 13px; }
  .le-data-form {
    flex: 1; overflow-y: auto;
    padding: 16px 20px 24px;
    background: hsl(210 40% 98%);
    min-height: 0;
  }
  /* make Data/JSON tab bodies fill remaining height in shell */
  .le-shell > .le-data-nav { flex-shrink: 0; }
  .le-shell > .le-data-form { flex: 1; min-height: 0; overflow: auto; }
  .le-shell > .le-json-toolbar { flex-shrink: 0; }
  .le-shell > .le-json-wrap { flex: 1; min-height: 0; }
  .le-shell > .le-data-empty { flex: 1; min-height: 0; overflow: auto; }
  .le-data-field {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .le-data-field.is-container {
    padding: 10px 12px 12px;
    background: hsl(217 91% 97%);
    border-color: hsl(217 91% 85%);
  }
  .le-data-label-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
  }
  .le-data-label {
    font-family: var(--mono); font-size: 12.5px; font-weight: 600;
    color: var(--foreground);
  }
  .le-data-type {
    font-size: 10.5px; color: var(--muted-foreground);
    background: var(--muted); padding: 1px 6px; border-radius: 8px;
  }
  .is-container > .le-data-label-row .le-data-label { color: hsl(217 91% 35%); }
  .le-data-children {
    margin-top: 8px;
    padding-left: 10px;
    border-left: 2px solid hsl(217 91% 80%);
  }
  .le-data-empty-arr {
    font-size: 11.5px; color: var(--muted-foreground);
    font-style: italic; padding: 4px 0;
  }
  .le-data-item {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 6px;
    overflow: hidden;
  }
  .le-data-item > summary {
    list-style: none;
    cursor: pointer;
    padding: 7px 10px;
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; user-select: none;
    background: var(--muted);
  }
  .le-data-item > summary::-webkit-details-marker { display: none; }
  .le-data-item > summary::before {
    content: ''; width: 0; height: 0;
    border-left: 5px solid var(--muted-foreground);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.15s;
  }
  .le-data-item[open] > summary::before { transform: rotate(90deg); }
  .le-data-item-label { font-family: var(--mono); font-weight: 600; flex: 1; }
  .le-data-item > .le-data-children { padding: 10px 12px; border-left: none; margin-top: 0; }

  /* Draggable JSON code block in chat */
  .chat-json-block {
    position: relative;
    margin: 6px 0;
    border-radius: 6px;
    overflow: hidden;
  }
  .chat-json-toolbar {
    display: flex; gap: 6px; align-items: center;
    padding: 6px 8px;
    background: hsl(217 30% 18%);
    font-family: var(--font);
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .chat-json-toolbar-top { border-bottom: 1px solid hsl(217 30% 26%); }
  .chat-json-toolbar-bottom { border-top: 1px solid hsl(217 30% 26%); }
  .chat-json-toolbar button { white-space: nowrap; flex-shrink: 0; }
  .chat-json-toolbar .label {
    font-size: 10.5px; font-weight: 600;
    color: hsl(217 30% 70%);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-right: auto;
  }
  .chat-json-toolbar button {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    border: 1px solid hsl(217 30% 35%);
    background: hsl(217 30% 22%);
    color: hsl(0 0% 95%);
    border-radius: 12px;
    font-size: 11px; font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    user-select: none;
  }
  .chat-json-toolbar button:hover { background: hsl(217 30% 28%); }
  .chat-json-toolbar button svg { width: 11px; height: 11px; }
  .chat-json-toolbar .drag-layer-btn {
    background: hsl(217 91% 50%);
    border-color: hsl(217 91% 55%);
    cursor: grab;
  }
  .chat-json-toolbar .drag-layer-btn:hover { background: hsl(217 91% 56%); }
  .chat-json-toolbar .drag-layer-btn:active { cursor: grabbing; }
  .chat-json-block pre { margin: 0; border-radius: 0; }
  .chat-json-block.dragging pre { opacity: 0.5; }

  /* Drop overlay on layers sidebar */
  #colLayers { position: relative; }
  #colLayers.drop-target::after {
    content: "Drop JSON to create new layer · drop onto a card to replace";
    position: absolute; inset: 0;
    background: hsl(217 91% 50% / 0.08);
    border: 2px dashed hsl(217 91% 50%);
    border-radius: 8px;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 12px;
    color: hsl(217 91% 30%);
    font-size: 12.5px; font-weight: 600;
    pointer-events: none;
    z-index: 50;
    margin: 6px;
  }
  #colLayers.hover-card.drop-target::after { opacity: 0.25; }
  .layer-card.drop-replace {
    outline: 2px solid hsl(25 95% 53%);
    outline-offset: -2px;
    background: hsl(25 95% 97%) !important;
    position: relative;
  }
  .layer-card.drop-replace::after {
    content: "↻ Replace this layer";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: hsl(25 95% 53% / 0.12);
    color: hsl(25 95% 35%);
    font-weight: 700; font-size: 12.5px;
    border-radius: inherit;
    pointer-events: none;
    letter-spacing: 0.02em;
  }

  /* Cross-layer linked field */
  .le-link-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; color: hsl(217 91% 35%);
    background: hsl(217 91% 94%);
    border: 1px solid hsl(217 91% 82%);
    padding: 1px 6px; border-radius: 8px;
    font-family: var(--mono);
  }
  .le-link-badge svg { width: 10px; height: 10px; }
  .le-link-badge .unlink {
    cursor: pointer; color: hsl(217 91% 45%); opacity: 0.7;
    display: inline-flex; align-items: center;
  }
  .le-link-badge .unlink:hover { opacity: 1; }

  .ref-chips {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 4px 4px 4px 6px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 6px;
    min-height: 32px;
    align-items: center;
  }
  .ref-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 4px 2px 8px;
    background: hsl(217 91% 95%);
    border: 1px solid hsl(217 91% 82%);
    border-radius: 10px;
    font-family: var(--mono); font-size: 11.5px;
    color: hsl(217 91% 25%);
    max-width: 100%;
  }
  .ref-chip.is-missing {
    background: hsl(0 80% 96%);
    border-color: hsl(0 70% 82%);
    color: hsl(0 70% 35%);
  }
  .ref-chip .chip-label {
    max-width: 200px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ref-chip .chip-meta {
    font-family: var(--font);
    color: var(--muted-foreground);
    font-size: 11px;
    max-width: 220px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ref-chip .chip-x {
    cursor: pointer;
    width: 16px; height: 16px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: hsl(217 91% 35%);
    opacity: 0.55;
  }
  .ref-chip .chip-x:hover { opacity: 1; background: hsl(217 91% 88%); }
  .ref-chip .chip-x svg { width: 10px; height: 10px; }

  .ref-add-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    background: transparent;
    border: 1px dashed hsl(217 91% 70%);
    color: hsl(217 91% 40%);
    border-radius: 10px;
    font-size: 11.5px; font-weight: 500;
    cursor: pointer;
  }
  .ref-add-btn:hover { background: hsl(217 91% 96%); }
  .ref-add-btn svg { width: 11px; height: 11px; }

  .ref-unlinked-hint {
    font-size: 11px; color: var(--muted-foreground);
    margin-top: 4px;
  }

  /* Value picker modal */
  .picker-wrap { display: flex; flex-direction: column; gap: 10px; min-height: 420px; }
  .picker-target {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 10px;
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12.5px;
  }
  .picker-target .lbl { color: var(--muted-foreground); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; flex-shrink: 0; }
  .picker-target code { font-family: var(--mono); font-size: 11.5px; background: var(--background); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--border); white-space: nowrap; }
  .picker-target .change-btn { margin-left: auto; flex-shrink: 0; }


  .picker-search {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12.5px; font-family: inherit;
  }
  .picker-list {
    flex: 1; overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    max-height: 50vh;
    min-height: 200px;
  }
  .picker-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: 12.5px;
  }
  .picker-row:last-child { border-bottom: none; }
  .picker-row:hover { background: var(--muted); }
  .picker-row.selected { background: hsl(217 91% 95%); }
  .picker-row input[type="checkbox"],
  .picker-row input[type="radio"] { accent-color: hsl(217 91% 50%); }
  .picker-row .val { font-family: var(--mono); font-weight: 600; min-width: 110px; color: hsl(217 91% 25%); }
  .picker-row .meta { color: var(--muted-foreground); font-size: 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .picker-footer-info { font-size: 11.5px; color: var(--muted-foreground); padding: 4px 2px; }
  .picker-empty { text-align: center; color: var(--muted-foreground); padding: 40px 20px; font-size: 12.5px; }

  /* Target path picker (layer + field tree) */
  .tp-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 10px; min-height: 360px; }
  .tp-col {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow-y: auto;
    background: var(--background);
    min-height: 320px;
    max-height: 50vh;
  }
  .tp-item {
    padding: 7px 10px;
    font-size: 12.5px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
  }
  .tp-item:last-child { border-bottom: none; }
  .tp-item:hover { background: var(--muted); }
  .tp-item.selected { background: hsl(217 91% 95%); color: hsl(217 91% 25%); font-weight: 500; }
  .tp-item .tp-meta { font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }
  .tp-item .tp-path { font-family: var(--mono); font-size: 11.5px; }
  .tp-item .tp-type { font-size: 10.5px; padding: 0 5px; background: var(--muted); border-radius: 6px; margin-left: 6px; }
  .tp-empty { text-align: center; color: var(--muted-foreground); padding: 30px 15px; font-size: 12px; }
  .tp-head {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--muted-foreground);
    padding: 7px 10px; background: var(--muted);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0;
  }

  /* Link button in Structure tab */
  .schema-link-row {
    display: flex; align-items: center; gap: 6px;
    padding: 2px 6px 2px 6px;
    margin-top: 4px;
    font-size: 11.5px;
  }
  .schema-link-row .link-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 10px;
    font-size: 11px; color: var(--muted-foreground);
    cursor: pointer;
    font-family: inherit;
  }
  .schema-link-row .link-btn:hover {
    border-color: hsl(217 91% 70%);
    color: hsl(217 91% 40%);
    background: hsl(217 91% 98%);
  }
  .schema-link-row .link-btn svg { width: 11px; height: 11px; }
  .schema-link-row.is-linked .link-btn {
    border-style: solid;
    border-color: hsl(217 91% 75%);
    background: hsl(217 91% 96%);
    color: hsl(217 91% 30%);
  }
  .schema-link-row .unlink-btn {
    border: none; background: transparent;
    color: var(--muted-foreground); cursor: pointer;
    padding: 2px 4px; border-radius: 4px;
  }
  .schema-link-row .unlink-btn:hover { color: var(--destructive); background: var(--muted); }
  .schema-link-row .unlink-btn svg { width: 11px; height: 11px; }

  /* Outline tab */
  .outline-layout {
    display: flex; flex: 1; min-height: 0; overflow: hidden;
  }
  .outline-sidebar {
    width: 375px; flex-shrink: 0;
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    overflow: hidden; background: var(--background);
  }
  .outline-sidebar-head {
    padding: 0 10px; height: 40px; box-sizing: border-box;
    display: flex; gap: 6px; align-items: center;
    border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  .outline-sidebar-head input {
    flex: 1; padding: 3px 8px; font-size: 11px;
    border: 1px solid var(--border); border-radius: 5px;
    background: var(--muted); outline: none; font-family: var(--mono);
  }
  .outline-sidebar-head input:focus { border-color: var(--ring); }
  .outline-sidebar-body {
    flex: 1; overflow-y: auto; padding: 6px 0;
  }
  .outline-sidebar .le-node {
    height: 32px;
    padding: 0 8px;
    box-sizing: border-box;
  }
  .outline-sidebar .le-node-chev.empty {
    display: none;
  }
  .outline-sidebar .le-node:has(> .le-node-chev.empty) {
    padding-left: 28px;
  }
  .outline-sidebar .le-children {
    margin-left: 12px;
    padding-left: 6px;
  }
  .outline-sidebar .le-tree-add {
    margin: 4px 0 0; padding: 0 8px; font-size: 11px;
    height: 32px;
    box-sizing: border-box;
  }
  .outline-sidebar .le-node input[type="checkbox"] {
    margin: 0; flex-shrink: 0; accent-color: hsl(217 91% 50%);
    width: 13px; height: 13px;
  }
  .outline-sidebar .le-node .tn-filter {
    flex-shrink: 0; border: none; background: none;
    cursor: pointer; opacity: 0; font-size: 9px; padding: 0 2px;
    color: var(--muted-foreground);
  }
  .outline-sidebar .le-node:hover .tn-filter { opacity: 0.6; }
  .outline-sidebar .le-node .tn-filter:hover { opacity: 1; }
  .outline-sidebar .le-node .tn-filter.has-vf { opacity: 1; color: hsl(30 90% 50%); }
  .outline-sidebar .le-node .tn-actions {
    display: none; gap: 1px; flex-shrink: 0; margin-left: auto;
  }
  .outline-sidebar .le-node:hover .tn-actions { display: flex; }
  .outline-sidebar .le-node .tn-actions button {
    border: none; background: none; cursor: pointer; padding: 1px 3px;
    color: var(--muted-foreground); opacity: 0.5; line-height: 1;
  }
  .outline-sidebar .le-node .tn-actions button:hover { opacity: 1; }
  .outline-sidebar .le-node .tn-actions button.btn-danger:hover { color: hsl(0 72% 51%); }
  .outline-sidebar .le-node .tn-actions svg { width: 12px; height: 12px; }
  .outline-main {
    flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  }
  .outline-bar {
    padding: 0 16px; height: 40px; box-sizing: border-box;
    display: flex; align-items: center;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .outline-bar-actions {
    display: flex; gap: 6px; align-items: center;
    width: 100%;
  }
  .outline-pills-row {
    display: flex; gap: 6px; flex-wrap: wrap;
    align-items: center;
  }
  .outline-pills-label {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--muted-foreground);
    margin-right: 4px;
  }
  .outline-search {
    padding: 3px 8px; font-size: 11.5px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--background); color: var(--foreground);
    font-family: var(--mono); width: 140px;
    outline: none;
  }
  .outline-search:focus { border-color: var(--ring); }
  .outline-pill.pill-hidden { display: none; }
  .outline-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px 3px 6px;
    background: var(--muted); border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 11.5px; color: var(--muted-foreground);
    font-family: var(--mono);
    cursor: pointer; user-select: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
  }
  .outline-pill:hover { background: var(--accent); color: var(--foreground); }
  .outline-pill.active {
    background: hsl(217 91% 95%);
    border-color: hsl(217 91% 70%);
    color: hsl(217 91% 30%);
  }
  .outline-pill.active:hover { background: hsl(217 91% 90%); }
  .outline-pill.has-filter { border-color: hsl(30 90% 50%); background: hsl(30 90% 95%); }
  .outline-pill input { margin: 0; accent-color: hsl(217 91% 50%); width: 12px; height: 12px; }
  .outline-pill-filter {
    margin-left: 2px; padding: 0 2px; border: none; background: none;
    cursor: pointer; opacity: 0.5; font-size: 11px; line-height: 1;
  }
  .outline-pill-filter:hover { opacity: 1; }
  .outline-pill-parent {
    font-size: 9.5px; opacity: 0.55; margin-left: 2px;
  }
  .outline-vf-popup {
    position: absolute; z-index: 900;
    background: var(--background); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: 0 4px 16px hsl(222 47% 11% / 0.12);
    padding: 0; min-width: 200px; max-width: 360px;
    max-height: 360px;
    font-size: 12px;
    display: flex; flex-direction: column;
  }
  .outline-vf-popup .vf-list {
    flex: 1; overflow-y: auto; padding: 4px 0;
  }
  .outline-vf-popup .vf-search {
    width: calc(100% - 16px); margin: 2px 8px 4px; padding: 4px 8px;
    font-size: 11.5px; border: 1px solid var(--border); border-radius: 5px;
    background: var(--muted); outline: none;
  }
  .outline-vf-popup .vf-search:focus { border-color: var(--ring); }
  .outline-vf-popup label {
    display: flex; align-items: flex-start; gap: 6px;
    padding: 3px 10px; cursor: pointer; font-family: var(--mono);
    word-break: break-word; line-height: 1.4;
  }
  .outline-vf-popup label:hover { background: var(--accent); }
  .outline-vf-popup label input { margin-top: 3px; flex-shrink: 0; }
  .outline-vf-popup .vf-search-wrap {
    padding: 6px 8px 4px; flex-shrink: 0;
  }
  .outline-vf-popup .vf-search-wrap .vf-search {
    width: 100%; margin: 0;
  }
  .outline-vf-popup .vf-actions {
    display: flex; gap: 6px; padding: 6px 10px;
    border-top: 1px solid var(--border);
    flex-shrink: 0; justify-content: flex-end;
  }
  .outline-vf-popup .vf-actions button {
    font-size: 10.5px; padding: 2px 8px;
    border: 1px solid var(--border); border-radius: 4px;
    background: var(--background); cursor: pointer;
  }
  .outline-vf-popup .vf-actions button:hover { background: var(--accent); }
  .outline-body {
    flex: 1; overflow-y: auto;
    padding: 16px 20px 30px;
    background: hsl(210 40% 98%);
    min-height: 0;
  }
  .le-shell > .outline-layout { flex: 1; overflow: hidden; min-height: 0; }
  .le-shell > .outline-bar { flex-shrink: 0; }
  .le-shell > .outline-body { flex: 1; overflow: auto; min-height: 0; }

  .outline-row {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
  }
  .outline-row-head {
    padding: 6px 12px;
    background: var(--muted);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
  }
  .outline-row-idx {
    font-family: var(--mono); font-size: 11px; font-weight: 600;
    color: var(--muted-foreground);
    padding: 1px 6px; border-radius: 4px;
    background: var(--background);
  }
  .outline-row-body {
    padding: 8px 12px 10px;
    font-size: 13px; line-height: 1.5;
  }
  .outline-container-head {
    font-family: var(--mono); font-size: 11.5px;
    color: hsl(217 91% 40%); font-weight: 600;
    margin-top: 6px;
  }
  .outline-count { color: var(--muted-foreground); font-weight: 500; }
  .outline-array-item {
    display: flex; align-items: flex-start;
    margin-top: 3px;
  }
  .outline-item-bullet {
    color: hsl(217 91% 50%); font-weight: 700;
    flex-shrink: 0; font-family: var(--mono);
  }
  .outline-item-body { flex: 1; min-width: 0; }
  .outline-leaf {
    display: flex; align-items: baseline; gap: 8px;
    padding: 2px 0;
  }
  .outline-leaf-name {
    font-family: var(--mono); font-size: 11px;
    color: var(--muted-foreground);
    min-width: 80px;
    flex-shrink: 0;
  }
  .outline-leaf-value {
    color: var(--foreground);
    word-break: break-word;
  }
  .outline-empty { color: var(--muted-foreground); font-style: italic; font-weight: 400; }
  .outline-empty-row {
    color: var(--muted-foreground); font-style: italic; font-size: 12px;
  }
  .outline-node { margin-bottom: 2px; }
  .outline-leaf-ref { flex-wrap: wrap; }
  .outline-leaf-ref .ref-chips { flex: 1; min-width: 0; }
  .outline-leaf-edit {
    flex: 1; min-width: 0;
    font-size: 13px; font-family: inherit;
    color: var(--foreground);
    border: 1px solid transparent; border-radius: 3px;
    padding: 1px 4px; margin: -1px 0;
    background: transparent;
    word-break: break-word;
    line-height: 1.5;
  }
  .outline-leaf-edit:hover { border-color: var(--border); }
  .outline-leaf-edit:focus {
    outline: none;
    border-color: var(--ring);
    background: var(--background);
  }
  textarea.outline-leaf-edit {
    resize: vertical; min-height: 40px;
    field-sizing: content;
  }

  /* JSON tab */
  .le-json-toolbar {
    display: flex; align-items: center; gap: 6px;
    padding: 0 18px; height: 40px; box-sizing: border-box;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .le-json-toolbar .sql-status { margin-left: auto; font-family: inherit; }
  .le-json-wrap {
    display: flex; flex: 1; position: relative; overflow: auto;
    background: hsl(220 15% 10%);
  }
  .le-json-highlight, .le-json-editor {
    font-family: var(--mono); font-size: 12px; line-height: 1.6;
    padding: 12px 16px; margin: 0;
    white-space: pre; word-wrap: normal;
    position: absolute; inset: 0;
    width: 100%; height: 100%; box-sizing: border-box;
    overflow: auto;
  }
  .le-json-highlight {
    color: hsl(220 14% 60%); pointer-events: none; z-index: 1;
    background: transparent;
  }
  .le-json-highlight .k { color: hsl(210 60% 75%); }
  .le-json-highlight .s { color: hsl(100 50% 65%); }
  .le-json-highlight .n { color: hsl(30 90% 65%); }
  .le-json-editor {
    color: transparent; caret-color: white;
    background: transparent; z-index: 2;
    border: none; outline: none; resize: none;
    -webkit-text-fill-color: transparent;
  }
  .le-json-editor::selection { background: hsl(217 91% 60% / 0.3); }
  .le-json-editor::-moz-selection { background: hsl(217 91% 60% / 0.3); }
  .le-tree-pane {
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    overflow: hidden; min-height: 0;
  }
  .le-tree-head {
    display: flex; align-items: center;
    padding: 0 14px; height: 40px; box-sizing: border-box; gap: 10px;
    border-bottom: 1px solid var(--border);
    background: var(--muted);
    flex-shrink: 0;
  }
  .le-tree-head .label {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--muted-foreground);
  }
  .le-tree-head .count {
    font-size: 11px; color: var(--muted-foreground);
    background: var(--background); padding: 1px 7px; border-radius: 9px;
    font-variant-numeric: tabular-nums;
  }
  .le-tree-head .actions { margin-left: auto; display: flex; gap: 4px; }

  .le-tree {
    flex: 1; overflow: auto;
    padding: 8px 10px;
    font-family: var(--mono); font-size: 12.5px;
  }
  .le-node {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 8px;
    border-radius: 5px;
    cursor: pointer;
    line-height: 1.4;
    user-select: none;
    border: 1px solid transparent;
    transition: background 0.1s;
  }
  .le-node:hover { background: var(--accent); }
  .le-node.selected { background: hsl(217 91% 95%); border-color: hsl(217 91% 75%); }
  .le-node-chev {
    width: 14px; height: 14px; flex-shrink: 0;
    color: var(--muted-foreground);
    transition: transform 0.15s;
    display: flex; align-items: center; justify-content: center;
  }
  .le-node-chev.empty { visibility: hidden; }
  .le-node.expanded > .le-node-chev { transform: rotate(90deg); }
  .le-node-icon {
    width: 14px; height: 14px; flex-shrink: 0;
    color: var(--muted-foreground);
    display: flex; align-items: center; justify-content: center;
  }
  .le-node-icon.is-container { color: hsl(217 91% 50%); }
  .le-node-icon.is-pk { color: hsl(38 92% 35%); }
  .le-node-icon.is-fk { color: hsl(217 91% 50%); }
  .le-node-name {
    color: var(--foreground); font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
  }
  .le-node-type {
    color: var(--muted-foreground); font-size: 11px;
    padding: 1px 6px; background: var(--muted); border-radius: 8px;
    flex-shrink: 0;
  }
  .le-node-key {
    font-size: 9.5px; font-weight: 700;
    padding: 1px 5px; border-radius: 4px;
    flex-shrink: 0;
    letter-spacing: 0.04em;
  }
  .le-node-key.pk { background: hsl(38 92% 50% / 0.15); color: hsl(30 85% 36%); }
  .le-node-key.fk { background: hsl(217 91% 50% / 0.15); color: hsl(217 91% 35%); }
  .le-children {
    margin-left: 16px;
    padding-left: 8px;
    border-left: 1.5px dashed hsl(217 91% 88%);
    display: none;
  }
  .le-node.expanded + .le-children { display: block; }

  .le-tree-add {
    margin: 8px 0 4px;
    padding: 8px;
    border: 1px dashed var(--border);
    border-radius: 6px;
    background: transparent; cursor: pointer;
    font-family: inherit; font-size: 12px; color: var(--muted-foreground);
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 5px;
  }
  .le-tree-add:hover { background: var(--accent); color: var(--foreground); border-color: var(--ring); }
  .le-tree-add svg { width: 12px; height: 12px; }

  .le-tree-empty {
    padding: 30px 20px; text-align: center;
    color: var(--muted-foreground); font-size: 12.5px;
    font-family: 'Inter', sans-serif;
  }

  /* Details pane */
  .le-detail-pane {
    display: flex; flex-direction: column;
    overflow: hidden; min-height: 0;
    background: hsl(210 40% 98%);
  }
  .le-detail-head {
    padding: 0 14px; height: 40px; box-sizing: border-box;
    border-bottom: 1px solid var(--border);
    background: var(--muted);
    flex-shrink: 0;
    display: flex; align-items: center; gap: 8px;
  }
  .le-detail-head .label {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--muted-foreground);
  }
  .le-detail-head .actions { margin-left: auto; display: flex; gap: 3px; }
  .le-detail-body {
    flex: 1; overflow-y: auto;
    padding: 16px;
  }
  .le-empty-detail {
    text-align: center; padding: 60px 20px;
    color: var(--muted-foreground); font-size: 12.5px;
  }
  .le-empty-detail .icon-lg {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--muted); margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted-foreground);
  }
  .le-empty-detail .icon-lg svg { width: 20px; height: 20px; }
  .le-form-row { margin-bottom: 14px; }
  .le-form-row .label { display: block; margin-bottom: 5px; }
  .le-form-row .row-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  }
  .le-fk-block {
    margin-top: 10px; padding: 10px;
    background: hsl(217 91% 95%); border: 1px solid hsl(217 91% 80%);
    border-radius: 6px;
  }
  .le-fk-block .label { color: hsl(217 91% 35%); }

  /* Synthetic preview */
  .le-synth {
    border-top: 1px solid var(--border);
    background: hsl(222.2 47.4% 11.2%);
    color: hsl(210 40% 92%);
    flex-shrink: 0;
    max-height: 240px;
    display: flex; flex-direction: column;
    transition: max-height 0.2s;
  }
  .le-synth.collapsed { max-height: 36px; }
  .le-synth.collapsed .le-synth-body { display: none; }
  .le-synth-head {
    padding: 8px 14px;
    display: flex; align-items: center; gap: 8px;
    cursor: pointer;
    flex-shrink: 0;
    border-bottom: 1px solid hsl(0 0% 100% / 0.08);
  }
  .le-synth-head .label {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: hsl(210 40% 70%);
  }
  .le-synth-head .actions { margin-left: auto; display: flex; gap: 4px; }
  .le-synth-head .actions .icon-btn {
    color: hsl(210 40% 70%);
  }
  .le-synth-head .actions .icon-btn:hover { color: white; background: hsl(0 0% 100% / 0.06); }
  .le-synth-body {
    overflow: auto; flex: 1;
    padding: 8px 14px 14px;
    font-family: var(--mono); font-size: 11px;
    line-height: 1.55;
    white-space: pre-wrap; word-break: break-all;
  }
  .le-synth-body .k { color: hsl(210 60% 80%); }
  .le-synth-body .s { color: hsl(100 50% 70%); }
  .le-synth-body .n { color: hsl(30 90% 70%); }

  @media (max-width: 900px) {
    .le-body { grid-template-columns: 1fr; }
    .le-detail-pane { display: none; }
    .le-shell.show-detail .le-tree-pane { display: none; }
    .le-shell.show-detail .le-detail-pane { display: flex; }
  }

  /* ── Center column tabs ── */
  .center-tabs {
    display: flex; gap: 2px;
    background: var(--background);
    padding: 3px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
  }
  .center-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border: none; border-radius: var(--radius);
    background: transparent;
    color: var(--muted-foreground);
    font-family: inherit; font-size: 14px; font-weight: 500;
    cursor: pointer;
    transition: all 0.12s;
  }
  .center-tab svg { width: 12px; height: 12px; }
  .center-tab:hover { color: var(--foreground); }
  .center-tab.active {
    background: var(--primary); color: var(--primary-foreground);
    box-shadow: 0 1px 2px hsl(222 47% 11% / 0.1);
  }

  .center-body {
    flex: 1;
    display: flex; flex-direction: column;
    overflow: hidden; min-height: 0;
    background: var(--muted);
  }

  /* ── Relations (ERD) tab ── */
  #relationsPane { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; position: relative; }
  /* Skills pane */
  .sk-grid { display: grid; grid-template-columns: 260px 1fr; flex: 1; overflow: hidden; }
  .sk-sidebar { border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
  .sk-sidebar-head { padding: 10px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .sk-sidebar-head .label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
  .sk-list { flex: 1; overflow-y: auto; padding: 6px; }
  .sk-card {
    padding: 10px 12px; border-radius: 6px; cursor: pointer; margin-bottom: 4px;
    border: 1px solid transparent; transition: all 0.12s;
  }
  .sk-card:hover { background: var(--accent); }
  .sk-card.active { background: var(--accent); border-color: var(--ring); }
  .sk-card-name { font-size: 13px; font-weight: 500; }
  .sk-card-meta { font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }
  .sk-editor { overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
  .sk-editor .sk-section { display: flex; flex-direction: column; gap: 4px; }
  .sk-editor .sk-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
  .sk-editor input.sk-input { font-size: 13px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--background); font-family: inherit; }
  .sk-editor input.sk-input:focus { outline: none; border-color: var(--ring); }
  .sk-editor textarea.sk-textarea {
    font-size: 12.5px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--background); font-family: inherit; resize: none; min-height: 40px; line-height: 1.5;
    overflow: hidden;
  }
  .sk-editor textarea.sk-textarea:focus { outline: none; border-color: var(--ring); }
  .sk-layers { display: flex; flex-wrap: wrap; gap: 6px; }
  .sk-layer-chip {
    display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 6px;
    border: 1px solid var(--border); font-size: 12px; cursor: pointer; transition: all 0.12s;
  }
  .sk-layer-chip:hover { border-color: var(--ring); }
  .sk-layer-chip.active { background: hsl(217 91% 95%); border-color: hsl(217 91% 60%); color: hsl(217 91% 35%); }
  .sk-layer-chip input { margin: 0; }
  .sk-example { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
  .sk-example-head { display: flex; align-items: center; justify-content: space-between; }
  .sk-example-num { font-size: 11px; font-weight: 600; color: var(--muted-foreground); }
  .sk-actions { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
  .sk-empty { display: flex; align-items: center; justify-content: center; flex: 1; color: var(--muted-foreground); font-size: 13px; }

  /* Skill Preview overlay */
  .sk-preview-overlay {
    position: fixed; inset: 0; z-index: 9000; background: var(--background);
    display: flex; flex-direction: column;
  }
  .sk-preview-topbar {
    height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
    background: var(--muted); border-bottom: 1px solid var(--border); flex-shrink: 0; font-size: 12.5px;
  }
  .sk-preview-topbar .sk-preview-tab {
    padding: 4px 12px; border-radius: 6px; cursor: pointer; border: 1px solid transparent;
    font-size: 12px; background: transparent; font-family: inherit; color: var(--muted-foreground);
  }
  .sk-preview-topbar .sk-preview-tab.active { background: var(--background); border-color: var(--border); color: var(--foreground); font-weight: 500; }
  .sk-preview-topbar .sk-preview-tab .tab-x { margin-left: 6px; opacity: 0.5; cursor: pointer; }
  .sk-preview-topbar .sk-preview-tab .tab-x:hover { opacity: 1; }
  .sk-preview-url {
    flex: 1; padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 12px; font-family: var(--mono); background: var(--background); outline: none;
  }
  .sk-preview-url:focus { border-color: var(--ring); }
  .sk-preview-body { flex: 1; position: relative; overflow: hidden; }
  body.sk-preview-active #chatFab { z-index: 9500 !important; }
  body.sk-preview-active #chatPanel { z-index: 9500 !important; }
  #simPreviewOverlay { z-index: 9000; }

  /* UI Kit */
  .uikit-wrap {
    display: flex; flex-direction: column; height: 100%;
  }
  .uikit-filter {
    display: flex; align-items: center; gap: 8px; padding: 10px 20px;
    border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--background);
  }
  .uikit-filter .uikit-title { font-size: 14px; font-weight: 600; color: var(--foreground); margin-right: 12px; }
  .uikit-filter .uikit-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
    border-radius: 9999px; font-size: 11px; font-weight: 500; cursor: pointer;
    border: 1px solid var(--border); background: var(--background); color: var(--muted-foreground);
    transition: all 0.12s;
  }
  .uikit-filter .uikit-chip:hover { border-color: var(--foreground); color: var(--foreground); }
  .uikit-filter .uikit-chip.active { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
  .uikit-body { flex: 1; overflow-y: auto; background: var(--muted); }
  .uikit-group { padding: 0 20px 24px; }
  .uikit-group-head {
    display: flex; align-items: baseline; gap: 10px; padding: 20px 0 12px;
    border-bottom: 1px solid var(--border); margin-bottom: 16px;
  }
  .uikit-group-head .label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); line-height: 1; }
  .uikit-group-head .count { font-size: 10px; color: var(--muted-foreground); line-height: 1; }
  .uikit-component { position: relative; margin-bottom: 24px; }
  .uikit-component-id {
    font-size: 9px; font-family: var(--mono); color: var(--muted-foreground);
    margin-bottom: 4px; letter-spacing: 0.02em;
  }
  .uikit-component-frame {
    display: flex; flex-direction: column;
    height: calc(100vh - 220px); min-height: 300px;
  }

  /* Data Table (inside UI Kit) */
  .dt-wrap {
    display: flex; flex-direction: column;
    padding: 0; background: var(--muted);
  }
  .dt-card {
    background: var(--background); border: 1px solid var(--border); border-radius: var(--radius);
    display: flex; flex-direction: column; overflow: hidden;
    /* Fills parent container — parent sets the height */
    flex: 1; min-height: 0;
  }
  .dt-topbar {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  .dt-topbar input {
    flex: 1; border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 5px 10px; font-size: 12px; font-family: inherit; background: var(--background); outline: none;
  }
  .dt-topbar input:focus { border-color: var(--ring); }
  .dt-topbar .dt-info { font-size: 11px; color: var(--muted-foreground); white-space: nowrap; }
  .dt-scroll { flex: 1; overflow: auto; min-height: 0; position: relative; }
  .dt-tbl { border-collapse: collapse; font-size: 12px; table-layout: fixed; }
  .dt-tbl thead { position: sticky; top: 0; z-index: 2; }
  .dt-tbl th {
    background: hsl(217 30% 96%); padding: 0; text-align: left;
    border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
    position: relative; vertical-align: top; white-space: nowrap;
  }
  /* last column keeps border since table scrolls horizontally */
  .dt-tbl .th-in { padding: 6px 10px; overflow: hidden; padding-right: 14px; }
  .dt-tbl .th-n { font-size: 12px; font-weight: 400; color: var(--foreground); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; display: block; }
  .dt-tbl .th-t { font-size: 10px; font-weight: normal; color: var(--muted-foreground); display: flex; align-items: center; margin-top: 1px; overflow: hidden; white-space: nowrap; }
  .dt-tbl .th-r {
    position: absolute; right: -4px; top: 0; bottom: 0; width: 8px;
    cursor: col-resize; z-index: 4;
  }
  .dt-tbl .th-r::after { display: none; }
  .dt-scroll { position: relative; }
  .dt-scroll.dt-col-near, .dt-scroll.dt-col-near *,
  .jv-glossary.dt-col-near, .jv-glossary.dt-col-near * { cursor: col-resize !important; }
  .dt-scroll.dt-resizing, .dt-scroll.dt-resizing *,
  .jv-glossary.dt-resizing, .jv-glossary.dt-resizing * { cursor: col-resize !important; user-select: none; }
  .dt-resize-line { position: absolute; top: 0; bottom: 0; width: 1px; background: hsl(217 91% 60%); z-index: 10; pointer-events: none; }
  .dt-tbl th.dt-i { width: 48px; min-width: 48px; text-align: center; }
  .jv-glossary .dt-tbl th.dt-i { font-weight: 400; vertical-align: middle; }
  .dt-tbl td {
    padding: 5px 10px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
    vertical-align: top; color: var(--foreground); font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    cursor: default;
  }
  /* last column keeps border since table scrolls horizontally */
  .dt-tbl td.dt-i {
    text-align: center; font-size: 12px; color: var(--foreground); font-weight: 400;
    font-family: var(--mono); background: hsl(217 30% 96%);
    border-right: 1px solid var(--border); vertical-align: middle;
  }
  .dt-tbl tr:hover td { background: hsl(210 40% 97%); }
  .dt-tbl tr:hover td.dt-i { background: hsl(210 25% 94%); }
  .dt-tbl tr.dt-exp td { white-space: normal; overflow-wrap: break-word; }
  .dt-tbl .c-s { color: hsl(142 50% 35%); font-size: 11px; }
  .dt-tbl .c-n { font-family: var(--mono); color: hsl(30 80% 40%); }
  .dt-tbl .c-o { font-size: 10px; color: var(--muted-foreground); }
  .dt-tbl .c-u { color: hsl(217 91% 50%); text-decoration: none; font-size: 11px; }
  .dt-tbl .c-u:hover { text-decoration: underline; }
  .dt-tbl .c-x { color: var(--muted-foreground); font-style: italic; }
  .dt-tbl mark, .jv-preview mark, .jv-sb-rel-header mark, .jv-tree-key mark, .jv-col-item .jv-key mark { background: hsl(48 96% 70%); color: var(--foreground); padding: 0 1px; border-radius: 2px; }
  .dt-tbl td.dt-match { background: hsl(48 96% 95%); border-left: 2px solid hsl(48 96% 55%); }
  .dt-tbl .c-t { font-family: var(--mono); font-size: 11px; }
  .dt-tbl .c-img { width: 40px; height: 28px; object-fit: cover; border-radius: 3px; vertical-align: middle; }
  .dt-ft {
    display: flex; align-items: center; gap: 6px; padding: 6px 12px;
    border-top: 1px solid var(--border); flex-shrink: 0; font-size: 11px; color: var(--muted-foreground);
  }
  .dt-ft button { font-size: 11px; padding: 3px 8px; }
  .dt-ft .pg { font-family: var(--mono); padding: 2px 6px; border-radius: 3px; cursor: pointer; }
  .dt-ft .pg:hover { background: var(--muted); }
  .dt-ft .pg.act { background: var(--primary); color: var(--primary-foreground); font-weight: 600; }
  .dt-colcfg {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 50;
    background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px hsl(222 47% 11% / 0.12); padding: 0; min-width: 260px;
    height: 340px; display: flex; flex-direction: column; overflow: hidden;
    resize: vertical; min-height: 120px;
  }
  .dt-colcfg .dt-colcfg-search {
    padding: 6px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  .dt-colcfg .dt-colcfg-search input {
    width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 4px 8px; font-size: 11px; font-family: inherit; outline: none; background: var(--background);
  }
  .dt-colcfg .dt-colcfg-search input:focus { border-color: var(--ring); }
  .dt-colcfg .dt-colcfg-list { flex: 1; overflow-y: auto; padding: 4px 0; }
  .dt-colcfg-item {
    display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12px;
    user-select: none; transition: background 0.1s;
  }
  .dt-colcfg-item:hover { background: var(--muted); }
  .dt-colcfg-item.dragover { box-shadow: inset 0 2px 0 var(--primary); }
  .dt-colcfg-item .col-name { font-family: var(--mono); font-size: 11.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dt-colcfg-item .jv-type { flex-shrink: 0; }
  .dt-colcfg-item input { width: 14px; height: 14px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
  .dt-colcfg-item .grip { color: var(--muted-foreground); font-size: 11px; cursor: grab; flex-shrink: 0; }

  /* shadcn/ui Table */
  .ui-table { width: 100%; border-collapse: collapse; caption-side: bottom; font-size: 13px; }
  .ui-table caption { padding: 12px 0 0; font-size: 12px; color: var(--muted-foreground); }
  .ui-table thead tr { border-bottom: 1px solid var(--border); }
  .ui-table thead th {
    padding: 10px 16px; text-align: left; font-size: 12px; font-weight: 500;
    color: var(--muted-foreground); white-space: nowrap; height: 40px; vertical-align: middle;
  }
  .ui-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.15s ease; }
  .ui-table tbody tr:hover { background: var(--muted); }
  .ui-table tbody tr.selected { background: hsl(217 91% 60% / 0.06); }
  .ui-table tbody td { padding: 10px 16px; vertical-align: middle; color: var(--foreground); }
  .ui-table tbody td:first-child { font-weight: 500; }
  .ui-table tfoot tr { border-top: 1px solid var(--border); background: var(--muted); font-weight: 500; }
  .ui-table tfoot td { padding: 10px 16px; }
  .ui-table .cell-muted { color: var(--muted-foreground); font-size: 12px; }
  .ui-table .cell-mono { font-family: var(--mono); font-size: 12px; }
  .ui-table .cell-right { text-align: right; }
  .ui-table .badge { display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 9999px; font-weight: 600; line-height: 1.4; }
  .ui-table .badge-active { background: hsl(142 70% 90%); color: hsl(142 70% 25%); }
  .ui-table .badge-inactive { background: var(--muted); color: var(--muted-foreground); }
  .ui-table .badge-system { background: hsl(263 70% 93%); color: hsl(263 70% 40%); }
  .ui-table .checkbox-cell { width: 40px; padding-left: 16px; padding-right: 0; }
  .ui-table .checkbox-cell input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }
  .ui-table .actions-cell { white-space: nowrap; }

  /* Simulation pane */
  .sim-grid { display: grid; grid-template-columns: 260px 1fr; flex: 1; overflow: hidden; }
  .sim-sidebar { border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
  .sim-sidebar-head { padding: 10px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .sim-sidebar-head .title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
  .sim-list { flex: 1; overflow-y: auto; padding: 6px; }
  .sim-card {
    padding: 10px 12px; border-radius: var(--radius); cursor: pointer;
    border: 1px solid transparent; margin-bottom: 4px;
  }
  .sim-card:hover { background: var(--muted); }
  .sim-card.active { background: var(--accent); border-color: var(--border); }
  .sim-card-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
  .sim-card-meta { font-size: 11px; color: var(--muted-foreground); display: flex; align-items: center; gap: 6px; }
  .sim-status {
    font-size: 9.5px; padding: 2px 7px; border-radius: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.03em;
  }
  .sim-status.draft { background: var(--muted); color: var(--muted-foreground); }
  .sim-status.running { background: hsl(142 71% 90%); color: hsl(142 71% 30%); }
  .sim-status.completed { background: hsl(217 91% 95%); color: hsl(217 91% 35%); }
  .sim-editor { flex: 1; overflow-y: auto; padding: 20px 24px; }
  .sim-editor .sim-section { margin-bottom: 20px; }
  .sim-editor .sim-section-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
  .sim-chat-area {
    flex: 1; display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--background);
  }
  .sim-chat-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
  .sim-chat-messages .sim-msg { font-size: 13px; line-height: 1.6; }
  .sim-chat-messages .sim-msg.user { color: var(--foreground); }
  .sim-chat-messages .sim-msg.assistant {
    background: var(--muted); border-radius: var(--radius); padding: 10px 14px;
  }
  .sim-chat-messages .sim-msg.assistant p { margin: 0 0 8px 0; }
  .sim-chat-messages .sim-msg.assistant p:last-child { margin-bottom: 0; }
  .sim-chat-input-wrap {
    display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border);
  }
  .sim-chat-input-wrap textarea {
    flex: 1; resize: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 8px 10px; font-size: 13px; font-family: inherit;
    background: var(--background); color: var(--foreground); min-height: 38px; max-height: 120px;
  }
  .sim-chat-input-wrap textarea:focus { outline: none; border-color: var(--ring); }
  .sim-rating { display: inline-flex; gap: 3px; margin-top: 6px; }
  .sim-rating button {
    padding: 2px 4px; cursor: pointer; opacity: 0.3; background: none; border: none;
    font-size: 14px; border-radius: 4px;
  }
  .sim-rating button:hover { opacity: 0.7; background: var(--muted); }
  .sim-rating button.active { opacity: 1; }
  .sim-analytics-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .sim-analytics-table th {
    text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--border);
    font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--muted-foreground);
  }
  .sim-analytics-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
  .sim-coverage-bar { height: 6px; border-radius: 3px; background: var(--muted); width: 100px; display: inline-block; vertical-align: middle; margin-left: 8px; }
  .sim-coverage-fill { height: 100%; border-radius: 3px; background: hsl(217 91% 60%); }
  .sim-gap-card {
    border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px;
    font-size: 12.5px; margin-bottom: 8px; background: var(--card);
  }
  .sim-gap-card .gap-question { font-weight: 600; margin-bottom: 4px; }
  .sim-gap-card .gap-snippet { color: var(--muted-foreground); font-style: italic; }
  .sim-summary-stats {
    display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px;
  }
  .sim-stat {
    padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card); min-width: 100px;
  }
  .sim-stat-value { font-size: 20px; font-weight: 700; color: var(--foreground); }
  .sim-stat-label { font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }

  .erd-toolbar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .erd-toolbar .sep { width: 1px; height: 22px; background: var(--border); }
  .erd-toolbar .zoom-label {
    font-family: var(--mono); font-size: 11px;
    color: var(--muted-foreground); min-width: 42px; text-align: center;
  }
  .erd-legend {
    margin-left: auto; display: flex; gap: 12px; align-items: center;
    font-size: 11px; color: var(--muted-foreground);
  }
  .erd-legend .chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 7px; border-radius: 8px;
    background: var(--muted); font-family: var(--mono); font-size: 10px;
  }
  .erd-legend .chip.pk { background: hsl(145 50% 92%); color: hsl(145 63% 30%); }
  .erd-legend .chip.fk { background: hsl(217 91% 94%); color: hsl(217 91% 35%); }

  .erd-canvas-wrap {
    flex: 1; position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle, hsl(215 15% 85%) 1px, transparent 1px) 0 0 / 24px 24px,
      var(--muted);
    cursor: grab;
  }
  .erd-canvas-wrap.panning { cursor: grabbing; }
  .erd-canvas {
    position: absolute; top: 0; left: 0;
    transform-origin: 0 0;
    will-change: transform;
  }
  .erd-canvas svg.erd-edges {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;
  }
  .erd-canvas svg.erd-edges .edge-path {
    fill: none; stroke: hsl(217 91% 55%);
    stroke-width: 1.6; opacity: 0.7;
    transition: opacity 0.12s, stroke-width 0.12s;
    pointer-events: stroke; cursor: pointer;
  }
  .erd-canvas svg.erd-edges .edge-path.dim { opacity: 0.12; }
  .erd-canvas svg.erd-edges .edge-path.highlight {
    stroke: hsl(217 91% 45%); stroke-width: 2.5; opacity: 1;
  }
  .erd-canvas svg.erd-edges .edge-dot-src,
  .erd-canvas svg.erd-edges .edge-dot-dst {
    fill: hsl(217 91% 55%); stroke: white; stroke-width: 1;
  }

  .erd-table {
    position: absolute;
    min-width: 240px; max-width: 420px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 1px 3px hsl(222 47% 11% / 0.06), 0 4px 10px hsl(222 47% 11% / 0.04);
    font-size: 12px;
    user-select: none;
    pointer-events: auto;
  }
  .erd-table.focused {
    border-color: hsl(217 91% 55%);
    box-shadow: 0 0 0 3px hsl(217 91% 55% / 0.15), 0 4px 12px hsl(222 47% 11% / 0.1);
  }
  .erd-table-header {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px;
    background: linear-gradient(180deg, hsl(222 15% 18%), hsl(222 20% 13%));
    color: white;
    border-top-left-radius: 8px; border-top-right-radius: 8px;
    cursor: grab;
  }
  .erd-table-header.grabbing { cursor: grabbing; }
  .erd-table-header svg { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.85; }
  .erd-table-title { font-weight: 600; font-size: 12.5px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .erd-table-table-name {
    font-family: var(--mono); font-size: 10.5px;
    color: hsl(222 20% 75%);
    background: hsl(0 0% 100% / 0.08);
    padding: 1px 5px; border-radius: 3px;
  }
  .erd-table-meta {
    padding: 5px 10px; background: var(--muted);
    border-bottom: 1px solid var(--border);
    font-size: 10.5px; color: var(--muted-foreground);
    display: flex; gap: 6px;
  }
  .erd-table-fields { max-height: 420px; overflow-y: auto; }
  .erd-field {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 11.5px;
    position: relative;
  }
  .erd-field:last-child { border-bottom: none; }
  .erd-field:hover { background: hsl(217 91% 98%); }
  .erd-field.has-link { cursor: pointer; }
  .erd-field.highlight { background: hsl(217 91% 95%); }
  .erd-field.edge-highlight { background: hsl(217 91% 95%); transition: background 0.3s; }
  .erd-field.dim { opacity: 0.4; }
  .erd-field-key {
    flex-shrink: 0; width: 20px; display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  }
  .erd-field-key.pk { color: hsl(330 50% 35%); }
  .erd-field-key.fk { color: hsl(330 50% 35%); }
  .erd-field-name {
    font-family: var(--mono);
    color: var(--foreground);
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .erd-field-name.is-pk { color: hsl(330 50% 35%); }
  .erd-field-name.is-fk { color: hsl(330 50% 35%); flex: 0 0 auto; overflow: visible; }
  .erd-field-name.nested { color: var(--muted-foreground); font-style: italic; }
  .erd-field-name.is-fk.nested, .erd-field-name.is-pk.nested { color: hsl(330 50% 35%); font-style: normal; }
  /* Depth-based indentation */
  .erd-field[data-depth="1"] { padding-left: 24px; }
  .erd-field[data-depth="2"] { padding-left: 36px; }
  .erd-field[data-depth="3"] { padding-left: 48px; }
  .erd-field[data-depth="4"] { padding-left: 60px; }
  .erd-field[data-depth="5"] { padding-left: 72px; }
  .erd-field[data-depth="6"] { padding-left: 84px; }
  .erd-field[data-depth="7"] { padding-left: 96px; }
  .erd-field[data-depth="8"] { padding-left: 108px; }
  .erd-field[data-depth="9"] { padding-left: 120px; }
  .erd-field[data-depth="10"] { padding-left: 132px; }
  .erd-field[data-depth="11"] { padding-left: 144px; }
  .erd-field[data-depth="12"] { padding-left: 156px; }
  .erd-field-type {
    font-size: 10px; color: var(--muted-foreground);
    font-family: var(--mono);
    background: var(--muted);
    padding: 1px 5px; border-radius: 3px;
    flex-shrink: 0;
  }
  .erd-field-link-hint {
    font-size: 11.5px; color: hsl(330 50% 35%);
    font-family: var(--mono);
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .erd-empty {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
  }
  .erd-empty-card {
    background: var(--background);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 32px 36px;
    text-align: center;
    color: var(--muted-foreground);
    max-width: 420px;
    pointer-events: auto;
  }
  .erd-empty-card b { color: var(--foreground); display: block; margin-bottom: 6px; font-size: 13px; }
  .center-pane {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .center-pane .col-body { flex: 1; overflow-y: auto; padding: 12px; }

  /* ── Product tab ── */
  .product-bar {
    display: flex; gap: 6px; align-items: center;
    padding: 10px 12px;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .product-bar .input-sm { flex: 1; font-family: var(--mono); }
  .product-iframe-wrap {
    flex: 1; position: relative; background: var(--background);
    overflow: hidden; min-height: 0;
  }
  .product-iframe {
    width: 100%; height: 100%; border: none;
  }
  .product-fallback {
    position: absolute; inset: 0;
    background: var(--muted);
    display: none;
    flex-direction: column; align-items: center; justify-content: center;
    padding: 30px; text-align: center;
    color: var(--muted-foreground);
  }
  .product-iframe-wrap.failed .product-fallback { display: flex; }
  .product-iframe-wrap.failed .product-iframe { display: none; }
  .product-fallback svg { width: 36px; height: 36px; margin-bottom: 12px; opacity: 0.5; }
  .product-fallback .t { font-size: 14px; font-weight: 600; color: var(--foreground); margin-bottom: 6px; }
  .product-fallback .s { font-size: 12px; line-height: 1.55; max-width: 400px; }

  /* ── Screenshot gallery ── */
  #galleryStrip {
    flex-shrink: 0;
    background: var(--background);
    border-top: 1px solid var(--border);
  }
  .gallery-head {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--muted);
  }
  .gallery-head .label {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--muted-foreground);
  }
  .gallery-head .count {
    font-size: 11px; color: var(--muted-foreground);
    padding: 1px 7px; background: var(--background); border-radius: 9px;
    font-variant-numeric: tabular-nums;
  }
  .gallery-head .actions { margin-left: auto; display: flex; gap: 4px; }
  .gallery-strip-body {
    display: flex; gap: 6px; padding: 8px 12px;
    overflow-x: auto; overflow-y: hidden;
    max-height: 92px;
    background: hsl(210 40% 98%);
  }
  .gallery-empty {
    font-size: 11.5px; color: var(--muted-foreground); font-style: italic;
    padding: 18px 8px; text-align: center; flex: 1;
  }
  .gallery-thumb {
    position: relative;
    width: 72px; height: 72px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--muted);
    overflow: hidden;
    flex-shrink: 0;
    cursor: grab;
    transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
  }
  .gallery-thumb:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px hsl(222 47% 11% / 0.12);
    border-color: hsl(217 91% 50%);
  }
  .gallery-thumb:active { cursor: grabbing; }
  .gallery-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    pointer-events: none;
  }
  .gallery-thumb .rm {
    position: absolute; top: 2px; right: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: hsl(222 47% 11% / 0.85); color: white;
    border: 1px solid white;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
  }
  .gallery-thumb .rm:hover { background: hsl(0 84% 60%); }
  .gallery-thumb .rm svg { width: 10px; height: 10px; }
  .gallery-thumb .ts {
    position: absolute; bottom: 2px; left: 2px;
    padding: 1px 4px; border-radius: 3px;
    background: hsl(222 47% 11% / 0.7); color: white;
    font-size: 8.5px; font-family: var(--mono);
    letter-spacing: 0.02em;
  }
  .gallery-thumb.dragging { opacity: 0.45; }

  /* Crop overlay */
  #cropOverlay {
    position: fixed; inset: 0;
    background: hsl(222 47% 5% / 0.9);
    z-index: 200;
    display: none;
    flex-direction: column;
    animation: chatPop 0.14s ease;
  }
  #cropOverlay.open { display: flex; }
  .crop-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px;
    color: white;
    border-bottom: 1px solid hsl(0 0% 100% / 0.08);
    flex-shrink: 0;
  }
  .crop-title { font-size: 13.5px; font-weight: 600; }
  .crop-hint {
    font-size: 11.5px; color: hsl(0 0% 100% / 0.55);
    margin-left: 8px;
  }
  .crop-hint kbd {
    padding: 1px 5px; border-radius: 3px;
    background: hsl(0 0% 100% / 0.1); border: 1px solid hsl(0 0% 100% / 0.15);
    font-family: var(--mono); font-size: 10px;
  }
  .crop-head .actions { margin-left: auto; display: flex; gap: 6px; }
  .crop-close {
    width: 28px; height: 28px;
    background: transparent; border: none;
    color: hsl(0 0% 100% / 0.6); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
  }
  .crop-close:hover { background: hsl(0 0% 100% / 0.1); color: white; }
  .crop-body {
    flex: 1; display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    padding: 20px;
    min-height: 0;
  }
  .crop-wrap {
    position: relative;
    max-width: 100%; max-height: 100%;
    line-height: 0;
    cursor: crosshair;
    user-select: none;
    box-shadow: 0 8px 40px hsl(0 0% 0% / 0.5);
  }
  .crop-img {
    display: block;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 130px);
    width: auto; height: auto;
    pointer-events: none;
    -webkit-user-drag: none;
  }
  .crop-dim-full {
    position: absolute; inset: 0;
    background: hsl(0 0% 0% / 0.55);
    pointer-events: none;
  }
  .crop-rect {
    position: absolute;
    border: 1.5px solid hsl(217 91% 60%);
    box-shadow: 0 0 0 9999px hsl(0 0% 0% / 0.55), 0 0 0 1px hsl(0 0% 100% / 0.3) inset;
    display: none;
    pointer-events: none;
  }
  .crop-rect::before, .crop-rect::after,
  .crop-rect > .crop-corner {
    content: ''; position: absolute;
    width: 8px; height: 8px;
    background: hsl(217 91% 60%);
    border: 1.5px solid white;
    border-radius: 1px;
  }
  .crop-rect::before { top: -5px; left: -5px; }
  .crop-rect::after { bottom: -5px; right: -5px; }
  .crop-rect .crop-corner.tr { top: -5px; right: -5px; position: absolute; width:8px; height:8px; background: hsl(217 91% 60%); border: 1.5px solid white; }
  .crop-rect .crop-corner.bl { bottom: -5px; left: -5px; position: absolute; width:8px; height:8px; background: hsl(217 91% 60%); border: 1.5px solid white; }
  .crop-size-tag {
    position: absolute;
    top: -22px; left: 0;
    background: hsl(217 91% 60%); color: white;
    font-family: var(--mono); font-size: 10.5px;
    padding: 2px 6px; border-radius: 3px;
    font-weight: 600; white-space: nowrap;
    pointer-events: none;
  }
  .crop-foot {
    padding: 12px 18px;
    background: hsl(222 47% 8%);
    border-top: 1px solid hsl(0 0% 100% / 0.08);
    display: flex; gap: 8px; align-items: center;
    flex-shrink: 0;
  }
  .crop-foot .info {
    font-family: var(--mono); font-size: 11px; color: hsl(0 0% 100% / 0.55);
  }
  .crop-foot .btn { background: hsl(0 0% 100% / 0.08); color: white; border-color: hsl(0 0% 100% / 0.15); }
  .crop-foot .btn:hover { background: hsl(0 0% 100% / 0.14); }
  .crop-foot .btn-primary { background: hsl(217 91% 55%); border-color: hsl(217 91% 55%); }
  .crop-foot .btn-primary:hover { background: hsl(217 91% 48%); }
  .crop-foot .btn:disabled { opacity: 0.35; }

  /* Per-section chat trigger */
  .chat-trigger {
    width: 22px; height: 22px; padding: 0;
    border-radius: 4px; border: 1px solid transparent;
    background: transparent; cursor: pointer;
    color: var(--muted-foreground);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
  }
  .chat-trigger:hover {
    background: hsl(222.2 47.4% 11.2% / 0.06);
    color: var(--primary);
    border-color: var(--border);
  }
  .chat-trigger svg { width: 12px; height: 12px; }

  /* Context chip above chat input */
  #chatContextChip {
    display: none;
    align-items: center; gap: 6px;
    margin: 0 10px 6px;
    padding: 6px 8px 6px 10px;
    background: hsl(217 91% 95%);
    border: 1px solid hsl(217 91% 80%);
    border-radius: 6px;
    font-size: 11.5px; color: hsl(217 91% 35%);
  }
  #chatContextChip svg { width: 12px; height: 12px; flex-shrink: 0; }
  #chatContextChip .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #chatContextChip .label b { color: hsl(217 91% 25%); font-weight: 600; }
  #chatContextChip .ctx-preview {
    background: none; border: none; cursor: pointer;
    color: hsl(217 91% 35%); font-size: 10.5px;
    padding: 0 4px; text-decoration: underline;
  }
  #chatContextChip .ctx-clear {
    background: none; border: none; cursor: pointer;
    color: hsl(217 91% 35%); padding: 0 2px; line-height: 1;
    font-size: 14px;
  }
  #chatContextChip .ctx-clear:hover { color: hsl(217 91% 20%); }

  /* Attached context badge inside user message bubble */
  .chat-msg .attached-ctx {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 6px; margin-bottom: 6px;
    background: hsl(0 0% 100% / 0.18); color: hsl(0 0% 100% / 0.9);
    border-radius: 4px; font-size: 10.5px; font-weight: 500;
    border: 1px solid hsl(0 0% 100% / 0.18);
  }
  .chat-msg .attached-ctx svg { width: 10px; height: 10px; }

  .chat-msg .tool-calls { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
  .chat-msg .tool-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px;
    background: hsl(217 91% 95%);
    border: 1px solid hsl(217 91% 80%);
    border-radius: 10px;
    font-size: 11px; color: hsl(217 91% 30%);
    align-self: flex-start;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  }
  .chat-msg .tool-chip svg { width: 11px; height: 11px; flex-shrink: 0; }
  .chat-msg .tool-chip .tool-name { font-weight: 600; font-family: var(--mono); }
  .chat-msg .tool-chip .tool-args { font-family: var(--mono); color: hsl(217 91% 40%); opacity: 0.8; }
  .chat-msg .tool-chip.ok { background: hsl(142 70% 94%); border-color: hsl(142 70% 70%); color: hsl(142 70% 28%); }
  .chat-msg .tool-chip.ok .tool-args { color: hsl(142 70% 35%); }
  .chat-msg .tool-chip.err { background: hsl(0 84% 94%); border-color: hsl(0 84% 75%); color: hsl(0 70% 40%); }
  .chat-msg .tool-chip.err .tool-args { color: hsl(0 70% 45%); }

  /* Login overlay */
  #loginCanvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
  }
  .login-enter {
    position: absolute;
    bottom: 40px; right: 40px;
    display: flex; align-items: center; gap: 12px;
    height: 48px;
    padding: 0 20px 0 24px;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    color: var(--primary-foreground);
    background: var(--primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 1;
  }
  .login-enter:hover {
    opacity: 0.9;
    transform: translateX(-2px);
  }
  .login-enter:active { transform: translateX(0); }
  .login-enter svg {
    width: 18px; height: 18px;
    transition: transform 0.2s ease;
  }
  .login-enter:hover svg { transform: translateX(3px); }
  #loginOverlay #loginError {
    position: absolute;
    bottom: 100px; right: 40px;
    color: var(--destructive);
    font-size: 13px;
    z-index: 1;
  }
  #loginOverlay {
    transition: opacity 0.5s ease;
  }
  #loginOverlay.fade-out {
    opacity: 0;
    pointer-events: none;
  }
  /* Loading spinner shown during auth */
  .login-loading {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 10;
    background: var(--background);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }
  .login-loading.active {
    display: flex;
  }
  .login-spinner {
    width: 28px; height: 28px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: login-spin 0.7s linear infinite;
  }
  @keyframes login-spin {
    to { transform: rotate(360deg); }
  }
  .login-loading-text {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--muted-foreground);
    letter-spacing: 0.02em;
  }
  /* =========================================================================
     Utility Classes (Tailwind-inspired, shadcn/ui compatible)
     ========================================================================= */

  /* ── Data Layers Page ── */
  .dl-page { padding: 0 32px; max-width: 1112px; margin: 0 auto; width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .dl-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; background: var(--muted); padding: 32px 0 16px; }
  .dl-page-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 32px; margin: 0 -16px; }
  .dl-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 0; }
  .dl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 340px)); gap: 16px; justify-content: center; }
  .dl-card {
    background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 16px; display: flex; flex-direction: column; transition: box-shadow 0.15s;
  }
  .dl-card:hover { box-shadow: 0 2px 8px hsl(222 47% 11% / 0.08); }
  .dl-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .dl-card-title { font-size: 13px; font-weight: 600; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dl-card-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
  .dl-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .dl-stat-val { font-family: var(--mono); font-size: 13px; font-weight: 600; color: hsl(210 60% 40%); }
  .dl-stat-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
  .dl-card-meta { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted-foreground); padding-top: 8px; border-top: 1px solid var(--border); }

  /* Data Layer Card (dlc) — compact variant */
  .dlc {
    background: var(--background); border: 1px solid transparent; border-radius: var(--radius-lg);
    padding: 12px; display: flex; flex-direction: column; gap: 10px;
    box-shadow: 0 1px 3px hsl(222 47% 11% / 0.06), 0 4px 10px hsl(222 47% 11% / 0.04);
    transition: box-shadow 0.15s; cursor: pointer;
  }
  .dlc:hover { box-shadow: 0 1px 3px hsl(222 47% 11% / 0.1), 0 4px 12px hsl(222 47% 11% / 0.08); }
  .dlc-active { border-color: hsl(217 91% 55%) !important; box-shadow: 0 0 0 3px hsl(217 91% 55% / 0.15), 0 4px 12px hsl(222 47% 11% / 0.1) !important; }
  .dlc-sm { padding: 8px; gap: 6px; }
  .dlc-sm .dlc-head { align-items: flex-start; gap: 8px; }
  .dlc-sm .dlc-icon-dark { width: 22px; height: 22px; }
  .dlc-sm .dlc-icon-dark svg { width: 10px; height: 10px; }
  .dlc-sm .dlc-layer { font-size: 11px; margin-bottom: 0; }
  .dlc-sm .dlc-owner { font-size: 9px; margin-top: 1px; }
  .dlc-sm .dlc-tags { gap: 3px; }
  .dlc-head { display: flex; align-items: flex-start; gap: 10px; }
  .dlc-icon {
    width: 32px; height: 32px; border-radius: var(--radius); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .dlc-icon-dark {
    width: 28px; height: 28px; border-radius: var(--radius); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary); color: var(--primary-foreground);
  }
  .dlc-icon-blue { background: hsl(217 60% 92%); color: hsl(210 60% 40%); }
  .dlc-icon-green { background: hsl(142 40% 92%); color: hsl(142 50% 35%); }
  .dlc-icon-purple { background: hsl(263 40% 92%); color: hsl(263 50% 45%); }
  .dlc-icon-orange { background: hsl(30 80% 92%); color: hsl(30 80% 40%); }
  .dlc-icon-teal { background: hsl(180 50% 30%); color: white; }
  .dlc.edge-active { border-color: hsl(217 91% 55%) !important; box-shadow: 0 0 0 3px hsl(217 91% 55% / 0.15), 0 4px 12px hsl(222 47% 11% / 0.1) !important; }
  .dlc-layer { font-size: 12px; font-weight: 600; color: var(--foreground); margin-bottom: 1px; }
  .dlc-owner { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 400; color: var(--muted-foreground); margin-top: 2px; }
  .dlc-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--border); margin-top: auto; }
  .dlc-footer-row { display: flex; align-items: center; justify-content: space-between; margin-top: -8px; }
  .dlc-info { flex: 1; min-width: 0; }
  .dlc-title { font-size: 12px; font-weight: 600; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dlc-src { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 400; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dlc-uploader { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: var(--muted-foreground); }
  .dlc-sub { font-size: 10px; color: var(--muted-foreground); margin-top: 2px; }
  .dlc-actions { position: relative; flex-shrink: 0; }
  .dlc-more {
    width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
    border: none; background: none; color: var(--muted-foreground); border-radius: var(--radius-sm); cursor: pointer;
  }
  .dlc-more:hover { background: var(--muted); color: var(--foreground); }
  .erd-table-header .dlc-more { background: hsl(0 0% 100% / 0.15); color: white; }
  .erd-table-header .dlc-more:hover { background: hsl(0 0% 100% / 0.3); color: white; }
  .dlc-tags { display: flex; flex-wrap: wrap; gap: 4px; }
  .dlc-tag {
    font-size: 10px; padding: 2px 8px; border-radius: 10px;
    background: var(--muted); color: var(--foreground); font-family: var(--mono);
    white-space: nowrap;
  }
  .dlc-tag-md { font-size: 12px; padding: 3px 10px; }
  .dlc-tag-lg { font-size: 14px; padding: 5px 12px; }
  .dlc-tag-black { background: hsl(222 47% 11%); color: hsl(0 0% 100%); }
  .dlc-tag-accent { background: hsl(30 80% 92%); color: hsl(30 80% 40%); }
  .dlc-tag-green { background: hsl(142 40% 92%); color: hsl(142 50% 30%); }
  .dlc-tag-purple { background: hsl(263 40% 92%); color: hsl(263 50% 40%); }
  .dlc-tag-blue { background: hsl(217 60% 92%); color: hsl(217 50% 30%); }
  .dlc-tag-red { background: hsl(0 70% 92%); color: hsl(0 70% 40%); }
  .dlc-tag-orange { background: hsl(30 80% 92%); color: hsl(30 80% 40%); }
  .dlc-tag-teal { background: hsl(180 40% 90%); color: hsl(180 50% 30%); }
  .dlc-tag-pink { background: hsl(330 50% 92%); color: hsl(330 50% 35%); }
  .dlc-tag-indigo { background: hsl(240 50% 92%); color: hsl(240 50% 35%); }
  .dlc-tag-lime { background: hsl(80 50% 90%); color: hsl(80 50% 30%); }
  .dlc-tag-amber { background: hsl(45 90% 90%); color: hsl(45 80% 30%); }
  .dlc-meta { font-size: 10px; color: var(--muted-foreground); }
  /* Data Layer Edit Modal */
  .dle-overlay { position: fixed; inset: 0; z-index: 100; background: hsl(0 0% 0% / 0.4); display: flex; align-items: center; justify-content: center; }
  .dle-modal { background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 8px 32px hsl(222 47% 11% / 0.2); width: 420px; max-height: 90vh; display: flex; flex-direction: column; }
  .dle-header { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .dle-body { padding: 16px; overflow-y: auto; }
  .dle-footer { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }
  .dle-label { font-size: 13px; font-weight: 500; color: var(--foreground); display: block; margin-bottom: 4px; margin-top: 12px; }
  .dle-label:first-child { margin-top: 0; }
  .dle-input { width: 100%; padding: 8px 10px; font-size: 13px; font-family: inherit; color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius); outline: none; background: var(--background); box-sizing: border-box; }
  .dle-input:focus { border-color: var(--ring); }
  select.dle-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; transition: border-color 0.12s, box-shadow 0.12s; }
  select.dle-input:focus { box-shadow: 0 0 0 2px hsl(222.2 84% 4.9% / 0.08); }
  .dle-colors { display: flex; gap: 3px; flex-shrink: 0; }
  .dle-color { width: 16px; height: 16px; border-radius: 4px; cursor: pointer; box-sizing: border-box; transition: transform 0.1s; }
  .dle-color:hover { transform: scale(1.2); }
  .dle-color.active { outline: 2px solid var(--foreground); outline-offset: 1px; }
  /* Data Layer Pills (in JV toolbar, like CP.threads) */
  .dl-layer-pills {
    display: flex; gap: 3px;
    overflow-x: auto; overflow-y: hidden;
    flex-wrap: nowrap; flex-shrink: 1;
    max-width: 40%;
    padding-bottom: 6px; margin-bottom: -6px;
    margin-right: 0;
  }
  /* Chat v2 thread close — same hover as layer pills */
  .cpv2-close:hover { background: hsl(0 0% 0% / 0.1) !important; }
  .chat-thread-pill.active .cpv2-close:hover { background: hsl(0 0% 100% / 0.2) !important; }

  .dl-layer-sep {
    flex-shrink: 0; width: 1px; height: 20px; background: var(--border);
    margin: auto 5px; align-self: center;
  }
  .dl-layer-pills::after { content: ''; flex-shrink: 0; width: 8px; }
  .dl-layer-pills::-webkit-scrollbar { height: 2px; }
  .dl-layer-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 4px 3px 4px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 11px; color: var(--muted-foreground);
    cursor: pointer; user-select: none;
    flex-shrink: 0; white-space: nowrap;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
    max-width: 180px;
  }
  .dl-layer-pill:hover { background: var(--muted); color: var(--foreground); }
  .dl-layer-pill.active {
    background: var(--primary); color: var(--primary-foreground);
    border-color: var(--primary);
  }
  .dl-layer-pill-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 50%;
    background: hsl(0 0% 0% / 0.08); color: var(--muted-foreground);
    font-size: 9px; font-weight: 600; flex-shrink: 0; line-height: 1;
  }
  .dl-layer-pill.active .dl-layer-pill-num {
    background: hsl(0 0% 100% / 0.2); color: var(--primary-foreground);
  }
  .dl-layer-pill.dragover { box-shadow: inset 2px 0 0 var(--primary); }
  .dl-layer-pill-title {
    overflow: hidden; text-overflow: ellipsis; max-width: 140px;
  }
  .dl-layer-pill-close {
    display: flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border: none; background: none;
    color: var(--muted-foreground); border-radius: 50%;
    cursor: pointer; padding: 0; flex-shrink: 0;
  }
  .dl-layer-pill:hover .dl-layer-pill-close { color: var(--foreground); }
  .dl-layer-pill.active .dl-layer-pill-close { color: var(--primary-foreground); }
  .dl-layer-pill-close:hover { background: hsl(0 0% 0% / 0.1); }
  .dl-layer-pill.active .dl-layer-pill-close:hover { background: hsl(0 0% 100% / 0.2); }

  .dl-add-wrap { position: relative; z-index: 60; }
  .dl-add-menu { right: 0; left: auto; min-width: 200px; white-space: nowrap; }
  .dl-menu {
    position: absolute; top: 100%; right: 0; z-index: 50;
    background: var(--background); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: 0 4px 16px hsl(222 47% 11% / 0.12);
    min-width: 170px; padding: 4px 0; margin-top: 4px; white-space: nowrap;
  }
  .dl-menu-item {
    padding: 6px 12px; font-size: 12px; cursor: pointer; color: var(--foreground);
  }
  .dl-menu-item:hover { background: var(--accent); }
  .dl-menu-danger { color: hsl(0 84% 60%); }
  .dl-menu-danger:hover { background: hsl(0 84% 96%); }

  /* ── JSON Viewer Component ── */
  .jv-wrap {
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
    background: var(--background); border: none; border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px hsl(222 47% 11% / 0.06), 0 4px 10px hsl(222 47% 11% / 0.04);
  }
  #dmGlossWindow .jv-wrap { flex: 1; min-width: 0; }
  .jv-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }
  .jv-main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
  .jv-sidebar {
    width: 560px; flex-shrink: 0; border-left: 1px solid var(--border);
    display: flex; flex-direction: column; overflow-y: auto; background: var(--background);
    min-width: 180px; position: relative;
  }
  .jv-sidebar-resize {
    position: absolute; left: -4px; top: 0; bottom: 0; width: 8px;
    cursor: col-resize; z-index: 5;
  }
  .jv-sidebar.resizing { border-left-color: hsl(217 91% 60%); }
  /* Second sidebar — ontology description (one per field) */
  .jv-sidebar-ont { width: 320px; min-width: 220px; }
  .jv-toolbar {
    display: flex; align-items: center; gap: 8px; padding: 6px 12px;
    border-bottom: 1px solid var(--border); flex-shrink: 0; height: 40px; box-sizing: border-box;
  }
  .jv-toolbar .jv-tabs {
    display: flex; gap: 2px; background: var(--muted); padding: 2px; border-radius: var(--radius);
    flex-shrink: 0;
  }
  .jv-toolbar .jv-tab {
    padding: 4px 10px; font-size: 12px; font-weight: 500; border: none; border-radius: var(--radius-sm);
    background: transparent; color: var(--muted-foreground); cursor: pointer; font-family: inherit;
    white-space: nowrap;
  }
  /* Toolbar buttons (mode tabs, view buttons) keep their size; the search field is what shrinks */
  .jv-toolbar > .btn { flex-shrink: 0; white-space: nowrap; }
  .jv-toolbar .jv-tab.active { background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px hsl(222 47% 11% / 0.06); }
  .jv-toolbar .jv-search {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 4px 24px 4px 8px; font-size: 12px; font-family: inherit; outline: none; background: var(--background);
  }
  .jv-toolbar .jv-search:focus { border-color: var(--ring); }
  .jv-search-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; border: none; background: none; padding: 0;
    color: var(--muted-foreground); cursor: pointer; display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
  }
  .jv-search-clear:hover { color: var(--foreground); background: var(--muted); }
  .jv-search-drop {
    position: fixed; z-index: 50;
    background: var(--background); border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px hsl(222 47% 11% / 0.12);
    height: 300px; display: flex; flex-direction: column; overflow: hidden;
    min-height: 100px; resize: vertical;
  }
  .jv-path {
    display: flex; align-items: center; gap: 2px; padding: 4px 12px;
    border-bottom: 1px solid var(--border); font-size: 11px; font-family: var(--mono);
    color: var(--muted-foreground); flex-shrink: 0; overflow-x: auto; white-space: nowrap;
  }
  .jv-path-paste {
    width: 18px; height: 18px; padding: 0; border: none; border-radius: 3px;
    background: transparent; color: var(--muted-foreground); cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: background 0.1s, color 0.1s;
  }
  .jv-path-paste:hover { background: var(--accent); color: var(--foreground); }
  .jv-path-seg { cursor: pointer; padding: 1px 4px; border-radius: 3px; }
  .jv-path-seg:hover { background: var(--accent); color: var(--foreground); }
  .jv-path-seg.active { color: var(--foreground); font-weight: 500; }
  .jv-path-sep { color: var(--border); }
  .jv-content { flex: 1; overflow: auto; min-height: 0; }

  /* Column View */
  .jv-cols { display: flex; height: 100%; overflow-x: auto; }
  .jv-col {
    min-width: 200px; width: 260px; flex-shrink: 0;
    border-right: 1px solid var(--border); overflow-y: auto; min-height: 100%;
    overflow-x: hidden;
  }
  .jv-cols { cursor: default; }
  .jv-cols.jv-resizing { cursor: col-resize; user-select: none; }
  .jv-col-schema { min-width: 260px; flex-shrink: 0; border-right: 1px solid var(--border); overflow-y: auto; min-height: 100%; }
  .jv-col-schema .erd-field { cursor: pointer; gap: 6px; }
  .jv-col-schema .erd-field[data-depth="0"] { padding-left: 10px; }
  .jv-col-schema .erd-field[data-depth="1"] { padding-left: 22px; }
  .jv-col-schema .erd-field[data-depth="2"] { padding-left: 34px; }
  .jv-col-schema .erd-field[data-depth="3"] { padding-left: 46px; }
  .jv-col-schema .erd-field[data-depth="4"] { padding-left: 58px; }
  .jv-col-schema .erd-field[data-depth="5"] { padding-left: 70px; }
  .jv-col-schema .erd-field[data-depth="6"] { padding-left: 82px; }
  .jv-col-schema .erd-field[data-depth="7"] { padding-left: 94px; }
  .jv-col-schema .erd-field[data-depth="8"] { padding-left: 106px; }
  .jv-col-schema .erd-field[data-depth="9"] { padding-left: 118px; }
  .jv-col-schema .erd-field[data-depth="10"] { padding-left: 130px; }
  .jv-col-schema .erd-field.selected { background: hsl(217 91% 95%); }
  .jv-col-schema .erd-field-key:empty { display: none; }

  /* Glossary view — reuses dt-tbl styles */
  .jv-glossary { flex: 1; overflow: auto; position: relative; }
  /* Match header row height to data rows: th-in vertical padding = td vertical padding (5px) */
  .jv-glossary .dt-tbl .th-in { padding-top: 5px; padding-bottom: 5px; }
  .jv-glossary .dt-tbl td { cursor: pointer; vertical-align: middle; }
  .jv-glossary .dt-tbl td.dt-i { font-weight: 400; vertical-align: middle; }
  /* Whole-row selection */
  .jv-glossary .dt-tbl tr.sel-row td, .jv-glossary .dt-tbl tr.sel-row td.dt-i,
  .jv-glossary .dt-tbl tr.sel-row:hover td, .jv-glossary .dt-tbl tr.sel-row:hover td.dt-i { background: hsl(217 91% 95%); }
  .jv-glossary-ctx { font-family: var(--mono); font-size: 11px; color: var(--muted-foreground); }
  .jv-glossary-ctx .c-s { color: hsl(142 50% 35%); }
  .jv-glossary-ctx .c-n { color: hsl(30 80% 40%); font-family: var(--mono); }
  .jv-glossary-ctx .c-o { color: var(--muted-foreground); font-size: 10px; }
  .jv-glossary-ctx .c-x { color: var(--muted-foreground); font-style: italic; }

  .jv-col-item {
    display: flex; align-items: center; gap: 6px; padding: 5px 10px;
    font-size: 12px; cursor: pointer; border-bottom: 1px solid var(--border);
    transition: background 0.1s;
  }
  .jv-col-item:hover { background: var(--accent); }
  .jv-col-item.selected { background: hsl(217 91% 95%); color: var(--foreground); }
  .jv-col-item.selected .jv-type { opacity: 0.8; }
  .jv-col-item.selected .jv-preview { opacity: 0.8; }
  .jv-col-item .jv-key { font-family: var(--mono); font-weight: 400; flex-shrink: 0; color: var(--foreground); }
  .jv-col-item .jv-preview { margin-left: auto; text-align: right; }
  .jv-col-item .jv-arrow { font-size: 10px; color: var(--muted-foreground); flex-shrink: 0; }
  .jv-col-item .jv-fields { margin-left: auto; font-size: 10px; color: var(--muted-foreground); white-space: nowrap; }
  .jv-col-item.selected .jv-arrow { color: var(--primary); }

  /* Tree View */
  .jv-tree { padding: 0; }
  .jv-tree-row {
    display: flex; align-items: center; gap: 4px; padding: 5px 8px 6px 0;
    font-size: 12px; cursor: pointer;
  }
  .jv-tree-row:hover { background: var(--accent); }
  .jv-tree-row.selected { background: hsl(217 91% 95%); }
  .jv-tree-toggle {
    width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: var(--muted-foreground); font-size: 12px; transition: transform 0.15s;
  }
  .jv-tree-row .jv-type { align-self: center; }
  .jv-tree-key { font-family: var(--mono); color: var(--foreground); font-weight: 400; }
  .jv-tree-colon { color: var(--muted-foreground); margin: 0 2px; }
  .jv-tree-row .jv-preview { overflow: visible; text-overflow: unset; white-space: nowrap; flex: 0 0 auto; }

  /* Editor View */
  .jv-editor { display: flex; height: 100%; overflow: hidden; font-size: 12px; font-family: var(--mono); line-height: 1.6; }
  .jv-editor-lines {
    padding: 8px 0; text-align: right; color: var(--muted-foreground); font-size: 11px;
    border-right: 1px solid var(--border); user-select: none; min-width: 40px; flex-shrink: 0; overflow: hidden;
  }
  .jv-editor-lines div { padding: 0 8px; }
  .jv-editor-code {
    flex: 1; overflow: auto; padding: 8px 12px; white-space: pre;
  }
  .jv-editor-line { cursor: pointer; padding: 0 4px; border-radius: 2px; }
  .jv-editor-line:hover { background: var(--accent); }
  .jv-editor-line.selected { background: hsl(217 91% 95%); }
  /* Wrapping variant — line numbers inline, no horizontal scroll */
  .jv-editor-wrap .jv-editor-code { overflow-x: hidden; overflow-y: auto; white-space: normal; padding: 8px 0; }
  .jv-editor-wrap .jv-editor-line { display: flex; align-items: flex-start; padding: 0; }
  .jv-editor-wrap .jv-editor-gut { flex-shrink: 0; width: 44px; text-align: right; padding: 0 8px; color: var(--muted-foreground); font-size: 11px; user-select: none; }
  .jv-editor-wrap .jv-editor-src { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; padding-right: 12px; }

  /* ─── Data Typography ─── */
  .dv-key      { font-family: var(--mono); font-weight: 500; color: hsl(210 60% 40%); }
  .dv-idx      { font-family: var(--mono); color: var(--muted-foreground); }
  .dv-val-str  { color: hsl(142 50% 35%); }
  .dv-val-num  { font-family: var(--mono); color: hsl(30 80% 40%); }
  .dv-val-bool { font-family: var(--mono); color: hsl(263 50% 45%); }
  .dv-val-null { color: var(--muted-foreground); font-style: italic; }
  .dv-val-url  { color: hsl(217 91% 50%); text-decoration: none; }
  .dv-val-url:hover { text-decoration: underline; }
  .dv-count    { font-size: 10px; color: var(--muted-foreground); }
  /* Related values: keep array/object counts the same size as scalar values */
  .jv-sb-rel-header .dv-count { font-size: 12px; }
  .dv-path     { font-family: var(--mono); font-size: 11px; color: var(--muted-foreground); }
  .dv-label    { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
  .dv-sep      { color: var(--muted-foreground); }
  .dv-type     { font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.4; display: inline-block; }
  .dv-type-string  { background: hsl(142 40% 92%); color: hsl(142 50% 30%); }
  .dv-type-number  { background: hsl(30 80% 92%); color: hsl(30 60% 30%); }
  .dv-type-boolean { background: hsl(263 40% 92%); color: hsl(263 40% 35%); }
  .dv-type-null    { background: var(--muted); color: var(--muted-foreground); }
  .dv-type-object  { background: hsl(210 40% 92%); color: hsl(210 40% 30%); }
  .dv-type-array   { background: hsl(217 60% 92%); color: hsl(217 50% 30%); }

  /* Type badges */
  .jv-type {
    font-size: 9px; font-weight: normal; padding: 1px 5px; border-radius: 10px;
    flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.4;
    background: var(--muted); color: var(--foreground);
  }
  .jv-type-string { background: hsl(142 40% 92%); color: hsl(142 50% 30%); }
  .jv-type-number { background: hsl(30 80% 92%); color: hsl(30 60% 30%); }
  .jv-type-boolean { background: hsl(263 40% 92%); color: hsl(263 40% 35%); }
  .jv-type-null { background: var(--muted); color: var(--muted-foreground); }
  .jv-type-object { background: var(--muted); color: var(--foreground); }
  .jv-type-array { background: hsl(220 14% 94%); color: hsl(220 10% 50%); }
  .jv-type-integer { background: hsl(330 50% 92%); color: hsl(330 50% 35%); }
  .jv-type-blue { background: hsl(217 60% 92%); color: hsl(217 50% 30%); }
  .jv-type-green { background: hsl(142 40% 92%); color: hsl(142 50% 30%); }
  .jv-type-purple { background: hsl(263 40% 92%); color: hsl(263 50% 40%); }
  .jv-type-orange { background: hsl(30 80% 92%); color: hsl(30 80% 40%); }
  .jv-type-red { background: hsl(0 70% 92%); color: hsl(0 70% 40%); }
  .jv-type-teal { background: hsl(180 40% 90%); color: hsl(180 50% 30%); }
  .jv-type-pink { background: hsl(330 50% 92%); color: hsl(330 50% 35%); }
  .jv-type-indigo { background: hsl(240 50% 92%); color: hsl(240 50% 35%); }
  .jv-type-lime { background: hsl(80 50% 90%); color: hsl(80 50% 30%); }
  .jv-type-amber { background: hsl(45 90% 90%); color: hsl(45 80% 30%); }

  /* Value preview */
  .jv-preview { font-size: 12px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; padding-right: 4px; }
  .jv-val-str { color: hsl(142 50% 35%); }
  .jv-val-num { color: hsl(30 80% 40%); font-family: var(--mono); }
  .jv-val-bool { color: hsl(263 50% 45%); font-family: var(--mono); }
  .jv-val-null { color: var(--muted-foreground); font-style: italic; }
  .jv-val-key { color: hsl(210 60% 40%); font-family: var(--mono); }

  /* Sidebar — compact info rows (same height as .jv-toolbar) */
  .jv-sb-row { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 29px; min-height: 29px; flex-shrink: 0; box-sizing: border-box; border-bottom: 1px solid var(--border); }
  .jv-sb-row-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); flex-shrink: 0; }
  .jv-sb-row-value { font-family: var(--mono); font-size: 11px; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
  .jv-sb-copy { flex-shrink: 0; background: none; border: none; padding: 2px; cursor: pointer; color: var(--muted-foreground); border-radius: var(--radius-sm); display: inline-flex; align-items: center; }
  .jv-sb-copy:hover { color: var(--foreground); background: var(--muted); }
  /* Sidebar — full sections (value, related) */
  .jv-sb-section { padding: 8px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .jv-sb-section:last-child { border-bottom: none; }
  .jv-sb-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 4px; }
  .jv-sb-path { font-family: var(--mono); font-size: 11px; color: var(--foreground); overflow-wrap: break-word; }
  .jv-sb-value { font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: break-word; max-height: 200px; overflow-y: auto; }
  /* Ontology Role dropdown — compact, inline like the Type badge */
  .jv-role-dd { position: relative; display: inline-flex; }
  .jv-role-trigger {
    display: inline-flex; align-items: center; background: none; border: none;
    padding: 0; cursor: pointer; font: inherit; color: var(--foreground);
  }
  .jv-role-trigger:hover .jv-type { filter: brightness(0.96); }
  .jv-role-menu {
    position: absolute; top: 100%; left: 0; margin-top: 5px; z-index: 50; min-width: 120px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--background);
    overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
  .jv-role-opt { padding: 5px 8px; cursor: pointer; display: flex; align-items: center; }
  .jv-role-opt:hover { background: var(--muted); }
  .jv-role-opt.sel { background: hsl(217 91% 95%); }
  /* Ontology Field Context */
  .jv-fieldctx-input {
    width: 100%; box-sizing: border-box; min-height: 56px; resize: vertical; overflow: hidden;
    font-family: var(--mono); font-size: 12px; line-height: 1.5; padding: 6px 8px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--background); color: var(--foreground); outline: none;
  }
  .jv-fieldctx-input:focus { border-color: var(--ring); }
  /* Ontology panel group header + inline input */
  /* Group header — same height as .jv-sb-row; chevron pushed to the right; no hover color */
  .jv-sb-grouphead {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--foreground);
    height: 29px; min-height: 29px; padding: 0 12px; box-sizing: border-box; background: var(--muted);
    border-bottom: 1px solid var(--border); cursor: pointer; user-select: none;
  }
  .jv-sb-grouphead-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .jv-sb-grouphead-chev { display: inline-flex; align-items: center; color: var(--muted-foreground); transform: rotate(-90deg); transition: transform 0.15s; flex-shrink: 0; }
  .jv-sb-grouphead-chev.open { transform: rotate(0deg); }
  .jv-ont-input {
    flex: 1; min-width: 0; box-sizing: border-box; font-family: var(--mono); font-size: 11px;
    padding: 3px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--background); color: var(--foreground); outline: none;
  }
  .jv-ont-input:focus { border-color: var(--ring); }
  .jv-sb-related { list-style: none; padding: 0; }
  .jv-sb-related li {
    padding: 4px 0; font-size: 11px; font-family: var(--mono);
    border-bottom: 1px solid var(--border); display: flex; gap: 6px;
  }
  .jv-sb-related li:last-child { border: none; }
  .jv-sb-related-groups { display: flex; flex-direction: column; }
  .jv-sb-rel-group { }
  .jv-sb-rel-header {
    display: flex; align-items: baseline; gap: 4px; padding: 5px 8px;
    cursor: pointer; background: transparent;
    transition: background 0.1s; border-bottom: 1px solid var(--border);
  }
  .jv-sb-rel-header:hover { background: var(--accent); }
  .jv-sb-rel-paths { padding: 0; border-bottom: 1px solid var(--border); }
  .jv-sb-rel-path {
    padding: 3px 8px 3px 36px; cursor: pointer; font-size: 12px; font-family: var(--mono); color: var(--muted-foreground);
    transition: background 0.1s; line-height: 1.4; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
    overflow-wrap: break-word;
  }
  .jv-sb-rel-path:last-child { border-bottom: none; }
  .jv-sb-rel-path:hover { background: var(--accent); color: var(--foreground); }
  .jv-sb-idx { color: var(--muted-foreground); min-width: 24px; }
  .jv-sb-empty { padding: 24px 12px; text-align: center; font-size: 12px; color: var(--muted-foreground); }

  /* Layout */
  .flex { display: flex; }
  .flex-col { display: flex; flex-direction: column; }
  .flex-1 { flex: 1; }
  .flex-shrink-0 { flex-shrink: 0; }
  .inline-flex { display: inline-flex; }
  .items-center { align-items: center; }
  .items-baseline { align-items: baseline; }
  .justify-center { justify-content: center; }
  .justify-between { justify-content: space-between; }
  .gap-1 { gap: 4px; }
  .gap-2 { gap: 8px; }
  .gap-3 { gap: 12px; }
  .gap-4 { gap: 16px; }
  .ml-auto { margin-left: auto; }
  .w-full { width: 100%; }
  .min-h-0 { min-height: 0; }
  .overflow-hidden { overflow: hidden; }
  .overflow-auto { overflow: auto; }
  .relative { position: relative; }
  .hidden { display: none; }

  /* Spacing */
  .p-2 { padding: 8px; }
  .p-3 { padding: 12px; }
  .p-4 { padding: 16px; }
  .p-5 { padding: 20px; }
  .px-3 { padding-left: 12px; padding-right: 12px; }
  .px-4 { padding-left: 16px; padding-right: 16px; }
  .py-2 { padding-top: 8px; padding-bottom: 8px; }
  .py-3 { padding-top: 12px; padding-bottom: 12px; }
  .mb-2 { margin-bottom: 8px; }
  .mb-3 { margin-bottom: 12px; }
  .mb-4 { margin-bottom: 16px; }
  .mt-2 { margin-top: 8px; }
  .mt-4 { margin-top: 16px; }

  /* Typography */
  .text-xs { font-size: 10px; }
  .text-sm { font-size: 12px; }
  .text-base { font-size: 13px; }
  .text-lg { font-size: 16px; }
  .text-xl { font-size: 18px; }
  .font-medium { font-weight: 500; }
  .font-semibold { font-weight: 600; }
  .font-bold { font-weight: 700; }
  .font-mono { font-family: var(--mono); }
  .text-muted { color: var(--muted-foreground); }
  .text-destructive { color: var(--destructive); }
  .text-primary { color: var(--primary); }
  .text-center { text-align: center; }
  .text-right { text-align: right; }
  .uppercase { text-transform: uppercase; }
  .tracking-wide { letter-spacing: 0.05em; }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .whitespace-nowrap { white-space: nowrap; }
  .leading-none { line-height: 1; }

  /* Borders */
  .border { border: 1px solid var(--border); }
  .border-b { border-bottom: 1px solid var(--border); }
  .border-t { border-top: 1px solid var(--border); }
  .border-r { border-right: 1px solid var(--border); }
  .rounded { border-radius: var(--radius); }
  .rounded-sm { border-radius: var(--radius-sm); }
  .rounded-full { border-radius: 9999px; }

  /* Colors/Backgrounds */
  .bg-background { background: var(--background); }
  .bg-muted { background: var(--muted); }
  .bg-card { background: var(--card); }
  .bg-primary { background: var(--primary); color: var(--primary-foreground); }
  .bg-destructive { background: var(--destructive); color: white; }

  /* Cursor */
  .cursor-pointer { cursor: pointer; }
  .cursor-grab { cursor: grab; }
  .select-none { user-select: none; }

  /* ── Custom Tooltip (JS-based, appended to body) ── */
  .tip-popup {
    position: fixed; pointer-events: none; z-index: 9999;
    background: var(--primary); color: var(--primary-foreground);
    font-size: 11px; font-weight: 500; font-family: 'Inter', sans-serif;
    padding: 4px 8px; border-radius: var(--radius-sm);
    white-space: normal; max-width: 380px; overflow-wrap: anywhere; line-height: 1.4;
    opacity: 0; transition: opacity 0.15s;
  }
  .tip-popup.visible { opacity: 1; }