@layer views {
.home-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.home-col { display: flex; flex-direction: column; gap: 16px; }
.home-hello { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-34); letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 6px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; }
.kpi { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-13); padding: 12px 14px; text-align: left; }
.kpi:hover { border-color: var(--line-2); }
.kpi b { display: block; font-family: var(--f-display); font-weight: 700; font-size: var(--fs-26); font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi span { font-size: var(--fs-11-5); color: var(--fg-3); }
.kpi.bad b { color: var(--bad); }
.kpi.warn b { color: var(--warn); }
.kpi.acc b { color: var(--accent); }
.mention-i { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: var(--fs-12-5); color: var(--fg-2); cursor: pointer; }
.mention-i:first-child { border-top: 0; }
.mention-i b { color: var(--fg); }
.mention-i .t { font-size: var(--fs-11); color: var(--fg-4); }

@media (max-width: 1100px) { .home-grid { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .kpis { grid-template-columns: 1fr 1fr; } }
a.kpi { display: block; color: inherit; }
.tli.goal-line { grid-template-columns: 40px minmax(0, 1fr) auto; color: inherit; }
.tli.goal-line .muted { font-size: var(--fs-11-5); }
.kpi b.txt { font-size: var(--fs-15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 3px 0; }
.mention-i .ic { width: 22px; height: 22px; border-radius: var(--r-round); display: grid; place-items: center; flex: none; }
.mention-i .ic.ai { background: color-mix(in srgb, var(--claude) 15%, transparent); color: var(--claude); }
.mention-i.unread b::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: var(--r-round); background: var(--accent); margin-left: 6px; vertical-align: middle; }
}