/* Exact reference assets stay unchanged. This adapter connects their shell to
   existing Django forms and staff screens without restyling the lesson path. */
:root{--white:#fff;--paper:#fff;--sage:#eef8dc;--ink-deep:#294c19;--danger:#9b3028;--radius:18px}
body.reference-ui{display:block}
.reference-ui .skip-link{color:var(--ink)}
.reference-ui .app-shell{width:100%}
[hidden]{display:none!important}
.reference-ui main:focus-visible{outline:3px solid #547b2d;outline-offset:4px}
.reference-ui .site-header{background:#fff;border-bottom:0}
.reference-ui .brand{width:auto;max-width:none;justify-content:flex-start}
.reference-ui .brand-mark{flex-shrink:0}
.reference-ui .brand-mark .icon{width:25px;height:25px}
.navigation .main-nav{align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;width:auto}
.navigation .main-nav>.nav-link{display:flex;white-space:normal;box-shadow:none;padding:10px 12px;line-height:1.5}
.navigation .main-nav>.nav-link:hover{background:#f6f8f3}
.navigation .main-nav>.nav-link.active:hover{background:#edf8dc}
.nav-icon>svg,.notification-button>svg{width:23px;height:23px;stroke-width:2.1}
.icon>svg{width:100%;height:100%}
.resource-icon>svg,.joining-icon>svg{width:23px;height:23px}
.unit-book>svg{width:29px;height:29px}
.account-counts{margin:15px 0 0;font-size:12px}
.account-counts>div{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding:12px 0}
.account-counts dt{color:#62716a}
.account-counts dd{margin:0;font-size:16px;font-weight:800}
.reference-ui .demo-notice{min-height:0;font-weight:400;letter-spacing:normal}
.sidebar-bottom>a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;min-height:44px;color:#50673e;font-size:12px;font-weight:700}
.navigation .logout-form{margin-top:auto;padding-top:35px}
.navigation .logout-form .sign-out{display:flex;align-items:center;justify-content:flex-start;gap:14px;margin:0;padding:0;min-height:48px;background:transparent;border:0;border-radius:0;box-shadow:none;color:#62716a;font-size:13px;line-height:1.5;letter-spacing:normal;font-weight:400}
.navigation .logout-form .sign-out:hover{color:#356714;text-decoration:underline;text-underline-offset:4px}
.navigation .logout-form .sign-out:active{transform:none}
.reference-ui .menu-toggle{width:auto;min-width:44px;padding:7px 10px;font-size:11px;font-weight:800}
.account-chip>strong{max-width:230px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.reference-ui .page-shell{max-width:none;margin:0;padding:0}
.reference-ui .message-container{max-width:none;margin:0;padding:0 0 16px}
.reference-ui .site-footer{max-width:none;width:auto;justify-content:space-between;padding:20px 0;margin:28px 0 0;border-top:2px solid var(--line);font-size:11px;gap:15px}
.button,button[type=submit],input[type=submit]{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:12px 20px;min-height:47px;border:2px solid #65ad27;border-bottom:5px solid #4a9020;border-radius:13px;background:#75d528;color:#234a0f;font-size:12px;line-height:1.4;letter-spacing:.4px;font-weight:800;text-decoration:none;white-space:normal}
.button:hover,button[type=submit]:hover,input[type=submit]:hover{background:#85df3d;border-color:#65ad27;border-bottom-color:#4a9020}
.button-outline,button.button-outline,.button-light{border-color:#d8e2cf;background:#fff;color:#4b7429;border-bottom-width:4px}
.button-outline:hover,button.button-outline:hover,.button-light:hover{background:#f6faef;border-color:#c0d5ad}
.button-small,button.button-small{min-height:42px;font-size:11px;padding:9px 13px}
.button-row{gap:12px}
.button svg{width:18px;height:18px;flex-shrink:0}
.panel{background:#fff;border:2px solid var(--line);border-radius:18px;padding:25px;margin-bottom:24px;min-width:0}
.panel h1{font-size:32px;line-height:1.2;margin:0 0 18px;overflow-wrap:anywhere}
.panel h2{font-size:22px;margin:0 0 16px}
.panel h3{margin:0 0 12px}
.panel p{margin:0 0 16px;font-size:14px;line-height:1.7}
.panel>article{border-top:1px solid var(--line);padding:22px 0;margin-top:20px}
.panel>article h2{font-size:20px;overflow-wrap:anywhere}
.panel .panel{border-width:1px;padding:20px}
.panel a:not(.button){text-decoration:underline;text-underline-offset:3px}
.panel form{max-width:100%}
.panel p,.panel a,.panel dt,.panel dd{overflow-wrap:anywhere}
.panel li{line-height:1.7}
.panel select,.panel form input:not([type=checkbox]):not([type=hidden]),form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),form select,form textarea{border:2px solid #cfd8c7;border-radius:11px;background:#fff;color:var(--ink);padding:11px 12px;min-height:46px;max-width:100%;font:inherit;font-size:14px}
form input[type=checkbox],form input[type=radio]{width:19px;height:19px;accent-color:#4d861f;flex-shrink:0}
form label{font-size:13px;font-weight:700;line-height:1.6}
form .helptext,.field-help,.field-help p{font-size:12px;color:#62716a}
.field-help p{margin:5px 0 8px}
.field-help:empty{display:none}
.field-required{font-size:10px;color:#60715a}
.field-errors,.errorlist{font-size:13px}
.form-guidance{background:#f2f8e9;border-radius:12px;padding:16px;font-size:13px}
.form-section{border-top:2px solid var(--line);margin-top:24px;padding-top:24px}
.academic-panel{max-width:850px}
.page-heading{gap:20px;align-items:flex-start;margin-bottom:26px}
.page-heading h1{font-size:34px;margin-bottom:10px}
.page-heading p:last-child{font-size:15px;color:#62716a;line-height:1.6}
.page-heading .button{flex-shrink:0}
.eyebrow{margin-bottom:18px}
.quiet-note{font-size:12px;color:#62716a;line-height:1.7}
.table-wrap{border:1px solid var(--line);border-radius:12px;overflow-x:auto;max-width:100%;scrollbar-width:thin}
.table-wrap th{background:#f3f7ed;color:#4d6240;white-space:nowrap}
.table-wrap th,.table-wrap td{padding:14px 12px;border-color:var(--line);font-size:13px;line-height:1.5}
.table-wrap:focus-visible{outline-offset:-3px}
.table-wrap .button{font-size:11px;padding:9px 12px}
.pagination{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:24px 0;font-size:13px}
.pagination a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:2px solid var(--line);border-radius:10px;text-decoration:none;font-weight:700}
.payment-states{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px;background:#f5f8f0;border-radius:12px;margin:15px 0}
.payment-states span{min-width:0;overflow-wrap:anywhere}
.payment-states small{display:block;color:#62716a;margin-bottom:4px}
.payment-states strong{font-size:13px;display:block}
.learner-choice{display:flex;align-items:flex-start;gap:12px;border:2px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px}
.learner-choice p{margin:0}
.learner-choice label{display:block}
.demo-payment-note{font-size:12px;background:#fff9e8;border:1px solid #eee1b6;border-radius:10px;padding:13px 16px;color:#71511c;margin-top:18px}
.auth-shell{margin:18px auto 40px;border:2px solid var(--line)}
.auth-intro{background:#edf8dc;color:#3b6721}
.auth-intro h2{font-family:"Arial Rounded MT Bold",var(--round);font-size:34px;color:#3b6721;line-height:1.2}
.auth-intro .eyebrow,.auth-intro p{color:#456239}
.auth-panel{background:#fff}
.auth-panel h1{font-size:32px;margin-bottom:16px}
.auth-panel p{margin-bottom:18px}
.auth-panel a{text-decoration:underline;text-underline-offset:3px}
.auth-panel .button{text-decoration:none}
.profile-grid{gap:24px}
.panel-heading svg{width:24px;height:24px}
/* Existing staff dashboards retain their real counts and functional actions. */
.welcome-row{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}
.welcome-row>div{min-width:0}
.welcome-row h1{font-size:34px;margin:0 0 10px;overflow-wrap:anywhere}
.welcome-row p:last-child{font-size:15px;line-height:1.6;color:#62716a}
.welcome-row>.button{flex-shrink:0}
.stat-grid{gap:18px;margin-bottom:28px;grid-template-columns:repeat(4,minmax(0,1fr))}
.stat-card{border:2px solid var(--line);border-bottom-width:4px;border-radius:16px;padding:22px;background:#f7faef;color:var(--ink)}
.stat-card:nth-child(2){background:#f3f0fb;border-color:#e1dbed}
.stat-card:nth-child(3){background:#edf6fb;border-color:#d7e8ef}
.stat-card:nth-child(4){background:#fff8e5;border-color:#ecdfb7}
.stat-card strong{font-family:"Arial Rounded MT Bold",var(--round);font-size:38px;letter-spacing:-.5px;line-height:1.2;margin:12px 0;display:block;color:var(--ink)}
.stat-card>span:first-child{font-size:12px;font-weight:700}
.stat-card .stat-footnote{font-size:10px;line-height:1.6;color:#62716a;letter-spacing:0;text-transform:none}
.stat-card .stat-word{font-size:24px}
.stat-card a{font-size:12px}
.teaching-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.work-columns{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;margin-bottom:26px;align-items:stretch}
.work-columns>.panel{margin:0}
.work-feature{border:2px solid #c7e5a8;border-bottom:5px solid #b4d690;border-radius:18px;background:#eef8dc;padding:28px}
.work-feature h2{font-size:28px;color:#365b1e;max-width:430px;margin-bottom:18px}
.work-feature p{font-size:14px;line-height:1.7;max-width:540px;color:#536b43;margin-bottom:20px}
.work-feature .quiet-note{font-size:12px;margin:18px 0 0}
.work-columns>.panel h2{font-size:25px}
.operation-counts{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0 24px}
.operation-counts strong{display:block;font-size:30px;color:#3b6721}
.operation-counts span{font-size:12px;display:block;line-height:1.6}
.action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.action-card{display:block;border:2px solid var(--line);border-bottom-width:4px;border-radius:18px;padding:22px;text-decoration:none;color:var(--ink)}
.action-card:hover{background:#f8fbf3;border-color:#c8d9b8}
.action-card>svg{width:27px;height:27px;color:#629632;margin-bottom:20px}
.action-card:nth-child(2)>svg{color:#8c67b2}
.action-card:nth-child(3)>svg{color:#3987a5}
.action-card h2{font-size:17px;margin-bottom:14px}
.action-card p{font-size:13px;line-height:1.7;color:#62716a;margin-bottom:18px}
.action-card>span{font-size:12px;font-weight:800;color:#4c782a}
.public-ui .app-shell{display:block}
.public-ui .navigation{display:flex;flex-direction:row;align-items:center;justify-content:space-between;border-right:0;border-bottom:2px solid var(--line);padding:25px 32px;gap:25px}
.public-ui .nav-header{margin:0}
.public-ui .main-nav{flex-direction:row;gap:18px}
@media(max-width:1250px){.navigation .main-nav>.nav-link{padding:10px}.welcome-row{flex-wrap:wrap}.stat-card{padding:18px}.stat-card .stat-word{font-size:20px}.work-columns{grid-template-columns:1fr}.action-grid{gap:14px}.action-card{padding:18px}}
@media(max-width:1080px){.navigation .main-nav>.nav-link{padding:10px 8px}.stat-grid{gap:12px}.stat-card{padding:16px}.action-card h2{font-size:16px}}
@media(max-width:900px){.reference-ui .site-header{border-bottom:2px solid var(--line)}.navigation .main-nav:not([hidden]){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px;gap:9px}.navigation .main-nav>.nav-link{font-size:13px;gap:12px;padding:10px}.navigation .logout-form{display:none;margin:0;padding-top:12px}.navigation.is-open .logout-form{display:block}.navigation.is-open .sign-out{display:flex}.public-ui .navigation{display:block;padding:17px 25px}.public-ui .nav-header{display:flex}.account-chip>strong{max-width:185px}.welcome-row h1{font-size:32px}.panel{padding:22px}}
@media(max-width:700px){.navigation .main-nav:not([hidden]){grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.navigation .main-nav>.nav-link{font-size:12px;min-height:50px;gap:12px}.reference-ui .brand{font-size:25px;gap:10px}.reference-ui .brand-mark{width:38px;height:41px;border-radius:12px}.reference-ui .brand-mark .icon{width:25px;height:25px}.reference-ui .demo-notice{gap:2px;padding:7px 14px;font-size:10px}.reference-ui .site-footer{font-size:10px;text-align:left;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}.public-ui .navigation{padding:16px 20px}.panel{padding:20px}.panel h1{font-size:29px}.panel h2{font-size:21px}.page-heading{flex-direction:column;gap:15px}.page-heading h1{font-size:30px}.page-heading .button{width:100%}.welcome-row{gap:18px;margin-bottom:24px}.welcome-row>.button{width:100%}.welcome-row h1{font-size:31px}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.stat-card{padding:18px 14px}.stat-card strong{font-size:32px}.stat-card>span:first-child{font-size:11px}.teaching-stats .stat-card:last-child{grid-column:1/-1}.teaching-stats .stat-card .stat-word{font-size:24px}.work-columns{gap:20px}.work-feature{padding:23px}.work-feature h2{font-size:25px}.work-feature .button,.work-columns>.panel .button{width:100%}.work-columns>.panel h2{font-size:23px}.action-grid{grid-template-columns:1fr;gap:16px}.action-card{padding:22px}.action-card>svg{float:left;margin:0 15px 18px 0;width:26px;height:26px}.action-card h2{font-size:17px;margin:3px 0 12px}.action-card p{clear:both}.action-card>span{display:block;min-height:28px}.payment-states{grid-template-columns:1fr;gap:14px}.auth-shell{margin:0 auto 25px}.auth-panel{padding:25px 20px}.profile-grid{gap:0}.panel dd{margin-left:0}.topbar .notification-button>svg{width:20px;height:20px}}
@media(max-width:359px){.reference-ui .brand{font-size:23px}.public-ui .navigation{padding:15px 16px}.welcome-row h1{font-size:28px}.panel{padding:18px}.panel h1{font-size:26px}.stat-card{padding:16px 12px}.stat-card>span:first-child{font-size:10px}.table-wrap th,.table-wrap td{font-size:12px}.operation-counts{gap:14px}.page-heading h1{font-size:27px}}
@media print{.navigation,.topbar,.demo-notice,.site-footer{display:none!important}.app-shell{display:block}.workspace{padding:0}.panel,.work-feature{break-inside:avoid}}