:root{
  --bg:#020817;--panel:#071a33;--panel2:#0b2547;--line:rgba(93,186,255,.20);
  --text:#edf7ff;--muted:#93abc5;--cyan:#02c8ff;--blue:#1677ff;--green:#2fe59f;
  --purple:#9b68ff;--amber:#ffb23e;--red:#ff5e73;--shadow:0 20px 70px rgba(0,174,255,.14)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,system-ui,sans-serif;color:var(--text);background:radial-gradient(circle at 70% 10%,rgba(0,200,255,.18),transparent 34%),linear-gradient(180deg,#020711,#03152b 55%,#020817);min-height:100vh}button,a{font:inherit;color:inherit}button{cursor:pointer}a{text-decoration:none}.hidden{display:none!important}

/* ==================== TOPBAR ==================== */
.topbar{height:78px;display:flex;align-items:center;gap:24px;padding:0 6vw;border-bottom:1px solid var(--line);background:rgba(2,8,23,.82);backdrop-filter:blur(18px);position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:12px;min-width:max-content}
.mark{width:42px;height:42px;border:2px solid var(--cyan);border-radius:50%;box-shadow:0 0 24px rgba(0,200,255,.5);position:relative}
.mark:before{content:"";position:absolute;inset:8px;border:1px dashed rgba(0,200,255,.75);border-radius:50%}
.mark:after{content:"";position:absolute;inset:17px;background:var(--cyan);border-radius:50%;box-shadow:0 0 12px var(--cyan)}
.brand strong{display:block;font-size:27px;letter-spacing:6px;line-height:1}
.brand small{display:block;text-transform:uppercase;font-size:9px;color:#d8edff;letter-spacing:.6px}
.nav{display:flex;gap:22px;flex:1;justify-content:center;font-weight:750;font-size:14px}
.nav button{background:transparent;border:0;padding:27px 0;border-bottom:2px solid transparent}
.nav button:hover,.nav button.active{color:var(--cyan);border-bottom-color:var(--cyan)}
.menuBtn{display:none;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:9px 12px}
.btn{border:0;border-radius:13px;padding:12px 18px;background:linear-gradient(135deg,var(--cyan),#3679ff);font-weight:800;box-shadow:0 12px 28px rgba(0,188,255,.24)}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn.outline{background:rgba(0,180,255,.07);border:1px solid rgba(0,200,255,.55);box-shadow:none;color:#c6f0ff}
.btn.ghost{background:rgba(255,255,255,.05);border:1px solid var(--line);box-shadow:none}
.btn.success{background:linear-gradient(135deg,var(--green),#1a9d6c)}
.btn.full-width{width:100%;margin-top:12px}
.btn.small{padding:8px 12px;font-size:12px}
.page{padding:30px 6vw 42px;animation:fade .25s ease-out}
@keyframes fade{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ==================== HERO ==================== */
.hero{display:grid;grid-template-columns:1fr 1.12fr;gap:44px;align-items:center;padding:22px 0 14px}
.hero h1{font-size:52px;line-height:1.03;letter-spacing:-1.4px;margin:0 0 12px}
.hero h1 span{color:var(--cyan)}
.hero h2{font-size:19px;margin:0 0 14px}
.hero p{font-size:17px;line-height:1.65;color:#c3d4e6;max-width:720px}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.globeBox{min-height:330px;position:relative;border:1px solid var(--line);border-radius:28px;background:radial-gradient(circle at 55% 44%,rgba(0,200,255,.32),transparent 34%),linear-gradient(135deg,rgba(9,31,60,.82),rgba(3,10,23,.22));box-shadow:var(--shadow);overflow:hidden}
.globe{position:absolute;left:50%;top:48%;width:230px;height:230px;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(0,200,255,.5);background:radial-gradient(circle at 35% 28%,rgba(190,244,255,.8),transparent 8%),radial-gradient(circle at 58% 52%,rgba(0,190,255,.35),transparent 42%),repeating-linear-gradient(90deg,transparent 0 16px,rgba(0,200,255,.12) 17px),repeating-linear-gradient(0deg,transparent 0 16px,rgba(0,200,255,.1) 17px);box-shadow:0 0 80px rgba(0,200,255,.58)}
.orbit{position:absolute;left:50%;top:48%;width:320px;height:78px;border:1px solid rgba(0,200,255,.45);border-radius:50%;transform:translate(-50%,-50%) rotate(12deg)}
.tag{position:absolute;padding:13px 15px;border:1px solid var(--line);border-radius:15px;background:rgba(7,26,51,.88);box-shadow:0 10px 30px rgba(0,0,0,.24);min-width:175px}
.tag strong{display:block;font-size:13px}
.tag small{color:#b7cce1}
.t1{left:34px;top:38px}.t2{right:34px;top:54px}.t3{left:70px;bottom:62px}.t4{right:68px;bottom:56px}.t5{left:50%;bottom:22px;transform:translateX(-50%)}

/* ==================== BOX & GRID ==================== */
.box{border:1px solid var(--line);border-radius:20px;background:rgba(4,16,34,.74);box-shadow:var(--shadow);padding:17px;margin:18px 0}
.title{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:14px}
.title h3{margin:0;font-size:20px}
.title p{margin:5px 0 0;color:var(--muted);font-size:13px}
.grid{display:grid;gap:15px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.card{border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,rgba(12,42,79,.72),rgba(5,17,36,.72));padding:17px;position:relative;overflow:hidden}
.card h4{margin:0 0 8px}
.card p{margin:0;color:#b8c9dc;font-size:13px;line-height:1.45}
.num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(0,200,255,.18);font-weight:900;margin-bottom:12px}
.icon{font-size:30px;margin-bottom:8px}
.metric strong{font-size:28px;display:block}
.role{min-height:174px;display:flex;flex-direction:column;justify-content:space-between}
.role .btn{width:100%;margin-top:15px}
.footer{border-top:1px solid var(--line);padding-top:22px;margin-top:22px;color:#a9bdd1;display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:25px}
.footer h4{color:var(--text);margin:0 0 8px}
.footer button,.footer p{background:transparent;border:0;color:#a9bdd1;display:block;text-align:left;margin:7px 0;padding:0;font-size:13px}

/* ==================== ABOUT PAGE ==================== */
.about-page{max-width:1400px;margin:0 auto}
.about-hero{padding:40px 0 20px}
.about-hero h1{font-size:48px;margin:0 0 16px}
.about-hero h1 span{color:var(--cyan)}
.about-hero p{color:var(--muted);font-size:17px;line-height:1.7;max-width:600px}

/* Globe Diagram */
.globe-section{padding:40px 0}
.globe-diagram{display:grid;grid-template-columns:1fr auto 1fr;gap:40px;align-items:center;position:relative}
.feature-item{display:flex;gap:16px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:16px;background:rgba(7,26,51,.6);max-width:320px}
.feature-item.left{margin-left:auto}
.feature-item.right{margin-right:auto}
.feature-icon{width:48px;height:48px;border:1px solid var(--cyan);border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.feature-icon svg{width:24px;height:24px;color:var(--cyan)}
.feature-content strong{display:block;font-size:14px;margin-bottom:4px}
.feature-content span{font-size:12px;color:var(--muted)}
.f1{grid-column:1;grid-row:1}.f2{grid-column:1;grid-row:2}.f3{grid-column:1;grid-row:3}
.f4{grid-column:3;grid-row:1}.f5{grid-column:3;grid-row:2}.f6{grid-column:3;grid-row:3}

/* Center Globe */
.center-globe{grid-column:2;grid-row:1/4;width:320px;height:320px;position:relative;display:flex;align-items:center;justify-content:center}
.globe-core{width:200px;height:200px;position:relative}
.globe-inner{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(0,200,255,.4),transparent 50%),radial-gradient(circle at 70% 70%,rgba(0,100,200,.3),transparent 40%);border:2px solid var(--cyan);box-shadow:0 0 60px rgba(0,200,255,.4),inset 0 0 40px rgba(0,200,255,.2)}
.globe-ring{position:absolute;border:1px solid rgba(0,200,255,.4);border-radius:50%}
.ring1{inset:-20px;transform:rotateX(70deg)}
.ring2{inset:-40px;transform:rotateX(70deg) rotateZ(30deg)}
.ring3{inset:-60px;transform:rotateX(70deg) rotateZ(-30deg)}
.globe-label{position:absolute;text-align:center}
.globe-label strong{display:block;font-size:28px;letter-spacing:4px}
.globe-label span{display:block;font-size:11px;color:var(--muted)}

/* Alur Section */
.alur-section{margin-top:40px}
.section-header{display:flex;gap:16px;align-items:center;margin-bottom:24px}
.section-icon{width:48px;height:48px;border:1px solid var(--cyan);border-radius:12px;display:grid;place-items:center}
.section-icon svg{width:24px;height:24px;color:var(--cyan)}
.section-header h3{margin:0;font-size:22px}
.section-header p{margin:4px 0 0;color:var(--muted);font-size:13px}
.alur-flow{display:flex;align-items:flex-start;gap:8px;overflow-x:auto;padding:16px 0}
.alur-step{flex:0 0 140px;text-align:center;padding:16px 12px;border:1px solid var(--line);border-radius:16px;background:rgba(7,26,51,.6)}
.alur-icon{width:40px;height:40px;margin:0 auto 8px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center}
.alur-icon svg{width:20px;height:20px;color:var(--cyan)}
.alur-num{width:24px;height:24px;margin:0 auto 8px;border-radius:50%;background:rgba(0,200,255,.2);display:grid;place-items:center;font-size:12px;font-weight:700}
.alur-step strong{display:block;font-size:12px;margin-bottom:4px}
.alur-step span{font-size:10px;color:var(--muted);line-height:1.4}
.alur-arrow{color:var(--cyan);font-size:18px;padding-top:40px}

/* Layers Section */
.layers-section{margin-top:20px}
.layers-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.layer-card{text-align:center;padding:20px 12px;border:1px solid var(--line);border-radius:16px;background:rgba(7,26,51,.6)}
.layer-num{width:28px;height:28px;margin:0 auto 12px;border-radius:50%;background:rgba(0,200,255,.2);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--cyan)}
.layer-icon{width:48px;height:48px;margin:0 auto 12px;border:1px solid var(--line);border-radius:12px;display:grid;place-items:center}
.layer-icon svg{width:24px;height:24px;color:var(--cyan)}
.layer-card strong{display:block;font-size:13px;margin-bottom:6px}
.layer-card span{font-size:11px;color:var(--muted);line-height:1.4}

/* Features Bar */
.features-bar{display:flex;gap:16px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:30px 0}
.feature-badge{flex:1;display:flex;gap:12px;align-items:center}
.badge-icon{width:40px;height:40px;border:1px solid var(--cyan);border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.badge-icon svg{width:20px;height:20px;color:var(--cyan)}
.feature-badge strong{display:block;font-size:13px}
.feature-badge span{font-size:11px;color:var(--muted)}

/* CTA Section */
.cta-section{display:flex;align-items:center;justify-content:space-between;padding:32px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,rgba(7,26,51,.8),rgba(3,15,35,.9));margin:30px 0}
.cta-content{display:flex;gap:20px;align-items:center}
.cta-icon{width:64px;height:64px;border:2px solid var(--cyan);border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.cta-icon svg{width:32px;height:32px;color:var(--cyan)}
.cta-text h2{margin:0 0 8px;font-size:22px}
.cta-text p{margin:0;color:var(--muted);font-size:14px}
.cta-btn{white-space:nowrap}

/* ==================== DASHBOARD ==================== */
.dashboard-wrapper{min-height:100vh}
.dash{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 78px)}
.side{border-right:1px solid var(--line);background:rgba(2,9,24,.9);padding:20px 16px;display:flex;flex-direction:column;gap:12px}
.side .brand{margin-bottom:20px}
.side .brand strong{font-size:24px;letter-spacing:4px}
.sideNav{display:grid;gap:6px}
.sideNav button{display:flex;align-items:center;gap:12px;text-align:left;background:transparent;border:0;border-radius:14px;padding:12px 14px;color:#c7d9eb;font-weight:600;font-size:14px}
.sideNav button svg{width:20px;height:20px;flex-shrink:0}
.sideNav button.active,.sideNav button:hover{background:linear-gradient(90deg,rgba(0,167,255,.9),rgba(0,122,255,.32));color:#fff}
.sideCard{margin-top:auto;border:1px solid var(--line);border-radius:16px;padding:16px;background:rgba(0,170,255,.08)}
.ai-assistant{display:flex;gap:12px;margin-bottom:12px}
.ai-avatar{width:40px;height:40px;border:1px solid var(--cyan);border-radius:10px;display:grid;place-items:center}
.ai-avatar svg{width:20px;height:20px;color:var(--cyan)}
.ai-assistant strong{display:block;font-size:13px;color:var(--cyan)}
.ai-assistant p{margin:4px 0 0;font-size:11px;color:var(--muted)}
.ai-btn{width:100%;background:linear-gradient(135deg,var(--cyan),#3679ff)}
.system-status{display:flex;align-items:center;gap:8px;padding:12px;font-size:12px;color:var(--muted)}
.status-dot{width:8px;height:8px;background:var(--green);border-radius:50%}

/* Dashboard Head */
.work{padding:24px 30px 36px;background:rgba(3,12,28,.5)}
.dashHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:20px}
.dashTitle h1{margin:0;font-size:26px;display:flex;align-items:center;gap:12px}
.portal-badge{font-size:11px;padding:4px 10px;background:rgba(0,200,255,.15);border:1px solid var(--cyan);border-radius:6px;color:var(--cyan);font-weight:600}
.dashTitle p{margin:6px 0 0;color:var(--muted);font-size:14px}
.dashRight{display:flex;align-items:center;gap:16px}
.search-box{position:relative;display:flex;align-items:center}
.search-box svg{position:absolute;left:14px;width:18px;height:18px;color:var(--muted)}
.search{min-width:340px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:13px;padding:12px 14px 12px 44px;color:#d9edff}
.search-hint{position:absolute;right:14px;font-size:11px;color:var(--muted);background:rgba(255,255,255,.08);padding:2px 6px;border-radius:4px}
.icon-btn{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);display:grid;place-items:center;position:relative}
.icon-btn svg{width:20px;height:20px;color:var(--text)}
.notif-badge{position:absolute;top:-4px;right:-4px;width:18px;height:18px;background:var(--red);border-radius:50%;font-size:10px;display:grid;place-items:center;font-weight:700}
.profile{border:1px solid var(--line);border-radius:14px;padding:10px 14px;background:rgba(255,255,255,.04);display:flex;align-items:center;gap:12px}
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#41d6ff,#193c86);display:grid;place-items:center;font-weight:900;font-size:16px}
.profile strong{display:block;font-size:14px}
.role-text{font-size:12px;color:var(--muted)}
.chevron{width:16px;height:16px;color:var(--muted);margin-left:8px}

/* ==================== LEARNER DASHBOARD ==================== */
.topic-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border:1px solid var(--line);border-radius:16px;background:rgba(7,26,51,.6);margin-bottom:20px}
.topic-info{display:flex;align-items:center;gap:16px}
.topic-info svg{width:24px;height:24px;color:var(--cyan)}
.topic-info h2{margin:0;font-size:20px}
.topic-info p{margin:4px 0 0;color:var(--muted);font-size:13px}
.topic-nav{display:flex;gap:12px}

/* Learning Grid */
.learning-grid{display:grid;grid-template-columns:1fr 1fr 0.8fr;gap:16px;margin-bottom:20px}
.panel{border:1px solid var(--line);border-radius:16px;background:rgba(5,18,38,.8);padding:16px;min-width:0}
.panel-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.panel-header h3{margin:0;font-size:16px;flex:1}
.panel-num{width:24px;height:24px;background:rgba(0,200,255,.2);border-radius:6px;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--cyan)}
.live-badge{font-size:11px;color:var(--red);font-weight:600}
.auto-saved{font-size:11px;color:var(--muted)}
.online-badge{font-size:11px;color:var(--green);font-weight:600}
.link-btn{font-size:12px;color:var(--cyan);background:none;border:none}

/* Video Panel */
.video-panel{grid-row:span 1}
.video-container{border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#071931,#0b2c58)}
.video-placeholder{height:200px;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;background:radial-gradient(circle at 30% 30%,rgba(0,200,255,.2),transparent 50%)}
.video-content h2{margin:0;font-size:22px;line-height:1.2}
.video-topic{display:inline-block;margin-top:8px;padding:4px 12px;background:rgba(0,200,255,.2);border-radius:20px;font-size:12px}
.video-presenter{display:flex;align-items:center;gap:10px;margin-top:16px}
.presenter-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#41d6ff,#193c86);display:grid;place-items:center;font-weight:700}
.video-presenter strong{display:block;font-size:13px}
.video-presenter span{font-size:11px;color:var(--muted)}
.video-controls{padding:12px;background:rgba(0,0,0,.3)}
.video-progress{height:4px;background:rgba(255,255,255,.2);border-radius:2px;margin-bottom:10px}
.video-progress-bar{height:100%;background:var(--cyan);border-radius:2px}
.video-actions{display:flex;align-items:center;gap:12px}
.control-btn{width:32px;height:32px;border:none;background:rgba(255,255,255,.1);border-radius:8px;color:white;font-size:12px}
.video-time{font-size:12px;color:var(--muted)}
.video-speed{font-size:11px;padding:2px 8px;background:rgba(255,255,255,.1);border-radius:4px}
.video-right{margin-left:auto;display:flex;align-items:center;gap:12px}

/* Whiteboard Panel */
.whiteboard-panel{}
.whiteboard-container{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.whiteboard-toolbar{display:flex;gap:8px;padding:10px;border-bottom:1px solid var(--line)}
.wb-btn{width:32px;height:32px;border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:8px;font-size:14px}
.whiteboard-content{padding:20px;min-height:180px}
.wb-title{font-size:20px;font-style:italic;text-align:center;margin-bottom:16px}
.wb-concept{font-size:13px;margin-bottom:16px}
.wb-concept strong{color:var(--cyan)}
.wb-concept ul{margin:8px 0;padding-left:20px}
.wb-concept li{margin:4px 0;color:var(--muted)}
.wb-diagram{display:flex;flex-direction:column;align-items:center;gap:12px}
.wb-node{padding:8px 16px;border:1px solid var(--line);border-radius:8px;font-size:12px;text-align:center}
.wb-node.main{background:rgba(0,200,255,.1);border-color:var(--cyan)}
.wb-node.active{background:rgba(0,200,255,.2);border-color:var(--cyan)}
.wb-node.small{font-size:11px}
.wb-node.small span{display:block;font-size:10px;color:var(--muted)}
.wb-branches{display:flex;gap:20px}
.wb-sub-branches{display:flex;gap:12px}
.whiteboard-footer{display:flex;align-items:center;gap:8px;padding:10px;border-top:1px solid var(--line)}
.whiteboard-footer span{font-size:12px;color:var(--muted);margin:0 auto}

/* Chat Panel */
.chat-panel{}
.chat-container{display:flex;flex-direction:column;height:calc(100% - 40px)}
.chat-messages{flex:1;overflow-y:auto;padding:8px 0}
.chat-msg{display:flex;gap:10px;margin-bottom:12px}
.chat-msg.user{justify-content:flex-end}
.chat-msg.user .chat-content{background:rgba(0,200,255,.15);border:1px solid rgba(0,200,255,.3)}
.chat-avatar{width:32px;height:32px;border:1px solid var(--cyan);border-radius:8px;display:grid;place-items:center;flex-shrink:0}
.chat-avatar svg{width:16px;height:16px;color:var(--cyan)}
.chat-content{max-width:85%;padding:12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04)}
.chat-content strong{display:block;font-size:13px;color:var(--cyan);margin-bottom:6px}
.chat-content p{margin:0;font-size:13px;line-height:1.5}
.chat-content ul{margin:8px 0;padding-left:16px;font-size:12px}
.chat-content li{margin:4px 0}
.chat-time{display:block;font-size:10px;color:var(--muted);margin-top:6px;text-align:right}
.chat-suggestions{display:flex;gap:8px;padding:10px 0;flex-wrap:wrap}
.suggestion-btn{padding:6px 12px;border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:20px;font-size:11px;color:var(--muted)}
.chat-input{display:flex;gap:10px;padding-top:10px;border-top:1px solid var(--line)}
.chat-input input{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:24px;padding:12px 16px;color:white}
.mic-btn{width:44px;height:44px;border:none;background:linear-gradient(135deg,var(--cyan),#3679ff);border-radius:50%;font-size:18px}

/* Bottom Grid */
.bottom-grid{display:grid;grid-template-columns:1fr 1fr 1fr 0.8fr;gap:16px;margin-bottom:20px}
.material-icon{font-size:18px}
.materials-list{display:flex;flex-direction:column;gap:8px}
.material-item{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02)}
.material-icon-box{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:700}
.material-info{flex:1;min-width:0}
.material-info strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.material-info span{font-size:10px;color:var(--muted)}
.download-btn{width:32px;height:32px;border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:8px}

/* Progress Panel */
.progress-content{text-align:center}
.progress-circle{position:relative;width:100px;height:100px;margin:0 auto 16px}
.progress-circle svg{width:100%;height:100%;transform:rotate(-90deg)}
.progress-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.progress-text strong{font-size:24px;color:var(--cyan)}
.progress-text span{font-size:10px;color:var(--muted)}
.progress-items{text-align:left;margin-bottom:16px}
.progress-item{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px}
.check-icon{width:18px;height:18px;border:1px solid var(--line);border-radius:4px;display:grid;place-items:center;font-size:10px}
.check-icon.checked{background:var(--green);border-color:var(--green);color:white}
.percent{margin-left:auto;color:var(--muted)}
.total-progress{padding-top:12px;border-top:1px solid var(--line);text-align:left}
.total-progress span{font-size:11px;color:var(--muted)}
.progress-bar-full{height:8px;background:rgba(255,255,255,.1);border-radius:4px;margin:8px 0}
.progress-fill{height:100%;background:var(--cyan);border-radius:4px}

/* Assignment Panel */
.assignment-content h4{margin:0 0 8px;font-size:14px}
.assignment-content p{margin:0 0 16px;font-size:12px;color:var(--muted);line-height:1.5}
.deadline{display:flex;align-items:center;gap:12px;padding:12px;background:rgba(255,94,115,.1);border:1px solid rgba(255,94,115,.3);border-radius:10px;margin-bottom:12px}
.deadline-icon{font-size:20px}
.deadline-text{font-size:12px;color:var(--muted)}
.deadline-date{color:var(--red)}

/* Practice Panel */
.practice-panel{background:linear-gradient(135deg,rgba(155,104,255,.1),rgba(7,26,51,.8))}
.practice-desc{margin:0 0 12px;font-size:13px;color:var(--muted)}
.practice-btn{background:linear-gradient(135deg,var(--purple),#6b4adb)}
.recommendations{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.recommendations strong{display:block;font-size:12px;margin-bottom:10px}
.rec-item{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;font-size:12px}
.rec-icon{font-size:14px}
.rec-count{margin-left:auto;color:var(--muted);font-size:11px}
.rec-arrow{color:var(--muted)}

/* Evidence Section */
.evidence-section{display:flex;gap:16px;align-items:stretch}
.evidence-panel{flex:1}
.evidence-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:16px}
.evidence-item{padding:16px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.evidence-item strong{display:block;margin-bottom:4px}
.evidence-item p{margin:0 0 12px;font-size:12px;color:var(--muted)}
.evidence-stat{margin:12px 0}
.big-number{font-size:32px;font-weight:700;color:var(--text)}
.big-number.cyan{color:var(--cyan)}
.evidence-stats{display:flex;flex-direction:column;gap:12px}
.ev-stat{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02)}
.ev-icon{font-size:16px}
.ev-stat strong{font-size:16px;min-width:40px}
.ev-stat span{font-size:11px;color:var(--muted)}
.learner-badge{width:100px;height:100px;border:3px solid var(--cyan);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;background:radial-gradient(circle,rgba(0,200,255,.15),transparent);box-shadow:0 0 30px rgba(0,200,255,.3)}
.badge-ring strong{display:block;font-size:16px;letter-spacing:2px}
.badge-ring span{font-size:10px;color:var(--cyan)}

/* ==================== EXPERT DASHBOARD ==================== */
.workflow-steps{display:flex;gap:8px;padding:16px;border:1px solid var(--line);border-radius:16px;background:rgba(7,26,51,.5);margin-bottom:20px;overflow-x:auto}
.wf-step{flex:1;min-width:120px;text-align:center;padding:12px 8px;position:relative}
.wf-step.active{background:rgba(0,200,255,.1);border-radius:12px}
.wf-num{width:28px;height:28px;margin:0 auto 8px;border-radius:50%;background:rgba(0,200,255,.2);display:grid;place-items:center;font-size:12px;font-weight:700}
.wf-step.active .wf-num{background:var(--cyan);color:#000}
.wf-step strong{display:block;font-size:12px;margin-bottom:4px}
.wf-step span{font-size:10px;color:var(--muted)}
.wf-dot{width:8px;height:8px;margin:10px auto 0;border-radius:50%;background:rgba(255,255,255,.2)}
.wf-dot.active{background:var(--cyan)}

/* Expert Grid */
.expert-grid{display:grid;grid-template-columns:1fr 1.3fr 0.8fr;gap:16px;margin-bottom:20px}
.expert-grid-2{display:grid;grid-template-columns:1fr 1fr 0.8fr;gap:16px;margin-bottom:20px}

/* Topik Panel */
.topik-panel{}
.status-badge{font-size:11px;padding:4px 10px;border-radius:20px}
.status-badge.active{background:rgba(47,229,159,.15);color:var(--green)}
.topik-content{margin-bottom:16px}
.topik-row{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.topik-row:last-child{border-bottom:none}
.topik-label{min-width:80px;color:var(--muted)}
.topik-row.outcome{flex-direction:column}
.topik-row.outcome span{line-height:1.5}
.generate-btn{background:linear-gradient(135deg,var(--cyan),#3679ff);margin-top:8px}

/* Upload Panel */
.upload-panel{}
.upload-hint{font-size:11px;color:var(--muted)}
.upload-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:12px}
.upload-type{text-align:center;padding:16px 8px;border:1px dashed var(--line);border-radius:12px;cursor:pointer;transition:all .2s}
.upload-type:hover{border-color:var(--cyan);background:rgba(0,200,255,.05)}
.upload-icon{font-size:24px;margin-bottom:6px}
.upload-type strong{display:block;font-size:11px;margin-bottom:2px}
.upload-type span{font-size:9px;color:var(--muted)}
.upload-link{display:flex;align-items:center;gap:12px;padding:14px;border:1px dashed var(--line);border-radius:12px;cursor:pointer}
.upload-link span:first-child{font-size:20px}
.upload-desc{margin-left:auto;font-size:11px;color:var(--muted)}

/* Insight Panel */
.insight-panel{}
.time-select{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--text);font-size:12px}
.insight-list{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.insight-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02)}
.insight-icon{font-size:18px}
.insight-content{flex:1}
.insight-label{display:block;font-size:11px;color:var(--muted)}
.insight-value{display:block;font-size:16px}
.insight-sub{display:block;font-size:10px;color:var(--muted)}
.insight-link{font-size:11px;color:var(--cyan)}
.insight-btn{border-color:var(--cyan)}

/* Draft Panel */
.draft-panel{}
.draft-version{font-size:11px;padding:4px 10px;background:rgba(255,255,255,.1);border-radius:20px}
.draft-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
.draft-item{display:flex;align-items:flex-start;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02)}
.draft-icon{font-size:18px}
.draft-content{flex:1;min-width:0}
.draft-content strong{display:block;font-size:12px;margin-bottom:2px}
.draft-content span{font-size:10px;color:var(--muted)}
.draft-status{font-size:10px;padding:3px 8px;border-radius:12px;white-space:nowrap}
.draft-status.green{background:rgba(47,229,159,.15);color:var(--green)}
.draft-status.cyan{background:rgba(2,200,255,.15);color:var(--cyan)}

/* Review Panel */
.review-panel{}
.review-badge{font-size:11px;padding:4px 10px;background:rgba(255,178,62,.15);color:var(--amber);border-radius:20px}
.review-content{margin-bottom:16px}
.review-content label{display:block;font-size:13px;margin-bottom:8px}
.review-content textarea{width:100%;height:120px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;color:white;padding:14px;resize:none}
.attachment-row{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:12px;color:var(--muted)}
.file-limit{margin-left:auto}
.review-actions{display:flex;gap:10px}
.review-actions .btn{flex:1}

/* Timeline Panel */
.timeline-panel{}
.timeline-list{margin-bottom:16px}
.timeline-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);position:relative}
.timeline-item:last-child{border-bottom:none}
.timeline-item::before{content:'';position:absolute;left:14px;top:42px;width:2px;height:calc(100% - 28px);background:var(--line)}
.timeline-item:last-child::before{display:none}
.tl-icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:14px;flex-shrink:0}
.timeline-item.done .tl-icon{background:rgba(47,229,159,.2);color:var(--green)}
.timeline-item.current .tl-icon{background:rgba(255,178,62,.2);color:var(--amber)}
.timeline-item.pending .tl-icon{background:rgba(255,255,255,.1);color:var(--muted)}
.tl-content{flex:1}
.tl-content strong{display:block;font-size:13px;margin-bottom:2px}
.tl-content span{display:block;font-size:11px;color:var(--muted)}
.tl-time{margin-top:4px}
.expert-guide{display:flex;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.guide-icon{font-size:24px}
.expert-guide strong{display:block;font-size:13px;margin-bottom:2px}
.expert-guide p{margin:0;font-size:11px;color:var(--muted)}
.link-cyan{font-size:12px;color:var(--cyan);margin-top:6px;display:inline-block}

/* Dashboard Footer */
.dash-footer{display:flex;justify-content:space-between;align-items:center;padding:20px 0;margin-top:20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.footer-links{display:flex;gap:20px}
.footer-links a{color:var(--muted)}

/* ==================== LEGACY STYLES ==================== */
.kpi{border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,rgba(14,49,91,.72),rgba(6,17,37,.8));padding:17px}
.kpi h4{margin:0;color:#9fb8d4;font-size:13px}
.kpi strong{display:block;font-size:30px;margin:6px 0}
.trend{color:var(--green);font-size:12px}
.muted{color:var(--muted);font-size:13px}
.video{height:235px;border-radius:16px;background:radial-gradient(circle at 34% 30%,rgba(0,200,255,.26),transparent 26%),linear-gradient(135deg,#071931,#0b2c58);display:flex;align-items:end;padding:16px;margin-top:12px}
.whiteboard{padding:24px;background:rgba(255,255,255,.03);border-radius:14px;min-height:100px;text-align:center;line-height:1.9}
.chat{display:flex;flex-direction:column;gap:10px}
.bubble{padding:12px;background:rgba(255,255,255,.05);border-radius:14px;max-width:82%}
.bubble.me{align-self:flex-end;background:rgba(0,180,255,.18)}
.inputbar{display:flex;gap:8px;margin-top:10px}
.inputbar input{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:24px;padding:12px 16px;color:white}
.list{display:flex;flex-direction:column;gap:6px}
.item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.badge{font-size:11px;padding:4px 9px;background:rgba(0,200,255,.14);border-radius:20px;color:var(--cyan)}
.progress{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0}
.progress strong{font-size:13px}
.bar{height:7px;flex:1;background:rgba(255,255,255,.12);border-radius:6px;overflow:hidden}
.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),#3679ff);border-radius:6px}
.wf{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:20px 0}
.wf>div{text-align:center}
.dot{width:32px;height:32px;border-radius:50%;background:rgba(0,200,255,.18);display:grid;place-items:center;margin:0 auto 8px;font-weight:900;font-size:13px}
.upload{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.upload div{padding:14px 10px;border:1px dashed var(--line);border-radius:12px;text-align:center;font-size:13px;color:#a0c2db;cursor:pointer;transition:.2s}
.upload div:hover{border-color:var(--cyan);background:rgba(0,200,255,.06)}
.tableWrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.table th{background:rgba(255,255,255,.03);font-weight:700;font-size:12px;color:#9fb8d4}
.table td{font-size:13px}

/* ==================== RESPONSIVE ==================== */
@media (max-width:1280px){
  .learning-grid{grid-template-columns:1fr 1fr}
  .chat-panel{grid-column:span 2}
  .bottom-grid{grid-template-columns:repeat(2,1fr)}
  .expert-grid,.expert-grid-2{grid-template-columns:1fr 1fr}
  .insight-panel{grid-column:span 2}
  .timeline-panel{grid-column:span 2}
  .layers-grid{grid-template-columns:repeat(4,1fr)}
  .evidence-grid{grid-template-columns:1fr}
  .evidence-stats{flex-direction:row;flex-wrap:wrap}
}

@media (max-width:1100px){
  .hero,.g2,.g3,.dash{grid-template-columns:1fr}
  .g4,.g5{grid-template-columns:repeat(2,1fr)}
  .nav{display:none}
  .menuBtn{display:block;margin-left:auto}
  .topbar{padding:12px 18px;height:auto;flex-wrap:wrap}
  .topbar .btn.outline{display:none}
  .nav.mobileOpen{display:grid;grid-template-columns:1fr;width:100%;order:5;background:rgba(4,16,34,.92);border:1px solid var(--line);border-radius:16px;padding:8px}
  .nav.mobileOpen button{padding:12px;text-align:left}
  .side{display:none}
  .work{padding:18px}
  .dashHead{align-items:flex-start;flex-direction:column}
  .dashRight{width:100%;flex-wrap:wrap}
  .search{min-width:0;width:100%}
  .search-box{width:100%}
  .profile{width:100%}
  .mobileHome{display:inline-flex}
  .upload-grid{grid-template-columns:repeat(3,1fr)}
  .wf{grid-template-columns:repeat(3,1fr)}
  .globe-diagram{grid-template-columns:1fr;gap:20px}
  .center-globe{grid-column:1;grid-row:auto;width:200px;height:200px;margin:0 auto}
  .globe-core{width:140px;height:140px}
  .feature-item{max-width:none}
  .feature-item.left,.feature-item.right{margin:0}
  .layers-grid{grid-template-columns:repeat(2,1fr)}
  .features-bar{flex-wrap:wrap}
  .feature-badge{flex:0 0 calc(50% - 8px)}
  .cta-section{flex-direction:column;text-align:center;gap:20px}
  .cta-content{flex-direction:column}
  .learning-grid{grid-template-columns:1fr}
  .chat-panel{grid-column:auto}
  .expert-grid,.expert-grid-2{grid-template-columns:1fr}
  .insight-panel,.timeline-panel{grid-column:auto}
}

@media (max-width:640px){
  .page{padding:18px 14px 32px}
  .hero{gap:20px}
  .hero h1{font-size:36px}
  .hero h2{font-size:16px}
  .hero p{font-size:15px}
  .actions .btn{width:100%}
  .brand strong{font-size:21px;letter-spacing:4px}
  .brand small{font-size:8px}
  .mark{width:36px;height:36px}
  .globeBox{min-height:310px}
  .globe,.orbit{display:none}
  .tag{position:static;margin:10px;min-width:0}
  .t5{transform:none}
  .g4,.g5,.grid,.footer,.upload-grid,.wf{grid-template-columns:1fr!important}
  .box{padding:14px}
  .title{display:block}
  .metric strong{font-size:24px}
  .dashHead h1{font-size:22px}
  .work{padding:14px}
  .panel,.card,.kpi{padding:14px}
  .inputbar{flex-direction:column}
  .btn{width:auto}
  .topbar{gap:12px}
  .hero .btn{width:100%}
  .alur-flow{flex-direction:column;align-items:stretch}
  .alur-step{flex:none}
  .alur-arrow{display:none}
  .layers-grid{grid-template-columns:1fr!important}
  .features-bar{flex-direction:column}
  .feature-badge{flex:none}
  .bottom-grid{grid-template-columns:1fr}
  .evidence-section{flex-direction:column}
  .learner-badge{margin:0 auto}
  .workflow-steps{flex-direction:column}
  .wf-step{min-width:auto}
  .upload-grid{grid-template-columns:repeat(2,1fr)!important}
  .draft-grid{grid-template-columns:1fr}
  .review-actions{flex-direction:column}
  .topic-header{flex-direction:column;gap:16px}
  .topic-nav{width:100%}
  .topic-nav .btn{flex:1}
}

/* ==================== DONOR PAGE - V0 STYLE REBUILD ==================== */
html,body,#app{max-width:100%;overflow-x:hidden}
.donor-page{max-width:1600px;margin:0 auto;padding-top:18px}
.donor-page .footer{margin-left:0;margin-right:0}
.donor-grid-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,1.15fr);gap:38px;align-items:center;padding:10px 0 16px;min-height:300px}
.donor-hero-copy h1{font-size:48px;line-height:1.04;letter-spacing:-1.2px;margin:0 0 12px;color:#fff}
.donor-hero-copy h1 span{color:#25cfff;text-shadow:0 0 28px rgba(2,200,255,.28)}
.donor-hero-copy p{max-width:660px;margin:0;color:#c8d7e8;font-size:17px;line-height:1.65}
.donor-actions{margin-top:20px}.donor-primary{min-width:185px}.donor-secondary{min-width:160px;display:inline-flex;justify-content:center;gap:12px}
.donor-globe-area{position:relative;min-height:300px;border:0;background:radial-gradient(ellipse at center,rgba(0,185,255,.17),transparent 60%);overflow:visible}
.donor-glow{position:absolute;left:50%;top:60%;width:480px;height:120px;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(0,200,255,.24),transparent 68%);filter:blur(3px)}
.donor-globe{position:absolute;left:52%;top:47%;width:280px;height:280px;transform:translate(-50%,-50%)}
.donor-earth{position:absolute;inset:22px;border-radius:50%;border:1px solid rgba(0,205,255,.65);background:radial-gradient(circle at 34% 25%,rgba(129,230,255,.8),transparent 5%),radial-gradient(circle at 50% 45%,rgba(2,200,255,.32),transparent 48%),repeating-linear-gradient(90deg,transparent 0 12px,rgba(47,211,255,.17) 13px),repeating-linear-gradient(0deg,transparent 0 12px,rgba(47,211,255,.11) 13px);box-shadow:0 0 70px rgba(0,187,255,.55), inset 0 0 42px rgba(0,157,255,.22)}
.donor-earth:before{content:"";position:absolute;inset:16px;border-radius:50%;background:linear-gradient(135deg,transparent 20%,rgba(0,210,255,.22) 21% 23%,transparent 24% 55%,rgba(0,210,255,.18) 56% 58%,transparent 59%)}
.donor-orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(0,210,255,.42);border-radius:50%;transform:translate(-50%,-50%) rotate(12deg)}
.donor-orbit.o1{width:310px;height:90px}.donor-orbit.o2{width:245px;height:70px;transform:translate(-50%,-50%) rotate(-26deg)}
.donor-base-ring{position:absolute;left:50%;bottom:8px;width:330px;height:70px;transform:translateX(-50%);border:1px solid rgba(0,200,255,.4);border-radius:50%;box-shadow:0 0 38px rgba(0,200,255,.34)}
.donor-callout{position:absolute;display:flex;align-items:center;gap:12px;min-width:190px;padding:14px 17px;border:1px solid rgba(93,186,255,.25);border-radius:14px;background:rgba(6,22,45,.82);box-shadow:0 15px 35px rgba(0,0,0,.22)}
.donor-callout:after{content:"";position:absolute;top:50%;width:70px;border-top:2px dotted rgba(0,200,255,.7)}
.callout-left-top{left:6%;top:44px}.callout-left-bottom{left:0;top:140px}.callout-right-top{right:2%;top:44px}.callout-right-bottom{right:0;top:140px}
.callout-left-top:after,.callout-left-bottom:after{left:100%}.callout-right-top:after,.callout-right-bottom:after{right:100%}
.callout-icon{width:28px;height:28px;color:#02c8ff;font-size:24px;display:grid;place-items:center}.donor-callout strong{display:block;font-size:13px}.donor-callout small{display:block;color:#b7c7d8;font-size:11px;margin-top:2px}
.donor-impact-wrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;border:1px solid var(--line);border-radius:20px;background:rgba(4,16,34,.72);box-shadow:var(--shadow);padding:18px;margin:0 0 10px}.donor-impact-main h3,.donor-transparency h4{margin:0 0 14px;font-size:20px}.donor-impact-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.impact-card{min-height:96px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,rgba(11,38,73,.72),rgba(5,16,34,.72));padding:16px 12px;display:grid;grid-template-columns:46px 1fr;column-gap:8px;align-items:center}.impact-icon{grid-row:1/3;font-size:30px;color:var(--cyan);filter:drop-shadow(0 0 12px rgba(0,200,255,.35))}.impact-card strong{font-size:24px;line-height:1}.impact-card p{margin:4px 0 0;color:#d7e4f2;font-size:12px;line-height:1.35}.impact-card small{color:#b8c7d8}.donor-transparency{border:1px solid var(--line);border-radius:16px;background:rgba(8,28,55,.62);padding:18px 20px}.donor-transparency ul{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:11px}.donor-transparency li{display:flex;gap:10px;color:#c6d5e6;font-size:13px;line-height:1.35}.donor-transparency li span{color:#a6b8cb}.report-btn{width:100%;display:flex;justify-content:space-between;padding:10px 14px}
.donor-donation-box{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:28px;border:1px solid var(--line);border-radius:20px;background:rgba(4,16,34,.72);box-shadow:var(--shadow);padding:18px;margin:10px 0}.donor-section-title h3,.donor-payments h3{margin:0;font-size:20px}.donor-section-title p{margin:4px 0 12px;color:#adc0d4;font-size:13px}.amount-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.amount-card{position:relative;min-height:104px;border:1px solid var(--line);border-radius:14px;background:rgba(8,28,55,.62);padding:18px 16px;text-align:center}.amount-card.popular{border-color:#009dff;box-shadow:0 0 24px rgba(0,142,255,.25);background:linear-gradient(150deg,rgba(0,125,255,.22),rgba(7,26,51,.72))}.popular-badge{position:absolute;left:50%;top:-12px;transform:translateX(-50%);background:#008cff;color:white;font-size:10px;font-weight:800;border-radius:999px;padding:3px 12px}.amount-card strong{display:block;font-size:20px;margin-bottom:5px}.amount-card h4{margin:0 0 7px;font-size:13px}.amount-card p{margin:0;color:#b5c6d8;font-size:11px;line-height:1.45}.free-amount{text-align:left}.free-amount .btn{width:100%;margin-top:12px;padding:8px 12px}.payment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.payment-card{border:1px solid var(--line);border-radius:12px;background:rgba(7,26,51,.7);padding:15px;display:flex;align-items:center;gap:12px}.payment-card span{font-size:25px;color:var(--cyan);min-width:30px;text-align:center}.payment-card strong{display:block;font-size:12px}.payment-card small{display:block;color:#9fb4ca;font-size:10px;margin-top:2px}
.donor-program-row{display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:10px;margin:10px 0 8px}.donor-programs,.donor-quote-card{border:1px solid var(--line);border-radius:16px;background:rgba(4,16,34,.72);box-shadow:var(--shadow);padding:18px}.donor-programs h3{margin:0 0 15px;font-size:18px}.program-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.program-item{display:flex;gap:12px;padding-right:10px;border-right:1px solid rgba(93,186,255,.12)}.program-item:last-child{border-right:0}.program-item span{font-size:30px;color:var(--cyan)}.program-item strong{display:block;font-size:12px}.program-item small{display:block;color:#aebfd2;font-size:10px;line-height:1.35;margin-top:3px}.donor-quote-card{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-left:34px;background:radial-gradient(circle at 82% 45%,rgba(0,200,255,.18),transparent 37%),rgba(4,16,34,.72)}.donor-quote-card:after{content:"";position:absolute;right:-30px;bottom:-50px;width:240px;height:180px;background:repeating-linear-gradient(35deg,transparent 0 24px,rgba(0,200,255,.16) 25px);opacity:.35}.quote-mark{color:var(--cyan);font-size:52px;font-weight:900;line-height:.7}.donor-quote-card p{margin:0 0 10px;color:#d2e2f2;line-height:1.5}.donor-quote-card span{color:#aebfd2;font-size:12px}
@media(max-width:1280px){.donor-grid-hero{grid-template-columns:1fr}.donor-globe-area{min-height:310px}.donor-impact-wrap,.donor-donation-box,.donor-program-row{grid-template-columns:1fr}.donor-impact-grid{grid-template-columns:repeat(3,1fr)}.program-list{grid-template-columns:repeat(3,1fr)}.amount-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.donor-page{padding:16px 14px 32px}.donor-hero-copy h1{font-size:34px}.donor-hero-copy p{font-size:14px}.donor-grid-hero{gap:12px}.donor-globe-area{min-height:auto;display:grid;gap:10px}.donor-globe,.donor-glow{display:none}.donor-callout{position:relative;left:auto!important;right:auto!important;top:auto!important;min-width:0;width:100%;padding:12px}.donor-callout:after{display:none}.donor-impact-wrap,.donor-donation-box,.donor-programs,.donor-quote-card{padding:14px}.donor-impact-grid,.amount-grid,.payment-grid,.program-list{grid-template-columns:1fr}.impact-card{grid-template-columns:40px 1fr}.donor-actions .btn{width:100%}.program-item{border-right:0;border-bottom:1px solid rgba(93,186,255,.12);padding-bottom:10px}.program-item:last-child{border-bottom:0}.footer{grid-template-columns:1fr!important}}

/* ==================== LEARNER REVISION: REAL TEACHING PHOTO + ONE-WAY WHITEBOARD ==================== */
.real-teaching-photo{
  position:relative;
  min-height:260px;
  background-image:
    linear-gradient(90deg, rgba(2,8,23,.22), rgba(2,8,23,.18)),
    url('assets/virtual-teaching-photo.png');
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.real-teaching-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(2,8,23,.72) 100%);
  pointer-events:none;
}
.real-teaching-photo .video-content,
.real-teaching-photo .video-presenter{
  position:relative;
  z-index:2;
  text-shadow:0 2px 16px rgba(0,0,0,.78);
}
.real-teaching-photo .video-content{
  align-self:flex-end;
  margin-left:auto;
  text-align:left;
  max-width:230px;
  padding:12px 14px;
  border:1px solid rgba(0,200,255,.28);
  border-radius:14px;
  background:rgba(2,14,31,.45);
  backdrop-filter:blur(6px);
}
.real-teaching-photo .video-presenter{
  position:absolute;
  left:18px;
  bottom:18px;
  padding:8px 10px;
  border:1px solid rgba(0,200,255,.24);
  border-radius:14px;
  background:rgba(2,14,31,.56);
  backdrop-filter:blur(8px);
}
.lecture-view{
  color:var(--cyan);
  border:1px solid rgba(0,200,255,.35);
  padding:3px 8px;
  border-radius:999px;
  background:rgba(0,200,255,.08);
}
.lecture-whiteboard{
  overflow:hidden;
}
.lecture-whiteboard .whiteboard-content{
  min-height:280px;
  padding:22px 20px 24px;
}
.lecture-whiteboard .wb-title{
  margin-top:0;
}
.lecture-whiteboard .wb-diagram{
  margin-top:18px;
}
.lecture-whiteboard .wb-node{
  background:rgba(2,12,28,.54);
}
.lecture-whiteboard::before{
  content:"Materi satu arah dari kuliah • tidak ada mode editing";
  display:block;
  padding:9px 14px;
  border-bottom:1px solid var(--line);
  color:#9fcfe5;
  font-size:11px;
  letter-spacing:.2px;
  background:rgba(0,200,255,.045);
}
@media (max-width:640px){
  .real-teaching-photo{min-height:230px;background-position:center top;}
  .real-teaching-photo .video-content{max-width:190px;padding:10px;}
  .real-teaching-photo .video-content h2{font-size:18px;}
  .real-teaching-photo .video-presenter{left:12px;right:12px;bottom:12px;}
  .lecture-whiteboard .whiteboard-content{min-height:240px;padding:18px 14px;}
}

/* ==================== USER REQUEST UPDATE: SKETCH WHITEBOARD + COMPACT 3-PANEL VIEW ==================== */
@media (min-width:1281px){
  .dashboard-wrapper{height:100vh;overflow:hidden;}
  .dash{height:calc(100vh - 78px);min-height:0;}
  .work{height:calc(100vh - 78px);overflow:auto;padding:14px 20px 16px;}
  .dashHead{margin-bottom:12px;}
  .topic-header{padding:10px 14px;margin-bottom:12px;}
  .topic-info h2{font-size:18px;}
  .topic-info p{font-size:12px;}
  .learning-grid{grid-template-columns:minmax(280px,.95fr) minmax(320px,1fr) minmax(270px,.82fr);gap:12px;margin-bottom:12px;align-items:stretch;}
  .panel{padding:12px;border-radius:14px;}
  .panel-header{margin-bottom:8px;}
  .panel-header h3{font-size:14px;}
  .video-placeholder{height:auto;}
  .real-teaching-photo{min-height:218px;}
  .video-controls{padding:9px 10px;}
  .video-content h2{font-size:18px;}
  .video-topic,.video-time,.video-speed,.video-right,.btn.small{font-size:10px;}
  .control-btn{width:28px;height:28px;}
  .lecture-whiteboard .whiteboard-content{min-height:244px;padding:16px 16px 18px;}
  .chat-container{height:auto;}
  .chat-messages{overflow-y:visible;padding:2px 0;}
  .chat-msg{gap:8px;margin-bottom:8px;}
  .chat-avatar{width:26px;height:26px;border-radius:7px;}
  .chat-content{padding:8px 9px;max-width:88%;}
  .chat-content strong{font-size:11px;margin-bottom:3px;}
  .chat-content p,.chat-content ul{font-size:11px;line-height:1.35;}
  .chat-content ul{margin:4px 0;padding-left:14px;}
  .chat-time{font-size:9px;margin-top:3px;}
  .chat-suggestions{gap:6px;padding:5px 0;}
  .suggestion-btn{padding:5px 8px;font-size:10px;}
  .chat-input{padding-top:7px;gap:8px;}
  .chat-input input{padding:9px 12px;font-size:12px;}
  .mic-btn{width:36px;height:36px;font-size:15px;}
  .bottom-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
  .materials-list{gap:6px;}
  .material-item,.schedule-item,.achievement-item{padding:8px;}
}

.lecture-whiteboard{
  background:#f7fbf5;
  border-color:rgba(18,91,72,.28);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.65), 0 16px 40px rgba(0,0,0,.14);
}
.lecture-whiteboard::before{
  content:"Whiteboard sketsa • ringkasan visual";
  color:#356454;
  background:linear-gradient(90deg,rgba(16,120,93,.10),rgba(16,120,93,.02));
  border-bottom:1px dashed rgba(18,91,72,.26);
  font-family:'Caveat', cursive;
  font-size:18px;
  letter-spacing:.1px;
}
.lecture-whiteboard .whiteboard-content{
  position:relative;
  color:#183329;
  background-image:
    linear-gradient(rgba(21,97,79,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,97,79,.08) 1px, transparent 1px);
  background-size:22px 22px;
}
.lecture-whiteboard .whiteboard-content::after{
  content:"";
  position:absolute;
  inset:10px;
  border:2px solid rgba(28,84,68,.25);
  border-radius:18px 22px 16px 24px;
  pointer-events:none;
  transform:rotate(-.35deg);
}
.wb-sketch-title{
  position:relative;
  z-index:1;
  font-family:'Caveat', cursive;
  font-size:34px;
  font-weight:700;
  text-align:center;
  margin:0 0 2px;
  color:#163d32;
  text-decoration:underline wavy rgba(0,120,94,.35) 1.5px;
}
.wb-sketch-note{
  position:relative;
  z-index:1;
  width:max-content;
  max-width:100%;
  margin:0 auto 14px;
  padding:3px 12px;
  border:1.5px dashed rgba(26,90,75,.42);
  border-radius:999px;
  color:#315e50;
  font-family:'Caveat', cursive;
  font-size:20px;
  background:rgba(255,255,255,.62);
}
.wb-flow-sketch{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:10px;
  align-items:center;
}
.sketch-card{
  min-height:86px;
  padding:10px 10px 9px;
  border:2px solid #245b4d;
  border-radius:18px 14px 20px 15px;
  background:rgba(255,255,255,.72);
  box-shadow:4px 5px 0 rgba(29,87,72,.14);
  transform:rotate(-1deg);
  font-family:'Caveat', cursive;
  text-align:center;
}
.sketch-card:nth-of-type(3){transform:rotate(1.1deg)}
.sketch-card span{display:block;font-family:Inter,Arial,sans-serif;font-size:10px;font-weight:900;letter-spacing:1px;color:#2d7e69;}
.sketch-card strong{display:block;font-size:22px;line-height:1.05;color:#17372e;margin:4px 0;}
.sketch-card small{display:block;font-size:15px;line-height:1.05;color:#456b5e;}
.sketch-arrow{font-family:'Caveat', cursive;font-size:36px;font-weight:700;color:#1e6e59;transform:rotate(-4deg);}
.wb-mini-map{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:14px;
}
.mini-node{
  min-width:120px;
  padding:8px 10px;
  border:1.7px dashed rgba(36,91,77,.55);
  border-radius:16px;
  background:rgba(255,255,255,.58);
  color:#183329;
  font-family:'Caveat', cursive;
  font-size:21px;
  line-height:1;
  text-align:center;
  transform:rotate(.8deg);
}
.mini-node.active{background:rgba(52,191,154,.15);border-style:solid;}
.mini-node small{font-size:14px;color:#4a7266;}
.mini-line{width:42px;border-top:2px dashed rgba(36,91,77,.48);}
@media (max-width:1280px){
  .wb-flow-sketch{grid-template-columns:1fr;gap:8px;}
  .sketch-arrow{transform:rotate(90deg);line-height:.5;text-align:center;}
  .wb-sketch-note{font-size:18px;text-align:center;}
}


/* ==================== USER REQUEST UPDATE 2: FIT 3 PANELS IN ONE SCREEN + IMAGE WHITEBOARD ==================== */
.whiteboard-image-wrap{
  padding:8px;
  background:#eef7f1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.whiteboard-image-wrap::before{display:none!important;}
.whiteboard-image-wrap .whiteboard-content{display:none!important;}
.whiteboard-graphic{
  display:block;
  margin:0 auto;
  width:100%;
  height:auto;
  max-height:180px;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  background:#fff;
}
.compact-chat-suggestions{padding-top:4px;}
.chat-messages{overflow-y:visible!important;max-height:none!important;scrollbar-width:none;}
.chat-messages::-webkit-scrollbar{display:none;}
.chat-container{height:auto!important;overflow:visible!important;}
.chat-panel{align-self:start;}
.chat-input{margin-top:2px;}

@media (min-width:1281px){
  .dashboard-wrapper{height:100vh;overflow:hidden;}
  .topbar{height:66px;padding:0 20px;}
  .dash{height:calc(100vh - 66px);grid-template-columns:230px minmax(0,1fr);}
  .side{padding:14px 12px 12px;overflow:hidden;}
  .sideNav{gap:6px;}
  .sideNav button{padding:10px 12px;font-size:12px;}
  .sideCard{padding:12px;}
  .system-status{margin-top:10px;font-size:11px;}
  .work{height:calc(100vh - 66px);padding:10px 14px 14px;overflow:auto;}
  .dashHead{margin-bottom:10px;gap:10px;}
  .dashTitle h1{font-size:24px;margin-bottom:4px;}
  .dashTitle p{font-size:12px;}
  .search-box{padding:8px 10px;min-height:42px;}
  .profile{padding:8px 10px;}
  .topic-header{padding:8px 12px;margin-bottom:10px;}
  .topic-info{gap:10px;}
  .topic-info h2{font-size:16px;}
  .topic-info p{font-size:11px;}
  .topic-nav{gap:8px;}
  .topic-nav .btn{padding:8px 10px;font-size:11px;}
  .learning-grid{grid-template-columns:minmax(280px,1fr) minmax(280px,1fr) minmax(245px,.78fr);gap:10px;align-items:start;margin-bottom:12px;}
  .panel{padding:10px;border-radius:14px;}
  .panel-header{margin-bottom:8px;}
  .panel-header h3{font-size:13px;}
  .panel-num{width:22px;height:22px;font-size:11px;}
  .real-teaching-photo{min-height:184px;background-position:center top;}
  .real-teaching-photo .video-content{max-width:190px;padding:10px 11px;}
  .video-content h2{font-size:16px;}
  .video-topic{margin-top:6px;padding:3px 9px;font-size:10px;}
  .real-teaching-photo .video-presenter{left:12px;bottom:12px;padding:7px 9px;}
  .presenter-avatar{width:28px;height:28px;font-size:12px;}
  .video-presenter strong{font-size:11px;}
  .video-presenter span{font-size:10px;}
  .video-controls{padding:8px 9px;}
  .video-progress{margin-bottom:8px;}
  .video-actions{gap:8px;}
  .control-btn{width:26px;height:26px;font-size:11px;}
  .video-time,.video-speed,.video-right,.btn.small{font-size:10px;}
  .whiteboard-graphic{max-height:176px;}
  .whiteboard-panel .panel-header{margin-bottom:6px;}
  .whiteboard-image-wrap{min-height:194px;}
  .chat-content{padding:8px 9px;max-width:100%;}
  .chat-content p,.chat-content ul{font-size:11px;line-height:1.35;}
  .chat-content strong{font-size:11px;margin-bottom:3px;}
  .chat-msg{gap:8px;margin-bottom:7px;}
  .chat-avatar{width:24px;height:24px;}
  .chat-suggestions{gap:6px;padding:4px 0;}
  .suggestion-btn{padding:4px 8px;font-size:10px;}
  .chat-input{padding-top:6px;gap:6px;}
  .chat-input input{padding:9px 12px;font-size:12px;}
  .mic-btn{width:34px;height:34px;font-size:14px;}
}

@media (max-width:1280px){
  .whiteboard-graphic{max-height:220px;}
}


/* ==================== USER REQUEST UPDATE 4: WHITEBOARD IMAGE FITS INSIDE BOX ==================== */
.whiteboard-image-panel{
  height:210px !important;
  min-height:210px !important;
  max-height:210px !important;
  padding:8px !important;
  overflow:hidden !important;
  background:rgba(238,247,241,.98) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.whiteboard-image-panel::before,
.whiteboard-image-panel::after{
  content:none !important;
  display:none !important;
}
.whiteboard-image-panel .whiteboard-graphic{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  border-radius:10px !important;
  display:block !important;
  margin:0 auto !important;
}
@media (min-width:1281px){
  .whiteboard-image-panel{
    height:206px !important;
    min-height:206px !important;
    max-height:206px !important;
  }
  .learning-grid{align-items:start !important;}
}
@media (max-width:1280px){
  .whiteboard-image-panel{
    height:220px !important;
    min-height:220px !important;
    max-height:220px !important;
  }
}


/* ==================== USER REQUEST UPDATE 5: MATCH PANEL HEIGHTS WITH VIRTUAL TEACHING ==================== */
@media (min-width:1281px){
  .learning-grid{align-items:stretch !important;}
  .learning-grid > .panel{
    display:flex !important;
    flex-direction:column !important;
    height:100% !important;
  }
  .video-panel .video-container,
  .chat-panel .chat-container{
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 auto !important;
    min-height:0 !important;
  }
  .chat-panel .chat-container{
    justify-content:space-between !important;
  }
  .chat-panel .chat-messages{
    flex:1 1 auto !important;
  }
  .whiteboard-panel .whiteboard-image-panel{
    margin-top:2px;
  }
}




/* ==================== USER REQUEST UPDATE 6: EXPERT RAW MATERIAL IMAGE-FOCUSED CARDS ==================== */
.upload-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(112px,1fr));
  gap:12px;
  margin-bottom:14px;
}
.upload-type{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-height:186px;
  padding:10px 10px 12px;
  border:1px solid rgba(108,182,255,.18);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(8,28,58,.96),rgba(6,22,46,.93));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 22px rgba(0,0,0,.18);
  overflow:hidden;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease, box-shadow .18s ease;
}
.upload-type:hover{
  transform:translateY(-2px);
  border-color:rgba(99,205,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 14px 28px rgba(0,0,0,.24);
}
.upload-thumb{
  width:100%;
  height:104px;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.05);
}
.upload-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.upload-meta{
  width:100%;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.upload-meta strong{
  display:block;
  font-size:12px;
  line-height:1.2;
  color:#eef6ff;
  font-weight:650;
  min-height:29px;
}
.upload-meta span{
  display:block;
  font-size:9px;
  line-height:1.35;
  color:#98b6d5;
}
.upload-link-card{
  margin-top:2px;
  padding:10px 12px;
  border:1px solid rgba(108,182,255,.18);
  background:linear-gradient(180deg,rgba(8,28,58,.96),rgba(6,22,46,.92));
  border-radius:16px;
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
}
.upload-link-card:hover{border-color:rgba(99,205,255,.4);}
.upload-link-thumb{
  width:108px;
  height:76px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.05);
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  flex-shrink:0;
}
.upload-link-thumb img{display:block;width:100%;height:100%;object-fit:contain;}
.upload-link-meta{display:flex;flex-direction:column;gap:4px;}
.upload-link-meta strong{font-size:14px;color:#eef6ff;}
.upload-link-meta .upload-desc{font-size:11px;color:#93b5d7;margin-left:0;}

/* whiteboard image stays proportional inside its box */
.whiteboard-image-panel{padding:10px !important;}
.whiteboard-image-panel .whiteboard-graphic{max-width:96% !important;max-height:96% !important;object-fit:contain !important;}

@media (max-width:1280px){
  .upload-grid{grid-template-columns:repeat(5,minmax(96px,1fr));gap:10px;}
  .upload-type{min-height:176px;padding:9px 8px 10px;}
  .upload-thumb{height:96px;}
}
@media (max-width:1024px){
  .upload-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:720px){
  .upload-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .upload-link-card{flex-direction:column;align-items:flex-start;}
  .upload-link-thumb{width:100%;height:84px;}
}


/* ==================== USER REQUEST UPDATE 8: FULL-IMAGE WHITEBOARD + CLEAN RAW THUMBNAILS ==================== */
.whiteboard-image-panel,
.whiteboard-image-wrap,
.lecture-whiteboard.whiteboard-image-panel{
  padding:0 !important;
  background:transparent !important;
  overflow:hidden !important;
}
.whiteboard-image-panel .whiteboard-graphic,
.whiteboard-image-wrap .whiteboard-graphic{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  border-radius:14px !important;
  border:none !important;
  background:#0b2b52 !important;
  box-shadow:none !important;
}
@media (min-width:1281px){
  .whiteboard-image-panel,
  .whiteboard-image-wrap,
  .lecture-whiteboard.whiteboard-image-panel{height:206px !important;min-height:206px !important;max-height:206px !important;}
}

.upload-type{
  padding:8px !important;
  min-height:148px !important;
}
.upload-thumb{
  height:96px !important;
  margin-bottom:8px !important;
  background:rgba(255,255,255,.03) !important;
}
.upload-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  padding:0 !important;
  background:transparent !important;
}
.upload-meta{
  gap:2px !important;
  text-align:left !important;
}
.upload-meta strong{font-size:11px !important;line-height:1.15 !important;}
.upload-meta span{font-size:9px !important;line-height:1.2 !important;}
.upload-link-card{padding:10px !important;}
.upload-link-thumb{
  width:116px !important;
  height:76px !important;
  background:rgba(255,255,255,.03) !important;
}
.upload-link-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
}


/* ==================== USER REQUEST UPDATE 7: RAW MATERIAL CLEAN CARD FIT + WHITE WHITEBOARD ==================== */
/* Expert raw knowledge cards: keep everything inside the box and make the image clean */
.upload-panel{overflow:hidden;}
.upload-grid{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:10px !important;
  margin-bottom:12px !important;
}
.upload-type{
  box-sizing:border-box !important;
  min-width:0 !important;
  min-height:132px !important;
  height:132px !important;
  padding:10px !important;
  border-radius:18px !important;
  border:1px solid rgba(112,170,255,.20) !important;
  background:linear-gradient(180deg,rgba(16,40,84,.92),rgba(10,28,63,.96)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  gap:8px !important;
}
.upload-type::after{display:none !important;content:none !important;}
.upload-thumb{
  width:100% !important;
  height:58px !important;
  min-height:58px !important;
  padding:8px !important;
  border-radius:14px !important;
  background:#ffffff !important;
  border:1px solid rgba(160,190,255,.28) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.18), inset 0 -1px 0 rgba(0,0,0,.04) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.upload-thumb img{
  max-width:100% !important;
  max-height:100% !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  display:block !important;
}
.upload-meta{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
  gap:4px !important;
}
.upload-meta strong{
  display:block !important;
  margin:0 !important;
  font-size:11px !important;
  line-height:1.15 !important;
  min-height:26px !important;
  color:#f4f7ff !important;
  font-weight:700 !important;
  overflow-wrap:anywhere !important;
}
.upload-meta span{
  display:block !important;
  margin:0 !important;
  font-size:9px !important;
  line-height:1.2 !important;
  color:#a8c1ea !important;
  overflow-wrap:anywhere !important;
}
.upload-link-card{
  width:100% !important;
  box-sizing:border-box !important;
  min-height:86px !important;
  padding:10px 12px !important;
  border-radius:18px !important;
  border:1px solid rgba(112,170,255,.20) !important;
  background:linear-gradient(180deg,rgba(16,40,84,.92),rgba(10,28,63,.96)) !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  overflow:hidden !important;
}
.upload-link-thumb{
  width:92px !important;
  min-width:92px !important;
  height:58px !important;
  border-radius:14px !important;
  background:#fff !important;
  border:1px solid rgba(160,190,255,.28) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.upload-link-thumb img{
  max-width:100% !important;
  max-height:100% !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
}
.upload-link-meta{min-width:0 !important;display:flex !important;flex-direction:column !important;gap:4px !important;}
.upload-link-meta strong{font-size:13px !important;line-height:1.15 !important;color:#f4f7ff !important;}
.upload-link-meta .upload-desc{font-size:10px !important;line-height:1.2 !important;color:#a8c1ea !important;}
/* remove decorative over-styling so cards stay clean */
.tone-cyan .upload-thumb,
.tone-pink .upload-thumb,
.tone-violet .upload-thumb,
.tone-amber .upload-thumb,
.tone-green .upload-thumb,
.tone-blue .upload-thumb,
.tone-orange .upload-thumb,
.tone-teal .upload-thumb,
.tone-red .upload-thumb,
.tone-neutral .upload-thumb{box-shadow:0 8px 18px rgba(0,0,0,.18), inset 0 -1px 0 rgba(0,0,0,.04) !important;}

/* Whiteboard: pure white background and image fills the box proportionally */
.whiteboard-panel{min-width:0;}
.whiteboard-image-wrap,
.whiteboard-image-panel{
  background:#ffffff !important;
}
.whiteboard-image-panel{
  padding:8px !important;
  height:100% !important;
  min-height:206px !important;
  max-height:206px !important;
  border-radius:16px !important;
  border:1px solid rgba(214,224,236,.92) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98) !important;
  overflow:hidden !important;
}
.whiteboard-image-panel .whiteboard-graphic{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  margin:0 auto !important;
  background:#ffffff !important;
  border-radius:10px !important;
  box-shadow:none !important;
}

@media (max-width:1280px){
  .upload-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
  .upload-type{height:128px !important;min-height:128px !important;}
  .whiteboard-image-panel{min-height:220px !important;max-height:220px !important;}
}
@media (max-width:1024px){
  .upload-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
@media (max-width:720px){
  .upload-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .upload-link-card{flex-direction:column !important;align-items:flex-start !important;}
  .upload-link-thumb{width:100% !important;min-width:100% !important;}
}


/* ==================== USER REQUEST UPDATE 9: PREMIUM VISUAL FINISH ==================== */
.upload-type{
  background:linear-gradient(180deg,rgba(8,22,50,.98),rgba(6,16,38,1)) !important;
  border:1px solid rgba(116,163,244,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 24px rgba(2,8,22,.28) !important;
}
.upload-type:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(116,190,255,.34) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 16px 28px rgba(2,8,22,.34) !important;
}
.upload-thumb{height:74px !important; min-height:74px !important;}
.upload-meta strong{font-size:11.2px !important; color:#f7fbff !important;}
.upload-meta span{font-size:9px !important; color:#9db6da !important;}
.upload-link-card{
  border:1px solid rgba(116,163,244,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 24px rgba(2,8,22,.28) !important;
}
.whiteboard-image-panel{
  padding:10px !important;
  border:1px solid rgba(222,230,238,.96) !important;
  box-shadow:0 14px 28px rgba(9,28,58,.08), inset 0 1px 0 rgba(255,255,255,.98) !important;
}


/* ==================== USER REQUEST UPDATE 10: REVERT TO SIMPLE CLEAN RAW CARDS + WHITEBOARD FULL WHITE ==================== */
/* Raw knowledge cards back to simple pre-premium style, matching user reference */
.upload-panel{overflow:hidden !important;}
.upload-grid{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:12px !important;
  align-items:stretch !important;
}
.upload-type{
  box-sizing:border-box !important;
  width:100% !important;
  min-width:0 !important;
  min-height:138px !important;
  height:138px !important;
  padding:14px 10px 12px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
  overflow:hidden !important;
  border-radius:16px !important;
  border:1px solid rgba(93,186,255,.16) !important;
  background:linear-gradient(180deg,rgba(14,37,82,.92),rgba(12,31,72,.96)) !important;
  box-shadow:none !important;
  transform:none !important;
}
.upload-type:hover{
  transform:none !important;
  border-color:rgba(93,186,255,.24) !important;
  box-shadow:none !important;
  background:linear-gradient(180deg,rgba(16,41,88,.94),rgba(13,33,76,.98)) !important;
}
.upload-type::before,
.upload-type::after{display:none !important;content:none !important;}
.upload-thumb{
  width:64px !important;
  min-width:64px !important;
  height:48px !important;
  min-height:48px !important;
  margin:0 auto 14px auto !important;
  padding:0 !important;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.upload-thumb img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  display:block !important;
}
.upload-meta{
  width:100% !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  align-items:center !important;
  justify-content:flex-start !important;
}
.upload-meta strong{
  margin:0 !important;
  font-size:11px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  color:#f4f8ff !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
.upload-meta span{
  margin:0 !important;
  font-size:9px !important;
  line-height:1.25 !important;
  color:#afc4e6 !important;
  display:block !important;
  word-break:break-word !important;
}
/* neutralize prior tone-specific effects */
.tone-cyan .upload-thumb,
.tone-pink .upload-thumb,
.tone-violet .upload-thumb,
.tone-amber .upload-thumb,
.tone-green .upload-thumb,
.tone-blue .upload-thumb,
.tone-orange .upload-thumb,
.tone-teal .upload-thumb,
.tone-red .upload-thumb,
.tone-neutral .upload-thumb{box-shadow:none !important;}
.upload-link-card{
  width:100% !important;
  min-height:88px !important;
  padding:16px 18px !important;
  margin-top:2px !important;
  border-radius:16px !important;
  border:1px solid rgba(93,186,255,.16) !important;
  background:linear-gradient(180deg,rgba(18,45,94,.92),rgba(14,36,78,.96)) !important;
  box-shadow:none !important;
  gap:14px !important;
  overflow:hidden !important;
}
.upload-link-thumb{
  width:52px !important;
  min-width:52px !important;
  height:52px !important;
  border-radius:50% !important;
  border:1px solid rgba(175,205,244,.24) !important;
  background:rgba(255,255,255,.03) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:none !important;
}
.upload-link-thumb img{
  width:28px !important;
  height:28px !important;
  max-width:28px !important;
  max-height:28px !important;
  object-fit:contain !important;
}
.upload-link-meta strong{
  font-size:12px !important;
  line-height:1.2 !important;
  color:#f4f8ff !important;
}
.upload-link-meta .upload-desc{
  font-size:10px !important;
  line-height:1.25 !important;
  color:#afc4e6 !important;
}

/* Whiteboard must stay pure white and fill the panel box cleanly */
.whiteboard-panel{display:flex !important;flex-direction:column !important;}
.whiteboard-image-wrap,
.whiteboard-image-panel,
.lecture-whiteboard.whiteboard-image-panel{
  flex:1 1 auto !important;
  width:100% !important;
  min-height:206px !important;
  height:206px !important;
  max-height:206px !important;
  padding:0 !important;
  margin:0 !important;
  background:#ffffff !important;
  border:1px solid rgba(223,230,239,.98) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  box-shadow:none !important;
}
.whiteboard-image-panel .whiteboard-graphic,
.whiteboard-image-wrap .whiteboard-graphic{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#ffffff !important;
  border-radius:0 !important;
  margin:0 !important;
  box-shadow:none !important;
}

@media (max-width:1280px){
  .upload-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
  .upload-type{height:132px !important;min-height:132px !important;}
  .whiteboard-image-wrap,.whiteboard-image-panel,.lecture-whiteboard.whiteboard-image-panel{height:220px !important;min-height:220px !important;max-height:220px !important;}
}
@media (max-width:1024px){
  .upload-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
@media (max-width:720px){
  .upload-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .upload-link-card{flex-direction:row !important;align-items:center !important;}
}


/* ==================== USER REQUEST UPDATE 11: RESTORE IMAGE ITEM CARDS + WHITEBOARD BOARD STYLE ==================== */
.upload-panel{overflow:hidden !important;}
.upload-grid{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:12px !important;
  margin-bottom:12px !important;
  align-items:stretch !important;
}
.upload-type{
  width:100% !important;
  min-width:0 !important;
  height:146px !important;
  min-height:146px !important;
  padding:10px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
  border-radius:14px !important;
  border:1px solid rgba(95,154,230,.18) !important;
  background:linear-gradient(180deg,rgba(10,28,58,.94),rgba(10,24,51,.98)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
  transform:none !important;
}
.upload-type:hover{
  transform:none !important;
  border-color:rgba(103,190,255,.28) !important;
  background:linear-gradient(180deg,rgba(11,30,62,.96),rgba(10,25,54,1)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.upload-type::before,
.upload-type::after{display:none !important;content:none !important;}
.upload-thumb{
  width:100% !important;
  height:74px !important;
  min-height:74px !important;
  margin:0 0 10px 0 !important;
  border-radius:10px !important;
  border:1px solid rgba(255,255,255,.06) !important;
  background:rgba(255,255,255,.02) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  box-shadow:none !important;
}
.upload-thumb img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
}
.upload-meta{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
}
.upload-meta strong{
  font-size:11px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  color:#f6fbff !important;
  margin:0 !important;
  display:block !important;
}
.upload-meta span{
  font-size:9px !important;
  line-height:1.25 !important;
  color:#9db6da !important;
  margin:0 !important;
  display:block !important;
  overflow-wrap:anywhere !important;
}
.tone-cyan .upload-thumb,
.tone-pink .upload-thumb,
.tone-violet .upload-thumb,
.tone-amber .upload-thumb,
.tone-green .upload-thumb,
.tone-blue .upload-thumb,
.tone-orange .upload-thumb,
.tone-teal .upload-thumb,
.tone-red .upload-thumb,
.tone-neutral .upload-thumb{box-shadow:none !important;}

.upload-link-card{
  width:100% !important;
  min-height:84px !important;
  padding:10px 12px !important;
  border-radius:14px !important;
  border:1px solid rgba(95,154,230,.18) !important;
  background:linear-gradient(180deg,rgba(10,28,58,.94),rgba(10,24,51,.98)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  overflow:hidden !important;
}
.upload-link-thumb{
  width:96px !important;
  min-width:96px !important;
  height:60px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.06) !important;
  background:rgba(255,255,255,.02) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.upload-link-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}
.upload-link-meta{display:flex !important;flex-direction:column !important;gap:4px !important;min-width:0 !important;}
.upload-link-meta strong{font-size:13px !important;line-height:1.2 !important;color:#f6fbff !important;}
.upload-link-meta .upload-desc{font-size:10px !important;line-height:1.25 !important;color:#9db6da !important;}

/* Restore board-like whiteboard appearance */
.whiteboard-panel{display:flex !important;flex-direction:column !important;}
.whiteboard-image-wrap,
.whiteboard-image-panel,
.lecture-whiteboard.whiteboard-image-panel{
  flex:1 1 auto !important;
  width:100% !important;
  height:206px !important;
  min-height:206px !important;
  max-height:206px !important;
  padding:6px !important;
  background:#eef2f5 !important;
  border:1px solid rgba(134,156,184,.22) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  box-shadow:none !important;
}
.whiteboard-image-panel .whiteboard-graphic,
.whiteboard-image-wrap .whiteboard-graphic{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:transparent !important;
  border-radius:10px !important;
  margin:0 auto !important;
  box-shadow:none !important;
}

@media (max-width:1280px){
  .upload-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
  .upload-type{height:138px !important;min-height:138px !important;}
  .whiteboard-image-wrap,.whiteboard-image-panel,.lecture-whiteboard.whiteboard-image-panel{height:220px !important;min-height:220px !important;max-height:220px !important;}
}
@media (max-width:1024px){
  .upload-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
@media (max-width:720px){
  .upload-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .upload-link-card{flex-direction:column !important;align-items:flex-start !important;}
  .upload-link-thumb{width:100% !important;min-width:100% !important;height:74px !important;}
}


/* ==================== USER REQUEST UPDATE 12: USE PROVIDED RAW ITEM IMAGE DIRECTLY ==================== */
.upload-panel-preview-wrap{
  width:100%;
  margin-top:6px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(73,123,194,.24);
  background:linear-gradient(180deg,rgba(7,24,52,.98),rgba(6,21,46,.98));
}
.upload-panel-preview{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
/* hide old upload-card layout styling impact when preview image is used */
.upload-panel .upload-grid,
.upload-panel .upload-link{display:none !important;}

/* ==================== USER FINAL UPDATE: NATIVE RAW KNOWLEDGE DASHBOARD ==================== */
.upload-panel .upload-panel-preview-wrap,
.upload-panel .upload-panel-preview{display:none !important;}
.upload-panel{overflow:hidden !important;}
.raw-knowledge-board{
  width:100%;
  border-top:1px solid rgba(53,121,207,.24);
  padding:16px 0 2px;
  background:radial-gradient(circle at 50% 30%,rgba(13,82,166,.18),transparent 54%);
}
.raw-upload-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}
.raw-upload-card,
.raw-link-card{
  border:1px solid rgba(81,159,255,.48);
  background:linear-gradient(180deg,rgba(9,34,78,.88),rgba(4,18,46,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 16px 40px rgba(0,0,0,.20);
  color:#f6f8ff;
}
.raw-upload-card{
  height:138px;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:12px 8px;
  min-width:0;
}
.raw-upload-icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  margin:0 auto 9px;
  filter:drop-shadow(0 0 10px currentColor);
}
.raw-upload-icon svg{width:100%;height:100%;display:block;}
.raw-upload-card strong,
.raw-link-card strong{
  display:block;
  font-size:15px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.2px;
  color:#f7f9ff;
}
.raw-upload-card span,
.raw-link-card span{
  display:block;
  margin-top:8px;
  font-size:12px;
  line-height:1.15;
  color:#9db3dc;
  font-weight:650;
}
.raw-cyan{color:#27e5ff;}
.raw-pink{color:#ff4bb6;}
.raw-blue{color:#58a7ff;}
.raw-amber{color:#ffa31b;}
.raw-lime{color:#b8e326;}
.raw-teal{color:#4fe7d5;}
.raw-coral{color:#ff697d;}
.raw-sky{color:#82bbff;}
.raw-link-card{
  width:min(62%,720px);
  min-height:112px;
  margin:18px auto 0;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:left;
  padding:18px 28px;
}
.raw-link-card .raw-upload-icon{width:54px;height:54px;margin:0;color:#45a6ff;flex:0 0 54px;}
.raw-link-card strong{font-size:15px;}
.raw-link-card span{font-size:12px;margin-top:8px;}
@media (max-width:1280px){
  .raw-upload-grid{gap:10px;}
  .raw-upload-card{height:124px;border-radius:16px;}
  .raw-upload-icon{width:46px;height:46px;margin-bottom:8px;}
  .raw-upload-card strong{font-size:12px;}
  .raw-upload-card span{font-size:10px;}
  .raw-link-card{width:70%;min-height:96px;}
}
@media (max-width:900px){
  .raw-upload-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .raw-link-card{width:100%;}
}

/* ==================== OSIUN LIVE LEARNER WHITEBOARD FIX ==================== */
#app .whiteboard-panel {
  min-height: 0;
}

#app .whiteboard-panel .lecture-whiteboard {
  background: #f5fbf7 !important;
  border: 1px solid rgba(2, 200, 255, 0.28) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  color: #12352d !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 12px 28px rgba(0,0,0,.16) !important;
}

#app .whiteboard-panel .lecture-whiteboard::before {
  content: "AI Whiteboard • Live academic context" !important;
  display: block !important;
  padding: 8px 14px !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  color: #17604f !important;
  background: linear-gradient(90deg, rgba(2,200,255,.10), rgba(47,229,159,.08)) !important;
  border-bottom: 1px solid rgba(23,96,79,.18) !important;
}

#app .whiteboard-panel .whiteboard-content {
  min-height: 230px !important;
  padding: 18px !important;
  background:
    linear-gradient(rgba(23,96,79,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,96,79,.07) 1px, transparent 1px),
    #f8fff9 !important;
  background-size: 22px 22px !important;
  overflow: hidden !important;
}

#app .wb-sketch-title {
  font-family: Inter, Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  text-align: center !important;
  color: #113c33 !important;
  margin: 0 0 8px !important;
  text-decoration: none !important;
}

#app .wb-sketch-note {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto 14px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(23,96,79,.22) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.82) !important;
  color: #315e50 !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

#app .wb-flow-sketch {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr auto 1fr !important;
  align-items: stretch !important;
  gap: 8px !important;
}

#app .sketch-card {
  min-height: 92px !important;
  padding: 12px 10px !important;
  border: 1px solid rgba(23,96,79,.32) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
  transform: none !important;
  font-family: Inter, Arial, sans-serif !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#app .sketch-card span {
  display: inline-block !important;
  margin: 0 auto 6px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: rgba(2,200,255,.12) !important;
  color: #0b7c92 !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

#app .sketch-card strong {
  display: block !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  color: #12352d !important;
  margin: 0 0 5px !important;
}

#app .sketch-card small {
  display: block !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: #456b5e !important;
}

#app .sketch-arrow {
  display: grid !important;
  place-items: center !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #12836d !important;
  transform: none !important;
}

@media (max-width: 1280px) {
  #app .wb-flow-sketch {
    grid-template-columns: 1fr !important;
  }

  #app .sketch-arrow {
    transform: rotate(90deg) !important;
    height: 22px !important;
  }

  #app .whiteboard-panel .whiteboard-content {
    min-height: auto !important;
  }
}

/* ==================== OSIUN EXPERT UPLOAD POPUP ==================== */
.osiun-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(2,8,23,.72);
  backdrop-filter:blur(10px);
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.osiun-modal{
  width:min(760px,96vw);
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(7,26,51,.98),rgba(3,12,28,.98));
  box-shadow:0 30px 90px rgba(0,0,0,.42),0 0 45px rgba(0,200,255,.18);
  overflow:hidden;
}

.osiun-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  border-bottom:1px solid var(--line);
  background:rgba(0,200,255,.06);
}

.osiun-modal-head h3{
  margin:0;
  font-size:20px;
}

.osiun-modal-head p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:13px;
}

.osiun-modal-close{
  width:38px;
  height:38px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.05);
  color:var(--text);
  font-size:18px;
}

.osiun-modal-body{
  padding:20px;
}

.osiun-file-drop{
  border:1px dashed rgba(2,200,255,.45);
  border-radius:16px;
  background:rgba(2,200,255,.05);
  padding:18px;
  margin:14px 0;
}

.osiun-file-drop input[type=file]{
  width:100%;
}

.osiun-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  padding:16px 20px 20px;
}

.upload-type.selected{
  border-color:var(--cyan)!important;
  box-shadow:0 0 26px rgba(2,200,255,.22)!important;
  background:linear-gradient(180deg,rgba(0,160,255,.18),rgba(6,22,46,.93))!important;
}

/* OSIUN original raw upload cards as clickable buttons */
.raw-upload-card{
  cursor:pointer !important;
  border:1px solid rgba(81,159,255,.48) !important;
  background:linear-gradient(180deg,rgba(9,34,78,.88),rgba(4,18,46,.98)) !important;
  color:#f6f8ff !important;
  font-family:inherit !important;
}

.raw-upload-card:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(99,205,255,.72) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 16px 34px rgba(2,8,22,.34),0 0 22px rgba(0,200,255,.12) !important;
}

.raw-upload-card:focus{
  outline:2px solid rgba(39,229,255,.55) !important;
  outline-offset:3px !important;
}

.raw-upload-grid{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:14px !important;
}

@media (max-width:1024px){
  .raw-upload-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
@media (max-width:720px){
  .raw-upload-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}

/* ==================== OSIUN EXPERT ORIGINAL UPLOAD LAYOUT ==================== */

.expert-original-wrap{
  display:grid;
  grid-template-columns: 230px minmax(520px, 1fr) 270px;
  gap:18px;
  align-items:stretch;
}

.expert-left-panel,
.expert-center-panel,
.expert-right-panel{
  border:1px solid rgba(67,146,255,.24);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(9,30,67,.62),rgba(3,14,35,.82));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 20px 60px rgba(0,0,0,.24);
  backdrop-filter: blur(14px);
}

.expert-left-panel{
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.expert-left-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}

.expert-left-title .dot{
  width:12px;
  height:12px;
  border-radius:999px;
  background:var(--green);
  box-shadow:0 0 18px rgba(47,229,159,.8);
}

.expert-left-title strong{
  font-size:14px;
}

.expert-steps{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.expert-step{
  border:1px solid rgba(67,146,255,.22);
  background:rgba(3,18,45,.55);
  border-radius:16px;
  padding:12px;
}

.expert-step.active{
  border-color:rgba(2,200,255,.55);
  background:linear-gradient(135deg,rgba(2,200,255,.20),rgba(7,28,63,.75));
  box-shadow:0 0 22px rgba(2,200,255,.12);
}

.expert-step span{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-bottom:4px;
}

.expert-step strong{
  display:block;
  font-size:13px;
  line-height:1.25;
}

.expert-left-action{
  margin-top:18px;
}

.expert-center-panel{
  padding:20px;
}

.expert-upload-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.expert-upload-head h3{
  margin:0;
  font-size:23px;
  line-height:1.1;
}

.expert-upload-head p{
  margin:4px 0 0;
  color:#78adff;
  font-size:14px;
}

.expert-upload-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}

.expert-upload-card{
  min-height:172px;
  border:1px solid rgba(66,148,255,.48);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,200,255,.18), transparent 45%),
    linear-gradient(180deg,rgba(7,40,92,.92),rgba(3,17,45,.98));
  color:#fff;
  cursor:pointer;
  padding:14px 10px;
  text-align:center;
  font-family:inherit;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 28px rgba(0,0,0,.22);
  transition:.18s ease;
}

.expert-upload-card:hover{
  transform:translateY(-3px);
  border-color:rgba(2,200,255,.85);
  box-shadow:0 0 28px rgba(2,200,255,.18), 0 18px 36px rgba(0,0,0,.28);
}

.expert-upload-card svg{
  width:54px;
  height:54px;
  filter:drop-shadow(0 0 14px currentColor);
}

.expert-upload-card strong{
  display:block;
  font-size:22px;
  line-height:1.02;
  font-weight:900;
  letter-spacing:-.5px;
}

.expert-upload-card small{
  display:block;
  font-size:15px;
  line-height:1.06;
  color:#d7eaff;
  font-weight:800;
  white-space:pre-line;
}

.expert-upload-card.wide{
  grid-column:2 / span 3;
  min-height:118px;
  display:grid;
  grid-template-columns:88px 1fr;
  text-align:left;
  align-items:center;
  padding:18px 24px;
}

.expert-upload-card.wide svg{
  width:64px;
  height:64px;
}

.expert-upload-card.wide strong{
  font-size:22px;
}

.expert-upload-card.wide small{
  font-size:14px;
}

.expert-upload-card.cyan{color:#33f4ff;}
.expert-upload-card.pink{color:#ff63d7;}
.expert-upload-card.blue{color:#4bd7ff;}
.expert-upload-card.orange{color:#ff9d25;}
.expert-upload-card.lime{color:#d7ff2f;}
.expert-upload-card.yellow{color:#ffd63d;}
.expert-upload-card.rose{color:#ff9dc6;}
.expert-upload-card.white{color:#e8fbff;}

.expert-generate-btn{
  width:100%;
  margin-top:18px;
  border:0;
  border-radius:18px;
  padding:17px;
  font-weight:900;
  font-size:17px;
  color:#eaffff;
  background:linear-gradient(90deg,rgba(50,232,205,.9),rgba(71,165,255,.9));
  box-shadow:0 18px 36px rgba(2,200,255,.18);
  cursor:pointer;
}

.expert-right-panel{
  padding:18px;
}

.expert-right-panel h3{
  margin:0 0 16px;
  font-size:21px;
  line-height:1.1;
}

.expert-insights{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.expert-insight-card{
  border:1px solid rgba(67,146,255,.22);
  border-radius:16px;
  padding:14px;
  background:rgba(6,25,58,.62);
}

.expert-insight-card .row{
  display:flex;
  align-items:center;
  gap:12px;
}

.expert-insight-card .ico{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  font-size:20px;
}

.expert-insight-card strong{
  display:block;
  font-size:26px;
  line-height:1;
}

.expert-insight-card span{
  display:block;
  color:#90bdff;
  font-size:13px;
  margin-top:4px;
}

.expert-material-table{
  margin-top:18px;
}

@media (max-width: 1280px){
  .expert-original-wrap{
    grid-template-columns:1fr;
  }
  .expert-upload-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .expert-upload-card.wide{
    grid-column:auto;
    display:flex;
    text-align:center;
    min-height:172px;
  }
}

@media (max-width: 720px){
  .expert-upload-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Expert upload card final polish */
.expert-upload-card{
  min-height:155px !important;
  padding:12px 8px !important;
  gap:7px !important;
}

.expert-upload-card svg{
  width:46px !important;
  height:46px !important;
}

.expert-upload-card strong{
  font-size:16px !important;
  line-height:1.08 !important;
  letter-spacing:-.2px !important;
}

.expert-upload-card small{
  font-size:12px !important;
  line-height:1.12 !important;
  font-weight:700 !important;
}

.expert-upload-card.wide{
  min-height:96px !important;
  grid-template-columns:70px 1fr !important;
  padding:14px 20px !important;
}

.expert-upload-card.wide svg{
  width:52px !important;
  height:52px !important;
}

.expert-upload-card.wide strong{
  font-size:18px !important;
}

.expert-upload-card.wide small{
  font-size:13px !important;
}

.expert-upload-head h3{
  font-size:21px !important;
}

.expert-upload-head p{
  font-size:13px !important;
}

.expert-right-panel h3{
  font-size:19px !important;
}

.expert-insight-card strong{
  font-size:22px !important;
}

.expert-insight-card span{
  font-size:12px !important;
}

/* FINAL FIX: expertmaterials upload card typography */
.expert-upload-card{
  min-height:145px !important;
  padding:10px 7px !important;
  gap:5px !important;
  overflow:hidden !important;
}

.expert-upload-card svg{
  width:42px !important;
  height:42px !important;
  flex:0 0 auto !important;
}

.expert-upload-card strong{
  font-size:14px !important;
  line-height:1.03 !important;
  letter-spacing:-.35px !important;
  max-width:100% !important;
  overflow-wrap:break-word !important;
}

.expert-upload-card small{
  font-size:10.5px !important;
  line-height:1.08 !important;
  font-weight:700 !important;
  max-width:100% !important;
  overflow-wrap:break-word !important;
}

.expert-upload-card.wide{
  min-height:88px !important;
  grid-template-columns:58px 1fr !important;
  padding:12px 16px !important;
}

.expert-upload-card.wide svg{
  width:46px !important;
  height:46px !important;
}

.expert-upload-card.wide strong{
  font-size:16px !important;
}

.expert-upload-card.wide small{
  font-size:11.5px !important;
}

.expert-upload-grid{
  gap:12px !important;
}

.expert-upload-head h3{
  font-size:20px !important;
}

.expert-upload-head p{
  font-size:12px !important;
}

/* FINAL FIX: default Expert page raw upload icon colors */
.raw-upload-card.raw-cyan .raw-upload-icon,
.raw-upload-card.raw-cyan svg,
.raw-upload-card.raw-cyan strong{
  color:#28f4ff !important;
}

.raw-upload-card.raw-pink .raw-upload-icon,
.raw-upload-card.raw-pink svg,
.raw-upload-card.raw-pink strong{
  color:#ff63d7 !important;
}

.raw-upload-card.raw-blue .raw-upload-icon,
.raw-upload-card.raw-blue svg,
.raw-upload-card.raw-blue strong{
  color:#38d9ff !important;
}

.raw-upload-card.raw-amber .raw-upload-icon,
.raw-upload-card.raw-amber svg,
.raw-upload-card.raw-amber strong{
  color:#ffb33d !important;
}

.raw-upload-card.raw-lime .raw-upload-icon,
.raw-upload-card.raw-lime svg,
.raw-upload-card.raw-lime strong{
  color:#d7ff2f !important;
}

.raw-upload-card.raw-teal .raw-upload-icon,
.raw-upload-card.raw-teal svg,
.raw-upload-card.raw-teal strong{
  color:#48ffe0 !important;
}

.raw-upload-card.raw-coral .raw-upload-icon,
.raw-upload-card.raw-coral svg,
.raw-upload-card.raw-coral strong{
  color:#ff9bc8 !important;
}

.raw-upload-card.raw-sky .raw-upload-icon,
.raw-upload-card.raw-sky svg,
.raw-upload-card.raw-sky strong{
  color:#a7e8ff !important;
}

.raw-upload-card .raw-upload-icon,
.raw-upload-card svg{
  filter:
    drop-shadow(0 0 7px currentColor)
    drop-shadow(0 0 18px currentColor) !important;
}

.raw-upload-card{
  background:
    radial-gradient(circle at 50% 4%, rgba(0,200,255,.16), transparent 48%),
    linear-gradient(180deg,rgba(7,40,92,.92),rgba(3,17,45,.98)) !important;
}

.raw-upload-card span,
.raw-upload-card small{
  color:#d7eaff !important;
}

/* FINAL TINY FONT ADJUSTMENT: expert upload cards */
.expert-upload-card{
  min-height:142px !important;
  padding:9px 6px !important;
  gap:4px !important;
}

.expert-upload-card svg{
  width:39px !important;
  height:39px !important;
}

.expert-upload-card strong{
  font-size:12.8px !important;
  line-height:1.02 !important;
  letter-spacing:-.25px !important;
}

.expert-upload-card small{
  font-size:9.5px !important;
  line-height:1.05 !important;
  font-weight:650 !important;
}

.expert-upload-card.wide{
  min-height:82px !important;
  grid-template-columns:52px 1fr !important;
  padding:10px 14px !important;
}

.expert-upload-card.wide svg{
  width:42px !important;
  height:42px !important;
}

.expert-upload-card.wide strong{
  font-size:14.5px !important;
}

.expert-upload-card.wide small{
  font-size:10.5px !important;
}

.expert-upload-grid{
  gap:10px !important;
}




/* OSIUN MOODLE INPUT LINKS CSS START */
.osiun-moodle-input-links {
  margin-top: 18px;
}

.osiun-moodle-input-links .card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.osiun-moodle-input-links .card:hover {
  transform: translateY(-2px);
}
/* OSIUN MOODLE INPUT LINKS CSS END */

/* OSIUN MOODLE CLEAN LEARNER EXPERT CSS START */
.osiun-moodle-clean-page .hero-card {
  margin-bottom: 18px;
}

.osiun-moodle-clean-page .hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.osiun-moodle-input-clean,
.osiun-moodle-expert-input {
  margin-top: 18px;
  margin-bottom: 18px;
}

.osiun-moodle-expert-input-row {
  margin-top: 14px;
}

.osiun-moodle-input-clean .card,
.osiun-moodle-expert-input .card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.osiun-moodle-input-clean .card:hover,
.osiun-moodle-expert-input .card:hover {
  transform: translateY(-2px);
}

.expert-action-card .badge {
  display: inline-block;
  margin-bottom: 8px;
}
/* OSIUN MOODLE CLEAN LEARNER EXPERT CSS END */

/* OSIUN LEARNER MOODLE AI LAYOUT CSS START */
.osiun-moodle-ai-page .hero-card {
  margin-bottom: 18px;
}

.osiun-moodle-ai-page .hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.osiun-moodle-ai-grid {
  margin-top: 18px;
  margin-bottom: 18px;
}

.osiun-moodle-ai-chat {
  margin-top: 18px;
  margin-bottom: 18px;
}

.osiun-ai-chat-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.osiun-ai-chat-card {
  min-height: 120px;
}

@media (max-width: 900px) {
  .osiun-ai-chat-layout {
    grid-template-columns: 1fr;
  }
}
/* OSIUN LEARNER MOODLE AI LAYOUT CSS END */

/* OSIUN LEARNER MOODLE AI INLINE CSS START */
.osiun-moodle-ai-page .osiun-moodle-ai-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.osiun-ai-chat-panel {
  min-height: 100%;
}

.osiun-ai-chat-board {
  padding: 16px;
}

.osiun-ai-chat-board .title {
  display: block;
  margin-bottom: 12px;
}

.osiun-ai-chat-content {
  display: grid;
  gap: 12px;
}

.osiun-ai-chat-content .card {
  min-height: auto;
}

.osiun-ai-chat-content .card:nth-child(2) {
  display: none;
}

.osiun-ai-chat-content .card:nth-child(3) {
  display: block;
}

@media (max-width: 1100px) {
  .osiun-moodle-ai-page .osiun-moodle-ai-grid {
    grid-template-columns: 1fr;
  }
}
/* OSIUN LEARNER MOODLE AI INLINE CSS END */

/* OSIUN MOODLE FULL FUNCTION MENU CSS START */
.osiun-moodle-full-page .hero-card {
  margin-bottom: 18px;
}

.osiun-moodle-full-page .hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.osiun-moodle-full-page .hero-panel {
  display: grid;
  gap: 10px;
}

.osiun-moodle-full-page .osiun-moodle-three-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0;
  align-items: stretch;
}

.osiun-moodle-full-page .osiun-ai-chat-panel {
  min-height: 100%;
}

.osiun-moodle-full-page .osiun-ai-chat-board {
  padding: 16px;
}

.osiun-moodle-full-page .osiun-ai-chat-content {
  display: grid;
  gap: 12px;
}

.osiun-moodle-menu-section {
  margin-top: 18px;
}

.osiun-moodle-link-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.osiun-moodle-link-card:hover {
  transform: translateY(-2px);
}

.osiun-moodle-link-card .badge {
  display: inline-block;
  margin-bottom: 8px;
}

@media (max-width: 1100px) {
  .osiun-moodle-full-page .osiun-moodle-three-grid {
    grid-template-columns: 1fr;
  }
}
/* OSIUN MOODLE FULL FUNCTION MENU CSS END */








/* OSIUN LEARNER LIVE DATA SINGLE FINAL CSS START */
#learnerLiveDataSingleFinal {
  margin-top: 22px;
  border: 1px solid rgba(120, 170, 255, 0.28);
}

#learnerLiveDataSingleFinal .learner-live-single-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 18px;
}

#learnerLiveDataSingleFinal .learner-live-single-card {
  text-align: left;
  cursor: pointer;
  min-height: 140px;
}

#learnerLiveDataSingleFinal .badge {
  display: inline-block;
  margin-bottom: 10px;
}

#learnerLiveDataSingleFinal .learner-live-single-card:hover {
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  #learnerLiveDataSingleFinal .learner-live-single-row {
    grid-template-columns: 1fr;
  }
}
/* OSIUN LEARNER LIVE DATA SINGLE FINAL CSS END */







/* OSIUN EDUCATE PAGE1 SIDEBAR FINAL CSS START */
.osiun-educat-page1-side button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.osiun-educat-page1-side button span {
  display: inline-block;
}

#educatDashboard,
#educatCourses,
#educatTopic,
#educatAiTutor,
#educatMaterials,
#educatAssignments,
#educatProgress,
#educatTranscript {
  scroll-margin-top: 90px;
}

.learning-grid .chat-panel {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* OSIUN EDUCATE PAGE1 SIDEBAR FINAL CSS END */

/* OSIUN EDUCATE CENTER FEATURES FINAL CSS START */
.osiun-educat-center-features-final {
  margin-top: 18px;
}

.osiun-educat-center-features-final section {
  scroll-margin-top: 90px;
}

.osiun-educat-center-menu {
  border: 1px solid rgba(120,170,255,.24);
}

.osiun-educat-center-feature-card {
  text-align: left;
  cursor: pointer;
  min-height: 140px;
}

.osiun-educat-center-feature-card:hover {
  transform: translateY(-2px);
}

.learning-grid .chat-panel {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* OSIUN EDUCATE CENTER FEATURES FINAL CSS END */

/* OSIUN CENTER OPENEDUCAT LIVE DATA ONLY CSS START */
.osiun-center-live-output {
  margin: 18px 0;
  border: 1px solid rgba(120,170,255,.24);
}

.osiun-center-live-output {
  scroll-margin-top: 90px;
}

.osiun-educat-center-feature-card {
  cursor: pointer;
}

.osiun-educat-center-feature-card:hover {
  transform: translateY(-2px);
}
/* OSIUN CENTER OPENEDUCAT LIVE DATA ONLY CSS END */

/* OSIUN LEARNING CONTEXT CONSOLE STYLE FINAL CSS START */
.osiun-learning-context-console,
#osiunOpenEducatLearnerConsole {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(99, 179, 237, 0.26) !important;
  background:
    radial-gradient(circle at 15% 20%, rgba(99,179,237,.18), transparent 28%),
    radial-gradient(circle at 85% 10%, rgba(139,92,246,.14), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}

.osiun-learning-context-console::before,
#osiunOpenEducatLearnerConsole::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(99,179,237,.10), transparent 34%, rgba(139,92,246,.08));
  opacity: .7;
}

.osiun-learning-context-console > *,
#osiunOpenEducatLearnerConsole > * {
  position: relative;
  z-index: 1;
}

#osiunOpenEducatLearnerConsole .title h3 {
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

#osiunOpenEducatLearnerConsole .title p {
  max-width: 760px;
  line-height: 1.55;
}

#osiunOpenEducatLearnerConsole .title .badge {
  background: rgba(99,179,237,.16);
  border: 1px solid rgba(99,179,237,.28);
  color: inherit;
}

#osiunOpenEducatLearnerConsole .osiun-openeducat-form {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background: rgba(3, 10, 24, .22);
  backdrop-filter: blur(12px);
}

#osiunOpenEducatLearnerConsole .osiun-openeducat-form label span {
  font-weight: 700;
  color: rgba(255,255,255,.82);
}

#osiunOpenEducatLearnerConsole .osiun-openeducat-form select {
  min-height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(99,179,237,.28);
  background: rgba(5, 12, 28, .72);
  color: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

#osiunOpenEducatLearnerConsole .osiun-openeducat-form select:focus {
  outline: none;
  border-color: rgba(99,179,237,.62);
  box-shadow: 0 0 0 3px rgba(99,179,237,.14);
}

#osiunOpenEducatLearnerConsole #osiunUseEducatContextBtn {
  min-height: 46px;
  border-radius: 16px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 12px 28px rgba(99,179,237,.18);
}

#osiunOpenEducatLearnerConsole .osiun-openeducat-selected {
  margin-top: 14px;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(99,179,237,.16);
  background: rgba(255,255,255,.045);
}

#osiunOpenEducatLearnerConsole .osiun-openeducat-selected .grid {
  gap: 12px;
}

#osiunOpenEducatLearnerConsole .osiun-openeducat-selected .card {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
}

#osiunOpenEducatLearnerConsole .osiun-openeducat-selected .card h4 {
  margin-top: 4px;
}

#osiunOpenEducatLearnerConsole .osiun-openeducat-selected > span {
  color: var(--muted);
}
/* OSIUN LEARNING CONTEXT CONSOLE STYLE FINAL CSS END */


/* OSIUN EDUCATE ALL FEATURES LIVE CENTER CSS START */
.osiun-educat-all-features-live-center {
  margin-top: 18px;
}

.osiun-educat-all-features-live-center section {
  scroll-margin-top: 90px;
}

.osiun-educat-feature-menu {
  border: 1px solid rgba(120,170,255,.24);
}

.osiun-educat-feature-btn {
  text-align: left;
  cursor: pointer;
  min-height: 132px;
}

.osiun-educat-feature-btn:hover {
  transform: translateY(-2px);
}
/* OSIUN EDUCATE ALL FEATURES LIVE CENTER CSS END */


/* OSIUN EXPERT LIVE SECTION BOTTOM FINAL CSS START */
.osiun-expert-live-section-bottom-final {
  margin: 24px 0 0;
  border: 1px solid rgba(120,170,255,.24);
}

.osiun-expert-live-section-bottom-final button.card {
  text-align: left;
  cursor: pointer;
  min-height: 140px;
}

.osiun-expert-live-section-bottom-final button.card:hover {
  transform: translateY(-2px);
}
/* OSIUN EXPERT LIVE SECTION BOTTOM FINAL CSS END */




/* OSIUN EXPERT MOODLE CLEAN FINAL CSS START */
.osiun-expertmoodle-clean section {
  scroll-margin-top: 90px;
}

.osiun-expertmoodle-back-row {
  margin: 0 0 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.osiun-expertmoodle-menu-bottom {
  margin-top: 22px;
  border: 1px solid rgba(120,170,255,.24);
}

.osiun-expertmoodle-menu-btn {
  text-align: left;
  cursor: pointer;
  min-height: 132px;
}

.osiun-expertmoodle-menu-btn:hover {
  transform: translateY(-2px);
}
/* OSIUN EXPERT MOODLE CLEAN FINAL CSS END */


/* OSIUN LIVE OPS MENU CSS START */
.osiun-live-ops-menu {
  margin-top: 22px;
  border: 1px solid rgba(120,170,255,.24);
}

.osiun-live-ops-btn {
  text-align: left;
  cursor: pointer;
  min-height: 132px;
}

.osiun-live-ops-btn:hover {
  transform: translateY(-2px);
}
/* OSIUN LIVE OPS MENU CSS END */


/* OSIUN MOODLE SUBPAGES PHASE 1 CSS START */
.osiun-moodle-subpage section {
  scroll-margin-top: 90px;
}

.osiun-moodle-subnav {
  margin-top: 22px;
  border: 1px solid rgba(120,170,255,.24);
}

.osiun-moodle-subnav-btn {
  text-align: left;
  cursor: pointer;
  min-height: 126px;
}

.osiun-moodle-subnav-btn.active {
  outline: 1px solid rgba(120,170,255,.55);
}

.osiun-moodle-subnav-btn:hover {
  transform: translateY(-2px);
}

.osiun-moodle-subpages-phase1-wrap {
  margin-top: 22px;
}
/* OSIUN MOODLE SUBPAGES PHASE 1 CSS END */


/* OSIUN MOODLE SUBPAGES INLINE CSS START */
#osiunMoodleSubPagesPhase1Inline {
  margin-top: 22px;
  border: 1px solid rgba(120,170,255,.24);
}

#osiunMoodleSubPagesPhase1Inline .osiun-moodle-subnav-btn {
  text-align: left;
  cursor: pointer;
  min-height: 126px;
}

#osiunMoodleSubPagesPhase1Inline .osiun-moodle-subnav-btn:hover {
  transform: translateY(-2px);
}
/* OSIUN MOODLE SUBPAGES INLINE CSS END */


/* OSIUN MOODLE FRONTEND INTEGRATION CSS START */
.osiun-moodle-frontend-integrated section {
  scroll-margin-top: 90px;
}

.osiun-moodle-frontend-frame-box {
  padding: 14px;
}

.osiun-moodle-frontend-frame {
  width: 100%;
  min-height: 980px;
  border: 1px solid rgba(120,170,255,.22);
  border-radius: 18px;
  background: #060914;
}

@media(max-width: 800px){
  .osiun-moodle-frontend-frame {
    min-height: 1200px;
  }
}
/* OSIUN MOODLE FRONTEND INTEGRATION CSS END */


/* OSIUN MOODLE FRONTEND FINAL CSS START */
.osiun-moodle-frontend-final section {
  scroll-margin-top: 90px;
}

.osiun-moodle-frontend-frame-box {
  padding: 14px;
}

.osiun-moodle-frontend-frame {
  width: 100%;
  min-height: 1100px;
  border: 1px solid rgba(120,170,255,.22);
  border-radius: 18px;
  background: #060914;
}

@media(max-width: 800px){
  .osiun-moodle-frontend-frame {
    min-height: 1350px;
  }
}
/* OSIUN MOODLE FRONTEND FINAL CSS END */


/* OSIUN MOODLE FRONTEND ACTION LINKS CSS START */
#osiunMoodleFrontendActionLinks .card {
  text-align: left;
  cursor: pointer;
  min-height: 132px;
}

#osiunMoodleFrontendActionLinks .card:hover {
  transform: translateY(-2px);
}

.osiun-moodle-frontend-frame {
  display: block;
  width: 100%;
  min-height: 1200px;
}
/* OSIUN MOODLE FRONTEND ACTION LINKS CSS END */

/* OSIUN MOODLE SHELL FORM WIDTH FIX */
.osiun-moodle-formgrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  width:100%;
}

.osiun-moodle-formgrid > div{
  min-width:0;
}

.osiun-moodle-formgrid label{
  display:block;
  margin-bottom:7px;
}

.osiun-moodle-formgrid input,
.osiun-moodle-formgrid select,
.osiun-moodle-formgrid textarea{
  width:100%;
  max-width:100%;
  min-width:0;
  display:block;
  box-sizing:border-box;
}

.osiun-moodle-formgrid textarea{
  min-height:96px;
  resize:vertical;
}

.osiun-moodle-actionrow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

@media(max-width:760px){
  .osiun-moodle-formgrid{
    grid-template-columns:1fr;
  }
}
/* OSIUN MOODLE SHELL FORM WIDTH FIX END */

/* OSIUN MOODLE PANELIZED WORKSPACE */
.osiun-moodle-panel-wrap{
  margin-top:16px;
}

.osiun-moodle-panel{
  display:none;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);
  border-radius:18px;
  padding:16px;
}

.osiun-moodle-panel.active{
  display:block;
}

.osiun-moodle-subbox{
  margin-top:16px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(0,0,0,.10);
  border-radius:18px;
  padding:16px;
}

.osiun-moodle-workspace-menu .card{
  cursor:pointer;
}
/* OSIUN MOODLE PANELIZED WORKSPACE END */

/* OSIUN MOODLE EDUCATED TOP SECTIONS */
#expertMoodleWorkflow,
#expertMoodleUploadMaterial,
#expertMoodleInsight{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(120,170,255,.24);
  background:
    radial-gradient(circle at top right, rgba(0,167,255,.18), transparent 34%),
    radial-gradient(circle at bottom left, rgba(183,140,255,.14), transparent 30%),
    linear-gradient(180deg,rgba(8,22,52,.96),rgba(3,10,27,.96));
  box-shadow:0 26px 80px rgba(0,0,0,.32);
}

#expertMoodleWorkflow:before,
#expertMoodleUploadMaterial:before,
#expertMoodleInsight:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(106,167,255,.09),transparent 38%),
    radial-gradient(circle at 12% 18%,rgba(124,255,178,.10),transparent 22%);
}

#expertMoodleWorkflow > *,
#expertMoodleUploadMaterial > *,
#expertMoodleInsight > *{
  position:relative;
  z-index:1;
}

#expertMoodleWorkflow .title,
#expertMoodleUploadMaterial .title,
#expertMoodleInsight .title{
  align-items:flex-start;
  margin-bottom:20px;
}

#expertMoodleWorkflow .title h3,
#expertMoodleUploadMaterial .title h3,
#expertMoodleInsight .title h3{
  font-size:26px;
  letter-spacing:-.045em;
  margin-bottom:6px;
}

#expertMoodleWorkflow .title p,
#expertMoodleUploadMaterial .title p,
#expertMoodleInsight .title p{
  max-width:760px;
  font-size:14px;
}

#expertMoodleWorkflow .grid,
#expertMoodleUploadMaterial .grid,
#expertMoodleInsight .grid{
  gap:14px;
}

#expertMoodleWorkflow .card,
#expertMoodleUploadMaterial .card,
#expertMoodleInsight .card{
  min-height:154px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

#expertMoodleWorkflow .card h4,
#expertMoodleUploadMaterial .card h4,
#expertMoodleInsight .card h4{
  font-size:17px;
}

#expertMoodleInsight #expertMoodleStatusText{
  margin-bottom:16px;
  color:#cfe1ff;
}

#expertMoodleTeachingOps{
  border-radius:24px;
  border:1px solid rgba(124,255,178,.18);
  background:
    radial-gradient(circle at top left, rgba(124,255,178,.12), transparent 28%),
    linear-gradient(180deg,rgba(10,28,50,.94),rgba(5,13,30,.96));
}
/* OSIUN MOODLE EDUCATED TOP SECTIONS END */


