/* PipelinePillar */
.root { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-6) var(--space-8) var(--space-4); flex-shrink: 0; }
.title { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-text-primary); margin: 0; letter-spacing: var(--tracking-tight); }
.subtitle { font-size: var(--text-sm); color: var(--color-text-tertiary); margin: 0; }
.viewToggle { display: flex; gap: var(--space-1); background: var(--glass-bg); border: var(--glass-border); border-radius: var(--radius-lg); padding: var(--space-1); }
.toggleBtn, .toggleActive { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: var(--font-medium); border: none; cursor: pointer; transition: all var(--duration-fast) var(--ease-standard); }
.toggleBtn { background: none; color: var(--color-text-tertiary); }
.toggleActive { background: var(--color-violet); color: white; }
/* Board */
.board { display: flex; gap: var(--space-4); padding: 0 var(--space-8) var(--space-8); overflow-x: auto; flex: 1; scrollbar-width: thin; }
.column { min-width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.colHeader { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--glass-bg); border-radius: var(--radius-md); border: var(--glass-border); }
.colLabel { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-text-secondary); flex: 1; }
.colCount { font-size: var(--text-xs); color: var(--color-text-tertiary); }
.cards { display: flex; flex-direction: column; gap: var(--space-2); }
/* Card */
.card { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; text-align: left; cursor: pointer; }
.cardTop { display: flex; align-items: center; gap: var(--space-3); }
.avatar { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--color-violet-glow); border: 1px solid var(--color-violet); display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-violet-light); flex-shrink: 0; }
.identity { flex: 1; min-width: 0; }
.cardName { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-primary); display: block; }
.cardMeta { font-size: 10px; color: var(--color-text-tertiary); display: block; }
.qdWrap { flex-shrink: 0; }
.cardBottom { display: flex; align-items: center; justify-content: space-between; }
.lastContact { font-size: 10px; color: var(--color-text-tertiary); }
/* List */
.list { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-8) var(--space-8); overflow-y: auto; flex: 1; }
.listHeader, .listRow { display: grid; grid-template-columns: minmax(280px, 1.3fr) minmax(180px, 0.8fr) 80px minmax(180px, 0.8fr); gap: var(--space-4); align-items: center; }
.listHeader { padding: var(--space-2) var(--space-4); font-size: 10px; font-weight: var(--font-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-tertiary); }
.listRow { width: 100%; min-height: 72px; padding: var(--space-3) var(--space-4); border: var(--glass-border); border-radius: var(--radius-lg); background: var(--glass-bg); color: var(--color-text-primary); text-align: left; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.listRow:hover { background: var(--glass-bg-hover); border-color: rgba(124, 58, 237, 0.38); transform: translateY(-1px); }
.listIdentity { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.listName { display: block; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listMeta { display: block; font-size: var(--text-xs); color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stagePill { display: inline-flex; align-items: center; gap: var(--space-2); width: fit-content; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: rgba(124, 58, 237, 0.14); border: 1px solid rgba(124, 58, 237, 0.28); color: var(--color-violet-light); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.scoreCell { width: 44px; height: 32px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.28); color: var(--color-green); font-size: var(--text-xs); font-weight: var(--font-bold); }
.emptyList { padding: var(--space-8); border: var(--glass-border); border-radius: var(--radius-lg); background: var(--glass-bg); color: var(--color-text-secondary); text-align: center; }
/* Skeletons */
.skeletonHeader { height: 32px; border-radius: var(--radius-md); margin-bottom: var(--space-2); }
.skeletonCard { height: 80px; border-radius: var(--radius-lg); margin-bottom: var(--space-2); }
