:root {
  color-scheme: light;
  --bg: #f4f7fb;
  --text: #142439;
  --muted: #6b7e93;
  --line: rgba(25, 55, 86, .11);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; color: var(--text); background: radial-gradient(circle at 8% 0, rgba(32, 180, 190, .13), transparent 34rem), radial-gradient(circle at 96% 100%, rgba(98, 104, 225, .12), transparent 35rem), var(--bg); }
body::before { position: fixed; inset: 0; pointer-events: none; content: ""; opacity: .46; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.role-board { position: relative; width: min(1460px, calc(100% - 32px)); margin: 0 auto; padding: 20px 0 16px; }
.role-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 15px; }
.eyebrow { margin: 0 0 7px; color: #0aa99b; font-size: 12px; font-weight: 850; letter-spacing: .2em; }
h1 { margin: 0; font-size: clamp(30px, 3.4vw, 48px); line-height: 1; letter-spacing: -.045em; }
.subtitle { margin: 7px 0 0; color: var(--muted); font-size: 14px; }
.hero-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.hero-actions a, .live { padding: 10px 14px; color: #526b81; background: rgba(255,255,255,.86); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; text-decoration: none; box-shadow: 0 8px 24px rgba(36,63,89,.06); }
.live { display: flex; align-items: center; gap: 8px; }
.live i { width: 8px; height: 8px; background: #e3a62d; border-radius: 50%; }
.live.connected i { background: #0aa99b; box-shadow: 0 0 12px rgba(10,169,155,.7); }
.live.error i { background: #e05d68; }
.role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.role-card { --accent: #0aa99b; --accent2: #4f75e8; overflow: hidden; min-height: 350px; padding: 18px; background: rgba(255,255,255,.95); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 22px 60px rgba(38,66,93,.09); }
.role-card.starter { --accent: #d69a09; --accent2: #ef7c3c; }
.role-card.overload { --accent: #705acb; --accent2: #4f75e8; }
.role-card.low { --accent: #e46564; --accent2: #d89b27; }
.role-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.role-card header span { color: var(--accent); font-size: 10px; font-weight: 850; letter-spacing: .16em; }
.role-card h2 { margin: 3px 0 0; font-size: 21px; }
.role-card header strong { padding: 8px 11px; color: var(--muted); background: #f5f8fb; border-radius: 10px; font-size: 12px; white-space: nowrap; }
.role-card header b { color: var(--accent); font-size: 22px; font-variant-numeric: tabular-nums; }
.role-card > p { margin: 10px 0 3px; color: var(--muted); font-size: 13px; }
.role-card canvas { display: block; width: 100%; height: 225px; border-radius: 15px; background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%); }
.role-card footer { color: #8292a3; font-size: 11px; text-align: right; }
@media (max-width: 860px) { .role-grid { grid-template-columns: 1fr; } .role-hero { align-items: flex-start; flex-direction: column; } .hero-actions { width: 100%; justify-content: flex-start; } }
@media (max-width: 520px) { .role-board { width: calc(100% - 20px); } .role-card { padding: 14px; border-radius: 18px; } .role-card canvas { height: 250px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; } }