/* =========================================================
   OSIUN Welcome Page V2 - dark neon mockup alignment
   ========================================================= */
.welcome-v2{
  padding-top:24px;
  background:
    radial-gradient(circle at 72% 8%, rgba(0,200,255,.18), transparent 32%),
    radial-gradient(circle at 16% 36%, rgba(27,91,255,.13), transparent 28%),
    linear-gradient(180deg,#020817 0%,#031329 48%,#020817 100%);
}

.osiun-topbar{
  height:76px;
  padding-left:4.5vw;
  padding-right:4.5vw;
}
.osiun-topbar .brand strong{letter-spacing:7px}
.osiun-topbar .brand small{font-size:8px;letter-spacing:.9px}
.osiun-topbar .nav{
  gap:18px;
  font-size:13px;
}
.osiun-topbar .nav button{
  padding-top:28px;
  padding-bottom:25px;
}
.login-btn{
  padding:9px 15px;
  border-radius:10px;
}

.welcome-hero{
  min-height:540px;
  display:grid;
  grid-template-columns:minmax(430px, .95fr) minmax(520px, 1.05fr);
  gap:48px;
  align-items:center;
  padding:22px 0 32px;
  border-bottom:1px solid rgba(95,190,255,.13);
}

.welcome-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 14px;
  margin-bottom:24px;
  border:1px solid rgba(0,207,255,.75);
  border-radius:999px;
  background:rgba(0,157,255,.08);
  box-shadow:0 0 28px rgba(0,200,255,.12);
  color:#f3fbff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.5px;
}
.welcome-badge i{
  width:7px;
  height:7px;
  border:1px solid var(--cyan);
  border-radius:50%;
  display:block;
}

