/* Generated theme. */ @layer priority { /* One shared palette. Existing brand and religious imagery are preserved. */ :root{--bg:#f5f6f2;--surface:#fff;--surface-soft:#eef3ee;--ink:#20372d;--muted:#596b61;--line:#dce4dc;--brand:#215742;--brand-strong:#163e2e;--gold:#a4762a;--blue:#215742;--danger:#a13232;--cream:#faf8f2;--shadow:0 8px 30px #1833260d;--ui-muted:#596b61;--ui-line:#dce4dc} *{box-sizing:border-box}html{scroll-padding-top:20px}body{color:var(--ink);background:var(--bg)} body:has(.app-shell),body:has(.app-shell) .app-shell,body:has(.app-shell) .main{background:var(--bg)!important;color:var(--ink)!important} body:has(.app-shell) .main{min-width:0;padding:32px clamp(18px,3.5vw,56px)!important} body:has(.app-shell) .sidebar{background:#fcfdf9!important;border-right:1px solid var(--line)!important;box-shadow:none!important;padding:24px 16px!important;width:250px} body:has(.app-shell) .brand{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--brand-strong)!important;padding:0 6px 24px!important} body:has(.app-shell) .brand small{color:var(--muted)!important;font-size:11px!important;line-height:1.5} body:has(.app-shell) .brand-logo{background:white;border:1px solid var(--line);border-radius:50%;width:46px!important;height:46px!important;padding:5px} body:has(.app-shell) .nav-list{gap:4px!important}body:has(.app-shell) .nav-group{display:grid;gap:3px;margin:0 0 12px} body:has(.app-shell) .nav-group>p{color:var(--muted)!important;text-transform:uppercase;letter-spacing:.13em;font-size:10px;margin:10px 12px 6px;font-weight:700} body:has(.app-shell) .nav-item{display:flex;align-items:center;gap:12px;min-height:44px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:#4e6256!important;box-shadow:none!important;padding:10px 13px!important;font-size:13px!important;font-weight:600!important;text-align:left} body:has(.app-shell) .nav-item::before{content:attr(data-nav-icon);color:inherit!important;font-size:17px;width:21px;text-align:center} body:has(.app-shell) .nav-item:hover{background:#eef3ec!important}body:has(.app-shell) .nav-item.active{background:var(--brand)!important;color:#fff!important} body:has(.app-shell) .topbar{background:transparent!important;border:0!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important;border-radius:0!important;padding:0 0 23px!important;margin-bottom:26px!important} body:has(.app-shell) .topbar h1{font-family:Montserrat,Arial,sans-serif!important;font-size:clamp(23px,2.4vw,34px)!important;font-weight:700!important;text-transform:none!important;letter-spacing:-.045em!important;color:var(--brand-strong)!important;margin:4px 0 0} body:has(.app-shell) .eyebrow{color:var(--muted)!important;font-size:10px!important;font-weight:700;letter-spacing:.13em!important} body:has(.app-shell) .platform-tutor-byline{color:var(--muted)!important;font-size:11px!important;margin-top:10px}body:has(.app-shell) .platform-tutor-byline img{width:22px!important;height:22px!important;object-fit:cover;border-radius:50%} body:has(.app-shell) h2{color:var(--brand-strong)!important;text-transform:none!important;letter-spacing:-.025em!important;font-family:Montserrat,Arial,sans-serif!important;font-weight:700!important} body:has(.app-shell) :is(.content-panel,.student-area-block,.metric,.course-card,.material-card){background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:var(--shadow)!important} body:has(.app-shell) :is(.primary-button,.secondary-button,.ghost-button){min-height:44px!important;border-radius:10px!important;font-size:12px!important;line-height:1.45;box-shadow:none!important;padding:11px 17px!important;letter-spacing:0!important} body:has(.app-shell) .primary-button{background:var(--brand)!important;color:white!important;border:1px solid var(--brand)!important}body:has(.app-shell) .primary-button:hover{background:var(--brand-strong)!important} body:has(.app-shell) :is(.secondary-button,.ghost-button){color:var(--brand)!important;border:1px solid var(--line)!important;background:var(--surface)!important}button:disabled{opacity:.55;cursor:not-allowed!important} body:has(.app-shell) :is(input,select,textarea){border:1px solid #b7c6ba!important;border-radius:9px!important;background:white!important;color:var(--ink)!important;min-height:44px;font-size:14px!important;max-width:100%} body:has(.app-shell) input[type=checkbox]{min-height:20px;min-width:20px;accent-color:var(--brand)}body:has(.app-shell) label{color:var(--ink);font-size:13px;line-height:1.55} body:has(.app-shell) .auth-tabs{background:#eef3ee!important;border:1px solid var(--line)!important;padding:4px;border-radius:11px}body:has(.app-shell) .auth-tab{min-height:44px;border-radius:8px}body:has(.app-shell) .auth-tab.active{background:var(--brand)!important;color:white!important} .auth-intro{font-size:13px;color:var(--muted);line-height:1.7}body:has(.app-shell) .sidebar-auth{padding:0 5px!important;background:transparent!important;border:0!important;box-shadow:none!important}body:has(.app-shell) .sidebar-auth h2{font-size:22px!important} body:has(.app-shell) .user-badge{background:#e6eee6!important;color:var(--brand-strong)!important;padding:9px 14px;border:0!important;border-radius:30px} body:has(.app-shell) .student-dashboard-layout{gap:24px!important}body:has(.app-shell) .student-dashboard-main{display:flex!important;flex-direction:column;gap:24px!important}body:has(.app-shell) .student-dashboard-next{order:-3;margin:0!important} body:has(.app-shell) .student-dashboard-hero{background:#eaf0e5!important;color:var(--brand-strong)!important;border:1px solid #d9e4d2!important;border-radius:16px!important;padding:24px!important;box-shadow:none!important}body:has(.app-shell) .student-dashboard-hero h2{font-size:22px!important}body:has(.app-shell) .student-dashboard-hero p{color:#425d49!important;font-size:13px!important;line-height:1.75}body:has(.app-shell) .student-dashboard-hero-signature{color:var(--brand)!important} body:has(.app-shell) .student-dashboard-metrics{gap:12px!important}body:has(.app-shell) .student-dashboard-metric{padding:18px!important;min-height:96px!important}body:has(.app-shell) .student-dashboard-metric strong{color:var(--brand-strong)!important;font-size:25px!important}body:has(.app-shell) .student-dashboard-metric-icon{background:#f1f5ed!important;color:var(--brand)!important;border-radius:12px!important} body:has(.app-shell) .student-dashboard-section{margin-top:0!important}body:has(.app-shell) .student-dashboard-section h2{font-size:20px!important}body:has(.app-shell) .student-dashboard-section-heading{margin-bottom:15px!important} body:has(.app-shell) .course-card{overflow:hidden;padding:0!important}body:has(.app-shell) .course-card img{aspect-ratio:16/10;object-fit:cover}body:has(.app-shell) .course-card-body{padding:20px!important} body:has(.app-shell) .progress-track{background:#e3ebe0!important;height:6px!important;border-radius:20px;overflow:hidden}body:has(.app-shell) .progress-bar{background:var(--brand)!important} body:has(.app-shell) .classroom-layout{gap:24px!important}body:has(.app-shell) .classroom-course-head{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:none!important}body:has(.app-shell) .video-frame{border-radius:14px!important;overflow:hidden;background:#16281f!important;aspect-ratio:16/9} body:has(.app-shell) .lesson-button{border-radius:9px!important;min-height:48px}body:has(.app-shell) .lesson-button.active{background:#edf3e9!important;border-color:var(--brand)!important;color:var(--brand-strong)!important}body:has(.app-shell) :is(.module-title,.module-toggle){min-height:44px} body:has(.app-shell) .admin-tab{min-height:44px!important;border-radius:9px!important}body:has(.app-shell) .admin-tab.active{background:var(--brand)!important;color:#fff!important}body:has(.app-shell) .admin-item{border:1px solid var(--line)!important;border-radius:12px!important;background:var(--surface)!important;box-shadow:none!important;padding:18px!important} .privacy-note,.sync-status{background:#fff6df;color:#674e20;border:1px solid #e5d3a7;border-radius:12px;padding:15px 18px;line-height:1.6;font-size:13px}.sync-status{display:flex;gap:15px;align-items:center;justify-content:space-between;margin-bottom:20px}.pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 0;flex-wrap:wrap;font-size:13px} .cookie-consent{position:fixed;z-index:10000;bottom:18px;left:18px;right:18px;margin:auto;max-width:900px;display:flex;align-items:center;gap:24px;justify-content:space-between;background:#fff!important;color:#20372d!important;border:1px solid #becdbf!important;border-radius:16px!important;box-shadow:0 12px 45px #132d2026;padding:22px!important}.cookie-consent p{font-size:13px;line-height:1.6;margin:7px 0 0}.cookie-consent-actions{display:flex;gap:10px;flex-shrink:0}.cookie-consent button{min-height:44px;padding:10px 16px;border:1px solid #b6c5b8;border-radius:9px;cursor:pointer;font-weight:600}.cookie-consent .primary-button{background:#215742;color:white}.hidden{display:none!important} .skip-link{position:fixed;z-index:20000;top:8px;left:12px;padding:12px 20px;background:#183c2e;color:white;border-radius:8px;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}:focus-visible{outline:3px solid #9d6a16!important;outline-offset:3px!important}[tabindex='-1']:focus:not(:focus-visible){outline:none!important} .seo-sidebar button.link-button{background:none;color:inherit;border:0;padding:12px;text-align:left;text-decoration:underline;cursor:pointer} body.dark{--bg:#14231b;--surface:#1d3025;--surface-soft:#233b2b;--ink:#e9f0e6;--muted:#bfccbc;--line:#435a47;--brand:#a7d9b3;--brand-strong:#e1efda}body.dark:has(.app-shell) .sidebar{background:#192a20!important}body.dark:has(.app-shell) .nav-item{color:#c9d8c4!important}body.dark:has(.app-shell) .nav-item.active{background:#304e38!important}body.dark:has(.app-shell) .primary-button{background:#a7d9b3!important;color:#14231b!important}body.dark:has(.app-shell) :is(input,select,textarea){background:#21382a!important;color:#edf3e9!important} @media(max-width:1100px){body:has(.app-shell) .student-dashboard-layout{grid-template-columns:minmax(0,1fr)!important}body:has(.app-shell) .student-dashboard-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}} @media(max-width:760px){body:has(.app-shell) .main{padding:18px 16px 28px!important}body:has(.app-shell) .sidebar{width:min(88vw,300px)}body:has(.app-shell) .topbar{padding-top:44px!important;gap:14px!important;align-items:flex-start!important}body:has(.app-shell) .topbar h1{font-size:26px!important}body:has(.app-shell) .student-dashboard-utility{gap:12px!important;flex-wrap:wrap}body:has(.app-shell) .student-dashboard-profile-shortcut{display:none!important}body:has(.app-shell) .student-dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}body:has(.app-shell) .student-dashboard-side{grid-template-columns:minmax(0,1fr)}body:has(.app-shell) .student-dashboard-hero-signature{display:none!important}body:has(.app-shell) .course-grid{grid-template-columns:minmax(0,1fr)!important}body:has(.app-shell) .classroom-layout{grid-template-columns:minmax(0,1fr)!important}body:has(.app-shell) :is(.classroom-main,.classroom-sidebar){width:100%!important;min-width:0}body:has(.app-shell) .admin-grid{grid-template-columns:minmax(0,1fr)!important}body:has(.app-shell) .admin-tabs{flex-wrap:nowrap!important;overflow-x:auto;padding-bottom:10px}.cookie-consent{flex-direction:column;align-items:stretch;gap:15px;bottom:10px;left:10px;right:10px;padding:18px!important}.cookie-consent-actions{flex-wrap:wrap}.cookie-consent-actions button{flex:1}.sync-status{align-items:flex-start;flex-direction:column}.lesson-nav{flex-wrap:wrap}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}} body:has(.app-shell){--student-navy:#183c2e;--student-blue:#215742;--student-sky:#b6cda1;--student-ink:#20372d;--student-muted:#596b61;--student-line:#dce4dc;--student-surface:#fff} body:has(.app-shell) .brand-logo{display:block!important} body:has(.app-shell) .brand::before,body:has(.app-shell) .brand strong::before,body:has(.app-shell) .brand strong::after,body:has(.app-shell) .brand small::before{content:none!important} body:has(.app-shell) .brand strong{font-size:18px!important;line-height:1.4!important;display:block!important;letter-spacing:.02em!important} body:has(.app-shell) .brand small{display:block!important} body:has(.app-shell) .course-body{padding:18px!important} body:has(.app-shell) .card-title-copy>strong{display:block!important;font-family:Montserrat,Arial,sans-serif!important;font-size:16px!important;line-height:1.5!important;color:var(--ink)!important;overflow-wrap:normal;word-break:normal} body:has(.app-shell) .course-card.compact-access-card .card-title-copy{display:block!important;margin-bottom:12px!important} body:has(.app-shell) #lastCourseBox .next-lesson-card{background:#183c2e!important;border:0!important;min-height:230px!important;border-radius:16px!important;box-shadow:var(--shadow)!important} body:has(.app-shell) #lastCourseBox .continue-study-overlay{background:linear-gradient(105deg,#173b2df5,#254c36e8)!important} body:has(.app-shell) #lastCourseBox .continue-study-content{padding:28px!important;max-width:100%!important} body:has(.app-shell) #lastCourseBox .continue-study-content>strong{font-family:Montserrat,Arial,sans-serif!important;font-size:25px!important;line-height:1.35!important} body:has(.app-shell) #lastCourseBox .continue-study-eyebrow{color:#d4dfbb!important} body:has(.app-shell) #lastCourseBox .continue-study-progress .progress-bar{background:#c2d8a4!important} body:has(.app-shell) #lastCourseBox .continue-study-actions .primary-button{background:#fff!important;color:#173b2d!important} body:has(.app-shell) .student-dashboard-metrics{grid-template-columns:repeat(4,minmax(0,1fr))!important} body:has(.app-shell) .student-dashboard-metric{min-width:0;gap:10px!important} body:has(.app-shell) .student-dashboard-metric span{white-space:normal!important} @media(max-width:1050px){body:has(.app-shell) .student-dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:760px){body:has(.app-shell) #lastCourseBox .continue-study-content{padding:22px!important}body:has(.app-shell) #lastCourseBox .continue-study-content>strong{font-size:22px!important}body:has(.app-shell) .sidebar .brand{padding-top:20px!important}body:has(.app-shell) .student-dashboard-utility{padding-top:46px!important}} body:has(.app-shell) .brand{grid-template-columns:46px minmax(0,1fr)!important;align-items:center!important;gap:12px!important;text-align:left!important;min-height:88px!important} body:has(.app-shell) .brand strong{color:var(--brand-strong)!important} body:has(.app-shell) .brand-logo{position:static!important;transform:none!important;filter:none!important;margin:0!important;object-fit:contain!important} body:has(.app-shell) #dashboardLibraryWidget .course-grid{grid-template-columns:minmax(0,1fr)!important} body:has(.app-shell) #dashboardLibraryWidget .course-card{width:100%!important;max-width:none!important} body:has(.app-shell) #dashboardLibraryWidget .course-cover{height:150px!important;min-height:150px!important;max-width:none!important;width:100%!important} body:has(.app-shell) #dashboardLibraryWidget .course-cover strong{font-size:19px!important;line-height:1.4!important;word-break:normal!important;overflow-wrap:normal!important} body:has(.app-shell) #dashboardLibraryWidget .course-body{padding:15px!important} @media(max-width:1280px){body:has(.app-shell) .student-dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}} body:has(.app-shell){--dashboard-blue:#215742;--dashboard-navy:#183c2e;--dashboard-ink:#20372d;--dashboard-muted:#596b61} body:has(.app-shell) .student-dashboard-text-link{min-height:44px!important} body:has(.app-shell) .student-dashboard-search{width:100%!important;max-width:none!important;min-width:0!important;display:flex!important;align-items:center!important;gap:8px!important;grid-template-columns:none!important} body:has(.app-shell) .student-dashboard-search>span{flex:0 0 16px!important} body:has(.app-shell) .student-dashboard-search input{width:100%!important;min-width:0!important} body:has(.app-shell) .sidebar-close{min-height:44px!important;min-width:44px!important} @media(max-width:760px){body:has(.app-shell) .student-dashboard-utility{display:block!important}body:has(.app-shell) .student-dashboard-search{margin:0!important}} /* Administrative overview and student-preview controls follow the same visual system. */ body:has(.app-shell) .admin-student-preview-access{display:grid;gap:6px;margin:14px 0;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)} body:has(.app-shell) .admin-student-preview-link{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px!important;width:100%;padding:9px 12px!important;border:1px solid var(--line)!important;border-radius:9px!important;background:var(--surface-soft)!important;color:var(--brand-strong)!important;font-size:12px!important;font-weight:700!important;cursor:pointer} body:has(.app-shell) .admin-student-preview-access>span{color:var(--muted);font-size:11px;line-height:1.45} body:has(.app-shell) .admin-operation-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0 0 18px} body:has(.app-shell) .admin-operation-strip>span{display:grid;gap:4px;min-width:0;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)} body:has(.app-shell) .admin-operation-strip small{color:var(--muted);font-size:11px;line-height:1.4} body:has(.app-shell) .admin-operation-strip strong{color:var(--brand-strong);font-size:20px;line-height:1.2} body:has(.app-shell) .admin-quick-panel{margin-top:0} body:has(.app-shell) .admin-quick-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px} body:has(.app-shell) .admin-quick-heading h2{margin:4px 0 0} body:has(.app-shell) .admin-quick-heading>p{margin:0;color:var(--muted);font-size:13px;line-height:1.5} body:has(.app-shell) .admin-quick-actions{display:flex;flex-wrap:wrap;gap:10px} body:has(.app-shell) .admin-quick-actions button{min-height:44px!important} @media(max-width:760px){body:has(.app-shell) .admin-operation-strip{grid-template-columns:repeat(2,minmax(0,1fr))}body:has(.app-shell) .admin-quick-heading{align-items:flex-start;flex-direction:column;gap:6px}} /* 2026 student and administrator portal refresh. Keep behavior in existing views. */ :root { --teal: #0d7d86; --teal-strong: #08616c; --teal-soft: #e3f3f1; --sage: #edf3ec; --warm-surface: #fffefa; --focus-ring: #188793; } body:has(.app-shell) { font-family: Montserrat, "Segoe UI", Arial, sans-serif; background: #f3f6f4; color: var(--ink); } body:has(.app-shell) .main { padding: 26px clamp(20px, 3.4vw, 52px) 48px !important; } body:has(.app-shell) :is(button, a, input, select, textarea, summary, [tabindex="0"]):focus-visible { outline: 3px solid color-mix(in srgb, var(--focus-ring) 42%, transparent) !important; outline-offset: 2px !important; } body:has(.app-shell) :is(.primary-button, .secondary-button, .ghost-button, .link-button) { transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; } /* Access drawer: a dedicated sign-in surface over public information only. */ body.public-layout.auth-panel-open::before { background: rgba(20, 39, 33, .34) !important; backdrop-filter: blur(3px); } body.public-layout.auth-panel-open .sidebar { inset: 0 auto 0 0 !important; width: min(94vw, 462px) !important; max-width: 462px !important; padding: clamp(24px, 4vw, 42px) !important; gap: 24px !important; background: var(--warm-surface) !important; border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 24px 24px 0 !important; box-shadow: 18px 0 60px rgba(25, 52, 42, .16) !important; } body.public-layout.auth-panel-open .sidebar .brand { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) !important; align-items: center !important; justify-content: start !important; gap: 12px !important; padding: 10px 42px 18px 0 !important; border-bottom: 1px solid var(--line) !important; text-align: left !important; } body.public-layout.auth-panel-open .sidebar .brand strong { font-size: 19px !important; letter-spacing: -.03em; } body.public-layout.auth-panel-open .sidebar .brand small { display: block !important; margin-top: 3px; color: var(--muted) !important; } body.public-layout.auth-panel-open .sidebar .brand-logo { width: 46px !important; height: 46px !important; } body.public-layout.auth-panel-open .sidebar-close { right: 22px !important; top: 24px !important; width: 42px !important; height: 42px !important; background: var(--sage) !important; } body.public-layout.auth-panel-open .sidebar-auth { padding: 0 !important; } body.public-layout.auth-panel-open .auth-tabs { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; margin: 0 0 26px; } body.public-layout.auth-panel-open .auth-tab { min-width: 0 !important; } body.public-layout.auth-panel-open .sidebar-auth-panel h2 { margin: 7px 0 10px; font-size: clamp(25px, 3vw, 32px) !important; line-height: 1.18; } body.public-layout.auth-panel-open .sidebar-auth-panel .auth-intro { max-width: 34ch; margin: 0 0 22px; font-size: 14px; } body.public-layout.auth-panel-open #loginForm, body.public-layout.auth-panel-open #registerForm { display: grid; gap: 16px; } body.public-layout.auth-panel-open #loginForm label, body.public-layout.auth-panel-open #registerForm > label:not(.checkbox-label) { display: grid; gap: 7px; font-weight: 600; } body.public-layout.auth-panel-open #loginForm input, body.public-layout.auth-panel-open #registerForm > label:not(.checkbox-label) input { width: 100%; min-height: 50px !important; padding: 12px 15px !important; background: #fff !important; border-color: #d7e1dd !important; border-radius: 11px !important; } body.public-layout.auth-panel-open #loginForm .primary-button, body.public-layout.auth-panel-open #registerSubmitButton { min-height: 50px !important; width: 100%; background: var(--teal) !important; border-color: var(--teal) !important; font-size: 14px !important; } body.public-layout.auth-panel-open #loginForm .primary-button:hover, body.public-layout.auth-panel-open #registerSubmitButton:hover { background: var(--teal-strong) !important; } body.public-layout.auth-panel-open #loginForm [data-action="recover-password"] { justify-self: end; min-height: 40px; padding: 5px 0 !important; border: 0 !important; background: transparent !important; color: var(--teal-strong) !important; } body.public-layout.auth-panel-open .auth-help { color: var(--muted); line-height: 1.55; } /* Student home: greeting, branded learning banner, real course progress and existing widgets. */ body:has(.app-shell) .student-dashboard-utility { margin-bottom: 18px !important; } body:has(.app-shell) .student-dashboard-search input { min-height: 46px !important; border-radius: 999px !important; background: #fff !important; } body:has(.app-shell) .student-dashboard-welcome { margin: 0 0 18px; } body:has(.app-shell) .student-dashboard-welcome h2 { margin: 3px 0 5px; font-size: clamp(25px, 2.4vw, 34px) !important; letter-spacing: -.045em !important; } body:has(.app-shell) .student-dashboard-welcome > div > p:last-child { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; } body:has(.app-shell) .student-dashboard-main { gap: 18px !important; } body:has(.app-shell) #studentDashboardView .student-dashboard-main .student-dashboard-hero { display: grid !important; order: -3; position: relative; isolation: isolate; min-height: 210px !important; overflow: hidden; padding: clamp(24px, 4vw, 38px) !important; border: 0 !important; border-radius: 19px !important; background: linear-gradient(90deg, rgba(16, 47, 37, .93) 0%, rgba(20, 54, 43, .78) 48%, rgba(16, 47, 37, .14) 100%), url("assets/banner-ead-casa-luz.png") center 53% / cover no-repeat !important; box-shadow: 0 18px 38px rgba(25, 57, 43, .15) !important; } body:has(.app-shell) .student-dashboard-hero-copy { position: relative; z-index: 1; max-width: 560px; } body:has(.app-shell) .student-dashboard-hero .eyebrow { color: #e5cb8d !important; } body:has(.app-shell) .student-dashboard-hero h2 { max-width: 18ch; color: #fff !important; font-size: clamp(23px, 2.7vw, 34px) !important; line-height: 1.18; } body:has(.app-shell) .student-dashboard-hero p:not(.eyebrow) { max-width: 52ch; margin: 10px 0 0; color: rgba(255,255,255,.9) !important; font-size: 13px !important; line-height: 1.7; } body:has(.app-shell) .student-dashboard-hero-signature { color: #f2dfb3 !important; } body:has(.app-shell) .student-dashboard-metrics { order: -2; gap: 12px !important; } body:has(.app-shell) .student-dashboard-metric { min-height: 94px !important; padding: 16px !important; border: 1px solid var(--line) !important; border-radius: 14px !important; background: var(--warm-surface) !important; box-shadow: 0 8px 22px rgba(25, 52, 42, .045) !important; } body:has(.app-shell) .student-dashboard-metric-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px !important; background: var(--teal-soft) !important; color: var(--teal-strong) !important; } body:has(.app-shell) .student-dashboard-metric strong { color: var(--brand-strong) !important; font-size: 24px !important; } body:has(.app-shell) .student-dashboard-next { order: -1; margin: 0 !important; } body:has(.app-shell) .student-dashboard-next > .student-dashboard-section-heading { margin: 0 0 10px !important; } body:has(.app-shell) #lastCourseBox .next-lesson-card { min-height: 205px !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 17px !important; box-shadow: 0 14px 28px rgba(25, 52, 42, .12) !important; } body:has(.app-shell) #lastCourseBox .continue-study-overlay { background: linear-gradient(95deg, rgba(19, 55, 42, .96), rgba(18, 58, 44, .78) 62%, rgba(17, 57, 43, .28)) !important; } body:has(.app-shell) #lastCourseBox .continue-study-content { padding: clamp(22px, 3vw, 32px) !important; } body:has(.app-shell) #lastCourseBox .continue-study-actions .primary-button { min-height: 45px !important; background: #fff !important; border-color: #fff !important; color: var(--brand-strong) !important; } body:has(.app-shell) #studentDashboardView .student-area-block, body:has(.app-shell) #studentDashboardView .student-dashboard-widget { border-radius: 16px !important; } body:has(.app-shell) #studentDashboardView .course-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important; gap: 14px !important; } body:has(.app-shell) #studentDashboardView .course-card { overflow: hidden; border: 1px solid var(--line) !important; border-radius: 15px !important; background: var(--warm-surface) !important; box-shadow: 0 7px 20px rgba(25, 52, 42, .05) !important; transition: transform .2s ease, box-shadow .2s ease; } body:has(.app-shell) #studentDashboardView .course-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(25, 52, 42, .1) !important; } body:has(.app-shell) #studentDashboardView .course-cover { min-height: 144px !important; border-radius: 0 !important; } body:has(.app-shell) #studentDashboardView .course-body { display: grid; align-content: start; gap: 10px; padding: 16px !important; } body:has(.app-shell) #studentDashboardView .card-title-copy > strong { color: var(--ink) !important; font-size: 15px !important; line-height: 1.4 !important; } body:has(.app-shell) #studentDashboardView .progress-track { background: #e6ece8 !important; } body:has(.app-shell) #studentDashboardView .progress-bar { background: linear-gradient(90deg, var(--teal), #4da894) !important; } body:has(.app-shell) .student-dashboard-widget { padding: 18px !important; background: var(--warm-surface) !important; } /* Administrator: operational hierarchy and dense data, distinct from the learner home. */ body:has(#adminDashboardView:not(.hidden)) { --admin-surface: #fffefa; background: #f3f6f4 !important; } body:has(#adminDashboardView:not(.hidden)) .app-shell, body:has(#adminDashboardView:not(.hidden)) .main { background: #f3f6f4 !important; } body:has(#adminDashboardView:not(.hidden)) #platformSidebar.sidebar { background: #f9fbf8 !important; border-right: 1px solid var(--line) !important; } body:has(#adminDashboardView:not(.hidden)) #platformSidebar .nav-item { color: #465b50 !important; } body:has(#adminDashboardView:not(.hidden)) #platformSidebar .nav-item.active, body:has(#adminDashboardView:not(.hidden)) #platformSidebar .nav-item:hover { background: var(--sage) !important; color: var(--brand-strong) !important; } body:has(#adminDashboardView:not(.hidden)) .topbar { background: transparent !important; border-bottom: 1px solid var(--line) !important; } body:has(#adminDashboardView:not(.hidden)) .topbar h1, body:has(#adminDashboardView:not(.hidden)) #adminDashboardView h2 { color: var(--brand-strong) !important; font-family: Montserrat, "Segoe UI", Arial, sans-serif !important; } body:has(#adminDashboardView:not(.hidden)) #adminDashboardView .admin-tabs { position: sticky; top: 8px; z-index: 4; display: flex; flex-wrap: nowrap !important; gap: 5px; margin: 0 0 18px; padding: 8px; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,254,250,.94) !important; box-shadow: 0 7px 22px rgba(25, 52, 42, .07) !important; backdrop-filter: blur(12px); } body:has(#adminDashboardView:not(.hidden)) #adminDashboardView > .section-heading { display: none !important; } body:has(#adminDashboardView:not(.hidden)) #adminDashboardView .admin-tab { width: auto !important; max-width: none !important; flex: 0 0 auto; min-height: 38px !important; padding: 7px 11px !important; border: 1px solid transparent !important; border-radius: 9px !important; background: transparent !important; color: var(--muted) !important; font-size: 11px !important; white-space: nowrap; } body:has(#adminDashboardView:not(.hidden)) #adminDashboardView .admin-tab:hover, body:has(#adminDashboardView:not(.hidden)) #adminDashboardView .admin-tab.active { border-color: #d6e8e2 !important; background: var(--teal-soft) !important; color: var(--teal-strong) !important; } body:has(#adminDashboardView:not(.hidden)) #adminContent { min-width: 0; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-grid { display: grid; grid-template-columns: minmax(300px, .88fr) minmax(0, 1.12fr); align-items: start; gap: 18px; } body:has(#adminDashboardView:not(.hidden)) #adminContent .content-panel { min-width: 0; padding: clamp(18px, 2vw, 26px) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; background: var(--admin-surface) !important; box-shadow: 0 8px 24px rgba(25, 52, 42, .045) !important; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; margin: 0 0 14px; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-summary-primary { grid-template-columns: repeat(5, minmax(0, 1fr)); } body:has(#adminDashboardView:not(.hidden)) #adminContent :is(h3, h4) { color: var(--brand-strong); font-family: Montserrat, "Segoe UI", Arial, sans-serif; letter-spacing: -.02em; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-metric { min-width: 0; min-height: 112px; padding: 18px !important; border: 1px solid var(--line) !important; border-left: 3px solid var(--gold) !important; border-radius: 14px !important; background: var(--admin-surface) !important; box-shadow: 0 6px 18px rgba(25, 52, 42, .04) !important; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-metric > span { color: var(--muted); font-size: 12px; line-height: 1.5; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-metric > strong { color: var(--brand-strong); font-size: clamp(22px, 2vw, 29px); } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-operation-strip { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-quick-panel { margin-top: 4px; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-quick-actions { display: flex; flex-wrap: wrap; gap: 9px; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-quick-actions button { min-height: 36px !important; padding: 8px 12px !important; border: 1px solid #e0e8e2 !important; border-radius: 8px !important; background: #fff !important; color: #426052 !important; box-shadow: none !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.3 !important; white-space: nowrap; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-quick-actions button:hover { border-color: #c8ded4 !important; background: #f3f8f5 !important; color: var(--teal-strong) !important; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-item, body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-log-row, body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-learning-card { display: grid; gap: 8px; min-width: 0; margin: 10px 0 0; padding: 15px !important; border: 1px solid var(--line) !important; border-radius: 13px !important; background: #fff !important; box-shadow: 0 4px 14px rgba(25, 52, 42, .035) !important; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-item > strong { color: var(--ink); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-item > :is(span, small, p) { color: var(--muted); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-item > :is(button, a) { justify-self: start; max-width: 100%; } body:has(#adminDashboardView:not(.hidden)) #adminContent .filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 14px 0; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-payment-list { display: grid; gap: 10px; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-student-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-student-stats span { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--sage); } body:has(#adminDashboardView:not(.hidden)) #adminContent .form { display: grid; align-content: start; gap: 14px; } body:has(#adminDashboardView:not(.hidden)) #adminContent .form > label, body:has(#adminDashboardView:not(.hidden)) #adminContent .form .form-field { display: grid; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 600; } body:has(#adminDashboardView:not(.hidden)) #adminContent :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) { width: 100%; min-width: 0; min-height: 44px !important; padding: 10px 12px !important; border: 1px solid #d3dfd8 !important; border-radius: 10px !important; background: #fff !important; color: var(--ink) !important; font: inherit; font-size: 13px !important; } body:has(#adminDashboardView:not(.hidden)) #adminContent textarea { min-height: 110px !important; resize: vertical; } body:has(#adminDashboardView:not(.hidden)) #adminContent input[type="file"] { max-width: 100%; padding: 9px; border: 1px dashed #b8c9bd; border-radius: 10px; background: var(--sage); } body:has(#adminDashboardView:not(.hidden)) #adminContent .checkbox-label { display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfa; } body:has(#adminDashboardView:not(.hidden)) #adminContent .checkbox-label input { flex: 0 0 auto; margin-top: 3px; accent-color: var(--teal); } body:has(#adminDashboardView:not(.hidden)) #adminContent .form-actions, body:has(#adminDashboardView:not(.hidden)) #adminContent .export-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; } body:has(#adminDashboardView:not(.hidden)) #adminContent .rich-editor { min-height: 150px; padding: 14px; border: 1px solid #d3dfd8; border-radius: 10px; background: #fff; line-height: 1.65; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-student-detail { display: grid; gap: 16px; } body:has(#adminDashboardView:not(.hidden)) #adminContent .coupon-uses { margin-top: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #f8faf7; } body:has(#adminDashboardView:not(.hidden)) #adminContent .coupon-uses summary { cursor: pointer; color: var(--teal-strong); font-size: 12px; font-weight: 700; } body:has(#adminDashboardView:not(.hidden)) #adminContent .coupon-uses article { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); } body:has(#adminDashboardView:not(.hidden)) #adminContent .status-pill, body:has(#adminDashboardView:not(.hidden)) #adminContent .purchase-status { width: fit-content; padding: 5px 9px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-strong); font-size: 11px; font-weight: 700; } /* All internal views share spacing and card language without changing their controls. */ body:has(.app-shell) :is(#purchasesView, #cartView, #favoritesView, #annotationsView, #studyPlanView, #helpView, #courseView, #classroomView, #certificatesView, #libraryView, #agendaView, #profileView, #pixView) .content-panel, body:has(.app-shell) :is(#purchasesView, #cartView, #favoritesView, #annotationsView, #studyPlanView, #helpView, #courseView, #classroomView, #certificatesView, #libraryView, #agendaView, #profileView, #pixView) :is(.purchase-card, .favorite-lesson-card, .annotation-card, .notice-card, .certificate-row, .library-group, .study-day-card, .material-card) { border: 1px solid var(--line) !important; border-radius: 15px !important; background: var(--warm-surface) !important; box-shadow: 0 7px 20px rgba(25, 52, 42, .045) !important; } body:has(.app-shell) #classroomView .video-frame { border-radius: 16px !important; box-shadow: 0 14px 32px rgba(14, 35, 27, .14); } body:has(.app-shell) #classroomView :is(.lesson-info, .lesson-list) { border: 1px solid var(--line) !important; border-radius: 15px !important; background: var(--warm-surface) !important; } body:has(.app-shell) #classroomView .lesson-button { min-height: 54px; border-radius: 10px !important; } body:has(.app-shell) #classroomView .lesson-button.active { border-color: var(--teal) !important; background: var(--teal-soft) !important; color: var(--teal-strong) !important; } body:has(.app-shell) :is(#profileView, #studyPlanView, #libraryView) :is(input, select, textarea) { width: 100%; } @media (max-width: 1000px) { body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-grid { grid-template-columns: minmax(0, 1fr); } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-summary-primary { grid-template-columns: repeat(3, minmax(0, 1fr)); } body:has(.app-shell) .student-dashboard-layout { grid-template-columns: minmax(0, 1fr) !important; } body:has(.app-shell) .student-dashboard-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } } @media (max-width: 760px) { body:has(.app-shell) .main { padding: 18px 16px 32px !important; } body:has(.app-shell) .student-dashboard-utility { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; padding-top: 0 !important; } body:has(.app-shell) .student-dashboard-welcome { margin: 0 0 14px; } body:has(.app-shell) .student-dashboard-hero { min-height: 190px !important; } body:has(.app-shell) .student-dashboard-hero h2 { max-width: 16ch !important; } body:has(.app-shell) .student-dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body:has(.app-shell) .student-dashboard-rail { grid-template-columns: minmax(0, 1fr); } body:has(.app-shell) #studentDashboardView .course-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-summary-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-operation-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } body:has(#adminDashboardView:not(.hidden)) #adminContent .filter-row { grid-template-columns: minmax(0, 1fr); } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-tabs { top: 4px; } body:has(#adminDashboardView:not(.hidden)) #adminDashboardView .admin-tab { min-height: 40px !important; padding: 8px 11px !important; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-quick-actions button { min-height: 40px !important; } body.public-layout.auth-panel-open .sidebar { width: 100vw !important; max-width: 100vw !important; border-radius: 0 !important; padding: 24px 22px !important; } } @media (max-width: 420px) { body:has(.app-shell) .main { padding-right: 12px !important; padding-left: 12px !important; } body:has(.app-shell) .student-dashboard-metrics { gap: 8px !important; } body:has(.app-shell) .student-dashboard-metric { min-height: 84px !important; padding: 12px !important; } body:has(.app-shell) #lastCourseBox .continue-study-actions { align-items: stretch; flex-direction: column; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-summary-grid { grid-template-columns: minmax(0, 1fr); } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-summary-primary { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { body:has(.app-shell) *, body:has(.app-shell) *::before, body:has(.app-shell) *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } } } /* One shared palette. Existing brand and religious imagery are preserved. */ :root{--bg:#f5f6f2;--surface:#fff;--surface-soft:#eef3ee;--ink:#20372d;--muted:#596b61;--line:#dce4dc;--brand:#215742;--brand-strong:#163e2e;--gold:#a4762a;--blue:#215742;--danger:#a13232;--cream:#faf8f2;--shadow:0 8px 30px #1833260d;--ui-muted:#596b61;--ui-line:#dce4dc} *{box-sizing:border-box}html{scroll-padding-top:20px}body{color:var(--ink);background:var(--bg)} body:has(.app-shell),body:has(.app-shell) .app-shell,body:has(.app-shell) .main{background:var(--bg)!important;color:var(--ink)!important} body:has(.app-shell) .main{min-width:0;padding:32px clamp(18px,3.5vw,56px)!important} body:has(.app-shell) .sidebar{background:#fcfdf9!important;border-right:1px solid var(--line)!important;box-shadow:none!important;padding:24px 16px!important;width:250px} body:has(.app-shell) .brand{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--brand-strong)!important;padding:0 6px 24px!important} body:has(.app-shell) .brand small{color:var(--muted)!important;font-size:11px!important;line-height:1.5} body:has(.app-shell) .brand-logo{background:white;border:1px solid var(--line);border-radius:50%;width:46px!important;height:46px!important;padding:5px} body:has(.app-shell) .nav-list{gap:4px!important}body:has(.app-shell) .nav-group{display:grid;gap:3px;margin:0 0 12px} body:has(.app-shell) .nav-group>p{color:var(--muted)!important;text-transform:uppercase;letter-spacing:.13em;font-size:10px;margin:10px 12px 6px;font-weight:700} body:has(.app-shell) .nav-item{display:flex;align-items:center;gap:12px;min-height:44px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:#4e6256!important;box-shadow:none!important;padding:10px 13px!important;font-size:13px!important;font-weight:600!important;text-align:left} body:has(.app-shell) .nav-item::before{content:attr(data-nav-icon);color:inherit!important;font-size:17px;width:21px;text-align:center} body:has(.app-shell) .nav-item:hover{background:#eef3ec!important}body:has(.app-shell) .nav-item.active{background:var(--brand)!important;color:#fff!important} body:has(.app-shell) .topbar{background:transparent!important;border:0!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important;border-radius:0!important;padding:0 0 23px!important;margin-bottom:26px!important} body:has(.app-shell) .topbar h1{font-family:Montserrat,Arial,sans-serif!important;font-size:clamp(23px,2.4vw,34px)!important;font-weight:700!important;text-transform:none!important;letter-spacing:-.045em!important;color:var(--brand-strong)!important;margin:4px 0 0} body:has(.app-shell) .eyebrow{color:var(--muted)!important;font-size:10px!important;font-weight:700;letter-spacing:.13em!important} body:has(.app-shell) .platform-tutor-byline{color:var(--muted)!important;font-size:11px!important;margin-top:10px}body:has(.app-shell) .platform-tutor-byline img{width:22px!important;height:22px!important;object-fit:cover;border-radius:50%} body:has(.app-shell) h2{color:var(--brand-strong)!important;text-transform:none!important;letter-spacing:-.025em!important;font-family:Montserrat,Arial,sans-serif!important;font-weight:700!important} body:has(.app-shell) :is(.content-panel,.student-area-block,.metric,.course-card,.material-card){background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:var(--shadow)!important} body:has(.app-shell) :is(.primary-button,.secondary-button,.ghost-button){min-height:44px!important;border-radius:10px!important;font-size:12px!important;line-height:1.45;box-shadow:none!important;padding:11px 17px!important;letter-spacing:0!important} body:has(.app-shell) .primary-button{background:var(--brand)!important;color:white!important;border:1px solid var(--brand)!important}body:has(.app-shell) .primary-button:hover{background:var(--brand-strong)!important} body:has(.app-shell) :is(.secondary-button,.ghost-button){color:var(--brand)!important;border:1px solid var(--line)!important;background:var(--surface)!important}button:disabled{opacity:.55;cursor:not-allowed!important} body:has(.app-shell) :is(input,select,textarea){border:1px solid #b7c6ba!important;border-radius:9px!important;background:white!important;color:var(--ink)!important;min-height:44px;font-size:14px!important;max-width:100%} body:has(.app-shell) input[type=checkbox]{min-height:20px;min-width:20px;accent-color:var(--brand)}body:has(.app-shell) label{color:var(--ink);font-size:13px;line-height:1.55} body:has(.app-shell) .auth-tabs{background:#eef3ee!important;border:1px solid var(--line)!important;padding:4px;border-radius:11px}body:has(.app-shell) .auth-tab{min-height:44px;border-radius:8px}body:has(.app-shell) .auth-tab.active{background:var(--brand)!important;color:white!important} .auth-intro{font-size:13px;color:var(--muted);line-height:1.7}body:has(.app-shell) .sidebar-auth{padding:0 5px!important;background:transparent!important;border:0!important;box-shadow:none!important}body:has(.app-shell) .sidebar-auth h2{font-size:22px!important} body:has(.app-shell) .user-badge{background:#e6eee6!important;color:var(--brand-strong)!important;padding:9px 14px;border:0!important;border-radius:30px} body:has(.app-shell) .student-dashboard-layout{gap:24px!important}body:has(.app-shell) .student-dashboard-main{display:flex!important;flex-direction:column;gap:24px!important}body:has(.app-shell) .student-dashboard-next{order:-3;margin:0!important} body:has(.app-shell) .student-dashboard-hero{background:#eaf0e5!important;color:var(--brand-strong)!important;border:1px solid #d9e4d2!important;border-radius:16px!important;padding:24px!important;box-shadow:none!important}body:has(.app-shell) .student-dashboard-hero h2{font-size:22px!important}body:has(.app-shell) .student-dashboard-hero p{color:#425d49!important;font-size:13px!important;line-height:1.75}body:has(.app-shell) .student-dashboard-hero-signature{color:var(--brand)!important} body:has(.app-shell) .student-dashboard-metrics{gap:12px!important}body:has(.app-shell) .student-dashboard-metric{padding:18px!important;min-height:96px!important}body:has(.app-shell) .student-dashboard-metric strong{color:var(--brand-strong)!important;font-size:25px!important}body:has(.app-shell) .student-dashboard-metric-icon{background:#f1f5ed!important;color:var(--brand)!important;border-radius:12px!important} body:has(.app-shell) .student-dashboard-section{margin-top:0!important}body:has(.app-shell) .student-dashboard-section h2{font-size:20px!important}body:has(.app-shell) .student-dashboard-section-heading{margin-bottom:15px!important} body:has(.app-shell) .course-card{overflow:hidden;padding:0!important}body:has(.app-shell) .course-card img{aspect-ratio:16/10;object-fit:cover}body:has(.app-shell) .course-card-body{padding:20px!important} body:has(.app-shell) .progress-track{background:#e3ebe0!important;height:6px!important;border-radius:20px;overflow:hidden}body:has(.app-shell) .progress-bar{background:var(--brand)!important} body:has(.app-shell) .classroom-layout{gap:24px!important}body:has(.app-shell) .classroom-course-head{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:none!important}body:has(.app-shell) .video-frame{border-radius:14px!important;overflow:hidden;background:#16281f!important;aspect-ratio:16/9} body:has(.app-shell) .lesson-button{border-radius:9px!important;min-height:48px}body:has(.app-shell) .lesson-button.active{background:#edf3e9!important;border-color:var(--brand)!important;color:var(--brand-strong)!important}body:has(.app-shell) :is(.module-title,.module-toggle){min-height:44px} body:has(.app-shell) .admin-tab{min-height:44px!important;border-radius:9px!important}body:has(.app-shell) .admin-tab.active{background:var(--brand)!important;color:#fff!important}body:has(.app-shell) .admin-item{border:1px solid var(--line)!important;border-radius:12px!important;background:var(--surface)!important;box-shadow:none!important;padding:18px!important} .privacy-note,.sync-status{background:#fff6df;color:#674e20;border:1px solid #e5d3a7;border-radius:12px;padding:15px 18px;line-height:1.6;font-size:13px}.sync-status{display:flex;gap:15px;align-items:center;justify-content:space-between;margin-bottom:20px}.pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 0;flex-wrap:wrap;font-size:13px} .cookie-consent{position:fixed;z-index:10000;bottom:18px;left:18px;right:18px;margin:auto;max-width:900px;display:flex;align-items:center;gap:24px;justify-content:space-between;background:#fff!important;color:#20372d!important;border:1px solid #becdbf!important;border-radius:16px!important;box-shadow:0 12px 45px #132d2026;padding:22px!important}.cookie-consent p{font-size:13px;line-height:1.6;margin:7px 0 0}.cookie-consent-actions{display:flex;gap:10px;flex-shrink:0}.cookie-consent button{min-height:44px;padding:10px 16px;border:1px solid #b6c5b8;border-radius:9px;cursor:pointer;font-weight:600}.cookie-consent .primary-button{background:#215742;color:white}.hidden{display:none!important} .skip-link{position:fixed;z-index:20000;top:8px;left:12px;padding:12px 20px;background:#183c2e;color:white;border-radius:8px;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}:focus-visible{outline:3px solid #9d6a16!important;outline-offset:3px!important}[tabindex='-1']:focus:not(:focus-visible){outline:none!important} .seo-sidebar button.link-button{background:none;color:inherit;border:0;padding:12px;text-align:left;text-decoration:underline;cursor:pointer} body.dark{--bg:#14231b;--surface:#1d3025;--surface-soft:#233b2b;--ink:#e9f0e6;--muted:#bfccbc;--line:#435a47;--brand:#a7d9b3;--brand-strong:#e1efda}body.dark:has(.app-shell) .sidebar{background:#192a20!important}body.dark:has(.app-shell) .nav-item{color:#c9d8c4!important}body.dark:has(.app-shell) .nav-item.active{background:#304e38!important}body.dark:has(.app-shell) .primary-button{background:#a7d9b3!important;color:#14231b!important}body.dark:has(.app-shell) :is(input,select,textarea){background:#21382a!important;color:#edf3e9!important} @media(max-width:1100px){body:has(.app-shell) .student-dashboard-layout{grid-template-columns:minmax(0,1fr)!important}body:has(.app-shell) .student-dashboard-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}} @media(max-width:760px){body:has(.app-shell) .main{padding:18px 16px 28px!important}body:has(.app-shell) .sidebar{width:min(88vw,300px)}body:has(.app-shell) .topbar{padding-top:44px!important;gap:14px!important;align-items:flex-start!important}body:has(.app-shell) .topbar h1{font-size:26px!important}body:has(.app-shell) .student-dashboard-utility{gap:12px!important;flex-wrap:wrap}body:has(.app-shell) .student-dashboard-profile-shortcut{display:none!important}body:has(.app-shell) .student-dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}body:has(.app-shell) .student-dashboard-side{grid-template-columns:minmax(0,1fr)}body:has(.app-shell) .student-dashboard-hero-signature{display:none!important}body:has(.app-shell) .course-grid{grid-template-columns:minmax(0,1fr)!important}body:has(.app-shell) .classroom-layout{grid-template-columns:minmax(0,1fr)!important}body:has(.app-shell) :is(.classroom-main,.classroom-sidebar){width:100%!important;min-width:0}body:has(.app-shell) .admin-grid{grid-template-columns:minmax(0,1fr)!important}body:has(.app-shell) .admin-tabs{flex-wrap:nowrap!important;overflow-x:auto;padding-bottom:10px}.cookie-consent{flex-direction:column;align-items:stretch;gap:15px;bottom:10px;left:10px;right:10px;padding:18px!important}.cookie-consent-actions{flex-wrap:wrap}.cookie-consent-actions button{flex:1}.sync-status{align-items:flex-start;flex-direction:column}.lesson-nav{flex-wrap:wrap}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}} body:has(.app-shell){--student-navy:#183c2e;--student-blue:#215742;--student-sky:#b6cda1;--student-ink:#20372d;--student-muted:#596b61;--student-line:#dce4dc;--student-surface:#fff} body:has(.app-shell) .brand-logo{display:block!important} body:has(.app-shell) .brand::before,body:has(.app-shell) .brand strong::before,body:has(.app-shell) .brand strong::after,body:has(.app-shell) .brand small::before{content:none!important} body:has(.app-shell) .brand strong{font-size:18px!important;line-height:1.4!important;display:block!important;letter-spacing:.02em!important} body:has(.app-shell) .brand small{display:block!important} body:has(.app-shell) .course-body{padding:18px!important} body:has(.app-shell) .card-title-copy>strong{display:block!important;font-family:Montserrat,Arial,sans-serif!important;font-size:16px!important;line-height:1.5!important;color:var(--ink)!important;overflow-wrap:normal;word-break:normal} body:has(.app-shell) .course-card.compact-access-card .card-title-copy{display:block!important;margin-bottom:12px!important} body:has(.app-shell) #lastCourseBox .next-lesson-card{background:#183c2e!important;border:0!important;min-height:230px!important;border-radius:16px!important;box-shadow:var(--shadow)!important} body:has(.app-shell) #lastCourseBox .continue-study-overlay{background:linear-gradient(105deg,#173b2df5,#254c36e8)!important} body:has(.app-shell) #lastCourseBox .continue-study-content{padding:28px!important;max-width:100%!important} body:has(.app-shell) #lastCourseBox .continue-study-content>strong{font-family:Montserrat,Arial,sans-serif!important;font-size:25px!important;line-height:1.35!important} body:has(.app-shell) #lastCourseBox .continue-study-eyebrow{color:#d4dfbb!important} body:has(.app-shell) #lastCourseBox .continue-study-progress .progress-bar{background:#c2d8a4!important} body:has(.app-shell) #lastCourseBox .continue-study-actions .primary-button{background:#fff!important;color:#173b2d!important} body:has(.app-shell) .student-dashboard-metrics{grid-template-columns:repeat(4,minmax(0,1fr))!important} body:has(.app-shell) .student-dashboard-metric{min-width:0;gap:10px!important} body:has(.app-shell) .student-dashboard-metric span{white-space:normal!important} @media(max-width:1050px){body:has(.app-shell) .student-dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:760px){body:has(.app-shell) #lastCourseBox .continue-study-content{padding:22px!important}body:has(.app-shell) #lastCourseBox .continue-study-content>strong{font-size:22px!important}body:has(.app-shell) .sidebar .brand{padding-top:20px!important}body:has(.app-shell) .student-dashboard-utility{padding-top:46px!important}} body:has(.app-shell) .brand{grid-template-columns:46px minmax(0,1fr)!important;align-items:center!important;gap:12px!important;text-align:left!important;min-height:88px!important} body:has(.app-shell) .brand strong{color:var(--brand-strong)!important} body:has(.app-shell) .brand-logo{position:static!important;transform:none!important;filter:none!important;margin:0!important;object-fit:contain!important} body:has(.app-shell) #dashboardLibraryWidget .course-grid{grid-template-columns:minmax(0,1fr)!important} body:has(.app-shell) #dashboardLibraryWidget .course-card{width:100%!important;max-width:none!important} body:has(.app-shell) #dashboardLibraryWidget .course-cover{height:150px!important;min-height:150px!important;max-width:none!important;width:100%!important} body:has(.app-shell) #dashboardLibraryWidget .course-cover strong{font-size:19px!important;line-height:1.4!important;word-break:normal!important;overflow-wrap:normal!important} body:has(.app-shell) #dashboardLibraryWidget .course-body{padding:15px!important} @media(max-width:1280px){body:has(.app-shell) .student-dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}} body:has(.app-shell){--dashboard-blue:#215742;--dashboard-navy:#183c2e;--dashboard-ink:#20372d;--dashboard-muted:#596b61} body:has(.app-shell) .student-dashboard-text-link{min-height:44px!important} body:has(.app-shell) .student-dashboard-search{width:100%!important;max-width:none!important;min-width:0!important;display:flex!important;align-items:center!important;gap:8px!important;grid-template-columns:none!important} body:has(.app-shell) .student-dashboard-search>span{flex:0 0 16px!important} body:has(.app-shell) .student-dashboard-search input{width:100%!important;min-width:0!important} body:has(.app-shell) .sidebar-close{min-height:44px!important;min-width:44px!important} @media(max-width:760px){body:has(.app-shell) .student-dashboard-utility{display:block!important}body:has(.app-shell) .student-dashboard-search{margin:0!important}} /* Administrative overview and student-preview controls follow the same visual system. */ body:has(.app-shell) .admin-student-preview-access{display:grid;gap:6px;margin:14px 0;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)} body:has(.app-shell) .admin-student-preview-link{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px!important;width:100%;padding:9px 12px!important;border:1px solid var(--line)!important;border-radius:9px!important;background:var(--surface-soft)!important;color:var(--brand-strong)!important;font-size:12px!important;font-weight:700!important;cursor:pointer} body:has(.app-shell) .admin-student-preview-access>span{color:var(--muted);font-size:11px;line-height:1.45} body:has(.app-shell) .admin-operation-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0 0 18px} body:has(.app-shell) .admin-operation-strip>span{display:grid;gap:4px;min-width:0;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)} body:has(.app-shell) .admin-operation-strip small{color:var(--muted);font-size:11px;line-height:1.4} body:has(.app-shell) .admin-operation-strip strong{color:var(--brand-strong);font-size:20px;line-height:1.2} body:has(.app-shell) .admin-quick-panel{margin-top:0} body:has(.app-shell) .admin-quick-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px} body:has(.app-shell) .admin-quick-heading h2{margin:4px 0 0} body:has(.app-shell) .admin-quick-heading>p{margin:0;color:var(--muted);font-size:13px;line-height:1.5} body:has(.app-shell) .admin-quick-actions{display:flex;flex-wrap:wrap;gap:10px} body:has(.app-shell) .admin-quick-actions button{min-height:44px!important} @media(max-width:760px){body:has(.app-shell) .admin-operation-strip{grid-template-columns:repeat(2,minmax(0,1fr))}body:has(.app-shell) .admin-quick-heading{align-items:flex-start;flex-direction:column;gap:6px}} /* 2026 student and administrator portal refresh. Keep behavior in existing views. */ :root { --teal: #0d7d86; --teal-strong: #08616c; --teal-soft: #e3f3f1; --sage: #edf3ec; --warm-surface: #fffefa; --focus-ring: #188793; } body:has(.app-shell) { font-family: Montserrat, "Segoe UI", Arial, sans-serif; background: #f3f6f4; color: var(--ink); } body:has(.app-shell) .main { padding: 26px clamp(20px, 3.4vw, 52px) 48px !important; } body:has(.app-shell) :is(button, a, input, select, textarea, summary, [tabindex="0"]):focus-visible { outline: 3px solid color-mix(in srgb, var(--focus-ring) 42%, transparent) !important; outline-offset: 2px !important; } body:has(.app-shell) :is(.primary-button, .secondary-button, .ghost-button, .link-button) { transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; } /* Access drawer: a dedicated sign-in surface over public information only. */ body.public-layout.auth-panel-open::before { background: rgba(20, 39, 33, .34) !important; backdrop-filter: blur(3px); } body.public-layout.auth-panel-open .sidebar { inset: 0 auto 0 0 !important; width: min(94vw, 462px) !important; max-width: 462px !important; padding: clamp(24px, 4vw, 42px) !important; gap: 24px !important; background: var(--warm-surface) !important; border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 24px 24px 0 !important; box-shadow: 18px 0 60px rgba(25, 52, 42, .16) !important; } body.public-layout.auth-panel-open .sidebar .brand { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) !important; align-items: center !important; justify-content: start !important; gap: 12px !important; padding: 10px 42px 18px 0 !important; border-bottom: 1px solid var(--line) !important; text-align: left !important; } body.public-layout.auth-panel-open .sidebar .brand strong { font-size: 19px !important; letter-spacing: -.03em; } body.public-layout.auth-panel-open .sidebar .brand small { display: block !important; margin-top: 3px; color: var(--muted) !important; } body.public-layout.auth-panel-open .sidebar .brand-logo { width: 46px !important; height: 46px !important; } body.public-layout.auth-panel-open .sidebar-close { right: 22px !important; top: 24px !important; width: 42px !important; height: 42px !important; background: var(--sage) !important; } body.public-layout.auth-panel-open .sidebar-auth { padding: 0 !important; } body.public-layout.auth-panel-open .auth-tabs { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; margin: 0 0 26px; } body.public-layout.auth-panel-open .auth-tab { min-width: 0 !important; } body.public-layout.auth-panel-open .sidebar-auth-panel h2 { margin: 7px 0 10px; font-size: clamp(25px, 3vw, 32px) !important; line-height: 1.18; } body.public-layout.auth-panel-open .sidebar-auth-panel .auth-intro { max-width: 34ch; margin: 0 0 22px; font-size: 14px; } body.public-layout.auth-panel-open #loginForm, body.public-layout.auth-panel-open #registerForm { display: grid; gap: 16px; } body.public-layout.auth-panel-open #loginForm label, body.public-layout.auth-panel-open #registerForm > label:not(.checkbox-label) { display: grid; gap: 7px; font-weight: 600; } body.public-layout.auth-panel-open #loginForm input, body.public-layout.auth-panel-open #registerForm > label:not(.checkbox-label) input { width: 100%; min-height: 50px !important; padding: 12px 15px !important; background: #fff !important; border-color: #d7e1dd !important; border-radius: 11px !important; } body.public-layout.auth-panel-open #loginForm .primary-button, body.public-layout.auth-panel-open #registerSubmitButton { min-height: 50px !important; width: 100%; background: var(--teal) !important; border-color: var(--teal) !important; font-size: 14px !important; } body.public-layout.auth-panel-open #loginForm .primary-button:hover, body.public-layout.auth-panel-open #registerSubmitButton:hover { background: var(--teal-strong) !important; } body.public-layout.auth-panel-open #loginForm [data-action="recover-password"] { justify-self: end; min-height: 40px; padding: 5px 0 !important; border: 0 !important; background: transparent !important; color: var(--teal-strong) !important; } body.public-layout.auth-panel-open .auth-help { color: var(--muted); line-height: 1.55; } /* Student home: greeting, branded learning banner, real course progress and existing widgets. */ body:has(.app-shell) .student-dashboard-utility { margin-bottom: 18px !important; } body:has(.app-shell) .student-dashboard-search input { min-height: 46px !important; border-radius: 999px !important; background: #fff !important; } body:has(.app-shell) .student-dashboard-welcome { margin: 0 0 18px; } body:has(.app-shell) .student-dashboard-welcome h2 { margin: 3px 0 5px; font-size: clamp(25px, 2.4vw, 34px) !important; letter-spacing: -.045em !important; } body:has(.app-shell) .student-dashboard-welcome > div > p:last-child { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; } body:has(.app-shell) .student-dashboard-main { gap: 18px !important; } body:has(.app-shell) #studentDashboardView .student-dashboard-main .student-dashboard-hero { display: grid !important; order: -3; position: relative; isolation: isolate; min-height: 210px !important; overflow: hidden; padding: clamp(24px, 4vw, 38px) !important; border: 0 !important; border-radius: 19px !important; background: linear-gradient(90deg, rgba(16, 47, 37, .93) 0%, rgba(20, 54, 43, .78) 48%, rgba(16, 47, 37, .14) 100%), url("assets/banner-ead-casa-luz.png") center 53% / cover no-repeat !important; box-shadow: 0 18px 38px rgba(25, 57, 43, .15) !important; } body:has(.app-shell) .student-dashboard-hero-copy { position: relative; z-index: 1; max-width: 560px; } body:has(.app-shell) .student-dashboard-hero .eyebrow { color: #e5cb8d !important; } body:has(.app-shell) .student-dashboard-hero h2 { max-width: 18ch; color: #fff !important; font-size: clamp(23px, 2.7vw, 34px) !important; line-height: 1.18; } body:has(.app-shell) .student-dashboard-hero p:not(.eyebrow) { max-width: 52ch; margin: 10px 0 0; color: rgba(255,255,255,.9) !important; font-size: 13px !important; line-height: 1.7; } body:has(.app-shell) .student-dashboard-hero-signature { color: #f2dfb3 !important; } body:has(.app-shell) .student-dashboard-metrics { order: -2; gap: 12px !important; } body:has(.app-shell) .student-dashboard-metric { min-height: 94px !important; padding: 16px !important; border: 1px solid var(--line) !important; border-radius: 14px !important; background: var(--warm-surface) !important; box-shadow: 0 8px 22px rgba(25, 52, 42, .045) !important; } body:has(.app-shell) .student-dashboard-metric-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px !important; background: var(--teal-soft) !important; color: var(--teal-strong) !important; } body:has(.app-shell) .student-dashboard-metric strong { color: var(--brand-strong) !important; font-size: 24px !important; } body:has(.app-shell) .student-dashboard-next { order: -1; margin: 0 !important; } body:has(.app-shell) .student-dashboard-next > .student-dashboard-section-heading { margin: 0 0 10px !important; } body:has(.app-shell) #lastCourseBox .next-lesson-card { min-height: 205px !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 17px !important; box-shadow: 0 14px 28px rgba(25, 52, 42, .12) !important; } body:has(.app-shell) #lastCourseBox .continue-study-overlay { background: linear-gradient(95deg, rgba(19, 55, 42, .96), rgba(18, 58, 44, .78) 62%, rgba(17, 57, 43, .28)) !important; } body:has(.app-shell) #lastCourseBox .continue-study-content { padding: clamp(22px, 3vw, 32px) !important; } body:has(.app-shell) #lastCourseBox .continue-study-actions .primary-button { min-height: 45px !important; background: #fff !important; border-color: #fff !important; color: var(--brand-strong) !important; } body:has(.app-shell) #studentDashboardView .student-area-block, body:has(.app-shell) #studentDashboardView .student-dashboard-widget { border-radius: 16px !important; } body:has(.app-shell) #studentDashboardView .course-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important; gap: 14px !important; } body:has(.app-shell) #studentDashboardView .course-card { overflow: hidden; border: 1px solid var(--line) !important; border-radius: 15px !important; background: var(--warm-surface) !important; box-shadow: 0 7px 20px rgba(25, 52, 42, .05) !important; transition: transform .2s ease, box-shadow .2s ease; } body:has(.app-shell) #studentDashboardView .course-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(25, 52, 42, .1) !important; } body:has(.app-shell) #studentDashboardView .course-cover { min-height: 144px !important; border-radius: 0 !important; } body:has(.app-shell) #studentDashboardView .course-body { display: grid; align-content: start; gap: 10px; padding: 16px !important; } body:has(.app-shell) #studentDashboardView .card-title-copy > strong { color: var(--ink) !important; font-size: 15px !important; line-height: 1.4 !important; } body:has(.app-shell) #studentDashboardView .progress-track { background: #e6ece8 !important; } body:has(.app-shell) #studentDashboardView .progress-bar { background: linear-gradient(90deg, var(--teal), #4da894) !important; } body:has(.app-shell) .student-dashboard-widget { padding: 18px !important; background: var(--warm-surface) !important; } /* Administrator: operational hierarchy and dense data, distinct from the learner home. */ body:has(#adminDashboardView:not(.hidden)) { --admin-surface: #fffefa; background: #f3f6f4 !important; } body:has(#adminDashboardView:not(.hidden)) .app-shell, body:has(#adminDashboardView:not(.hidden)) .main { background: #f3f6f4 !important; } body:has(#adminDashboardView:not(.hidden)) #platformSidebar.sidebar { background: #f9fbf8 !important; border-right: 1px solid var(--line) !important; } body:has(#adminDashboardView:not(.hidden)) #platformSidebar .nav-item { color: #465b50 !important; } body:has(#adminDashboardView:not(.hidden)) #platformSidebar .nav-item.active, body:has(#adminDashboardView:not(.hidden)) #platformSidebar .nav-item:hover { background: var(--sage) !important; color: var(--brand-strong) !important; } body:has(#adminDashboardView:not(.hidden)) .topbar { background: transparent !important; border-bottom: 1px solid var(--line) !important; } body:has(#adminDashboardView:not(.hidden)) .topbar h1, body:has(#adminDashboardView:not(.hidden)) #adminDashboardView h2 { color: var(--brand-strong) !important; font-family: Montserrat, "Segoe UI", Arial, sans-serif !important; } body:has(#adminDashboardView:not(.hidden)) #adminDashboardView .admin-tabs { position: sticky; top: 8px; z-index: 4; display: flex; flex-wrap: nowrap !important; gap: 5px; margin: 0 0 18px; padding: 8px; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,254,250,.94) !important; box-shadow: 0 7px 22px rgba(25, 52, 42, .07) !important; backdrop-filter: blur(12px); } body:has(#adminDashboardView:not(.hidden)) #adminDashboardView > .section-heading { display: none !important; } body:has(#adminDashboardView:not(.hidden)) #adminDashboardView .admin-tab { width: auto !important; max-width: none !important; flex: 0 0 auto; min-height: 38px !important; padding: 7px 11px !important; border: 1px solid transparent !important; border-radius: 9px !important; background: transparent !important; color: var(--muted) !important; font-size: 11px !important; white-space: nowrap; } body:has(#adminDashboardView:not(.hidden)) #adminDashboardView .admin-tab:hover, body:has(#adminDashboardView:not(.hidden)) #adminDashboardView .admin-tab.active { border-color: #d6e8e2 !important; background: var(--teal-soft) !important; color: var(--teal-strong) !important; } body:has(#adminDashboardView:not(.hidden)) #adminContent { min-width: 0; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-grid { display: grid; grid-template-columns: minmax(300px, .88fr) minmax(0, 1.12fr); align-items: start; gap: 18px; } body:has(#adminDashboardView:not(.hidden)) #adminContent .content-panel { min-width: 0; padding: clamp(18px, 2vw, 26px) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; background: var(--admin-surface) !important; box-shadow: 0 8px 24px rgba(25, 52, 42, .045) !important; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; margin: 0 0 14px; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-summary-primary { grid-template-columns: repeat(5, minmax(0, 1fr)); } body:has(#adminDashboardView:not(.hidden)) #adminContent :is(h3, h4) { color: var(--brand-strong); font-family: Montserrat, "Segoe UI", Arial, sans-serif; letter-spacing: -.02em; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-metric { min-width: 0; min-height: 112px; padding: 18px !important; border: 1px solid var(--line) !important; border-left: 3px solid var(--gold) !important; border-radius: 14px !important; background: var(--admin-surface) !important; box-shadow: 0 6px 18px rgba(25, 52, 42, .04) !important; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-metric > span { color: var(--muted); font-size: 12px; line-height: 1.5; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-metric > strong { color: var(--brand-strong); font-size: clamp(22px, 2vw, 29px); } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-operation-strip { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-quick-panel { margin-top: 4px; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-quick-actions { display: flex; flex-wrap: wrap; gap: 9px; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-quick-actions button { min-height: 36px !important; padding: 8px 12px !important; border: 1px solid #e0e8e2 !important; border-radius: 8px !important; background: #fff !important; color: #426052 !important; box-shadow: none !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.3 !important; white-space: nowrap; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-quick-actions button:hover { border-color: #c8ded4 !important; background: #f3f8f5 !important; color: var(--teal-strong) !important; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-item, body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-log-row, body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-learning-card { display: grid; gap: 8px; min-width: 0; margin: 10px 0 0; padding: 15px !important; border: 1px solid var(--line) !important; border-radius: 13px !important; background: #fff !important; box-shadow: 0 4px 14px rgba(25, 52, 42, .035) !important; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-item > strong { color: var(--ink); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-item > :is(span, small, p) { color: var(--muted); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-item > :is(button, a) { justify-self: start; max-width: 100%; } body:has(#adminDashboardView:not(.hidden)) #adminContent .filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 14px 0; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-payment-list { display: grid; gap: 10px; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-student-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-student-stats span { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--sage); } body:has(#adminDashboardView:not(.hidden)) #adminContent .form { display: grid; align-content: start; gap: 14px; } body:has(#adminDashboardView:not(.hidden)) #adminContent .form > label, body:has(#adminDashboardView:not(.hidden)) #adminContent .form .form-field { display: grid; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 600; } body:has(#adminDashboardView:not(.hidden)) #adminContent :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) { width: 100%; min-width: 0; min-height: 44px !important; padding: 10px 12px !important; border: 1px solid #d3dfd8 !important; border-radius: 10px !important; background: #fff !important; color: var(--ink) !important; font: inherit; font-size: 13px !important; } body:has(#adminDashboardView:not(.hidden)) #adminContent textarea { min-height: 110px !important; resize: vertical; } body:has(#adminDashboardView:not(.hidden)) #adminContent input[type="file"] { max-width: 100%; padding: 9px; border: 1px dashed #b8c9bd; border-radius: 10px; background: var(--sage); } body:has(#adminDashboardView:not(.hidden)) #adminContent .checkbox-label { display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfa; } body:has(#adminDashboardView:not(.hidden)) #adminContent .checkbox-label input { flex: 0 0 auto; margin-top: 3px; accent-color: var(--teal); } body:has(#adminDashboardView:not(.hidden)) #adminContent .form-actions, body:has(#adminDashboardView:not(.hidden)) #adminContent .export-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; } body:has(#adminDashboardView:not(.hidden)) #adminContent .rich-editor { min-height: 150px; padding: 14px; border: 1px solid #d3dfd8; border-radius: 10px; background: #fff; line-height: 1.65; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-student-detail { display: grid; gap: 16px; } body:has(#adminDashboardView:not(.hidden)) #adminContent .coupon-uses { margin-top: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #f8faf7; } body:has(#adminDashboardView:not(.hidden)) #adminContent .coupon-uses summary { cursor: pointer; color: var(--teal-strong); font-size: 12px; font-weight: 700; } body:has(#adminDashboardView:not(.hidden)) #adminContent .coupon-uses article { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); } body:has(#adminDashboardView:not(.hidden)) #adminContent .status-pill, body:has(#adminDashboardView:not(.hidden)) #adminContent .purchase-status { width: fit-content; padding: 5px 9px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-strong); font-size: 11px; font-weight: 700; } /* All internal views share spacing and card language without changing their controls. */ body:has(.app-shell) :is(#purchasesView, #cartView, #favoritesView, #annotationsView, #studyPlanView, #helpView, #courseView, #classroomView, #certificatesView, #libraryView, #agendaView, #profileView, #pixView) .content-panel, body:has(.app-shell) :is(#purchasesView, #cartView, #favoritesView, #annotationsView, #studyPlanView, #helpView, #courseView, #classroomView, #certificatesView, #libraryView, #agendaView, #profileView, #pixView) :is(.purchase-card, .favorite-lesson-card, .annotation-card, .notice-card, .certificate-row, .library-group, .study-day-card, .material-card) { border: 1px solid var(--line) !important; border-radius: 15px !important; background: var(--warm-surface) !important; box-shadow: 0 7px 20px rgba(25, 52, 42, .045) !important; } body:has(.app-shell) #classroomView .video-frame { border-radius: 16px !important; box-shadow: 0 14px 32px rgba(14, 35, 27, .14); } body:has(.app-shell) #classroomView :is(.lesson-info, .lesson-list) { border: 1px solid var(--line) !important; border-radius: 15px !important; background: var(--warm-surface) !important; } body:has(.app-shell) #classroomView .lesson-button { min-height: 54px; border-radius: 10px !important; } body:has(.app-shell) #classroomView .lesson-button.active { border-color: var(--teal) !important; background: var(--teal-soft) !important; color: var(--teal-strong) !important; } body:has(.app-shell) :is(#profileView, #studyPlanView, #libraryView) :is(input, select, textarea) { width: 100%; } @media (max-width: 1000px) { body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-grid { grid-template-columns: minmax(0, 1fr); } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-summary-primary { grid-template-columns: repeat(3, minmax(0, 1fr)); } body:has(.app-shell) .student-dashboard-layout { grid-template-columns: minmax(0, 1fr) !important; } body:has(.app-shell) .student-dashboard-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } } @media (max-width: 760px) { body:has(.app-shell) .main { padding: 18px 16px 32px !important; } body:has(.app-shell) .student-dashboard-utility { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; padding-top: 0 !important; } body:has(.app-shell) .student-dashboard-welcome { margin: 0 0 14px; } body:has(.app-shell) .student-dashboard-hero { min-height: 190px !important; } body:has(.app-shell) .student-dashboard-hero h2 { max-width: 16ch !important; } body:has(.app-shell) .student-dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body:has(.app-shell) .student-dashboard-rail { grid-template-columns: minmax(0, 1fr); } body:has(.app-shell) #studentDashboardView .course-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-summary-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-operation-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } body:has(#adminDashboardView:not(.hidden)) #adminContent .filter-row { grid-template-columns: minmax(0, 1fr); } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-tabs { top: 4px; } body:has(#adminDashboardView:not(.hidden)) #adminDashboardView .admin-tab { min-height: 40px !important; padding: 8px 11px !important; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-quick-actions button { min-height: 40px !important; } body.public-layout.auth-panel-open .sidebar { width: 100vw !important; max-width: 100vw !important; border-radius: 0 !important; padding: 24px 22px !important; } } @media (max-width: 420px) { body:has(.app-shell) .main { padding-right: 12px !important; padding-left: 12px !important; } body:has(.app-shell) .student-dashboard-metrics { gap: 8px !important; } body:has(.app-shell) .student-dashboard-metric { min-height: 84px !important; padding: 12px !important; } body:has(.app-shell) #lastCourseBox .continue-study-actions { align-items: stretch; flex-direction: column; } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-summary-grid { grid-template-columns: minmax(0, 1fr); } body:has(#adminDashboardView:not(.hidden)) #adminContent .admin-summary-primary { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { body:has(.app-shell) *, body:has(.app-shell) *::before, body:has(.app-shell) *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* Modernização pública EAD: escopo restrito à página de entrada e páginas SEO. */ body.public-layout { --public-ink: #17372d; --public-green: #07543d; --public-green-deep: #063b2d; --public-gold: #bd8424; --public-cream: #f8f3e8; --public-line: #e8dfcf; background: var(--public-cream) !important; color: var(--public-ink) !important; } body.public-layout .app-shell { min-height: 100vh; } body.public-layout .main { max-width: 1600px; padding: 0 clamp(18px, 5vw, 76px) 56px !important; } body.public-layout .public-topbar { align-items: center; background: rgba(250, 247, 239, .94) !important; border: 0 !important; border-bottom: 1px solid rgba(103, 83, 43, .13) !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; gap: clamp(18px, 3vw, 48px) !important; margin: 0 calc(-1 * clamp(18px, 5vw, 76px)) 0 !important; overflow: visible !important; padding: 12px clamp(18px, 5vw, 76px) !important; position: sticky !important; top: 0 !important; white-space: normal !important; width: auto !important; z-index: 100; backdrop-filter: blur(14px); } body.public-layout .public-brand { min-width: 190px; } body.public-layout .public-brand img { height: 54px; width: 54px; } body.public-layout .public-brand strong { color: var(--public-green-deep); font-family: Cinzel, Georgia, serif; font-size: .9rem; letter-spacing: .07em; } body.public-layout .public-brand small { color: #756746; font-size: .66rem; letter-spacing: .13em; } body.public-layout .platform-search { max-width: 520px; width: 100%; justify-self: center; } body.public-layout .platform-search input { background: rgba(255,255,255,.78) !important; border-color: var(--public-line) !important; border-radius: 999px !important; } body.public-layout .public-links { align-items: center; gap: clamp(4px, 1vw, 14px); justify-content: flex-end; } body.public-layout .public-links :is(a, button) { border-radius: 999px; color: #263b31; font-size: .78rem; font-weight: 700; padding: 10px 12px; text-decoration: none; } body.public-layout .public-links :is(a, button):hover { background: rgba(7,84,61,.08); color: var(--public-green); } body.public-layout .public-links .public-account { border: 1px solid var(--public-gold); color: var(--public-green); padding-inline: 20px; } body.public-layout .topbar { display: none !important; } body.public-layout #homeView { display: grid; gap: clamp(22px, 3vw, 38px); } body.public-layout #homeView > .home-hero { align-items: center !important; background: linear-gradient(90deg, rgba(6,39,29,.83) 0%, rgba(9,53,38,.64) 44%, rgba(20,48,34,.13) 100%), url("assets/banner-ead-casa-luz.png") center 44% / cover no-repeat !important; border: 1px solid rgba(189,132,36,.28) !important; border-radius: 26px !important; display: flex !important; justify-content: flex-start !important; margin: 24px 0 0 !important; min-height: clamp(360px, 41vw, 570px) !important; overflow: hidden; padding: clamp(30px, 6vw, 84px) !important; text-align: left !important; width: 100% !important; box-shadow: 0 22px 55px rgba(31,54,38,.16); } body.public-layout #homeView > .home-hero::before, body.public-layout #homeView > .home-hero::after, body.public-layout #homeView .home-hero-symbol { display: none !important; } body.public-layout #homeView .home-hero-copy { align-items: flex-start !important; display: flex; flex-direction: column; max-width: 640px !important; margin: 0 !important; } body.public-layout #homeView .home-hero .eyebrow { color: #f0ce88 !important; font-size: .9rem !important; font-weight: 700; letter-spacing: .16em !important; text-transform: uppercase; } body.public-layout #homeView .home-hero h2 { color: #fff9ed !important; font-family: Cinzel, Georgia, serif !important; font-size: clamp(2.35rem, 5vw, 4.7rem) !important; letter-spacing: -.025em !important; line-height: 1.07 !important; margin: 12px 0 18px !important; max-width: 13ch !important; text-align: left; } body.public-layout #homeView .home-hero .section-subtitle { color: rgba(255,250,239,.88) !important; font-size: clamp(1rem,1.4vw,1.16rem) !important; line-height: 1.65 !important; max-width: 48ch !important; text-align: left; } body.public-layout #homeView .home-social-proof { display: none !important; } body.public-layout #homeView .home-hero .hero-actions { justify-content: flex-start !important; margin-top: 26px !important; } body.public-layout #homeView .home-hero .primary-button { background: linear-gradient(135deg,#d39b34,#a86d13) !important; border: 1px solid rgba(255,255,255,.52) !important; border-radius: 999px !important; color: #fff !important; font-size: .96rem !important; font-weight: 800; min-height: 52px !important; padding: 14px 25px !important; } body.public-layout #homeView .home-hero .secondary-button { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.54) !important; border-radius: 999px !important; color: white !important; display: inline-flex !important; min-height: 52px; } body.public-layout #homeView .platform-features { background: rgba(255,253,247,.93) !important; border: 1px solid var(--public-line) !important; border-radius: 22px !important; box-shadow: 0 14px 35px rgba(57,45,24,.06) !important; margin: 0 !important; padding: clamp(22px,3vw,36px) !important; } body.public-layout #homeView .platform-features .home-card-heading h2 { color: var(--public-green-deep) !important; font-family: Cinzel,Georgia,serif !important; font-size: clamp(1.3rem,2vw,1.75rem) !important; } body.public-layout #homeView .platform-features .feature-grid { gap: 12px !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; } body.public-layout #homeView .platform-features .feature-grid article { background: #fff !important; border: 1px solid #eee7db !important; border-radius: 15px !important; min-height: 148px; padding: 18px !important; transition: transform .2s ease, box-shadow .2s ease; } body.public-layout #homeView .platform-features .feature-grid article:hover { box-shadow: 0 10px 25px rgba(36,65,47,.08); transform: translateY(-2px); } body.public-layout #homeView .platform-features .feature-grid span { align-items: center; background: #f5ecd8; border-radius: 50%; color: #9d6b15 !important; display: inline-flex; height: 34px; justify-content: center; width: 34px; } body.public-layout #homeView .platform-features .feature-grid strong { color: var(--public-green-deep) !important; display: block; margin: 12px 0 5px; } body.public-layout #homeView .platform-features .feature-grid p { color: #667067 !important; line-height: 1.55; margin: 0; } body.public-layout #homeView .home-showcase { margin: 0 !important; } body.public-layout #homeView .home-showcase :is(.home-card-heading h2, h2) { color: var(--public-green-deep); font-family: Cinzel,Georgia,serif; } body.public-layout #homeView :is(.course-card,.ebook-card) { background: #fffdf8; border: 1px solid var(--public-line); border-radius: 18px; box-shadow: 0 12px 30px rgba(37,52,39,.07); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; } body.public-layout #homeView :is(.course-card,.ebook-card):hover { box-shadow: 0 18px 36px rgba(37,52,39,.12); transform: translateY(-3px); } body.public-layout #homeView :is(.course-card img,.ebook-card img) { aspect-ratio: 16/9; object-fit: cover; } body.public-layout :is(#catalogView,#ebooksView) .course-grid { gap: 20px; grid-template-columns: repeat(auto-fill,minmax(min(100%,270px),1fr)); } body.public-layout :is(#catalogView,#ebooksView) .course-card { background: #fffdf8; border: 1px solid var(--public-line); border-radius: 18px; box-shadow: 0 10px 28px rgba(37,52,39,.06); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; } body.public-layout :is(#catalogView,#ebooksView) .course-card:hover { box-shadow: 0 16px 34px rgba(37,52,39,.12); transform: translateY(-3px); } body.public-layout :is(#catalogView,#ebooksView) .course-cover { aspect-ratio: 16/9; overflow: hidden; } body.public-layout :is(#catalogView,#ebooksView) .course-cover img { height: 100%; object-fit: cover; width: 100%; } body.public-layout #ebooksView .course-cover.ebook-cover { aspect-ratio: 3/4; background: #f2ecdf; } body.public-layout #ebooksView .course-cover.ebook-cover img { object-fit: contain; } body.public-layout :is(#catalogView,#ebooksView) .course-body { padding: 20px !important; } body.public-layout :is(#catalogView,#ebooksView) .card-actions { display: flex; flex-wrap: wrap; gap: 8px; } body.public-layout :is(#catalogView,#ebooksView) .card-actions :is(.primary-button,.secondary-button,.ghost-button) { border-radius: 999px !important; flex: 1 1 auto; min-height: 42px; } body.public-layout :is(#catalogView,#ebooksView) .section-heading { align-items: end; gap: 18px; } body.public-layout :is(#catalogView,#ebooksView) .section-heading h2 { color: var(--public-green-deep); font-family: Cinzel,Georgia,serif; font-size: clamp(1.8rem,3vw,2.8rem); } body.public-layout :is(#catalogView,#ebooksView) .section-heading input { border: 1px solid var(--public-line) !important; border-radius: 999px !important; max-width: 360px; } body.public-layout #homeView .tutor-profile { background: #fffdf8; border: 1px solid var(--public-line); border-radius: 22px; box-shadow: 0 14px 35px rgba(57,45,24,.06); } body.public-layout :is(.view:not(#homeView),#platformTourView) :is(h1,h2,h3) { color: var(--public-green-deep); font-family: Cinzel,Georgia,serif; } body.public-layout :is(.view:not(#homeView),#platformTourView) :is(input,select,textarea) { border-color: #ded6c8 !important; border-radius: 12px !important; min-height: 48px; } body.public-layout :is(.view:not(#homeView),#platformTourView) :is(.primary-button,.secondary-button) { border-radius: 999px !important; min-height: 46px; } body.public-layout.auth-panel-open .sidebar { background: #faf7ef !important; border: 1px solid var(--public-line); border-radius: 0 22px 22px 0 !important; box-shadow: 24px 0 65px rgba(12,38,27,.2) !important; max-width: min(420px,90vw) !important; padding: 32px 28px !important; } body.public-layout.auth-panel-open .sidebar-auth-panel { background: #fffdf8 !important; border: 1px solid var(--public-line) !important; border-radius: 20px !important; box-shadow: 0 15px 36px rgba(30,51,35,.08) !important; padding: 25px !important; } body.public-layout.auth-panel-open .sidebar-auth-panel h2 { color: var(--public-green-deep) !important; font-family: Cinzel,Georgia,serif !important; font-size: 1.65rem !important; } body.public-layout.auth-panel-open .sidebar-auth-panel :is(input,select) { border: 1px solid #ded6c8 !important; border-radius: 11px !important; min-height: 48px; } body.public-layout :focus-visible { outline: 3px solid #d5a13b !important; outline-offset: 3px; } .seo-shell { background: #f8f3e8; color: #17372d; } .seo-sidebar { background: rgba(250,247,239,.96); border-bottom-color: #e8dfcf; } .seo-sidebar-brand { gap: 10px; } .seo-sidebar-brand img { border: 0; border-radius: 50%; height: 48px; padding: 0; width: 48px; } .seo-sidebar-brand strong { color: #07543d; font-family: Cinzel,Georgia,serif; letter-spacing: .07em; } .seo-sidebar-nav a,.seo-sidebar-actions a { background: transparent; border-color: transparent; border-radius: 999px; color: #34443a; font-size: .83rem; padding: 11px 14px; } .seo-sidebar-nav a:hover,.seo-sidebar-nav a.active { background: #e9efe4 !important; color: #07543d !important; } .seo-sidebar .seo-sidebar-primary { background: #07543d !important; border-radius: 999px; color: #fff !important; } .seo-page { max-width: 1320px; padding: clamp(22px,4vw,58px); } .seo-hero,.seo-detail,.seo-section { background: #fffdf8; border-color: #e8dfcf; border-radius: 22px; box-shadow: 0 14px 38px rgba(40,51,37,.06); } .seo-hero h1,.seo-detail h1 { color: #073d2e; font-family: Cinzel,Georgia,serif; letter-spacing: -.02em; text-transform: none; } .seo-hero h1::after,.seo-detail h1::after,.seo-section h2::after { background: #bd8424; } .seo-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,260px),1fr)); } .seo-card { background: #fffdf8; border: 1px solid #e8dfcf; border-radius: 18px; box-shadow: 0 10px 28px rgba(40,51,37,.06); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; } .seo-card:hover { box-shadow: 0 16px 34px rgba(40,51,37,.12); transform: translateY(-3px); } .seo-card img { aspect-ratio: 16/9; object-fit: cover; } .seo-shell-ebooks .seo-card img { aspect-ratio: 3/4; background: #f2ecdf; object-fit: contain; } .seo-shell-ebooks .seo-detail-image { background: #f2ecdf; object-fit: contain; } .seo-card strong { color: #073d2e; } .seo-card em,.seo-button { color: #875d10; } @media (max-width: 900px) { body.public-layout .public-topbar { grid-template-columns: auto minmax(0,1fr) !important; } body.public-layout .platform-search { grid-column: 1 / -1; grid-row: 2; max-width: none; } body.public-layout .public-links { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; overflow-x: auto; } body.public-layout #homeView .platform-features .feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .seo-sidebar { grid-template-columns: auto minmax(0,1fr) auto; } .seo-sidebar-search { grid-column: 1 / -1; grid-row: 2; } .seo-sidebar-nav { display: flex; grid-column: 1 / -1; grid-row: 3; overflow-x: auto; } } @media (max-width: 600px) { body.public-layout .main { padding: 0 14px 34px !important; } body.public-layout .public-topbar { gap: 8px !important; margin-inline: -14px !important; padding: 10px 14px !important; } body.public-layout .public-brand { min-width: 0; } body.public-layout .public-brand img { height: 42px; width: 42px; } body.public-layout .platform-search { grid-column: 1 / -1; } body.public-layout .public-links :is(a,button) { font-size: .75rem; padding: 9px 11px; } body.public-layout #homeView > .home-hero { background-position: 61% center !important; border-radius: 18px !important; min-height: 430px !important; margin-top: 14px !important; padding: 28px 22px !important; } body.public-layout #homeView .home-hero h2 { font-size: clamp(2.1rem,10vw,3.1rem) !important; } body.public-layout #homeView .home-hero .hero-actions { align-items: stretch; flex-direction: column; width: 100%; } body.public-layout #homeView .home-hero .hero-actions a { justify-content: center; text-align: center; } body.public-layout #homeView .platform-features .feature-grid { grid-template-columns: minmax(0,1fr) !important; } body.public-layout #homeView .platform-features .feature-grid article { min-height: 0; } .seo-page { padding: 18px 14px; } .seo-sidebar { gap: 9px; grid-template-columns: minmax(0,1fr) auto; padding: 10px 14px; } .seo-sidebar-actions,.seo-sidebar-user { margin: 0; } .seo-sidebar-nav { gap: 4px; } } @media (prefers-reduced-motion: reduce) { body.public-layout *,body.public-layout *::before,body.public-layout *::after,.seo-shell *,.seo-shell *::before,.seo-shell *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } } /* Desktop composition: hero copy and the existing sign-in form share the hero. */ body.public-layout .app-shell { position: relative; } body.public-layout #homeView > .home-hero { min-height: clamp(410px, 39vw, 520px) !important; } body.public-layout #homeView .home-hero-copy { max-width: min(54%, 690px) !important; } body.public-layout #homeView .home-hero h2 { max-width: 12ch !important; } body.public-layout:not(.auth-panel-open):has(#homeView:not(.hidden)) #platformSidebar { background: #fffdf8 !important; border: 1px solid rgba(232,223,207,.95) !important; border-radius: 20px !important; box-shadow: 0 18px 48px rgba(13,37,27,.2) !important; display: block !important; height: auto !important; max-height: min(690px, calc(100vh - 132px)); min-height: 0 !important; overflow: auto; padding: 23px !important; position: absolute !important; right: max(5vw, calc((100vw - 1600px)/2 + 66px)); top: 112px; width: clamp(320px, 26vw, 390px) !important; z-index: 110; } body.public-layout:not(.auth-panel-open):has(#homeView:not(.hidden)) #platformSidebar > :is(.brand,.nav-list,.sidebar-close,#adminStudentPreviewAccess,#sidebarStatusCard) { display: none !important; } body.public-layout:not(.auth-panel-open):has(#homeView:not(.hidden)) #platformSidebar #authBox { display: grid !important; gap: 14px; } body.public-layout:not(.auth-panel-open):has(#homeView:not(.hidden)) #platformSidebar .auth-tabs { background: #f4efe4 !important; border: 1px solid #ece2d0 !important; border-radius: 12px !important; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; } body.public-layout:not(.auth-panel-open):has(#homeView:not(.hidden)) #platformSidebar .auth-tab { background: transparent; border: 0; border-radius: 9px; color: #526157; font-size: .84rem; min-height: 39px; } body.public-layout:not(.auth-panel-open):has(#homeView:not(.hidden)) #platformSidebar .auth-tab.active { background: #07543d !important; color: #fff !important; } body.public-layout:not(.auth-panel-open):has(#homeView:not(.hidden)) #platformSidebar .sidebar-auth-panel { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 1px !important; } body.public-layout:not(.auth-panel-open):has(#homeView:not(.hidden)) #platformSidebar .sidebar-auth-panel h2 { color: #073d2e !important; font-family: Cinzel, Georgia, serif !important; font-size: clamp(1.35rem,1.8vw,1.75rem) !important; margin: 4px 0 7px !important; } body.public-layout:not(.auth-panel-open):has(#homeView:not(.hidden)) #platformSidebar .sidebar-auth-panel .eyebrow { color: #a66f18 !important; } body.public-layout:not(.auth-panel-open):has(#homeView:not(.hidden)) #platformSidebar .sidebar-auth-panel .form { gap: 12px; } body.public-layout:not(.auth-panel-open):has(#homeView:not(.hidden)) #platformSidebar .sidebar-auth-panel label { color: #31463a; font-size: .82rem; font-weight: 700; gap: 6px; } body.public-layout:not(.auth-panel-open):has(#homeView:not(.hidden)) #platformSidebar .sidebar-auth-panel :is(input[type=email],input[type=password],input[type=text],input[type=tel]) { background: #fff !important; border: 1px solid #e5dccd !important; border-radius: 10px !important; min-height: 44px; padding: 10px 13px; } body.public-layout:not(.auth-panel-open):has(#homeView:not(.hidden)) #platformSidebar .sidebar-auth-panel .primary-button { background: #07543d !important; border: 0 !important; border-radius: 999px !important; color: #fff !important; min-height: 48px !important; } body.public-layout:not(.auth-panel-open):has(#homeView:not(.hidden)) #platformSidebar .sidebar-auth-panel .link-button { color: #07543d; font-weight: 700; } body.public-layout:not(.auth-panel-open):has(#homeView:not(.hidden)) #platformSidebar .sidebar-auth-panel .auth-help { color: #6c756d; font-size: .72rem; line-height: 1.5; } body.public-layout:not(.auth-panel-open):has(#homeView:not(.hidden)) #homeView > .home-hero .hero-actions { max-width: 54%; } body.public-layout:not(.auth-panel-open):has(#homeView:not(.hidden)) #homeView > .home-hero .hero-actions a { min-width: 170px; } @media (max-width: 1080px) { body.public-layout:not(.auth-panel-open):has(#homeView:not(.hidden)) #platformSidebar { display: none !important; } body.public-layout #homeView .home-hero-copy { max-width: 680px !important; } body.public-layout #homeView > .home-hero .hero-actions { max-width: none; } } @media (max-width: 600px) { body.public-layout #homeView > .home-hero { min-height: 390px !important; } } /* Match the supplied reference more closely while retaining the real EAD data and flows. */ body.public-layout #homeView > .home-hero { background: linear-gradient(90deg,rgba(250,246,235,.60) 0%,rgba(250,246,235,.43) 43%,rgba(250,246,235,.04) 74%),url("assets/banner-ead-referencia.jpg") 100% center / 110% 100% no-repeat !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 calc(-1 * clamp(18px,5vw,76px)) !important; min-height: clamp(520px,43vw,650px) !important; padding: 56px clamp(22px,7.5vw,116px) !important; } body.public-layout #homeView .home-hero-copy { max-width: min(54%,700px) !important; } body.public-layout #homeView .home-hero .eyebrow { color: #82601f !important; font-family: Montserrat,Arial,sans-serif !important; font-size: .78rem !important; letter-spacing: .1em !important; } body.public-layout #homeView .home-hero h2 { color: #073d2e !important; font-family: Cinzel,Georgia,serif !important; font-size: clamp(2.4rem,5.1vw,4.8rem) !important; letter-spacing: -.035em !important; line-height: 1.03 !important; max-width: 12ch !important; } body.public-layout #homeView .home-hero h2 .hero-title-highlight { color: #b98225; } body.public-layout #homeView .home-hero .section-subtitle { color: #4c5a52 !important; font-size: clamp(1rem,1.3vw,1.12rem) !important; max-width: 49ch !important; } body.public-layout #homeView .home-hero .hero-actions { margin-top: 23px !important; } body.public-layout #homeView .home-hero .primary-button { background: linear-gradient(135deg,#d5a342,#a77118) !important; border: 1px solid #e5bd68 !important; border-radius: 999px !important; color: #fff !important; min-height: 50px !important; } body.public-layout #homeView .home-hero .secondary-button { display: none !important; } body.public-layout .public-create-account { background: #07543d !important; border: 1px solid #07543d !important; border-radius: 999px !important; color: #fff !important; padding-inline: 17px !important; } body.public-layout .public-create-account:hover { background: #063b2d !important; color: #fff !important; } body.public-layout .public-links .public-account { border: 1px solid #bd8424 !important; border-radius: 999px !important; color: #8f651c !important; padding-inline: 18px !important; } body.public-layout .public-links .public-account span { display: none; } body.public-layout .home-benefits { align-items: stretch; background: rgba(255,253,247,.96); border: 1px solid #eee4d3; border-radius: 20px; box-shadow: 0 14px 36px rgba(45,53,35,.08); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: -52px 0 0; padding: 18px 16px; position: relative; z-index: 3; } body.public-layout .home-benefits article { align-items: center; display: flex; gap: 14px; padding: 8px clamp(10px,2vw,25px); } body.public-layout .home-benefits article + article { border-left: 1px solid #e8dfcf; } body.public-layout .home-benefits article > span { align-items: center; background: #f7efdf; border-radius: 50%; color: #a7731d; display: inline-flex; flex: 0 0 54px; font-family: Georgia,serif; font-size: 1.7rem; height: 54px; justify-content: center; } body.public-layout .home-benefits strong { color: #173c2d; display: block; font-size: .92rem; line-height: 1.35; } body.public-layout .home-benefits p { color: #647068; font-size: .81rem; line-height: 1.5; margin: 4px 0 0; } body.public-layout #homeView .home-showcase { margin-top: 0 !important; } body.public-layout #homeView .home-showcase .home-card-heading { align-items: end; gap: 18px; margin: 0 0 17px; } body.public-layout #homeView .home-showcase .home-card-heading .eyebrow { color: #a4711b; } body.public-layout #homeView .home-showcase .home-card-heading h2 { color: #073d2e; font-family: Cinzel,Georgia,serif; font-size: clamp(1.75rem,3vw,2.6rem); } body.public-layout #homeView .home-course-grid { gap: 18px; grid-template-columns: repeat(4,minmax(0,1fr)); } body.public-layout #homeView .home-course-grid .course-card { background: #fffdf8; border: 1px solid #eee4d3; border-radius: 16px; box-shadow: 0 9px 26px rgba(40,51,37,.07); } body.public-layout #homeView .home-course-grid .course-cover { aspect-ratio: 16/9; } body.public-layout #homeView .home-course-grid .course-cover img { height: 100%; object-fit: cover; width: 100%; } body.public-layout #homeView .home-course-grid .course-body { padding: 15px !important; } body.public-layout #homeView .home-course-grid .card-actions { display: flex; flex-wrap: wrap; gap: 7px; } body.public-layout #homeView .home-course-grid .card-actions :is(.primary-button,.secondary-button) { border-radius: 999px !important; font-size: .75rem !important; min-height: 38px !important; padding: 9px 12px !important; } body.public-layout #homeView .tutor-profile { border-radius: 18px; } body.public-layout #pai-daniel { scroll-margin-top: 90px; } body.public-layout #homeView .platform-features { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 10px 0 24px !important; } body.public-layout #homeView .platform-features .feature-grid article { background: #fffdf8 !important; } @media (max-width: 1080px) { body.public-layout #homeView > .home-hero { background-position: 78% center !important; margin-inline: -18px !important; min-height: 530px !important; padding: 46px 34px !important; } body.public-layout #homeView .home-hero-copy { max-width: 62% !important; } body.public-layout .home-benefits { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: -30px; } body.public-layout .home-benefits article:nth-child(3) { border-left: 0; } body.public-layout .home-benefits article:nth-child(n+3) { border-top: 1px solid #e8dfcf; } body.public-layout #homeView .home-course-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 600px) { body.public-layout #homeView > .home-hero { background-position: 72% center !important; margin-inline: -14px !important; min-height: 440px !important; padding: 34px 22px !important; } body.public-layout #homeView .home-hero-copy { max-width: 100% !important; } body.public-layout #homeView .home-hero h2 { font-size: clamp(2.1rem,10vw,3.3rem) !important; max-width: 10ch !important; } body.public-layout .home-benefits { grid-template-columns: minmax(0,1fr); margin-top: -20px; padding: 12px; } body.public-layout .home-benefits article { border-left: 0 !important; padding: 11px 8px; } body.public-layout .home-benefits article + article { border-top: 1px solid #e8dfcf; } body.public-layout #homeView .home-course-grid { grid-template-columns: minmax(0,1fr); } body.public-layout #homeView .home-showcase .home-card-heading { align-items: start; flex-direction: column; } } /* Shared EAD design tokens: public, learner, administrator and SEO pages. */ :root { --bg: #f8f3e8; --surface: #fffdf8; --surface-soft: #f2eee4; --ink: #243b30; --muted: #647168; --line: #e8dfcf; --brand: #07543d; --brand-strong: #063b2d; --gold: #bd8424; --blue: #07543d; --cream: #f8f3e8; --shadow: 0 10px 30px rgba(22,54,37,.07); --teal: #0b7460; --teal-strong: #07543d; --teal-soft: #e6f1e9; --sage: #eef3e8; --warm-surface: #fffdf8; --focus-ring: #b98225; --green: #07543d; --green-dark: #063b2d; --ui-blue: #07543d; --ui-blue-dark: #063b2d; --ui-bg: #f8f3e8; --ui-ink: #243b30; --ui-muted: #647168; --ui-line: #e8dfcf; } /* Shared shell and controls for signed-in learner and admin views. */ body:not(.public-layout):has(.app-shell) { background: var(--bg) !important; color: var(--ink) !important; font-family: Montserrat, "Segoe UI", Arial, sans-serif !important; } body:not(.public-layout):has(.app-shell) .app-shell, body:not(.public-layout):has(.app-shell) .main { background: var(--bg) !important; } body:not(.public-layout):has(.app-shell) .main { color: var(--ink) !important; } body:not(.public-layout):has(.app-shell) .topbar { border-color: var(--line) !important; } body:not(.public-layout):has(.app-shell) .topbar h1, body:not(.public-layout):has(.app-shell) :is(.view h2,.view h3,.view h4) { color: var(--brand-strong) !important; font-family: Montserrat,"Segoe UI",Arial,sans-serif !important; } body:not(.public-layout):has(.app-shell) :is(.primary-button,.secondary-button,.ghost-button,.link-button) { border-radius: 10px !important; } body:not(.public-layout):has(.app-shell) .primary-button { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; } body:not(.public-layout):has(.app-shell) .primary-button:hover { background: var(--brand-strong) !important; border-color: var(--brand-strong) !important; } body:not(.public-layout):has(.app-shell) :is(.secondary-button,.ghost-button) { background: var(--surface) !important; border-color: var(--line) !important; color: var(--brand) !important; } body:not(.public-layout):has(.app-shell) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { background: #fff !important; border: 1px solid #d9d2c4 !important; border-radius: 10px !important; color: var(--ink) !important; } body:not(.public-layout):has(.app-shell) :is(input,select,textarea):focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(7,84,61,.12) !important; } body:not(.public-layout):has(.app-shell) :is(.content-panel,.student-area-block,.student-dashboard-widget,.metric,.course-card,.material-card,.purchase-card,.favorite-lesson-card,.annotation-card,.certificate-row,.library-group,.study-day-card,.notice-card) { border-color: var(--line) !important; border-radius: 15px !important; background: var(--surface) !important; box-shadow: 0 8px 24px rgba(28,48,34,.055) !important; } body:not(.public-layout):has(.app-shell) .sidebar { background: linear-gradient(180deg,#073e30,#062f25) !important; border-right: 0 !important; } body:not(.public-layout):has(.app-shell) .sidebar .brand { color: #fff !important; } body:not(.public-layout):has(.app-shell) .sidebar .brand small { color: rgba(255,255,255,.68) !important; } body:not(.public-layout):has(.app-shell) .nav-item { border-radius: 10px !important; color: rgba(255,255,255,.78) !important; } body:not(.public-layout):has(.app-shell) .nav-item:hover { background: rgba(255,255,255,.09) !important; color: #fff !important; } body:not(.public-layout):has(.app-shell) .nav-item.active { background: rgba(226,190,112,.19) !important; color: #f2d28d !important; } body:not(.public-layout):has(.app-shell) :focus-visible { outline-color: #b98225 !important; } /* Learner pages: warm background, readable course surfaces and one shared accent. */ body:not(.public-layout):has(:is(#studentDashboardView,#courseView,#classroomView,#catalogView,#ebooksView,#purchasesView,#cartView,#favoritesView,#annotationsView,#studyPlanView,#certificatesView,#libraryView,#agendaView,#profileView,#helpView,#pixView):not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) { --student-navy: #063b2d; --student-blue: #07543d; --student-sky: #d3dfba; --student-ink: #243b30; --student-muted: #647168; --student-line: #e8dfcf; --student-surface: #fffdf8; background: var(--bg) !important; } body:not(.public-layout):has(:is(#studentDashboardView,#courseView,#classroomView,#catalogView,#ebooksView,#purchasesView,#cartView,#favoritesView,#annotationsView,#studyPlanView,#certificatesView,#libraryView,#agendaView,#profileView,#helpView,#pixView):not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) .app-shell, body:not(.public-layout):has(:is(#studentDashboardView,#courseView,#classroomView,#catalogView,#ebooksView,#purchasesView,#cartView,#favoritesView,#annotationsView,#studyPlanView,#certificatesView,#libraryView,#agendaView,#profileView,#helpView,#pixView):not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) .main { background: var(--bg) !important; } body:not(.public-layout):has(:is(#studentDashboardView,#courseView,#classroomView,#catalogView,#ebooksView,#purchasesView,#cartView,#favoritesView,#annotationsView,#studyPlanView,#certificatesView,#libraryView,#agendaView,#profileView,#helpView,#pixView):not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) #platformSidebar.sidebar { background: linear-gradient(180deg,#073e30,#062f25) !important; } body:not(.public-layout):has(:is(#studentDashboardView,#courseView,#classroomView,#catalogView,#ebooksView,#purchasesView,#cartView,#favoritesView,#annotationsView,#studyPlanView,#certificatesView,#libraryView,#agendaView,#profileView,#helpView,#pixView):not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) #platformSidebar .nav-item { color: rgba(255,255,255,.78) !important; } body:not(.public-layout):has(:is(#studentDashboardView,#courseView,#classroomView,#catalogView,#ebooksView,#purchasesView,#cartView,#favoritesView,#annotationsView,#studyPlanView,#certificatesView,#libraryView,#agendaView,#profileView,#helpView,#pixView):not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) #platformSidebar .nav-item.active, body:not(.public-layout):has(:is(#studentDashboardView,#courseView,#classroomView,#catalogView,#ebooksView,#purchasesView,#cartView,#favoritesView,#annotationsView,#studyPlanView,#certificatesView,#libraryView,#agendaView,#profileView,#helpView,#pixView):not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) #platformSidebar .nav-item:hover { background: rgba(226,190,112,.19) !important; color: #f2d28d !important; } body:not(.public-layout):has(:is(#studentDashboardView,#courseView,#classroomView,#catalogView,#ebooksView,#purchasesView,#cartView,#favoritesView,#annotationsView,#studyPlanView,#certificatesView,#libraryView,#agendaView,#profileView,#helpView,#pixView):not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) :is(.primary-button,.button-primary) { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; } body:not(.public-layout):has(:is(#studentDashboardView,#courseView,#classroomView,#catalogView,#ebooksView,#purchasesView,#cartView,#favoritesView,#annotationsView,#studyPlanView,#certificatesView,#libraryView,#agendaView,#profileView,#helpView,#pixView):not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) :is(.secondary-button,.ghost-button,.outline-button) { border-color: var(--line) !important; color: var(--brand-strong) !important; } body:not(.public-layout):has(:is(#studentDashboardView,#courseView,#classroomView,#catalogView,#ebooksView,#purchasesView,#cartView,#favoritesView,#annotationsView,#studyPlanView,#certificatesView,#libraryView,#agendaView,#profileView,#helpView,#pixView):not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) :is(input,select,textarea) { border-color: #d9d2c4 !important; } body:not(.public-layout):has(:is(#studentDashboardView,#courseView,#classroomView,#catalogView,#ebooksView,#purchasesView,#cartView,#favoritesView,#annotationsView,#studyPlanView,#certificatesView,#libraryView,#agendaView,#profileView,#helpView,#pixView):not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) .student-dashboard-text-link { color: var(--brand-strong) !important; } body:not(.public-layout):has(#studentDashboardView:not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) .student-dashboard-hero { background: linear-gradient(90deg,rgba(5,48,35,.93),rgba(5,59,42,.76) 55%,rgba(5,59,42,.2)),url("assets/banner-ead-referencia.jpg") center 48% / cover no-repeat !important; border: 1px solid rgba(189,132,36,.24) !important; border-radius: 18px !important; display: grid !important; } body:not(.public-layout):has(#studentDashboardView:not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) .student-dashboard-hero :is(h2,p) { color: #fff !important; } body:not(.public-layout):has(#studentDashboardView:not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) .student-dashboard-hero .eyebrow { color: #ecd39b !important; } body:not(.public-layout):has(#studentDashboardView:not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) #lastCourseBox .progress-bar { background: linear-gradient(90deg,#bd8424,#e0bb6e) !important; } body:not(.public-layout):has(#studentDashboardView:not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) .student-dashboard-metric-icon { background: #edf2e7 !important; color: var(--brand) !important; } body:not(.public-layout):has(#studentDashboardView:not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) .student-dashboard-widget { background: var(--surface) !important; } body:not(.public-layout):has(:is(#courseView,#catalogView,#ebooksView,#purchasesView,#cartView,#favoritesView,#annotationsView,#studyPlanView,#certificatesView,#libraryView,#agendaView,#profileView,#helpView,#pixView):not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) :is(.section-heading,.view-header) h2 { color: var(--brand-strong) !important; } body:not(.public-layout):has(#classroomView:not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) :is(.lesson-info,.lesson-list,.watching-panel,.classroom-course-head) { border-color: var(--line) !important; border-radius: 15px !important; background: var(--surface) !important; } body:not(.public-layout):has(#classroomView:not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) .lesson-button.active { background: var(--teal-soft) !important; border-color: var(--brand) !important; color: var(--brand-strong) !important; } body:not(.public-layout):has(#classroomView:not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) .classroom-progress .progress-bar { background: var(--brand) !important; } /* Administration: same institutional palette, denser operational layout. */ body:not(.public-layout):has(#adminDashboardView:not(.hidden)) { --admin-surface: #fffdf8; background: var(--bg) !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) .app-shell, body:not(.public-layout):has(#adminDashboardView:not(.hidden)) .main { background: var(--bg) !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #platformSidebar.sidebar { background: linear-gradient(180deg,#073e30,#062f25) !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #platformSidebar .nav-item { color: rgba(255,255,255,.78) !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #platformSidebar .nav-item.active, body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #platformSidebar .nav-item:hover { background: rgba(226,190,112,.19) !important; color: #f2d28d !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) .topbar { border-bottom: 1px solid var(--line) !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminDashboardView h2, body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent :is(h2,h3,h4) { color: var(--brand-strong) !important; font-family: Montserrat,"Segoe UI",Arial,sans-serif !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminDashboardView .admin-tabs { border-color: var(--line) !important; background: rgba(255,253,248,.96) !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminDashboardView .admin-tab { border-radius: 9px !important; color: var(--muted) !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminDashboardView .admin-tab:hover, body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminDashboardView .admin-tab.active { background: var(--teal-soft) !important; border-color: #d5e5d7 !important; color: var(--brand-strong) !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent :is(.content-panel,.admin-item,.admin-metric,.admin-log-row,.admin-learning-card,.admin-student-stats span) { background: var(--surface) !important; border-color: var(--line) !important; border-radius: 14px !important; box-shadow: 0 7px 22px rgba(28,48,34,.05) !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent .admin-metric { border-left-color: var(--gold) !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent .admin-quick-actions button { border-radius: 9px !important; min-height: 38px !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent .status-pill, body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent .purchase-status { background: var(--teal-soft) !important; color: var(--brand-strong) !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent table { background: var(--surface); border: 1px solid var(--line); border-collapse: separate; border-radius: 12px; border-spacing: 0; overflow: hidden; width: 100%; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent :is(th,td) { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent th { background: #f2eee4; color: var(--brand-strong); font-size: .76rem; font-weight: 700; } /* SEO-rendered public pages now use the same palette and component language. */ .seo-shell { background: var(--bg) !important; color: var(--ink) !important; } .seo-sidebar { background: rgba(255,253,248,.96) !important; border-color: var(--line) !important; } .seo-sidebar-brand strong,.seo-sidebar-nav a,.seo-sidebar-actions a { color: var(--brand-strong); } .seo-sidebar-nav a.active,.seo-sidebar .seo-sidebar-primary { background: var(--brand) !important; color: #fff !important; } .seo-page { color: var(--ink); } .seo-hero,.seo-detail,.seo-section,.seo-card,.seo-tutor-card { background: var(--surface) !important; border-color: var(--line) !important; border-radius: 16px !important; box-shadow: 0 8px 24px rgba(28,48,34,.055) !important; } .seo-hero h1,.seo-detail h1,.seo-section h2,.seo-card strong { color: var(--brand-strong) !important; font-family: Cinzel,Georgia,serif; } .seo-hero h1::after,.seo-detail h1::after,.seo-section h2::after { background: var(--gold) !important; } .seo-card em,.seo-button { color: var(--brand-strong); } @media (max-width: 900px) { body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent table { display: block; max-width: 100%; overflow-x: auto; } } @media (max-width: 760px) { body:not(.public-layout):has(.app-shell) .main { padding: 18px 16px 30px !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminDashboardView .admin-tabs { top: 4px; } } @media (prefers-reduced-motion: reduce) { body:not(.public-layout):has(.app-shell) *,body:not(.public-layout):has(.app-shell) *::before,body:not(.public-layout):has(.app-shell) *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* Final homepage and commerce corrections: keep hero copy clear of the login card. */ body.public-layout #homeView > .home-hero { background: linear-gradient(90deg,rgba(250,246,235,.72) 0%,rgba(250,246,235,.52) 39%,rgba(250,246,235,.08) 72%),url("assets/banner-ead-referencia.jpg") center / cover no-repeat !important; } body.public-layout:has(#homeView:not(.hidden)) .home-hero-copy { max-width: min(600px, calc(100% - 450px)) !important; position: relative; z-index: 1; } body.public-layout:has(#homeView:not(.hidden)) #platformSidebar { right: max(5vw, calc((100vw - 1600px)/2 + 66px)); width: clamp(320px, 26vw, 390px) !important; } body.public-layout #homeView .home-hero h2 { max-width: 11ch !important; } body.public-layout #homeView .home-hero .section-subtitle { max-width: 42ch !important; } /* One legible purchase hierarchy across SEO product pages and in-app cards. */ .seo-purchase-actions .seo-button:not(.seo-button-secondary) { background: var(--brand) !important; border: 1px solid var(--brand) !important; color: #fff !important; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; } .seo-purchase-actions .seo-button:not(.seo-button-secondary):hover { background: var(--brand-strong) !important; border-color: var(--brand-strong) !important; color: #fff !important; transform: translateY(-1px); } .seo-purchase-actions .seo-button.seo-button-secondary { background: var(--surface) !important; border: 1px solid var(--brand) !important; color: var(--brand-strong) !important; } .seo-purchase-actions .seo-button:focus-visible, body.public-layout :is(#homeView,#catalogView,#ebooksView,#pixView) .card-actions :is(.primary-button,.secondary-button):focus-visible { outline: 3px solid rgba(189,132,36,.55) !important; outline-offset: 3px; } body.public-layout :is(#homeView,#catalogView,#ebooksView,#pixView) .card-actions .primary-button { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; } body.public-layout :is(#homeView,#catalogView,#ebooksView,#pixView) .card-actions .secondary-button { background: var(--surface) !important; border-color: var(--brand) !important; color: var(--brand-strong) !important; } @media (max-width: 1080px) { body.public-layout:has(#homeView:not(.hidden)) .home-hero-copy { max-width: min(680px,100%) !important; } } @media (max-width: 600px) { body.public-layout #homeView > .home-hero { background-position: 68% center !important; } } /* Administrative controls: compact dimensions and a quieter action hierarchy. */ body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminDashboardView .admin-tabs { gap: 3px !important; padding: 4px !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminDashboardView .admin-tab { border-radius: 8px !important; font-size: .72rem !important; min-height: 31px !important; padding: 6px 9px !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent :is(.admin-quick-actions,.form-actions,.card-actions,.sales-modal-actions) button, body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent :is(.admin-quick-actions,.form-actions,.card-actions,.sales-modal-actions) a { border-radius: 8px !important; font-size: .76rem !important; font-weight: 650 !important; min-height: 34px !important; padding: 7px 11px !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent .admin-item :is(button,a), body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent table :is(button,a) { border-radius: 7px !important; font-size: .73rem !important; min-height: 30px !important; padding: 5px 9px !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent button:focus-visible, body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminDashboardView .admin-tab:focus-visible { outline: 3px solid rgba(189,132,36,.48) !important; outline-offset: 2px; } @media (max-width: 760px) { body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent :is(.admin-quick-actions,.form-actions,.card-actions,.sales-modal-actions) button, body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent :is(.admin-quick-actions,.form-actions,.card-actions,.sales-modal-actions) a { min-height: 36px !important; } } /* Keep course titles and progress readable over dark course-cover photography. */ body:has(.app-shell) #courseView .course-overview-copy h2 { color: #fffdf6 !important; text-shadow: 0 2px 14px rgba(0,0,0,.38) !important; } body:has(.app-shell) #courseView .course-overview-copy > p { color: #a8e5ed !important; } body:has(.app-shell) #courseView .course-overview-progress .progress-bar { background: linear-gradient(90deg,#e5bd68,#f4d996) !important; } /* The home page shows account forms only after an explicit header action. */ body.public-layout:not(.auth-panel-open):not(.purchase-dialog-open):has(#homeView:not(.hidden)) #platformSidebar { display: none !important; } /* Unified compact scale for public pages, student area and administration. */ :root { --ui-control-height: 36px; --ui-card-gap: 14px; --ui-card-radius: 14px; } /* Public landing, catalog and e-book cards. */ body.public-layout #homeView > .home-hero { min-height: clamp(410px, 34vw, 500px) !important; padding: clamp(32px, 4vw, 64px) clamp(22px, 5vw, 76px) !important; } body.public-layout #homeView .home-hero h2 { font-size: clamp(2rem, 4.2vw, 3.8rem) !important; } body.public-layout #homeView .home-hero .hero-actions { margin-top: 18px !important; } body.public-layout #homeView .home-hero .primary-button { min-height: var(--ui-control-height) !important; padding: 9px 18px !important; } body.public-layout #homeView .platform-features { padding: 20px !important; } body.public-layout #homeView .platform-features .feature-grid article { min-height: 118px; padding: 14px !important; } body.public-layout #homeView .home-course-grid { gap: var(--ui-card-gap) !important; } body.public-layout :is(#catalogView,#ebooksView) .course-grid { gap: var(--ui-card-gap) !important; grid-template-columns: repeat(auto-fill,minmax(min(100%,235px),1fr)) !important; } body.public-layout :is(#catalogView,#ebooksView) .course-body { padding: 15px !important; } body.public-layout :is(#catalogView,#ebooksView) .card-actions { gap: 7px !important; } body.public-layout :is(#catalogView,#ebooksView) .card-actions :is(.primary-button,.secondary-button,.ghost-button) { flex: 0 1 auto; min-height: var(--ui-control-height) !important; padding: 8px 12px !important; } body.public-layout :is(#catalogView,#ebooksView) .section-heading h2 { font-size: clamp(1.55rem,2.5vw,2.25rem) !important; } /* SEO course and e-book pages. */ .seo-page { max-width: 1180px !important; padding: clamp(18px,3vw,36px) !important; } .seo-hero,.seo-detail,.seo-section { border-radius: var(--ui-card-radius) !important; } .seo-hero { padding: clamp(20px,2.5vw,30px) !important; } .seo-hero h1,.seo-detail h1 { font-size: clamp(1.8rem,3.2vw,3.1rem) !important; } .seo-grid { gap: var(--ui-card-gap) !important; } .seo-detail { gap: clamp(18px,2.4vw,28px) !important; grid-template-columns: minmax(220px,340px) minmax(0,1fr) !important; padding: clamp(18px,2.5vw,28px) !important; } .seo-card { padding: 16px !important; } .seo-purchase-actions .seo-button { min-height: var(--ui-control-height); padding: 8px 13px; } /* Student dashboard and study surfaces. */ body:not(.public-layout):has(#studentDashboardView:not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) .student-dashboard-hero { min-height: 174px !important; padding: 22px 26px !important; } body:not(.public-layout):has(#studentDashboardView:not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) .student-dashboard-hero h2 { font-size: clamp(1.45rem,2vw,1.85rem) !important; } body:not(.public-layout):has(#studentDashboardView:not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) .student-dashboard-metrics { gap: 10px !important; } body:not(.public-layout):has(#studentDashboardView:not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) .student-dashboard-metric { grid-template-columns: 42px minmax(0,1fr) !important; min-height: 76px !important; padding: 11px 13px !important; } body:not(.public-layout):has(#studentDashboardView:not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) :is(.student-dashboard-metric-icon,.student-dashboard-progress-icon) { height: 42px !important; width: 42px !important; font-size: 1.3rem !important; } body:not(.public-layout):has(#studentDashboardView:not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) #studentDashboardView :is(.course-grid,.student-dashboard-layout) { gap: var(--ui-card-gap) !important; } body:not(.public-layout):has(#studentDashboardView:not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) :is(.student-dashboard-widget,.student-area-block,.content-panel) { border-radius: var(--ui-card-radius) !important; } /* Administrative dashboard: compact summary tiles, tabs and controls. */ body:not(.public-layout):has(#adminDashboardView:not(.hidden)) .topbar h1 { font-size: clamp(1.45rem,2.2vw,1.8rem) !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent .admin-summary-grid { gap: 10px !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent .admin-metric { min-height: 82px !important; padding: 13px !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent .admin-metric > strong { font-size: clamp(1.2rem,1.7vw,1.55rem) !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent .admin-operation-strip { gap: 8px !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent .admin-operation-strip > span { padding: 10px 12px !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminDashboardView .admin-tabs { margin-bottom: 13px !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminDashboardView .admin-tab { min-height: 32px !important; padding: 6px 9px !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent :is(th,td) { padding: 8px 10px !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent :is(button,a):not(.admin-tab) { min-height: 34px; } @media (max-width: 760px) { body.public-layout #homeView > .home-hero { min-height: 390px !important; padding: 28px 20px !important; } body.public-layout :is(#catalogView,#ebooksView) .course-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,220px),1fr)) !important; } .seo-page { padding: 16px 14px !important; } .seo-detail { grid-template-columns: minmax(0,1fr) !important; gap: 15px !important; } .seo-detail .seo-cover { max-width: 320px; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent :is(button,a):not(.admin-tab) { min-height: 36px; } } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent button:not(.admin-tab) { border-radius: 8px !important; font-size: .78rem !important; min-height: 34px !important; padding: 7px 11px !important; } @media (max-width: 760px) { body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent :is(.admin-item,table) button:not(.admin-tab) { min-height: 36px !important; padding: 7px 10px !important; } } /* Keep the public navigation visible when students browse the in-app catalog. */ body.public-layout:has(#catalogView:not(.hidden)) #publicTopbar, body.public-layout:has(#ebooksView:not(.hidden)) #publicTopbar { display: grid !important; } body.public-layout:has(#catalogView:not(.hidden)) #publicTopbar .platform-search, body.public-layout:has(#ebooksView:not(.hidden)) #publicTopbar .platform-search { display: none !important; } body.public-layout:has(#catalogView:not(.hidden)) #publicTopbar, body.public-layout:has(#ebooksView:not(.hidden)) #publicTopbar { grid-template-columns: auto minmax(0,1fr) !important; } body.public-layout:has(#catalogView:not(.hidden)) #publicTopbar .public-links, body.public-layout:has(#ebooksView:not(.hidden)) #publicTopbar .public-links { grid-column: 2; grid-row: 1; } body.public-layout:has(#catalogView:not(.hidden)) #catalogView .section-heading, body.public-layout:has(#ebooksView:not(.hidden)) #ebooksView .section-heading { margin-top: 8px; } body.public-layout #homeView .home-showcase .home-card-heading > a.secondary-button { align-items: center; display: inline-flex; justify-content: center; } /* Feature-card hover text must stack above every neighboring grid card. */ body.public-layout #homeView .platform-features .feature-grid article { overflow: visible !important; position: relative !important; z-index: 0; } body.public-layout #homeView .platform-features .feature-grid article:hover, body.public-layout #homeView .platform-features .feature-grid article:focus-within { z-index: 40 !important; } body.public-layout #homeView .platform-features .feature-grid article > p { z-index: 41 !important; } /* Compact, role-aware controls: prioritize content and keep only key actions filled. */ body:not(.public-layout):has(.app-shell) :is(.primary-button,.secondary-button,.ghost-button,.outline-button,.button-primary), body:not(.public-layout):has(.app-shell) button[type="submit"] { min-height: 35px !important; padding: 7px 11px !important; font-size: .79rem !important; line-height: 1.25 !important; box-shadow: none !important; } /* Student dashboard cards: a compact action should not span the whole card. */ body:not(.public-layout):has(#studentDashboardView:not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) #studentDashboardView :is(#studentCourses,#studentEbooks,#dashboardLibraryWidget) .card-actions { display: flex !important; justify-content: flex-start !important; } body:not(.public-layout):has(#studentDashboardView:not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) #studentDashboardView :is(#studentCourses,#studentEbooks,#dashboardLibraryWidget) .compact-access-card .card-actions > .primary-button { align-self: flex-start !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; min-height: 33px !important; padding: 7px 12px !important; border-radius: 8px !important; } /* Admin dashboard shortcuts navigate between existing sections, so present them as quiet links. */ body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent .admin-quick-actions .secondary-button { min-height: 30px !important; padding: 5px 8px !important; border-color: transparent !important; border-radius: 7px !important; background: transparent !important; color: #426052 !important; font-size: .76rem !important; box-shadow: none !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent .admin-quick-actions .secondary-button:hover { border-color: transparent !important; background: #eef4ef !important; color: var(--teal-strong) !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent :is(.admin-item,table) :is(.secondary-button,.ghost-button) { border-color: transparent !important; background: transparent !important; color: var(--brand-strong) !important; box-shadow: none !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent :is(.form-actions,.card-actions,.sales-modal-actions) :is(.primary-button,.secondary-button,.ghost-button), body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent .status-actions button { min-height: 33px !important; padding: 6px 10px !important; font-size: .76rem !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent :is(.admin-item,table) :is(button,a):not(.admin-tab) { min-height: 30px !important; padding: 5px 8px !important; font-size: .73rem !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent :is(button,a):focus-visible { outline: 2px solid rgba(189,132,36,.58) !important; outline-offset: 2px; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent .content-panel { padding: 16px !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent .admin-item { gap: 8px !important; padding: 13px !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent :is(.admin-grid,.admin-summary-grid,.admin-operation-strip) { gap: 10px !important; } body:not(.public-layout):has(#studentDashboardView:not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) #studentDashboardView .compact-access-card .course-body { padding: 12px 13px !important; } @media (max-width: 760px) { body:not(.public-layout):has(.app-shell) :is(.primary-button,.secondary-button,.ghost-button,.outline-button,.button-primary), body:not(.public-layout):has(.app-shell) button[type="submit"] { min-height: 42px !important; } body:not(.public-layout):has(#studentDashboardView:not(.hidden)):not(:has(#adminDashboardView:not(.hidden))) #studentDashboardView :is(#studentCourses,#studentEbooks,#dashboardLibraryWidget) .compact-access-card .card-actions > .primary-button { min-height: 40px !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent :is(.admin-item,table,.admin-quick-actions) :is(button,a):not(.admin-tab) { min-height: 40px !important; padding-inline: 10px !important; } body:not(.public-layout):has(#adminDashboardView:not(.hidden)) #adminContent .content-panel { padding: 14px !important; } }