/* Masterclass AI 2.0 | Webtend-inspired original UI | v1.3.0 */
:root{--navy:#171629;--deep:#22205d;--teal:#FC5546;--cyan:#FC5546;--gold:#CA4438;--cream:#fff;--paper:#fff;--ink:#0B0C0C;--muted:#5B5B5B;--line:#dedee9;--shadow:none;--radius:12px;--header-h:78px;--footer-h:44px}
html,body{background:#fff;color:var(--ink);font-family:Inter,Arial,Helvetica,sans-serif}
body:before{display:none}header{background:#202024;color:#fff;border-bottom:1px solid #30303c;gap:12px;padding:10px clamp(12px,2vw,32px)}
.brand-mark{background:#FC5546;border-radius:10px;box-shadow:none;color:#fff}.brand h1{color:#fff;line-height:1.25}.brand p{color:#d4d4da}
.nav{background:#201e66;border:1px solid #37318b;border-radius:12px;padding:5px;gap:3px;max-width:43vw;scrollbar-width:thin}.nav button{border:0!important;background:transparent!important;color:#e7e6f6!important;border-radius:8px!important;box-shadow:none;font-weight:600;padding:10px 12px}.nav button.active,.nav button:hover{background:#FC5546!important;color:#fff!important}.home-btn{background:#FC5546;color:#fff;border:1px solid #FC5546;border-radius:10px;box-shadow:none}.home-btn:hover{background:#CA4438;color:#fff}
.slides{background:#fff}.slide{background:#fff;padding:clamp(16px,2.3vw,40px)}.slide[data-title="Mula"],.slide[data-title="Terima Kasih"]{background:radial-gradient(circle at 85% 12%,#24217e 0%,#151340 35%,#0d0b29 100%)}
.hero-card,.panel{background:#fff;border:1px solid #e1e1ea;border-radius:12px;box-shadow:none}.hero-card{padding:clamp(22px,3.5vw,58px)}.slide[data-title="Mula"] .hero-card,.slide[data-title="Terima Kasih"] .hero-card{background:#1e1a52;border:1px solid #37317b;color:#fff}.kicker{color:#FC5546}.mega{color:#fff;letter-spacing:-.045em;line-height:1.0}.subtitle{color:#1b1b28;line-height:1.25}.slide[data-title="Mula"] .subtitle,.slide[data-title="Terima Kasih"] .subtitle{color:#fff}
.pill{background:#F5F5FF;border:1px solid #e3e1f4;color:#29255e;border-radius:8px}.slide[data-title="Mula"] .pill,.slide[data-title="Terima Kasih"] .pill{background:#272365;color:#fff;border-color:#49418b}.infographic{border-radius:12px;border:1px solid #e3e1f2;box-shadow:none}.watermark{color:rgba(252,85,70,.14)}
.slide-title{border-color:#e4e4ed}.slide-title h2{color:#14132e;line-height:1.12}.slide-title p{color:#5B5B5B}
.session-card{background:#F5F5FF;border-color:#e3e3ee;border-radius:12px}.session-badge,.session-badge.blue{background:#24216b;color:#fff;border-radius:10px;box-shadow:none}.session-card h2{color:#171629}.mini-slot{background:#fff;border-color:#e0e0ea;border-radius:10px}.mini-slot b{color:#201e66}.mini-slot span{color:#5B5B5B}
.slot-no{background:#FC5546;color:#fff;border-radius:10px}.slot-head h2{color:#171629}.time{color:#CA4438}.tool{background:#F5F5FF;border:1px solid #dedcf4;border-radius:8px;color:#24216b}.step{background:#F5F5FF;border:1px solid #e4e3ed;border-radius:10px}.step b{color:#CA4438}.step span{color:#1c1c25}.deliver{background:#fff5f3;border:1px solid #f6d9d4;border-left:4px solid #FC5546;border-radius:10px}.deliver h3{color:#171629}.deliver ul{color:#5B5B5B}
.slot-note{background:#F5F5FF;border:1px solid #e1e0f2;border-radius:10px}.slot-note summary{color:#24216b}.prompt-example{background:#fff;border-color:#e0dfee;border-radius:8px}
.submit-card,.showcase-card{background:#fff}.submit-card h3,.showcase-card h3{color:#171629}label{color:#29255e}input,textarea,select{background:#fff;border:1px solid #d7d7e4;border-radius:8px;color:#0B0C0C;font-size:14px;padding:11px 14px}input:focus,textarea:focus,select:focus{outline:2px solid #FC5546;outline-offset:1px;border-color:#FC5546}.primary{background:#FC5546;color:#fff;border:1px solid #FC5546;border-radius:10px}.primary:hover{background:#CA4438;border-color:#CA4438;color:#fff}.ghost{background:#F5F5FF;color:#24216b;border:1px solid #dedcf0;border-radius:10px}.ghost:hover{background:#e9e8fb}
.show-item,.output-item,.stat{background:#F5F5FF;border:1px solid #e3e3ee;border-radius:10px;box-shadow:none}.show-item b,.output-item b{color:#23215e}.show-item a,td a{color:#CA4438}.output-item .icon,.stat b{color:#FC5546}.table-wrap{border-color:#e0e0eb;border-radius:10px}th{background:#F5F5FF;color:#24216b}.progress{background:#e9e8f4}.bar{background:#FC5546}footer{background:#fff;border-color:#e2e2eb;color:#5B5B5B}
.cover-visual{background:#F5F5FF;border:1px solid #e0deee;border-radius:12px}.cover-visual span{color:#24216b}.arabesque{color:#FC5546}.session-huge{color:#24216b}.cover-date{color:#CA4438}.cover-text{color:#31313d}
.login-screen{background:radial-gradient(circle at 12% 15%,#2d286f,#12102e 55%,#0d0b20)}.login-panel{border:1px solid #e5e3ef;border-radius:14px;box-shadow:0 20px 55px rgba(4,2,30,.20);overflow:hidden}.login-art{background:linear-gradient(145deg,#232064,#121039);color:#fff}.login-art h1,.login-art .ar{color:#fff}.login-form{background:#fff;color:#171629}.login-form h2{color:#171629}
#botPanel{border:1px solid #deddeb;border-radius:14px;box-shadow:0 12px 36px rgba(15,12,47,.20);background:#fff}#botPanel .bot-head{background:#24216b;color:#fff}#botFab{filter:drop-shadow(0 6px 11px rgba(25,15,74,.23))}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #FC5546;outline-offset:2px}
@media(max-width:1250px){:root{--header-h:72px}.nav{max-width:38vw}.slot-layout{grid-template-columns:1fr}.submission-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){:root{--header-h:68px}.title-grid,.grid-2,.slot-layout,.admin-grid{grid-template-columns:1fr}.nav{max-width:35vw}.session-card{grid-template-columns:minmax(115px,155px) minmax(0,1fr)}.output-flow{grid-template-columns:repeat(3,minmax(0,1fr))}.submission-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){:root{--header-h:64px;--footer-h:44px}header{gap:8px;padding:8px 12px}.brand h1{font-size:clamp(12px,3.2vw,15px)}.nav{position:fixed;left:8px;right:8px;bottom:calc(var(--footer-h) + 4px);max-width:none;width:auto;background:#201e66;border-color:#383285;border-radius:12px;overflow-x:auto;padding:5px;z-index:25}.nav button{white-space:nowrap;flex:0 0 auto}.slide{padding:16px 12px 92px}.title-grid,.grid-2,.slot-layout,.admin-grid,.submission-wrap,.session-card,.login-panel{grid-template-columns:minmax(0,1fr)}.hero-card{padding:24px 19px}.mega{font-size:clamp(42px,12vw,76px)}.slide-title h2{font-size:clamp(27px,8vw,40px)}.session-huge{font-size:clamp(53px,16vw,92px)}.session-badge{min-height:110px}.flow{grid-template-columns:repeat(2,minmax(0,1fr))}.output-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-row{grid-template-columns:repeat(3,minmax(0,1fr))}.cover-visual{min-height:220px}.login-screen{padding:10px}#botFab{width:55px;height:55px;right:10px;bottom:calc(var(--footer-h) + 68px)}#botPanel{width:calc(100vw - 20px);max-width:400px;right:10px;bottom:calc(var(--footer-h) + 130px);height:min(460px,calc(100dvh - 225px));z-index:80}}
@media(max-width:400px){.flow{grid-template-columns:minmax(0,1fr)}.stat{padding:9px}.stat b{font-size:24px}.brand h1{font-size:12px}}
@media(prefers-reduced-motion:reduce){.slide,.bar,.primary,.nav button{transition:none}}

/* In-slot showcase: grid previews alongside participant submission on desktop/tablet */
.submission-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:14px;align-items:start}
.showcase-card{min-width:0;max-height:none!important}
.show-list,.public-show-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start;overflow:visible;min-height:0}
.show-item{min-width:0;overflow:hidden;padding:0!important;display:flex;flex-direction:column}
.show-preview-wrap{width:100%;aspect-ratio:16/10;background:#eff4f1;overflow:hidden}
.show-preview{width:100%;height:100%;display:block;object-fit:contain;border:0;background:white}
.preview-unavailable{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;text-align:center;font-size:12px;color:#58635c}
.preview-unavailable span:first-child{font-size:27px}
.show-card-details{padding:12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.show-card-details b{font-size:14px;overflow-wrap:anywhere}.show-card-details span{font-size:11px;color:#65736c;overflow-wrap:anywhere}.show-card-details p{font-size:12px;margin:0;overflow-wrap:anywhere}.show-card-details a{font-size:13px}
.public-show-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
@media(max-width:1199px){.submission-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:700px){.submission-wrap{grid-template-columns:minmax(0,1fr)}.show-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.show-list{grid-template-columns:minmax(0,1fr)}}


/* v1.3.2 viewport and responsive fit audit. No fixed 16:9 letterboxing: all desktop pixels available. */
:root{--header-h:clamp(58px,7.2vh,78px);--footer-h:clamp(32px,4.2vh,44px)}
html,body,#workshopApp,.app{max-width:100%;min-width:0}
.app{width:100%;height:100dvh;min-height:0}
.slides{width:100%;height:auto;flex:1;min-height:0;overflow:hidden}
.slide{width:100%;height:100%;max-width:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:clamp(12px,1.6vw,30px) clamp(14px,2vw,36px)}
.slide-inner{width:100%;max-width:none;min-height:100%;min-width:0;gap:clamp(10px,1.5vh,18px)}
.slide-inner>*{min-width:0}
.title-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,2vw,30px)}
.hero-card{min-width:0;padding:clamp(18px,2.5vw,42px)}
.mega{font-size:clamp(38px,min(5.3vw,10vh),94px);overflow-wrap:anywhere}
.subtitle{font-size:clamp(19px,2.1vw,36px);overflow-wrap:anywhere}
.slide-title h2{font-size:clamp(25px,min(3vw,5.3vh),52px);line-height:1.12;overflow-wrap:anywhere}
.slide-title p{font-size:clamp(12px,1.15vw,18px)}
.session-huge{font-size:clamp(46px,min(8vw,13vh),144px)}
.session-card{min-width:0;grid-template-columns:minmax(110px,25%) minmax(0,1fr);padding:clamp(14px,1.7vw,26px)}
.session-badge{min-width:0;min-height:clamp(100px,17vh,160px)}
.slot-layout{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(10px,1.25vw,18px);align-items:start}
.slot-main{padding:clamp(14px,1.5vw,26px);gap:clamp(9px,1.2vh,16px);min-width:0}
.slot-head h2{font-size:clamp(23px,min(2.5vw,4.5vh),46px);line-height:1.13;overflow-wrap:anywhere}
.slot-no{font-size:clamp(14px,1.3vw,22px);padding:clamp(8px,1vw,15px)}
.time{font-size:clamp(12px,1.1vw,18px)}
.tool{padding:clamp(7px,.7vw,12px) clamp(9px,.9vw,14px);font-size:clamp(11px,.9vw,15px);overflow-wrap:anywhere}
.flow{grid-template-columns:repeat(2,minmax(0,1fr))}
.step{min-width:0;min-height:0;padding:clamp(10px,.9vw,14px)}
.step span{font-size:clamp(12px,.9vw,15px);overflow-wrap:anywhere}
.deliver{padding:clamp(10px,1vw,16px)}
.deliver li{overflow-wrap:anywhere}
.submission-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start;gap:clamp(9px,1vw,14px);min-width:0}
.submit-card,.showcase-card{padding:clamp(11px,1vw,20px);min-width:0}
.submit-card h3,.showcase-card h3{font-size:clamp(18px,1.3vw,24px)}
.show-list{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;overflow:visible}
.show-preview-wrap{aspect-ratio:16/9}
.show-preview{max-width:100%;max-height:100%;object-fit:contain}
.output-flow{grid-template-columns:repeat(7,minmax(0,1fr))}
.output-item{min-width:0;padding:clamp(10px,1.1vw,18px)}
.output-item b{overflow-wrap:anywhere}
.admin-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.panel,.login-panel,.visual-icons,.visual-icon-card{min-width:0}
.visual-icon-card b{overflow-wrap:anywhere}
.nav{min-width:0;max-width:46vw;overflow-x:auto}
.nav button{white-space:nowrap}
#botPanel{max-width:calc(100vw - 20px);max-height:calc(100dvh - 110px)}
@media (max-height:760px) and (min-width:1101px){
 .slide{padding-block:clamp(10px,1.5vh,18px)}
 .slot-note{padding:9px 12px}
 .slot-main{gap:9px}
 .step{padding:9px}
 .deliver h3{font-size:17px}
 .pill{padding:7px 10px;font-size:13px}
 .visual-icon-grid{gap:8px}
}
@media (max-width:1250px){
 .slot-layout{grid-template-columns:minmax(0,1fr)}
 .submission-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .flow{grid-template-columns:repeat(4,minmax(0,1fr))}
 .admin-grid{grid-template-columns:minmax(0,1fr)}
 .output-flow{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1024px){
 .title-grid,.grid-2{grid-template-columns:minmax(0,1fr)}
 .nav{max-width:38vw}
 .submission-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
 .session-card{grid-template-columns:minmax(110px,26%) minmax(0,1fr)}
 .login-panel{max-width:94vw}
}
@media (max-width:700px){
 :root{--header-h:64px;--footer-h:44px}
 .app{width:100%;min-height:0}
 .slide{padding:14px 12px 96px}
 .title-grid,.grid-2,.slot-layout,.submission-wrap,.admin-grid,.session-card{grid-template-columns:minmax(0,1fr)}
 .slot-main{padding:14px}
 .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
 .show-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .output-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
 .nav{max-width:none;bottom:calc(var(--footer-h) + 5px);width:auto}
 .hero-card{padding:20px 16px}
 .slide-title h2{font-size:clamp(24px,7vw,38px)}
 .slot-head h2{font-size:clamp(23px,7vw,36px)}
 .slot-head{flex-wrap:wrap}
 .session-badge{min-height:105px}
 .cover-visual{min-height:180px}
 .login-screen{padding:10px}
 .login-panel{max-width:100%;grid-template-columns:minmax(0,1fr)}
 #botFab{width:54px;height:54px;right:9px;bottom:calc(var(--footer-h) + 70px)}
 #botPanel{width:calc(100vw - 18px);right:9px;bottom:calc(var(--footer-h) + 128px);height:min(460px,calc(100dvh - 210px))}
}
@media (max-width:390px){.show-list,.flow{grid-template-columns:minmax(0,1fr)}.stat-row{gap:6px}}
@media (orientation:landscape) and (max-height:520px) and (max-width:1024px){
 .slide{padding-bottom:75px}
 #botPanel{height:min(300px,calc(100dvh - 85px));bottom:45px}
}

/* Audited layout: constrain elements within the slide and scale predictably. */
html,body,.app,.slides,.slide,.slide-inner,.panel,.slot-layout,.submission-wrap,.showcase-card,.show-list,.show-item {min-width:0}
.slides{flex:1 1 auto;height:auto;min-height:0}.slide{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.slide-inner{min-height:100%;height:auto;max-width:100%;gap:clamp(10px,1.1vw,18px)}
.title-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.visual-icon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,14px);min-width:0}
.visual-icon-card{min-width:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:76px;text-align:center}
.visual-symbol{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:clamp(30px,3vw,44px);height:clamp(30px,3vw,44px);font-size:0}
.visual-symbol svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%}.visual-icon-card b{font-size:clamp(11px,1vw,15px);line-height:1.25;overflow-wrap:anywhere}
.visual-icons,.visual-core,.hero-card,.cover-visual,.login-art,.login-form{min-width:0}
.quran-line{font-family:'Amiri Quran',serif;display:block;direction:rtl;unicode-bidi:isolate;line-height:1.9;text-align:center;font-size:clamp(20px,2vw,33px);margin:0 0 10px}
.arabesque{pointer-events:none}.visual-base{display:none}
.lesson-kicker{display:block;color:#94702e;font-weight:900;font-size:clamp(11px,0.85vw,14px);letter-spacing:.07em;margin-bottom:5px}
.lesson-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(9px,1.3vw,18px);flex:1;min-height:0}
.lesson-card{background:white;border:1px solid #dce6e1;border-radius:20px;padding:clamp(14px,1.55vw,26px);box-shadow:0 8px 23px #0a38220a;min-width:0;overflow-wrap:anywhere}
.lesson-num{display:inline-flex;background:#e8f6f1;color:#136c61;font-weight:900;border-radius:13px;padding:7px 12px;font-size:clamp(13px,1.25vw,20px)}
.lesson-card h3{color:#172e26;font-size:clamp(18px,1.55vw,25px);line-height:1.18;margin:13px 0 8px}.lesson-card p{font-size:clamp(14px,1.08vw,18px);line-height:1.55;color:#46574c;margin:0}
.lesson-bottom{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(10px,1.2vw,16px)}
.lesson-prompt,.lesson-tip{border:1px solid #d8e3dc;border-radius:20px;background:#f3faf7;padding:clamp(13px,1.4vw,22px);min-width:0}
.lesson-tip{background:#fff8ea;border-color:#eddfbe}.lesson-bottom b{color:#173d32;font-size:clamp(15px,1.2vw,20px)}.lesson-bottom p{color:#46574c;font-size:clamp(13px,1vw,16px);line-height:1.48;margin:9px 0}
.lesson-copy{margin-top:3px}.slot-main{min-width:0}.slot-head{min-width:0}.slot-head>div:last-child{min-width:0}.slot-head h2{overflow-wrap:anywhere}.flow{grid-template-columns:repeat(2,minmax(0,1fr))}
.slot-layout{grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr)}.submission-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.show-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:10px;overflow-y:auto;min-height:0}.show-item{min-width:0;overflow:hidden}.show-preview-wrap{width:100%;aspect-ratio:16/9;overflow:hidden}.show-preview{width:100%;height:100%;object-fit:contain}.show-card-details{min-width:0;overflow-wrap:anywhere}
@media(min-width:1101px) and (max-height:800px){.lesson-card{padding:12px}.lesson-card h3{font-size:clamp(16px,1.3vw,20px);margin:6px 0}.lesson-card p{font-size:clamp(12px,.96vw,15px);line-height:1.35}.lesson-bottom p{font-size:12px}.lesson-bottom{gap:9px}.slide{padding:clamp(12px,1.3vw,24px)}.lesson-grid{gap:9px}.slide-title h2{font-size:clamp(24px,2.5vw,39px)}}
@media(max-width:1100px){.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.slot-layout{grid-template-columns:minmax(0,1fr)}.submission-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.title-grid{grid-template-columns:minmax(0,1fr)}.lesson-card p{font-size:15px}.lesson-bottom{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.lesson-grid,.submission-wrap,.show-list{grid-template-columns:minmax(0,1fr)}.visual-icon-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.lesson-card{padding:15px}.lesson-card p{font-size:14px}.lesson-card h3{font-size:19px}.slide-title h2{font-size:clamp(25px,7vw,34px)}.lesson-bottom{grid-template-columns:minmax(0,1fr)}.slide{padding-bottom:96px}.visual-symbol{width:28px;height:28px}.visual-icon-card{min-height:65px}}

/* Header, admin sign-in and closing slide: compact and responsive */
header{min-width:0;gap:clamp(5px,.7vw,11px);padding-inline:clamp(8px,1.4vw,22px)}
header .brand{min-width:0;flex:0 1 350px}header .brand h1{font-size:clamp(12px,1.05vw,17px);line-height:1.15}header .brand p{font-size:clamp(10px,.78vw,12px);line-height:1.2}
header .brand-mark{flex:0 0 auto;transform:scale(.8);margin-inline:-4px}header .home-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:clamp(10px,.82vw,12px);padding:7px clamp(6px,.8vw,11px);white-space:nowrap;flex:0 0 auto}header .head-icon{font-size:15px;line-height:1}header .nav{flex:1 1 220px;max-width:43vw;min-width:0;overflow-x:auto;scrollbar-width:thin}header .nav button{padding:7px 9px;font-size:clamp(10px,.75vw,12px)}
.admin-credentials{display:grid;gap:7px;background:#f1f7fb;border:1px solid #cbdbe8;border-radius:12px;padding:12px;margin-block:8px}.admin-credentials[hidden]{display:none!important}.admin-credentials small{font-size:11px;color:#555}
.thanks-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,1.5vw,24px);align-items:stretch;min-height:100%;height:auto}.thanks-panel,.hadith-panel{padding:clamp(18px,2.7vw,42px);min-width:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(9px,1.3vh,16px)}.thanks-panel{background:#fff!important;color:#172a2d!important}.hadith-panel{background:linear-gradient(145deg,#f1faf5,#fff8e9)!important;color:#173a33!important;border:1px solid #d2e2d7!important}.thanks-eyebrow,.hadith-label{font-weight:800;letter-spacing:.12em;font-size:clamp(10px,.86vw,13px);color:#98713c}.thanks-heading{font-weight:950;letter-spacing:-.045em;white-space:nowrap;line-height:1.05;font-size:clamp(26px,3.25vw,56px);margin:0;color:#192b2e}.thanks-ar{font-family:'Amiri Quran',serif;font-size:clamp(23px,2.5vw,39px);line-height:1.8;margin:0;color:#12685e;text-align:left}.thanks-description{font-size:clamp(13px,1.05vw,17px);line-height:1.5;max-width:60ch;margin:0}.thanks-person{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid #d6e3e1;border-bottom:1px solid #d6e3e1}.thanks-avatar{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:#1e7166;color:#fff;font-weight:900;flex-shrink:0}.thanks-person>div{display:grid;gap:4px;min-width:0}.thanks-person strong{font-size:clamp(14px,1.2vw,19px)}.thanks-person span:not(.thanks-avatar){font-size:clamp(11px,.85vw,14px);line-height:1.35}.thanks-links{display:flex;flex-wrap:wrap;gap:8px}.thanks-links a,.hadith-link{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:9px;border:1px solid #cbdad6;background:white;color:#125d54;font-weight:800;text-decoration:none;font-size:clamp(11px,.85vw,14px)}.thanks-links a:hover,.hadith-link:hover{background:#e6f6ef}.hadith-mark{font-size:35px;color:#b9944e;line-height:1}.hadith-ar{font-family:'Amiri Quran',serif;font-size:clamp(25px,2.8vw,46px);line-height:1.8;text-align:center;color:#16564d;margin:0;overflow-wrap:normal}.hadith-meaning{font-size:clamp(17px,1.35vw,23px);font-weight:800;line-height:1.5;margin:0;text-align:center}.hadith-source{font-size:clamp(11px,.9vw,14px);line-height:1.5;color:#4d5a50}.hadith-link{align-self:flex-start}.hadith-footer{border-top:1px solid #d1ddd5;padding-top:12px;font-size:clamp(12px,1vw,15px);color:#4b5b51}
@media(min-width:701px) and (max-width:1180px){header .brand p{display:none}header .brand{flex-basis:230px}header .home-btn{padding:7px}header .nav{max-width:35vw}.thanks-panel,.hadith-panel{padding:18px}}
@media(max-width:850px){.thanks-layout{grid-template-columns:minmax(0,1fr)}.thanks-heading{font-size:clamp(28px,6vw,48px)}.hadith-ar{font-size:clamp(24px,4vw,39px)}}
@media(max-width:700px){header .brand{flex:1 1 auto}header .brand p,.head-text{display:none}header .home-btn{width:35px;height:35px;padding:5px}header .head-icon{font-size:18px}header .nav{max-width:none}header .brand h1{font-size:clamp(11px,3.1vw,14px)}.thanks-panel,.hadith-panel{padding:18px}.thanks-heading{white-space:nowrap;font-size:clamp(28px,7vw,45px)}.thanks-ar{text-align:left}.thanks-person{align-items:flex-start}}


/* Teaching layout refinement, same application version */
.deck-header{position:relative;display:flex;align-items:center;gap:10px;padding:8px clamp(12px,1.4vw,22px);height:var(--header-h);min-width:0}
.deck-header .brand{min-width:0;flex:1 1 auto}.deck-header .brand h1{font-size:clamp(13px,1.2vw,18px);letter-spacing:0;line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.deck-header .brand p{font-size:clamp(10px,.85vw,12px);margin-top:2px;white-space:nowrap}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:clamp(5px,.6vw,9px);margin-left:auto;flex:0 0 auto}.deck-header .home-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:clamp(34px,3vw,43px);height:clamp(34px,3vw,43px);min-width:0;padding:8px;border-radius:12px;flex:0 0 auto}.deck-header .home-btn svg{height:20px;width:20px;display:block;flex:none}.session-indicator{position:absolute;right:2px;bottom:1px;font-size:9px;line-height:1;border-radius:4px;padding:1px 2px;background:#fff;color:#123b33;font-weight:900}
.deck-header .nav[hidden]{display:none!important}.deck-header .nav:not([hidden]){display:grid!important;position:absolute;z-index:200;right:14px;top:calc(100% + 6px);left:auto;bottom:auto;width:min(580px,calc(100vw - 28px));max-width:calc(100vw - 28px);max-height:min(74dvh,580px);overflow-y:auto;overflow-x:hidden;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:12px;border:1px solid #dce7df;border-radius:17px;background:#fff;box-shadow:0 20px 55px #071b1a35;color:#162f2a}
.deck-header .nav button{white-space:normal;text-align:left;min-width:0;max-width:100%;overflow-wrap:anywhere;background:#f2f7f4;color:#19392f;border:1px solid #dae6db;border-radius:9px;padding:10px 12px;font-size:clamp(11px,.85vw,13px);line-height:1.25}.deck-header .nav button.active{background:#276f63;color:white}
/* Clean centred login, visually balanced without artificial tall columns */
#loginScreen{padding:clamp(12px,1.6vw,24px);place-items:center;align-content:center}
#loginScreen .login-panel{width:100%;max-width:1540px;height:auto;min-height:0;max-height:calc(100dvh - 2 * clamp(12px,1.6vw,24px));display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);align-items:stretch;margin:auto;overflow:hidden;border-radius:20px}
#loginScreen .login-art{padding:clamp(15px,2.1vw,34px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-height:0}
#loginScreen .login-art h1{font-size:clamp(25px,2.6vw,42px);line-height:1.05;margin:4px 0;text-align:center}
#loginScreen .login-art>p{margin:2px 0 12px;font-size:clamp(14px,1.2vw,19px)}
#loginScreen .login-art .quran-line{font-size:clamp(18px,1.7vw,26px);line-height:1.5;text-align:center}
#loginScreen .login-art .visual-icons{width:100%;max-width:700px;gap:10px;padding:clamp(12px,1.2vw,20px);margin:8px auto 0}
#loginScreen .visual-core h2{font-size:clamp(17px,1.55vw,23px);margin:3px 0}#loginScreen .visual-core p{font-size:clamp(11px,1vw,14px);margin:0}
#loginScreen .visual-icon-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}#loginScreen .visual-icon-card{min-width:0;min-height:73px;padding:9px 5px;gap:5px}#loginScreen .visual-icon-card svg{width:clamp(22px,2vw,31px);height:clamp(22px,2vw,31px)}#loginScreen .visual-icon-card b{font-size:clamp(10px,.85vw,13px);line-height:1.2;text-align:center}
#loginScreen .login-form{box-sizing:border-box;align-self:center;justify-content:center;display:flex;flex-direction:column;gap:clamp(7px,.75vh,11px);padding:clamp(22px,3.7vw,64px);max-height:100%;min-width:0}
#loginScreen .login-form h2{font-size:clamp(28px,2.8vw,40px);margin:2px 0}#loginScreen .login-form p{font-size:clamp(12px,1.05vw,15px);line-height:1.5;margin:0 0 6px}
#loginScreen .login-form label{margin:3px 0 0;font-size:13px}#loginScreen .login-form input{padding:clamp(10px,1vh,14px) 13px;height:clamp(40px,5vh,50px);font-size:clamp(13px,1vw,15px)}#loginScreen .login-submit{padding:13px 18px;margin-top:9px;min-height:46px;display:flex;align-items:center;justify-content:center;gap:9px}
#loginScreen .admin-credentials[hidden]{display:none!important}#loginScreen .admin-credentials:not([hidden]){display:grid!important;visibility:visible!important;opacity:1!important;gap:6px;margin:4px 0;background:#eef7f2;border:1px solid #acd5c4;min-height:76px;order:0}
#loginScreen .login-status,#loginScreen .status{min-height:0;margin:0}
/* Balanced infographic teaching card system */
.slide-inner,.slot-layout,.grid-2,.teaching-slide,.teaching-slide *{min-width:0}
.slide-title{align-items:center;gap:14px;margin-bottom:3px}.slide-title h2{font-size:clamp(26px,2.65vw,43px);line-height:1.12;letter-spacing:-.6px;overflow-wrap:anywhere}.slide-title p{font-size:clamp(13px,1.06vw,17px);line-height:1.4;max-width:85ch}
.teaching-slide .slide-inner{gap:clamp(9px,1.2vh,16px)}.teaching-slide .slide-title{flex:0 0 auto}.teaching-slide .lesson-kicker{font-size:clamp(10px,.8vw,12px)}
.teaching-slide .lesson-grid,.teaching-slide .note-grid,.teaching-slide .teaching-grid{gap:clamp(9px,.9vw,15px)}
.teaching-slide .lesson-card,.teaching-slide .note-card,.teaching-slide .teach-card{min-width:0;overflow-wrap:anywhere;line-height:1.4}
.teaching-slide .lesson-card h3,.teaching-slide .note-card h3{font-size:clamp(16px,1.25vw,20px);line-height:1.25;margin-bottom:7px}
.slot-note{border-radius:15px;padding:clamp(10px,.9vw,15px)}.slot-note summary{font-size:clamp(12px,.98vw,15px)}.prompt-example{border-radius:10px;margin:8px 0;font-size:clamp(11px,.8vw,13px);line-height:1.5;max-width:100%}
.copy-note,.slash-copy{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;gap:5px;width:auto;min-height:36px;font-size:12px;padding:8px 12px;border:1px solid #b9d9ca!important;border-radius:9px!important;background:#eaf7f0!important;color:#175b49!important;font-weight:800!important;cursor:pointer}
.slash-example{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px 12px;padding:12px;border:1px solid #d8e7dc;border-radius:13px;background:#fff;margin:8px 0}.slash-example code{grid-column:1;display:block;font-size:clamp(11px,.85vw,13px);font-weight:700;line-height:1.4}.slash-example p{grid-column:1;margin:0;font-size:12px;line-height:1.45}.slash-example .slash-copy{grid-column:2;grid-row:1/span 2;margin:0;white-space:nowrap}.slash-group{min-width:0}.slash-chip{max-width:100%;overflow-wrap:anywhere}
.submission-wrap{align-items:stretch}.submit-card,.showcase-card{min-width:0}.show-preview-wrap{aspect-ratio:16/9;overflow:hidden}.show-preview{width:100%;height:100%;object-fit:contain}
@media(max-width:1000px){#loginScreen .login-panel{grid-template-columns:1fr;max-height:none;overflow:visible}#loginScreen .login-art .visual-icons{display:none}#loginScreen .login-art{padding:20px}#loginScreen .login-form{padding:clamp(19px,3vw,35px)}.deck-header .brand p{display:none}}
@media(max-width:700px){.deck-header{padding:7px 9px;gap:5px}.deck-header .brand-mark{width:34px;height:34px;font-size:12px}.deck-header .brand h1{font-size:clamp(11px,3.4vw,14px)}.header-actions{gap:4px}.deck-header .home-btn{width:34px;height:34px;border-radius:9px;padding:7px}.deck-header .home-btn svg{height:17px;width:17px}.deck-header .session-nav{display:none}.deck-header .nav:not([hidden]){position:fixed;left:8px;right:8px;top:calc(var(--header-h) + 5px);bottom:auto;width:auto;max-height:min(65dvh,520px);grid-template-columns:1fr 1fr;z-index:250}#loginScreen{padding:9px;overflow-y:auto;display:block}#loginScreen .login-panel{min-height:0;max-height:none;border-radius:15px}#loginScreen .login-art{gap:0;padding:18px 12px}#loginScreen .login-art h1{font-size:26px}#loginScreen .login-art .quran-line{font-size:19px}#loginScreen .login-form{padding:22px 17px 24px}.slide-title h2{font-size:clamp(25px,6vw,34px)}.slash-example{grid-template-columns:minmax(0,1fr)}.slash-example .slash-copy{grid-column:1;grid-row:auto;justify-self:start}.slide{overflow-x:hidden}}
@media(min-width:1001px) and (max-height:760px){#loginScreen .login-panel{max-height:calc(100dvh - 20px)}#loginScreen .login-art{padding:11px 22px}#loginScreen .login-art .visual-icon-card{min-height:60px;padding:5px}#loginScreen .login-art .visual-icons{padding:9px;gap:5px}#loginScreen .login-form{padding:15px clamp(25px,3vw,46px);gap:6px}#loginScreen .login-art .quran-line{font-size:18px}#loginScreen .login-art h1{font-size:30px}}
.lesson-bottom{align-items:stretch}.lesson-prompt{display:flex;flex-direction:column;gap:9px}.lesson-prompt .lesson-copy{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;border:1px solid #b9d9ca;background:#eaf7f0;color:#175b49;border-radius:9px;font-size:12px;padding:9px 14px;min-height:36px;white-space:normal}.lesson-card{text-align:left}.lesson-num{display:inline-grid;place-items:center;flex:none}.lesson-tip{display:flex;flex-direction:column;justify-content:center}.visual-icon-card svg{display:block;flex:none;max-width:100%}.visual-icon-card{overflow:hidden}.slide-inner .panel,.slide-inner .hero-card,.slide-inner .lesson-card{box-sizing:border-box;max-width:100%}
@media(min-width:1101px) and (max-height:760px){.lesson-grid{gap:8px}.lesson-card{padding:10px 13px}.lesson-card p{font-size:12px;line-height:1.32}.lesson-card h3{margin:5px 0;font-size:16px}.lesson-bottom{gap:8px}.lesson-prompt,.lesson-tip{padding:10px}}