:root { color-scheme: light dark; font-family: ui-rounded, system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { padding: 6px; background: #172554; color: #eff6ff; }
main { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: 1fr 1fr; gap: 0 9px; width: 100%; height: 100%; min-height: 60px; padding: 10px; border: 1px solid #60a5fa; border-radius: 8px; background: linear-gradient(135deg, #1e3a8a, #172554); cursor: default; transition: border-color 120ms ease, background 120ms ease; }
main:hover { border-color: #dbeafe; background: linear-gradient(135deg, #1d4ed8, #1e3a8a); }
#mark { grid-row: 1 / 3; align-self: center; width: 30px; height: 30px; border-radius: 9px; background: #93c5fd; }
#name { align-self: end; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
#kind { color: #bfdbfe; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }