{{}}

.nav-page { margin: 4px 0 32px; } .nav-intro { font-size: 0.84rem; color: var(–secondary); margin: 0 0 28px; line-height: 1.6; } /* —- Section —- */ .nav-section { margin-bottom: 26px; } .nav-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .nav-section-head h3 { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(–secondary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin: 0; } .nav-section-head::after { content: ”; flex: 1; height: 1px; background: var(–border); } /* —- Grid + Card —- */ .nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 8px; } .nav-page .nav-card { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: var(–theme); border: 1px solid var(–border); border-radius: var(–radius); box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.08); text-decoration: none !important; color: var(–primary); transition: transform 0.1s, box-shadow 0.3s ease; } .nav-page .nav-card:hover { box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12); transform: translateY(-2px); } .nav-page .nav-card:active { transform: scale(0.98); } .nav-card-icon { font-size: 1.05rem; line-height: 1; flex-shrink: 0; } .nav-card-body { min-width: 0; } .nav-card-name { display: block; font-size: 0.9rem; font-weight: 600; color: var(–primary); line-height: 1.3; } .nav-card-desc { display: block; font-size: 0.72rem; color: var(–secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 480px) { .nav-grid { grid-template-columns: repeat(2, 1fr); } .nav-card-desc { display: none; } }