:root {
    --brand-primary: #0f766e;
    --brand-primary-dark: #0b4f4a;
    --brand-primary-soft: #e4f4f1;
    --brand-accent: #e76f51;
    --brand-accent-soft: #fff0eb;
    --ink-950: #122025;
    --ink-800: #26363b;
    --ink-600: #5b696d;
    --ink-400: #8c989b;
    --line: #dfe5e3;
    --surface: #ffffff;
    --canvas: #f4f6f3;
    --cream: #f7f3e9;
    --success: #16845b;
    --danger: #bd3c44;
    --warning: #b87513;
    --info: #246b91;
    --shadow-sm: 0 8px 24px rgba(20, 45, 43, .07);
    --shadow-lg: 0 24px 70px rgba(17, 43, 41, .14);
    --radius-sm: .7rem;
    --radius: 1rem;
    --radius-lg: 1.45rem;
    --topbar-height: 78px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink-950);
    background: var(--canvas);
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: .95rem;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-primary); text-decoration-thickness: .08em; text-underline-offset: .16em; }
a:hover { color: var(--brand-primary-dark); }
img { max-width: 100%; }

.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 1100; padding: .75rem 1rem; color: #fff; background: var(--ink-950); border-radius: .5rem; }
.skip-link:focus { top: 1rem; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: var(--topbar-height);
    color: #fff;
    background: rgba(16, 43, 45, .97);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 8px 28px rgba(10, 30, 31, .13);
    backdrop-filter: blur(14px);
}
.topbar .navbar { min-height: var(--topbar-height); padding: .55rem 0; }
.navbar-brand { display: inline-flex; align-items: center; gap: .75rem; min-width: max-content; color: #fff; text-decoration: none; }
.navbar-brand:hover { color: #fff; }
.brand-mark { display: grid; width: 43px; height: 43px; place-items: center; color: var(--ink-950); background: #f1c96f; border-radius: 13px 13px 13px 5px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); font-size: 1.28rem; }
.brand-logo { width: 46px; height: 46px; padding: 3px; object-fit: contain; background: #fff; border-radius: 12px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-copy strong { max-width: 210px; overflow: hidden; font-size: .98rem; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.brand-copy small { margin-top: .28rem; color: rgba(255,255,255,.62); font-size: .67rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.navbar-toggler { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: .75rem; font-size: 1.45rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.14); }

.app-nav { gap: .15rem; }
.app-nav .nav-link { display: flex; align-items: center; gap: .42rem; padding: .65rem .78rem !important; color: rgba(255,255,255,.7); border-radius: .72rem; font-size: .85rem; font-weight: 650; text-decoration: none; transition: .2s ease; }
.app-nav .nav-link i { font-size: .98rem; }
.app-nav .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.app-nav .nav-link.active { color: #fff; background: rgba(255,255,255,.13); box-shadow: inset 0 -2px var(--brand-accent); }
.user-menu__trigger { display: flex; align-items: center; gap: .55rem; min-width: 0; padding: .3rem .35rem .3rem .3rem; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09); border-radius: 999px; }
.user-menu__trigger img { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; }
.user-menu__copy { display: flex; flex-direction: column; min-width: 0; max-width: 125px; text-align: left; line-height: 1.15; }
.user-menu__copy strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.user-menu__copy small { margin-top: .2rem; color: rgba(255,255,255,.58); font-size: .64rem; }
.user-menu__trigger > i { margin-right: .3rem; color: rgba(255,255,255,.62); font-size: .72rem; }
.dropdown-menu { padding: .5rem; border: 1px solid var(--line); border-radius: .9rem; }
.dropdown-item { display: flex; align-items: center; gap: .6rem; padding: .58rem .7rem; border-radius: .55rem; font-size: .84rem; }
.dropdown-item:active { background: var(--brand-primary); }
.dropdown-item i { width: 1.05rem; text-align: center; }
.public-actions { display: flex; gap: .5rem; margin-left: auto; }
.btn-ghost-light { color: #fff; border: 1px solid rgba(255,255,255,.24); }
.btn-ghost-light:hover { color: #fff; background: rgba(255,255,255,.09); }

.page-main { min-height: calc(100vh - var(--topbar-height) - 74px); padding: 2rem 0 4rem; }
.page-main--public { padding-top: 0; }
.app-footer { color: var(--ink-600); background: #edf1ed; border-top: 1px solid var(--line); font-size: .78rem; }
.app-footer .container-xxl { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.3rem; padding-bottom: 1.3rem; }

h1, h2, h3, h4, h5, h6 { color: var(--ink-950); font-weight: 750; letter-spacing: -.025em; }
.eyebrow { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .55rem; color: var(--brand-primary); font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.eyebrow--light { color: #f1c96f; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.page-header h1 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.45rem); }
.page-header p { max-width: 720px; margin: .5rem 0 0; color: var(--ink-600); }
.page-header__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; }
.page-header--compact { max-width: 760px; margin-right: auto; margin-left: auto; }

.app-alert { position: relative; display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; padding: .85rem 2.8rem .85rem 1rem; border: 1px solid; border-radius: .85rem; box-shadow: var(--shadow-sm); }
.app-alert i { font-size: 1.05rem; }
.app-alert .btn-close { position: absolute; top: 50%; right: .75rem; padding: .6rem; transform: translateY(-50%) scale(.72); }
.app-alert--success { color: #0c6343; background: #e8f7ef; border-color: #b9e7ce; }
.app-alert--danger { color: #8f2931; background: #fff0f0; border-color: #f0c7ca; }
.app-alert--info { color: #205e7d; background: #edf7fc; border-color: #c7e2ef; }

.btn { --bs-btn-font-weight: 680; --bs-btn-border-radius: .7rem; display: inline-flex; align-items: center; justify-content: center; gap: .42rem; text-decoration: none; }
.btn-primary { --bs-btn-bg: var(--brand-primary); --bs-btn-border-color: var(--brand-primary); --bs-btn-hover-bg: var(--brand-primary-dark); --bs-btn-hover-border-color: var(--brand-primary-dark); --bs-btn-active-bg: var(--brand-primary-dark); --bs-btn-active-border-color: var(--brand-primary-dark); }
.btn-accent { color: #fff; background: var(--brand-accent); border-color: var(--brand-accent); }
.btn-accent:hover { color: #fff; filter: brightness(.92); }
.btn-outline-primary { --bs-btn-color: var(--brand-primary); --bs-btn-border-color: #8bbeb9; --bs-btn-hover-bg: var(--brand-primary); --bs-btn-hover-border-color: var(--brand-primary); }
.btn-outline-secondary { --bs-btn-color: var(--ink-600); --bs-btn-border-color: #c8d1cf; --bs-btn-hover-bg: var(--ink-800); --bs-btn-hover-border-color: var(--ink-800); }
.btn-soft { color: var(--brand-primary-dark); background: var(--brand-primary-soft); border-color: transparent; }
.btn-soft:hover { color: #fff; background: var(--brand-primary); }
.btn-icon { width: 38px; height: 38px; padding: 0; }

.content-card { padding: 1.35rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.content-card + .content-card { margin-top: 1rem; }
.content-card--narrow { max-width: 760px; margin-right: auto; margin-left: auto; }
.content-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; }
.content-card__header h2, .content-card__header h3 { margin: 0; font-size: 1.05rem; }
.content-card__header p { margin: .25rem 0 0; color: var(--ink-600); font-size: .82rem; }
.content-card__body-flush { margin-right: -1.35rem; margin-bottom: -1.35rem; margin-left: -1.35rem; overflow: hidden; border-radius: 0 0 var(--radius) var(--radius); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.metric-card { position: relative; min-height: 145px; padding: 1.2rem; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.metric-card::after { position: absolute; right: -22px; bottom: -34px; width: 100px; height: 100px; content: ""; background: var(--brand-primary-soft); border-radius: 50%; opacity: .85; }
.metric-card--accent::after { background: var(--brand-accent-soft); }
.metric-card__icon { display: grid; width: 42px; height: 42px; margin-bottom: 1rem; place-items: center; color: var(--brand-primary); background: var(--brand-primary-soft); border-radius: .8rem; font-size: 1.1rem; }
.metric-card--accent .metric-card__icon { color: var(--brand-accent); background: var(--brand-accent-soft); }
.metric-card__label { display: block; color: var(--ink-600); font-size: .75rem; font-weight: 700; }
.metric-card__value { position: relative; z-index: 1; display: block; margin-top: .2rem; font-size: 1.85rem; font-weight: 800; letter-spacing: -.05em; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .85fr); gap: 1rem; }
.course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.course-card { position: relative; display: flex; min-height: 245px; flex-direction: column; padding: 1.2rem; overflow: hidden; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.course-card:hover { color: inherit; border-color: #9bc9c4; box-shadow: 0 18px 38px rgba(20, 57, 54, .12); transform: translateY(-3px); }
.course-card::before { position: absolute; top: 0; right: 0; width: 90px; height: 90px; content: ""; background: linear-gradient(135deg, transparent 50%, var(--brand-primary-soft) 50%); }
.course-card__top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.course-card__code { color: var(--brand-primary); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.course-card h2, .course-card h3 { margin: 1.15rem 0 .5rem; font-size: 1.1rem; line-height: 1.28; }
.course-card p { display: -webkit-box; margin: 0 0 1rem; overflow: hidden; color: var(--ink-600); font-size: .8rem; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.course-card__meta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: auto; color: var(--ink-600); font-size: .72rem; }
.course-card__meta span { display: inline-flex; align-items: center; gap: .3rem; }
.course-card__progress { margin-top: .9rem; }

.status-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .55rem; color: var(--ink-600); background: #edf0ef; border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .025em; white-space: nowrap; }
.status-badge::before { width: 6px; height: 6px; content: ""; background: currentColor; border-radius: 50%; }
.status-badge--active, .status-badge--open, .status-badge--approved, .status-badge--present, .status-badge--published, .status-badge--completed { color: #08724b; background: #e2f5eb; }
.status-badge--pending, .status-badge--scheduled, .status-badge--late { color: #a46408; background: #fff3d9; }
.status-badge--rejected, .status-badge--canceled, .status-badge--absent, .status-badge--inactive, .status-badge--closed { color: #a82f38; background: #fde9ea; }
.status-badge--draft, .status-badge--archived, .status-badge--excused { color: #606d70; background: #edf0ef; }

.avatar { display: inline-grid; flex: 0 0 auto; place-items: center; color: #fff; background: linear-gradient(135deg, var(--brand-primary), #3e9189); border-radius: 50%; font-weight: 800; letter-spacing: -.02em; }
.avatar--sm { width: 36px; height: 36px; font-size: .68rem; }
.avatar--md { width: 46px; height: 46px; font-size: .76rem; }
.avatar--lg { width: 82px; height: 82px; font-size: 1.2rem; }
.avatar-img { flex: 0 0 auto; object-fit: cover; border-radius: 50%; }
.avatar-img--sm { width: 40px; height: 40px; }
.avatar-img--md { width: 48px; height: 48px; }
.avatar-img--lg { width: 92px; height: 92px; }
.person-cell { display: flex; align-items: center; gap: .7rem; min-width: 190px; }
.person-cell__copy { min-width: 0; }
.person-cell__copy strong, .person-cell__copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-cell__copy strong { font-size: .82rem; }
.person-cell__copy small { margin-top: .15rem; color: var(--ink-600); font-size: .68rem; }

.attendance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.attendance-card { display: grid; gap: 1rem; padding: 1rem; background: #fff; border: 1px solid #e1e7e5; border-radius: 1rem; box-shadow: 0 8px 24px rgba(25, 48, 43, .05); }
.attendance-card__student { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.attendance-card__photo { width: 64px; height: 64px; flex: 0 0 64px; object-fit: cover; border-radius: .9rem; }
.attendance-card__student div { min-width: 0; }
.attendance-card__student strong, .attendance-card__student small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attendance-card__student small { margin-top: .2rem; color: var(--ink-600); font-size: .72rem; }
.attendance-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin: 0; padding: 0; border: 0; }
.attendance-option { cursor: pointer; }
.attendance-option input { position: absolute; opacity: 0; pointer-events: none; }
.attendance-option span { display: grid; min-height: 58px; place-items: center; align-content: center; gap: .15rem; padding: .45rem .2rem; color: var(--ink-600); background: #f6f8f7; border: 1px solid #dce3e1; border-radius: .7rem; font-size: .68rem; font-weight: 750; transition: .15s ease; }
.attendance-option span i { font-size: 1rem; }
.attendance-option input:focus-visible + span { outline: 3px solid rgba(15, 118, 110, .2); outline-offset: 2px; }
.attendance-option--present input:checked + span { color: #176b48; background: #e9f7ef; border-color: #82c7a4; }
.attendance-option--absent input:checked + span { color: #a33737; background: #fff0f0; border-color: #e6a3a3; }
.attendance-option--excused input:checked + span { color: #806010; background: #fff8dc; border-color: #dfca75; }
.attendance-card__notes > span { display: block; margin-bottom: .35rem; font-size: .72rem; font-weight: 750; }
.attendance-card__notes > span small { color: var(--ink-600); font-weight: 500; }
.attendance-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.attendance-result { min-width: 0; border-top: 4px solid #dce3e1; }
.attendance-result--present { border-top-color: #55aa7e; }
.attendance-result--absent { border-top-color: #d77777; }
.attendance-result--excused { border-top-color: #d2b84e; }
.attendance-result__list { display: grid; gap: .65rem; }
.attendance-result__list .attendance-card { gap: .65rem; padding: .8rem; box-shadow: none; }
.attendance-result__list .attendance-card__photo { width: 46px; height: 46px; flex-basis: 46px; border-radius: .7rem; }
.attendance-result__list .attendance-card__notes > span { display: none; }
.attendance-empty { padding: 1rem; color: var(--ink-600); background: #f7f9f8; border: 1px dashed #ccd6d3; border-radius: .75rem; text-align: center; font-size: .78rem; }
.attendance-empty[hidden] { display: none; }
.student-photo-preview { cursor: zoom-in; transition: transform .15s ease, box-shadow .15s ease; }
.student-photo-preview:hover { transform: scale(1.05); box-shadow: 0 0 0 3px rgba(15, 118, 110, .16); }
.student-photo-preview:focus-visible { outline: 3px solid rgba(15, 118, 110, .3); outline-offset: 3px; }
.photo-lightbox[hidden] { display: none; }
.photo-lightbox { position: fixed; z-index: 1080; inset: 0; display: grid; padding: 1.25rem; place-items: center; background: rgba(7, 20, 18, .82); backdrop-filter: blur(5px); }
.photo-lightbox__dialog { position: relative; display: grid; gap: .75rem; width: min(92vw, 620px); justify-items: center; }
.photo-lightbox__image { display: block; max-width: 100%; max-height: 78vh; object-fit: contain; background: #fff; border: 5px solid #fff; border-radius: 1rem; box-shadow: 0 24px 70px rgba(0, 0, 0, .38); }
.photo-lightbox__name { color: #fff; font-size: 1rem; text-align: center; }
.photo-lightbox__close { position: absolute; z-index: 1; top: .65rem; right: .65rem; display: grid; width: 42px; height: 42px; place-items: center; color: #18322e; background: rgba(255, 255, 255, .94); border: 0; border-radius: 50%; font-size: 1.1rem; }
.photo-lightbox-open { overflow: hidden; }

/* Lançamento de notas: mais espaço para digitação e leitura por linha. */
#notas th:nth-child(3), #notas td:nth-child(3) { width: 180px !important; min-width: 180px; }
#notas input[type="number"] { min-width: 115px; appearance: textfield; -moz-appearance: textfield; }
#notas input[type="number"]::-webkit-inner-spin-button,
#notas input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
#notas tbody tr:nth-child(odd) > td { background-color: #ffffff; }
#notas tbody tr:nth-child(even) > td { background-color: #f3f7f6; }
#notas tbody tr:hover > td { background-color: #eaf3f1; }

.report-course-grid { display: grid; gap: 1rem; }
.report-course-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.report-course-card__heading h2 { margin: .2rem 0 0; font-size: 1.08rem; }
.report-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.report-option { display: grid; grid-template-columns: auto 1fr; gap: .2rem .65rem; align-items: center; padding: .8rem; background: #f6f9f8; border: 1px solid #e0e8e5; border-radius: .85rem; }
.report-option__icon { display: grid; grid-row: span 2; width: 40px; height: 40px; place-items: center; color: var(--brand-primary); background: var(--brand-primary-soft); border-radius: .7rem; }
.report-option strong { font-size: .78rem; }
.report-option__actions { display: flex; flex-wrap: wrap; gap: .35rem; }

@media (max-width: 991.98px) { .report-options { grid-template-columns: 1fr; } }

@media (max-width: 991.98px) {
    .attendance-results { grid-template-columns: 1fr; }
}

.table { margin: 0; color: var(--ink-800); vertical-align: middle; }
.table > :not(caption) > * > * { padding: .78rem .85rem; border-bottom-color: #e8eceb; }
.table thead th { color: var(--ink-600); background: #f7f9f7; border-bottom-width: 1px; font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.table tbody td { font-size: .78rem; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover tbody tr:hover td { background: #f9fbfa; }
.table-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.empty-state { display: grid; min-height: 220px; padding: 2rem; place-items: center; text-align: center; }
.empty-state__icon { display: grid; width: 58px; height: 58px; margin: 0 auto .9rem; place-items: center; color: var(--brand-primary); background: var(--brand-primary-soft); border-radius: 1rem; font-size: 1.35rem; }
.empty-state h3 { margin-bottom: .35rem; font-size: 1rem; }
.empty-state p { max-width: 420px; margin: 0 auto 1rem; color: var(--ink-600); font-size: .8rem; }

.form-label { margin-bottom: .38rem; color: var(--ink-800); font-size: .74rem; font-weight: 750; }
.form-control, .form-select { min-height: 44px; color: var(--ink-950); background-color: #fbfcfb; border-color: #ccd5d2; border-radius: .7rem; font-size: .86rem; }
textarea.form-control { min-height: 108px; }
.form-control:focus, .form-select:focus { background: #fff; border-color: #65a89f; box-shadow: 0 0 0 .2rem rgba(15, 118, 110, .12); }
.form-check-input:checked { background-color: var(--brand-primary); border-color: var(--brand-primary); }
.form-text { color: var(--ink-600); font-size: .68rem; }
.input-icon { position: relative; }
.input-icon > i { position: absolute; top: 50%; left: .9rem; z-index: 2; color: var(--ink-400); transform: translateY(-50%); }
.input-icon .form-control { padding-left: 2.55rem; }
.password-toggle { position: absolute; top: 50%; right: .5rem; display: grid; width: 34px; height: 34px; padding: 0; place-items: center; color: var(--ink-600); background: transparent; border: 0; border-radius: .5rem; transform: translateY(-50%); }
.password-toggle:hover { background: #eef2f0; }
.form-section { padding-top: .25rem; }
.form-section + .form-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.form-section__title { margin-bottom: 1rem; }
.form-section__title h2, .form-section__title h3 { margin: 0; font-size: .98rem; }
.form-section__title p { margin: .25rem 0 0; color: var(--ink-600); font-size: .75rem; }
.upload-box { position: relative; display: grid; min-height: 120px; padding: 1.2rem; place-items: center; color: var(--ink-600); background: #f8faf8; border: 1px dashed #adbbb7; border-radius: .85rem; text-align: center; }
.upload-box input { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0; }
.upload-box i { color: var(--brand-primary); font-size: 1.4rem; }
.upload-box strong, .upload-box small { display: block; }
.upload-box strong { margin-top: .35rem; color: var(--ink-800); font-size: .78rem; }
.upload-box small { margin-top: .2rem; font-size: .67rem; }

.auth-layout { display: grid; min-height: calc(100vh - var(--topbar-height)); grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); margin-right: calc(var(--bs-gutter-x) * -.5); margin-left: calc(var(--bs-gutter-x) * -.5); }
.auth-story { position: relative; display: flex; min-height: 650px; flex-direction: column; justify-content: center; padding: clamp(3rem, 7vw, 7rem); overflow: hidden; color: #fff; background: linear-gradient(135deg, #123b3c 0%, #0f5d58 60%, #257d73 100%); }
.auth-story::before, .auth-story::after { position: absolute; content: ""; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.auth-story::before { top: -160px; right: -100px; width: 480px; height: 480px; }
.auth-story::after { right: 80px; bottom: -190px; width: 380px; height: 380px; }
.auth-story h1 { position: relative; z-index: 1; max-width: 620px; margin: 0; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.6rem, 5.7vw, 5.4rem); font-weight: 500; line-height: .98; letter-spacing: -.055em; }
.auth-story > p { position: relative; z-index: 1; max-width: 540px; margin: 1.5rem 0 0; color: rgba(255,255,255,.72); font-size: 1.04rem; line-height: 1.7; }
.auth-story__features { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .65rem 1.4rem; margin-top: 2.5rem; color: rgba(255,255,255,.84); font-size: .78rem; font-weight: 650; }
.auth-story__features span { display: flex; align-items: center; gap: .4rem; }
.auth-story__features i { color: #f1c96f; }
.auth-card-wrap { display: grid; padding: 2rem; place-items: center; background: var(--cream); }
.auth-card { width: min(100%, 430px); padding: clamp(1.6rem, 4vw, 2.5rem); background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.9); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.auth-card__icon { display: grid; width: 48px; height: 48px; margin-bottom: 1.2rem; place-items: center; color: var(--brand-primary); background: var(--brand-primary-soft); border-radius: .9rem; font-size: 1.2rem; }
.auth-card h2 { margin: 0; font-size: 1.65rem; }
.auth-card > p { margin-top: .55rem; font-size: .82rem; }
.verify-link { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: 1.4rem; font-size: .75rem; font-weight: 700; text-decoration: none; }

.hero-panel { position: relative; padding: clamp(1.4rem, 4vw, 2.4rem); overflow: hidden; color: #fff; background: linear-gradient(115deg, #143c3c, var(--brand-primary)); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.hero-panel::after { position: absolute; top: -110px; right: -70px; width: 340px; height: 340px; content: ""; border: 52px solid rgba(255,255,255,.07); border-radius: 50%; }
.hero-panel__content { position: relative; z-index: 1; max-width: 760px; }
.hero-panel h1 { margin: 0; color: #fff; font-size: clamp(1.7rem, 4vw, 3rem); }
.hero-panel p { max-width: 620px; margin: .7rem 0 0; color: rgba(255,255,255,.72); }
.hero-panel__meta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin-top: 1.4rem; color: rgba(255,255,255,.82); font-size: .78rem; }
.hero-panel__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.hero-panel__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }

.tabs-bar { position: sticky; top: calc(var(--topbar-height) + .65rem); z-index: 20; display: flex; gap: .25rem; margin: 1rem 0; padding: .35rem; overflow-x: auto; background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: .85rem; box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); }
.tabs-bar a { display: inline-flex; align-items: center; gap: .38rem; padding: .55rem .75rem; color: var(--ink-600); border-radius: .6rem; font-size: .73rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.tabs-bar a:hover { color: var(--brand-primary); background: var(--brand-primary-soft); }
.section-stack { display: grid; gap: 1rem; }

.course-workspace { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-top: 1rem; }
.course-sidebar { position: sticky; top: calc(var(--topbar-height) + 1rem); z-index: 20; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow-sm); }
.course-sidebar__heading { padding: 1rem; color: #fff; background: linear-gradient(135deg, #143c3c, var(--brand-primary)); }
.course-sidebar__heading span, .course-sidebar__heading strong, .course-sidebar__heading small { display: block; }
.course-sidebar__heading span { margin-bottom: .4rem; color: rgba(255,255,255,.65); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.course-sidebar__heading strong { color: #fff; font-size: .9rem; line-height: 1.3; }
.course-sidebar__heading small { margin-top: .35rem; color: #f1c96f; font-size: .68rem; font-weight: 750; }
.course-sidebar .course-sidebar__nav { position: static; display: grid; gap: .25rem; margin: 0; padding: .55rem; overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; }
.course-sidebar .course-sidebar__nav a { width: 100%; padding: .7rem .75rem; }
.course-sidebar .course-sidebar__nav a i { width: 1.15rem; font-size: .95rem; text-align: center; }
.course-sidebar .course-sidebar__nav a.active { color: #fff; background: var(--brand-primary); box-shadow: 0 5px 13px rgba(15, 118, 110, .2); }
.course-workspace__content { min-width: 0; }

@media (max-width: 991.98px) {
    .course-workspace { grid-template-columns: 1fr; gap: .85rem; }
    .course-sidebar { top: calc(var(--topbar-height) + .35rem); }
    .course-sidebar__heading { padding: .7rem .85rem; }
    .course-sidebar__heading span { display: none; }
    .course-sidebar__heading strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
    .course-sidebar__heading small { margin-top: .15rem; }
    .course-sidebar .course-sidebar__nav { display: flex; overflow-x: auto; }
    .course-sidebar .course-sidebar__nav a { width: auto; flex: 0 0 auto; }
}

.list-clean { margin: 0; padding: 0; list-style: none; }
.activity-list { display: grid; gap: .3rem; }
.activity-item { display: flex; align-items: center; gap: .8rem; padding: .75rem; border-radius: .75rem; }
.activity-item:hover { background: #f7f9f7; }
.activity-item__icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; color: var(--brand-primary); background: var(--brand-primary-soft); border-radius: .7rem; }
.activity-item__copy { min-width: 0; flex: 1; }
.activity-item__copy strong { display: block; overflow: hidden; font-size: .79rem; text-overflow: ellipsis; white-space: nowrap; }
.activity-item__copy small { display: block; margin-top: .2rem; color: var(--ink-600); font-size: .68rem; }
.activity-item__action { color: var(--ink-400); }

.progress { height: 7px; background: #e5ebe8; border-radius: 999px; }
.progress-bar { background: linear-gradient(90deg, var(--brand-primary), #45a89d); }
.score { font-size: 1.1rem; font-weight: 800; letter-spacing: -.04em; }
.score--good { color: var(--success); }
.score--bad { color: var(--danger); }
.summary-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: .9rem; }
.summary-strip__item { padding: 1rem; background: #fff; text-align: center; }
.summary-strip__item strong { display: block; font-size: 1.15rem; }
.summary-strip__item small { color: var(--ink-600); font-size: .68rem; }

.quiz-question { padding: 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.quiz-question__number { display: inline-flex; margin-bottom: .65rem; color: var(--brand-primary); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.quiz-question h2 { font-size: 1rem; line-height: 1.5; }
.option-list { display: grid; gap: .55rem; margin-top: 1rem; }
.option-choice { display: flex; align-items: flex-start; gap: .65rem; padding: .75rem; background: #fafbfa; border: 1px solid var(--line); border-radius: .7rem; cursor: pointer; transition: .15s ease; }
.option-choice:hover { border-color: #8ebfb9; background: var(--brand-primary-soft); }
.option-choice:has(input:checked) { border-color: var(--brand-primary); background: var(--brand-primary-soft); box-shadow: inset 3px 0 var(--brand-primary); }
.option-choice input { margin-top: .18rem; }
.quiz-timer { position: sticky; top: calc(var(--topbar-height) + 1rem); z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; color: #fff; background: var(--ink-950); border-radius: .8rem; box-shadow: var(--shadow-lg); }
.quiz-timer strong { font-variant-numeric: tabular-nums; }

.certificate-preview { position: relative; padding: 2rem; overflow: hidden; background: var(--cream); border: 8px solid var(--brand-primary); box-shadow: inset 0 0 0 2px #c9a950; text-align: center; }
.certificate-preview h3 { font-family: Georgia, serif; font-size: 1.8rem; }
.signature-preview { max-width: 220px; max-height: 90px; object-fit: contain; }
.verification-card { max-width: 720px; margin: 3rem auto; }
.verification-result { padding: 1.4rem; border-radius: var(--radius); }
.verification-result--valid { background: #e8f7ef; border: 1px solid #a9dfc2; }
.verification-result--invalid { background: #fff0f0; border: 1px solid #efbfc3; }

.copy-field { display: flex; gap: .4rem; }
.copy-field .form-control { min-width: 0; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-bottom: 1rem; padding: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.filter-bar > * { min-width: 160px; }
.filter-bar .filter-bar__grow { min-width: 220px; flex: 1; }
.pill-nav { display: flex; flex-wrap: wrap; gap: .4rem; }
.pill-nav a { padding: .42rem .7rem; color: var(--ink-600); background: #edf1ef; border-radius: 999px; font-size: .7rem; font-weight: 750; text-decoration: none; }
.pill-nav a.active, .pill-nav a:hover { color: #fff; background: var(--brand-primary); }

.state-page { max-width: 620px; margin: 5rem auto; text-align: center; }
.state-page__code { display: block; color: #d5ddda; font-size: clamp(4rem, 12vw, 8rem); font-weight: 900; line-height: 1; letter-spacing: -.08em; }
.state-page__icon { display: grid; width: 58px; height: 58px; margin: -1rem auto 1rem; place-items: center; color: var(--brand-primary); background: var(--brand-primary-soft); border-radius: 1rem; font-size: 1.35rem; }
.state-page p { color: var(--ink-600); }

@media (max-width: 1199.98px) {
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .course-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 991.98px) {
    :root { --topbar-height: 70px; }
    .topbar .navbar { min-height: var(--topbar-height); }
    .offcanvas { color: var(--ink-950); }
    .offcanvas .app-nav { margin: 1rem 0; }
    .offcanvas .app-nav .nav-link { color: var(--ink-600); padding: .75rem !important; }
    .offcanvas .app-nav .nav-link:hover, .offcanvas .app-nav .nav-link.active { color: var(--brand-primary); background: var(--brand-primary-soft); box-shadow: none; }
    .offcanvas .user-menu__trigger { width: 100%; color: var(--ink-950); background: #f4f6f4; border-color: var(--line); }
    .offcanvas .user-menu__copy { max-width: none; flex: 1; }
    .offcanvas .user-menu__copy small, .offcanvas .user-menu__trigger > i { color: var(--ink-600); }
    .auth-layout { grid-template-columns: 1fr; }
    .auth-story { min-height: 380px; padding: 3.5rem 2rem; }
    .auth-story h1 { max-width: 700px; font-size: clamp(2.5rem, 9vw, 4.5rem); }
}

@media (max-width: 767.98px) {
    .page-main { padding-top: 1.25rem; }
    .page-header { align-items: stretch; flex-direction: column; }
    .page-header__actions { justify-content: flex-start; }
    .metric-grid, .course-grid { grid-template-columns: 1fr; }
    .metric-card { min-height: 128px; }
    .app-footer .container-xxl { align-items: flex-start; flex-direction: column; }
    .content-card { padding: 1rem; }
    .content-card__body-flush { margin-right: -1rem; margin-bottom: -1rem; margin-left: -1rem; }
    .summary-strip { grid-template-columns: 1fr; }
    .auth-story { display: none; }
    .auth-card-wrap { min-height: calc(100vh - var(--topbar-height)); padding: 1rem; }
    .auth-card { padding: 1.4rem; }
    .public-actions .btn-ghost-light { display: none; }
    .brand-copy small { display: none; }
    .hero-panel { border-radius: var(--radius); }
    .tabs-bar { top: calc(var(--topbar-height) + .35rem); margin-right: -.4rem; margin-left: -.4rem; border-radius: .7rem; }
    .table-responsive { border-radius: 0 0 var(--radius) var(--radius); }
    .filter-bar { align-items: stretch; flex-direction: column; }
    .filter-bar > * { width: 100%; }
}

@media print {
    .topbar, .app-footer, .page-header__actions, .tabs-bar, .btn, .app-alert { display: none !important; }
    body { background: #fff; }
    .page-main { padding: 0; }
    .content-card { box-shadow: none; }
}