.welcome-copy h1{
  margin:0 0 18px;
  max-width:680px;
  font-size:64px;
  line-height:1.02;
  letter-spacing:-2.2px;
  color:#fff;
}
.welcome-copy h1 span{
  color:var(--cyan);
  text-shadow:0 0 28px rgba(0,207,255,.45);
}
.welcome-lead{
  max-width:610px;
  margin:0 0 13px;
  color:#e7f5ff;
  font-size:18px;
  line-height:1.62;
}
.welcome-sub{
  max-width:615px;
  margin:0;
  color:#b6c9dd;
  font-size:16px;
  line-height:1.62;
}
.welcome-actions{
  display:flex;
  gap:14px;
  margin-top:26px;
}
.welcome-primary{
  padding:15px 24px;
  box-shadow:0 18px 44px rgba(0,179,255,.25);
}
.welcome-secondary{
  padding:15px 24px;
  background:rgba(255,255,255,.035);
}

.welcome-principles{
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(4, minmax(110px,1fr));
  gap:12px;
}
.welcome-principles div{
  min-height:54px;
  padding:9px 10px;
  border-left:1px solid rgba(0,207,255,.45);
  background:linear-gradient(90deg,rgba(0,160,255,.08),transparent);
}
.welcome-principles b{
  display:block;
  color:#fff;
  font-size:12px;
}
.welcome-principles span{
  display:block;
  margin-top:3px;
  color:#9fb6ce;
  font-size:11px;
  line-height:1.25;
}

