:root{
    --og-navy:#0b2f57;
    --og-blue:#123f70;
    --og-sky:#1da7d8;
    --og-teal:#18b7a5;
    --og-green:#31c86a;
    --og-gold:#f4b943;
    --og-ink:#17212f;
    --og-muted:#68778b;
    --og-line:#dce6f0;
    --og-soft:#f3f7fb;
    --og-card:#ffffff;
    --og-shadow:0 18px 50px rgba(9,47,87,.12);
}
*{box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;margin:0;background:linear-gradient(180deg,#edf6fb 0,#f7fafc 380px,#f4f7fb 100%);color:var(--og-ink)}
.academyBody{position:relative;min-height:100vh;background:#eef7fa;overflow-x:hidden}
.academyBackdrop{position:fixed;inset:0;z-index:-1;background:linear-gradient(140deg,#082947 0,#0e426c 46%,#0a6b78 100%)}
.academyBackdrop:before{content:"";position:absolute;inset:0;background:linear-gradient(156deg,rgba(255,255,255,.12) 0 30%,transparent 30% 100%),linear-gradient(24deg,transparent 0 61%,rgba(49,200,106,.18) 61% 100%)}
.academyBackdrop:after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(180deg,rgba(238,247,250,0),#eef7fa 54%,#f8fbfd)}
.ogShell{max-width:1180px;margin:0 auto;padding:28px 18px 56px}
.ogHero{position:relative;overflow:hidden;border-radius:8px;background:linear-gradient(135deg,var(--og-navy),var(--og-blue) 54%,#176f93);color:#fff;padding:28px 30px;margin-bottom:22px;box-shadow:var(--og-shadow)}
.ogHero:after{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;background:rgba(29,167,216,.26)}
.academyHero{padding:30px 32px 24px;background:linear-gradient(135deg,rgba(8,41,71,.98),rgba(14,66,108,.96) 55%,rgba(10,107,120,.96));box-shadow:0 24px 70px rgba(2,13,25,.24)}
.academyHero:after{display:none}
.academyHero:before{content:"";position:absolute;inset:0;background:linear-gradient(158deg,rgba(255,255,255,.12) 0 32%,transparent 32% 100%),linear-gradient(24deg,transparent 0 64%,rgba(244,185,67,.13) 64% 100%);pointer-events:none}
.heroKicker{font-size:13px;line-height:1;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:#a9eff2;margin-bottom:12px}
.ogHero h1{font-size:clamp(32px,5vw,58px);line-height:1;margin:0 0 12px;letter-spacing:0}
.ogHero p{max-width:760px;margin:0;color:#d9f3ff;font-size:17px;line-height:1.55}
.ogTop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;position:relative;z-index:1}
.ogUser{color:#d3e5f4;font-weight:700;margin-top:10px}
.ogActions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.heroProgress{position:relative;z-index:1;margin-top:28px;display:grid;grid-template-columns:160px minmax(0,1fr);gap:18px;align-items:center}
.heroProgress span{display:block;color:#c7e9f2;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.heroProgress strong{display:block;color:#fff;font-size:38px;line-height:1;margin-top:3px}
.progressTrack{height:12px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.24);border-radius:999px;overflow:hidden}
.progressTrack span{display:block;height:100%;background:linear-gradient(90deg,var(--og-green),var(--og-gold));border-radius:999px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;background:var(--og-blue);color:#fff;text-decoration:none;border:0;border-radius:7px;padding:10px 16px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(18,63,112,.18)}
.btn:hover{background:#0c335e}
.btn.secondary{background:#eef6fb;color:var(--og-blue);box-shadow:none;border:1px solid #c8dcea}
.btn.success{background:var(--og-green);color:#063b1f}
.btn.danger{background:#dc2626;color:#fff;box-shadow:0 8px 20px rgba(220,38,38,.20)}
.btn.danger:hover{background:#b91c1c}
.btn.ghost{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);box-shadow:none}
.academyDashboard{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;margin-bottom:18px;align-items:stretch}
.summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:18px}
.academyDashboard .summary{margin-bottom:0}
.stat{background:rgba(255,255,255,.96);border:1px solid var(--og-line);border-radius:8px;padding:16px;box-shadow:0 8px 26px rgba(9,47,87,.06)}
.academyDashboard .stat{min-height:104px}
.stat strong{display:flex;align-items:center;gap:7px;font-size:30px;line-height:1;color:var(--og-navy);margin-bottom:6px}
.stat span{color:var(--og-muted);font-weight:700;font-size:13px}
.nextPanel{display:flex;flex-direction:column;justify-content:space-between;gap:14px;background:linear-gradient(180deg,#fff,#effcf4);border:1px solid #a8e7bd;border-radius:8px;padding:18px;box-shadow:0 12px 34px rgba(9,47,87,.08)}
.nextPanel span{color:var(--og-teal);font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.nextPanel strong{display:block;color:var(--og-navy);font-size:23px;line-height:1.15;overflow-wrap:anywhere}
.coinIcon{width:1.05em;height:1.05em;object-fit:cover;vertical-align:-.16em;margin-left:.22em;border-radius:50%;overflow:hidden}
.creditValue{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.lessonList{display:grid;gap:14px}
.lessonCard{display:grid;grid-template-columns:210px minmax(0,1fr) auto;gap:18px;align-items:center;background:#fff;border:1px solid var(--og-line);border-radius:8px;padding:14px;box-shadow:0 12px 34px rgba(9,47,87,.07)}
.academyLessonList{gap:16px}
.academyLessonCard{position:relative;grid-template-columns:124px minmax(0,1fr) auto;gap:18px;padding:16px 18px;background:rgba(255,255,255,.98);overflow:hidden}
.academyLessonCard:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:#c9d9e7}
.clickableLesson{cursor:pointer;transition:.15s transform,.15s box-shadow,.15s border-color}
.clickableLesson:hover,.clickableLesson:focus{transform:translateY(-1px);border-color:#9ec7df;box-shadow:0 18px 46px rgba(9,47,87,.12);outline:0}
.academyLessonCard.current{border-color:#7bdca2;box-shadow:0 18px 46px rgba(9,47,87,.12)}
.academyLessonCard.current:before{background:linear-gradient(180deg,var(--og-green),var(--og-teal))}
.lessonPosterWrap{position:relative;width:124px}
.lessonPoster{width:210px;aspect-ratio:16/9;object-fit:cover;background:#0e1828;border-radius:7px}
.academyLessonCard .lessonPoster{width:124px;aspect-ratio:9/16;box-shadow:0 14px 30px rgba(8,41,71,.18)}
.lessonPreview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0e1828;border-radius:7px;opacity:0;pointer-events:none;transition:opacity .18s ease;box-shadow:0 14px 30px rgba(8,41,71,.18)}
.academyLessonCard.previewing .lessonPreview{opacity:1}
.lessonNumber{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border-radius:999px;background:rgba(8,41,71,.88);color:#fff;font-weight:800;font-size:13px}
.lessonContent{min-width:0}
.lessonTitle{font-size:27px;line-height:1.1;margin:0 0 10px;color:var(--og-ink)}
.academyLessonCard .lessonTitle{font-size:clamp(24px,3vw,36px);margin-bottom:12px;color:var(--og-navy);overflow-wrap:anywhere}
.lessonMetaLine{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.muted{color:var(--og-muted);font-size:13px}
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:700;background:#eef4fa;color:#38536e}
.badge.done{background:#dcfce7;color:#166534}
.badge.started{background:#fef3c7;color:#92400e}
.badge.currentBadge{background:#e0f7ff;color:#075985}
.rewardNote{margin-top:8px;color:#166534;font-size:13px;font-weight:700}
.notice{background:#fff7e6;border:1px solid #f7d28b;color:#775011;border-radius:8px;padding:13px;margin-bottom:16px}
.panel{background:#fff;border:1px solid var(--og-line);border-radius:8px;padding:22px;box-shadow:0 12px 34px rgba(9,47,87,.07)}
.tableWrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:940px}
th,td{text-align:left;padding:13px;border-bottom:1px solid #e8eef5;vertical-align:top}
th{font-size:12px;text-transform:uppercase;color:#52677e;background:#f8fbfd}
.num{text-align:right}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.orderBtns{display:flex;gap:6px}
.orderBtns button{inline-size:34px;block-size:34px;border:1px solid #bdd1e2;background:#fff;border-radius:7px;cursor:pointer;color:var(--og-blue);font-weight:700}
.formGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
label{display:block;font-weight:700;margin:14px 0 7px;color:#243447}
input[type=text],input[type=number],textarea{width:100%;border:1px solid #c7d6e4;border-radius:7px;padding:11px;font:inherit;background:#fff;color:var(--og-ink)}
textarea{min-height:180px;resize:vertical}
.ck.ck-editor{margin-bottom:8px}
.ck.ck-editor__main>.ck-editor__editable{min-height:220px;color:var(--og-ink);line-height:1.65}
.ck.ck-toolbar,.ck.ck-editor__main>.ck-editor__editable{border-color:#c7d6e4}
.editorFallback{margin-top:8px}
.toggleLine{display:flex;gap:9px;align-items:center;margin:16px 0}
.dropZone{position:relative;display:flex;align-items:center;justify-content:center;min-height:150px;border:2px dashed #9bc5df;border-radius:8px;background:linear-gradient(180deg,#fafdff,#edf7fc);cursor:pointer;text-align:center;padding:18px;transition:.15s border-color,.15s background,.15s transform}
.dropZone:hover,.dropZone.dragover{border-color:var(--og-sky);background:#e5f6fc;transform:translateY(-1px)}
.dropZone input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.dropTitle{display:block;font-weight:800;color:var(--og-blue);font-size:17px}
.dropHint{display:block;color:var(--og-muted);font-size:13px;margin-top:6px}
.fileName{margin-top:8px;color:var(--og-blue);font-weight:700;overflow-wrap:anywhere}
.uploadProgress{display:flex;min-width:min(360px,75vw);flex-direction:column;gap:12px;color:var(--og-blue);font-weight:700}
.uploadProgressTrack{display:block;height:12px;overflow:hidden;border-radius:999px;background:#d5eaf5}
.uploadProgressBar{display:block;width:0;height:100%;border-radius:inherit;background:var(--og-sky);transition:width .15s ease}
.dropZone.uploading{cursor:wait;transform:none}
.dropZone.uploadError{border-color:#c74747;background:#fff2f2}
.preview{width:100%;max-height:420px;object-fit:contain;background:#071525;border-radius:8px;margin-top:10px}
.msg{background:#e8f8ef;color:#14532d;padding:12px;border-radius:8px;margin-bottom:12px;border:1px solid #b7edc8}
.err{background:#fee2e2;color:#991b1b;padding:12px;border-radius:8px;margin-bottom:12px;border:1px solid #fecaca}
.dangerZone{margin-top:26px;padding-top:20px;border-top:1px solid #fecaca}
.dangerZone h2{margin:0 0 8px;color:#991b1b;font-size:20px;letter-spacing:0}
.dangerZone p{max-width:720px;margin:0 0 14px;color:#7f1d1d;line-height:1.55}
.playerBody{position:relative;min-height:100vh;background:#eaf4f8;color:#e8f4ff;overflow-x:hidden}
.playerBackdrop{position:fixed;inset:0;z-index:-1;background:linear-gradient(135deg,#082947 0,#0e426c 45%,#0a6b78 100%)}
.playerBackdrop:before{content:"";position:absolute;inset:0;background:linear-gradient(162deg,rgba(255,255,255,.10) 0 28%,transparent 28% 100%),linear-gradient(20deg,transparent 0 58%,rgba(49,200,106,.18) 58% 100%)}
.playerBackdrop:after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,rgba(234,244,248,0),#eaf4f8 68%,#f8fbfd)}
.playerShell{max-width:1180px;margin:0 auto;padding:30px 18px 64px}
.playerHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px;padding:20px 0;color:#fff}
.playerHeader h1{font-size:clamp(34px,5vw,64px);line-height:.98;margin:0;letter-spacing:0;max-width:820px}
.playerEyebrow{font-size:13px;line-height:1;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:#a9eff2;margin-bottom:12px}
.playerLoginNotice{max-width:760px}
.playerLayout{display:grid;grid-template-columns:minmax(300px,430px) minmax(0,1fr);gap:28px;align-items:start}
.playerStage{position:sticky;top:18px;display:flex;justify-content:center;min-width:0}
.phoneFrame{width:min(100%,430px);padding:14px;border-radius:28px;background:linear-gradient(180deg,#132238,#071525);box-shadow:0 32px 90px rgba(2,13,25,.42),inset 0 0 0 1px rgba(255,255,255,.10)}
.videoBox{position:relative;background:#000;border-radius:18px;overflow:hidden;box-shadow:0 18px 45px rgba(0,0,0,.32)}
.videoBox video{display:block;width:100%;aspect-ratio:9/16;max-height:78vh;background:#000;object-fit:contain}
.start{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.34))}
.start.hidden{display:none}
.play{inline-size:82px;block-size:82px;border-radius:50%;border:0;background:#fff;color:var(--og-blue);font-size:32px;cursor:pointer;box-shadow:0 18px 46px rgba(0,0,0,.28)}
.playerSide{display:flex;flex-direction:column;gap:14px;min-width:0}
.rewardSummary{background:rgba(255,255,255,.96);border:1px solid rgba(220,230,240,.9);border-radius:8px;padding:24px;color:var(--og-ink);box-shadow:var(--og-shadow)}
.rewardSummary.collected{border-color:#a8e7bd;background:linear-gradient(180deg,#ffffff,#effcf4)}
.rewardKicker{display:block;color:var(--og-teal);font-size:13px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;margin-bottom:12px}
.rewardSummary strong{font-size:clamp(40px,6vw,70px);line-height:1;color:var(--og-navy);margin-bottom:10px}
.rewardText{display:block;color:var(--og-muted);font-size:16px;line-height:1.55;max-width:520px}
.rewardPanel,.done,.playerNotice{background:#fff;border:1px solid var(--og-line);border-radius:8px;padding:15px 16px;margin:0;color:var(--og-ink);box-shadow:0 10px 28px rgba(9,47,87,.08)}
.rewardPanel{display:none;border-color:#92e9b2;background:#f0fff5;color:#14532d;font-weight:800}
.rewardPanel.show,.done.show{display:block}
.done{display:none;color:var(--og-ink)}
.playerCopy{line-height:1.7;color:#243447;background:rgba(255,255,255,.97);border:1px solid var(--og-line);border-radius:8px;padding:24px;margin-top:0;box-shadow:0 14px 36px rgba(9,47,87,.08)}
.copy img{max-width:100%;border-radius:8px}
.copy h2,.copy h3{color:var(--og-navy);line-height:1.2;margin:22px 0 10px}
.copy h2:first-child,.copy h3:first-child{margin-top:0}
.copy p{margin:0 0 12px}
.copy ul,.copy ol{padding-left:22px;margin:0 0 14px}
.copy li{margin:6px 0}
@media(prefers-reduced-motion:no-preference){
    .academyLessonCard{animation:lessonCardIn .46s ease-out both;animation-delay:var(--lesson-delay,0ms)}
    .playerHeader{animation:playerTitleFade .72s ease-out both}
    .playerStage{animation:playerStageIn .72s cubic-bezier(.2,.78,.24,1) both;will-change:transform,opacity}
    .playerSide{animation:playerSideIn .72s cubic-bezier(.2,.78,.24,1) both;will-change:transform,opacity}
}
@keyframes lessonCardIn{
    from{opacity:0;transform:translateY(14px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes playerTitleFade{
    from{opacity:0}
    to{opacity:1}
}
@keyframes playerStageIn{
    from{opacity:0;transform:translateX(clamp(-72px,-8vw,-28px))}
    to{opacity:1;transform:translateX(0)}
}
@keyframes playerSideIn{
    from{opacity:0;transform:translateX(clamp(28px,8vw,72px))}
    to{opacity:1;transform:translateX(0)}
}
@media(max-width:860px){
    .academyDashboard{grid-template-columns:1fr}
    .summary{grid-template-columns:repeat(2,minmax(0,1fr))}
    .lessonCard{grid-template-columns:120px minmax(0,1fr)}
    .lessonPoster{width:120px}
    .academyLessonCard{grid-template-columns:108px minmax(0,1fr)}
    .lessonPosterWrap,.academyLessonCard .lessonPoster{width:108px}
    .lessonCard .btn{grid-column:1/-1}
    .formGrid{grid-template-columns:1fr}
    .ogTop{flex-direction:column}
    .playerHeader{flex-direction:column}
    .playerLayout{grid-template-columns:1fr;align-items:start}
    .playerStage{position:static;justify-content:center}
    .phoneFrame{width:min(100%,390px)}
    .ogActions,.btn{width:100%}
}
@media(max-width:520px){
    .ogShell,.playerShell{padding-inline:12px}
    .ogHero{padding:22px 18px}
    .heroProgress{grid-template-columns:1fr;gap:10px}
    .summary{grid-template-columns:1fr}
    .lessonCard{grid-template-columns:1fr}
    .lessonPoster{width:100%}
    .academyLessonCard{grid-template-columns:1fr;padding:14px}
    .lessonPosterWrap{width:100%;max-width:220px}
    .academyLessonCard .lessonPoster{width:100%;max-width:220px}
    .playerShell{padding-top:18px}
    .playerHeader h1{font-size:36px}
    .phoneFrame{width:100%;padding:8px;border-radius:20px}
    .videoBox{border-radius:14px}
    .videoBox video{max-height:74vh}
    .rewardSummary{padding:18px}
    .playerCopy{padding:18px}
}