:root { color-scheme: light dark; }
 body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; padding: 24px; background: #fafafa; }
 h1 { font-size: 20px; margin: 0 0 4px; }
 p { color: #666; margin: 0 0 16px; font-size: 14px; }
 .category { margin-bottom: 12px; border: 1px solid #e6e6e6; border-radius: 8px; background: #fff; overflow: hidden; }
 .category-header { font-size: 16px; font-weight: 600; margin: 0; color: #111; padding: 12px 16px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; transition: background 0.2s; }
 .category-header:hover { background: #f9f9f9; }
 .category-header::after { content: '▼'; font-size: 12px; color: #666; transition: transform 0.3s; }
 .category.collapsed .category-header::after { transform: rotate(-90deg); }
 .category-docs { display: grid; gap: 4px; padding: 6px 10px 10px; transition: padding 0.3s ease-out; }
 .category.collapsed .category-docs { display: none; }
 .card { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border: 1px solid #e6e6e6; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.03); transition: box-shadow 0.2s; margin-bottom: 4px; }
 .card:hover { box-shadow: 0 2px 4px rgba(0,0,0,.06); }
 .info { flex: 1; min-width: 0; }
 .title { font-size: 13px; font-weight: 600; margin: 0 0 4px; color: #111; line-height: 1.3; }
 .actions { display: flex; gap: 4px; flex-wrap: wrap; }
 button, a.btn { padding: 4px 8px; border-radius: 4px; border: 0; text-decoration: none; font-weight: 500; cursor: pointer; font-size: 11px; display: inline-flex; align-items: center; gap: 3px; background:#111; color:#fff; transition: 0.2s; }
 button:hover, a.btn:hover { opacity: 0.9; }
 .btn.secondary { background:#f2f2f2; color:#111; }
 .qr { display: grid; gap: 2px; justify-items: center; flex-shrink: 0; }
 .qr canvas { width: 50px !important; height: 50px !important; border-radius: 4px; }
 .label { font-size: 9px; color:#888; }
 @media (max-width: 640px) { .card { grid-template-columns: 1fr; gap: 8px; } .qr { justify-self: start; } }