.welcome-visual{
  position:relative;
  min-height:500px;
}
.world-grid{
  position:absolute;
  inset:5% 3% 0;
  opacity:.45;
  background-image:
    radial-gradient(circle, rgba(0,205,255,.5) 1px, transparent 1px),
    linear-gradient(rgba(0,187,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,187,255,.08) 1px, transparent 1px);
  background-size:28px 28px, 70px 70px, 70px 70px;
  mask-image:radial-gradient(circle at center, black 0%, transparent 68%);
}
.globe-stage{
  position:absolute;
  left:50%;
  top:49%;
  width:390px;
  height:390px;
  transform:translate(-50%,-50%);
}
.globe-core{
  position:absolute;
  inset:42px;
  border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), transparent 9%),
    radial-gradient(circle at 42% 42%, rgba(43,219,255,.35), transparent 28%),
    radial-gradient(circle at 70% 65%, rgba(0,90,255,.28), transparent 44%),
    radial-gradient(circle at 50% 50%, #073a68 0%, #031a39 55%, #020b20 100%);
  border:2px solid rgba(55,212,255,.95);
  box-shadow:
    0 0 45px rgba(0,205,255,.75),
    inset 0 0 58px rgba(0,205,255,.35);
}
.globe-core:before{
  content:"";
  position:absolute;
  inset:-6%;
  border-radius:50%;
  background:
    linear-gradient(18deg, transparent 0 18%, rgba(0,220,255,.22) 18% 19%, transparent 19% 100%),
    linear-gradient(74deg, transparent 0 28%, rgba(0,220,255,.18) 28% 29%, transparent 29% 100%),
    linear-gradient(138deg, transparent 0 44%, rgba(0,220,255,.20) 44% 45%, transparent 45% 100%),
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(0,219,255,.12) 18px 19px);
  opacity:.9;
}
.globe-core:after{
  content:"";
  position:absolute;
  inset:10%;
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 35%, rgba(0,224,255,.9) 0 3px, transparent 4px),
    radial-gradient(circle at 62% 42%, rgba(0,224,255,.9) 0 3px, transparent 4px),
    radial-gradient(circle at 45% 63%, rgba(0,224,255,.9) 0 3px, transparent 4px),
    radial-gradient(circle at 72% 68%, rgba(0,224,255,.9) 0 3px, transparent 4px);
}
.globe-lines{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    linear-gradient(22deg, transparent 42%, rgba(255,255,255,.55) 43%, transparent 44%),
    linear-gradient(155deg, transparent 35%, rgba(255,255,255,.45) 36%, transparent 37%),
    linear-gradient(92deg, transparent 50%, rgba(255,255,255,.35) 51%, transparent 52%);
  opacity:.48;
}
.globe-shine{
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.20), transparent 36%, transparent 70%, rgba(0,208,255,.20));
}
.globe-orbit{
  position:absolute;
  border:1px solid rgba(0,199,255,.42);
  border-radius:50%;
  box-shadow:0 0 24px rgba(0,199,255,.16);
}
.orbit-a{inset:22px;transform:rotateX(68deg) rotateZ(-18deg)}
.orbit-b{inset:0;transform:rotateX(64deg) rotateZ(26deg)}
.orbit-c{inset:-28px;transform:rotateX(58deg) rotateZ(82deg)}
.globe-base{
  position:absolute;
  left:18%;
  right:18%;
  bottom:20px;
  height:42px;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,213,255,.75), rgba(0,96,255,.18) 45%, transparent 70%);
  box-shadow:0 0 45px rgba(0,200,255,.5);
}

