The GlassCard is one component with two visual modes

Every card in the portal — dashboard summaries, project cards, booking entries, action items, session notes, settings panels — uses the same GlassCard component. It is nineteen lines of code. A div with rounded corners, a border, and backdrop blur. The component takes one boolean prop called accent. When accent is false, the card uses the default glass border and glass background — a subtle translucent container that blends with the dark portal background. When accent is true, the border shifts to twenty-five percent of the service accent colour blended into transparent using color-mix, and the background shifts to four percent of the accent. That single boolean creates two distinct visual weights. Default cards recede. Accent cards draw attention. The admin dashboard uses accent cards for upcoming bookings so they stand out from the project list. The client dashboard uses them for the next meeting. The bookings page uses them for upcoming sessions and default cards for past ones. The same component handles both without a className override. The colour values come from CSS custom properties — --color-glass-border and --color-glass for default, --color-accent for the tinted variant. Those properties are set once on the portal layout and every GlassCard underneath inherits them. No prop drilling, no theme context, no conditional class logic inside the cards. One component, one prop, two modes, and every surface in the portal has a consistent look because they all render through the same nineteen lines.