* { box-sizing: border-box; font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
:root {
	--bg0:#0B1022;
	--bg1:#121B31;
	--card:#121B33;
	--card2:#0F172A;
	--txt:#E5E7EB;
	--muted:#94A3B8;
	--line:#1F2A44;
	--accent:#7C3AED;
	--accent2:#22D3EE;
	--job:#38BDF8;
	--file:#F59E0B;
	--good:#34D399;
	--warn:#FB7185;
}

body { margin:0; color:var(--txt); background: radial-gradient(1000px 600px at 10% 0%, rgba(124,58,237,0.22), transparent 60%), radial-gradient(900px 600px at 90% 10%, rgba(34,211,238,0.16), transparent 55%), linear-gradient(180deg,var(--bg0),var(--bg1)); }

.app-shell { min-height: 100vh; }

.topbar { position: sticky; top:0; z-index: 10; padding: 16px 18px; background: rgba(11,16,34,0.72); border-bottom: 1px solid rgba(148,163,184,0.12); backdrop-filter: blur(14px); display:flex; align-items:center; justify-content:space-between; gap:14px; }
.brand { display:flex; flex-direction:column; gap:2px; }
.brand-title { font-weight: 800; letter-spacing: 0.2px; font-size:16px; }
.brand-sub { font-size: 12px; color: rgba(229,231,235,0.72); }

.search { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.search-box { display:flex; align-items:center; gap:10px; padding:10px; background: rgba(15,23,42,0.74); border:1px solid rgba(148,163,184,0.14); border-radius:14px; box-shadow: 0 12px 30px rgba(0,0,0,0.25); }
.search-box input { width: 320px; max-width: 52vw; padding:10px 12px; border-radius:12px; border:1px solid rgba(148,163,184,0.14); background: rgba(2,6,23,0.25); color: var(--txt); outline:none; }
.search-box input::placeholder { color: rgba(148,163,184,0.75); }
.btn { padding:9px 12px; border-radius:12px; border:1px solid rgba(148,163,184,0.14); background: rgba(2,6,23,0.18); color: var(--txt); cursor:pointer; }
.btn.primary { background: linear-gradient(90deg, rgba(124,58,237,0.95), rgba(34,211,238,0.75)); border: 0; }
.btn:hover { filter: brightness(1.06); }

.view-toggle { display:inline-flex; border-radius: 12px; overflow:hidden; border: 1px solid rgba(148,163,184,0.14); background: rgba(15,23,42,0.60); }
.view-toggle button { padding:10px 12px; border:0; background: transparent; color: rgba(229,231,235,0.82); cursor:pointer; }
.view-toggle button.active { background: rgba(124,58,237,0.38); color: #fff; }

.layout { display:grid; grid-template-columns: 1fr 340px; gap: 16px; padding: 16px 18px 22px; align-items:start; }
.canvas { min-width: 0; }
.sidebar { display:flex; flex-direction:column; gap: 12px; }

.card { background: linear-gradient(180deg, rgba(18,27,51,0.92), rgba(15,23,42,0.74)); border: 1px solid rgba(148,163,184,0.16); border-radius: 18px; box-shadow: 0 18px 55px rgba(0,0,0,0.28); }

#network { height: 720px; }

.panel { padding: 14px 14px; }
.panel h3 { margin: 0 0 10px 0; font-size: 14px; }
.panel ul { margin: 0; padding-left: 18px; color: rgba(229,231,235,0.78); font-size: 13px; }
.panel li { margin: 6px 0; }

.legend-row { display:flex; align-items:center; gap:10px; font-size: 13px; color: rgba(229,231,235,0.78); margin: 8px 0; }
.legend-dot { width: 12px; height: 12px; border-radius: 4px; display:inline-block; }
.legend-dot.file { background: var(--file); box-shadow: 0 0 18px rgba(245,158,11,0.35); }
.legend-dot.job { background: var(--job); box-shadow: 0 0 18px rgba(56,189,248,0.35); }
.legend-line { width: 26px; height: 2px; border-radius: 999px; display:inline-block; }
.legend-line.read { background: rgba(134, 239, 172, 0.85); }
.legend-line.write { background: rgba(253, 224, 71, 0.85); }
.legend-line.lookup { background: rgba(216, 180, 254, 0.90); border-bottom: 2px dashed rgba(216, 180, 254, 0.90); height:0; }

/* overlay canvas used for animated edge flow */
.network-wrap { position: relative; }
#flowOverlay { position:absolute; inset:0; pointer-events:none; opacity:0.85; z-index: 2; }

#network { position: relative; z-index: 1; }

.details .empty { color: rgba(148,163,184,0.9); font-size: 13px; }
.details .meta { font-size: 13px; color: rgba(229,231,235,0.9); margin-top: 8px; }
.details .meta div { margin: 8px 0; }

.card-head { padding: 14px 14px 0; display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.card-head h3 { margin: 0; font-size: 14px; }
.hint { color: rgba(148,163,184,0.9); font-size: 12px; }

/* Pipeline narrative */
.pipeline-visual { padding: 14px; display:flex; flex-direction:column; gap: 14px; }
.pipeline-block { padding: 12px; border-radius: 14px; border:1px solid rgba(148,163,184,0.14); background: rgba(2,6,23,0.25); }
.pipeline-title { font-weight: 700; font-size: 13px; margin-bottom: 10px; color: rgba(229,231,235,0.92); }
.pipeline-step { display:grid; grid-template-columns: 180px 1fr; gap: 12px; align-items:start; }
.pipeline-node { padding: 10px 12px; border-radius: 12px; background: rgba(56,189,248,0.10); border: 1px solid rgba(56,189,248,0.35); color: rgba(229,231,235,0.95); cursor: pointer; }
.pipeline-io { padding: 10px 12px; border-radius: 12px; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.24); color: rgba(229,231,235,0.85); font-size: 12.5px; line-height: 1.45; }
.pipeline-arrow { text-align:center; color: rgba(148,163,184,0.9); padding: 6px 0; font-weight: 800; }

/* Table */
#tableContainer { padding: 14px; }
#lineageTable { width:100%; border-collapse: collapse; font-size: 13px; }
#lineageTable thead th { text-align:left; padding: 10px; color: rgba(229,231,235,0.92); background: rgba(2,6,23,0.25); border-bottom: 1px solid rgba(148,163,184,0.14); }
#lineageTable tbody td { padding: 10px; border-top: 1px solid rgba(148,163,184,0.10); color: rgba(229,231,235,0.85); vertical-align: top; }
#lineageTable tbody tr:hover { background: rgba(124,58,237,0.12); cursor:pointer; }

/* ✨ Glow & motion hooks used by JS */
.glow { animation: glowPulse 1.2s ease-in-out infinite; }
@keyframes glowPulse {
	0%,100% { filter: drop-shadow(0 0 0 rgba(34,211,238,0.0)); }
	50% { filter: drop-shadow(0 0 14px rgba(34,211,238,0.55)); }
}

@media (max-width: 1100px) {
	.layout { grid-template-columns: 1fr; }
	#network { height: 640px; }
}