.floating-card{
  position:absolute;
  width:170px;
  min-height:72px;
  padding:14px 16px;
  border:1px solid rgba(93,186,255,.42);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(7,28,58,.92),rgba(3,12,30,.86));
  box-shadow:0 18px 55px rgba(0,0,0,.23), inset 0 0 24px rgba(0,190,255,.06);
}
.floating-card:before{
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 18px var(--cyan);
}
.floating-card strong{display:block;color:#fff;font-size:15px}
.floating-card small{display:block;margin-top:5px;color:#c4d4e7;font-size:12px;line-height:1.25}
.fc1{left:3%;top:11%}.fc1:before{right:-17px;top:23px}
.fc2{right:1%;top:10%}.fc2:before{left:-17px;top:23px}
.fc3{left:0;bottom:18%}.fc3:before{right:-17px;top:28px}
.fc4{right:0;bottom:17%}.fc4:before{left:-17px;top:28px}

.welcome-section{
  padding:30px 0 8px;
}
.section-title.centered{
  text-align:center;
  margin-bottom:24px;
}
.section-title h2{
  margin:0;
  font-size:31px;
  letter-spacing:-.5px;
}
.section-title p{
  margin:8px auto 0;
  max-width:760px;
  color:#a9bfd6;
}

.process-row{
  display:grid;
  grid-template-columns:1fr 32px 1fr 32px 1fr 32px 1fr 32px 1fr;
  align-items:stretch;
  gap:10px;
}
.process-card{
  min-height:175px;
  padding:20px 18px;
  border:1px solid rgba(93,186,255,.28);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(7,26,51,.88),rgba(3,13,30,.9));
  box-shadow:inset 0 0 30px rgba(0,187,255,.04);
}
.process-card h3{
  margin:15px 0 9px;
  font-size:15px;
}
.process-card p{
  margin:0;
  color:#b6c9dd;
  font-size:13px;
  line-height:1.5;
}
.process-num{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  font-size:20px;
  background:#0b74ff;
  box-shadow:0 0 25px rgba(0,162,255,.35);
}
.process-card.purple .process-num{background:#763bde}
.process-card.green .process-num{background:#07946d}
.process-card.cyan .process-num{background:#0b8dff}
.process-card.amber .process-num{background:#df850e}
.process-arrow{
  display:grid;
  place-items:center;
  color:var(--cyan);
  font-size:26px;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.why-card{
  padding:24px 22px;
  min-height:190px;
  border:1px solid rgba(93,186,255,.28);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(7,26,51,.78),rgba(3,13,30,.86));
}
.why-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:50%;
  margin-bottom:15px;
  color:#42d7ff;
  border:1px solid rgba(0,200,255,.6);
  background:rgba(0,147,255,.12);
  font-size:24px;
}
.why-icon.purple{color:#b177ff;border-color:rgba(177,119,255,.6);background:rgba(123,67,255,.13)}
.why-icon.green{color:#35e4a2;border-color:rgba(53,228,162,.6);background:rgba(53,228,162,.10)}
.why-icon.amber{color:#ffb23e;border-color:rgba(255,178,62,.6);background:rgba(255,178,62,.12)}
.why-card h3{
  margin:0 0 10px;
  font-size:17px;
}
.why-card p{
  margin:0;
  color:#b6c9dd;
  line-height:1.55;
  font-size:13px;
}

.access-section{
  padding-bottom:26px;
}
.access-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
}
.access-card{
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:24px 18px 18px;
  border:1px solid rgba(0,199,255,.48);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(5,30,62,.9),rgba(3,14,31,.88));
}
.access-card h3{
  margin:13px 0 9px;
  font-size:20px;
}
.access-card p{
  flex:1;
  margin:0 0 18px;
  color:#c0d0e3;
  font-size:13px;
  line-height:1.55;
}
.access-icon{
  width:60px;
  height:60px;
  display:grid;
  place-items:center;
  border:1px solid rgba(0,200,255,.65);
  border-radius:50%;
  background:rgba(0,147,255,.14);
  font-size:27px;
  box-shadow:0 0 30px rgba(0,199,255,.10);
}
.expert-card{border-color:rgba(47,229,159,.48);background:linear-gradient(145deg,rgba(0,65,56,.75),rgba(3,14,31,.88))}
.academic-card{border-color:rgba(155,104,255,.62);background:linear-gradient(145deg,rgba(44,20,82,.78),rgba(3,14,31,.88))}
.office-card{border-color:rgba(255,178,62,.62);background:linear-gradient(145deg,rgba(74,45,5,.72),rgba(3,14,31,.88))}
.donor-card{border-color:rgba(255,94,115,.65);background:linear-gradient(145deg,rgba(84,18,27,.75),rgba(3,14,31,.88))}

.impact-strip{
  margin:8px 0 34px;
  padding:20px 18px;
  border:1px solid rgba(93,186,255,.27);
  border-radius:17px;
  background:linear-gradient(90deg,rgba(0,136,255,.11),rgba(2,14,31,.95),rgba(0,136,255,.10));
}
.impact-strip h2{
  margin:0 0 18px;
  text-align:center;
  font-size:29px;
}
.impact-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
}
.impact-grid div{
  padding:8px 18px;
  border-right:1px solid rgba(93,186,255,.22);
}
.impact-grid div:last-child{border-right:0}
.impact-grid strong{
  display:block;
  color:#7fdfff;
  font-size:31px;
  line-height:1;
}
.impact-grid span{
  display:block;
  margin-top:8px;
  color:#b6c9dd;
  font-size:13px;
  line-height:1.35;
}

@media (max-width:1200px){
  .welcome-hero{grid-template-columns:1fr}
  .welcome-visual{min-height:460px}
  .process-row{grid-template-columns:1fr;gap:14px}
  .process-arrow{display:none}
  .why-grid,.access-grid,.impact-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .welcome-copy h1{font-size:44px}
  .welcome-principles{grid-template-columns:1fr 1fr}
  .welcome-visual{min-height:420px;transform:scale(.86);transform-origin:center top}
  .why-grid,.access-grid,.impact-grid{grid-template-columns:1fr}
  .impact-grid div{border-right:0;border-bottom:1px solid rgba(93,186,255,.18)}
}