/* Client360 */
.root { display: flex; flex-direction: column; height: 100%; overflow-y: auto; }
.backBtn { align-self: flex-start; background: none; border: none; color: var(--color-text-tertiary); font-size: var(--text-sm); cursor: pointer; padding: var(--space-4) var(--space-6) 0; font-family: var(--font-sans); transition: color var(--duration-fast) var(--ease-standard); }
.backBtn:hover { color: var(--color-text-primary); }
/* Header */
.header { margin: var(--space-3) var(--space-6) 0; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.headerTop { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.identity { display: flex; align-items: center; gap: var(--space-4); }
.avatar { width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--color-violet-glow); border: 2px solid var(--color-violet); display: flex; align-items: center; justify-content: center; font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-violet-light); flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.nameBlock { display: flex; flex-direction: column; gap: var(--space-1); }
.name { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-text-primary); letter-spacing: var(--tracking-tight); margin: 0; }
.meta { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; }
.intentBadge { flex-shrink: 0; align-self: flex-start; }
/* KPI row */
.kpiRow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.kpiChip { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.kpiLabel { font-size: 9px; font-weight: var(--font-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-tertiary); }
.qdWrap { display: flex; align-items: center; gap: var(--space-3); }
.qdValue { font-size: var(--text-2xl); font-weight: var(--font-bold); }
.qdDelta { font-size: 10px; display: block; }
.kpiValue { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-text-primary); }
.kpiSub { font-size: var(--text-xs); color: var(--color-text-tertiary); }
/* Action bar */
.actionBar { display: flex; gap: var(--space-3); flex-wrap: wrap; }
/* Tabs */
.tabNav { display: flex; gap: 0; border-bottom: var(--glass-border); margin: var(--space-4) var(--space-6) 0; }
.tabBtn { position: relative; background: none; border: none; padding: var(--space-3) var(--space-5); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text-tertiary); cursor: pointer; transition: color var(--duration-fast) var(--ease-standard); }
.tabActive { color: var(--color-text-primary); }
.tabUnderline { position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--color-violet); border-radius: 1px; }
/* Content */
.tabContent { padding: var(--space-5) var(--space-6) var(--space-10); flex: 1; }