@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
:root{--bg:#f6f7f9;--paper:#fff;--ink:#1c2432;--muted:#7a8393;--line:#e7eaf0;--soft:#f1f3f7;--accent:#5262d5;--green:#27836d;--danger:#b45261;--shadow:0 8px 38px rgba(20,37,67,.035);--radius:20px;color-scheme:light}
@media(prefers-color-scheme:dark){body[data-theme="auto"]{--bg:#10141c;--paper:#191f2a;--ink:#f3f5fa;--muted:#a6acba;--line:#303746;--soft:#242c39;--green:#70c1a2;--danger:#ed92a1;--shadow:0 7px 42px rgba(0,0,0,.1);color-scheme:dark}}
body[data-theme="dark"]{--bg:#10141c;--paper:#191f2a;--ink:#f3f5fa;--muted:#a6acba;--line:#303746;--soft:#242c39;--green:#70c1a2;--danger:#ed92a1;--shadow:0 7px 42px rgba(0,0,0,.1);color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--ink);margin:0;font-family:Montserrat,Arial,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased;line-height:1.55}button,input,textarea,select{font:inherit}button,a,input,textarea,select{outline-offset:3px}a{text-decoration:none;color:inherit}a:hover{opacity:.94}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(25px,3.1vw,38px);line-height:1.2;letter-spacing:-.055em;font-weight:800}h2{font-size:18px;letter-spacing:-.035em;font-weight:800}h3{font-size:13px;font-weight:800}strong{font-weight:800}button,input,select,textarea{font-size:13px}input:not([type="checkbox"]):not([type="file"]):not([type="color"]):not([type="range"]),textarea,select{width:100%;min-height:46px;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:12px 14px;border-radius:11px}textarea{resize:vertical}input[type="color"]{width:100%;height:46px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:5px}input[type="checkbox"]{accent-color:var(--accent);width:18px;height:18px;flex-shrink:0}input[type="file"]{width:100%;color:var(--muted);font-size:11px}label{display:flex;flex-direction:column;gap:8px;font-size:11px;font-weight:700}label.checkline{flex-direction:row;align-items:center;gap:9px;line-height:1.6;font-size:11px;font-weight:600}label.checkline a{text-decoration:underline;text-underline-offset:3px}hr{border:0;border-top:1px solid var(--line);margin:25px 0}.muted{color:var(--muted)}.tiny{font-size:11px;line-height:1.8}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.11em;color:var(--muted);margin:0 0 8px}.success{color:var(--green)}.danger{color:var(--danger)!important}.panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow)}.pad{padding:24px}.space-top{margin-top:18px}.empty{padding:40px;text-align:center;color:var(--muted)}.button{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:44px;max-width:100%;background:var(--accent);color:white;border:1px solid var(--accent);border-radius:12px;padding:12px 20px;font-size:12px;font-weight:800;white-space:normal;line-height:1.5}.button.secondary{background:var(--soft);color:var(--ink);border-color:var(--line)}.button.danger{background:var(--danger);border-color:var(--danger)}.button.full{display:flex;margin-top:10px}.button.sm{min-height:38px;padding:8px 12px}.subtlebtn{border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--paper);color:var(--ink);font-weight:700;font-size:11px;display:inline-flex;justify-content:center;align-items:center;min-height:38px;white-space:nowrap}.notice,.flash{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:15px 18px;margin:17px 0;font-size:12px;line-height:1.7;overflow-wrap:anywhere}.notice.bad,.flash.error{color:var(--danger)}.notice.good,.flash.good{color:var(--green)}.shell{min-height:100dvh;display:flex;flex-direction:column}.appheader{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:25}.headerline{max-width:1300px;margin:auto;min-height:80px;padding:11px 28px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:inline-flex;align-items:center;max-width:260px}.brandtext{font-size:16px;font-weight:800;letter-spacing:-.03em}.brandlogo{display:block;max-height:54px;max-width:250px;width:auto;height:auto;object-fit:contain}.brandlogo.agency{width:min(245px,100%);max-height:70px}.head-actions{display:flex;align-items:center;gap:9px}.head-actions form{display:inline-flex;margin:0}.userchip{font-size:11px;color:var(--muted);max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon-button{display:grid;place-items:center;border-radius:11px;border:1px solid var(--line);background:var(--paper);color:var(--ink);width:40px;height:40px}.theme-symbol{font-size:19px}.page{max-width:1200px;width:100%;padding:32px 26px 90px;flex:1;margin:0 auto}.adminpage{max-width:1450px}.footer{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;color:var(--muted);padding:22px 24px 33px;border-top:1px solid var(--line);font-size:10px;margin-top:auto}.footer a:hover{text-decoration:underline}.auth-card,.join-card{max-width:500px;margin:5vh auto;padding:30px}.auth-card h1,.join-card h1{margin:0 0 13px}.formstack{display:flex;flex-direction:column;gap:16px}.formstack>label{font-weight:700}.formstack>.button{width:100%}.auth-links{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:25px;color:var(--accent);font-size:11px;font-weight:700}.install{min-height:100vh;display:grid;place-items:center;padding:25px}.install>.panel{width:min(700px,100%);padding:32px}.twocol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.inlinefields{display:flex;gap:9px}.inlinefields input{flex:1;min-width:0}.join-card .pricebox{display:grid;grid-template-columns:1fr auto;gap:13px 20px;margin:24px 0;background:var(--soft);padding:22px;border-radius:14px;align-items:center;font-size:12px}.pricebox .bigprice{font-size:25px;letter-spacing:-.045em}.cabinet-main{max-width:1050px;margin:auto}.hero{display:block;width:100%;margin-bottom:35px}.hero img{width:100%;height:auto;max-height:360px;object-fit:cover;display:block;border-radius:22px}.welcome{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.welcome h1{margin-bottom:8px}.welcome .muted{margin:0;font-size:13px}.overview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:18px}.metric{padding:23px}.metric span{display:block;font-size:11px;color:var(--muted);font-weight:700}.metric strong{font-size:clamp(23px,2.7vw,34px);letter-spacing:-.05em;display:block;margin:15px 0 0}.metric strong.smallvalue{font-size:23px}.bar{height:7px;background:var(--soft);border-radius:10px;margin-top:16px;overflow:hidden}.bar span{height:100%;background:var(--accent);border-radius:10px}.continue{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px;margin-bottom:27px}.continue>div{display:grid;gap:8px}.continue strong{font-size:15px}.tabs{display:flex;align-items:center;gap:10px;margin:24px 0;flex-wrap:wrap}.tab{border:1px solid var(--line);background:var(--paper);border-radius:13px;padding:11px 16px;font-size:12px;font-weight:800}.tab.active{background:var(--soft)}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 15px}.section-heading h2,.section-heading p{margin:0}.lesson-list,.material-list{display:flex;flex-direction:column;gap:11px}.lesson-card{display:grid;grid-template-columns:53px minmax(0,1fr) auto;align-items:center;gap:17px;padding:19px 22px;transition:transform .15s,border-color .15s}.lesson-card:hover{transform:translateY(-2px);border-color:var(--accent)}.lesson-card.locked{opacity:.65}.lesson-num{height:49px;width:49px;display:grid;place-items:center;background:var(--soft);border-radius:14px;color:var(--muted);font-size:13px;font-weight:800}.lesson-main{display:flex;flex-direction:column;gap:5px;min-width:0}.lesson-main strong{font-size:13px}.lesson-main>span{font-size:11px;line-height:1.7;color:var(--muted)}.lesson-main small{font-size:10px}.lesson-action{font-weight:800;font-size:11px;color:var(--accent)}.material{display:flex;align-items:center;gap:16px;padding:17px}.material-body{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}.material-body strong{font-size:13px}.material-body small{font-size:11px;color:var(--muted)}.fileicon{display:grid;place-items:center;flex:0 0 58px;height:48px;background:var(--soft);border-radius:12px;font-size:10px;font-weight:800;color:var(--accent)}.lesson-screen{max-width:820px;margin:0 auto}.lesson-screen>.eyebrow{margin:10px 0 25px}.lesson-screen>.eyebrow a{color:var(--accent)}.lesson-title-area{margin-bottom:30px}.lesson-title-area h1{margin-bottom:15px}.lesson-title-area p{line-height:1.9}.player-panel{text-align:center;padding:25px;display:flex;align-items:stretch;flex-direction:column;gap:18px}.player-brand{display:flex;justify-content:space-between;gap:15px}.play-big{display:grid;place-items:center;width:80px;height:80px;border:0;border-radius:50%;background:var(--accent);color:#fff;font-size:27px;margin:10px auto}.play-big:disabled{opacity:.25}.timeline{display:grid;grid-template-columns:43px 1fr 43px;align-items:center;gap:12px;font-size:10px;color:var(--muted)}input[type="range"]{accent-color:var(--accent);min-width:0;width:100%;cursor:pointer}.player-options{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}.player-options label{flex-direction:row;align-items:center}.player-options select{width:auto;min-height:36px;padding:8px 28px 8px 11px}.note-panel{margin-top:19px;padding:23px}.note-panel textarea{width:100%}.note-actions{display:flex;align-items:center;gap:13px;margin-top:13px}.notes-list{display:flex;flex-direction:column;gap:10px;margin-top:17px}.note-item{background:var(--soft);border-radius:13px;padding:16px;font-size:12px}.note-item p{margin-bottom:9px;white-space:pre-wrap}.note-item small{color:var(--muted)}.note-remove{float:right}.lesson-footer-actions{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}.legal{max-width:900px;margin:auto;padding:30px}.legal .prose{white-space:normal;line-height:2;font-size:13px}.secret-line{background:var(--soft);padding:18px;border-radius:13px;overflow-wrap:anywhere;line-height:2.1;font-weight:800;margin:20px 0;letter-spacing:.04em}.admin-layout{display:grid;grid-template-columns:232px minmax(0,1fr);gap:22px}.admin-nav{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:13px;align-self:start;position:sticky;top:118px}.nav-sect{font-weight:800;font-size:9px;color:var(--muted);letter-spacing:.12em;padding:18px 13px 8px}.navitem{display:block;border-radius:12px;font-size:11px;font-weight:700;color:var(--muted);padding:12px 14px;min-height:40px}.navitem.active{background:var(--soft);color:var(--ink)}.admin-body{min-width:0}.admin-top{display:flex;align-items:center;gap:14px;margin-bottom:22px}.admin-top h1{font-size:27px;margin:0}.admin-top .eyebrow{margin-bottom:5px}.hamburger{display:none;width:44px;height:44px;background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:12px;flex-direction:column;justify-content:space-between}.hamburger span{height:2px;width:100%;background:var(--ink);border-radius:3px}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.stats-grid .metric{padding:17px;min-height:135px}.stats-grid .metric strong{font-size:clamp(18px,2vw,27px)}.admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}.admin-body .pad h2{margin-bottom:18px}.admin-body .pad h3{margin:25px 0 12px}.list-simple{display:flex;flex-direction:column}.list-simple>div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font-size:11px}.list-simple>div:last-child{border-bottom:0}.list-simple strong{font-size:11px}.list-simple small{display:block;color:var(--muted);font-size:10px;font-weight:500;margin-top:4px}.list-simple .state{color:var(--muted);font-size:10px;white-space:nowrap}.list-simple form{display:inline-flex;gap:4px}.mini-list>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:10px}.mini-list>div span:last-child{color:var(--muted)}.table-wrap{overflow:auto;width:100%;border:1px solid var(--line);border-radius:13px}table{width:100%;min-width:640px;border-collapse:collapse}th,td{padding:13px 14px;text-align:left;font-size:10px;border-bottom:1px solid var(--line)}th{color:var(--muted);font-weight:800;background:var(--soft)}td strong{display:block;font-size:11px}td small{display:block;font-size:9px;color:var(--muted);margin-top:6px}tbody tr:last-child td{border-bottom:none}.searchline{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:18px}.searchline input{flex:1;min-width:180px}.searchline .button{min-height:44px}.upload-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0}.upload-box{border:1px dashed var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px}.upload-box strong{font-size:12px}.upload-box small{font-size:10px}.upload-preview{width:100%;max-height:120px;object-fit:contain;background:var(--soft);border-radius:10px}.upload-box input[type=file]{font-size:10px}.admin-body .formstack{max-width:660px}.admin-body .formstack label{font-size:11px}.admin-body .formstack>.button{width:max-content}.admin-body code,.notice code{font-size:11px;word-break:break-all}.admin-body .pad>p{font-size:12px;line-height:1.9}.checkline input{width:18px}.install .formstack>.button{width:100%}
@media(max-width:1080px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-grid{grid-template-columns:1fr}.userchip{max-width:120px}.brandlogo.agency{max-width:210px}}
@media(max-width:800px){.headerline{min-height:70px;padding:10px 16px}.page{padding:23px 15px 70px}.brandlogo.agency{max-width:160px;max-height:55px}.brandlogo{max-width:160px}.userchip{display:none}.admin-layout{grid-template-columns:1fr}.admin-nav{display:none;position:static}.admin-nav.open{display:block}.hamburger{display:flex}.admin-top{margin-bottom:20px}.admin-top h1{font-size:24px}.hero{margin-bottom:24px}.hero img{border-radius:16px}.welcome{align-items:flex-start;flex-direction:column}.welcome .button{width:100%}.lesson-card{padding:15px;grid-template-columns:46px minmax(0,1fr);gap:12px}.lesson-action{grid-column:2}.lesson-num{width:43px;height:43px}.overview-grid{gap:10px}.metric{padding:18px}.continue{padding:17px}.play-label{font-size:10px}.player-panel{padding:17px}.material{padding:14px}.material .subtlebtn{display:none}.footer{gap:13px;font-size:9px}.upload-grid{grid-template-columns:1fr}.admin-body .pad{padding:17px}}
@media(max-width:500px){.page{padding:17px 12px 60px}.brandlogo.agency{max-width:140px}.head-actions .subtlebtn{padding:8px;font-size:10px}.icon-button{height:37px;width:37px}.eyebrow{font-size:9px}.auth-card,.join-card{padding:22px;margin:25px auto}.twocol{grid-template-columns:1fr}.overview-grid{grid-template-columns:1fr}.stats-grid{gap:9px}.stats-grid .metric{min-height:110px;padding:15px}.stats-grid .metric strong{font-size:19px}.tabs{gap:6px}.tab{font-size:10px;padding:10px 12px}.lesson-main>span{font-size:10px}.player-options{align-items:flex-start;flex-direction:column}.lesson-screen>.eyebrow{margin:8px 0 20px}.note-panel{padding:15px}.admin-body .pad{padding:15px}.admin-top h1{font-size:22px}.welcome h1{font-size:28px}.hero img{max-height:220px}.secret-line{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.lesson-card{transition:none}}

.progressbar{display:block;width:100%;height:9px;margin-top:16px;border:0;border-radius:30px;overflow:hidden;accent-color:var(--accent)}.progressbar::-webkit-progress-bar{background:var(--soft);border-radius:30px}.progressbar::-webkit-progress-value{background:var(--accent);border-radius:30px}.progressbar::-moz-progress-bar{background:var(--accent);border-radius:30px}

.student-logo-dark{display:none}body[data-theme="dark"] .student-logo-light{display:none}body[data-theme="dark"] .student-logo-dark{display:block}@media(prefers-color-scheme:dark){body[data-theme="auto"] .student-logo-light{display:none}body[data-theme="auto"] .student-logo-dark{display:block}}

/* v1.0.3: Admin top bar stays white even when the work area is dark. */
body[data-admin="1"] .appheader{background:#fff!important;border-bottom-color:#e7eaf0;color:#1c2432;color-scheme:light}
body[data-admin="1"] .appheader .userchip{color:#7a8393!important}
body[data-admin="1"] .appheader .icon-button,body[data-admin="1"] .appheader .subtlebtn{background:#fff!important;border-color:#e7eaf0!important;color:#1c2432!important}
body[data-admin="1"] .appheader .theme-symbol{color:#1c2432!important}
/* Editing UX: direct editors are scrolled into view on open; saved rows are highlighted. */
.lesson-editor,.lessons-list-panel,.lesson-list-row{scroll-margin-top:110px}
.lesson-editor:focus{outline:none}
.lesson-list-row.saved-highlight{background:rgba(82,98,213,.08);border-radius:12px;box-shadow:0 0 0 8px rgba(82,98,213,.08);transition:background-color 2.3s,box-shadow 2.3s}
.duration-display{font-size:12px;padding:14px 16px;background:var(--soft);border-radius:12px;color:var(--muted);margin:0}
.duration-display strong{color:var(--ink)}
.lesson-save-message{font-size:12px;line-height:1.7;min-height:0}
.lesson-save-message.has-error{border:1px solid var(--danger);padding:12px;border-radius:12px;color:var(--danger)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.lesson-list-row.saved-highlight{transition:none}}

/* MP3 upload progress in lesson editor */
.lesson-upload-meter{border:1px solid var(--line);background:var(--soft);border-radius:14px;padding:15px 17px;margin:12px 0 16px;max-width:880px}
.lesson-upload-meter[hidden]{display:none!important}
.lesson-upload-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}
.lesson-upload-head strong{font-size:12px;font-weight:700}
.lesson-upload-head span{color:var(--muted);text-align:right}
.lesson-upload-meter .progressbar{width:100%;margin-top:12px;height:11px}
.lesson-upload-meter.is-processing .progressbar{opacity:.65}

/* v1.0.5: local sign-in and deliberate drag-and-drop lesson sorting. */
.auth-card .social-login{display:grid;gap:10px;margin:18px 0}.auth-card .social-login .social-btn{margin:0;min-height:49px;border-radius:13px;font-size:12px}
.auth-separator{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:11px}
.auth-separator:before,.auth-separator:after{content:"";height:1px;flex:1;background:var(--line)}
.auth-card .register-cta{margin-top:12px;min-height:49px;font-size:13px}
.auth-links-end{justify-content:flex-end;margin-top:17px}
.lesson-list-row.sortable-row{display:flex;gap:14px;align-items:center;min-height:79px;transition:background-color .12s,border-color .12s}
.sortable-row .drag-handle{flex-shrink:0;width:37px;height:43px;background:var(--soft);border:1px solid var(--line);border-radius:10px;color:var(--muted);display:grid;place-items:center;touch-action:none;user-select:none;cursor:grab}
.sortable-row .drag-handle:active,.sortable-row.is-dragging .drag-handle{cursor:grabbing}
.sortable-row .drag-handle svg{fill:currentColor}
.sortable-row .lesson-row-copy{min-width:0;flex:1}
.sortable-row .lesson-row-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px}
.sortable-row .lesson-row-controls form{margin:0}
.sortable-row.is-dragging{opacity:.6;border:1px dashed var(--accent);background:var(--soft);border-radius:12px}
.sortable-lessons.is-saving{pointer-events:none;opacity:.8}
.lesson-sort-status{min-height:20px;color:var(--muted);font-size:11px;margin-top:8px}
.lesson-sort-status.error{color:var(--danger)}
.archived-panel summary{cursor:pointer;font-weight:700;font-size:14px;list-style:none}
.archived-panel summary::-webkit-details-marker{display:none}
.archived-panel .list-simple{margin-top:15px}
@media(max-width:680px){.sortable-row .lesson-row-controls{width:100%;padding-left:50px;justify-content:flex-start}.sortable-row{flex-wrap:wrap;gap:8px}.sortable-row .lesson-row-copy{flex-basis:calc(100% - 52px)}.sortable-row .drag-handle{align-self:flex-start;margin-top:5px}}
@media(prefers-reduced-motion:reduce){.lesson-list-row.sortable-row{transition:none}}