:root { --card-radius: 1rem; }
body { min-height: 100vh; }
.hero { background: radial-gradient(circle at 90% 10%, #6f42c1 0, transparent 34%), linear-gradient(135deg, #111827, #212529 68%); }
.eyebrow { color: var(--bs-primary); font-size: .78rem; font-weight: 800; letter-spacing: .14em; margin-bottom: .35rem; text-transform: uppercase; }
.section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 1.25rem; }
.section-heading h1, .section-heading h2 { margin-bottom: 0; }
.card { border-radius: var(--card-radius); }
.card-lift { transition: transform .18s ease, box-shadow .18s ease; }
.card-lift:hover, .card-lift:focus-within { box-shadow: var(--bs-box-shadow) !important; transform: translateY(-3px); }
.avatar { align-items: center; background: linear-gradient(135deg, var(--bs-primary), #6f42c1); border-radius: 50%; color: white; display: inline-flex; flex: 0 0 3rem; font-size: 1.15rem; font-weight: 800; height: 3rem; justify-content: center; }
.avatar-lg { font-size: 2rem; height: 5rem; width: 5rem; }
.line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.min-w-0 { min-width: 0; }
.progress { height: .65rem; }
.progress-tall { height: 1rem; }
.code-panel { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: 1rem; overflow: auto; white-space: pre-wrap; }
.pattern-card.band-frontier { border-top-color: #dc3545 !important; }
.pattern-card.band-growth { border-top-color: #fd7e14 !important; }
.pattern-card.band-practice { border-top-color: #ffc107 !important; }
.pattern-card.band-familiar { border-top-color: #198754 !important; }
.pattern-card.band-mastered { border-top-color: #6c757d !important; }
.band-badge-frontier { color: #fff; background: #dc3545; }
.band-badge-growth { color: #111; background: #fd7e14; }
.band-badge-practice { color: #111; background: #ffc107; }
.band-badge-familiar { color: #fff; background: #198754; }
.band-badge-mastered { color: #fff; background: #6c757d; }
.profile-aside { top: 5.5rem; }
.tutorial-body { font-size: 1.06rem; line-height: 1.75; }
form p label { display: block; font-weight: 600; margin-bottom: .35rem; }
form p input:not([type=checkbox]), form p textarea, form p select { width: 100%; }
form .helptext { color: var(--bs-secondary-color); display: block; font-size: .875em; }
form .errorlist { color: var(--bs-danger); }
@media (prefers-reduced-motion: reduce) { .card-lift { transition: none; } }