:root{
  --bg:#0f1b2d;--surface:#1a2744;--hover:#243556;--border:#354766;--border-input:#5f6b7a;
  --text:#d1d5db;--heading:#fff;--label:#8d99a8;--link:#539fe5;--link-hover:#89bceb;
  --topbar:#232f3e;--font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono','Fira Code',monospace;
  --r-s:4px;--r-m:8px;--r-l:12px;--s:8px;--m:16px;--l:24px;
  --green:#10b981;--yellow:#f59e0b;--red:#ef4444;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;line-height:1.5}

.topbar{background:var(--topbar);border-bottom:1px solid var(--border);height:48px;position:sticky;top:0;z-index:100}
.topbar-inner{max-width:1400px;margin:0 auto;height:100%;display:flex;align-items:center;padding:0 var(--l);gap:var(--m)}
.logo-link{display:flex;align-items:center;gap:var(--s);text-decoration:none}
.logo-icon{width:28px;height:28px;border-radius:6px}
.logo{font-size:16px;font-weight:700;color:var(--heading);letter-spacing:-.3px}
.nav-links{display:flex;gap:4px;margin-left:var(--m)}
.nav-link{color:var(--label);font-size:13px;text-decoration:none;padding:6px 12px;border-radius:var(--r-s);transition:all .15s}
.nav-link:hover,.nav-link.active{color:var(--heading);background:rgba(255,255,255,.08)}
.meta{font-size:12px;color:rgba(255,255,255,.6)}

main{max-width:1400px;margin:0 auto;padding:var(--l)}

/* Stats bar */
.stats-bar{display:flex;gap:var(--l);margin-bottom:var(--m);flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:2px}
.stat-value{font-size:20px;font-weight:700;color:var(--heading)}
.stat-label{font-size:11px;color:var(--label);text-transform:uppercase;letter-spacing:.5px}

/* Panel */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);overflow:hidden}
.panel-header{padding:var(--m) var(--l);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--m);flex-wrap:wrap}
.panel-header h2{font-size:18px;font-weight:600;color:var(--heading)}
.count{font-size:13px;color:var(--label)}
.controls{display:flex;gap:var(--s);flex:1;flex-wrap:wrap;justify-content:flex-end}
.input{padding:7px 12px;background:var(--surface);border:1px solid var(--border-input);border-radius:var(--r-s);color:var(--text);font-size:13px;outline:none;transition:border-color .15s}
.input:focus{border-color:var(--link)}
.input-search{min-width:260px;flex:1;max-width:400px}
select.input{cursor:pointer;appearance:none;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%238d99a8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}

/* Table */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:10px var(--m);font-size:11px;font-weight:600;color:var(--label);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);background:var(--surface)}
td{padding:10px var(--m);border-bottom:1px solid var(--border);font-size:13px}
tr:hover td{background:var(--hover)}
tr.clickable{cursor:pointer}

/* Badges */
.badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:var(--r-s);font-weight:600;text-transform:uppercase}
.b-lz{background:#1b4332;color:#86efac}.b-cz{background:#1a3a5c;color:#93c5fd}.b-az{background:#2d1b4e;color:#c4b5fd}
.b-delta{background:#134e4a;color:#5eead4}.b-parquet{background:#431407;color:#fdba74}.b-snapshot{background:#312e81;color:#a5b4fc}
.ds-name{color:var(--link);font-weight:500}
.ds-name:hover{color:var(--link-hover);text-decoration:underline}

/* Status dot */
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.status-green{background:var(--green)}.status-yellow{background:var(--yellow)}.status-red{background:var(--red)}.status-gray{background:var(--label)}

/* Breadcrumb */
.breadcrumb{font-size:13px;color:var(--label);margin-bottom:var(--l)}
.breadcrumb a{color:var(--link);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

/* Detail header */
.detail-header{display:flex;align-items:center;gap:var(--m);margin-bottom:var(--l);flex-wrap:wrap}
.detail-header h1{font-size:20px;font-weight:600;color:var(--heading)}

/* Tabs */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:var(--l)}
.tab{padding:10px 20px;font-size:13px;color:var(--label);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit}
.tab:hover{color:var(--text)}
.tab.active{color:var(--link);border-bottom-color:var(--link)}
.tab-content{display:none}
.tab-content.active{display:block}

/* Key-value pairs */
.kv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--m)}
.kv{display:flex;flex-direction:column;gap:2px}
.kv .label{font-size:12px;color:var(--label)}
.kv .value{font-size:13px;color:var(--text);word-break:break-all}

/* Cards */
.detail-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);padding:var(--l)}
.detail-card h3{font-size:14px;font-weight:600;color:var(--heading);margin-bottom:var(--s)}
.mono{font-family:var(--mono);font-size:12px;background:var(--bg);padding:var(--s) var(--m);border-radius:var(--r-s);overflow-x:auto;white-space:pre;color:var(--link)}
.copy-row{display:flex;align-items:center;gap:var(--s);margin-top:var(--s)}
.btn{background:none;border:1px solid var(--border-input);border-radius:var(--r-s);color:var(--label);cursor:pointer;font-size:11px;padding:4px 10px;transition:all .15s;font-family:inherit}
.btn:hover{color:var(--link);border-color:var(--link)}

