:root {
    --nl-primary: #00897b;
    --nl-primary-dark: #00695c;
    --nl-primary-light: #e8f5f2;
    --nl-text: #263238;
    --nl-muted: #607d8b;
    --nl-bg: #f5f8f7;
}

body { background: var(--nl-bg); color: var(--nl-text); min-height: 100vh; }
.navbar-brand { letter-spacing: .02em; font-weight: 700; }
.btn-primary { --bs-btn-bg: var(--nl-primary); --bs-btn-border-color: var(--nl-primary); --bs-btn-hover-bg: var(--nl-primary-dark); --bs-btn-hover-border-color: var(--nl-primary-dark); }
.text-bg-primary { background-color: var(--nl-primary) !important; }
.card { border-radius: 1rem; }
.feature-card { min-height: 13rem; }
.feature-icon { width: 3rem; height: 3rem; display: inline-grid; place-items: center; border-radius: .8rem; background: var(--nl-primary-light); color: var(--nl-primary); font-size: 1.35rem; }
.skip-link { position: absolute; left: -9999px; top: .5rem; z-index: 9999; }
.skip-link:focus { left: .5rem; }
.empty-state { border: 2px dashed #b0bec5; border-radius: 1rem; padding: 2rem; text-align: center; color: var(--nl-muted); background: #fff; }
.learning-card { min-height: 22rem; background: #fff; border: 2px solid #dfe8e6; border-radius: 1rem; padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; overflow-wrap: anywhere; }
.learning-card:focus { outline: .2rem solid rgba(0,137,123,.3); outline-offset: .15rem; }
.preview-content { font-size: 1.2rem; line-height: 1.6; width: 100%; }
.preview-image,.card-content-image { display: block; max-width: 100%; max-height: 12rem; object-fit: contain; margin: 0 auto 1.25rem; }
.card-preview-panel { top: 1rem; }
.card-table td { max-width: 22rem; }
.form-control:focus,.form-select:focus,.btn:focus-visible,.nav-link:focus-visible { border-color: var(--nl-primary); box-shadow: 0 0 0 .25rem rgba(0,137,123,.2); }
@media (max-width: 767.98px) {
    .card-table thead { display: none; }
    .card-table,.card-table tbody,.card-table tr,.card-table td { display: block; width: 100%; }
    .card-table tr { padding: .75rem; border-bottom: 1px solid #dee2e6; }
    .card-table td { border: 0; padding: .3rem .5rem; max-width: none; text-align: left !important; }
    .learning-card { min-height: 18rem; }
}