body { background: var(--canvas,#f7f9fc); min-height: 100vh; }
[hidden] { display:none !important; }
.account-top { display:flex; align-items:center; gap:16px; color:#4a5870; font-size:14px; }
.account-main { padding:42px 0 80px; }
.account-layout { max-width:1440px; }
.account-layout .account-main { padding:34px; max-width:none; }
.account-layout #account-sidebar { min-width:0; }
.account-layout #account-sidebar .sidebar { height:100%; }
.account-card, .account-intro, .account-lesson-list { scroll-margin-top:20px; }
#account-loading { min-height:55vh; display:grid; place-items:center; color:#5265cf; font-weight:700; }
.account-intro { margin-bottom:28px; }
.account-intro h1 { font-size:clamp(32px,5vw,53px); line-height:1.08; margin:13px 0 10px; }
.account-intro p { margin:0; color:#5f6d82; }
.account-lessons { margin-bottom:18px; }
.account-section-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }
.account-section-head h2 { margin:8px 0 0; }
.account-lessons form { display:grid; gap:15px; padding:20px; margin:0 0 18px; border:1px solid #dce3ff; border-radius:16px; background:#f8faff; }
.account-lessons fieldset { display:flex; flex-wrap:wrap; gap:18px; border:0; padding:0; margin:0; }
.account-lessons legend { font-weight:700; font-size:14px; margin-bottom:7px; }
.account-lessons fieldset label { display:flex; align-items:center; gap:7px; }
.account-lessons input[type=radio] { width:auto; }
.account-actions { display:flex; flex-wrap:wrap; gap:10px; }
.account-created { background:#eff2ff; border-radius:16px; padding:17px; margin-bottom:16px; }
.account-created p { margin:0 0 10px; }
.account-lesson-list { display:grid; gap:10px; }
.account-lesson { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; border:1px solid #e0e7f2; border-radius:15px; padding:16px; }
.account-lesson h3 { margin:0 0 4px; font-size:17px; }
.account-lesson p { margin:0; font-size:13px; }
.account-lesson > div:first-child { min-width:0; overflow-wrap:anywhere; }
.account-lesson-status { display:inline-flex; margin-top:9px; padding:4px 9px; border-radius:999px; background:#eaf0ff; color:#244389; font-size:12px; font-weight:750; }
.account-lesson-status.active { background:#e7f7f0; color:#146348; }
.account-lesson-status.finished { background:#eef1f5; color:#4c5d70; }
.account-lesson-actions { align-items:center; }
.account-more { position:relative; }
.account-more summary { display:flex; align-items:center; justify-content:center; min-height:43px; padding:9px 16px; border:1px solid #cdd8e9; border-radius:12px; background:#fff; color:#254379; font-weight:700; cursor:pointer; list-style:none; }
.account-more summary::-webkit-details-marker { display:none; }
.account-more summary:focus-visible { outline:3px solid #3454bd; outline-offset:2px; }
.account-more-menu { position:absolute; z-index:5; right:0; top:calc(100% + 7px); display:grid; gap:4px; width:max-content; min-width:235px; max-width:min(300px,calc(100vw - 40px)); padding:7px; border:1px solid #dce3ef; border-radius:14px; background:#fff; box-shadow:0 16px 32px #25385c25; }
.account-more-menu .button { width:100%; min-height:42px; justify-content:flex-start; text-align:left; white-space:normal; }
.account-content-actions { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:14px; }
.account-lesson .account-actions { justify-content:flex-end; }
.account-content-panel{flex:0 0 100%;min-width:0;padding:16px;border-radius:12px;background:#f8faff;overflow-wrap:anywhere}
.account-content-panel h4{margin:14px 0 8px}.account-content-panel h4:first-child{margin-top:0}
.account-content-panel p{margin:8px 0;line-height:1.5}
.account-content-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid #e0e7f2}
.account-content-item .button{flex:none}
.account-schedule { display:flex; flex-wrap:wrap; align-items:end; gap:10px; width:100%; margin-top:12px; }
#lessons-status { min-height:20px; font-size:14px; font-weight:700; }
.account-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.account-bottom { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:18px; }
.account-card { background:#fff; border:1px solid #e0e7f2; border-radius:22px; padding:27px; box-shadow:0 14px 40px #25385c0b; }
.account-primary { background:#eff2ff; border-color:#dce3ff; }
.account-icon { display:block; font-size:30px; margin-bottom:18px; }
.account-card h2 { font-size:22px; margin:0 0 10px; }
.account-card p { color:#55647a; line-height:1.55; }
.account-card .account-muted { font-size:13px; color:#7b8799; }
.account-card form { display:grid; gap:14px; margin-top:20px; }
.account-card label { display:grid; gap:7px; font-weight:700; font-size:14px; }
.account-card input,.account-card textarea { width:100%; border:1px solid #ccd6e6; border-radius:11px; padding:11px 13px; background:#fff; font:inherit; font-weight:400; resize:vertical; }
.account-card :disabled { opacity:.55; cursor:not-allowed; }
.account-card form .button { justify-self:start; }
.account-card form p[role=status] { margin:0; min-height:20px; font-size:13px; font-weight:700; }
.account-honeypot { position:absolute; left:-9999px; }
#learner-invite-dialog,#content-dialog,#participants-dialog { box-sizing:border-box; width:min(640px,calc(100vw - 24px)); max-height:min(88dvh,820px); overflow:auto; border:1px solid #dce3f2; border-radius:20px; padding:24px; box-shadow:0 28px 80px #17294455; }
#learner-invite-dialog::backdrop,#content-dialog::backdrop,#participants-dialog::backdrop { background:#14213b99; }
.invite-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.invite-dialog-head h2 { margin:0; font-size:24px; }
.invite-dialog-head .button { flex:none; }
.invite-dialog-label { display:grid; gap:7px; margin:18px 0; font-weight:700; }
.invite-dialog-label input,.invite-dialog-label textarea { box-sizing:border-box; width:100%; min-width:0; border:1px solid #ccd6e6; border-radius:11px; padding:11px 13px; font:inherit; font-weight:400; }
.invite-dialog-label textarea { resize:vertical; overflow-wrap:anywhere; }
.invite-dialog-actions { display:flex; flex-wrap:wrap; gap:9px; }
#invite-dialog-state { min-height:22px; overflow-wrap:anywhere; }
#invite-dialog-state.error { color:#a42b35; }
#learner-invite-dialog .button:disabled { opacity:.55; cursor:wait; }
#content-dialog .button:disabled,#participants-dialog .button:disabled { opacity:.55; cursor:wait; }
#content-recipient-choice { border:1px solid #dce3f2; border-radius:12px; padding:14px; margin:16px 0; }
#content-recipient-choice legend { font-weight:700; }
#content-recipient-choice label,#participants-list label { display:flex; align-items:center; gap:9px; min-height:38px; overflow-wrap:anywhere; }
#content-recipient-choice input[type=radio],#content-recipient-choice input[type=checkbox],#participants-list input { width:auto; flex:none; }
#content-recipient-list,#participants-list { display:grid; gap:5px; margin:8px 0; }
#content-file-list { display:grid; gap:7px; min-width:0; }
.content-file-item { display:flex; justify-content:space-between; align-items:center; gap:10px; min-width:0; padding:8px 10px; border:1px solid #dce3f2; border-radius:10px; overflow-wrap:anywhere; }
.content-file-item span { min-width:0; }
#content-status,#participants-status { min-height:20px; overflow-wrap:anywhere; }
#content-status.error,#participants-status.error { color:#a42b35; }
@media(max-width:480px) { #learner-invite-dialog,#content-dialog,#participants-dialog { padding:16px; max-height:92dvh; } .content-file-item { align-items:flex-start; flex-direction:column; } }
@media(max-width:800px) { .account-grid { grid-template-columns:1fr; } .account-main { padding-top:25px; } }
@media(max-width:480px) { .account-top { gap:8px; } #account-email { display:none; } .account-card { padding:23px; } }
@media(max-width:650px) { .account-section-head,.account-lesson { align-items:flex-start; flex-direction:column; } .account-lesson .account-actions { justify-content:flex-start; } }
@media(max-width:480px) { .account-top { gap:8px; font-size:12px; } .account-top .button { padding:9px 11px; } .account-lesson-actions { width:100%; } .account-lesson-actions > .button { flex:1 1 auto; } .account-more-menu { right:auto; left:0; } }
@media(max-width:480px) { .topbar.shell { position:relative; height:auto; min-height:82px; padding-top:12px; padding-bottom:12px; flex-wrap:wrap; gap:8px; } .account-top { width:100%; justify-content:space-between; flex-wrap:wrap; } .account-top #logout { position:absolute; top:14px; right:18px; } #current-role { font-weight:700; } }

/* Launch polish keeps the lesson workflow prominent and the rest quiet. */
.account-layout{max-width:1380px}
.account-layout .account-main{padding:38px clamp(20px,3vw,44px) 80px}
.account-layout #account-sidebar .sidebar{background:transparent;border-right:1px solid #e8edf3;padding:27px 13px}
.account-layout .side-link{min-height:42px;padding:9px 12px;margin-bottom:2px;border-radius:10px;color:#53647a;font-weight:630;transition:background-color .16s ease,color .16s ease}
.account-layout .side-link:hover{background:#eef2f9;color:#244b9e}
.account-layout .side-link.active{background:#e9f0ff;color:#244dac;font-weight:760}
.account-layout .side-link .mini{width:19px;height:19px;flex:none}
.account-layout .side-bottom{border-color:#e3e9f1;margin-top:17px;padding-top:13px}
.account-intro{margin-bottom:24px}
.account-intro h1{font-size:clamp(30px,3.2vw,42px);letter-spacing:-.045em;margin:11px 0 8px}
.account-intro p{max-width:830px;font-size:14px;line-height:1.55;color:#5d6c81}
.account-card{border:1px solid #ebeff5;border-radius:18px;box-shadow:0 9px 28px #2236530a;padding:25px}
.account-lessons{box-shadow:0 14px 38px #2236530f}
.account-section-head{margin-bottom:20px}.account-section-head h2{margin:0;font-size:clamp(23px,2.2vw,29px);letter-spacing:-.035em}
.account-grid{gap:15px}.account-card h2{font-size:20px;letter-spacing:-.025em}
.account-icon{font-size:24px;margin-bottom:12px}
.account-primary{background:#f4f7ff;border-color:#e6edfc}
.account-lesson-list{gap:11px}
.account-lesson{border:1px solid #e9edf4;border-radius:14px;padding:17px 18px;background:#fff;transition:box-shadow .16s ease,border-color .16s ease}
.account-lesson:hover{box-shadow:0 9px 22px #2236530c}
.account-lesson.is-active{background:#fbfcff;border-color:#cbd9fa;box-shadow:0 8px 25px #315fe811}
.account-lesson.is-finished{background:#f8f9fb;border-color:#edf0f4}
.account-lesson.is-finished .account-actions>.button{background:#fff}
.account-lesson h3{font-size:17px;letter-spacing:-.02em;margin:4px 0 5px}
.account-lesson p{color:#66758a;font-size:13px;line-height:1.45}
.account-lesson-status{margin:0 0 5px;padding:4px 9px;font-size:11px;letter-spacing:.02em}
.account-lesson-status.scheduled{background:#eef2fb;color:#425b8c}
.account-lesson-status.active{background:#def5eb;color:#116044}
.account-lesson-status.finished{background:#eceff3;color:#526175}
.account-more summary{border-color:#e1e7f0;transition:background-color .16s ease,border-color .16s ease}
.account-more summary:hover,.account-more[open] summary{background:#edf3ff;border-color:#c4d3f4}
.account-more-menu{border-color:#e7ecf3;box-shadow:0 14px 34px #2236531c}
.account-content-panel{background:#f6f8fc}
#account-loading{color:#315bb8}
@media(max-width:800px){.account-layout #account-sidebar .sidebar{height:auto;padding:10px 13px;background:#f7f9fc;border-right:0;border-bottom:1px solid #e6ebf2;min-height:0}.account-layout .side-link{flex:none;margin:0}.account-layout .side-bottom{border:0;margin:0;padding:0}.account-layout .account-main{padding:27px 18px 60px}}
@media(max-width:480px){.account-card{padding:20px}.account-lessons{padding:20px 16px}.account-lesson{padding:15px}.account-layout .account-main{padding:25px 16px 55px}.account-intro h1{font-size:30px}}