/* Schema table */
.schema-table{width:100%;border-collapse:collapse}
.schema-table th,.schema-table td{text-align:left;padding:8px var(--m);font-size:12px;border-bottom:1px solid var(--border)}
.schema-table th{color:var(--label);font-weight:600;background:var(--bg)}
.schema-table tr:hover td{background:var(--hover)}

/* Lineage placeholder */
.lineage-placeholder{padding:40px;text-align:center;border:2px dashed var(--border);border-radius:var(--r-m);color:var(--label)}

.empty{text-align:center;padding:48px var(--l);color:var(--label)}
.empty-icon{font-size:36px;margin-bottom:var(--s)}

.toast{position:fixed;bottom:20px;right:20px;background:#065f46;color:#a7f3d0;padding:10px 20px;border-radius:var(--r-m);font-size:13px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:999}
.toast.show{opacity:1}

@media(max-width:768px){.panel-header{flex-direction:column;align-items:flex-start}.controls{width:100%}.kv-grid{grid-template-columns:1fr}.stats-bar{gap:var(--m)}}

/* Snapshot grouping */
.group-header td{font-size:13px}
.group-header.collapsed .group-chevron{display:inline-block;transform:rotate(-90deg)}
.group-chevron{display:inline-block;transition:transform .15s;margin-right:4px;color:var(--link)}
tr.hidden{display:none}
/* Pagination */
.pagination{display:flex;align-items:center;justify-content:center;padding:12px;gap:8px}
.pagination .btn:disabled{opacity:.4;cursor:not-allowed}
/* Lineage placeholder */
.lineage-placeholder{text-align:center;padding:48px 16px;color:var(--label)}

/* Theme toggle — Light theme (VS Code Light+ inspired) */
[data-theme="light"]{
  --bg:#f3f3f3;--surface:#ffffff;--hover:#e8e8e8;--border:#e0e0e0;--border-input:#c8c8c8;
  --text:#333333;--heading:#1e1e1e;--label:#6e7681;--link:#0969da;--link-hover:#0550ae;
  --topbar:#24292f;--green:#1a7f37;--yellow:#9a6700;--red:#cf222e;
}
[data-theme="light"] .nav-link:hover,[data-theme="light"] .nav-link.active{background:rgba(255,255,255,.15)}
[data-theme="light"] .badge{background:#f0f3f6;color:#24292f;border-color:#d1d9e0}
[data-theme="light"] .badge.b-lz{background:#ddf4e4;color:#1a7f37;border-color:#a7e3b8}
[data-theme="light"] .badge.b-cz{background:#ddf4ff;color:#0969da;border-color:#a8d4f5}
[data-theme="light"] .badge.b-az{background:#eee0ff;color:#6639ba;border-color:#d4b8ff}
[data-theme="light"] .panel{box-shadow:0 1px 3px rgba(0,0,0,.06);border-color:#e0e0e0}
[data-theme="light"] .input{background:#fff;border-color:#d0d7de;color:#24292f}
[data-theme="light"] tr.clickable:hover{background:#f6f8fa}
[data-theme="light"] .stats-bar .stat-value{color:#24292f}
[data-theme="light"] code{background:#f0f3f6;color:#0550ae}
[data-theme="light"] .schema-table td,.schema-table th{border-color:#e0e0e0}
[data-theme="light"] .theme-toggle:hover{background:rgba(255,255,255,.15)}
[data-theme="light"] .kv .value{color:#24292f}
[data-theme="light"] .detail-header h1{color:#24292f}
.theme-toggle{background:none;border:none;font-size:18px;cursor:pointer;padding:4px 8px;border-radius:4px;color:#fff}
.theme-toggle:hover{background:rgba(255,255,255,.1)}
.topbar-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
/* Keyboard help bar */
.kbd-help{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);padding:6px 16px;font-size:11px;color:var(--label);text-align:center;z-index:100}
.kbd-help.visible{display:block}
.kbd-help kbd{background:var(--bg);border:1px solid var(--border);border-radius:3px;padding:1px 5px;font-size:10px;margin:0 2px}
/* Favorites star */
.fav-btn{background:none;border:none;cursor:pointer;font-size:16px;padding:0 4px;opacity:.4;transition:opacity .15s}
.fav-btn:hover,.fav-btn.active{opacity:1}
/* Sample data */
.sample-table{font-size:11px;width:100%;border-collapse:collapse;margin-top:8px}
.sample-table td,.sample-table th{padding:4px 8px;border:1px solid var(--border);white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.sample-table th{background:var(--surface);color:var(--label);font-weight:500}
/* Quality indicators */
.quality-bar{display:inline-block;width:48px;height:6px;background:var(--border);border-radius:3px;margin-left:6px;vertical-align:middle}
.quality-fill{height:100%;border-radius:3px}
.q-good{background:#86efac}.q-warn{background:#fbbf24}.q-bad{background:#f87171}
/* Compare */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.compare-col{overflow-x:auto}
.diff-add{background:rgba(134,239,172,.1)}.diff-del{background:rgba(248,113,113,.1)}