:root{--green:#008f46;--green2:#00a85a;--green-dark:#056737;--lime:#c8df1c;--orange:#d25a0e;--ink:#17242e;--muted:#708077;--line:#dfe9e3;--bg:#f5f9f7;--soft:#eaf7f0;--danger:#ca3636;--shadow:0 16px 44px rgba(14,56,38,.09);--radius:18px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);font-size:14px}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.ico{vertical-align:-3px}.brand{display:flex;align-items:center;min-width:160px}.brand img{height:54px;width:auto;object-fit:contain}.topbar,.app-topbar,.admin-topbar{height:74px;background:#fff;border-bottom:1px solid #edf1ef;display:flex;align-items:center;padding:0 34px;gap:28px;position:sticky;top:0;z-index:50}.topbar.public{justify-content:space-between}.mainnav,.compact-nav{display:flex;gap:28px;align-items:center;font-weight:700;color:#395047}.mainnav a:hover,.compact-nav a:hover{color:var(--green)}.public-search{margin-left:auto;width:min(280px,24vw);display:flex;align-items:center;gap:8px;background:#f5f8f6;border-radius:11px;padding:9px 12px}.public-search input{border:0;background:transparent;outline:0;width:100%}.top-actions{display:flex;gap:12px;align-items:center}.btn{border:0;border-radius:12px;padding:11px 17px;font-weight:800;display:inline-flex;align-items:center;gap:8px;justify-content:center;transition:.2s}.btn:hover{transform:translateY(-1px)}.btn-green{background:var(--green);color:#fff;box-shadow:0 8px 18px rgba(0,143,70,.17)}.btn-outline{background:#fff;border:1px solid #b8c9c0}.btn-soft{background:var(--soft);color:var(--green-dark)}.btn-danger{background:#fff1f1;color:var(--danger);border:1px solid #f2cccc}.btn-lime{background:var(--lime);color:#1d3f2d}.btn-sm{padding:8px 11px;border-radius:9px;font-size:12px}.hero-wrap{padding:24px 40px 0}.hero{max-width:1320px;margin:auto;min-height:365px;border-radius:24px;background:linear-gradient(115deg,#006b37,#00964b 58%,#00a85a);color:#fff;overflow:hidden;position:relative;padding:54px 58px;display:flex;align-items:center;box-shadow:var(--shadow)}.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;background:rgba(200,223,28,.95)}.hero:before{width:190px;height:190px;right:90px;top:-55px}.hero:after{width:110px;height:110px;right:360px;bottom:-25px;opacity:.25}.hero-copy{max-width:640px;position:relative;z-index:2}.eyebrow{display:flex;align-items:center;gap:9px;font-weight:800;font-size:13px}.eyebrow:before{content:"";width:34px;height:5px;border-radius:4px;background:var(--lime)}.hero h1{font-size:50px;line-height:1.02;margin:16px 0 8px;letter-spacing:-1.8px}.hero h2{color:var(--lime);font-size:22px;margin:0 0 7px}.hero p{font-size:17px;color:#e6fff0;max-width:570px}.hero-badge{position:absolute;right:52px;bottom:38px;width:260px;height:200px;border-radius:24px;background:rgba(255,255,255,.12);backdrop-filter:blur(7px);border:1px solid rgba(255,255,255,.16);padding:30px;font-size:22px;font-weight:900;line-height:1.1}.hero-badge span{display:block;width:44px;height:6px;border-radius:4px;background:var(--lime);margin-top:20px}.section{max-width:1320px;margin:30px auto;padding:0 40px}.section-title{display:flex;justify-content:space-between;align-items:end;margin:0 0 15px}.section-title h2{margin:0;font-size:24px}.section-title p{margin:5px 0 0;color:var(--muted)}.course-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.course-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 8px 22px rgba(9,53,35,.05);transition:.2s;position:relative}.course-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.course-cover{aspect-ratio:16/8.7;background:#dfeee6;overflow:hidden;position:relative}.course-cover img{width:100%;height:100%;object-fit:cover;display:block}.status-chip{position:absolute;top:10px;left:10px;background:#fff;color:#294d3c;border-radius:8px;padding:6px 9px;font-size:11px;font-weight:900;box-shadow:0 4px 12px rgba(0,0,0,.12)}.status-chip.done{background:var(--green);color:#fff}.status-chip.draft{background:#fff2d3;color:#8d6200}.course-body{padding:16px}.course-body h3{margin:0 0 6px;font-size:17px}.course-body p{color:var(--muted);min-height:38px;margin:0 0 14px;line-height:1.45}.meta-row{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #edf1ef;padding-top:12px;color:#54675f;font-size:12px}.progress-line{height:7px;background:#e9f0ec;border-radius:20px;overflow:hidden;margin-top:12px}.progress-line span{display:block;height:100%;background:var(--green);border-radius:20px}.site-footer{max-width:1320px;margin:60px auto 0;padding:22px 40px 38px;color:#557067;display:flex;justify-content:space-between;border-top:1px solid var(--line);font-size:12px;text-transform:uppercase;letter-spacing:.04em}.site-footer div{display:flex;gap:20px;flex-wrap:wrap}.site-footer b{color:var(--green)}.login-page{min-height:100vh;background:radial-gradient(circle at 15% 15%,#dff7e9,transparent 28%),linear-gradient(135deg,#f8fbf9,#eef8f2);display:grid;place-items:center;padding:24px}.login-layout{width:min(1060px,100%);display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}.login-brand-panel{border-radius:28px;background:linear-gradient(145deg,#006f39,#00a85a);color:#fff;padding:52px;position:relative;overflow:hidden;min-height:600px}.login-brand-panel:after{content:"";position:absolute;width:290px;height:290px;border-radius:50%;right:-70px;bottom:-40px;background:var(--lime);opacity:.92}.login-brand-panel .white-logo{background:#fff;border-radius:18px;padding:10px 16px;display:inline-block}.login-brand-panel .white-logo img{height:62px}.login-brand-panel h1{font-size:46px;line-height:1.03;margin:90px 0 15px;max-width:480px}.login-brand-panel p{font-size:17px;line-height:1.6;max-width:450px;color:#e8fff1}.login-card{background:rgba(255,255,255,.92);border:1px solid #dfeae4;border-radius:28px;padding:54px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:center}.login-card .brand img{height:74px}.login-card h2{font-size:31px;margin:34px 0 8px}.login-card>p{color:var(--muted);margin:0 0 28px}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:15px}.field label{font-weight:800;color:#34483f;font-size:12px}.input,.select,.textarea{width:100%;border:1px solid #d5e1db;background:#fff;border-radius:11px;padding:12px 13px;color:var(--ink);outline:0}.textarea{min-height:112px;resize:vertical}.input:focus,.select:focus,.textarea:focus{border-color:#6bc792;box-shadow:0 0 0 3px rgba(0,143,70,.08)}.login-card .btn{width:100%;margin-top:8px;padding:14px}.login-help{text-align:center;margin-top:18px;color:#687a72;font-size:12px}.login-help a{color:var(--green);font-weight:800}.toast{padding:12px 15px;border-radius:11px;margin-bottom:14px;font-weight:700}.toast-success{background:#e7f8ee;color:#08723d}.toast-error{background:#fff0f0;color:#a92828}.toast-info{background:#eef5ff;color:#2d5d91}.app-topbar,.admin-topbar{position:sticky}.notif{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;position:relative}.notif i{position:absolute;right:4px;top:3px;width:8px;height:8px;background:#e33434;border:2px solid #fff;border-radius:50%}.profile-mini{display:flex;align-items:center;gap:9px}.profile-mini .avatar,.avatar-chip,.avatar{width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:900}.profile-mini span:last-child{display:flex;flex-direction:column}.profile-mini b{font-size:13px}.profile-mini small{color:var(--muted);font-size:11px}.student-shell{display:grid;grid-template-columns:220px minmax(0,1fr);max-width:1340px;margin:24px auto;gap:20px;padding:0 24px}.student-side,.admin-side{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;height:max-content;position:sticky;top:94px}.student-side a,.admin-side>a,.group-title{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:11px;color:#42564d;font-weight:700;margin:3px 0}.student-side a.active,.admin-side>a.active,.group-title.active{background:var(--soft);color:var(--green);box-shadow:inset 3px 0 var(--green)}.student-main,.admin-main{min-width:0}.panel{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 18px rgba(19,64,43,.04)}.panel-pad{padding:22px}.page-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:16px}.page-title h1{font-size:28px;margin:0}.page-title p{margin:5px 0 0;color:var(--muted)}.profile-card{display:flex;align-items:center;gap:18px;padding:22px}.profile-card .avatar{width:72px;height:72px;font-size:23px}.profile-card .grow{flex:1}.profile-card h3{margin:0 0 4px;font-size:20px}.profile-card p{margin:3px 0;color:var(--muted)}.dash-course-row{display:grid;grid-template-columns:100px 1fr auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid #edf1ef}.dash-course-row:last-child{border-bottom:0}.dash-course-row img{width:100px;height:62px;object-fit:cover;border-radius:10px}.dash-course-row h4{margin:0 0 5px}.dash-course-row small{color:var(--muted)}.course-page-wrap{max-width:1320px;margin:25px auto;padding:0 24px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px}.course-side{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;height:max-content;position:sticky;top:96px}.progress-ring{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;margin:15px auto;background:conic-gradient(var(--green) calc(var(--p)*1%),#e8f0ec 0);position:relative}.progress-ring:after{content:"";position:absolute;width:62px;height:62px;border-radius:50%;background:#fff}.progress-ring b{position:relative;z-index:1;color:var(--green)}.course-nav a{display:flex;gap:10px;align-items:center;padding:11px;border-radius:10px;font-weight:700;color:#496057}.course-nav a.active,.course-nav a:hover{background:var(--soft);color:var(--green)}.course-main .course-head{display:flex;justify-content:space-between;align-items:flex-start;padding:20px 22px}.course-main h1{margin:0;font-size:27px}.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:#e9f8ef;color:#08773d;font-size:11px;font-weight:900}.lesson-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;padding:0 22px 22px}.video-box{aspect-ratio:16/9;background:#0a3925;border-radius:14px;overflow:hidden;display:grid;place-items:center}.video-box video{width:100%;height:100%;object-fit:contain;background:#052719}.text-lesson{padding:26px;background:linear-gradient(180deg,#f8fffb,#fff);border:1px solid #dcebe3;border-radius:14px;min-height:320px}.text-lesson h2{color:var(--green);font-size:27px}.pdf-box{border:1px dashed #b8d2c3;background:#fbfefc;border-radius:14px;padding:34px;text-align:center;min-height:320px;display:grid;place-items:center}.pdf-box .pdf-icon{width:74px;height:74px;border-radius:20px;background:var(--soft);display:grid;place-items:center;color:var(--green);margin:auto}.module-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:10px}.module-title{padding:11px 12px;background:#f7faf8;font-weight:900;font-size:12px}.module-card a{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border-top:1px solid #eef2f0;font-size:12px}.module-card a.active{color:var(--green);background:var(--soft);font-weight:800}.lesson-actions{display:flex;justify-content:space-between;align-items:center;margin-top:15px;gap:10px}.admin-shell{display:grid;grid-template-columns:210px minmax(0,1fr);min-height:calc(100vh - 74px)}.admin-side{border-radius:0;border-left:0;border-bottom:0;top:74px;height:calc(100vh - 74px);overflow:auto;padding:12px 10px}.admin-main{padding:22px}.admin-search{margin-left:auto;width:min(330px,28vw);display:flex;align-items:center;gap:8px;background:#f5f8f6;border-radius:11px;padding:9px 12px}.admin-search input{border:0;background:transparent;outline:0;width:100%}.subnav{padding-left:38px;display:none}.side-group.open .subnav{display:block}.subnav a{display:block;padding:8px 0;color:#65786f;font-size:12px;font-weight:700}.subnav a:hover{color:var(--green)}.side-motto{margin-top:60px;background:linear-gradient(150deg,#00783c,#00a85a);border-radius:16px;padding:22px;color:#fff;display:flex;flex-direction:column;gap:14px;line-height:1.55}.side-motto span{width:35px;height:5px;border-radius:5px;background:var(--lime)}.logout-link{margin-top:10px}.icon-btn{width:38px;height:38px;border-radius:10px;border:0;background:#f5f8f6;color:#34483f;display:grid;place-items:center}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.stat{padding:18px}.stat .label{color:var(--muted);font-size:12px;font-weight:800}.stat .num{font-size:30px;font-weight:900;margin:8px 0 2px}.stat .trend{font-size:11px;color:var(--green);font-weight:700}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:13px 12px;border-bottom:1px solid #edf1ef;white-space:nowrap}.table th{font-size:11px;text-transform:uppercase;color:#7b8b84;letter-spacing:.04em;background:#fbfdfc}.table td{font-size:13px}.table-course{display:flex;align-items:center;gap:10px}.table-course img{width:70px;height:42px;object-fit:cover;border-radius:8px}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#9aaa9f;margin-right:5px}.dot.green{background:#08a853}.dot.orange{background:#e28a21}.actions{display:flex;gap:7px}.admin-grid{display:grid;grid-template-columns:1.15fr 1fr 300px;gap:14px}.card-section{background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px}.card-section h3{margin:0 0 3px;font-size:16px}.section-help{color:var(--muted);font-size:11px;margin-bottom:14px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.form-grid .full{grid-column:1/-1}.switch-row{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:10px}.switch{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:800}.switch input{appearance:none;width:39px;height:22px;background:#c8d3cd;border-radius:999px;position:relative;transition:.2s}.switch input:before{content:"";position:absolute;width:17px;height:17px;border-radius:50%;background:#fff;left:3px;top:2.5px;box-shadow:0 1px 4px #0003;transition:.2s}.switch input:checked{background:var(--green)}.switch input:checked:before{transform:translateX(16px)}.cover-upload{aspect-ratio:16/6.6;border-radius:12px;overflow:hidden;border:1px solid var(--line);position:relative;background:#eaf7f0}.cover-upload img{width:100%;height:100%;object-fit:cover}.upload-overlay{position:absolute;right:9px;top:9px;background:#fff;border-radius:8px;padding:7px 9px;font-size:11px;font-weight:800;box-shadow:0 4px 12px #0001}.upload-zone{margin-top:9px;border:1px dashed #bfd2c7;border-radius:10px;padding:14px;text-align:center;color:#62756b;font-size:12px;background:#fbfdfc}.preview-card .course-card{box-shadow:none}.builder-row{display:grid;grid-template-columns:1fr 1.45fr .95fr;gap:14px;margin-top:14px}.module-builder{max-height:520px;overflow:auto}.builder-module{border:1px solid var(--line);border-radius:11px;margin-bottom:8px;overflow:hidden}.builder-module-head{display:flex;align-items:center;gap:8px;background:#f6faf8;padding:10px}.builder-module-head input{border:0;background:transparent;font-weight:900;min-width:0;flex:1}.lesson-item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-top:1px solid #eef2ef;cursor:pointer;font-size:12px}.lesson-item.active{background:var(--soft);color:var(--green);font-weight:800}.lesson-item .grow{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mini-actions{display:flex;gap:4px}.mini-actions button{border:0;background:transparent;padding:3px;color:#6a7b73}.builder-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}.tab{padding:7px 10px;border-radius:8px;background:#f3f7f5;color:#53675e;border:0;font-weight:800;font-size:11px}.tab.active{background:var(--soft);color:var(--green)}.content-editor .media-drop{border:1px dashed #bfd2c7;border-radius:10px;min-height:112px;display:grid;place-items:center;text-align:center;padding:15px;background:#fbfdfc}.content-editor .media-drop strong{display:block;color:#34483f;margin-bottom:4px}.sticky-actions{position:sticky;bottom:0;background:rgba(245,249,247,.92);backdrop-filter:blur(10px);padding:13px 0 0;display:flex;justify-content:flex-end;gap:9px;z-index:15}.quiz-question{border:1px solid var(--line);border-radius:13px;padding:15px;margin-bottom:12px}.option-row{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center;margin-top:7px}.option-row input[type=radio]{width:18px;height:18px;accent-color:var(--green)}.certificate-sheet{background:#fff;max-width:1100px;margin:30px auto;padding:70px;border:12px solid var(--green);outline:4px solid var(--lime);outline-offset:-25px;min-height:720px;text-align:center;display:flex;flex-direction:column;justify-content:center;position:relative}.certificate-sheet img{height:90px;object-fit:contain;margin:auto auto 30px}.certificate-sheet h1{font-size:46px;color:var(--green);margin:0 0 25px}.certificate-sheet h2{font-size:34px;margin:15px 0}.certificate-sheet p{font-size:18px;line-height:1.6;color:#4d6258}.certificate-sign{display:flex;justify-content:space-around;margin-top:60px;gap:40px}.certificate-sign div{min-width:230px;border-top:1px solid #5c6b64;padding-top:8px;font-size:12px}.print-bar{max-width:1100px;margin:20px auto;display:flex;justify-content:flex-end}.empty{padding:36px;text-align:center;color:var(--muted)}.small-muted{font-size:11px;color:var(--muted)}.nowrap{white-space:nowrap}.mobile-only{display:none}@media(max-width:1100px){.course-grid{grid-template-columns:repeat(2,1fr)}.admin-grid{grid-template-columns:1fr 1fr}.admin-grid .preview-card{grid-column:1/-1}.builder-row{grid-template-columns:1fr 1fr}.builder-row>.card-section:last-child{grid-column:1/-1}.lesson-layout{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:820px){body{font-size:13px}.topbar,.app-topbar,.admin-topbar{padding:0 14px;height:65px}.brand img{height:47px}.mainnav,.compact-nav,.admin-search,.public-search{display:none}.hero-wrap{padding:14px}.hero{padding:35px 25px;min-height:390px}.hero h1{font-size:38px}.hero-badge{position:relative;right:auto;bottom:auto;margin-top:28px;width:100%;height:auto}.hero{display:block}.section{padding:0 14px}.course-grid{grid-template-columns:1fr}.site-footer{padding:22px 16px;flex-direction:column;gap:16px}.login-layout{grid-template-columns:1fr}.login-brand-panel{display:none}.login-card{padding:34px 24px}.student-shell,.course-page-wrap{grid-template-columns:1fr;padding:0 12px}.student-side,.course-side{position:static;display:flex;overflow:auto;gap:6px;padding:8px}.student-side a,.course-nav a{white-space:nowrap}.course-nav{display:flex;gap:5px;overflow:auto}.course-side .progress-ring,.course-side>h3,.course-side>p{display:none}.lesson-layout{padding:0 12px 15px}.course-main .course-head{padding:16px 14px}.admin-shell{grid-template-columns:1fr}.admin-side{position:fixed;left:-230px;top:65px;width:220px;height:calc(100vh - 65px);z-index:80;transition:.22s;border-right:1px solid var(--line);box-shadow:var(--shadow)}.admin-side.open{left:0}.admin-main{padding:14px}.stats-grid{grid-template-columns:1fr 1fr}.admin-grid,.builder-row,.form-grid,.form-grid.three{grid-template-columns:1fr}.admin-grid .preview-card,.builder-row>.card-section:last-child{grid-column:auto}.page-title{align-items:flex-start}.dash-course-row{grid-template-columns:76px 1fr}.dash-course-row img{width:76px}.dash-course-row>.actions{grid-column:1/-1}.mobile-only{display:block}.certificate-sheet{margin:10px;padding:40px 24px;min-height:650px}.certificate-sheet h1{font-size:34px}.certificate-sheet h2{font-size:27px}.certificate-sign{flex-direction:column;align-items:center}.public .top-actions .btn-green{display:none}}@media print{.print-bar,.topbar,.app-topbar,.admin-topbar,.student-side,.site-footer{display:none!important}body{background:#fff}.certificate-sheet{margin:0;box-shadow:none;max-width:none;min-height:100vh;page-break-inside:avoid}}

/* --- Premium refresh / particles / improved course sizing --- */
body{background:
  radial-gradient(circle at 0% 0%,rgba(200,223,28,.18),transparent 18%),
  radial-gradient(circle at 100% 0%,rgba(0,168,90,.12),transparent 18%),
  linear-gradient(180deg,#f7fbf8,#eff7f2 45%,#f7fbf8);}
.site-glow{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 15%,rgba(0,143,70,.07),transparent 25%),radial-gradient(circle at 85% 8%,rgba(200,223,28,.08),transparent 18%),radial-gradient(circle at 85% 85%,rgba(0,143,70,.05),transparent 22%);z-index:-2}
.site-particles{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
.site-particles .particle{position:absolute;color:#08723d;filter:drop-shadow(0 6px 14px rgba(0,143,70,.08));animation:floatParticle linear infinite;user-select:none}
@keyframes floatParticle{0%{transform:translate3d(0,0,0) rotate(0deg)}25%{transform:translate3d(18px,-24px,0) rotate(4deg)}50%{transform:translate3d(-14px,-48px,0) rotate(-6deg)}75%{transform:translate3d(22px,-14px,0) rotate(3deg)}100%{transform:translate3d(0,0,0) rotate(0deg)}}
.topbar,.app-topbar,.admin-topbar{background:rgba(255,255,255,.92);backdrop-filter:blur(18px);box-shadow:0 12px 28px rgba(14,56,38,.06)}
.mainnav a,.compact-nav a{padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.65);border:1px solid rgba(0,143,70,.08);box-shadow:0 8px 18px rgba(17,55,37,.05)}
.mainnav a:hover,.compact-nav a:hover{background:linear-gradient(135deg,#f3fff8,#e6f8ee);box-shadow:0 10px 20px rgba(0,143,70,.12)}
.public-search,.admin-search{background:rgba(245,248,246,.92);border:1px solid rgba(0,143,70,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.btn{border-radius:14px}
.btn-outline{border-color:#d7e6de;box-shadow:0 8px 18px rgba(17,55,37,.04)}
.btn-soft{background:linear-gradient(180deg,#effbf4,#def4e8);border:1px solid #d2eadc}
.student-side,.admin-side,.course-side{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,251,247,.98));box-shadow:0 16px 44px rgba(12,54,35,.08);border-color:#dbeae2}
.student-side a,.admin-side>a,.group-title{padding:14px 15px;border-radius:14px;font-size:14px;font-weight:800;transition:.2s;border:1px solid transparent}
.student-side a:hover,.admin-side>a:hover,.group-title:hover,.subnav a:hover,.course-nav a:hover{transform:translateX(2px);background:#f7fcf9;border-color:#d7e9de}
.student-side a.active,.admin-side>a.active,.group-title.active{background:linear-gradient(180deg,#eefbf4,#dff5e9);box-shadow:0 10px 24px rgba(0,143,70,.12), inset 3px 0 var(--green);border-color:#d4eadc}
.subnav{padding-left:18px;padding-top:4px}
.subnav a{display:block;padding:10px 14px;margin:4px 0;border-radius:12px;background:#fbfdfc;border:1px solid #edf4f0;font-size:13px;font-weight:800}
.icon-btn{background:linear-gradient(180deg,#f9fcfa,#ebf6ef);border:1px solid #d8e7df;box-shadow:0 8px 18px rgba(17,55,37,.05)}
.page-title h1{letter-spacing:-.03em}
.course-page-wrap{grid-template-columns:350px minmax(0,1fr);gap:24px;max-width:1420px;margin:24px auto;padding:0 24px}
.course-side-modules{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,251,247,.98));box-shadow:0 16px 44px rgba(12,54,35,.08);border:1px solid #dbeae2;border-radius:20px;padding:20px;position:sticky;top:94px;max-height:calc(100vh - 120px);overflow-y:auto}
.course-side-modules .back-link{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#5d756b;margin-bottom:10px;transition:color .15s}
.course-side-modules .back-link:hover{color:var(--green)}
.course-side-modules .course-title{font-size:21px;font-weight:800;color:#17242e;margin:0 0 14px;letter-spacing:-.3px}
.modules-headline{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid #edf3f0;margin-bottom:14px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#728a7f}
.module-group-card{border:1px solid #e2ece6;border-radius:14px;margin-bottom:12px;background:#fff;overflow:hidden;transition:border-color .2s;box-shadow:0 4px 14px rgba(12,54,35,.03)}
.module-group-card.module-open{border-color:#badcc9}
.module-group-head{padding:12px 14px;background:#f7faf8;border-bottom:1px solid #edf4f0}
.module-name{display:block;font-size:13.5px;font-weight:800;color:#21382e}
.module-count{font-size:11.5px;color:#728a7f;margin-top:2px;display:block}
.module-group-lessons{padding:6px 8px;display:flex;flex-direction:column;gap:4px}
.module-lesson-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#384e44;font-size:13px;font-weight:600;text-decoration:none;transition:all .15s;border:1px solid transparent}
.module-lesson-link:hover{background:#f4f9f6;color:var(--green)}
.module-lesson-link.active{background:#eef8f2;border-color:#c0e5ce;color:var(--green);font-weight:800}
.lesson-icon-wrap{color:#648174;display:flex;align-items:center}
.module-lesson-link.active .lesson-icon-wrap{color:var(--green)}
.lesson-text-wrap{flex:1;min-width:0;display:flex;flex-direction:column}
.lesson-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lesson-meta{font-size:11px;color:#8da49a;font-weight:500}
.lesson-status-badge{margin-left:auto;display:flex;align-items:center}
.lesson-status-badge .circle-todo{width:8px;height:8px;border-radius:50%;border:1.5px solid #bdcecb}

.lesson-layout-premium{padding:22px 22px 24px;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start}
.lesson-content-col{min-width:0}
.lesson-sidebar-right{display:flex;flex-direction:column;gap:16px}
.progress-card-side{background:#fff;border:1px solid #e1ebe5;border-radius:18px;padding:20px;box-shadow:0 6px 18px rgba(12,54,35,.04)}
.progress-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.progress-card-header h4{margin:0;font-size:15px;font-weight:800;color:#17242e}
.progress-status-chip{padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;background:#f0f4f2;color:#5d756b}
.progress-status-chip.chip-done{background:#eef8f2;color:var(--green)}
.progress-ring-block{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.progress-ring-block .progress-ring{margin:0;width:74px;height:74px;flex-shrink:0}
.progress-ring-block .progress-ring:after{width:56px;height:56px}
.progress-info-text strong{display:block;font-size:15px;color:#17242e;margin-bottom:3px}
.progress-info-text small{color:#6a8277;font-size:12px}
.progress-bar-track{height:8px;background:#eaf1ed;border-radius:99px;overflow:hidden}
.progress-bar-fill{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--green2));border-radius:99px;transition:width .3s ease}
.cert-unlocked-box{margin-top:16px;padding:14px;border-radius:12px;background:#f2faf5;border:1px solid #c9ebd6;display:flex;flex-direction:column;gap:10px}
.cert-icon{font-size:26px}
.cert-text strong{display:block;font-size:13.5px;color:#076b36}
.cert-text span{font-size:12px;color:#4a6d5c}
.btn-block{width:100%;justify-content:center}
.material-card-side{background:#fff;border:1px solid #e1ebe5;border-radius:18px;padding:18px;box-shadow:0 6px 18px rgba(12,54,35,.04)}
.material-card-side h4{margin:0 0 6px;font-size:14px;font-weight:800;color:#17242e;display:flex;align-items:center;gap:6px}
.material-item{margin-top:12px;padding-top:12px;border-top:1px solid #edf3ef}
.material-name{font-size:12px;font-weight:700;color:#3b5247;margin-bottom:8px;word-break:break-all}

.course-head{padding:26px 28px 20px;border-bottom:1px solid #e8f0eb;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,251,249,.94));border-radius:18px 18px 0 0}
.course-head h1{font-size:32px;letter-spacing:-.03em}
.lesson-copy-card{min-height:auto;padding:24px 24px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.lesson-copy-card h2,.lesson-copy-card h3{margin-top:0}
.resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.resource-card{background:linear-gradient(180deg,#fff,#f8fcfa);border:1px solid #ddebe4;border-radius:16px;padding:18px;box-shadow:0 10px 24px rgba(17,55,37,.05)}
.resource-card.resource-card-full{grid-column:1/-1}
.resource-card h4{margin:0 0 8px;font-size:17px;display:flex;align-items:center;gap:8px}
.resource-card p{margin:0 0 12px;color:#62756b;line-height:1.6;font-size:14px}
.resource-status{padding:10px 12px;border-radius:11px;background:#f6faf8;border:1px solid #e0ece5;font-size:13px;color:#3e544a;margin-bottom:12px;word-break:break-word}
.resource-link-list{display:grid;gap:9px}
.resource-link-list a{display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:12px;background:#f8fbf9;border:1px solid #e4eee8;font-weight:700;color:#2d5541}
.resource-link-list a:before{content:'↗';color:var(--green);font-weight:900}
.quiz-resource-card{display:flex;flex-direction:column;gap:10px}
.textarea-compact{min-height:110px}
.builder-row-wide{grid-template-columns:1fr 1.55fr .95fr}
.content-editor .field label,.card-section .field label{font-size:13px}
.lesson-item{font-size:13px;padding:11px 12px}
.lesson-item.active{box-shadow:inset 3px 0 var(--green)}
.module-title{font-size:13px;padding:12px 14px}
.module-card a{font-size:14px;padding:12px 14px}
.builder-module-head{padding:12px}
.builder-module-head input{font-size:14px}
.preview-card .course-body p{min-height:unset}
.pill{background:linear-gradient(180deg,#effbf4,#def5e8);border:1px solid #d4eadc;color:#0a7a42;box-shadow:0 8px 18px rgba(0,143,70,.08)}
.video-box{min-height:360px;border-radius:18px;box-shadow:0 18px 34px rgba(5,35,24,.18)}
.pdf-box,.text-lesson{border-radius:18px}
.meta-row{font-size:13px}
.small-muted{font-size:12px}
.site-footer{background:rgba(255,255,255,.55);backdrop-filter:blur(10px);border-radius:22px 22px 0 0;border:1px solid rgba(223,233,227,.9);border-bottom:0}
.toast{max-width:1320px;margin:14px auto 0;font-size:14px;box-shadow:0 12px 26px rgba(22,51,39,.08)}
@media(max-width:1100px){.builder-row-wide{grid-template-columns:1fr}.resource-grid{grid-template-columns:1fr}.course-page-wrap{grid-template-columns:1fr}}
@media(max-width:820px){.course-nav a{font-size:13px;padding:12px}.resource-card h4{font-size:16px}.course-head h1{font-size:24px}.lesson-layout-premium{padding:14px}.lesson-tabbar span{font-size:12px;padding:9px 12px}.video-box{min-height:240px}}

/* notifications */
.notif-wrap{position:relative}.notif{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:14px;border:1px solid #d8e7df;background:linear-gradient(180deg,#f9fcfa,#ebf6ef);box-shadow:0 8px 18px rgba(17,55,37,.05)}
.notif i{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--green);color:#fff;font-style:normal;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.notif-menu{position:absolute;right:0;top:52px;width:320px;background:rgba(255,255,255,.98);backdrop-filter:blur(18px);border:1px solid #dce9e2;border-radius:18px;box-shadow:0 20px 40px rgba(11,45,29,.12);padding:10px;display:none;z-index:120}
.notif-wrap.open .notif-menu{display:block}
.notif-menu-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 12px;border-bottom:1px solid #edf4f0;margin-bottom:8px}
.notif-menu-head strong{font-size:14px}.notif-menu-head span{font-size:12px;font-weight:800;color:var(--green);background:#eefbf4;border:1px solid #d8ece0;border-radius:999px;padding:4px 9px}
.notif-item{display:grid;gap:4px;padding:12px 10px;border-radius:14px;border:1px solid transparent}.notif-item:hover{background:#f7fcf9;border-color:#e4eee8}.notif-item strong{font-size:13px}.notif-item span{font-size:12px;color:#60756a;line-height:1.45}.notif-empty{padding:16px 12px;color:#6b7f75;font-size:13px}
@media(max-width:820px){.notif-menu{right:-34px;width:min(320px,calc(100vw - 28px))}}

/* layout adjustments requested */
.brand-wrap{display:flex;align-items:center;gap:12px;min-width:240px}.brand-illustration{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:14px;background:linear-gradient(180deg,#f5fbf7,#e6f3ea);border:1px solid #d7e9de;color:#2f5d47;font-weight:800}.brand-emoji{font-size:20px}.brand-illustration small{font-size:12px;letter-spacing:.02em}
.topbar.public,.app-topbar,.admin-topbar{justify-content:space-between}.mainnav.centered,.compact-nav.centered{flex:1;justify-content:center}.top-actions{min-width:220px;justify-content:flex-end}.hero-configurable{align-items:center;gap:30px}.hero-visual{margin-left:auto;width:min(420px,34vw);height:260px;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.12);backdrop-filter:blur(8px)}.hero-visual img{width:100%;height:100%;object-fit:cover}.course-card-actions{margin-top:14px;display:flex;gap:10px;align-items:center}.course-card .progress-line{margin-top:10px}.student-layout .top-left,.student-layout .top-right{display:flex;align-items:center;gap:12px;min-width:280px}.student-layout .top-right{justify-content:flex-end}.student-layout .compact-nav{justify-content:center;flex:1}.student-layout .brand-wrap{justify-content:flex-end}.profile-mini{background:rgba(255,255,255,.72);border:1px solid #d8e7df;border-radius:18px;padding:8px 12px;display:flex;align-items:center;gap:10px}.profile-mini .avatar,.avatar-chip{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--green);color:#fff;font-weight:800}.avatar-chip{width:42px;height:42px;text-decoration:none}
.editor-toolbar{display:flex;gap:6px;flex-wrap:wrap;padding:8px;border:1px solid #d8e7df;border-bottom:0;border-radius:14px 14px 0 0;background:#f5faf7}.editor-toolbar button{border:1px solid #d8e7df;background:#fff;border-radius:8px;padding:7px 10px;font-weight:800;min-width:40px}.editor-toolbar + .textarea{border-radius:0 0 14px 14px}
.modal-backdrop[hidden]{display:none!important}.modal-backdrop{position:fixed;inset:0;background:rgba(9,24,18,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:200}.modal-card{width:min(820px,96vw);max-height:90vh;overflow:auto;background:#fff;border-radius:22px;padding:22px;box-shadow:0 24px 54px rgba(8,29,20,.28)}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:8px}.modal-close{width:38px;height:38px;border-radius:999px;border:1px solid #d7e9de;background:#fff;font-size:22px;line-height:1}.modal-result-card{text-align:center;max-width:420px}.quiz-emoji{font-size:64px;margin:8px 0 12px}.certificate-sheet.has-cover{overflow:hidden}.certificate-cover-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.13;z-index:0}.certificate-sheet.has-cover > *:not(.certificate-cover-bg){position:relative;z-index:1}
@media(max-width:980px){.brand-illustration{display:none}.student-layout .top-left,.student-layout .top-right{min-width:auto}.hero-configurable{display:block}.hero-visual{width:100%;height:220px;margin-top:22px}.top-actions{min-width:auto}}
@media(max-width:820px){.student-layout{display:grid;grid-template-columns:1fr;gap:10px;height:auto;padding:12px 14px}.student-layout .compact-nav{order:2;overflow:auto}.student-layout .top-left{order:1}.student-layout .top-right{order:3;justify-content:flex-start}.topbar.public{display:grid;grid-template-columns:1fr;gap:10px;height:auto;padding:12px 14px}.mainnav.centered{justify-content:flex-start;overflow:auto}.top-actions{justify-content:flex-start}.brand-wrap{min-width:auto}.hero-wrap{padding-top:12px}}

/* ===== Inclusão visual refresh / menu fix / login reference ===== */
body{
  background:
    radial-gradient(circle at -2% 4%, rgba(91,181,247,.32) 0 8%, transparent 8.4%),
    radial-gradient(circle at 102% 8%, rgba(255,205,87,.24) 0 12%, transparent 12.4%),
    radial-gradient(circle at 92% 92%, rgba(60,196,125,.25) 0 14%, transparent 14.4%),
    radial-gradient(circle at 8% 88%, rgba(255,194,69,.13) 0 9%, transparent 9.5%),
    linear-gradient(135deg,#edf8ff 0%,#f7fcf7 43%,#fffaf0 100%);
  background-attachment:fixed;
}
.site-glow{background:
  radial-gradient(circle at 12% 14%,rgba(70,181,247,.10),transparent 26%),
  radial-gradient(circle at 88% 10%,rgba(255,198,73,.10),transparent 22%),
  radial-gradient(circle at 82% 84%,rgba(52,194,126,.10),transparent 24%)}

/* Fixed three-zone header: left brand, centered menu, right profile */
.topbar.public,.app-topbar.student-layout{
  display:grid!important;
  grid-template-columns:minmax(240px,1fr) auto minmax(240px,1fr);
  align-items:center;
  gap:20px;
  min-height:78px;
  height:78px;
  padding:0 30px;
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px);
}
.topbar.public .brand-wrap,.student-layout .brand-wrap{justify-self:start}
.topbar.public .mainnav,.student-layout .compact-nav{justify-self:center;margin:0!important}
.topbar.public .top-actions,.student-layout .top-actions{justify-self:end;min-width:0}
.mainnav.centered,.compact-nav.centered{display:flex!important;justify-content:center;gap:14px}
.mainnav.centered a,.compact-nav.centered a{min-width:104px;text-align:center;padding:10px 18px}
.brand-wrap{min-width:0;gap:10px}
.brand-wrap .brand{min-width:auto}
.brand-wrap .brand img{height:50px}
.brand-illustration{background:linear-gradient(180deg,#eefcf4,#e4f7ed);border:1px solid #d6eadf;box-shadow:0 8px 18px rgba(0,143,70,.06)}
.brand-emoji{display:grid;place-items:center;width:28px;height:28px;border-radius:10px;background:linear-gradient(135deg,#d6f4ff,#eee0ff);font-size:17px}

/* Keep course content strictly inside the viewport */
.course-main{min-width:0;overflow:hidden}
.lesson-layout,.lesson-layout-premium{grid-template-columns:minmax(0,1fr) minmax(260px,330px);min-width:0}
.lesson-layout>div,.lesson-layout-premium>div{min-width:0}
.video-box{width:100%!important;max-width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;aspect-ratio:16/9;overflow:hidden}
.video-box video{display:block;width:100%!important;max-width:100%!important;height:100%!important;object-fit:contain;background:#073621}

/* Login matching the approved inclusive reference */
.inclusive-login{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:34px;
  background:
    radial-gradient(circle at 0% 0%,#71c5ff 0 11%,transparent 11.2%),
    radial-gradient(circle at 94% 4%,rgba(255,211,113,.40) 0 15%,transparent 15.2%),
    radial-gradient(circle at 94% 92%,rgba(72,205,135,.48) 0 16%,transparent 16.2%),
    linear-gradient(135deg,#e8f7ff 0%,#fbfffb 50%,#fff8e7 100%);
}
.inclusive-login:before,.inclusive-login:after{content:"";position:fixed;pointer-events:none;z-index:0;border-radius:50%}
.inclusive-login:before{width:280px;height:280px;left:-160px;bottom:-80px;border:3px solid rgba(255,168,0,.65);background:transparent}
.inclusive-login:after{width:240px;height:240px;right:-120px;bottom:-40px;background:rgba(60,196,125,.30)}
.inclusive-login-shell{width:min(1210px,96vw);display:grid;grid-template-columns:1.08fr .92fr;gap:12px;position:relative;z-index:1}
.inclusive-visual,.inclusive-login-card{border-radius:28px;overflow:hidden;box-shadow:0 22px 55px rgba(28,67,49,.11);border:1px solid rgba(207,227,217,.95)}
.inclusive-visual{background:#fff;min-height:760px}
.inclusive-visual img{width:100%;height:100%;object-fit:cover;display:block}
.inclusive-login-card{background:rgba(255,255,255,.97);padding:46px 56px;display:flex;flex-direction:column;justify-content:center;min-height:760px}
.login-logo-row img{height:72px;width:auto;object-fit:contain}
.inclusive-login-card h1{font-size:36px;line-height:1.05;margin:34px 0 10px;letter-spacing:-1.4px;color:#17243b}
.login-subtitle{font-size:16px;line-height:1.45;color:#53677a;margin:0 0 26px}
.inclusive-form .field{gap:8px}.inclusive-form .field label{font-size:15px;color:#17243b}
.input-shell{display:flex;align-items:center;gap:12px;border:1px solid #d8e2ef;background:#f8fbff;border-radius:13px;padding:0 15px;box-shadow:inset 0 1px 0 #fff,0 7px 18px rgba(31,70,125,.05)}
.input-shell>span{font-size:18px;color:#405c86}.input-shell input{flex:1;border:0;background:transparent;outline:0;padding:15px 0;font-size:16px;color:#1c2a3a;min-width:0}
.password-toggle{border:0;background:transparent;color:#476184;font-size:18px;padding:4px}
.inclusive-enter{width:100%;min-height:56px;font-size:18px;justify-content:space-between;padding:0 24px;border-radius:14px;background:linear-gradient(90deg,#00a34f,#08aa5a);box-shadow:0 12px 28px rgba(0,160,79,.20)}
.continue-chip{align-self:center;margin:18px auto 0;background:#e8f8ef;color:#09884a;border-radius:13px;padding:10px 28px;font-weight:800}
.premium-help{text-align:center;line-height:1.7;margin-top:18px;color:#687889;font-size:13px}.premium-help b{color:#00914b}
.login-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:1px solid #e7edf2;margin-top:32px;padding-top:24px}
.login-benefits div{text-align:center;display:grid;gap:8px;color:#4e657d;font-size:12px}.login-benefits span{font-size:27px}.login-benefits b{font-weight:800;line-height:1.3}

/* General cards pick up the same soft inclusive palette */
.panel,.card-section,.course-card,.student-side,.course-side,.admin-side{background:rgba(255,255,255,.93);backdrop-filter:blur(8px);border-color:#dbeae2}
.panel,.card-section,.course-card{box-shadow:0 14px 32px rgba(24,67,48,.07)}
.hero{background:linear-gradient(120deg,#008d49,#17b46d 62%,#7fd6bd);box-shadow:0 18px 44px rgba(0,112,59,.17)}

@media(max-width:980px){
  .topbar.public,.app-topbar.student-layout{grid-template-columns:1fr auto;grid-template-areas:"brand profile" "menu menu";height:auto;min-height:78px;padding:10px 16px}
  .topbar.public .brand-wrap,.student-layout .brand-wrap{grid-area:brand}
  .topbar.public .mainnav,.student-layout .compact-nav{grid-area:menu;width:100%;justify-content:center;overflow:auto}
  .topbar.public .top-actions,.student-layout .top-actions{grid-area:profile}
  .lesson-layout,.lesson-layout-premium{grid-template-columns:1fr}
}
@media(max-width:760px){
  .inclusive-login{padding:14px}.inclusive-login-shell{grid-template-columns:1fr;width:100%}.inclusive-visual{display:none}.inclusive-login-card{min-height:auto;padding:28px 22px;border-radius:22px}.inclusive-login-card h1{font-size:30px}.login-benefits{grid-template-columns:1fr}.brand-illustration{display:none}.mainnav.centered a,.compact-nav.centered a{min-width:auto;white-space:nowrap}.topbar.public,.app-topbar.student-layout{padding:10px 12px}
}

/* ===== v6 hard overrides: exact login + strict top menu layout ===== */
.header-3zones{display:grid!important;grid-template-columns:minmax(240px,1fr) auto minmax(260px,1fr);grid-template-areas:"left center right";align-items:center;gap:18px}
.header-3zones .header-left{grid-area:left;justify-self:start;display:flex;align-items:center}
.header-3zones .header-center{grid-area:center;justify-self:center}
.header-3zones .header-right{grid-area:right;justify-self:end;display:flex;align-items:center;gap:12px}
.header-3zones .mainnav,.header-3zones .compact-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin:0}
.header-3zones .mainnav a,.header-3zones .compact-nav a{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:999px;border:1px solid #dbe8e0;background:rgba(255,255,255,.72);min-width:118px;font-weight:800;color:#42584c}
.header-3zones .mainnav a:hover,.header-3zones .compact-nav a:hover{color:var(--green);border-color:#c6dece;background:#f6fbf8}
.header-3zones .top-actions{min-width:0;justify-content:flex-end}
.header-3zones .profile-mini{min-width:168px}
.header-3zones .brand-wrap{display:flex;align-items:center;gap:10px;min-width:0}

/* Ensure lesson video never breaks layout */
.lesson-layout-premium,.lesson-layout{align-items:start}
.course-main .video-box{position:relative;aspect-ratio:16/9;border-radius:24px;max-width:min(100%,760px);margin:18px 0 0;background:#062f1f;box-shadow:0 20px 38px rgba(7,52,32,.18)}
.course-main .video-box video{width:100%!important;height:100%!important;object-fit:contain}
.lesson-tabbar{display:none!important}

/* ==========================================================================
   EXCLUSIVE EXACT LOGIN SCREEN (Matches reference mockup 100%)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

body.inclusive-login-page {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  background-color: #f7fafc;
  background-image: 
    radial-gradient(circle at 8% 10%, rgba(188, 231, 253, 0.75) 0%, transparent 34%),
    radial-gradient(circle at 92% 7%, rgba(254, 240, 215, 0.9) 0%, transparent 28%),
    radial-gradient(circle at 4% 52%, rgba(254, 228, 128, 0.45) 0%, transparent 24%),
    linear-gradient(135deg, #f2f9fd 0%, #fafffc 45%, #fcfbf6 100%);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #17242e;
  position: relative;
}

body.inclusive-login-page .site-glow,
body.inclusive-login-page .site-particles {
  display: none !important;
}

/* Master container */
.inclusive-login-viewport {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 30px;
  box-sizing: border-box;
}

/* Ambient Background SVG shapes */
.login-ambient-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.ambient-blob {
  position: absolute;
  pointer-events: none;
}

.top-left-blob {
  top: -40px;
  left: -50px;
  width: 480px;
  height: 420px;
}

.top-right-blob {
  top: -30px;
  right: -40px;
  width: 440px;
  height: 360px;
}

/* Bottom-right green and yellow organic wave */
.bottom-right-corner-art {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 320px;
  height: 270px;
  pointer-events: none;
}

.corner-waves-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.bottom-right-quote {
  position: absolute;
  bottom: 26px;
  right: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #ffffff;
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.12;
  transform: rotate(-3deg);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.script-heart-svg {
  margin-top: 4px;
  opacity: 0.95;
}

/* 1. Top-Left 4x5 Dots Grid */
.left-dots-grid {
  position: absolute;
  top: 40px;
  left: 45px;
  display: grid;
  grid-template-columns: repeat(4, 9px);
  grid-gap: 13px;
  z-index: 2;
  pointer-events: none;
}

.left-dots-grid span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #8ed5ea;
  opacity: 0.8;
}

/* 2. Left Vertical Keywords */
.left-vertical-keywords {
  position: absolute;
  left: 45px;
  top: 225px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  color: #72bfba;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.2px;
  z-index: 2;
  pointer-events: none;
  text-transform: uppercase;
}

.left-keyword-heart {
  width: 22px;
  height: 22px;
  margin-top: 4px;
  margin-left: 1px;
}

/* 3. Bottom-Left Signature Cursive */
.bottom-left-signature {
  position: absolute;
  left: 42px;
  bottom: 34px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  z-index: 2;
  pointer-events: none;
}

.sig-lines {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #175d69;
  line-height: 1.12;
  display: flex;
  flex-direction: column;
}

.sig-last-line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sig-inline-heart {
  margin-bottom: -2px;
}

.sig-hearts {
  transform: translateY(-4px);
}

/* 4. Right Vertical Values Column */
.right-vertical-values {
  position: absolute;
  right: 50px;
  top: 75px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  z-index: 2;
  pointer-events: none;
}

.value-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
  min-width: 90px;
}

.node-icon {
  width: 36px;
  height: 36px;
  display: block;
}

.node-title {
  font-size: 11px;
  font-weight: 800;
  color: #0e4f5e;
  letter-spacing: 0.6px;
  line-height: 1.25;
  text-transform: uppercase;
}

/* Dual Cards Shell */
.inclusive-login-shell {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 530px 490px;
  gap: 28px;
  align-items: stretch;
  max-width: 1050px;
  width: 100%;
}

/* LEFT CARD: Visual Illustration */
.inclusive-visual-card {
  background: #ffffff;
  border-radius: 32px;
  box-shadow: 0 20px 54px rgba(16, 56, 38, 0.09), 0 4px 16px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(220, 235, 226, 0.7);
  overflow: hidden;
  height: 100%;
  display: flex;
}

.inclusive-visual-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* RIGHT CARD: Form Card */
.inclusive-form-card {
  background: #ffffff;
  border-radius: 32px;
  box-shadow: 0 20px 54px rgba(16, 56, 38, 0.09), 0 4px 16px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(220, 235, 226, 0.7);
  position: relative;
  overflow: hidden;
  padding: 34px 44px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-sizing: border-box;
}

/* Top-Right Organic Corner Drop */
.card-corner-shape {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 165px;
  pointer-events: none;
  z-index: 1;
}

.corner-shape-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.corner-quote {
  position: absolute;
  top: 18px;
  right: 24px;
  text-align: center;
  color: #ffffff;
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.18;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.corner-quote svg {
  margin-top: 3px;
  opacity: 0.95;
}

/* Brand Logo Header */
.card-brand-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  margin-bottom: 2px;
}

.brand-logo-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.brand-img {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.brand-subtext {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: #0c3333;
  margin-top: 0;
}

/* Title & Subtitle */
.card-title-group {
  position: relative;
  z-index: 2;
  margin-top: 16px;
  margin-bottom: 16px;
}

.card-h1 {
  font-size: 31px;
  font-weight: 800;
  color: #0f1c2d;
  line-height: 1.1;
  margin: 0 0 7px;
  letter-spacing: -0.7px;
}

.card-subtitle {
  font-size: 14px;
  color: #64748b;
  line-height: 1.45;
  margin: 0;
  max-width: 360px;
}

/* Authentication Form */
.card-login-form {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.form-field-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e293b;
}

.field-input-box {
  background: #f1f5fa;
  border: 1.5px solid #dce4ee;
  border-radius: 12px;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 12px;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.field-input-box:focus-within {
  border-color: #008f4c;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 143, 76, 0.12);
}

.field-svg-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.field-input-box input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 15px;
  color: #25364a;
  font-weight: 500;
  padding: 0;
  min-width: 0;
}

.field-input-box input::placeholder {
  color: #64748b;
  opacity: 0.85;
}

.btn-toggle-eye {
  background: transparent;
  border: none;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
}

.btn-toggle-eye:hover {
  color: #1e293b;
}

/* Submit Button */
.btn-login-submit {
  background: #00874e;
  border-radius: 13px;
  height: 50px;
  border: none;
  cursor: pointer;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 4px;
  box-shadow: 0 8px 20px rgba(0, 135, 78, 0.22);
  transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.btn-login-submit:hover {
  background: #007845;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 135, 78, 0.28);
}

.btn-text {
  font-size: 16.5px;
  font-weight: 700;
  color: #ffffff;
}

.btn-arrow-icon {
  position: absolute;
  right: 22px;
}

/* Continue Pill */
.pill-continue {
  position: relative;
  z-index: 2;
  align-self: center;
  margin: 12px auto 0;
  background: #eef8f1;
  color: #1b8347;
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 22px;
  border-radius: 999px;
  width: fit-content;
}

/* Help text */
.help-info-block {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  color: #64748b;
  line-height: 1.45;
}

.help-info-block .inst-link {
  color: #00874e;
  font-weight: 700;
  text-decoration: underline;
}

.help-info-block .inst-link:hover {
  color: #006b3e;
}

/* 3 Bottom Pillars */
.card-pillars-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #edf2f7;
}

.pillar-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
  padding: 0 6px;
}

.pillar-box:not(:last-child) {
  border-right: 1px solid #edf2f7;
}

.pillar-icon {
  width: 25px;
  height: 25px;
}

.pillar-label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #1f4459;
  line-height: 1.25;
}

.pillar-label b {
  font-weight: 700;
}

.pillar-label span {
  font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 1340px) {
  .left-vertical-keywords,
  .left-dots-grid,
  .bottom-left-signature {
    display: none;
  }
  .right-vertical-values {
    display: none;
  }
}

@media (max-width: 1080px) {
  .inclusive-login-shell {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
  .inclusive-visual-card {
    min-height: 520px;
  }
}

@media (max-width: 768px) {
  .inclusive-login-viewport {
    padding: 16px;
  }
  .inclusive-visual-card {
    display: none;
  }
  .inclusive-form-card {
    padding: 28px 22px 22px;
    border-radius: 24px;
  }
  .card-h1 {
    font-size: 28px;
  }
  .bottom-right-corner-art {
    display: none;
  }
}

/* ==========================================================================
   NOVO BANNER PRINCIPAL (HERO INCLUSIVO) - LANDING PAGE INTELLECTUS
   ========================================================================== */

.hero-inclusive-banner {
  max-width: 1320px;
  margin: 0 auto;
  border-radius: 32px;
  background: linear-gradient(135deg, #005a30 0%, #007b3c 42%, #00964b 75%, #01a253 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
  padding: 46px 54px;
  display: grid;
  grid-template-columns: 1.14fr 0.86fr;
  align-items: center;
  gap: 40px;
  box-shadow: 0 24px 60px rgba(0, 78, 40, 0.22), 0 4px 16px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Formas decorativas no fundo */
.hero-shape-blob-top {
  position: absolute;
  top: -80px;
  right: -50px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 212, 48, 0.32) 0%, rgba(254, 212, 48, 0) 70%);
  pointer-events: none;
  z-index: 1;
}

.hero-shape-blob-bottom {
  position: absolute;
  bottom: -90px;
  left: 36%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  z-index: 1;
}

.hero-dots-decor {
  position: absolute;
  left: 34px;
  bottom: 24px;
  display: grid;
  grid-template-columns: repeat(4, 7px);
  gap: 11px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.32;
}

.hero-dots-decor span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #ffffff;
}

/* Coluna de Texto e Ações */
.hero-inclusive-copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 11.5px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.hero-badge-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fed430;
  box-shadow: 0 0 10px #fed430;
}

.hero-cursive-quote {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 27px;
  font-weight: 700;
  color: #fed430;
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transform: rotate(-1.5deg);
}

.hero-heart-svg {
  margin-top: 1px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.hero-main-title {
  font-size: 42px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.08;
  letter-spacing: -1.2px;
  margin: 0 0 8px;
  text-shadow: 0 2px 14px rgba(0, 48, 25, 0.22);
}

.hero-sub-title {
  font-size: 21px;
  font-weight: 700;
  color: #e5f98a;
  margin: 0 0 12px;
  letter-spacing: -0.3px;
  line-height: 1.25;
}

.hero-desc {
  font-size: 16px;
  line-height: 1.55;
  color: #ebfaef;
  margin: 0 0 24px;
  max-width: 530px;
  font-weight: 400;
}

/* 4 Pilares Inclusivos */
.hero-pillars-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 28px;
}

.hero-pillar-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.hero-pillar-pill:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.38);
}

.pillar-emoji {
  font-size: 15px;
}

/* CTA e Destaques */
.hero-actions-container {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.btn-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fed430;
  color: #0c3a20 !important;
  font-size: 15.5px;
  font-weight: 800;
  padding: 14px 28px;
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(254, 212, 48, 0.35);
  transition: all 0.2s ease;
}

.btn-hero-cta:hover {
  background: #ffdc4d;
  color: #072917 !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(254, 212, 48, 0.45);
}

.btn-hero-cta .btn-arrow {
  transition: transform 0.2s ease;
}

.btn-hero-cta:hover .btn-arrow {
  transform: translateX(4px);
}

.hero-highlights {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #e1f5e8;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Coluna Visual */
.hero-inclusive-visual {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-illustration-wrapper {
  position: relative;
  width: 100%;
  max-width: 530px;
}

.hero-illustration-frame {
  border-radius: 28px;
  overflow: hidden;
  background: #ffffff;
  border: 3px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 20px 48px rgba(0, 48, 25, 0.28), 0 6px 16px rgba(0, 0, 0, 0.08);
  aspect-ratio: 16 / 9.6;
}

.hero-kids-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Badges Flutuantes */
.hero-float-badge {
  position: absolute;
  z-index: 5;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 36, 18, 0.22);
  pointer-events: none;
}

.badge-quote {
  top: -15px;
  left: -14px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(200, 232, 216, 0.9);
  padding: 8px 18px;
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: #0a5f39;
  transform: rotate(-3deg);
  line-height: 1.15;
}

.badge-feature {
  bottom: -15px;
  right: -12px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(200, 232, 216, 0.9);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  transform: rotate(1.5deg);
}

.badge-feature-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #e7f8ef;
  color: #008f4c;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.badge-feature-info {
  display: flex;
  flex-direction: column;
}

.badge-feature-info strong {
  font-size: 13px;
  font-weight: 800;
  color: #143224;
  line-height: 1.2;
}

.badge-feature-info small {
  font-size: 11px;
  font-weight: 600;
  color: #526f60;
}

/* Responsividade do Banner Hero */
@media (max-width: 1120px) {
  .hero-inclusive-banner {
    grid-template-columns: 1fr;
    padding: 40px 36px;
    gap: 36px;
  }
  .hero-main-title {
    font-size: 36px;
  }
  .hero-illustration-wrapper {
    max-width: 490px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .hero-wrap {
    padding: 14px 14px 0;
  }
  .hero-inclusive-banner {
    padding: 30px 20px;
    border-radius: 24px;
    gap: 28px;
  }
  .hero-main-title {
    font-size: 29px;
  }
  .hero-sub-title {
    font-size: 17px;
  }
  .hero-cursive-quote {
    font-size: 22px;
  }
  .hero-desc {
    font-size: 14.5px;
  }
  .hero-pillars-row {
    gap: 6px;
  }
  .hero-pillar-pill {
    padding: 6px 11px;
    font-size: 11.5px;
  }
  .badge-quote {
    font-size: 17px;
    padding: 6px 14px;
    top: -10px;
    left: -6px;
  }
  .badge-feature {
    bottom: -12px;
    right: -6px;
    padding: 8px 12px;
  }
  .badge-feature-info strong {
    font-size: 12px;
  }
  .hero-actions-container {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }
  .btn-hero-cta {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   FOTO DE PERFIL DO ALUNO (AVATAR UPLOAD & RENDER)
   ========================================================================== */

.avatar {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  background: var(--green);
  color: #ffffff;
  font-weight: 800;
  border-radius: 50%;
  flex-shrink: 0;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.profile-avatar-wrapper {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.profile-avatar-lg {
  width: 78px;
  height: 78px;
  font-size: 26px;
  border: 3px solid #ffffff;
  box-shadow: 0 8px 24px rgba(0, 143, 70, 0.18);
}

.profile-avatar-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #008f46;
  color: #ffffff;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, background-color 0.15s ease;
  padding: 0;
}

.profile-avatar-badge:hover {
  transform: scale(1.12);
  background: #00753a;
}

.profile-role-badge {
  color: #008f46 !important;
  font-weight: 700;
  font-size: 13px !important;
  margin-top: 2px !important;
}

.profile-photo-uploader {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 24px;
  background: linear-gradient(135deg, #f7fbf9 0%, #edf8f2 100%);
  border: 1.5px dashed #bcd5c8;
  border-radius: 20px;
  margin-bottom: 20px;
}

.photo-preview-box {
  flex-shrink: 0;
}

.profile-avatar-preview {
  width: 84px;
  height: 84px;
  font-size: 28px;
  border: 3px solid #ffffff;
  box-shadow: 0 8px 20px rgba(0, 70, 35, 0.12);
}

.photo-uploader-info {
  flex: 1;
}

.photo-uploader-info h4 {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 800;
  color: #17242e;
}

.photo-uploader-info p {
  margin: 0 0 14px;
  font-size: 13px;
  color: #556c60;
  line-height: 1.45;
}

.photo-uploader-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-photo-upload {
  cursor: pointer;
  background: #ffffff;
  border: 1.5px solid #bcd5c8;
  color: #1e3f2f;
  font-weight: 800;
  padding: 9px 18px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  transition: all 0.18s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.btn-photo-upload:hover {
  background: #eef8f2;
  border-color: #008f46;
  color: #008f46;
  transform: translateY(-1px);
}

.btn-photo-remove {
  padding: 9px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
}

.selected-photo-note {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #00874e;
}

.profile-form-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #edf3ef;
}

@media (max-width: 640px) {
  .profile-photo-uploader {
    flex-direction: column;
    text-align: center;
    padding: 20px 16px;
  }
  .photo-uploader-actions {
    justify-content: center;
  }
}

/* ==========================================================================
   EFEITO PARALLAX & PARTÍCULAS NO FUNDO (LANDING PAGE & LOGIN)
   ========================================================================== */

.parallax-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
  display: block;
}

body.inclusive-login-page .parallax-canvas {
  z-index: 1;
}

/* Transições ultra fluidas para os elementos afetados pelo parallax */
.ambient-blob,
.left-dots-grid,
.left-vertical-keywords,
.right-vertical-values,
.bottom-right-corner-art,
.hero-shape-blob-top,
.hero-shape-blob-bottom,
.badge-quote,
.badge-feature {
  transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* ==========================================================================
   MÓDULO DE ACESSIBILIDADE E INCLUSÃO (INTELLECTUS A11Y)
   ========================================================================== */

/* Foco visível para navegação por teclado */
:focus-visible {
  outline: 3px solid #008f46 !important;
  outline-offset: 3px !important;
}

/* Escalas de tamanho de fonte e ampliação visual */
html.a11y-font-sm body {
  zoom: 0.9 !important;
}
html.a11y-font-md body {
  zoom: 1 !important;
}
html.a11y-font-lg body {
  zoom: 1.18 !important;
}
html.a11y-font-xl body {
  zoom: 1.35 !important;
}

/* Fallback direto nos tamanhos de fontes em navegadores que preferem font-size */
html.a11y-font-lg p,
html.a11y-font-lg a:not(.a11y-panel *),
html.a11y-font-lg input:not(.a11y-panel *),
html.a11y-font-lg button:not(.a11y-panel *):not(.btn-speed),
html.a11y-font-lg label:not(.a11y-panel *),
html.a11y-font-lg td,
html.a11y-font-lg th,
html.a11y-font-lg li {
  font-size: calc(100% + 3px) !important;
}
html.a11y-font-xl p,
html.a11y-font-xl a:not(.a11y-panel *),
html.a11y-font-xl input:not(.a11y-panel *),
html.a11y-font-xl button:not(.a11y-panel *):not(.btn-speed),
html.a11y-font-xl label:not(.a11y-panel *),
html.a11y-font-xl td,
html.a11y-font-xl th,
html.a11y-font-xl li {
  font-size: calc(100% + 6px) !important;
}

/* Botão flutuante de acessibilidade */
.a11y-widget-wrap {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 99999;
  font-family: inherit;
  zoom: 1 !important; /* Preserva proporção exata da barra */
}

.a11y-trigger-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #008f46;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 143, 70, 0.4);
  transition: transform 0.2s, background 0.2s;
}

.a11y-trigger-btn:hover {
  background: #007639;
  transform: translateY(-2px);
}

.a11y-trigger-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Painel de acessibilidade */
.a11y-panel {
  display: none;
  position: absolute;
  bottom: 56px;
  left: 0;
  width: 320px;
  background: #ffffff;
  border: 1px solid #d2e4d9;
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(10, 40, 20, 0.2);
  padding: 18px 20px;
  box-sizing: border-box;
}

.a11y-panel.open {
  display: block;
  animation: a11yFadeIn 0.2s ease-out;
}

@keyframes a11yFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eef4f0;
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.a11y-panel-header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #173826;
  display: flex;
  align-items: center;
  gap: 6px;
}

.a11y-close-btn {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.a11y-close-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.a11y-group {
  margin-bottom: 14px;
}

.a11y-group-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.a11y-font-buttons {
  display: flex;
  gap: 6px;
}

.a11y-btn-opt {
  flex: 1;
  padding: 8px 6px;
  background: #f1f7f3;
  border: 1px solid #cce3d5;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #173826;
  cursor: pointer;
  transition: all 0.15s;
}

.a11y-btn-opt:hover, .a11y-btn-opt.active {
  background: #008f46;
  color: #ffffff;
  border-color: #008f46;
}

.a11y-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  cursor: pointer;
}

.a11y-switch-row span {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

.a11y-reset-btn {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  background: transparent;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
}

.a11y-reset-btn:hover {
  background: #f8fafc;
  color: #334155;
  border-color: #94a3b8;
}

/* Modo Alto Contraste */
body.a11y-high-contrast {
  background: #000000 !important;
  color: #ffffff !important;
}

body.a11y-high-contrast .inclusive-login-viewport,
body.a11y-high-contrast .topbar,
body.a11y-high-contrast .app-topbar,
body.a11y-high-contrast .admin-topbar,
body.a11y-high-contrast .site-footer,
body.a11y-high-contrast .student-side,
body.a11y-high-contrast .admin-side,
body.a11y-high-contrast .course-side,
body.a11y-high-contrast .panel-card,
body.a11y-high-contrast .lesson-copy-card,
body.a11y-high-contrast .inclusive-form-card,
body.a11y-high-contrast .inclusive-visual-card,
body.a11y-high-contrast .a11y-panel {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #444444 !important;
}

body.a11y-high-contrast a,
body.a11y-high-contrast .text-green,
body.a11y-high-contrast h1,
body.a11y-high-contrast h2,
body.a11y-high-contrast h3,
body.a11y-high-contrast h4 {
  color: #fde047 !important; /* Amarelo acessível de alto contraste */
}

body.a11y-high-contrast .btn-green {
  background: #fde047 !important;
  color: #000000 !important;
  font-weight: 900 !important;
}

body.a11y-high-contrast .btn-outline {
  border-color: #ffffff !important;
  color: #ffffff !important;
}

body.a11y-high-contrast .pill {
  background: #333333 !important;
  color: #fde047 !important;
  border: 1px solid #666666 !important;
}

/* ==========================================================================
   MODO ESPECIALIZADO PARA DISLEXIA (FONTE LEXEND & ESPAÇAMENTO COGNITIVO)
   ========================================================================== */
body.a11y-dyslexic {
  font-family: 'Lexend', ui-sans-serif, system-ui, sans-serif !important;
}

body.a11y-dyslexic *:not(.a11y-widget-wrap *):not(.ico):not(svg):not(path) {
  font-family: 'Lexend', ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: 0.05em !important;
  word-spacing: 0.16em !important;
  line-height: 1.75 !important;
}

/* Aumento de legibilidade: nenhum texto fica pequeno demais no modo dislexia */
body.a11y-dyslexic p,
body.a11y-dyslexic a:not(.a11y-panel *),
body.a11y-dyslexic input:not(.a11y-panel *),
body.a11y-dyslexic button:not(.a11y-panel *),
body.a11y-dyslexic label:not(.a11y-panel *),
body.a11y-dyslexic li,
body.a11y-dyslexic td {
  font-size: max(16px, 1.05em) !important;
}

body.a11y-dyslexic small,
body.a11y-dyslexic .small-muted,
body.a11y-dyslexic .meta-row,
body.a11y-dyslexic .help-info-block,
body.a11y-dyslexic .help-info-block span,
body.a11y-dyslexic .login-help,
body.a11y-dyslexic .table th,
body.a11y-dyslexic .field label,
body.a11y-dyslexic .field-label {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

body.a11y-dyslexic h1,
body.a11y-dyslexic .card-h1 {
  font-size: max(32px, 1.85em) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.02em !important;
}

body.a11y-dyslexic h2 {
  font-size: max(26px, 1.5em) !important;
  line-height: 1.3 !important;
}

body.a11y-dyslexic h3 {
  font-size: max(22px, 1.3em) !important;
  line-height: 1.35 !important;
}

body.a11y-dyslexic h4 {
  font-size: max(18px, 1.15em) !important;
}

/* Escala reforçada na tela de login */
html.a11y-font-lg .card-h1 { font-size: 34px !important; }
html.a11y-font-lg .card-subtitle { font-size: 16px !important; }
html.a11y-font-lg .field-label { font-size: 15px !important; }
html.a11y-font-lg .field-input-box input { font-size: 17px !important; }
html.a11y-font-lg .btn-login-submit { font-size: 18px !important; }
html.a11y-font-lg .help-info-block span { font-size: 15px !important; }

html.a11y-font-xl .card-h1 { font-size: 40px !important; }
html.a11y-font-xl .card-subtitle { font-size: 18px !important; }
html.a11y-font-xl .field-label { font-size: 17px !important; }
html.a11y-font-xl .field-input-box input { font-size: 19px !important; }
html.a11y-font-xl .btn-login-submit { font-size: 20px !important; }
html.a11y-font-xl .help-info-block span { font-size: 17px !important; }

/* Posicionamento do VLibras sem cobrir o botão da barra */
div[vw].enabled {
  z-index: 99998 !important;
}

/* =========================================================
   Página do Curso (Overview) - Layout em 3 Colunas + Cards de Lilian Teixeira
   ========================================================= */
.course-overview-wrap {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr) 350px;
  gap: 24px;
  max-width: 1480px;
  margin: 24px auto;
  padding: 0 24px;
  align-items: start;
}

/* Coluna 1: Ajustes na navegação esquerda do curso */
.course-overview-wrap .course-side {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px 18px;
  box-shadow: 0 10px 30px rgba(14, 56, 38, 0.05);
  position: sticky;
  top: 96px;
}

.course-overview-wrap .course-side .back-link-clean {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #526f63;
  padding: 7px 12px;
  border-radius: 999px;
  background: #f3f8f5;
  margin-bottom: 16px;
  transition: all 0.2s;
  border: 1px solid #e1eee7;
}

.course-overview-wrap .course-side .back-link-clean:hover {
  background: var(--soft);
  color: var(--green);
  border-color: #badcc9;
  transform: translateX(-2px);
}

.course-overview-wrap .course-side h3 {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--ink);
  line-height: 1.25;
}

/* Coluna 2: Ajustes no conteúdo central */
.course-overview-wrap .course-main {
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(14, 56, 38, 0.05);
  overflow: hidden;
}

.course-overview-wrap .course-cover-img {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
}

.course-overview-wrap .course-meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0;
  padding: 16px 18px;
  background: #f7fbf8;
  border-radius: 14px;
  border: 1px solid #e5f0ea;
}

.course-overview-wrap .course-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #4b6357;
}

.course-overview-wrap .course-meta-item strong {
  color: var(--ink);
}

/* Coluna 3: Painel Lateral Direito (Coordenadora, Competências e Certificação) */
.course-info-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 96px;
}

/* Card 1: Coordenadora Lilian Teixeira */
.side-card-instructor {
  background: #ffffff;
  border: 1px solid #dbeae2;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 12px 32px rgba(12, 54, 35, 0.06);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.side-card-instructor:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(12, 54, 35, 0.09);
}

.side-card-instructor::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--green), var(--lime));
}

.instructor-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eaf8f0;
  color: var(--green);
  border: 1px solid #cfead9;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.instructor-profile-row {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}

.instructor-photo-box {
  width: 96px;
  height: 96px;
  border-radius: 18px;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 10px 24px rgba(14, 56, 38, 0.15);
  flex-shrink: 0;
  background: #edf6f1;
}

.instructor-photo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.instructor-header-info {
  flex: 1;
  min-width: 0;
}

.instructor-name {
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
  margin: 0 0 3px;
  line-height: 1.2;
}

.instructor-role {
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  margin: 0 0 6px;
}

.instructor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 14px;
}

.instructor-chip {
  background: #f2f7f4;
  color: #435b50;
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid #e1ede6;
}

.instructor-quote {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 3px solid var(--lime);
  background: linear-gradient(135deg, #fdfefd, #f6faf8);
  border-radius: 0 12px 12px 0;
  font-size: 12px;
  font-style: italic;
  color: #3f554c;
  line-height: 1.5;
}

.instructor-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.instructor-btn-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  border-radius: 12px;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  transition: all 0.2s;
  box-shadow: 0 6px 16px rgba(0, 143, 70, 0.2);
}

.instructor-btn-contact:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0, 143, 70, 0.28);
}

.instructor-btn-site {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 14px;
  border-radius: 12px;
  background: #f5fbf7;
  border: 1px solid #d2e7dc;
  color: #2e5944;
  font-weight: 700;
  font-size: 12px;
  transition: all 0.2s;
}

.instructor-btn-site:hover {
  background: #e7f7ed;
  border-color: #bde0cd;
  color: var(--green-dark);
}

/* Card 2: O que você vai desenvolver */
.side-card-goals {
  background: #ffffff;
  border: 1px solid #dbeae2;
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: 0 10px 28px rgba(12, 54, 35, 0.05);
}

.side-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef4f1;
}

.side-goals-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.side-goals-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #455a50;
}

.goal-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e7f7ed;
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 1px;
}

.side-goals-list strong {
  color: var(--ink);
  display: block;
}

/* Card 3: Ficha Técnica e Certificado */
.side-card-cert {
  background: linear-gradient(180deg, #f7fcf9, #ffffff);
  border: 1px solid #dbeae2;
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: 0 10px 28px rgba(12, 54, 35, 0.05);
}

.cert-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.cert-meta-item {
  background: #ffffff;
  border: 1px solid #e2eee7;
  border-radius: 12px;
  padding: 10px;
}

.cert-meta-item small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #728a7f;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cert-meta-item b {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
  margin-top: 2px;
}

.cert-issuance-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #eefbf4;
  border: 1px solid #cfead9;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 12px;
  color: #276245;
  line-height: 1.4;
}

.cert-issuance-notice svg {
  flex-shrink: 0;
  color: var(--green);
}

.link-cert-verify {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--green);
  transition: color 0.2s;
}

.link-cert-verify:hover {
  color: var(--green-dark);
  text-decoration: underline;
}

/* Card 4: Selo de Acessibilidade */
.side-card-a11y {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fbf9;
  border: 1px dashed #cfe0d7;
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 12px;
  color: #546e62;
}

.side-card-a11y-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #e7f7ed;
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

/* Responsividade fluida */
@media (max-width: 1240px) {
  .course-overview-wrap {
    grid-template-columns: 270px minmax(0, 1fr);
  }
  .course-overview-wrap .course-info-side {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 18px;
    position: static;
  }
}

@media (max-width: 860px) {
  .course-overview-wrap {
    grid-template-columns: 1fr;
    padding: 0 14px;
    margin: 16px auto;
  }
  .course-overview-wrap .course-side {
    position: static;
  }
  .course-overview-wrap .course-info-side {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Badges de Perfis de Usuários & Esteira de Certificação Física
   ========================================================= */
.role-badge-admin {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
  font-weight: 800;
}

.role-badge-coordinator {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
  font-weight: 800;
}

.role-badge-support {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #bfdbfe;
  font-weight: 800;
}

.role-badge-student {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  font-weight: 700;
}

/* =========================================================
   Vitrine de Cursos da Página Inicial (Colunas Dinâmicas)
   ========================================================= */
.course-grid.cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.course-grid.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.course-grid.cols-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1120px) {
  .course-grid.cols-3,
  .course-grid.cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .course-grid.cols-2,
  .course-grid.cols-3,
  .course-grid.cols-4 {
    grid-template-columns: 1fr;
  }
}

/* Category Filter Bar on Home */
.course-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.course-filter-btn {
  border: 1px solid #d8e5df;
  background: #ffffff;
  color: #3b5046;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.course-filter-btn:hover {
  border-color: #008f46;
  color: #008f46;
  background: #f4faf6;
}

.course-filter-btn.active {
  background: #008f46;
  color: #ffffff;
  border-color: #008f46;
  box-shadow: 0 4px 12px rgba(0, 143, 70, 0.2);
}

/* =========================================================
   Destaque da Coordenação (Lilian Teixeira) na Home
   ========================================================= */
.home-coordinator-spotlight {
  max-width: 1320px;
  margin: 48px auto;
  padding: 0 40px;
}

.coordinator-spotlight-card {
  background: linear-gradient(135deg, #ffffff 0%, #f4faf6 100%);
  border: 1px solid #d3e7dc;
  border-radius: 28px;
  padding: 38px 46px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 36px;
  align-items: center;
  box-shadow: 0 16px 40px rgba(10, 60, 36, 0.06);
  position: relative;
  overflow: hidden;
}

.coordinator-spotlight-card::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 223, 28, 0.2) 0%, rgba(200, 223, 28, 0) 70%);
  pointer-events: none;
}

.coordinator-spotlight-photo-wrap {
  position: relative;
  width: 210px;
  height: 250px;
  margin: 0 auto;
}

.coordinator-spotlight-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px;
  border: 4px solid #ffffff;
  box-shadow: 0 12px 28px rgba(0, 50, 25, 0.14);
}

.coordinator-spotlight-badge {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #008f46;
  color: #ffffff;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 143, 70, 0.35);
  display: flex;
  align-items: center;
  gap: 5px;
}

.coordinator-spotlight-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.coordinator-spotlight-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #007b3c;
  background: #e6f6ee;
  border: 1px solid #c2e8d4;
  padding: 4px 12px;
  border-radius: 999px;
  width: fit-content;
}

.coordinator-spotlight-title {
  margin: 0;
  font-size: 26px;
  color: #122b20;
  font-weight: 800;
  line-height: 1.2;
}

.coordinator-spotlight-role {
  margin: 0;
  font-size: 15px;
  color: #008f46;
  font-weight: 700;
}

.coordinator-spotlight-desc {
  margin: 4px 0 10px;
  color: #4b6357;
  font-size: 14.5px;
  line-height: 1.6;
}

.coordinator-spotlight-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.coordinator-chip-item {
  background: #ffffff;
  border: 1px solid #d5e5dc;
  color: #274034;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
}

.coordinator-spotlight-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .coordinator-spotlight-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 30px 22px;
  }
  .coordinator-spotlight-body {
    align-items: center;
  }
  .coordinator-spotlight-chips {
    justify-content: center;
  }
  .coordinator-spotlight-actions {
    justify-content: center;
  }
}

/* =========================================================
   Página de Configurações Administrativa (Design Premium)
   ========================================================= */
.settings-container {
  max-width: 1200px;
  margin: 0 auto;
}

.settings-header-banner {
  background: linear-gradient(135deg, #ffffff 0%, #f4faf6 100%);
  border: 1px solid #d8e9df;
  border-radius: 20px;
  padding: 24px 28px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.settings-header-banner h1 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 800;
  color: #10291e;
}

.settings-header-banner p {
  margin: 0;
  color: #526c60;
  font-size: 13.5px;
}

.settings-nav-tabs {
  display: flex;
  gap: 8px;
  background: #edf4f0;
  padding: 6px;
  border-radius: 14px;
  margin-bottom: 22px;
  overflow-x: auto;
}

.settings-tab-btn {
  border: 0;
  background: transparent;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  color: #435b50;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.settings-tab-btn:hover {
  background: rgba(255, 255, 255, 0.6);
  color: #008f46;
}

.settings-tab-btn.active {
  background: #ffffff;
  color: #008f46;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  font-weight: 800;
}

.settings-tab-pane {
  display: none;
}

.settings-tab-pane.active {
  display: block;
  animation: fadeInPane 0.25s ease;
}

@keyframes fadeInPane {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Col Selector Cards */
.col-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 12px 0 20px;
}

.col-option-card {
  border: 2px solid #dbe7e1;
  background: #ffffff;
  border-radius: 16px;
  padding: 18px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  text-align: left;
}

.col-option-card:hover {
  border-color: #92d6ad;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 143, 70, 0.08);
}

.col-option-card.active {
  border-color: #008f46;
  background: #f3faf5;
  box-shadow: 0 6px 20px rgba(0, 143, 70, 0.12);
}

.col-preview-graphic {
  display: grid;
  gap: 6px;
  height: 48px;
  background: #edf5f0;
  border-radius: 8px;
  padding: 6px;
  margin-bottom: 12px;
}

.col-preview-graphic.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.col-preview-graphic.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.col-preview-graphic.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.col-preview-bar {
  background: #008f46;
  opacity: 0.35;
  border-radius: 5px;
  height: 100%;
  transition: opacity 0.2s ease;
}

.col-option-card.active .col-preview-bar {
  opacity: 1;
  background: #008f46;
}

.col-option-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #1a3327;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.col-option-desc {
  font-size: 12px;
  color: #5f786d;
  line-height: 1.4;
  margin: 0;
}

.col-check-indicator {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #c4d7cd;
  display: grid;
  place-items: center;
}

.col-option-card.active .col-check-indicator {
  background: #008f46;
  border-color: #008f46;
}

.col-check-indicator::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  display: none;
}

.col-option-card.active .col-check-indicator::after {
  display: block;
}

/* Banner Presets */
.banner-presets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 10px;
}

.banner-preset-card {
  border: 2px solid #dce8e1;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  text-align: left;
}

.banner-preset-card:hover {
  border-color: #008f46;
  transform: translateY(-2px);
}

.banner-preset-card.active {
  border-color: #008f46;
  box-shadow: 0 0 0 2px #008f46;
}

.banner-preset-thumb {
  width: 100%;
  height: 100px;
  object-fit: cover;
  background: #eaf3ee;
  display: block;
}

.banner-preset-info {
  padding: 10px 12px;
}

.banner-preset-title {
  font-size: 12px;
  font-weight: 800;
  color: #1a3327;
  margin: 0 0 3px;
}

.banner-preset-tag {
  font-size: 11px;
  color: #5c7569;
}

/* Settings Form Sections */
.settings-section-card {
  background: #ffffff;
  border: 1px solid #dce8e1;
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.02);
}

.settings-section-card h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: #122b1f;
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-section-card p.help-text {
  margin: 0 0 18px;
  font-size: 12.5px;
  color: #637c70;
}

.settings-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: #f7faf8;
  border: 1px solid #e1ece5;
  border-radius: 14px;
  margin-bottom: 16px;
}

.settings-toggle-info strong {
  display: block;
  font-size: 13.5px;
  color: #1a3227;
  margin-bottom: 2px;
}

.settings-toggle-info span {
  font-size: 12px;
  color: #61796d;
}

/* Pillar Card Grid */
.pillars-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.pillar-editor-item {
  display: grid;
  grid-template-columns: 75px 1fr;
  gap: 10px;
  align-items: center;
  background: #f9fbf9;
  border: 1px solid #dfede5;
  padding: 12px 14px;
  border-radius: 12px;
}

/* Live Banner Preview Box in Admin */
.hero-mini-preview-container {
  background: linear-gradient(135deg, #005a30 0%, #007b3c 42%, #00964b 75%, #01a253 100%);
  border-radius: 20px;
  padding: 24px 28px;
  color: #ffffff;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 20px;
  align-items: center;
  margin-top: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 60, 30, 0.25);
}

.hero-mini-preview-copy {
  position: relative;
  z-index: 2;
}

.hero-mini-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.hero-mini-quote {
  font-family: 'Caveat', cursive, sans-serif;
  color: #fed430;
  font-size: 18px;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

.hero-mini-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 4px;
  color: #ffffff;
}

.hero-mini-sub {
  font-size: 13px;
  font-weight: 700;
  color: #e5f98a;
  margin: 0 0 8px;
}

.hero-mini-desc {
  font-size: 11.5px;
  color: #ebfaef;
  line-height: 1.4;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-mini-btn {
  display: inline-block;
  background: #fed430;
  color: #0b381e;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 8px;
}

.hero-mini-img-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-mini-img {
  max-height: 140px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

/* =========================================================
   Badges e Ícones Modernos de Sessões e Aulas (LMS Premium)
   ========================================================= */
.lesson-type-badge {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
}

/* Vídeo */
.lesson-type-badge.badge-video {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #2563eb;
  border: 1px solid #bfdbfe;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
}

/* Leitura / Texto */
.lesson-type-badge.badge-text {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #059669;
  border: 1px solid #a7f3d0;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.12);
}

/* PDF / Material de Apoio */
.lesson-type-badge.badge-pdf {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  color: #ea580c;
  border: 1px solid #fed7aa;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.12);
}

/* Questionário / Avaliação */
.lesson-type-badge.badge-quiz {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  color: #7c3aed;
  border: 1px solid #ddd6fe;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.12);
}

/* Arquivo / Download */
.lesson-type-badge.badge-download {
  background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
  color: #0d9488;
  border: 1px solid #99f6e4;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.12);
}

/* Concluída */
.lesson-type-badge.badge-completed {
  background: linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 100%);
  color: #16a34a;
  border: 1px solid #86efac;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.15);
}

/* Blocos de Sessão / Módulo na Barra Lateral do Curso */
.course-sessions-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}

.course-session-block {
  background: #ffffff;
  border: 1px solid #e2ebe5;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.course-session-block:hover {
  border-color: #bcd8c9;
  box-shadow: 0 4px 14px rgba(0, 143, 70, 0.06);
}

.course-session-header {
  padding: 10px 14px;
  background: #f7faf8;
  border-bottom: 1px solid #edf4ef;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.session-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.session-number-badge {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #e6f6ee;
  color: #008f46;
  font-size: 11px;
  font-weight: 900;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid #c2e8d3;
}

.session-title-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.session-name {
  font-size: 12px;
  font-weight: 800;
  color: #1c3629;
  line-height: 1.3;
  white-space: normal;
}

.session-count {
  font-size: 10.5px;
  color: #6a8276;
  font-weight: 600;
}

.course-session-lessons {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Cada Item de Aula / Sessão */
.course-lesson-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: #314a3e;
  border: 1px solid transparent;
  transition: all 0.18s ease;
  position: relative;
}

.course-lesson-item:hover {
  background: #f3faf5;
  border-color: #d6ebe0;
  transform: translateX(2px);
}

.course-lesson-item:hover .lesson-type-badge {
  transform: scale(1.08);
}

.course-lesson-item.is-completed {
  background: #fafdfb;
}

.lesson-info-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lesson-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #20392c;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-lesson-item:hover .lesson-name {
  color: #008f46;
}

.lesson-submeta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #7b9488;
}

.lesson-kind-tag {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 1px 6px;
  border-radius: 4px;
}

.lesson-kind-tag.kind-video {
  background: #eff6ff;
  color: #2563eb;
}

.lesson-kind-tag.kind-text {
  background: #ecfdf5;
  color: #059669;
}

.lesson-kind-tag.kind-pdf {
  background: #fff7ed;
  color: #ea580c;
}

.lesson-kind-tag.kind-quiz {
  background: #f5f3ff;
  color: #7c3aed;
}

.lesson-kind-tag.kind-link,
.lesson-kind-tag.kind-file {
  background: #f0fdfa;
  color: #0d9488;
}

.lesson-time {
  font-size: 10.5px;
  color: #6c8478;
}

.lesson-dot {
  opacity: 0.5;
}

.lesson-status-mark {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.check-done-pill {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #16a34a;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25);
}

.circle-pending {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid #bdcecb;
  display: block;
}

/* Melhoria dos cards de recurso de aula */
.resource-card h4 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.resource-card .lesson-type-badge {
  width: 28px;
  height: 28px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   Grid de Cards de Usuários & Perfis (Admin)
   ========================================================= */
.users-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.user-profile-card {
  background: #ffffff;
  border: 1px solid #dfe9e3;
  border-radius: 20px;
  padding: 24px 20px 20px;
  box-shadow: 0 4px 16px rgba(12, 54, 35, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.user-profile-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(12, 54, 35, 0.09);
  border-color: #92d6ad;
}

.user-profile-card.is-you {
  border-color: #a7f3d0;
  background: linear-gradient(180deg, #f8fdfa 0%, #ffffff 100%);
}

.user-card-role-top {
  position: absolute;
  top: 14px;
  right: 14px;
}

.user-card-avatar-wrap {
  position: relative;
  margin-top: 10px;
  margin-bottom: 12px;
}

.user-card-avatar {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  object-fit: cover;
  border: 3.5px solid #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  display: grid;
  place-items: center;
  background: #008f46;
  color: #ffffff;
  font-size: 30px;
  font-weight: 900;
  overflow: hidden;
}

.user-card-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.user-card-name {
  font-size: 16px;
  font-weight: 800;
  color: #17242e;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.user-card-email {
  font-size: 12.5px;
  color: #64748b;
  margin: 0 0 14px;
  word-break: break-all;
}

.user-card-info-box {
  width: 100%;
  background: #f8faf9;
  border: 1px solid #e7f0eb;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  font-size: 12px;
}

.user-card-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #3b5046;
}

.user-card-info-row svg {
  color: #008f46;
  flex-shrink: 0;
}

.user-card-actions {
  width: 100%;
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.user-card-actions .btn {
  flex: 1;
}

.view-mode-toggle {
  display: inline-flex;
  background: #eef4f0;
  padding: 3px;
  border-radius: 10px;
  gap: 4px;
}

.view-mode-btn {
  border: 0;
  background: transparent;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #556c61;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
}

.view-mode-btn.active {
  background: #ffffff;
  color: #008f46;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   SISTEMA RESPONSIVO TOTAL (MOBILE & TABLET - 100% PROFISSIONAL)
   ========================================================================== */

/* Previne rolagem horizontal indesejada no mobile */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Telas Tablets e Médias (max-width: 1080px) */
@media (max-width: 1080px) {
  .course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

/* Telas Mobile e Tablets Pequenos (max-width: 820px) */
@media (max-width: 820px) {
  /* 1. Header & Topbars (Público, Aluno e Admin) */
  .topbar,
  .topbar.public,
  .app-topbar,
  .header-3zones {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "left right"
      "center center" !important;
    align-items: center !important;
    padding: 8px 14px 6px !important;
    min-height: 56px !important;
    height: auto !important;
    gap: 6px 10px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06) !important;
  }

  .admin-topbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 14px !important;
    min-height: 56px !important;
    height: auto !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06) !important;
  }

  .topbar.public > .header-left,
  .topbar.public > .brand-wrap,
  .header-3zones > .header-left,
  .header-left {
    grid-area: left !important;
    justify-self: start !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  .brand img,
  .brand-wrap .brand img {
    height: 38px !important;
    max-height: 38px !important;
    width: auto !important;
    display: block !important;
  }

  .brand-illustration {
    display: none !important;
  }

  .topbar.public > .header-right,
  .topbar.public > .top-actions,
  .header-3zones > .header-right,
  .header-right {
    grid-area: right !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .profile-mini {
    padding: 2px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
  }

  .profile-mini span:last-child {
    display: none !important;
  }

  .profile-mini .avatar,
  .avatar-chip {
    width: 36px !important;
    height: 36px !important;
    font-size: 15px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }

  /* Linha 2 de Navegação em Mobile (Início | Cursos) */
  .header-3zones .header-center,
  .header-center,
  .mainnav.centered,
  .compact-nav.centered {
    grid-area: center !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 0 2px !important;
    margin: 0 !important;
    border-top: 1px solid rgba(0, 143, 70, 0.08) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .header-3zones .mainnav a,
  .header-3zones .compact-nav a {
    min-width: auto !important;
    padding: 5px 16px !important;
    font-size: 12.5px !important;
    border-radius: 999px !important;
  }

  .admin-search,
  .public-search {
    display: none !important;
  }

  .admin-topbar .top-actions .btn-soft {
    display: none !important;
  }

  /* 2. Shell Administrativo e Gaveta Lateral */
  .admin-shell {
    grid-template-columns: 1fr !important;
  }

  .admin-side {
    position: fixed !important;
    top: 58px !important;
    left: -280px !important;
    width: 260px !important;
    height: calc(100vh - 58px) !important;
    background: #ffffff !important;
    z-index: 99999 !important;
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15) !important;
    overflow-y: auto !important;
  }

  .admin-side.open {
    left: 0 !important;
  }

  .admin-main {
    padding: 16px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Telas Mobile Típicas (max-width: 680px) */
@media (max-width: 680px) {
  /* 3. Prevenção de Zoom no iOS em Inputs */
  input, select, textarea {
    font-size: 15px !important;
  }

  /* 4. Banner Hero em Telas Pequenas */
  .hero-inclusive-banner {
    padding: 22px 14px 28px !important;
    gap: 20px !important;
    border-radius: 20px !important;
  }
  .hero-main-title {
    font-size: 25px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
  }
  .hero-sub-title {
    font-size: 15px !important;
  }
  .hero-cursive-quote {
    font-size: 19px !important;
  }
  .hero-desc {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }
  .hero-pillars-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .hero-pillar-pill {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }
  .hero-float-badge.badge-quote {
    font-size: 13.5px !important;
    padding: 5px 10px !important;
    top: -6px !important;
    left: 2px !important;
  }
  .hero-float-badge.badge-feature {
    bottom: -6px !important;
    right: 2px !important;
    padding: 6px 10px !important;
  }
  .badge-feature-info strong {
    font-size: 11px !important;
  }
  .badge-feature-info small {
    font-size: 9.5px !important;
  }

  /* 5. Espaçamentos das Seções */
  .section {
    padding: 0 14px !important;
    margin: 20px auto !important;
  }

  .section-title {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
  }

  .section-title h2 {
    font-size: 22px !important;
    letter-spacing: -0.4px !important;
  }

  .section-title p {
    font-size: 13px !important;
  }

  /* 5. Filtro de Categorias em Carrossel Touch */
  .course-filter-bar {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 2px 10px !important;
    margin-bottom: 18px !important;
    scrollbar-width: none !important;
  }
  .course-filter-bar::-webkit-scrollbar {
    display: none !important;
  }

  .course-filter-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 8px 15px !important;
    font-size: 12.5px !important;
  }

  /* 6. VITRINE DE CURSOS: 1 Coluna Limpa e Confortável */
  .course-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .course-card {
    border-radius: 18px !important;
    box-shadow: 0 4px 18px rgba(12, 54, 35, 0.06) !important;
    width: 100% !important;
  }

  .course-cover {
    aspect-ratio: 16 / 9 !important;
  }

  .course-body {
    padding: 18px 16px !important;
  }

  .course-body h3 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }

  .course-body p {
    font-size: 13px !important;
    min-height: auto !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
  }

  .course-card-actions {
    margin-top: 14px !important;
  }

  .course-card-actions .btn {
    width: 100% !important;
    padding: 11px 16px !important;
    font-size: 13.5px !important;
    justify-content: center !important;
  }

  /* 7. Botão Flutuante de Acessibilidade Mobile */
  .a11y-widget-wrap {
    bottom: 16px !important;
    left: 14px !important;
  }

  .a11y-trigger-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(0, 143, 70, 0.4) !important;
  }

  .a11y-trigger-btn span {
    display: none !important;
  }

  .a11y-panel {
    width: min(320px, calc(100vw - 28px)) !important;
    bottom: 54px !important;
    left: 0 !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
  }

  /* 8. Estatísticas Rápidas em Grade 2x2 */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
  }

  .stat {
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }

  .stat .label {
    font-size: 9.5px !important;
  }

  .stat .num {
    font-size: 22px !important;
    margin: 4px 0 2px !important;
  }

  .stat .trend {
    font-size: 10px !important;
  }

  /* 9. Grid de Usuários e Categorias no Admin */
  .users-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .user-profile-card {
    padding: 20px 16px 16px !important;
    border-radius: 18px !important;
  }

  .page-title {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
  }

  .page-title > div:last-child,
  .page-title .btn,
  .page-title > a {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }

  /* 10. Formulários, Modais e Tabelas */
  .form-grid,
  .form-grid.three,
  .admin-grid,
  .builder-row,
  .builder-row-wide {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .user-modal-overlay > div,
  .modal-card {
    width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 30px) !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .panel-pad {
    padding: 14px !important;
  }

  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .table th,
  .table td {
    padding: 10px 8px !important;
    font-size: 12px !important;
  }

  /* 11. Página de Curso e Aulas (course.php & lesson.php) */
  .course-page-wrap {
    grid-template-columns: 1fr !important;
    padding: 0 14px !important;
    margin: 14px auto !important;
  }

  .course-side {
    position: static !important;
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    padding: 16px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    margin-bottom: 18px !important;
  }

  .course-side > h3 {
    display: block !important;
    font-size: 19px !important;
  }

  .course-side > p,
  .course-side .progress-ring {
    display: block !important;
  }

  .session-card {
    margin-bottom: 12px !important;
  }

  .lesson-layout,
  .lesson-layout-premium {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
    gap: 16px !important;
  }

  /* 12. Painel do Aluno (dashboard.php) */
  .student-shell {
    grid-template-columns: 1fr !important;
    padding: 0 12px !important;
    margin: 14px auto !important;
  }

  .student-side {
    position: static !important;
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 8px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    margin-bottom: 16px !important;
    border-radius: 14px !important;
  }
  .student-side::-webkit-scrollbar {
    display: none !important;
  }

  .student-side a {
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
    flex-shrink: 0 !important;
  }

  .profile-card {
    flex-direction: column !important;
    text-align: center !important;
    padding: 18px 14px !important;
  }

  /* 13. Rodapé Mobile */
  .site-footer {
    padding: 24px 16px 36px !important;
    flex-direction: column !important;
    gap: 14px !important;
    text-align: center !important;
  }

  .site-footer div {
    justify-content: center !important;
  }
}

/* ==========================================================================
   HOMOLOGAÇÃO & LOGO SUBTITLES
   ========================================================================== */
.brand-titles {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-main-sub {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.brand-badge-homolog {
  display: inline-block;
  align-self: flex-start;
  margin-top: 2px;
  padding: 1px 7px;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0b5e32;
  background: #e2f5ea;
  border: 1px solid #b7e3ca;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 143, 70, 0.08);
}

/* ==========================================================================
   CRÉDITO DISCRETO NO CANTO INFERIOR DIREITO (<.oBauer/>)
   ========================================================================== */
.obauer-credit-badge {
  position: fixed;
  bottom: 12px;
  right: 18px;
  z-index: 9999;
  font-family: inherit;
  font-size: 11.5px;
  color: rgba(30, 41, 59, 0.7);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(148, 163, 184, 0.25);
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.25s ease;
  pointer-events: auto;
  user-select: none;
}
.obauer-credit-badge:hover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 143, 70, 0.35);
  box-shadow: 0 6px 20px rgba(0, 143, 70, 0.12);
  color: #1e293b;
  transform: translateY(-1px);
}
.obauer-credit-badge .obauer-link {
  font-weight: 800;
  color: #008f46;
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  margin-left: 2px;
  transition: color 0.15s ease;
}
.obauer-credit-badge .obauer-link:hover {
  color: #005a2c;
  text-decoration: underline;
}
@media (max-width: 640px) {
  .obauer-credit-badge {
    bottom: 8px;
    right: 8px;
    font-size: 10px;
    padding: 4px 9px;
  }
}

/* ==========================================================================
   ACORDEÃO DE MÓDULOS EM LESSON.PHP
   ========================================================================== */
.module-group-card {
  background: #ffffff;
  border: 1px solid #dcece2;
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.module-group-card:hover {
  border-color: #badcc9;
}

.module-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #f7fbf8;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.module-group-head:hover {
  background: #edf7f1;
}

.module-group-head .module-name {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #17242e;
  line-height: 1.3;
}

.module-group-head .module-count {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: #556c60;
  margin-top: 2px;
}

.module-toggle-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eef5f1;
  color: #3b5346;
  flex-shrink: 0;
  transition: transform 0.25s ease, background 0.15s ease, color 0.15s ease;
}

.module-group-head:hover .module-toggle-arrow {
  background: #d8ece0;
  color: #008f46;
}

.module-group-lessons {
  display: none;
  flex-direction: column;
  padding: 6px 10px 10px;
  background: #ffffff;
  border-top: 1px solid #eef5f0;
}

.module-group-card.module-open .module-group-lessons {
  display: flex;
}

.module-group-card.module-open .module-toggle-arrow {
  transform: rotate(180deg);
  background: #008f46;
  color: #ffffff;
}

.module-lesson-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #1e293b;
  margin-top: 4px;
  transition: all 0.15s ease;
  background: #fafdfb;
  border: 1px solid #eef4f0;
}

.module-lesson-link:hover {
  background: #eef7f1;
  border-color: #cde4d6;
  transform: translateX(2px);
}

.module-lesson-link.active {
  background: #e7f7ed;
  border-color: #008f46;
  box-shadow: 0 2px 8px rgba(0, 143, 70, 0.1);
}

.module-lesson-link.active .lesson-title {
  color: #008f46;
  font-weight: 800;
}

.module-lesson-link .lesson-text-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.module-lesson-link .lesson-title {
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.3;
}

.module-lesson-link .lesson-submeta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #64748b;
}

.lesson-kind-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #e2e8f0;
  color: #475569;
}
.lesson-kind-tag.kind-video {
  background: #dbeafe;
  color: #1d4ed8;
}
.lesson-kind-tag.kind-text {
  background: #dcfce7;
  color: #15803d;
}
.lesson-kind-tag.kind-quiz {
  background: #fef3c7;
  color: #b45309;
}
.lesson-kind-tag.kind-pdf {
  background: #fee2e2;
  color: #b91c1c;
}
.lesson-kind-tag.kind-file {
  background: #f3e8ff;
  color: #7e22ce;
}

/* ==========================================================================
   ACORDEÃO DE MÓDULOS EM COURSE.PHP
   ========================================================================== */
.course-sessions-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.course-session-block {
  background: #ffffff;
  border: 1px solid #dcece2;
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.course-session-block:hover {
  border-color: #badcc9;
}

.course-session-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #f7fbf8;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.course-session-header:hover {
  background: #edf7f1;
}

.session-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.session-number-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #e8f5ed;
  color: #008f46;
  font-weight: 800;
  font-size: 13px;
  border: 1px solid #cce8d7;
  flex-shrink: 0;
}

.session-title-wrap {
  min-width: 0;
}

.session-name {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #17242e;
  line-height: 1.3;
}

.session-count {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: #556c60;
  margin-top: 2px;
}

.course-session-lessons {
  display: none;
  padding: 8px 12px 12px;
  background: #ffffff;
  border-top: 1px solid #edf4f0;
}

.course-session-block.session-open .course-session-lessons {
  display: block;
}

.course-session-block.session-open .module-toggle-arrow {
  transform: rotate(180deg);
  background: #008f46;
  color: #ffffff;
}

.course-lesson-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #1e293b;
  margin-top: 6px;
  background: #fafdfb;
  border: 1px solid #eef4f0;
  transition: all 0.15s ease;
}

.course-lesson-item:hover {
  background: #eef7f1;
  border-color: #badcc9;
  transform: translateX(2px);
}

.course-lesson-item.is-completed {
  border-color: #cce8d7;
  background: #f5fbf7;
}

.lesson-info-col {
  flex: 1;
  min-width: 0;
}

.lesson-info-col .lesson-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e293b;
  display: block;
  line-height: 1.3;
}

.lesson-info-col .lesson-submeta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #64748b;
  margin-top: 3px;
}

.lesson-status-mark {
  flex-shrink: 0;
}

.check-done-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #008f46;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.circle-pending {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
}

/* ==========================================================================
   EDITOR VISUAL & CÓDIGO-FONTE CKEDITOR STYLE (admin/course.php)
   ========================================================================== */
.rich-editor-box {
  background: #ffffff;
  border: 1.5px solid #bcd5c8;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.rich-editor-box:focus-within {
  border-color: #008f46;
  box-shadow: 0 0 0 3px rgba(0, 143, 70, 0.15);
}

.rich-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 10px;
  background: #f8faf9;
  border-bottom: 1px solid #e2ede7;
}

.rich-toolbar-group {
  display: flex;
  align-items: center;
  gap: 3px;
}

.rich-toolbar-sep {
  width: 1px;
  height: 22px;
  background: #d8e5de;
  margin: 0 4px;
}

.rich-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  background: #ffffff;
  border: 1px solid #d2e3d9;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s ease;
  line-height: 1;
  min-height: 30px;
}

.rich-btn:hover {
  background: #edf7f1;
  color: #008f46;
  border-color: #badcc9;
}

.rich-btn:active, .rich-btn.active {
  background: #008f46;
  color: #ffffff;
  border-color: #008f46;
}

.rich-btn-source {
  gap: 5px;
  font-size: 12px;
  background: #eef4f0;
  border-color: #badcc9;
  color: #173826;
}

.rich-btn-source.active {
  background: #17242e;
  color: #f8fafc;
  border-color: #17242e;
}

.rich-select {
  height: 30px;
  padding: 0 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  background: #ffffff;
  border: 1px solid #d2e3d9;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
}

.rich-select:focus {
  border-color: #008f46;
}

.rich-editor-visual {
  min-height: 180px;
  max-height: 480px;
  overflow-y: auto;
  padding: 16px;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.65;
  color: #1e293b;
  outline: none;
  background: #ffffff;
}

.rich-editor-visual:empty:before {
  content: 'Escreva ou cole o conteúdo da aula aqui...';
  color: #94a3b8;
  pointer-events: none;
}

.rich-editor-visual h2, .rich-editor-visual h3, .rich-editor-visual h4 {
  color: #0f172a;
  margin-top: 14px;
  margin-bottom: 8px;
  font-weight: 800;
}

.rich-editor-visual p {
  margin: 0 0 10px;
}

.rich-editor-visual ul, .rich-editor-visual ol {
  padding-left: 24px;
  margin: 0 0 12px;
}

.rich-editor-visual li {
  margin-bottom: 4px;
}

.rich-editor-visual blockquote {
  margin: 12px 0;
  padding: 10px 16px;
  background: #f1f8f4;
  border-left: 4px solid #008f46;
  border-radius: 4px;
  color: #274b37;
  font-style: italic;
}

.rich-editor-source {
  min-height: 180px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  color: #0f172a;
  background: #f8fafc;
  border: none;
  border-radius: 0;
  resize: vertical;
  padding: 14px 16px;
  width: 100%;
  box-sizing: border-box;
}

.rich-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: #f8faf9;
  border-top: 1px solid #edf4f0;
  font-size: 11.5px;
  color: #64748b;
}

.rich-editor-footer strong, .rich-editor-footer b {
  color: #008f46;
}

/* ==========================================================================
   CONSTRUTOR DE MÓDULOS EXPANSÍVEIS (admin/course.php)
   ========================================================================== */
.builder-module {
  background: #ffffff;
  border: 1px solid #dcece2;
  border-radius: 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  transition: all 0.2s ease;
}

.builder-module.is-collapsed .builder-module-lessons {
  display: none !important;
}

.builder-module.is-collapsed .builder-toggle-btn svg {
  transform: rotate(-90deg);
}

.builder-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #f0f7f3;
  color: #2e5742;
  border: 1px solid #d0e4d8;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.builder-toggle-btn:hover {
  background: #008f46;
  color: #ffffff;
  border-color: #008f46;
}

.builder-toggle-btn svg {
  transition: transform 0.2s ease;
}

/* ==========================================================================
   RESPONSIVIDADE MOBILE REFORÇADA & TOUCH EXPERIENCE
   ========================================================================== */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

@media (max-width: 768px) {
  /* Cabeçalho e Brand em celulares */
  .brand-wrap {
    gap: 8px;
  }
  .brand img {
    height: 40px !important;
  }
  .brand-titles {
    line-height: 1.1;
  }
  .brand-main-sub {
    font-size: 10px;
  }
  .brand-badge-homolog {
    font-size: 8.5px;
    padding: 1px 6px;
  }
  .brand-emoji {
    display: none;
  }

  /* Toolbar do Editor Rico em telas pequenas */
  .rich-toolbar {
    padding: 6px;
    gap: 3px;
  }
  .rich-btn {
    padding: 4px 7px;
    font-size: 11px;
    min-height: 28px;
  }
  .rich-select {
    height: 28px;
    font-size: 11px;
    max-width: 140px;
  }

  /* Barra de crédito flutuante oBauer e widget A11y */
  .obauer-credit-badge {
    bottom: 8px;
    right: 8px;
    font-size: 10px;
    padding: 4px 9px;
    z-index: 9990;
  }
  .a11y-widget-wrap {
    bottom: 8px;
    left: 8px;
  }

  /* Acordeão de módulos em celulares */
  .module-group-head {
    padding: 10px 12px;
  }
  .module-group-head .module-name {
    font-size: 12.5px;
  }
  .module-group-head .module-count {
    font-size: 10.5px;
  }
  .module-toggle-arrow {
    width: 24px;
    height: 24px;
  }
  .session-number-badge {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  /* Modais em celulares */
  .user-modal-overlay > div,
  .modal-card {
    width: 95vw !important;
    max-height: 92vh !important;
    padding: 16px !important;
  }
}