/* ========================================================= Awall — Dashboard Design Variants (LOCAL BRANCH ONLY) Four variants are layered here: • Variant A (default) — conservative DESIGN.md fix Aligns metrics-grid, dashboard-row--3, dashboard-row--2-1 on a shared 12-column grid. Tightens content baselines across cards in the same row. Stays inside DESIGN.md. • Variant B — Brutalist Terminal JetBrains Mono everywhere, square corners, inverted monochrome blocks, bracketed status, zero radius. Off-spec (DESIGN.md forbids second face / square corners / no-radius cards). • Variant C — Soft Neumorphism Pillowy raised + inset shadows, no hairlines, plump rounded surfaces. Off-spec (DESIGN.md forbids inner shadows and border-led separation goes away). • Variant D — Glass Cyberpop Glassmorphism, neon gradients, animated backdrop. Off-spec (DESIGN.md explicitly forbids glass + gradient text + decorative motion). Variant A applies by default (no data-variant attr or data-variant="a"). B/C/D apply on [data-variant="b|c|d"] set on . ========================================================= */ /* ========================================================= VARIANT A — Conservative DESIGN.md alignment fix Active by default (also when data-variant="a"). Strategy: replace the 4-col metrics-grid + 3-col / 2-1 dashboard-row patterns with a single 12-column grid so all card edges line up with one another regardless of how many cards a row holds. Stays inside DESIGN.md tokens. ========================================================= */ html:not([data-variant]) .metrics-grid, html[data-variant="a"] .metrics-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } html:not([data-variant]) .metrics-grid > .metric-card, html[data-variant="a"] .metrics-grid > .metric-card { grid-column: span 3; } html:not([data-variant]) .dashboard-row, html[data-variant="a"] .dashboard-row { grid-template-columns: repeat(12, minmax(0, 1fr)); } html:not([data-variant]) .dashboard-row--3 > *, html[data-variant="a"] .dashboard-row--3 > * { grid-column: span 4; } html:not([data-variant]) .dashboard-row--2-1 > *, html[data-variant="a"] .dashboard-row--2-1 > * { grid-column: span 4; } html:not([data-variant]) .dashboard-row--2-1 > :first-child, html[data-variant="a"] .dashboard-row--2-1 > :first-child { grid-column: span 8; } html:not([data-variant]) .dashboard-row--full > *, html[data-variant="a"] .dashboard-row--full > * { grid-column: span 12; } @media (max-width: 1100px) { html:not([data-variant]) .metrics-grid, html[data-variant="a"] .metrics-grid, html:not([data-variant]) .dashboard-row, html[data-variant="a"] .dashboard-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } html:not([data-variant]) .metrics-grid > .metric-card, html[data-variant="a"] .metrics-grid > .metric-card, html:not([data-variant]) .dashboard-row > *, html[data-variant="a"] .dashboard-row > * { grid-column: span 1; } html:not([data-variant]) .dashboard-row--2-1 > :first-child, html[data-variant="a"] .dashboard-row--2-1 > :first-child { grid-column: span 2; } html:not([data-variant]) .dashboard-row--full > *, html[data-variant="a"] .dashboard-row--full > * { grid-column: span 2; } } @media (max-width: 600px) { html:not([data-variant]) .metrics-grid, html[data-variant="a"] .metrics-grid, html:not([data-variant]) .dashboard-row, html[data-variant="a"] .dashboard-row { grid-template-columns: 1fr; } html:not([data-variant]) .metrics-grid > .metric-card, html[data-variant="a"] .metrics-grid > .metric-card, html:not([data-variant]) .dashboard-row > *, html[data-variant="a"] .dashboard-row > *, html:not([data-variant]) .dashboard-row--2-1 > :first-child, html[data-variant="a"] .dashboard-row--2-1 > :first-child { grid-column: span 1; } } /* Vertical baseline alignment across cards in the same row. Lists and stat-grids each had their own first-row padding, so the first content baseline drifted card-to-card. Pin them all to the same start. */ html:not([data-variant]) .pipeline-row:first-child, html:not([data-variant]) .provider-health-row:first-child, html:not([data-variant]) .leaderboard-row:first-child, html:not([data-variant]) .system-status-item:first-child, html[data-variant="a"] .pipeline-row:first-child, html[data-variant="a"] .provider-health-row:first-child, html[data-variant="a"] .leaderboard-row:first-child, html[data-variant="a"] .system-status-item:first-child { padding-top: 0; } html:not([data-variant]) .stat-grid, html[data-variant="a"] .stat-grid { padding: 0; } /* Metric values should keep one consistent line-height regardless of empty/full state, so the four cards' bottom lines align. */ html:not([data-variant]) .metric-card, html[data-variant="a"] .metric-card { display: flex; flex-direction: column; } html:not([data-variant]) .metric-card-value, html[data-variant="a"] .metric-card-value { font-variant-numeric: tabular-nums; min-height: 38px; } html:not([data-variant]) .metric-card-desc, html[data-variant="a"] .metric-card-desc { margin-top: auto; } /* Bar-chart label/total pin to a fixed baseline so they sit on the same Y as the right card's last row, regardless of cell count. */ html:not([data-variant]) .bar-chart, html[data-variant="a"] .bar-chart { padding-bottom: 32px; } /* Threat list should breathe at the same rate as the bar chart. */ html:not([data-variant]) .threat-list, html[data-variant="a"] .threat-list { display: grid; grid-auto-rows: 1fr; gap: var(--space-3); height: 100%; } html:not([data-variant]) .threat-row, html[data-variant="a"] .threat-row { align-self: stretch; justify-content: center; } /* Ops strip — pills wrap on narrow widths. Make sure the first pill's left edge sits on the same vertical as page-title and metric-card 1's left edge. (Already true; kept here as a sanity anchor — page-title and ops-strip share `content-wrapper` padding.) */ html:not([data-variant]) .ops-strip, html[data-variant="a"] .ops-strip { align-items: center; } /* ========================================================= VARIANT B — Brutalist Terminal Mono everywhere. Square corners. Inverted blocks for status. Off-spec deliberately. ========================================================= */ html[data-variant="b"] { --b-ink: #0b0b0b; --b-paper: #f3efe7; --b-paper-2: #ebe6db; --b-rule: #0b0b0b; --b-rule-soft: #b8b1a3; --b-mute: #5d574c; --b-accent: #d94d1a; /* hot orange */ --b-good: #0e6a3a; --b-bad: #a60e0e; } html[data-variant="b"][data-theme="dark"] { --b-ink: #f3efe7; --b-paper: #0b0b0b; --b-paper-2: #131210; --b-rule: #f3efe7; --b-rule-soft: #3a362f; --b-mute: #9a948a; --b-accent: #ff7a3d; --b-good: #4ade80; --b-bad: #ff6363; } html[data-variant="b"] body { background: var(--b-paper); color: var(--b-ink); font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; } html[data-variant="b"] .main-content { background: var(--b-paper); } html[data-variant="b"] .dash-grid-base { background-image: linear-gradient(to right, var(--b-rule-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--b-rule-soft) 1px, transparent 1px); background-size: 24px 24px; opacity: 0.4; } html[data-variant="b"] .sidebar { background: var(--b-ink); } html[data-variant="b"] .sidebar-brand-name, html[data-variant="b"] .sidebar-nav-link, html[data-variant="b"] .sidebar-user__name { color: var(--b-paper); font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.06em; } html[data-variant="b"] .sidebar-nav-link.active { background: var(--b-paper); color: var(--b-ink); border-left-color: var(--b-accent); box-shadow: none; } html[data-variant="b"] .sidebar-nav-link.active::before { display: none; } html[data-variant="b"] .page-title { font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--b-ink); } html[data-variant="b"] .page-title::before { content: "▌ "; color: var(--b-accent); } html[data-variant="b"] .ops-strip { border-top: 1px solid var(--b-rule); border-bottom: 1px solid var(--b-rule); padding: 8px 0; gap: 0; margin-bottom: var(--space-6); } html[data-variant="b"] .ops-pill { background: transparent; border: 0; border-right: 1px solid var(--b-rule-soft); border-radius: 0; font-family: 'JetBrains Mono', monospace; color: var(--b-ink); padding: 4px 14px; } html[data-variant="b"] .ops-pill:last-child { border-right: 0; } html[data-variant="b"] .ops-pill-dot { width: 6px; height: 6px; border-radius: 0; background: var(--b-mute); } html[data-variant="b"] .ops-pill--ok .ops-pill-dot { background: var(--b-good); } html[data-variant="b"] .ops-pill--err .ops-pill-dot { background: var(--b-bad); } html[data-variant="b"] .ops-pill--err { background: transparent; border-color: transparent var(--b-rule-soft) transparent transparent; color: var(--b-bad); } html[data-variant="b"] .metrics-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; border: 1px solid var(--b-rule); background: var(--b-paper); margin-bottom: var(--space-6); } html[data-variant="b"] .metric-card { grid-column: span 3; background: transparent; border: 0; border-right: 1px solid var(--b-rule); border-top: 0; border-radius: 0; box-shadow: none; padding: var(--space-6); font-family: 'JetBrains Mono', monospace; } html[data-variant="b"] .metric-card:last-child { border-right: 0; } html[data-variant="b"] .metric-card:hover { background: var(--b-ink); color: var(--b-paper); transform: none; box-shadow: none; border-color: var(--b-rule); } html[data-variant="b"] .metric-card:hover .metric-card-label, html[data-variant="b"] .metric-card:hover .metric-card-desc, html[data-variant="b"] .metric-card:hover .metric-card-value { color: var(--b-paper); } html[data-variant="b"] .metric-card-label { color: var(--b-mute); font-family: inherit; letter-spacing: 0.08em; } html[data-variant="b"] .metric-card-label::before { content: "[ "; } html[data-variant="b"] .metric-card-label::after { content: " ]"; } html[data-variant="b"] .metric-card-value { font-family: inherit; font-weight: 700; color: var(--b-ink); font-variant-numeric: tabular-nums; } html[data-variant="b"] .metric-card--danger { border-top: 0; box-shadow: inset 0 4px 0 var(--b-bad); } html[data-variant="b"] .metric-card--success { border-top: 0; box-shadow: inset 0 4px 0 var(--b-good); } html[data-variant="b"] .metric-card--primary { border-top: 0; box-shadow: inset 0 4px 0 var(--b-accent); } html[data-variant="b"] .dashboard-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); } html[data-variant="b"] .dashboard-row--3 > * { grid-column: span 4; } html[data-variant="b"] .dashboard-row--2-1 > * { grid-column: span 4; } html[data-variant="b"] .dashboard-row--2-1 > :first-child{ grid-column: span 8; } html[data-variant="b"] .dashboard-row--full > * { grid-column: span 12; } html[data-variant="b"] .card { background: var(--b-paper); border: 1px solid var(--b-rule); border-radius: 0; box-shadow: none; font-family: 'JetBrains Mono', monospace; } html[data-variant="b"] .card-header { padding-bottom: var(--space-3); border-bottom: 1px solid var(--b-rule); margin-bottom: var(--space-4); } html[data-variant="b"] .card-title { font-family: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } html[data-variant="b"] .card-title::before { content: "// "; color: var(--b-accent); } html[data-variant="b"] .dashboard-row > .card:hover, html[data-variant="b"] .metric-card:hover { border-color: var(--b-accent) !important; } html[data-variant="b"] .status-tag, html[data-variant="b"] .status-pill, html[data-variant="b"] .pipeline-row-mode, html[data-variant="b"] .provider-health-state { background: transparent; border: 1px solid currentColor; border-radius: 0; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.06em; } html[data-variant="b"] .status-tag::before { content: "["; } html[data-variant="b"] .status-tag::after { content: "]"; } html[data-variant="b"] .status-tag--blocked { color: var(--b-bad); } html[data-variant="b"] .status-tag--allowed { color: var(--b-good); } html[data-variant="b"] .threat-row-bar { height: 8px; background: var(--b-rule-soft); border-radius: 0; } html[data-variant="b"] .threat-row-bar-fill { background: var(--b-accent); border-radius: 0; } html[data-variant="b"] .heatmap-cell { border-radius: 0; background: color-mix(in srgb, var(--b-accent) calc(var(--cell-intensity, 0%) * 0.9 + 4%), var(--b-rule-soft)); } html[data-variant="b"] .heatmap-cell[data-intensity="0"] { background: var(--b-rule-soft); opacity: 0.4; } html[data-variant="b"] .data-table thead th { font-family: inherit; letter-spacing: 0.06em; border-bottom: 1px solid var(--b-rule); } html[data-variant="b"] .data-table tbody td { border-bottom: 1px dashed var(--b-rule-soft); } html[data-variant="b"] .trigger-chip { background: transparent; border: 1px solid var(--b-bad); color: var(--b-bad); border-radius: 0; } html[data-variant="b"] .bar { border-radius: 0; } html[data-variant="b"] .bar--allowed { background: var(--b-good); opacity: 1; } html[data-variant="b"] .bar--blocked { background: var(--b-bad); opacity: 1; } /* ========================================================= VARIANT C — Soft Neumorphism Plump rounded surfaces, raised + inset pillow shadows, pastel canvas, no hairlines. Off-spec deliberately. ========================================================= */ html[data-variant="c"] { --c-canvas: #e7ecf3; --c-card: #eef2f8; --c-card-ink: #2a3a55; --c-mute: #7a87a0; --c-primary: #5b7cf3; --c-good: #2bb673; --c-bad: #f06a6a; --c-warn: #f2b94c; --c-shadow-light: rgba(255, 255, 255, 0.95); --c-shadow-dark: rgba(159, 175, 199, 0.55); } html[data-variant="c"][data-theme="dark"] { --c-canvas: #2b303b; --c-card: #303642; --c-card-ink: #e3e8f1; --c-mute: #9aa3b6; --c-primary: #7a93f7; --c-shadow-light: rgba(76, 85, 102, 0.55); --c-shadow-dark: rgba(0, 0, 0, 0.45); } html[data-variant="c"] body, html[data-variant="c"] .main-content { background: var(--c-canvas); color: var(--c-card-ink); } html[data-variant="c"] .dash-grid-base { display: none; } html[data-variant="c"] .sidebar { background: var(--c-canvas); box-shadow: 8px 0 24px var(--c-shadow-dark); border: 0; } html[data-variant="c"] .sidebar-brand-name, html[data-variant="c"] .sidebar-nav-link, html[data-variant="c"] .sidebar-user__name { color: var(--c-card-ink); } html[data-variant="c"] .sidebar-nav-link { margin: 4px var(--space-3); border-radius: 14px; border-left: 0; padding: 10px 14px; } html[data-variant="c"] .sidebar-nav-link:hover { background: var(--c-canvas); box-shadow: inset 4px 4px 8px var(--c-shadow-dark), inset -4px -4px 8px var(--c-shadow-light); color: var(--c-card-ink); } html[data-variant="c"] .sidebar-nav-link.active { background: var(--c-canvas); color: var(--c-primary); box-shadow: inset 4px 4px 10px var(--c-shadow-dark), inset -4px -4px 10px var(--c-shadow-light); border-left: 0; } html[data-variant="c"] .sidebar-nav-link.active::before { display: none; } html[data-variant="c"] .page-title { font-weight: 800; letter-spacing: -0.025em; } html[data-variant="c"] .ops-strip { gap: 12px; } html[data-variant="c"] .ops-pill { background: var(--c-canvas); border: 0; border-radius: 999px; padding: 8px 16px; box-shadow: 4px 4px 10px var(--c-shadow-dark), -4px -4px 10px var(--c-shadow-light); text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 12px; } html[data-variant="c"] .ops-pill-label { font-weight: 600; } html[data-variant="c"] .metrics-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); } html[data-variant="c"] .metric-card, html[data-variant="c"] .card { background: var(--c-canvas); border: 0; border-radius: 22px; box-shadow: 8px 8px 20px var(--c-shadow-dark), -8px -8px 20px var(--c-shadow-light); color: var(--c-card-ink); } html[data-variant="c"] .metric-card { grid-column: span 3; padding: var(--space-6); } html[data-variant="c"] .metric-card:hover, html[data-variant="c"] .dashboard-row > .card:hover { transform: translateY(-2px); box-shadow: 10px 10px 24px var(--c-shadow-dark), -10px -10px 24px var(--c-shadow-light); border-color: transparent; } html[data-variant="c"] .metric-card-label { color: var(--c-mute); font-weight: 600; } html[data-variant="c"] .metric-card-value { color: var(--c-card-ink); } html[data-variant="c"] .metric-card--danger, html[data-variant="c"] .metric-card--success, html[data-variant="c"] .metric-card--primary { border-top: 0; } html[data-variant="c"] .metric-card--danger .metric-card-value { color: var(--c-bad); } html[data-variant="c"] .metric-card--success .metric-card-value { color: var(--c-good); } html[data-variant="c"] .metric-card--primary .metric-card-value { color: var(--c-primary); } html[data-variant="c"] .dashboard-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); } html[data-variant="c"] .dashboard-row--3 > * { grid-column: span 4; } html[data-variant="c"] .dashboard-row--2-1 > * { grid-column: span 4; } html[data-variant="c"] .dashboard-row--2-1 > :first-child { grid-column: span 8; } html[data-variant="c"] .dashboard-row--full > * { grid-column: span 12; } html[data-variant="c"] .card { padding: var(--space-6); } html[data-variant="c"] .card-title { font-weight: 700; } html[data-variant="c"] .status-tag, html[data-variant="c"] .status-pill { border-radius: 999px; padding: 4px 12px; background: var(--c-canvas); box-shadow: inset 3px 3px 6px var(--c-shadow-dark), inset -3px -3px 6px var(--c-shadow-light); border: 0; } html[data-variant="c"] .status-tag--blocked, html[data-variant="c"] .status-pill--err { color: var(--c-bad); } html[data-variant="c"] .status-tag--allowed, html[data-variant="c"] .status-pill--ok { color: var(--c-good); } html[data-variant="c"] .threat-row-bar { background: var(--c-canvas); height: 12px; border-radius: 999px; box-shadow: inset 3px 3px 6px var(--c-shadow-dark), inset -2px -2px 4px var(--c-shadow-light); } html[data-variant="c"] .threat-row-bar-fill { background: linear-gradient(90deg, var(--c-primary), #8b9bff); border-radius: 999px; box-shadow: 0 1px 3px var(--c-shadow-dark); } html[data-variant="c"] .stat-cell { background: var(--c-canvas); border: 0; border-radius: 16px; box-shadow: inset 3px 3px 8px var(--c-shadow-dark), inset -3px -3px 8px var(--c-shadow-light); padding: var(--space-4); } html[data-variant="c"] .heatmap-cell { border-radius: 6px; background: color-mix(in srgb, var(--c-primary) calc(var(--cell-intensity, 0%) * 0.7 + 4%), var(--c-canvas)); box-shadow: 1px 1px 2px var(--c-shadow-dark); } html[data-variant="c"] .data-table tbody tr:hover { background: var(--c-canvas); box-shadow: inset 4px 4px 10px var(--c-shadow-dark), inset -4px -4px 10px var(--c-shadow-light); } html[data-variant="c"] .bar { border-radius: 6px 6px 2px 2px; } html[data-variant="c"] .bar--allowed { background: var(--c-good); opacity: 0.85; } html[data-variant="c"] .bar--blocked { background: var(--c-bad); opacity: 0.85; } /* ========================================================= VARIANT D — Glass Cyberpop Glassmorphism, neon gradients, animated backdrop, gradient text. Off-spec on purpose — exact opposite of DESIGN.md. ========================================================= */ html[data-variant="d"] { --d-bg-1: #050018; --d-bg-2: #1a0033; --d-glass: rgba(255, 255, 255, 0.06); --d-glass-strong: rgba(255, 255, 255, 0.12); --d-stroke: rgba(255, 255, 255, 0.18); --d-ink: #f5f3ff; --d-mute: rgba(245, 243, 255, 0.6); --d-cyan: #00f0ff; --d-magenta: #ff2bd6; --d-violet: #8b5cf6; --d-lime: #b9ff66; --d-glow-cyan: 0 0 24px rgba(0, 240, 255, 0.6); --d-glow-mag: 0 0 24px rgba(255, 43, 214, 0.6); } html[data-variant="d"] body, html[data-variant="d"] .main-content { background: radial-gradient(ellipse at 20% 10%, #2a0066 0%, transparent 50%), radial-gradient(ellipse at 90% 80%, #00334d 0%, transparent 55%), radial-gradient(ellipse at 50% 100%, #4d0033 0%, transparent 60%), linear-gradient(180deg, var(--d-bg-1), var(--d-bg-2)); color: var(--d-ink); } html[data-variant="d"] .dash-grid-base { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 80%); } @keyframes d-aurora { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(2%, -1%, 0) rotate(2deg); } } html[data-variant="d"] .main-content::before { content: ""; position: absolute; inset: -10%; z-index: 0; pointer-events: none; background: radial-gradient(circle at 30% 20%, rgba(0, 240, 255, 0.18), transparent 35%), radial-gradient(circle at 75% 60%, rgba(255, 43, 214, 0.16), transparent 35%), radial-gradient(circle at 50% 90%, rgba(139, 92, 246, 0.18), transparent 40%); filter: blur(40px); animation: d-aurora 14s ease-in-out infinite; } html[data-variant="d"] .sidebar { background: rgba(8, 4, 28, 0.5); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-right: 1px solid var(--d-stroke); } html[data-variant="d"] .sidebar-brand-name, html[data-variant="d"] .sidebar-user__name { color: var(--d-ink); } html[data-variant="d"] .sidebar-nav-link { color: var(--d-mute); border-left: 0; } html[data-variant="d"] .sidebar-nav-link:hover { color: var(--d-ink); background: var(--d-glass); } html[data-variant="d"] .sidebar-nav-link.active { background: linear-gradient(90deg, rgba(0, 240, 255, 0.18), rgba(139, 92, 246, 0.18)); color: #fff; border-left: 0; box-shadow: inset 2px 0 0 var(--d-cyan), 0 0 20px rgba(0, 240, 255, 0.25); } html[data-variant="d"] .sidebar-nav-link.active::before { display: none; } html[data-variant="d"] .page-title { background: linear-gradient(90deg, var(--d-cyan), var(--d-magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.03em; font-weight: 800; } html[data-variant="d"] .ops-strip { position: relative; z-index: 1; } html[data-variant="d"] .ops-pill { background: var(--d-glass); border: 1px solid var(--d-stroke); color: var(--d-ink); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-shadow: 0 0 8px rgba(255, 255, 255, 0.15); } html[data-variant="d"] .ops-pill-label { color: var(--d-mute); } html[data-variant="d"] .ops-pill-value { color: var(--d-ink); } html[data-variant="d"] .ops-pill--ok .ops-pill-dot { background: var(--d-lime); box-shadow: 0 0 10px var(--d-lime); } html[data-variant="d"] .ops-pill--err .ops-pill-dot { background: var(--d-magenta); box-shadow: var(--d-glow-mag); } html[data-variant="d"] .ops-pill--warn .ops-pill-dot { background: #ffb84d; box-shadow: 0 0 10px #ffb84d; } html[data-variant="d"] .metrics-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); position: relative; z-index: 1; } html[data-variant="d"] .metric-card, html[data-variant="d"] .card { position: relative; background: var(--d-glass); border: 1px solid var(--d-stroke); border-radius: 18px; backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12); color: var(--d-ink); } html[data-variant="d"] .metric-card { grid-column: span 3; } html[data-variant="d"] .metric-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--d-cyan), transparent 35%, transparent 65%, var(--d-magenta)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.65; } html[data-variant="d"] .metric-card-label { color: var(--d-mute); text-transform: uppercase; } html[data-variant="d"] .metric-card-value { color: var(--d-ink); text-shadow: 0 0 24px rgba(0, 240, 255, 0.25); } html[data-variant="d"] .metric-card--danger { border-top: 0; } html[data-variant="d"] .metric-card--success { border-top: 0; } html[data-variant="d"] .metric-card--primary { border-top: 0; } html[data-variant="d"] .metric-card--danger .metric-card-value { background: linear-gradient(90deg, var(--d-magenta), #ff8a8a); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-variant="d"] .metric-card--success .metric-card-value { background: linear-gradient(90deg, var(--d-lime), var(--d-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-variant="d"] .metric-card--primary .metric-card-value { background: linear-gradient(90deg, var(--d-cyan), var(--d-violet)); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-variant="d"] .metric-card:hover, html[data-variant="d"] .dashboard-row > .card:hover { transform: translateY(-3px); border-color: var(--d-cyan); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 28px rgba(0, 240, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18); } html[data-variant="d"] .dashboard-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); position: relative; z-index: 1; } html[data-variant="d"] .dashboard-row--3 > * { grid-column: span 4; } html[data-variant="d"] .dashboard-row--2-1 > * { grid-column: span 4; } html[data-variant="d"] .dashboard-row--2-1 > :first-child { grid-column: span 8; } html[data-variant="d"] .dashboard-row--full > * { grid-column: span 12; } html[data-variant="d"] .card-title { color: var(--d-ink); font-weight: 700; } html[data-variant="d"] .card-link { color: var(--d-cyan); } html[data-variant="d"] .card-link:hover { text-shadow: var(--d-glow-cyan); } html[data-variant="d"] .card-subtle { color: var(--d-mute); } html[data-variant="d"] .status-tag, html[data-variant="d"] .status-pill { background: rgba(255, 255, 255, 0.08); border: 1px solid currentColor; backdrop-filter: blur(10px); } html[data-variant="d"] .status-tag--blocked, html[data-variant="d"] .status-pill--err { color: var(--d-magenta); text-shadow: var(--d-glow-mag); } html[data-variant="d"] .status-tag--allowed, html[data-variant="d"] .status-pill--ok { color: var(--d-lime); text-shadow: 0 0 8px var(--d-lime); } html[data-variant="d"] .threat-row-bar { background: rgba(255, 255, 255, 0.08); height: 10px; border-radius: 999px; } html[data-variant="d"] .threat-row-bar-fill { background: linear-gradient(90deg, var(--d-cyan), var(--d-magenta)); box-shadow: 0 0 12px rgba(255, 43, 214, 0.5); border-radius: inherit; } html[data-variant="d"] .stat-cell { background: var(--d-glass); border: 1px solid var(--d-stroke); border-radius: 14px; } html[data-variant="d"] .stat-cell-value { background: linear-gradient(90deg, var(--d-cyan), var(--d-violet)); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-variant="d"] .heatmap-cell { border-radius: 4px; background: color-mix(in srgb, var(--d-cyan) calc(var(--cell-intensity, 0%) * 0.85 + 4%), rgba(255, 255, 255, 0.04)); box-shadow: 0 0 8px color-mix(in srgb, var(--d-cyan) calc(var(--cell-intensity, 0%) * 0.6), transparent); } html[data-variant="d"] .heatmap-cell[data-intensity="0"] { background: rgba(255, 255, 255, 0.04); } html[data-variant="d"] .data-table thead th { color: var(--d-mute); border-bottom-color: var(--d-stroke); } html[data-variant="d"] .data-table tbody td { color: var(--d-ink); border-bottom-color: var(--d-stroke); } html[data-variant="d"] .data-table tbody tr:hover { background: rgba(255, 255, 255, 0.04); } html[data-variant="d"] .trigger-chip { background: rgba(255, 43, 214, 0.12); border: 1px solid rgba(255, 43, 214, 0.4); color: #ffa6e9; text-shadow: 0 0 6px rgba(255, 43, 214, 0.4); border-radius: 999px; } html[data-variant="d"] .bar { border-radius: 4px 4px 0 0; } html[data-variant="d"] .bar--allowed { background: linear-gradient(180deg, var(--d-lime), rgba(185, 255, 102, 0.6)); opacity: 1; box-shadow: 0 0 8px rgba(185, 255, 102, 0.45); } html[data-variant="d"] .bar--blocked { background: linear-gradient(180deg, var(--d-magenta), rgba(255, 43, 214, 0.6)); opacity: 1; box-shadow: 0 0 8px rgba(255, 43, 214, 0.45); } html[data-variant="d"] .bar-chart-gridline { border-top-color: var(--d-stroke); } /* ========================================================= Variant Switcher Button (always visible on dashboard) ========================================================= */ .variant-switcher { position: fixed; top: 16px; right: 74px; /* sits next to .theme-toggle (right: 24px, w: 40px) */ z-index: 200; height: var(--touch-target-min); padding: 0 12px 0 14px; border-radius: var(--radius-pill); background: var(--color-bg); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-body); transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .variant-switcher:hover { border-color: var(--color-primary); color: var(--color-text-heading); } .variant-switcher__label { color: var(--color-text-muted); } .variant-switcher__value { font-weight: 700; color: var(--color-primary); font-variant-numeric: tabular-nums; } .variant-switcher__hint { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-focus-ring); } /* In dark mode the switcher needs the same surface as theme-toggle. */ html[data-variant="b"] .variant-switcher { background: var(--b-paper); color: var(--b-ink); border-color: var(--b-rule); border-radius: 0; } html[data-variant="b"] .variant-switcher__value { color: var(--b-accent); } html[data-variant="c"] .variant-switcher { background: var(--c-canvas); border: 0; box-shadow: 4px 4px 10px var(--c-shadow-dark), -4px -4px 10px var(--c-shadow-light); color: var(--c-card-ink); } html[data-variant="c"] .variant-switcher__value { color: var(--c-primary); } html[data-variant="d"] .variant-switcher { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(12px); color: #fff; } html[data-variant="d"] .variant-switcher__value { color: var(--d-cyan); text-shadow: 0 0 8px var(--d-cyan); } @media (max-width: 600px) { .variant-switcher { right: 64px; height: 36px; font-size: 10px; padding: 0 10px; } }