/* Droocy V20.9.65 — unified compact page identity across guest/student/teacher/admin */
:root{--droocy-hero-a:#2f246d;--droocy-hero-b:#6847e8;--droocy-ink:#172033;--droocy-muted:#596579;--droocy-surface:#fff;--droocy-line:#e1e6ef}
html,body{color:var(--droocy-ink)}
/* Compact the common page canvases without touching the sticky global header */
.wrap,.shell,.d11-shell,.page-shell,.container{margin-top:14px!important;margin-bottom:28px!important}
main.wrap,main.shell,main.d11-shell{padding-top:0!important}
section+section,.panel+.panel,.card+.card{margin-top:10px}
/* One visual page-head language. The important flags intentionally beat legacy inline page CSS. */
main .hero:not(.course-card):not(.dc-course-card),
main .d11-hero,
main .page-head,
main .page-hero,
main .dashboard-hero,
main .welcome-hero{
 background:linear-gradient(135deg,var(--droocy-hero-a) 0%,#4b35b4 55%,var(--droocy-hero-b) 100%)!important;
 color:#fff!important;border:0!important;border-radius:18px!important;
 padding:18px 22px!important;margin:0 0 12px!important;
 box-shadow:0 8px 22px rgba(70,51,167,.14)!important;
 min-height:0!important;height:auto!important;
}
main .hero:not(.course-card):not(.dc-course-card) h1,
main .hero:not(.course-card):not(.dc-course-card) h2,
main .hero:not(.course-card):not(.dc-course-card) h3,
main .hero:not(.course-card):not(.dc-course-card) p,
main .hero:not(.course-card):not(.dc-course-card) .muted,
main .hero:not(.course-card):not(.dc-course-card) small,
main .hero:not(.course-card):not(.dc-course-card) label,
main .hero:not(.course-card):not(.dc-course-card) strong,
main .d11-hero h1,main .d11-hero h2,main .d11-hero h3,main .d11-hero p,main .d11-hero .muted,main .d11-hero small,
main .page-head h1,main .page-head h2,main .page-head h3,main .page-head p,main .page-head .muted,main .page-head small,
main .page-hero h1,main .page-hero h2,main .page-hero p,main .page-hero .muted,
main .dashboard-hero h1,main .dashboard-hero h2,main .dashboard-hero p,main .dashboard-hero .muted,
main .welcome-hero h1,main .welcome-hero h2,main .welcome-hero p,main .welcome-hero .muted{color:#fff!important}
main .hero .muted,main .hero p,main .d11-hero p,main .d11-hero .muted,main .page-head p,main .page-head .muted{opacity:.88!important}
main .hero h1,main .d11-hero h1,main .page-head h1,main .page-head h2{margin-top:0!important;margin-bottom:4px!important;line-height:1.35!important}
/* Secondary actions inside the dark head remain clearly visible. */
main .hero .btn:not(.primary),main .hero a.btn:not(.primary),main .d11-hero .d11-btn:not(.primary),main .page-head .btn:not(.primary){background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.38)!important}
main .hero .btn.primary,main .d11-hero .d11-btn.primary,main .page-head .btn.primary{background:#fff!important;color:#5639d5!important;border-color:#fff!important}
/* Never wash out normal light cards/panels: dark readable copy is the default outside the page head. */
main .panel,main .card:not(.hero),main .stat,main .filters,main .tablewrap,main table,main form:not(.status){color:var(--droocy-ink)}
main .panel .muted,main .card:not(.hero) .muted,main .stat span,main td .muted{color:var(--droocy-muted)!important}
/* Reduce legacy empty vertical space. */
main .panel,main .card:not(.hero){margin-bottom:10px}
main .stats{margin-top:10px!important;margin-bottom:10px!important}
@media(max-width:760px){
 .wrap,.shell,.d11-shell,.page-shell,.container{margin-top:9px!important;margin-bottom:20px!important}
 main .hero:not(.course-card):not(.dc-course-card),main .d11-hero,main .page-head,main .page-hero,main .dashboard-hero,main .welcome-hero{padding:14px 15px!important;border-radius:14px!important;margin-bottom:9px!important;gap:10px!important}
 main .hero h1,main .d11-hero h1,main .page-head h1,main .page-head h2{font-size:clamp(20px,6vw,27px)!important}
}


/* V20.9.65 — complete visual normalization, presentation only */
:root{--droocy-page-bg:#f5f7fb;--droocy-card-border:#d8dfeb;--droocy-strong:#101828;--droocy-body:#263348;--droocy-soft:#667085}
body{background:var(--droocy-page-bg)!important;color:var(--droocy-body)!important;font-size:14px!important}
/* Page title blocks: support the legacy names actually used across Admin/Teacher/Student pages. */
main .head,main .topbar,main .titlebar,main .page-title,main .section-hero,
main>header:first-child:not(.course-header):not(.site-header){
 background:linear-gradient(135deg,var(--droocy-hero-a) 0%,#4b35b4 55%,var(--droocy-hero-b) 100%)!important;
 color:#fff!important;border:0!important;border-radius:18px!important;padding:18px 22px!important;margin:0 0 12px!important;
 box-shadow:0 8px 22px rgba(70,51,167,.14)!important;min-height:0!important;height:auto!important;
}
main .head h1,main .head h2,main .head h3,main .head p,main .head small,main .head .muted,
main .topbar h1,main .topbar h2,main .topbar p,main .titlebar h1,main .titlebar h2,main .titlebar p,
main .page-title h1,main .page-title h2,main .page-title p,main .section-hero h1,main .section-hero h2,main .section-hero p,
main>header:first-child:not(.course-header):not(.site-header) h1,main>header:first-child:not(.course-header):not(.site-header) h2,main>header:first-child:not(.course-header):not(.site-header) p{color:#fff!important}
main .head h1,main .head h2,main .topbar h1,main .titlebar h1,main .page-title h1,main .section-hero h1{font-size:clamp(25px,2.3vw,38px)!important;font-weight:900!important;line-height:1.25!important;margin:0 0 5px!important}
main .head p,main .topbar p,main .titlebar p,main .page-title p,main .section-hero p{font-size:13px!important;line-height:1.7!important;opacity:.92!important;margin:0!important}
/* Readability on all light surfaces. */
main :where(.panel,.card,.stat,.stats>*,.filters,.tablewrap,.box,.widget,.form-card,.content-card,.section-card){background-color:#fff;color:var(--droocy-body)}
main :where(.panel,.card,.stat,.stats>*,.filters,.tablewrap,.box,.widget,.form-card,.content-card,.section-card){border-color:var(--droocy-card-border)!important}
main :where(.panel,.card,.stat,.filters,.tablewrap,.box,.widget,.form-card,.content-card,.section-card) :where(h1,h2,h3,h4,strong,label){color:var(--droocy-strong)}
main :where(p,small,.muted,.hint,.help,.description){color:var(--droocy-soft)}
main :where(input,select,textarea){color:var(--droocy-strong)!important;background:#fff!important;border-color:#cfd7e4!important;font-size:13px!important}
main :where(input,textarea)::placeholder{color:#8792a5!important;opacity:1}
/* Tables: centered, larger, compact and visually separated. */
main .tablewrap{overflow:auto!important}
main table{width:100%;border-collapse:collapse!important;background:#fff!important}
main table :where(th,td){text-align:center!important;vertical-align:middle!important;padding:10px 9px!important;font-size:12px!important;line-height:1.55!important;color:var(--droocy-body)!important;border:1px solid #d9e0ea!important}
main table th{background:#eef2f7!important;color:#172033!important;font-weight:900!important;white-space:nowrap}
main table td strong{color:#101828!important;font-size:12.5px!important}
main table td .muted,main table td small{color:#667085!important;font-size:11px!important}
/* Compact common whitespace while preserving forms/content. */
main{padding-top:10px!important;padding-bottom:18px!important}
main :where(.page,.wrap,.shell,.d11-shell,.page-shell,.container){margin-top:10px!important;margin-bottom:20px!important}
main :where(.panel,.card,.box,.widget,.form-card,.content-card,.section-card){padding-top:min(18px,2vw)!important;padding-bottom:min(18px,2vw)!important}
main :where(.stats,.grid,.cards){gap:10px!important}
main :where(.filters){padding:10px!important;margin-bottom:10px!important}
main :where(h1,h2,h3){letter-spacing:0!important}
/* Do not recolor course media/detail hero, public home hero, or buttons. */
main :where(.course-card,.dc-course-card,.course-hero,.course-header,.v20-hero,.v20-hero-media) :where(h1,h2,h3,p,span,strong,small){color:inherit}
@media(max-width:760px){body{font-size:13px!important}main{padding-top:7px!important}main .head,main .topbar,main .titlebar,main .page-title,main .section-hero{padding:14px 15px!important;border-radius:14px!important}main table :where(th,td){font-size:11px!important;padding:8px 7px!important}}

/* Droocy V20.9.66 — targeted readability pass from production screenshots */
:root{--droocy-readable-muted:#536176;--droocy-readable-faint:#667085}

/* Public home: force readable copy over the very light hero background/image. */
#home .v20-title-row h1{color:#151525!important;text-shadow:none!important;opacity:1!important}
#home .v20-hero-copy h2{color:#151525!important;text-shadow:none!important;opacity:1!important}
#home .v20-hero-copy h2 strong{color:#5d3fe0!important}
#home .v20-hero-copy>p{color:#465166!important;opacity:1!important;font-size:15px!important;font-weight:650!important}
#home .v20-hero-tools article{background:rgba(255,255,255,.96)!important;border-color:#d9d4f5!important}
#home .v20-hero-tools b{color:#172033!important;font-size:12px!important}
#home .v20-hero-tools small{color:#536176!important;font-size:11px!important;opacity:1!important}
#home .simple-filter-label{font-size:11px!important;color:#344054!important;font-weight:900!important}
#home .simple-filter-number{font-size:10.5px!important}
#home .simple-filter-summary{font-size:11px!important;color:#475467!important;font-weight:800!important}
#home .simple-filter-actions button{font-size:10.5px!important;font-weight:900!important}

/* LMS control center: its legacy pastel hero was too pale; use the same readable page identity. */
main .lms19-hero{background:linear-gradient(135deg,#342477 0%,#5038bd 55%,#6847e8 100%)!important;color:#fff!important;border:0!important;box-shadow:0 8px 22px rgba(70,51,167,.15)!important;padding:20px 24px!important}
main .lms19-hero h1{color:#fff!important;font-size:30px!important;margin:7px 0 4px!important}
main .lms19-hero p{color:#f0edff!important;font-size:12.5px!important;opacity:1!important}
main .lms19-eyebrow{background:rgba(255,255,255,.15)!important;color:#fff!important;border:1px solid rgba(255,255,255,.25)!important;font-size:10.5px!important}
main .lms19-stat small{color:#596579!important;font-size:11.5px!important;font-weight:700!important}
main .lms19-modules h3{font-size:14.5px!important;color:#172033!important}
main .lms19-modules p{color:#596579!important;font-size:11.5px!important;line-height:1.75!important;font-weight:600!important}
main .lms19-boxhead p{color:#596579!important;font-size:11.5px!important}
main .lms19-quick a,main .lms19-overview a{font-size:11.5px!important}

/* Admin users/courses: center table data and remove low-contrast 9px typography. */
main .table th,main .table td,
main .table-wrap table th,main .table-wrap table td{ text-align:center!important;vertical-align:middle!important }
main .table th,main .table-wrap table th{font-size:11.5px!important;color:#344054!important;font-weight:900!important;background:#eef2f7!important}
main .table td,main .table-wrap table td{font-size:11.5px!important;color:#344054!important;line-height:1.6!important}
main .table .name-cell strong{font-size:12.5px!important;color:#101828!important}
main .table .name-cell small{font-size:11px!important;color:#596579!important}
main .badge{font-size:10.5px!important}
main .stat span{font-size:11.5px!important;color:#596579!important;font-weight:700!important}
main .page-head p{font-size:12.5px!important;color:#fff!important;opacity:.94!important}
main .filters a{font-size:10.5px!important}

/* Course management filters and secondary labels. */
main .filter-panel label,main .filter-panel .label{font-size:11.5px!important;color:#344054!important;font-weight:900!important}
main .filter-panel input,main .filter-panel select{font-size:12.5px!important;color:#172033!important}
main .list-head span,main .grade-order-head p{font-size:11.5px!important;color:#596579!important;opacity:1!important}

/* Books/PDF protection: improve hierarchy and helper-text contrast. */
main .protection-head h2{color:#101828!important}
main .protection-head p,main .protection-field small,main .hint{color:#536176!important;opacity:1!important;font-size:11.5px!important;line-height:1.75!important}
main .protection-field label,main .f label{color:#172033!important;font-size:12.5px!important;font-weight:900!important}
main .protection-field input,main .protection-field select{font-size:12.5px!important}

/* AI Studio: labels and explanatory copy must remain readable at normal desktop zoom. */
main label,main .field-label,main .d11-label{color:#344054;font-weight:800}
main small,main .muted,main .hint,main .help,main .description{opacity:1}
main .d11-field label,main .d11-field small{font-size:11.5px!important;line-height:1.65!important}

/* Course details: keep its own hero, but strengthen sidebar and small instructional copy. */
main .hero-main h1{color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.08)}
main .hero-main p,main .hero-promo-empty{color:#f7f8ff!important;opacity:1!important}
main .teacher small,main .side-note{color:#536176!important;font-size:11.5px!important;opacity:1!important}
main .role-note{color:#4d35bd!important;font-size:11px!important;line-height:1.75!important;background:#f6f3ff!important}
main .chip{font-size:10.5px!important}
main .course-ann small{font-size:10.5px!important}

/* General minimum readability for helper text without enlarging primary UI excessively. */
main :where(.muted,.hint,.help,.description,small){line-height:1.65}

@media(max-width:760px){
 #home .v20-hero-copy>p{font-size:13px!important}
 #home .v20-hero-tools small{font-size:10.5px!important}
 main .lms19-hero h1{font-size:24px!important}
 main .table th,main .table td,main .table-wrap table th,main .table-wrap table td{font-size:11px!important;padding:8px 7px!important}
}

/* === V20.9.67 PAGE-BY-PAGE PRODUCTION READABILITY PASS === */
/* 1) Public home */
main .v20-home-hero .v20-hero-copy :where(h1,h2){color:#17172a!important;opacity:1!important;text-shadow:none!important}
main .v20-home-hero .v20-hero-copy :where(p,small){color:#465166!important;opacity:1!important}
main .v20-home-hero .v20-hero-copy h2 strong{color:#5d3fe0!important}
main .v20-home-hero .v20-hero-tools article{background:rgba(255,255,255,.97)!important}
main .v20-home-hero .v20-hero-tools :where(b,strong){color:#172033!important}
main .v20-home-hero .v20-hero-tools small{color:#536176!important;font-size:11.5px!important}

/* 2) Course view: preserve purple hero, but sidebar is a LIGHT card */
main .hero .side,main .hero aside,main .hero .teacher-card{color:#172033!important}
main .hero .side :where(h1,h2,h3,h4,strong,b,label),main .hero aside :where(h1,h2,h3,h4,strong,b,label){color:#172033!important}
main .hero .side :where(p,small,span,.muted,.side-note),main .hero aside :where(p,small,span,.muted,.side-note){color:#536176!important;opacity:1!important}
main .hero .side .role-note,main .hero aside .role-note{color:#4d35bd!important;background:#f3f0ff!important;border-color:#ded7ff!important}
main .hero .hero-main :where(h1,h2,h3,strong){color:#fff!important}
main .hero .hero-main :where(p,small,.hero-promo-empty){color:#f7f8ff!important;opacity:1!important}

/* 3) Admin dashboard */
main .hero .hero-stats :where(span,small){color:#fff!important;opacity:.94!important;font-size:11.5px!important}
main .admin-card :where(p,small){color:#536176!important;font-size:11.5px!important;line-height:1.75!important;opacity:1!important}
main .admin-card :where(h2,h3,strong){color:#172033!important}

/* 4) AI Studio */
main :where(.ai-shell,.studio-shell,.ai-studio,.project-form) label{color:#263348!important;font-size:11.5px!important;font-weight:900!important}
main :where(.ai-shell,.studio-shell,.ai-studio,.project-form) :where(p,small,.muted,.hint,.help){color:#536176!important;font-size:11px!important;opacity:1!important;line-height:1.7!important}
main :where(.ai-shell,.studio-shell,.ai-studio,.project-form) :where(input,select,textarea){color:#172033!important;font-size:12.5px!important}

/* 5) Users */
main .toolbar :where(label,span,small),main .filters :where(label,span,small){color:#475467!important;font-size:11px!important;opacity:1!important}
main table :where(th,td){text-align:center!important;vertical-align:middle!important}
main table td :where(a,strong){font-weight:800}

/* 6) Courses */
main .filter-panel :where(label,.label){color:#344054!important;font-size:11.5px!important;font-weight:900!important}
main .filter-panel :where(input,select){font-size:12.5px!important;color:#172033!important}
main .grade-order-head :where(p,small),main .course-card :where(.muted,small){color:#536176!important;font-size:11px!important;opacity:1!important}

/* 7) Books & PDF protection */
main .protection-card :where(p,small,.hint),main .protection-note{color:#4f5d73!important;font-size:11.5px!important;opacity:1!important;line-height:1.75!important}
main .protection-card label,main .card .f label{color:#172033!important;font-size:12px!important;font-weight:900!important}
main .protection-card :where(input,select),main .card .f :where(input,select,textarea){font-size:12.5px!important;color:#172033!important}

/* 8) Academic structure */
main .page-head .head-stats .stat-pill{background:#fff!important;color:#322976!important;border:1px solid rgba(255,255,255,.75)!important}
main .page-head .head-stats .stat-pill :where(span,strong,small){color:#322976!important;opacity:1!important;font-size:11px!important}
main .panel-head :where(p,small,.muted),main .editor :where(p,small,.muted,.hint){color:#536176!important;font-size:11px!important;opacity:1!important;line-height:1.7!important}
main .field label{color:#263348!important;font-size:11.5px!important;font-weight:900!important}
main .field :where(input,select,textarea){font-size:12.5px!important;color:#172033!important}

/* 9) Online users */
main .head .back{background:#fff!important;color:#322976!important;border:1px solid #e1dcff!important;font-weight:900!important}
main .head :where(h1,h2,h3,p,small){color:#fff!important;opacity:1!important}
main .setting :where(p,small,.muted),main .user :where(p,small,.muted){color:#536176!important;font-size:11.5px!important;opacity:1!important}
main .user-name-link{font-size:12.5px!important;font-weight:900!important}

/* Shared minimums for these management screens */
main :where(.page,.shell,.wrap) :where(label){line-height:1.55!important}
main :where(.page,.shell,.wrap) :where(small,.hint,.muted,.help,.description){opacity:1!important}
@media(max-width:760px){main .v20-home-hero .v20-hero-copy :where(p,small){font-size:11.5px!important}main .page-head .head-stats{gap:6px!important}}