:root {
    --app-primary: #4f46e5;
    --app-primary-dark: #3730a3;
    --app-primary-soft: #eef2ff;
    --app-secondary: #0f766e;
    --app-ink: #172033;
    --app-muted: #667085;
    --app-border: #e4e8f0;
    --app-surface: #ffffff;
    --app-background: #f6f7fb;
    --app-success: #15803d;
    --app-warning: #b45309;
    --app-danger: #b42318;
    --app-radius-sm: 10px;
    --app-radius: 16px;
    --app-radius-lg: 24px;
    --app-shadow-sm: 0 6px 22px rgba(23, 32, 51, .06);
    --app-shadow: 0 18px 48px rgba(23, 32, 51, .10);
    --app-sidebar-width: 278px;
}

html { font-size: 15px; min-height: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; color: var(--app-ink); background: var(--app-background); font-family: "Segoe UI", Tahoma, Arial, sans-serif; line-height: 1.65; }
a { color: var(--app-primary); text-decoration: none; transition: color .18s ease, opacity .18s ease, transform .18s ease; }
a:hover { color: var(--app-primary-dark); }
button, input, select, textarea { font: inherit; }
img, svg { max-width: 100%; }
.app-container { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 2000; inset-block-start: 8px; inset-inline-start: 8px; padding: 10px 16px; border-radius: 10px; color: #fff; background: var(--app-primary); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--app-primary); font-size: .78rem; font-weight: 800; letter-spacing: .04em; }

/* Brand */
.app-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--app-ink); }
.app-brand:hover { color: var(--app-ink); }
.app-brand__mark { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: #fff; background: linear-gradient(145deg, var(--app-primary), #7c3aed); box-shadow: 0 10px 24px rgba(79, 70, 229, .25); }
.app-brand__mark svg { width: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.app-brand__copy { display: grid; line-height: 1.15; }
.app-brand__copy strong { font-size: 1.04rem; letter-spacing: .01em; }
.app-brand__copy small { margin-top: 4px; color: var(--app-muted); font-size: .68rem; }

/* Public header */
.public-shell { background: #fff; }
.public-main { min-height: 60vh; }
.public-header { position: sticky; z-index: 1000; inset-block-start: 0; border-bottom: 1px solid rgba(228, 232, 240, .85); background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); }
.public-header__inner { min-height: 76px; display: flex; align-items: center; gap: 30px; }
.public-nav { display: flex; align-items: center; gap: 26px; margin-inline: auto; }
.public-nav > a { color: #475467; font-weight: 650; font-size: .92rem; }
.public-nav > a:hover { color: var(--app-primary); }
.public-header__actions { display: flex; align-items: center; }
.public-nav-toggle { display: none; width: 42px; height: 42px; padding: 10px; border: 1px solid var(--app-border); border-radius: 12px; background: #fff; }
.public-nav-toggle span { display: block; height: 2px; margin: 4px 0; border-radius: 4px; background: var(--app-ink); }
.app-flash-zone { padding-top: 16px; }

/* Account navigation */
.account-nav { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.account-nav__link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 7px 13px; border-radius: 11px; color: #475467; font-weight: 650; font-size: .88rem; }
.account-nav__link:hover { color: var(--app-primary); background: var(--app-primary-soft); }
.account-nav__link--primary { color: #fff; background: var(--app-primary); box-shadow: 0 8px 20px rgba(79, 70, 229, .2); }
.account-nav__link--primary:hover { color: #fff; background: var(--app-primary-dark); }
.account-nav__form { margin: 0; }
.account-nav__button { border: 0; background: transparent; }
.account-nav__user { display: grid; line-height: 1.2; margin-inline-end: 4px; }
.account-nav__user strong { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.account-nav__user small { color: var(--app-muted); font-size: .7rem; }

/* Public home */
.hero { position: relative; overflow: hidden; padding: 86px 0 78px; background: radial-gradient(circle at 12% 18%, rgba(14, 165, 164, .12), transparent 30%), radial-gradient(circle at 88% 10%, rgba(124, 58, 237, .14), transparent 34%), linear-gradient(180deg, #fff 0%, #f7f8ff 100%); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); align-items: center; gap: 70px; }
.hero h1 { max-width: 720px; margin: 16px 0 20px; font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: 1.16; font-weight: 850; letter-spacing: -.035em; }
.hero h1 span { color: var(--app-primary); }
.hero__lead { max-width: 640px; margin-bottom: 30px; color: var(--app-muted); font-size: 1.08rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; color: #475467; font-size: .86rem; }
.hero__visual { position: relative; min-height: 420px; }
.hero-card { position: absolute; border: 1px solid rgba(255,255,255,.8); border-radius: var(--app-radius-lg); background: rgba(255,255,255,.92); box-shadow: var(--app-shadow); backdrop-filter: blur(12px); }
.hero-card--main { inset: 30px 24px 40px 42px; padding: 24px; }
.hero-card--float { z-index: 2; inset-inline-start: -15px; inset-block-end: 7px; width: 210px; padding: 16px; }
.hero-card__cover { height: 185px; display: grid; place-items: center; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #312e81, #4f46e5 50%, #14b8a6); }
.hero-card__cover span { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; color: var(--app-primary); background: #fff; font-size: 1.4rem; box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.hero-card__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; color: var(--app-muted); font-size: .78rem; }
.hero-card h2 { margin: 9px 0 14px; font-size: 1.15rem; }
.progress-track { height: 7px; overflow: hidden; border-radius: 10px; background: #e9ecf4; }
.progress-track span { display: block; width: 68%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--app-primary), #14b8a6); }
.hero-card--float strong, .hero-card--float span { display: block; }
.hero-card--float strong { font-size: 1.45rem; }
.hero-card--float span { color: var(--app-muted); font-size: .8rem; }
.public-section { padding: 78px 0; }
.public-section--soft { background: var(--app-background); }
.section-heading { max-width: 680px; margin-bottom: 34px; }
.section-heading--center { margin-inline: auto; text-align: center; }
.section-heading h2 { margin: 9px 0 10px; font-size: clamp(1.8rem, 3vw, 2.65rem); font-weight: 800; }
.section-heading p { margin: 0; color: var(--app-muted); }
.feature-grid, .category-grid, .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card, .category-card, .step-card { padding: 26px; border: 1px solid var(--app-border); border-radius: var(--app-radius); background: #fff; box-shadow: var(--app-shadow-sm); }
.feature-card__icon, .category-card__icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 15px; color: var(--app-primary); background: var(--app-primary-soft); font-size: 1.2rem; font-weight: 800; }
.feature-card h3, .category-card h3, .step-card h3 { font-size: 1.05rem; font-weight: 750; }
.feature-card p, .category-card p, .step-card p { margin-bottom: 0; color: var(--app-muted); font-size: .9rem; }
.category-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.category-card:hover { transform: translateY(-4px); border-color: #c7d2fe; box-shadow: var(--app-shadow); }
.step-card { position: relative; padding-top: 50px; }
.step-card__number { position: absolute; inset-block-start: -17px; inset-inline-start: 24px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: var(--app-primary); font-weight: 800; box-shadow: 0 10px 20px rgba(79,70,229,.22); }
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 38px 42px; border-radius: var(--app-radius-lg); color: #fff; background: linear-gradient(130deg, #172554, #4338ca 62%, #0f766e); box-shadow: var(--app-shadow); }
.cta-band h2 { margin: 0 0 8px; font-weight: 800; }
.cta-band p { margin: 0; color: rgba(255,255,255,.75); }

/* Footer */
.public-footer { padding: 55px 0 22px; color: #cbd5e1; background: #111827; }
.public-footer .app-brand { color: #fff; }
.public-footer .app-brand__copy small { color: #94a3b8; }
.public-footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 50px; }
.public-footer__grid h2 { color: #fff; font-size: .9rem; }
.public-footer__grid p { max-width: 390px; margin-top: 18px; color: #94a3b8; }
.public-footer__grid > div > a:not(.app-brand) { display: block; margin: 7px 0; color: #cbd5e1; }
.public-footer__bottom { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(148,163,184,.18); color: #94a3b8; font-size: .8rem; }

/* Authentication */
.auth-shell { background: #fff; }
.auth-shell__main { min-height: 100vh; display: grid; grid-template-columns: minmax(400px, .92fr) minmax(520px, 1.08fr); }
.auth-showcase { position: relative; min-height: 100vh; overflow: hidden; padding: 46px clamp(34px, 6vw, 84px); color: #fff; background: linear-gradient(145deg, #111c44, #3730a3 55%, #0f766e); }
.auth-showcase .app-brand { color: #fff; }
.auth-showcase .app-brand__copy small { color: rgba(255,255,255,.7); }
.auth-showcase__content { position: relative; z-index: 2; max-width: 580px; margin-top: clamp(90px, 16vh, 180px); }
.auth-showcase__content .eyebrow { color: #99f6e4; }
.auth-showcase h1 { margin: 18px 0; font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: 1.18; font-weight: 850; }
.auth-showcase p { max-width: 530px; color: rgba(255,255,255,.76); font-size: 1.02rem; }
.auth-benefits { display: grid; gap: 10px; margin-top: 30px; color: #e0e7ff; }
.auth-showcase__orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .25; }
.auth-showcase__orb--one { width: 320px; height: 320px; inset-inline-end: -130px; inset-block-start: -90px; background: #67e8f9; }
.auth-showcase__orb--two { width: 260px; height: 260px; inset-inline-start: -100px; inset-block-end: -80px; background: #c4b5fd; }
.auth-panel { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 34px clamp(28px, 7vw, 110px); }
.auth-panel__content { width: 100%; max-width: 540px; margin: auto; }
.auth-panel__mobile-brand { display: none; margin-bottom: 34px; }
.auth-panel__footer { display: flex; justify-content: center; gap: 10px; color: var(--app-muted); font-size: .8rem; }
.auth-card-header { margin-bottom: 30px; }
.auth-card-header h1 { margin: 0 0 7px; font-size: 2rem; font-weight: 800; }
.auth-card-header p { margin: 0; color: var(--app-muted); }
.auth-secondary-link { display:block;margin-top:18px;text-align:center;font-weight:700; }.auth-result { padding:18px 0;text-align:center; }.auth-result__icon { display:grid;width:72px;height:72px;margin:0 auto 22px;place-items:center;border-radius:22px;background:var(--app-primary-soft);color:var(--app-primary);font-size:2rem;font-weight:900; }.auth-result h1 { margin-bottom:10px;font-size:2rem;font-weight:850; }.auth-result p { margin:0 auto 26px;color:var(--app-muted);line-height:1.9; }

/* Portal */
.portal-shell { min-height: 100vh; background: var(--app-background); }
.portal-sidebar { position: fixed; z-index: 1100; inset-block: 0; inset-inline-start: 0; width: var(--app-sidebar-width); display: flex; flex-direction: column; padding: 22px 18px; border-inline-end: 1px solid #e9edf4; background: #fff; }
.portal-sidebar__header { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 22px; }
.portal-sidebar__close { display: none; width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--app-background); font-size: 1.4rem; }
.portal-nav { display: grid; gap: 5px; overflow-y: auto; padding: 4px; }
.portal-nav__label { margin: 18px 12px 7px; color: #98a2b3; font-size: .68rem; font-weight: 800; letter-spacing: .06em; }
.portal-nav a, .portal-nav__disabled { min-height: 46px; display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-radius: 12px; color: #475467; font-size: .9rem; font-weight: 650; }
.portal-nav a:hover { color: var(--app-primary); background: var(--app-primary-soft); }
.portal-nav a.is-active { color: var(--app-primary); background: var(--app-primary-soft); box-shadow: inset -3px 0 var(--app-primary); }
.portal-nav__disabled { color: #a4abba; cursor: not-allowed; }
.portal-nav__icon { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; background: rgba(148,163,184,.1); }
.portal-sidebar__footer { margin-top: auto; padding: 18px 12px 4px; border-top: 1px solid var(--app-border); font-size: .85rem; }
.portal-workspace { min-height: 100vh; margin-inline-start: var(--app-sidebar-width); }
.portal-topbar { position: sticky; z-index: 900; inset-block-start: 0; min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 28px; border-bottom: 1px solid rgba(228,232,240,.9); background: rgba(255,255,255,.9); backdrop-filter: blur(12px); }
.portal-topbar__start, .portal-topbar__actions { display: flex; align-items: center; gap: 18px; }
.portal-topbar__start > div { display: grid; line-height: 1.25; }
.portal-topbar__eyebrow { color: var(--app-muted); font-size: .68rem; }
.portal-menu-button { display: none; width: 42px; height: 42px; border: 1px solid var(--app-border); border-radius: 12px; background: #fff; }
.portal-topbar__home { color: var(--app-muted); font-size: .84rem; font-weight: 650; }
.notification-bell { position:relative;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--app-border);border-radius:13px;background:#fff;color:var(--app-primary);font-size:1.35rem;text-decoration:none; }
.notification-bell strong { position:absolute;inset-block-start:-7px;inset-inline-start:-7px;min-width:21px;height:21px;padding:0 5px;border-radius:20px;background:var(--app-danger);color:#fff;border:2px solid #fff;font-size:.66rem;line-height:17px;text-align:center; }
.notification-list { display:grid;gap:12px; }
.notification-item { position:relative;display:flex;gap:14px;padding:20px;border:1px solid var(--app-border);border-radius:16px;background:#fff;box-shadow:var(--app-shadow-sm); }
.notification-item.is-read { opacity:.72;box-shadow:none; }
.notification-item__marker { flex:0 0 10px;width:10px;height:10px;margin-top:8px;border-radius:50%;background:#94a3b8; }
.notification-item--success .notification-item__marker { background:#16a34a; }.notification-item--warning .notification-item__marker { background:#f59e0b; }.notification-item--danger .notification-item__marker { background:#dc2626; }.notification-item--info .notification-item__marker { background:#4f46e5; }
.notification-item__body { flex:1;min-width:0; }.notification-item__head { display:flex;justify-content:space-between;gap:16px;align-items:flex-start; }.notification-item__head h2 { margin:0;font-size:1rem; }.notification-item__head time { color:var(--app-muted);font-size:.75rem;white-space:nowrap; }.notification-item p { margin:.5rem 0 .8rem;color:var(--app-muted); }
.finance-balances { display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px; }.finance-balance>span { display:inline-flex;padding:5px 10px;border-radius:10px;background:var(--app-primary-soft);color:var(--app-primary);font-weight:800; }.finance-balance>div { display:flex;justify-content:space-between;align-items:end;gap:12px;padding-top:14px;border-bottom:1px dashed var(--app-border); }.finance-balance small { color:var(--app-muted); }.finance-balance strong { font-size:1.15rem; }.settlement-pay-form { display:grid;grid-template-columns:minmax(130px,1fr) auto;gap:8px;min-width:300px; }
.portal-content { width: min(1380px, calc(100% - 48px)); margin-inline: auto; padding: 30px 0 54px; }
.portal-overlay { display: none; position: fixed; z-index: 1050; inset: 0; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); }

/* Shared components and Bootstrap refinement */
.app-page-head,.app-page-header { display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:18px;margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--app-border); }
.app-page-head h1,.app-page-header h1 { margin:4px 0 5px;font-size:clamp(1.55rem,2.5vw,2.1rem);line-height:1.3;font-weight:820;letter-spacing:-.02em; }
.app-page-head p,.app-page-header p { max-width:760px;margin:0;color:var(--app-muted);font-size:.94rem; }
.app-eyebrow { color:var(--app-primary);font-size:.76rem;font-weight:800; }
.app-card { padding:24px;border:1px solid var(--app-border);border-radius:var(--app-radius);background:var(--app-surface);box-shadow:var(--app-shadow-sm); }
.app-card h2,.app-card h3 { line-height:1.45; }
.app-empty-state { display:grid;place-items:center;min-height:180px;padding:34px 24px;border:1px dashed #cbd5e1;border-radius:var(--app-radius);background:linear-gradient(145deg,#fff,#f8faff);text-align:center; }
.app-empty-state h3 { margin:0 0 7px;font-size:1.12rem;font-weight:800; }.app-empty-state p { max-width:540px;margin:0;color:var(--app-muted);font-size:.9rem; }
.app-status { display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border-radius:999px;background:var(--app-primary-soft);color:var(--app-primary-dark);font-size:.75rem;font-weight:750;white-space:nowrap; }
.app-status.status-success { color:#166534;background:#dcfce7; }.app-status.status-danger { color:#991b1b;background:#fee2e2; }
.admin-filter { display:flex;align-items:end;gap:10px; }.admin-filter>div { flex:1; }.admin-two-columns { display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:20px;align-items:start; }.form-card-narrow { max-width:920px;margin-inline:auto; }
.permission-checks { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }.permission-check { display:flex;align-items:flex-start;gap:11px;padding:13px;border:1px solid var(--app-border);border-radius:12px;background:#fafbff;cursor:pointer; }.permission-check:has(input:checked) { border-color:#a5b4fc;background:var(--app-primary-soft); }.permission-check input { margin-top:5px;accent-color:var(--app-primary); }.permission-check span,.permission-check strong,.permission-check small { display:block; }.permission-check small { color:var(--app-muted);font-size:.7rem;direction:ltr;text-align:start; }
.role-grid,.permission-modules { display:grid;gap:16px; }.role-grid { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }.role-card { display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start; }.role-card>a { grid-column:1/-1; }.role-card h2 { margin:0;font-size:1.08rem; }.role-card p { margin:5px 0 0;color:var(--app-muted);font-size:.84rem; }.role-card__icon { width:44px;height:44px;display:grid;place-items:center;border-radius:13px;color:var(--app-primary);background:var(--app-primary-soft);font-size:1.25rem; }.permission-module-head { display:flex;justify-content:space-between;gap:15px;margin-bottom:16px; }.permission-module-head h2 { margin:0;font-size:1.05rem; }.permission-module-head span { color:var(--app-muted);font-size:.78rem; }.sticky-save { position:sticky;inset-block-end:15px;display:flex;justify-content:flex-end;margin-top:20px;padding:14px;border:1px solid var(--app-border);border-radius:14px;background:rgba(255,255,255,.94);box-shadow:var(--app-shadow);backdrop-filter:blur(10px); }
.settings-list { display:grid;gap:0; }.setting-row { display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto;align-items:end;gap:16px;padding:16px 0;border-top:1px solid var(--app-border); }.setting-row:first-child { padding-top:0;border-top:0; }.setting-row small { margin-top:-3px;line-height:1.6; }
.app-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 24px; }
.dashboard-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }.dashboard-columns { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px; }.dashboard-list { display:grid; }.dashboard-list>a { display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 4px;border-top:1px solid var(--app-border);color:var(--app-ink);text-decoration:none; }.dashboard-list>a:first-child { border-top:0; }.dashboard-list>a:hover strong { color:var(--app-primary); }.dashboard-list strong,.dashboard-list small { display:block; }.dashboard-list small { margin-top:4px;color:var(--app-muted);font-size:.75rem; }.app-empty-state.compact { min-height:130px;padding:20px; }
.app-stat { position: relative; overflow: hidden; padding: 22px; border: 1px solid var(--app-border); border-radius: var(--app-radius); background: #fff; box-shadow: var(--app-shadow-sm); }
.app-stat::after { content: ""; position: absolute; width: 84px; height: 84px; inset-inline-end: -26px; inset-block-end: -34px; border-radius: 50%; background: var(--app-primary-soft); }
.app-stat__label { display: block; color: var(--app-muted); font-size: .78rem; font-weight: 650; }
.app-stat__value { display: block; margin-top: 8px; font-size: 1.75rem; font-weight: 850; }
.app-stat__hint { display: block; margin-top: 4px; color: #98a2b3; font-size: .72rem; }
.app-alert { position: relative; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding: 14px 48px 14px 16px; border: 1px solid; border-radius: 13px; font-size: .9rem; }
.app-alert__icon { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; font-weight: 850; }
.app-alert__close { position: absolute; inset-inline-end: 13px; inset-block-start: 11px; border: 0; color: inherit; background: transparent; font-size: 1.25rem; opacity: .65; }
.app-alert--success { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
.app-alert--success .app-alert__icon { color: #fff; background: #16a34a; }
.app-alert--danger { color: #991b1b; border-color: #fecaca; background: #fef2f2; }
.app-alert--danger .app-alert__icon { color: #fff; background: #dc2626; }
.app-alert--info { color: #1e40af; border-color: #bfdbfe; background: #eff6ff; }
.payment-instructions { padding: 18px; border: 1px dashed #a5b4fc; border-radius: 13px; color: #344054; background: #f8faff; white-space: pre-line; }
.enrollment-summary { display: grid; gap: 0; margin: 18px 0 24px; }
.enrollment-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--app-border); }
.enrollment-summary dt, .enrollment-summary dd { margin: 0; }
.enrollment-summary dt { color: var(--app-muted); font-weight: 650; }
.enrollment-summary dd { text-align: end; font-weight: 800; }
.student-course-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.student-course-card { overflow: hidden; border: 1px solid var(--app-border); border-radius: 18px; background: #fff; box-shadow: var(--app-shadow-sm); }
.student-course-card__cover { position: relative; display: grid; height: 180px; place-items: center; overflow: hidden; color: var(--app-primary); background: linear-gradient(135deg,#e0e7ff,#ccfbf1); font-size: 3.5rem; font-weight: 900; }
.student-course-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.student-course-card__status { position: absolute; inset-inline-start: 12px; inset-block-start: 12px; padding: 5px 10px; border-radius: 999px; color: #475467; background: rgba(255,255,255,.92); font-size: .75rem; }
.student-course-card__status.is-active { color: #166534; }
.student-course-card__body { padding: 18px; }
.student-course-card__body > small { color: var(--app-muted); }
.student-course-card__body h2 { min-height: 54px; margin: 5px 0 15px; font-size: 1.12rem; line-height: 1.55; }
.student-course-card__expiry { margin: 14px 0; color: var(--app-muted); font-size: .8rem; }
.learning-progress > div:first-child { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: .78rem; }
.learning-progress .progress { height: 7px; background: #eef1f6; }
.learning-progress .progress-bar { background: linear-gradient(90deg,var(--app-primary),var(--app-secondary)); }
.learning-progress > small { display: block; margin-top: 6px; color: var(--app-muted); font-size: .72rem; }
.learning-player { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 22px; align-items: start; }
.learning-player__sidebar { position: sticky; inset-block-start: 98px; overflow: hidden; max-height: calc(100vh - 125px); border: 1px solid var(--app-border); border-radius: 18px; background: #fff; }
.learning-player__course { padding: 20px; border-bottom: 1px solid var(--app-border); }
.learning-player__course > a { font-size: .78rem; }
.learning-player__course h1 { margin: 12px 0 4px; font-size: 1.05rem; line-height: 1.5; }
.learning-player__course > small { color: var(--app-muted); }
.learning-player__curriculum { max-height: 54vh; overflow-y: auto; }
.learning-player__curriculum details { border-bottom: 1px solid var(--app-border); }
.learning-player__curriculum summary { padding: 14px 18px; font-size: .85rem; font-weight: 800; cursor: pointer; background: #fafbfc; }
.lesson-nav-item { display: flex; gap: 10px; padding: 12px 16px; color: #475467; text-decoration: none; border-top: 1px solid #f1f3f6; }
.lesson-nav-item:hover,.lesson-nav-item.is-current { color: var(--app-primary); background: var(--app-primary-soft); }
.lesson-nav-item__state { width: 24px; flex: 0 0 auto; font-weight: 900; }
.lesson-nav-item strong,.lesson-nav-item small { display: block; }
.lesson-nav-item strong { font-size: .82rem; }
.lesson-nav-item small { margin-top: 3px; color: var(--app-muted); font-size: .69rem; }
.learning-player__main { min-width: 0; overflow: hidden; border: 1px solid var(--app-border); border-radius: 18px; background: #fff; box-shadow: var(--app-shadow-sm); }
.learning-player__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; border-bottom: 1px solid var(--app-border); }
.learning-player__header h2 { margin: 5px 0 0; font-size: 1.35rem; }
.learning-player__expiry { color: var(--app-muted); font-size: .75rem; }
.lesson-stage { min-height: 470px; padding: 26px; }
.lesson-video { position: relative; overflow: hidden; padding-top: 56.25%; border-radius: 14px; background: #0f172a; }
.lesson-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lesson-article { min-height: 360px; color: #344054; line-height: 2; white-space: pre-wrap; }
.lesson-callout { display: grid; min-height: 360px; place-content: center; justify-items: center; padding: 30px; border: 1px dashed #c7d2fe; border-radius: 16px; background: #f8faff; text-align: center; }
.lesson-support-file { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: #f8fafc; }
.learning-player__footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 18px 26px; border-top: 1px solid var(--app-border); }
.learning-player__footer > div:last-child { text-align: end; }
.card { border-radius: var(--app-radius); }
.card.border-0 { border: 1px solid var(--app-border) !important; }
.shadow-sm { box-shadow: var(--app-shadow-sm) !important; }
.table { --bs-table-bg: transparent; color: var(--app-ink); }
.table > thead > tr > th { padding: 14px 16px; border-bottom-color: var(--app-border); color: var(--app-muted); background: #fafbfc; font-size: .75rem; font-weight: 800; white-space: nowrap; }
.table > tbody > tr > td { padding: 16px; border-bottom-color: #eef1f5; vertical-align: middle; }
.table > tbody > tr:hover { background: #fafbff; }
.form-label { margin-bottom: 7px; color: #344054; font-size: .84rem; font-weight: 700; }
.form-control, .form-select { min-height: 46px; border-color: #d8dee9; border-radius: var(--app-radius-sm); color: var(--app-ink); background-color: #fff; }
textarea.form-control { min-height: auto; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #a5b4fc; box-shadow: 0 0 0 4px rgba(79,70,229,.10); }
.form-check-input:checked { border-color: var(--app-primary); background-color: var(--app-primary); }
.btn { min-height: 42px; padding: 8px 17px; border-radius: 10px; font-weight: 700; }
.btn-sm { min-height: 34px; padding: 5px 11px; border-radius: 9px; font-size: .78rem; }
.btn-primary { border-color: var(--app-primary); background: var(--app-primary); box-shadow: 0 7px 16px rgba(79,70,229,.16); }
.btn-primary:hover, .btn-primary:focus { border-color: var(--app-primary-dark); background: var(--app-primary-dark); }
.btn-outline-primary { color: var(--app-primary); border-color: #c7d2fe; }
.btn-outline-primary:hover { border-color: var(--app-primary); background: var(--app-primary); }
.badge { padding: .48em .75em; border-radius: 999px; font-weight: 750; }
.pagination { gap: 5px; }
.page-link { min-width: 38px; min-height: 38px; display: grid; place-items: center; border: 1px solid var(--app-border); border-radius: 10px !important; color: var(--app-muted); }
.active > .page-link { border-color: var(--app-primary); background: var(--app-primary); }
.text-muted { color: var(--app-muted) !important; }
.legal-page { max-width: 900px; padding: 58px 0 80px; }
.legal-card { padding: clamp(24px, 5vw, 52px); border: 1px solid var(--app-border); border-radius: var(--app-radius-lg); background: #fff; box-shadow: var(--app-shadow-sm); }
.legal-card h1 { margin-bottom: 8px; font-weight: 850; }
.legal-card h2 { margin-top: 30px; font-size: 1.12rem; font-weight: 800; }
.legal-card p, .legal-card li { color: #667085; }
.maintenance-page { display:grid;min-height:70vh;place-items:center;padding:50px 0; }.maintenance-card { width:min(620px,calc(100% - 30px));padding:clamp(30px,6vw,58px);border:1px solid var(--app-border);border-radius:24px;background:#fff;box-shadow:var(--app-shadow);text-align:center; }.maintenance-icon { display:grid;width:72px;height:72px;margin:0 auto 20px;place-items:center;border-radius:22px;background:var(--app-primary-soft);color:var(--app-primary);font-size:2rem; }.maintenance-card h1 { margin:8px 0 12px;font-size:clamp(1.8rem,4vw,2.7rem);font-weight:900; }.maintenance-card p { margin:0 auto 24px;color:var(--app-muted);line-height:1.9; }

@media (max-width: 1100px) {
    .public-nav { gap: 16px; }
    .hero__grid { grid-template-columns: 1fr 400px; gap: 36px; }
    .app-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .auth-shell__main { grid-template-columns: .85fr 1.15fr; }
    .student-course-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 900px) {
    .dashboard-stats,.dashboard-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .learning-player { grid-template-columns: 1fr; }
    .learning-player__sidebar { position: static; max-height: none; }
    .learning-player__curriculum { max-height: 380px; }
    .public-header__inner { min-height: 68px; }
    .public-nav-toggle { display: block; margin-inline-start: auto; }
    .public-nav { position: absolute; inset-inline: 16px; inset-block-start: 76px; display: none; padding: 14px; border: 1px solid var(--app-border); border-radius: 16px; background: #fff; box-shadow: var(--app-shadow); }
    .public-nav.is-open { display: grid; gap: 3px; }
    .public-nav > a { padding: 10px 12px; border-radius: 9px; }
    .public-nav > a:hover { background: var(--app-primary-soft); }
    .public-header__actions .account-nav__user { display: none; }
    .hero { padding-top: 58px; }
    .hero__grid { grid-template-columns: 1fr; }
    .hero__visual { width: min(520px, 100%); margin-inline: auto; }
    .feature-grid, .category-grid, .steps-grid { grid-template-columns: repeat(2, 1fr); }
    .auth-shell__main { grid-template-columns: 1fr; }
    .auth-showcase { display: none; }
    .auth-panel__mobile-brand { display: block; }
    .portal-sidebar { transform: translateX(105%); transition: transform .25s ease; box-shadow: var(--app-shadow); }
    .portal-sidebar.is-open { transform: translateX(0); }
    .portal-sidebar__close, .portal-menu-button { display: block; }
    .portal-workspace { margin-inline-start: 0; }
    .portal-overlay.is-open { display: block; }
}

@media (max-width: 640px) {
    html { font-size: 14px; }
    .app-container { width: min(100% - 22px, 1180px); }
    .public-header__actions .account-nav__link:not(.account-nav__link--primary) { display: none; }
    .app-brand__copy small { display: none; }
    .hero h1 { font-size: 2.35rem; }
    .hero__visual { min-height: 350px; }
    .hero-card--main { inset: 16px 4px 30px; }
    .hero-card--float { inset-inline-start: -2px; }
    .feature-grid, .category-grid, .steps-grid, .public-footer__grid, .app-stat-grid { grid-template-columns: 1fr; }
    .dashboard-stats,.dashboard-columns { grid-template-columns:1fr; }
    .cta-band { align-items: flex-start; flex-direction: column; padding: 28px 24px; }
    .auth-panel { padding: 24px 20px; }
    .portal-topbar { padding: 10px 14px; }
    .portal-topbar__home, .portal-topbar__actions .account-nav__user, .portal-topbar__actions .account-nav__link:not(.account-nav__link--primary) { display: none; }
    .portal-content { width: calc(100% - 24px); padding-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.content-item__handle {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font-size: 1.1rem;
    min-height: 58px;
    user-select: none;
}

.content-item .remove-item {
    align-self: stretch;
    font-size: 1.25rem;
    line-height: 1;
    min-width: 42px;
}

/* Validation summaries must not reserve an empty red area before validation. */
.validation-summary-valid { display: none !important; }
.validation-summary-errors {
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fff7f7;
    color: #991b1b;
    padding: 12px 16px;
}
.validation-summary-errors ul { margin: 0; padding-inline-start: 20px; }
.validation-summary-errors li + li { margin-top: 4px; }

.course-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.course-card { overflow: hidden; border: 1px solid var(--app-border); border-radius: 20px; background: #fff; box-shadow: var(--app-shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.course-card:hover { transform: translateY(-4px); box-shadow: var(--app-shadow); }
.course-card__cover { position: relative; display: grid; min-height: 210px; place-items: center; overflow: hidden; background: linear-gradient(135deg,#e0e7ff,#ccfbf1); text-decoration: none; }
.course-card__cover img { width: 100%; height: 210px; object-fit: cover; }
.course-card__placeholder { color: var(--app-primary); font-size: 4rem; font-weight: 900; }
.course-card__category { position: absolute; inset-inline-start: 14px; inset-block-start: 14px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.92); color: #344054; font-size: .78rem; font-weight: 800; }
.course-card__body { padding: 18px; }
.course-card__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--app-muted); font-size: .78rem; }
.course-card h3 { margin: 10px 0 8px; font-size: 1.12rem; line-height: 1.55; }
.course-card h3 a { color: var(--app-ink); text-decoration: none; }
.course-card p { display: -webkit-box; min-height: 48px; margin-bottom: 18px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--app-muted); }
.course-card__footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--app-border); }
.course-card__teacher { color: var(--app-muted); }
.course-card__footer strong { color: var(--app-primary); white-space: nowrap; }
.catalog-hero { padding: 64px 0 38px; background: linear-gradient(180deg,#eef2ff 0%,#fff 100%); text-align: center; }
.catalog-hero h1 { margin: 8px 0; font-size: clamp(2.1rem,5vw,3.5rem); font-weight: 900; }
.catalog-hero p { color: var(--app-muted); font-size: 1.08rem; }
.catalog-filter { display: grid; grid-template-columns: minmax(260px,1fr) 220px 190px auto; gap: 10px; max-width: 980px; margin: 28px auto 0; padding: 12px; border: 1px solid var(--app-border); border-radius: 18px; background: #fff; box-shadow: var(--app-shadow); }
.catalog-result-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.catalog-result-head h2 { margin: 0; font-size: 1.6rem; font-weight: 850; }
.catalog-result-head p { margin: 5px 0 0; color: var(--app-muted); }
.course-detail-hero { padding: 48px 0; background: linear-gradient(135deg,#111c38,#26345a); color: #fff; }
.course-detail-hero__grid { display: grid; grid-template-columns: minmax(0,1fr) 370px; align-items: center; gap: 54px; }
.course-detail-hero h1 { max-width: 760px; margin: 12px 0; font-size: clamp(2rem,4.5vw,3.4rem); font-weight: 900; }
.course-detail-hero p { max-width: 760px; color: #d0d5dd; font-size: 1.1rem; line-height: 1.9; }
.course-detail__crumb { display: flex; gap: 8px; margin-bottom: 22px; color: #b9c2d8; font-size: .9rem; }
.course-detail__crumb a { color: #fff; }
.course-detail__facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.course-detail__facts span { padding: 7px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.08); }
.course-detail__teacher-line { color: #d0d5dd; }
.course-detail__teacher-line strong { color: #fff; }
.course-purchase-card { overflow: hidden; border-radius: 22px; background: #fff; color: var(--app-ink); box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.course-purchase-card__cover { display: grid; min-height: 220px; place-items: center; background: linear-gradient(135deg,#e0e7ff,#ccfbf1); color: var(--app-primary); font-size: 5rem; font-weight: 900; }
.course-purchase-card__cover img { width: 100%; height: 220px; object-fit: cover; }
.course-purchase-card__body { padding: 22px; }
.course-price { display: block; margin-bottom: 16px; font-size: 1.6rem; }
.course-purchase-card small { display: block; margin-top: 10px; color: var(--app-muted); text-align: center; }
.course-detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; align-items: start; gap: 28px; }
.course-detail-block,.teacher-public-card { margin-bottom: 24px; padding: 26px; border: 1px solid var(--app-border); border-radius: 18px; background: #fff; box-shadow: var(--app-shadow-sm); }
.course-detail-block h2,.teacher-public-card h2 { margin-bottom: 18px; font-size: 1.35rem; font-weight: 850; }
.course-description { white-space: pre-line; color: #475467; line-height: 2; }
.outcomes-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.outcomes-grid > div { display: flex; gap: 10px; padding: 13px; border-radius: 12px; background: #f8fafc; }
.outcomes-grid span { color: #16a34a; font-weight: 900; }.outcomes-grid p { margin: 0; }
.curriculum-public details { overflow: hidden; margin-bottom: 10px; border: 1px solid var(--app-border); border-radius: 12px; }
.curriculum-public summary { display: flex; justify-content: space-between; gap: 15px; padding: 16px; cursor: pointer; background: #f8fafc; }
.curriculum-public summary small { display: block; margin-top: 4px; color: var(--app-muted); font-weight: 400; }
.public-lesson { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--app-border); }
.public-lesson small { display: block; color: var(--app-muted); }.public-lesson a { font-weight: 750; }
.teacher-public-card__avatar { display: grid; width: 60px; height: 60px; margin-bottom: 14px; place-items: center; border-radius: 18px; background: var(--app-primary-soft); color: var(--app-primary); font-size: 1.5rem; font-weight: 900; }
.teacher-public-card p { margin-top: 18px; color: var(--app-muted); line-height: 1.8; }.teacher-public-card__facts { margin: 14px 0; font-weight: 750; }

@media (max-width: 980px) { .course-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.catalog-filter { grid-template-columns: 1fr 1fr; }.catalog-filter__search { grid-column: 1/-1; }.course-detail-hero__grid,.course-detail-layout { grid-template-columns: 1fr; }.course-purchase-card { max-width: 520px; }.teacher-public-card { position: static; } }
@media (max-width: 640px) { .course-grid,.outcomes-grid,.catalog-filter { grid-template-columns: 1fr; }.catalog-filter__search { grid-column: auto; }.course-detail-hero { padding-top: 30px; }.course-detail-block { padding: 20px; }.public-lesson { grid-template-columns: auto 1fr; }.public-lesson a { grid-column: 2; } }
@media (max-width: 760px) { .admin-two-columns,.permission-checks,.setting-row { grid-template-columns:1fr; }.admin-filter { align-items:stretch;flex-direction:column; }.settlement-pay-form { min-width:230px;grid-template-columns:1fr; }.app-card { padding:18px; }.app-page-header { align-items:flex-start; }.notification-item__head { flex-direction:column;gap:4px; } }