:root{--o:#e8640a;--ink:#20242b;--muted:#6b7280;--bg:#f5f7fb;--card:#fff;--line:#e5e7eb;--nav:#171a20;--green:#15803d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--ink)}a{text-decoration:none;color:inherit}.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}.side{background:var(--nav);color:#fff;padding:22px 16px;position:sticky;top:0;height:100vh;overflow:auto}.brand{font-size:22px;font-weight:800;margin:6px 8px 28px}.brand span{color:var(--o)}.side a{display:flex;padding:11px 12px;border-radius:10px;color:#cbd5e1;margin:3px 0}.side a:hover,.side a.active{background:var(--o);color:#fff}.main{min-width:0}.top{min-height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:10px 28px;position:sticky;top:0;z-index:3}.search{flex:1;max-width:520px}.search input,input,textarea,select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}.top .pill{padding:9px 12px;background:#f3f4f6;border-radius:10px;white-space:nowrap}.content{padding:28px}.content>section{scroll-margin-top:92px;margin-bottom:24px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.metrics{grid-template-columns:repeat(6,minmax(140px,1fr))}.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 8px 28px rgba(15,23,42,.05)}.metric b{font-size:30px;display:block;color:var(--o)}h1,h2,h3{margin-top:0}.section-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:11px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;vertical-align:middle}.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--o);color:#fff;border:0;border-radius:10px;padding:11px 16px;font-weight:700;cursor:pointer}.btn.secondary{background:#20242b}.btn.danger{background:#c62828}.btn.small{padding:7px 10px;font-size:12px}.actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}.alert,.notice{padding:12px;border-radius:10px;margin:12px 0}.success{background:#dcfce7;color:#166534}.error{background:#fee2e2;color:#991b1b}.notice{background:#fff7ed;border:1px solid #fed7aa}.auth-bg,.auth-body{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#fff7ed,#f8fafc);padding:24px}.auth-card,.login-card{width:min(480px,94vw);background:#fff;padding:30px;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.12)}label{display:block;font-weight:700;margin:10px 0 6px}.stack{display:grid;gap:12px}.stack.compact{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.badge{display:inline-block;padding:5px 9px;border-radius:20px;background:#fff1e8;color:#c84f00;font-size:12px;font-weight:700}.profile-row{display:flex;align-items:center;gap:18px}.avatar{width:76px;height:76px;border-radius:22px;object-fit:cover;border:3px solid var(--o)}.mini{width:76px}.mini.wide{width:140px}.muted{color:var(--muted)}.report{padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff7ed;font-weight:700;color:#9a3d00}.bar-row{display:grid;grid-template-columns:90px 1fr 40px;align-items:center;gap:12px;margin:10px 0}.bar{height:12px;background:#e5e7eb;border-radius:20px;overflow:hidden}.bar i,.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--o),#fb923c)}.progress{height:10px;background:#e5e7eb;border-radius:20px;overflow:hidden}.resource{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 0;border-bottom:1px solid var(--line)}.resource p{margin:4px 0;color:var(--muted)}.message{padding:14px 0;border-bottom:1px solid var(--line)}.message p{white-space:normal}.mobile-nav{display:none}@media(max-width:1200px){.metrics{grid-template-columns:repeat(3,1fr)}}@media(max-width:900px){.app{grid-template-columns:1fr}.side{display:none}.top{padding:10px 14px;flex-wrap:wrap}.top strong{display:none}.content{padding:16px 14px 90px}.grid,.metrics{grid-template-columns:1fr}.two{grid-template-columns:1fr}.mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);z-index:10;padding-bottom:env(safe-area-inset-bottom)}.mobile-nav a{padding:12px 4px;text-align:center;font-size:11px}.mobile-nav a.active{color:var(--o);font-weight:800}.resource{align-items:flex-start;flex-direction:column}}@media(prefers-color-scheme:dark){:root{--bg:#0f172a;--card:#182235;--ink:#f8fafc;--muted:#b6c0cf;--line:#2d3a4e}.top,.mobile-nav{background:#151f31}.search input,input,textarea,select{background:#101827;color:#fff}.top .pill{background:#263248}.report,.notice{background:#2a1a0a}.auth-card,.login-card{background:#182235}}
/* V53 separated-page portal and candidate card directory */
.candidate-toolbar{display:flex;align-items:center;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 18px;margin:18px 0}.candidate-toolbar input{flex:1}.candidate-toolbar span{white-space:nowrap;color:var(--muted)}.filter-chips{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 24px}.filter-chips button{border:1px solid var(--line);background:var(--card);color:var(--muted);padding:10px 17px;border-radius:999px;font-weight:700;cursor:pointer}.filter-chips button.active,.filter-chips button:hover{background:#0f8a69;color:#fff;border-color:#0f8a69}.candidate-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}.candidate-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px 18px;text-align:center;box-shadow:0 10px 32px rgba(15,23,42,.06);transition:.2s}.candidate-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(15,23,42,.1)}.candidate-avatar-wrap{position:relative;width:118px;height:118px;margin:0 auto 14px}.candidate-avatar{width:118px;height:118px;border-radius:50%;object-fit:cover;border:5px solid #f4c744;box-shadow:0 0 0 5px rgba(244,199,68,.12)}.candidate-avatar.initials{display:grid;place-items:center;background:#e7f7f1;color:#11805f;font-size:28px;font-weight:800}.presence{position:absolute;width:18px;height:18px;border-radius:50%;right:6px;bottom:8px;border:3px solid var(--card)}.presence.online{background:#20bf55}.presence.offline{background:#9ca3af}.review-dot{position:absolute;right:-2px;top:0;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#d83a2e;color:#fff;font-weight:900;border:4px solid #fff}.candidate-card h3{margin:6px 0 4px}.candidate-card small{display:block;min-height:42px;color:var(--muted);overflow-wrap:anywhere}.candidate-meta{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0}.status-pill{font-size:11px;font-weight:800;padding:5px 10px;border-radius:999px}.status-active{background:#dcfce7;color:#166534}.status-pending{background:#fef3c7;color:#92400e}.status-suspended{background:#fee2e2;color:#991b1b}.candidate-actions{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:14px}.dashboard-links{margin-top:22px}.dashboard-links .card{display:block}.initials{display:grid;place-items:center;background:#fff1e8;color:var(--o);font-weight:800}.content>h1{margin-bottom:6px}.content>.card,.content>form.card,.content>section.card{margin-bottom:22px}
@media(max-width:700px){.candidate-toolbar{align-items:stretch;flex-direction:column}.candidate-toolbar span{text-align:right}.candidate-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.candidate-card{padding:16px 10px}.candidate-avatar-wrap,.candidate-avatar{width:86px;height:86px}.candidate-actions .btn{flex:1;padding:7px 5px}.filter-chips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.filter-chips button{white-space:nowrap}.metrics{grid-template-columns:repeat(2,1fr)}}

/* V54 premium top bar, curved sidebar, profile dashboard and inbox */
:root{--teal:#0b8064;--red:#cf352b;--cream:#fbf7ef;--softline:#e6ddcf}.app{grid-template-columns:270px 1fr;background:linear-gradient(135deg,#f3faf7 0%,#fbf8f2 45%,#fff 100%)}.side{margin:18px 0 18px 18px;height:calc(100vh - 36px);border-radius:0 42px 42px 0;background:linear-gradient(180deg,#14876b,#08624f);box-shadow:0 18px 40px rgba(7,75,59,.18);display:flex;flex-direction:column;padding:22px 18px}.side-brand{display:flex;gap:12px;align-items:center;margin:4px 8px 22px}.brand-mark{width:45px;height:45px;border-radius:14px;background:linear-gradient(135deg,#f97316,#d94e0a);display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:0 8px 20px rgba(232,100,10,.28)}.side-brand .brand{margin:0;font-size:21px}.side-brand small{color:#d7f1e9;letter-spacing:.08em}.side-label{font-size:11px;font-weight:800;letter-spacing:.16em;color:#bce8dc;padding:7px 12px}.side a{justify-content:space-between;border-radius:999px;padding:13px 16px;color:#eefbf7;font-weight:700}.side a:hover,.side a.active{background:#fff;color:#1e55ee;box-shadow:0 7px 20px rgba(0,0,0,.12)}.side-spacer{flex:1}.side .logout-link{background:rgba(166,25,25,.9);color:#fff}.nav-count{background:#ef4444;color:#fff;border-radius:999px;min-width:23px;height:23px;display:grid;place-items:center;font-size:11px}.top{min-height:88px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--softline);justify-content:space-between;padding:12px 36px}.top-brand{display:flex;align-items:center;gap:12px;font-size:23px;font-weight:800}.top-brand b{color:var(--o)}.top-brand small{display:block;font-size:10px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}.mini-mark{width:42px;height:42px}.top-actions{display:flex;align-items:center;gap:12px}.top-icon{position:relative;width:48px;height:48px;border-radius:50%;border:1px solid var(--softline);background:#fff;font-size:21px;cursor:pointer}.top-icon em{position:absolute;right:-3px;top:-5px;background:#e53935;color:#fff;font-style:normal;font-size:10px;min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center}.top-user{display:flex;align-items:center;gap:9px;background:var(--teal);color:#fff;border-radius:999px;padding:7px 14px}.top-user img,.avatar-fallback{width:35px;height:35px;border-radius:50%;object-fit:cover;background:#e7f7f1;color:#08765d;display:grid;place-items:center;font-weight:900}.top-user small{display:block;font-size:10px;opacity:.8}.top-signout{background:var(--red);color:#fff;border-radius:999px;padding:12px 20px;font-weight:800}.content{padding:30px 34px}.profile-hero{background:rgba(255,255,255,.95);border:1px solid var(--softline);border-radius:24px;padding:34px 38px;display:flex;align-items:center;gap:28px;box-shadow:0 18px 48px rgba(62,50,30,.08);margin-bottom:28px;position:relative}.hero-mail{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:#f6c636;font-size:28px;box-shadow:0 10px 28px rgba(246,198,54,.3);cursor:pointer;flex:0 0 auto}.hero-avatar-wrap{position:relative}.hero-avatar{width:104px;height:104px;border-radius:50%;object-fit:cover;border:5px solid var(--teal);box-shadow:0 0 0 7px rgba(11,128,100,.12)}.live-dot{position:absolute;width:27px;height:27px;border-radius:50%;background:#35c96f;border:4px solid #fff;right:0;top:3px}.hero-copy{flex:1;min-width:0}.eyebrow{color:var(--red);font-size:13px;font-weight:900;letter-spacing:.18em;margin-bottom:8px}.hero-copy h1{font-family:Georgia,serif;font-size:clamp(30px,4vw,46px);margin:0 0 5px}.hero-copy p{margin:4px 0;color:#61706b;font-size:17px}.live-time{color:#13a24a;display:block;margin-top:12px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-actions.inline{margin-top:22px}.hero-tags{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}.hero-tags span{background:#e2f5ee;color:#0b8064;border-radius:999px;padding:10px 16px;font-weight:800}.hero-tags span+span{background:#f5f2eb;color:#64635f}.student-photo{text-align:center;display:grid;gap:10px;justify-items:center}.student-photo img{width:150px;height:190px;object-fit:cover;border-radius:14px;border:4px solid var(--teal)}.student-photo .hero-avatar{width:150px;height:190px;border-radius:14px}.student-photo small{max-width:190px;color:var(--muted)}.metrics{grid-template-columns:repeat(4,minmax(180px,1fr))}.metric{min-height:150px;display:flex;flex-direction:column;justify-content:center}.metric b{color:var(--teal);font-family:Georgia,serif;font-size:44px}.inbox-overlay{position:fixed;inset:0;background:rgba(12,24,22,.72);z-index:9999;display:none;align-items:center;justify-content:center;padding:22px}.inbox-overlay.open{display:flex}.inbox-panel{width:min(760px,96vw);height:min(820px,90vh);background:#fbfaf7;border-radius:28px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 90px rgba(0,0,0,.35)}.inbox-head{background:linear-gradient(135deg,#13876b,#08624f);color:#fff;padding:24px 28px;display:flex;align-items:center;gap:18px}.inbox-head h2{margin:0 0 4px}.inbox-head p{margin:0;opacity:.9}.inbox-logo{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:27px}.inbox-close{margin-left:auto;width:52px;height:52px;border:0;border-radius:50%;background:rgba(0,0,0,.22);color:#fff;font-size:34px;cursor:pointer}.inbox-body{flex:1;overflow:auto;padding:24px}.chat-item,.empty-chat{background:#fff;border:1px solid var(--softline);border-radius:18px;padding:16px 20px;margin-bottom:12px}.chat-item.mine{background:#e8f7f2;margin-left:15%}.chat-item small{display:block;color:var(--muted);margin:4px 0}.chat-item p{margin:7px 0;line-height:1.55}.inbox-compose{display:flex;gap:12px;padding:18px 22px;border-top:1px solid var(--softline);background:#fff}.inbox-compose input{border:2px solid var(--teal);border-radius:999px;padding:14px 20px}.send-round{width:52px;height:52px;border-radius:50%;border:0;background:var(--teal);color:#fff;font-size:20px;cursor:pointer;flex:none}.mobile-nav button{border:0;background:transparent;color:inherit}.mobile-nav a,.mobile-nav button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:18px}.mobile-nav small{font-size:10px}
@media(max-width:900px){.side{display:none}.app{grid-template-columns:1fr}.top{padding:9px 13px;min-height:68px}.top-brand small,.top-user span,.top-signout{display:none}.top-actions{gap:6px}.top-icon{width:40px;height:40px}.content{padding:16px 12px 92px}.profile-hero{padding:22px 18px;align-items:flex-start;flex-wrap:wrap;gap:16px}.hero-mail{width:50px;height:50px}.hero-avatar{width:78px;height:78px}.hero-copy{flex-basis:calc(100% - 150px)}.hero-copy h1{font-size:29px}.hero-copy p{font-size:14px}.hero-actions{width:100%}.hero-actions .btn{flex:1}.student-photo{order:-1;margin-left:auto}.student-photo img,.student-photo .hero-avatar{width:95px;height:120px}.metrics{grid-template-columns:repeat(2,1fr)}.metric{min-height:115px}.metric b{font-size:34px}.inbox-panel{height:94vh}.inbox-head{padding:18px}.inbox-head p{font-size:12px}.inbox-body{padding:14px}.top-user{padding:4px}}
@media(prefers-color-scheme:dark){.profile-hero,.inbox-panel,.chat-item,.inbox-compose{background:#182235}.inbox-panel{color:#f8fafc}.chat-item.mine{background:#123f35}.top{background:rgba(21,31,49,.95)}.side a:hover,.side a.active{background:#f8fafc;color:#1e55ee}}


/* V55 candidate payment methods and admin settings */
.muted{color:var(--muted);margin:.25rem 0}.payment-banner{background:linear-gradient(135deg,#118264,#066149);color:#fff;border-radius:28px;padding:34px 42px;margin-bottom:30px;display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:0 20px 45px rgba(7,99,76,.2)}.payment-banner small{display:block;font-size:17px;margin-bottom:12px}.payment-banner strong{font:700 clamp(38px,5vw,60px)/1 Georgia,serif;display:block}.payment-verification-state{font-size:18px;font-weight:800;text-align:right}.candidate-payment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:22px 0 30px}.candidate-payment-card{background:var(--card);border:1px solid var(--softline);border-radius:24px;padding:28px;text-align:center;box-shadow:0 15px 38px rgba(54,43,28,.08);display:flex;flex-direction:column;align-items:center}.payment-method-visual{width:142px;height:142px;border-radius:50%;display:grid;place-items:center;background:#0d7c62;color:#fff;border:8px solid #fff;box-shadow:0 0 0 2px #e2d7c7,0 16px 34px rgba(5,100,76,.18);overflow:hidden;margin:2px auto 20px}.payment-method-visual.mobile{background:#20a486}.payment-method-visual.card{background:#bd3025}.payment-method-visual span{font-size:56px}.payment-method-visual img{width:100%;height:100%;object-fit:contain;background:#fff}.candidate-payment-card h2{margin:0 0 10px}.candidate-payment-card>p{color:var(--muted);font-size:17px;min-height:42px}.candidate-payment-card details{width:100%;text-align:left;margin:8px 0 18px;border-top:1px solid var(--line);padding-top:12px}.candidate-payment-card summary{cursor:pointer;font-weight:800;color:var(--teal)}.candidate-payment-card pre{white-space:pre-wrap;font:inherit;color:var(--muted);background:#f8fafc;padding:12px;border-radius:12px}.payment-open-btn{margin-top:auto}.payment-how{border-left:8px solid #d1a516;padding:26px 34px}.payment-how h2{font-family:Georgia,serif}.payment-how p{font-size:17px;line-height:1.65;color:#5f6d69}.payment-admin-settings>.section-head{margin-bottom:10px}.payment-admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.payment-setting-card{border:1px solid var(--line);border-radius:18px;padding:18px;background:var(--bg)}.payment-setting-title{display:flex;align-items:center;gap:10px}.payment-setting-title>span{font-size:30px}.payment-setting-title h3{margin:0;flex:1}.switch-line{display:flex;align-items:center;gap:6px;font-size:12px;margin:0}.switch-line input{width:auto}.admin-qr-preview{display:flex;align-items:center;gap:12px;background:#fff;padding:10px;border-radius:12px;margin-top:10px}.admin-qr-preview img{width:92px;height:92px;object-fit:contain}.admin-qr-preview input{width:auto}
@media(max-width:980px){.candidate-payment-grid,.payment-admin-grid{grid-template-columns:1fr}.payment-banner{align-items:flex-start;flex-direction:column}.payment-verification-state{text-align:left}.payment-method-visual{width:120px;height:120px}}
@media(prefers-color-scheme:dark){.candidate-payment-card pre,.payment-setting-card{background:#111827}.admin-qr-preview{background:#182235}}

/* V56 password security and complete candidate course catalogue */
.password-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:24px;align-items:start;margin-top:24px}.password-form,.password-input{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}.password-input input{border:0;border-radius:0}.password-input button{width:46px;align-self:stretch;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:18px}.strength{display:grid;gap:8px}.strength i{height:9px;border-radius:99px;background:var(--line);overflow:hidden}.strength b{display:block;width:0;height:100%;background:#d33;transition:.25s}.match-note{font-size:13px;color:var(--muted)}.match-note.good{color:#13824f;font-weight:700}.match-note.bad{color:#c62828;font-weight:700}
.course-catalogue{margin:34px 0}.course-section-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:22px}.course-section-head h2{font-family:Georgia,serif;font-size:clamp(28px,4vw,42px);margin:3px 0 5px}.course-section-head p{margin:0;color:var(--muted)}.course-search{display:flex;align-items:center;gap:8px;min-width:300px;background:var(--card);border:1px solid var(--line);padding:3px 12px;border-radius:999px}.course-search input{border:0;background:transparent}.course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.course-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 12px 35px rgba(20,35,30,.07);display:flex;flex-direction:column;min-height:390px;transition:.25s}.course-card:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(20,35,30,.12);border-color:#8cc9b8}.course-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.course-code{display:inline-flex;width:max-content;background:#e5f7f1;color:#08795f;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:900;letter-spacing:.06em}.course-card h3{font-family:Georgia,serif;font-size:22px;margin:17px 0 10px;line-height:1.22}.course-intro{color:var(--muted);line-height:1.58;flex:1}.course-meta,.course-status{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;margin:12px 0;color:#4d6961}.course-details{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}.course-details summary{cursor:pointer;font-weight:800;color:var(--teal)}.course-details p,.course-details li{font-size:13px;line-height:1.55;color:var(--muted)}.course-open{width:100%;margin-top:16px}.enroll-switch input{display:none}.enroll-switch span{display:block;width:54px;height:30px;background:#cbd5e1;border-radius:99px;position:relative;cursor:pointer;transition:.25s}.enroll-switch span:after{content:'';position:absolute;width:24px;height:24px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 2px 7px rgba(0,0,0,.22);transition:.25s}.enroll-switch input:checked+span{background:var(--teal)}.enroll-switch input:checked+span:after{transform:translateX(24px)}.course-player{padding:34px;margin-bottom:28px}.back-link{color:var(--teal);font-weight:800;display:inline-block;margin-bottom:18px}.course-player h1{font-family:Georgia,serif;font-size:clamp(34px,5vw,54px);margin:15px 0}.course-player .lead{font-size:18px;line-height:1.7;color:var(--muted);max-width:900px}.progress.large{height:15px;margin:18px 0 28px}.lesson-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.lesson-grid article{border:1px solid var(--line);border-radius:18px;padding:20px;background:var(--bg)}.lesson-grid article>b{font-size:30px;color:#d3a80e}.lesson-grid p{color:var(--muted);min-height:75px}.home-catalogue .course-grid{max-height:1150px;overflow:auto;padding:3px 4px 14px;scrollbar-width:thin}
@media(max-width:1200px){.course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.password-layout{grid-template-columns:1fr}.course-section-head{align-items:stretch;flex-direction:column}.course-search{min-width:0}.course-grid,.lesson-grid{grid-template-columns:1fr}.course-card{min-height:0}.home-catalogue .course-grid{max-height:none}.course-player{padding:22px 17px}}
@media(prefers-color-scheme:dark){.course-code{background:#123f35;color:#78e8c8}.lesson-grid article{background:#111827}.password-input{background:#101827}}

/* =====================================================================
   V57 — Course Learning Module (Pre-Course Overview)
   Orange-and-white HSE Lead theme. Scoped to .ci-wrap.
   ===================================================================== */
.ci-wrap{--ci-o:#e8640a;--ci-o2:#fb8b3c;--ci-o-soft:#fff3ea;--ci-o-line:#f6d6bd;--ci-ink:#241a12;--ci-muted:#7a6a5d;--ci-card:#ffffff;--ci-line:#efe4d8;--ci-bg:#fffaf5;display:block;max-width:1120px;margin:0 auto}
.ci-wrap .back-link{color:var(--ci-o);font-weight:800}
.ci-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.ci-topbar .back-link{margin:0}
.ci-topstart{background:linear-gradient(135deg,var(--ci-o),var(--ci-o2));color:#fff;border-radius:999px;padding:11px 22px;font-weight:800;white-space:nowrap;box-shadow:0 8px 20px rgba(232,100,10,.28)}
.ci-topstart:hover{filter:brightness(1.05)}
.ci-top-actions{display:flex;align-items:center;gap:16px}
.ci-price .cp-amount{font-size:19px;color:var(--ci-o)!important}
.ci-price .cp-code{color:var(--ci-muted)}
.ci-start-row{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:6px 0 14px}
.ci-fee-label{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ci-muted)}
.ci-start-row .cp-amount{font-size:24px;color:var(--ci-o)!important}
@media(max-width:560px){.ci-topbar{gap:10px}.ci-top-actions{width:100%;justify-content:space-between}.ci-topstart{flex:0 0 auto;text-align:center}}
.ci-card{background:var(--ci-card);border:1px solid var(--ci-line);border-radius:22px;padding:26px 28px;margin:18px 0;box-shadow:0 14px 40px rgba(120,70,20,.06)}
.ci-eyebrow{display:inline-block;color:var(--ci-o);font-size:12px;font-weight:900;letter-spacing:.18em;background:var(--ci-o-soft);border:1px solid var(--ci-o-line);padding:6px 12px;border-radius:999px}
.ci-card h2{font-family:Georgia,serif;font-size:clamp(22px,2.6vw,30px);margin:14px 0 12px;color:var(--ci-ink)}
.ci-card h4{margin:0 0 8px;color:var(--ci-ink);font-size:15px}
.ci-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* 1. HERO */
.ci-hero{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;background:linear-gradient(135deg,#fff7f0 0%,#ffffff 55%,#fff2e6 100%);border:1px solid var(--ci-o-line);border-radius:28px;padding:32px 34px;margin-top:6px;box-shadow:0 22px 55px rgba(200,90,10,.10)}
.ci-hero-main{min-width:0}
.ci-badge{display:inline-block;background:var(--ci-o);color:#fff;border-radius:999px;padding:7px 14px;font-size:12px;font-weight:900;letter-spacing:.06em}
.ci-level{display:inline-block;margin-left:8px;background:#fff;border:1px solid var(--ci-o-line);color:var(--ci-o);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:800}
.ci-hero-main h1{font-family:Georgia,serif;font-size:clamp(30px,4.4vw,50px);line-height:1.1;margin:16px 0 12px;color:var(--ci-ink)}
.ci-lead{color:var(--ci-muted);font-size:17px;line-height:1.65;margin:0 0 20px}
.ci-hero-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ci-hero .btn{background:linear-gradient(135deg,var(--ci-o),var(--ci-o2));border:0}
.ci-progress-pill{background:#fff;border:1px solid var(--ci-o-line);color:var(--ci-o);font-weight:800;border-radius:999px;padding:10px 16px;font-size:13px}
.ci-hero-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.ci-fact{display:flex;gap:11px;align-items:center;background:#fff;border:1px solid var(--ci-line);border-radius:16px;padding:12px 14px}
.ci-fact-ic{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--ci-o-soft);color:var(--ci-o);font-size:18px}
.ci-fact small{display:block;color:var(--ci-muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.ci-fact b{display:block;color:var(--ci-ink);font-size:13.5px;line-height:1.25;margin-top:2px}

/* 2. INTRODUCTION */
.ci-intro p{color:var(--ci-muted);line-height:1.7;font-size:15.5px;margin:0 0 12px}
.ci-intro-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
.ci-std,.ci-skills{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.ci-std li{padding:9px 14px;border-radius:12px;background:var(--ci-o-soft);border:1px solid var(--ci-o-line);color:#a24d09;font-weight:700;font-size:13.5px}
.ci-skills li{padding-left:24px;position:relative;color:var(--ci-ink);line-height:1.5;font-size:14px}
.ci-skills li:before{content:'✦';position:absolute;left:0;color:var(--ci-o);font-weight:900}

/* 3. KEY TOPICS */
.ci-topics{display:flex;flex-wrap:wrap;gap:10px}
.ci-topic{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--ci-o-line);color:var(--ci-ink);border-radius:14px;padding:11px 15px;font-weight:700;font-size:13.5px;transition:.2s}
.ci-topic:hover{background:var(--ci-o-soft);border-color:var(--ci-o);transform:translateY(-2px)}

/* 4. TARGET AUDIENCE */
.ci-chips{display:flex;flex-wrap:wrap;gap:10px}
.ci-chip{background:linear-gradient(135deg,var(--ci-o),var(--ci-o2));color:#fff;border-radius:999px;padding:10px 18px;font-weight:800;font-size:13.5px;box-shadow:0 8px 18px rgba(232,100,10,.20)}

/* 5. OBJECTIVES / DETAILS */
.ci-details summary{cursor:pointer;font-weight:800;color:var(--ci-o);list-style:none;padding:10px 0}
.ci-details summary::-webkit-details-marker{display:none}
.ci-details summary:before{content:'▸ ';transition:.2s;display:inline-block}
.ci-details[open] summary:before{transform:rotate(90deg)}
.ci-obj{margin:6px 0 0;padding-left:20px;display:grid;gap:9px}
.ci-obj li{color:var(--ci-ink);line-height:1.55;font-size:14.5px}

/* 6. OBJECTIVES TABLE */
.ci-table-wrap{overflow:auto;border:1px solid var(--ci-line);border-radius:14px}
.ci-table{width:100%;border-collapse:collapse;font-size:14px}
.ci-table th{background:var(--ci-o);color:#fff;text-align:left;padding:12px 14px;font-size:12px;letter-spacing:.06em}
.ci-table td{padding:12px 14px;border-top:1px solid var(--ci-line);color:var(--ci-ink);vertical-align:top}
.ci-table tbody tr:nth-child(odd){background:var(--ci-bg)}
.ci-table td b{color:var(--ci-o)}

/* 7. WHAT YOU WILL LEARN */
.ci-learn{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ci-learn-card{border:1px solid var(--ci-line);border-radius:16px;padding:18px;background:var(--ci-bg);transition:.2s}
.ci-learn-card:hover{border-color:var(--ci-o);box-shadow:0 12px 26px rgba(232,100,10,.10);transform:translateY(-3px)}
.ci-learn-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--ci-o);color:#fff;font-size:20px;margin-bottom:12px}
.ci-learn-card b{display:block;color:var(--ci-ink);margin-bottom:5px;font-size:15px}
.ci-learn-card p{margin:0;color:var(--ci-muted);font-size:13px;line-height:1.5}

/* 8. MODULES ACCORDION */
.ci-accordion{display:grid;gap:10px}
.ci-module{border:1px solid var(--ci-line);border-radius:16px;overflow:hidden;background:#fff}
.ci-module summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;padding:16px 18px;font-weight:700}
.ci-module summary::-webkit-details-marker{display:none}
.ci-mod-no{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:11px;background:var(--ci-o-soft);color:var(--ci-o);font-weight:900}
.ci-mod-title{flex:1;color:var(--ci-ink);font-size:15.5px}
.ci-mod-count{color:var(--ci-muted);font-size:12.5px;font-weight:700;white-space:nowrap}
.ci-module[open] summary{background:var(--ci-o-soft)}
.ci-module ul{margin:0;padding:4px 22px 18px 70px;display:grid;gap:7px}
.ci-module li{color:var(--ci-muted);font-size:14px;line-height:1.5;list-style:disc}
.ci-module-final .ci-mod-no{background:var(--ci-o);color:#fff}

/* 9. REQUIREMENTS */
.ci-check{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ci-check li{position:relative;padding:11px 14px 11px 44px;background:var(--ci-bg);border:1px solid var(--ci-line);border-radius:12px;color:var(--ci-ink);font-size:14px}
.ci-check li:before{content:'✓';position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;background:var(--ci-o);color:#fff;border-radius:6px;display:grid;place-items:center;font-size:12px;font-weight:900}

/* 10. RESOURCES */
.ci-res{display:grid;gap:11px}
.ci-res-item{display:flex;align-items:center;gap:14px;border:1px solid var(--ci-line);border-radius:14px;padding:13px 16px;background:#fff}
.ci-res-ic{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:11px;background:var(--ci-o-soft);color:var(--ci-o);font-size:18px}
.ci-res-item b{display:block;color:var(--ci-ink);font-size:14.5px}
.ci-res-item small{color:var(--ci-muted);font-size:12.5px}
.ci-res-item div{flex:1;min-width:0}
.ci-res-dl{background:var(--ci-o);color:#fff;border-radius:999px;padding:8px 16px;font-weight:800;font-size:13px;white-space:nowrap}

/* 11. ASSESSMENT */
.ci-assess-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:6px}
.ci-assess-grid>div{background:var(--ci-o-soft);border:1px solid var(--ci-o-line);border-radius:16px;padding:16px;text-align:center}
.ci-assess-grid b{display:block;font-family:Georgia,serif;font-size:30px;color:var(--ci-o);line-height:1}
.ci-assess-grid small{display:block;margin-top:6px;color:#a24d09;font-weight:700;font-size:12px}

/* 12. COMPLETION BENEFITS */
.ci-benefits{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ci-benefit{display:flex;gap:12px;align-items:center;border:1px solid var(--ci-line);border-radius:14px;padding:14px;background:var(--ci-bg)}
.ci-benefit-ic{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:11px;background:var(--ci-o);color:#fff;font-size:19px}
.ci-benefit b{display:block;color:var(--ci-ink);font-size:14px}
.ci-benefit small{color:var(--ci-muted);font-size:12.5px;line-height:1.45}

/* 13. PROGRESS */
.ci-progress-card{background:linear-gradient(135deg,#fff7f0,#fff)}
.ci-progress-track{height:14px;background:#f1e5d8;border-radius:999px;overflow:hidden;margin:6px 0 20px}
.ci-progress-track i{display:block;height:100%;background:linear-gradient(90deg,var(--ci-o),var(--ci-o2));border-radius:999px;transition:width .8s ease}
.ci-stages{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.ci-stage{text-align:center;position:relative;padding-top:26px;color:var(--ci-muted);font-size:12px}
.ci-stage-dot{position:absolute;top:0;left:50%;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid #e7d6c6}
.ci-stage.done .ci-stage-dot{background:var(--ci-o);border-color:var(--ci-o)}
.ci-stage.current .ci-stage-dot{box-shadow:0 0 0 5px rgba(232,100,10,.18)}
.ci-stage.done{color:var(--ci-o);font-weight:700}

/* 14. START */
.ci-start{text-align:center;background:linear-gradient(135deg,#e8640a,#fb8b3c);color:#fff;border:0}
.ci-start .ci-eyebrow{display:none}
.ci-start h2{color:#fff}
.ci-start p{color:#fff;opacity:.95;max-width:640px;margin:0 auto 20px}
.ci-start-btn{background:#fff;color:var(--ci-o);font-size:17px;padding:15px 34px;border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.18)}
.ci-start-btn[disabled]{opacity:.55;pointer-events:none;filter:grayscale(.2)}
.ci-start-btn.unlocked{animation:ciPulse 1.4s ease 1}
@keyframes ciPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
.ci-start-hint{display:block;margin-top:12px;color:#fff;opacity:.85;font-size:12.5px}
.ci-start-hint.done{opacity:0;height:0;margin:0}

/* responsive */
@media(max-width:960px){
  .ci-hero{grid-template-columns:1fr}
  .ci-two,.ci-intro-cols,.ci-benefits{grid-template-columns:1fr}
  .ci-learn,.ci-assess-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .ci-hero-facts,.ci-learn,.ci-assess-grid{grid-template-columns:1fr}
  .ci-stages{grid-template-columns:1fr 1fr;gap:14px}
  .ci-card{padding:20px 18px}
}

/* dark mode — keep orange, darken surfaces */
:root[data-theme=dark] .ci-wrap,
@media(prefers-color-scheme:dark){.ci-wrap{}}
:root[data-theme=dark] .ci-wrap{--ci-ink:#f6ede4;--ci-muted:#c3b2a3;--ci-card:#211a15;--ci-line:#3a2c20;--ci-bg:#1b1510;--ci-o-soft:#3a2110;--ci-o-line:#5a3312}
:root[data-theme=dark] .ci-hero{background:linear-gradient(135deg,#2a1c10,#1c1610);border-color:#5a3312}
:root[data-theme=dark] .ci-topic,:root[data-theme=dark] .ci-module,:root[data-theme=dark] .ci-fact,:root[data-theme=dark] .ci-res-item,:root[data-theme=dark] .ci-progress-pill,:root[data-theme=dark] .ci-level{background:#211a15}
@media(prefers-color-scheme:dark){
  .ci-wrap:not([data-theme]){--ci-ink:#f6ede4;--ci-muted:#c3b2a3;--ci-card:#211a15;--ci-line:#3a2c20;--ci-bg:#1b1510;--ci-o-soft:#3a2110;--ci-o-line:#5a3312}
}

/* =====================================================================
   V58 — Grey theme, tighter sizing, notifications, inbox button,
   candidate management, course filters/list view, restore, login.
   ===================================================================== */

/* ---- Palette: green -> light grey (keep orange brand + semantic greens) ---- */
:root{--teal:#5f6b76;--grey-side1:#eef1f5;--grey-side2:#e2e7ee;--grey-btn:#6b7480;--grey-btn-d:#59616b}
.side{background:linear-gradient(180deg,var(--grey-side1),var(--grey-side2))!important;color:#333b45;box-shadow:0 14px 34px rgba(60,70,85,.14)}
.side-brand small{color:#8b95a2}
.side-label{color:#96a0ad}
.side a{color:#3a434e}
.side a:hover,.side a.active{background:var(--o)!important;color:#fff!important;box-shadow:0 6px 16px rgba(232,100,10,.28)}
.side .logout-link{background:#c9584f!important;color:#fff!important}
.filter-chips button.active,.filter-chips button:hover{background:var(--grey-btn);color:#fff;border-color:var(--grey-btn)}
.inbox-head,.notif-head{background:linear-gradient(135deg,#727c88,#565f6a)!important}
.payment-banner{background:linear-gradient(135deg,#6b7480,#525a64)!important}
.payment-method-visual{background:#6b7480!important}
.payment-method-visual.mobile{background:#828b96!important}
.send-round,.top-user{background:var(--grey-btn)}
@media(prefers-color-scheme:dark){.side{background:linear-gradient(180deg,#1b2331,#141b27)!important;color:#dce3ec}.side a{color:#c3ccd7}.side-label{color:#8792a1}.side a:hover,.side a.active{background:var(--o)!important;color:#fff!important}}

/* ---- Global sizing: shrink fonts, paddings, cards ---- */
body{font-size:14.5px}
.app{grid-template-columns:214px 1fr}
.side{margin:14px 0 14px 14px;height:calc(100vh - 28px);border-radius:0 30px 30px 0;padding:18px 13px}
.side-brand{margin:2px 6px 16px}.side-brand .brand{font-size:18px}.brand-mark{width:38px;height:38px;border-radius:12px;font-size:15px}
.side a{padding:10px 13px;font-size:13.5px;border-radius:12px}
.top{min-height:60px;padding:8px 22px}
.top-brand{font-size:18px}.mini-mark{width:34px;height:34px}
.top-brand small{font-size:9px}
.top-actions{gap:9px}
.top-icon{width:38px;height:38px;font-size:17px}
.top-user{padding:5px 11px;gap:8px}.top-user img,.avatar-fallback{width:30px;height:30px}
.top-signout{padding:8px 14px;font-size:13px}
.content{padding:22px 24px}
.content>section{margin-bottom:18px}
h1,h2,h3{line-height:1.2}
.content>h1{font-size:24px}
.card{padding:15px 16px;border-radius:14px}
.card h2{font-size:19px}.card h3{font-size:16px}
.grid{gap:14px}
.metrics{grid-template-columns:repeat(4,minmax(150px,1fr));gap:13px}
.metric{min-height:92px;padding:14px}
.metric b{font-size:26px}
.dashboard-links .card h3{font-size:15px}.dashboard-links .card p{font-size:13px;color:var(--muted)}
.section-head h1{font-size:23px}
.section-head.compact h2{font-size:18px;margin:0}
.section-head.compact{margin-bottom:12px}
.btn{padding:9px 14px;font-size:13.5px;border-radius:9px}
.btn.small{padding:6px 9px;font-size:11.5px}
.table th,.table td{padding:9px}

/* Hero (admin + student) tighter */
.profile-hero{padding:20px 22px;gap:18px;border-radius:20px;margin-bottom:18px}
.hero-copy h1{font-size:clamp(21px,2.6vw,30px)}
.hero-copy p{font-size:13.5px;margin:3px 0}
.hero-avatar{width:76px;height:76px;border-width:4px}
.hero-mail{width:50px;height:50px;font-size:22px}
.live-dot{width:22px;height:22px}
.eyebrow{font-size:12px;margin-bottom:5px}
.hero-tags span{padding:7px 12px;font-size:12.5px}
.hero-actions .btn{font-size:13px}
.student-photo img,.student-photo .hero-avatar{width:118px;height:150px}

/* Candidates directory tighter */
.candidate-toolbar{padding:11px 14px;border-radius:14px;margin:14px 0}
.candidate-grid{grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px}
.candidate-card{padding:15px 12px;border-radius:16px}
.candidate-avatar-wrap,.candidate-avatar{width:80px;height:80px}
.candidate-avatar.initials{font-size:22px}
.candidate-card h3{font-size:15.5px;margin:5px 0 3px}
.candidate-card small{min-height:34px;font-size:12px}
.filter-chips{gap:8px;margin:10px 0 18px}
.filter-chips button{padding:8px 13px;font-size:12.5px}

/* ---- Inbox button (replaces bare envelope icon) ---- */
.top-btn{position:relative;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:999px;border:1px solid var(--softline);background:#fff;color:var(--ink);font-weight:800;font-size:13px;cursor:pointer}
.top-btn span{font-size:16px}
.top-btn:hover{background:var(--o);color:#fff;border-color:var(--o)}
.top-btn em{font-style:normal;background:#e53935;color:#fff;font-size:10px;min-width:18px;height:18px;border-radius:999px;display:grid;place-items:center;padding:0 4px}
@media(prefers-color-scheme:dark){.top-btn{background:#1b2536;color:#eef2f8;border-color:#2d3a4e}}

/* ---- Notifications overlay ---- */
.notif-overlay{position:fixed;inset:0;background:rgba(20,26,34,.6);z-index:9999;display:none;align-items:flex-start;justify-content:flex-end;padding:80px 26px 26px}
.notif-overlay.open{display:flex}
.notif-panel{width:min(420px,96vw);max-height:82vh;background:var(--card);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:notifIn .18s ease}
@keyframes notifIn{from{transform:translateY(-10px);opacity:.6}to{transform:none;opacity:1}}
.notif-head{color:#fff;padding:18px 20px;display:flex;align-items:center;gap:14px}
.notif-head h2{margin:0;font-size:18px}.notif-head p{margin:2px 0 0;font-size:12px;opacity:.92}
.notif-logo{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:20px}
.notif-head .inbox-close{margin-left:auto;width:40px;height:40px;font-size:26px}
.notif-body{padding:12px;overflow:auto}
.notif-item{display:flex;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;margin-bottom:9px;color:inherit;background:var(--bg)}
.notif-item:hover{border-color:var(--o)}
.notif-item.static:hover{border-color:var(--line)}
.notif-ic{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--o);color:#fff;font-size:14px}
.notif-item strong{display:block;font-size:13.5px}
.notif-item p{margin:3px 0;font-size:12.5px;color:var(--muted)}
.notif-item small{color:var(--muted);font-size:11px}

/* ---- Candidate Management panel (admin dashboard) ---- */
.cm-panel .cm-list{display:grid;gap:8px}
.cm-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.cm-av{position:relative;width:38px;height:38px;flex:none;border-radius:50%;object-fit:cover;overflow:hidden;display:grid;place-items:center;font-weight:800;background:#eef1f5;color:#5f6b76}
.cm-av img{width:100%;height:100%;object-fit:cover}
.cm-av.initials{background:#fff1e8;color:var(--o)}
.cm-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--card)}
.cm-dot.on{background:#20bf55}.cm-dot.off{background:#9ca3af}
.cm-meta{flex:1;min-width:0}.cm-meta b{display:block;font-size:13.5px}.cm-meta small{color:var(--muted);font-size:11.5px;overflow-wrap:anywhere}
.cm-actions{display:flex;gap:6px}
@media(max-width:640px){.cm-row{flex-wrap:wrap}.cm-meta{flex-basis:calc(100% - 50px)}.cm-actions{width:100%}.cm-actions .btn{flex:1}}

/* ---- Candidate support messages (Communication Suite) ---- */
.support-list{display:grid;gap:12px;margin-top:6px}
.support-item{display:flex;gap:14px;padding:15px;border:1px solid var(--line);border-radius:16px;background:var(--bg)}
.support-avatar{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--o);color:#fff;font-weight:800;font-size:18px}
.support-body{flex:1;min-width:0}
.support-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.support-top small{color:var(--muted);font-size:11.5px}
.support-subject{font-weight:800;margin:4px 0}
.support-body p{margin:4px 0;color:var(--muted);line-height:1.55}
.support-reply summary{cursor:pointer;font-weight:800;color:var(--o);font-size:13px;margin-top:6px}
.support-reply form{margin-top:10px}

/* ---- Course filters + grid/list toggle + status ribbons (candidate) ---- */
.course-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:6px 0 18px}
.course-filters{display:flex;gap:8px;flex-wrap:wrap}
.course-filters button{border:1px solid var(--line);background:var(--card);color:var(--muted);padding:8px 15px;border-radius:999px;font-weight:800;font-size:13px;cursor:pointer}
.course-filters button.active,.course-filters button:hover{background:var(--o);color:#fff;border-color:var(--o)}
.course-views{display:flex;gap:6px}
.course-views button{width:38px;height:38px;border:1px solid var(--line);background:var(--card);border-radius:10px;font-size:16px;cursor:pointer;color:var(--muted)}
.course-views button.active{background:var(--o);color:#fff;border-color:var(--o)}
/* V62 — category filter switches (parallel with status filters) */
.course-cats{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.course-cats button{border:1px solid var(--line);background:var(--card);color:var(--muted);padding:8px 15px;border-radius:999px;font-weight:800;font-size:13px;cursor:pointer}
.course-cats button:hover{border-color:var(--teal);color:var(--teal)}
.course-cats button.active{background:var(--teal);color:#fff;border-color:var(--teal)}
/* per-card category badge (sits under the title, clear of the Enrolled ribbon) */
.course-tags{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 10px}
.course-cat{display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.course-cat.cat-training{background:#fff0e6;color:#c2560c}
.course-cat.cat-inspection{background:#e6f4ff;color:#1663a8}
.course-cat.cat-iso{background:#eaf7ef;color:#1a8f56}
.course-empty{margin:26px 0;text-align:center;color:var(--muted);font-weight:700}
@media(max-width:760px){.course-cats{margin-left:0;width:100%}}

/* V63/V65 — currency selector, category separators + inline card price */
.course-currency{display:flex;align-items:center;gap:8px;margin:0;font-weight:800;font-size:13px;color:var(--muted)}
.course-currency select{width:auto;min-width:150px;padding:8px 12px;border-radius:999px;font-weight:700}
/* category separator shown between groups when "All categories" is selected */
.course-group{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin:10px 2px 2px;font-weight:900;letter-spacing:.02em;color:#0b5344}
.course-group:first-child{margin-top:0}
.course-group span{font-size:15px;white-space:nowrap}
.course-group i{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,#f0b892,rgba(240,184,146,0))}
/* CTA row: Open/Enroll button left, small price right (never overflows) */
.course-cta{display:flex;align-items:center;gap:10px;margin-top:16px;min-width:0}
.course-cta .course-open{width:100%;margin:0;flex:1;min-width:0}
.course-price.cp-inline{display:inline-flex;align-items:baseline;gap:4px;padding:0;background:none;border:0;margin:0;text-align:right;flex:0 0 auto;max-width:46%;white-space:nowrap;overflow:hidden}
.cp-inline .cp-amount{font-family:Georgia,serif;font-size:13.5px;font-weight:800;color:#0b8064;line-height:1.1;overflow:hidden;text-overflow:ellipsis}
.cp-inline .cp-code{font-size:9.5px;font-weight:800;color:var(--muted)}
.cp-inline.cp-missing .cp-amount{font-size:12px;color:var(--muted)}
:root[data-theme=dark] .cp-inline .cp-amount{color:#4fd3ad}
/* search + currency selector, right-aligned together in the section head */
.course-head-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.course-currency{display:flex;align-items:center;gap:6px;margin:0;font-weight:800;font-size:13px;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px 10px 3px 14px}
.course-currency select{width:auto;min-width:160px;border:0;background:transparent;padding:8px 4px;font-weight:700}
@media(max-width:760px){.course-head-tools{width:100%}.course-search{flex:1}}
/* admin per-currency price editor */
.cur-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:6px 0 12px}
.cur-in{display:flex;flex-direction:column;gap:4px;margin:0;font-weight:700}
.cur-in span{font-size:12px;color:var(--muted)}
.cur-in small{color:var(--teal)}
.cur-in input{padding:9px 11px}
.price-editor summary{cursor:pointer;font-weight:800;color:var(--teal)}
.price-list .price-row{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--card)}
.price-list .price-row summary{cursor:pointer;font-weight:700}
.price-row-meta{color:var(--muted);font-weight:700;font-size:12.5px;margin-left:6px}

/* Compact course cards (smaller, denser) */
.course-grid{grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:14px}
.course-card{min-height:0;padding:16px;border-radius:16px;position:relative}
.course-card h3{font-size:16px;margin:12px 0 7px;line-height:1.2}
.course-card .course-intro{font-size:13px;line-height:1.5}
.course-code{padding:5px 9px;font-size:11px}
.course-card .btn{padding:8px 12px;font-size:13px}
.course-ribbon{position:absolute;top:12px;right:12px;font-size:10.5px;font-weight:900;letter-spacing:.04em;padding:4px 9px;border-radius:999px}
.course-ribbon.r-enrolled{background:#e6f0ff;color:#1e55c8}
.course-ribbon.r-completed{background:#dcfce7;color:#166534}

/* List (row) view */
.course-grid.is-list{display:flex;flex-direction:column;gap:10px}
.course-grid.is-list .course-card{flex-direction:row;align-items:center;flex-wrap:wrap;min-height:0;padding:14px 16px}
.course-grid.is-list .course-top{order:0;flex:0 0 auto}
.course-grid.is-list h3{order:1;flex:1;margin:0 14px;font-size:15.5px}
.course-grid.is-list .course-intro{order:4;flex-basis:100%;margin-top:8px}
.course-grid.is-list .course-meta{order:2;margin:0 12px}
.course-grid.is-list .progress{order:5;flex-basis:100%}
.course-grid.is-list .course-status{order:6;flex-basis:100%}
.course-grid.is-list .course-details{order:7;flex-basis:100%}
.course-grid.is-list .course-open{order:3;width:auto;margin:0 0 0 auto}
.course-grid.is-list .course-ribbon{position:static;order:2;margin-left:8px}
@media(max-width:640px){.course-grid.is-list .course-card{flex-direction:column;align-items:stretch}.course-grid.is-list h3{margin:8px 0}.course-grid.is-list .course-open{width:100%}}

/* ---- Restore card ---- */
.restore-card{border:1px solid #f3c9c4}
.restore-card select{margin-bottom:12px}

/* ---- Login page refresh ---- */
.login-card-v2{width:min(430px,94vw);padding:34px 32px;border-radius:22px}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.login-mark{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,#f97316,#d94e0a);display:grid;place-items:center;color:#fff;font-weight:900;font-size:20px;box-shadow:0 8px 20px rgba(232,100,10,.3)}
.login-card-v2 .brand{font-size:22px;font-weight:800}
.login-card-v2 h1{font-size:26px;margin:6px 0 4px}
.login-sub{color:var(--muted);margin:0 0 18px;font-size:14px}
.login-form label{margin-top:12px}
.login-field{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.login-field input{border:0;border-radius:0}
.login-eye{width:46px;align-self:stretch;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:17px}
.login-submit{display:block;width:max-content;min-width:150px;margin:20px auto 4px;padding:10px 30px;border-radius:999px;font-size:14px}
.fee-note{display:block;margin-top:6px;font-size:12px;color:var(--muted);font-weight:600;max-width:520px;line-height:1.5}
.login-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;font-size:13.5px}
.login-links a{color:var(--o);font-weight:700}
.login-demo{margin-top:16px;font-size:11.5px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}

/* Mobile: keep inbox button compact */
@media(max-width:900px){.app{grid-template-columns:1fr}.top-btn{padding:0 10px}.top-btn span{margin:0}.content{padding:16px 12px 92px}.notif-overlay{padding:70px 12px 12px}.course-toolbar{gap:10px}}

/* =====================================================================
   V59 — Dashboard PULSE feed, 4-col scrollable shrunk candidate grid,
   compact activity logs, rounded top bar.
   ===================================================================== */

/* ---- Rounded, floating top bar (universal, both roles) ---- */
.top{margin:12px 16px;border:1px solid var(--softline);border-radius:20px;top:12px;box-shadow:0 8px 24px rgba(40,50,66,.07)}
@media(max-width:900px){.top{margin:8px 10px;border-radius:16px;top:8px}}
@media(prefers-color-scheme:dark){.top{border-color:#2d3a4e}}

/* ---- Candidate grid: shrink ~40%, fixed 4 columns, vertical scroll ---- */
.candidate-scroll{max-height:66vh;overflow-y:auto;overflow-x:hidden;padding:4px 8px 4px 4px;margin-top:2px;scrollbar-width:thin;scrollbar-color:#c3c9d2 transparent}
.candidate-scroll::-webkit-scrollbar{width:9px}
.candidate-scroll::-webkit-scrollbar-thumb{background:#c3c9d2;border-radius:20px;border:2px solid transparent;background-clip:content-box}
.candidate-scroll::-webkit-scrollbar-track{background:transparent}
.candidate-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.candidate-card{padding:10px 8px;border-radius:13px}
.candidate-avatar-wrap,.candidate-avatar{width:48px;height:48px}
.candidate-avatar{border-width:3px;box-shadow:0 0 0 3px rgba(244,199,68,.12)}
.candidate-avatar.initials{font-size:15px}
.candidate-avatar-wrap{margin:0 auto 8px}
.presence{width:12px;height:12px;right:2px;bottom:3px;border-width:2px}
.review-dot{width:19px;height:19px;font-size:11px;border-width:3px}
.candidate-card h3{font-size:12.5px;margin:3px 0 1px;line-height:1.2}
.candidate-card p.muted{font-size:10.5px;margin:1px 0}
.candidate-card small{min-height:0;font-size:10px;line-height:1.35}
.candidate-meta{gap:6px;margin:6px 0}
.candidate-meta span{font-size:10.5px}
.status-pill{font-size:9px;padding:3px 7px}
.candidate-actions{gap:4px;margin-top:8px}
.candidate-actions .btn{padding:5px 7px;font-size:10px;border-radius:8px}
@media(max-width:1200px){.candidate-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.candidate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.candidate-scroll{max-height:none;overflow:visible}}

/* ---- PULSE / Recent Activity feed ---- */
.pulse-eyebrow{color:var(--o);letter-spacing:.22em}
.pulse-card .section-head.compact{margin-bottom:14px}
.pulse-feed{position:relative;display:flex;flex-direction:column}
.pulse-item{display:flex;gap:14px;position:relative;padding-bottom:18px}
.pulse-item:last-child{padding-bottom:0}
.pulse-item:not(:last-child)::before{content:"";position:absolute;left:19px;top:42px;bottom:2px;width:2px;background:var(--line)}
.pulse-dot{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;background:var(--pc,#3b9bf5);box-shadow:0 6px 16px rgba(20,30,50,.16);position:relative;z-index:1}
.pulse-body{padding-top:2px;min-width:0}
.pulse-body p{margin:0;font-size:14px;line-height:1.35;color:var(--ink)}
.pulse-body b{font-weight:800}
.pulse-body small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.pulse-detail{color:var(--muted)}
/* Compact variant for the full logs page */
.pulse-full{max-height:none}
.pulse-full .pulse-item{padding-bottom:12px}
.pulse-full .pulse-item:not(:last-child)::before{top:36px;left:16px}
.pulse-full .pulse-dot{width:34px;height:34px;font-size:13px}
.pulse-full .pulse-body p{font-size:13px}
.pulse-full .pulse-body small{font-size:11px}
@media(prefers-color-scheme:dark){.pulse-body p{color:#eef2f8}}

/* V60 — remove hero envelope icon (universal) */
.hero-mail{display:none!important}

/* =====================================================================
   V60 — Candidate: dark-orange enrol switch, spaced ribbon/switch,
   shorter/denser course cards, shrunk payment cards.
   ===================================================================== */

/* Enrolled toggle -> dark orange (theme) */
.enroll-switch input:checked+span{background:#d94e0a}
.enroll-switch span{width:48px;height:27px}
.enroll-switch span:after{width:21px;height:21px}
.enroll-switch input:checked+span:after{transform:translateX(21px)}

/* Ribbon + switch stacked in a spaced corner */
.course-corner{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;z-index:2}
.course-card .course-ribbon{position:static;top:auto;right:auto}

/* Shorter, denser course cards (grid packs more columns) */
.course-grid{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px}
.course-card{padding:14px}
.course-card h3{font-size:15px;margin:10px 0 6px;padding-right:60px;line-height:1.2}
.course-card .course-intro{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;line-height:1.45;margin:0 0 8px;flex:0 0 auto}
.course-card .course-meta{margin:8px 0;font-size:12px}
.course-card .course-status{margin:8px 0}
.course-card .course-details{margin-top:8px;padding-top:8px}
.course-card .course-details summary{font-size:12.5px}
.course-card .course-open{margin-top:auto}
.course-card .progress{margin-top:8px}

/* Shrink candidate payment page cards */
.payment-banner{padding:20px 24px;border-radius:20px;margin-bottom:20px}
.payment-banner small{font-size:13px;margin-bottom:6px}
.payment-banner strong{font-size:clamp(26px,4vw,40px)}
.payment-verification-state{font-size:14px}
.candidate-payment-grid{gap:16px;margin:16px 0 22px}
.candidate-payment-card{padding:18px;border-radius:18px}
.payment-method-visual{width:92px;height:92px;border-width:5px;margin:0 auto 14px}
.payment-method-visual span{font-size:38px}
.candidate-payment-card h2{font-size:18px;margin:0 0 6px}
.candidate-payment-card>p{font-size:13px;min-height:0}
.candidate-payment-card summary{font-size:13px}
.candidate-payment-card pre{font-size:12.5px;padding:10px}
.payment-how{padding:18px 22px}
.payment-how h2{font-size:17px}
.payment-how p{font-size:14px;line-height:1.55}

/* ================= V60 — message threads, attachments, lightbox ================= */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.page-head h1{margin:0}
.msg-list .message{cursor:pointer;border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin-bottom:12px;transition:.18s;background:var(--card)}
.msg-list .message:hover{border-color:var(--teal);box-shadow:0 8px 24px rgba(20,35,30,.08);transform:translateY(-1px)}
.msg-list .message.mine{background:#e8f7f2}
.message-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.message-top small{color:var(--muted)}

/* Attachment chips + image thumbnails */
.msg-att{display:inline-flex;margin-top:8px;max-width:100%}
.msg-att.img{border-radius:14px;overflow:hidden;border:1px solid var(--line);cursor:zoom-in;line-height:0}
.msg-att.img img{display:block;max-width:230px;max-height:200px;width:auto;height:auto;object-fit:cover;transition:.2s}
.msg-att.img:hover img{transform:scale(1.03)}
.msg-att.file{align-items:center;gap:9px;background:var(--bg,#f4f7f5);border:1px solid var(--line);border-radius:999px;padding:8px 15px;color:var(--teal);font-weight:700;text-decoration:none;max-width:280px}
.msg-att.file:hover{background:#e5f7f1}
.msg-att.file .att-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item .msg-att,.support-body .msg-att{margin-top:10px}

/* Compose attach button (paperclip) */
.attach-btn{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:19px;cursor:pointer;color:#556;transition:.18s}
.attach-btn:hover{border-color:var(--teal);color:var(--teal)}
.attach-btn.has-file{background:var(--teal);border-color:var(--teal);color:#fff}
.file-field{display:flex;flex-direction:column;gap:6px}
.file-field .file-note{font-size:12.5px;color:var(--teal);font-weight:700}
.tag-broadcast{display:inline-block;background:#eef2ff;color:#3f51b5;border-radius:999px;font-size:10px;font-weight:800;padding:2px 8px;margin-left:6px;vertical-align:middle}

/* Support actions row */
.support-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.support-actions .support-reply{margin:0}
.support-actions .support-reply summary{cursor:pointer;font-weight:800;color:var(--teal)}

/* Admin conversation thread modal */
.thread-overlay{position:fixed;inset:0;background:rgba(12,24,22,.72);z-index:10000;display:none;align-items:center;justify-content:center;padding:22px}
.thread-overlay.open{display:flex}
.thread-panel{width:min(760px,96vw);height:min(820px,90vh);background:#fbfaf7;border-radius:28px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 90px rgba(0,0,0,.35)}
.thread-head{background:linear-gradient(135deg,#13876b,#08624f);color:#fff;padding:22px 26px;display:flex;align-items:center;gap:16px}
.thread-head h2{margin:0 0 3px;font-size:22px}
.thread-head p{margin:0;opacity:.9;font-size:13px}
.thread-logo{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:24px;flex:none}
.thread-body{flex:1;overflow:auto;padding:22px;background:var(--bg,#fbfaf7)}
.thread-compose{display:flex;gap:10px;align-items:center;padding:16px 20px;border-top:1px solid var(--line);background:#fff}
.thread-compose .thread-subject{max-width:190px;border:1px solid var(--line);border-radius:999px;padding:12px 16px}
.thread-compose .thread-input{flex:1;border:2px solid var(--teal);border-radius:999px;padding:13px 18px}
@media(max-width:640px){.thread-compose{flex-wrap:wrap}.thread-compose .thread-subject{max-width:none;flex:1 1 100%;order:-1}}

/* Fullscreen image lightbox */
.img-lightbox{position:fixed;inset:0;background:rgba(8,12,14,.9);z-index:10050;display:none;align-items:center;justify-content:center;padding:34px;cursor:zoom-out;animation:lbIn .18s ease}
.img-lightbox.open{display:flex}
.img-lightbox img{max-width:94vw;max-height:88vh;border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.6);cursor:default}
.img-lightbox .lb-close{position:absolute;top:22px;right:26px;width:52px;height:52px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:32px;cursor:pointer}
.img-lightbox .lb-close:hover{background:rgba(255,255,255,.3)}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
:root[data-theme=dark] .msg-list .message.mine,:root[data-theme=dark] .chat-item.mine{background:#123}
:root[data-theme=dark] .attach-btn{background:#211a15}
:root[data-theme=dark] .thread-panel{background:#1b1510}
:root[data-theme=dark] .thread-compose{background:#211a15}

/* V63 — make the top-bar theme toggle actually switch the portal theme
   (the base stylesheet only reacted to the OS setting via prefers-color-scheme). */
:root[data-theme=dark]{--bg:#0f172a;--card:#182235;--ink:#f8fafc;--muted:#b6c0cf;--line:#2d3a4e;--softline:#2d3a4e}
:root[data-theme=dark] body{background:var(--bg);color:var(--ink)}
:root[data-theme=dark] .top,:root[data-theme=dark] .mobile-nav{background:#151f31}
:root[data-theme=dark] input,:root[data-theme=dark] textarea,:root[data-theme=dark] select{background:#101827;color:#fff}
:root[data-theme=dark] .top .pill{background:#263248}
:root[data-theme=dark] .report,:root[data-theme=dark] .notice{background:#2a1a0a}
:root[data-theme=dark] .auth-card,:root[data-theme=dark] .login-card{background:#182235}
:root[data-theme=dark] .top-icon,:root[data-theme=dark] .top-btn{background:#182235;color:#f8fafc}
/* explicit light mode (lets a candidate on a dark OS force light) */
:root[data-theme=light]{--bg:#f5f7fb;--card:#fff;--ink:#20242b;--muted:#6b7280;--line:#e5e7eb;--softline:#e6ddcf}
:root[data-theme=light] body{background:var(--bg);color:var(--ink)}
:root[data-theme=light] .top,:root[data-theme=light] .mobile-nav{background:#fff}
:root[data-theme=light] input,:root[data-theme=light] textarea,:root[data-theme=light] select{background:#fff;color:var(--ink)}
:root[data-theme=light] .top .pill{background:#f3f4f6}
:root[data-theme=light] .report,:root[data-theme=light] .notice{background:#fff7ed}

/* V63 — SVG navigation icons (sidebar / top bar / mobile), a little larger */
.side a{gap:12px}
.side .nav-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:26px;height:26px}
.side .nav-ic svg{width:24px;height:24px;display:block}
.side .nav-tx{flex:1 1 auto}
.side a .nav-count{margin-left:auto}
.top-icon{width:50px;height:50px}
.top-icon svg{width:23px;height:23px;display:block;margin:0 auto}
.top-btn .tb-ic{display:inline-flex;align-items:center;vertical-align:middle;margin-right:2px}
.top-btn .tb-ic svg{width:22px;height:22px;display:block}
.mobile-nav svg{width:24px;height:24px;display:block;margin:0 auto}
.hse-ic{stroke:currentColor}

/* V65/V67 — candidate directory tiles (a touch larger, with info) + profile modal */
.candidate-grid-mini{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
.candidate-grid-mini .candidate-card.mini{padding:16px 12px 13px;border-radius:16px;text-align:center;cursor:pointer;min-height:0}
.candidate-grid-mini .candidate-card.mini:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(15,23,42,.12);border-color:#8cc9b8}
.candidate-grid-mini .candidate-avatar-wrap,.candidate-grid-mini .candidate-avatar{width:70px;height:70px}
.candidate-grid-mini .candidate-avatar{border-width:4px;box-shadow:0 0 0 4px rgba(244,199,68,.12)}
.candidate-grid-mini .candidate-avatar.initials{font-size:20px}
.candidate-grid-mini .candidate-avatar-wrap{margin:0 auto 9px}
.candidate-grid-mini .presence{width:15px;height:15px;right:3px;bottom:5px;border-width:2px}
.candidate-grid-mini .candidate-card h3{font-size:13.5px;line-height:1.25;margin:2px 0 2px;min-height:0}
.candidate-grid-mini .cc-email{display:block;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:8px}
.candidate-grid-mini .cc-foot{display:flex;align-items:center;justify-content:center;gap:8px}
.candidate-grid-mini .cc-certs{font-size:11px;color:var(--muted);font-weight:700}
.candidate-grid-mini .status-pill{font-size:9px;padding:3px 8px}
.cm-enroll{text-align:left;margin:14px 0 4px;border-top:1px solid var(--line);padding-top:12px}
.cm-enroll h4{margin:0 0 8px;font-size:14px}
.cm-enr-row{margin-bottom:10px}
.cm-enr-top{display:flex;align-items:center;gap:6px;font-size:12.5px;flex-wrap:wrap;margin-bottom:5px}
.cm-enr-top b{color:var(--teal)}
.cm-enr-top .status-pill{margin-left:auto;font-size:9px;padding:3px 8px}
.cm-enr-row .progress{margin:0}
.cm-enr-row small{color:var(--muted);font-size:11px}
.cand-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(12,24,22,.6)}
.cand-modal[hidden]{display:none}
.cand-modal-card{position:relative;width:min(400px,96vw);background:var(--card);border-radius:22px;padding:30px 26px 24px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:notifIn .18s ease}
.cand-close{position:absolute;top:12px;right:14px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(0,0,0,.06);color:var(--muted);font-size:24px;cursor:pointer}
.cand-close:hover{background:rgba(0,0,0,.12)}
.cand-modal-avatar{width:96px;height:96px;margin:0 auto 14px;border-radius:50%;overflow:hidden;border:5px solid #f4c744;box-shadow:0 0 0 5px rgba(244,199,68,.12);display:grid;place-items:center;background:#e7f7f1}
.cand-modal-avatar img{width:100%;height:100%;object-fit:cover}
.cand-modal-avatar .cm-initials{font-size:30px;font-weight:800;color:#11805f}
.cand-modal-card h2{margin:4px 0 2px}
.cand-modal-card .cm-contact{color:var(--muted);margin:8px 0 4px;line-height:1.5}
.cand-modal-card .candidate-meta{justify-content:center}
.cand-modal-card .candidate-actions{justify-content:center;margin-top:16px}
@media(max-width:700px){.candidate-grid-mini{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}

/* V66 — final assessment + certificate wallet */
.assessment .badge{background:#e5f7f1;color:#0b795f}
.assess-form{margin-top:12px}
.assess-q{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:0 0 12px;background:var(--card)}
.assess-q legend{font-weight:800;color:var(--ink);padding:0 6px;display:flex;align-items:center;gap:8px}
.assess-n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--teal,#0b8064);color:#fff;font-size:12px;flex:0 0 auto}
.assess-opt{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:9px;cursor:pointer;font-weight:600}
.assess-opt:hover{background:#f2f7f5}
.assess-opt input{width:auto;margin:0}
.assess-submit{margin-top:6px}
.assess-pass{text-align:center}
.assess-pass-badge{width:64px;height:64px;border-radius:50%;background:#1a9d5a;color:#fff;display:grid;place-items:center;font-size:32px;margin:4px auto 10px;box-shadow:0 10px 24px rgba(26,157,90,.35)}
.assess-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.cred-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.cred-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 12px 30px rgba(15,23,42,.06)}
.cred-top{display:flex;align-items:center;gap:12px}
.cred-seal{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#123a6b,#0f2c50);color:#f4d06a;display:grid;place-items:center;font-weight:900;flex:0 0 auto}
.cred-title{flex:1;min-width:0}
.cred-title h3{margin:0;font-size:16px;line-height:1.25}
.cred-title small{color:var(--muted)}
.cred-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin:14px 0}
.cred-meta span{font-size:13px;color:#33404f}
.cred-meta b{display:block;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:800}
.cred-actions{display:flex;gap:8px;flex-wrap:wrap}
.cred-actions .btn{flex:1;min-width:110px}

/* V67 — admin course pricing cards, collapsible admin forms, enrollment grid */
.admin-fold{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:6px 16px;margin-bottom:22px;box-shadow:0 8px 28px rgba(15,23,42,.05)}
.admin-fold>summary{cursor:pointer;font-weight:800;color:var(--teal);padding:12px 4px;list-style:none}
.admin-fold>summary::-webkit-details-marker{display:none}
.admin-fold>summary:before{content:"▸ ";color:var(--o)}
.admin-fold[open]>summary:before{content:"▾ "}
.admin-fold .two{margin:6px 0 14px}
.admin-fold .card{padding:16px}
.course-admin-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 16px}
.course-admin-toolbar .filter-chips{margin:0}
.course-admin-toolbar .filter-chips button{padding:7px 13px;font-size:12.5px}
.price-cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.price-card{border:1px solid var(--line);border-radius:14px;padding:12px 12px 10px;background:var(--card);display:flex;flex-direction:column;gap:4px;transition:.15s}
.price-card.is-inactive{opacity:.62;background:repeating-linear-gradient(135deg,var(--card),var(--card) 8px,rgba(0,0,0,.03) 8px,rgba(0,0,0,.03) 16px)}
.price-card .pc-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.price-card .pc-toggle{margin:0}
.price-card .pc-toggle .enroll-switch span{width:42px;height:24px}
.price-card .pc-toggle .enroll-switch span:after{width:18px;height:18px}
.price-card .pc-toggle input:checked+span:after{transform:translateX(18px)}
.price-card .pc-code{font-size:10.5px;font-weight:800;color:var(--muted);letter-spacing:.04em}
.price-card .pc-title{font-size:13.5px;margin:0;line-height:1.25}
.price-card .pc-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:2px}
.price-card .pc-base{font-family:Georgia,serif;font-weight:800;color:#0b8064;font-size:15px}
.price-card .pc-enroll{font-size:10.5px;color:var(--muted);font-weight:700}
.price-card .price-editor{margin-top:6px}
.price-card .price-editor summary{font-size:12px;color:var(--teal);cursor:pointer;font-weight:800}
.price-card .cur-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0}
.price-card .cur-in input{padding:7px 8px;font-size:12px}
.enroll-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.enroll-card{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--card)}
.enroll-card .ec-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.enroll-card .ec-course{color:var(--muted);font-size:12.5px;margin:6px 0 8px}
.enroll-card .progress{margin:0 0 10px}
.enroll-card .ec-form{display:flex;gap:8px;align-items:center}
.enroll-card .ec-form .mini{width:80px}
hr.soft{border:0;border-top:1px solid var(--line);margin:18px 0 12px}

/* V68 — gated module stepper, module content + exams, final exam, letter */
.module-list{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.module-item{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px rgba(15,23,42,.05);overflow:hidden}
.module-item>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:16px 18px}
.module-item>summary::-webkit-details-marker{display:none}
.module-item.locked{opacity:.7}
.module-item.locked .mod-head{display:flex;align-items:center;gap:14px;padding:16px 18px}
.mod-num{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--teal,#0b8064);color:#fff;display:grid;place-items:center;font-weight:800}
.module-item.locked .mod-num{background:#9aa4ae}
.module-item.passed .mod-num{background:#1a9d5a}
.mod-h{flex:1;min-width:0}
.mod-h b{display:block;font-size:15.5px}
.mod-h small{color:var(--muted)}
.mod-badge{flex:0 0 auto;font-size:11px;font-weight:800;border-radius:999px;padding:5px 12px}
.mod-badge.ok{background:#e2f5ea;color:#1a7a45}
.mod-badge.go{background:#fff0e6;color:#c2560c}
.mod-lock{font-size:18px}
.mod-content{padding:2px 18px 8px}
.mod-intro{color:#33404f;line-height:1.65}
.mod-figure{text-align:center;margin:12px 0;padding:14px;background:#f6f9fc;border:1px solid var(--line);border-radius:14px}
.mod-svg{width:min(360px,100%);height:auto}
.mod-figure small{display:block;color:var(--muted);margin-top:6px;font-size:12px}
.mod-content h4{margin:14px 0 6px}
.mod-points{margin:0 0 6px;padding-left:18px;line-height:1.6}
.mod-points li{margin:4px 0}
.mod-legend{display:flex;flex-wrap:wrap;gap:8px}
.mod-sym{background:var(--bg,#f4f7f5);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12.5px}
.mod-sym b{color:#c2560c;font-size:14px}
.mod-summary{margin-top:10px;background:#eef7f3;border-left:3px solid var(--teal,#0b8064);border-radius:0 10px 10px 0;padding:10px 14px}
.module-exam{border-top:1px solid var(--line);margin-top:10px;padding:14px 18px 18px;background:#fbfdfc}
.q-type{font-size:9.5px;font-weight:800;border-radius:999px;padding:2px 7px;vertical-align:middle;margin-left:6px}
.q-mcq{background:#e6f1fb;color:#1663a8}.q-tf{background:#eef7ee;color:#2f7d32}.q-fill{background:#fff0e6;color:#c2560c}
.assess-fill{max-width:320px}
.final-exam.is-locked{opacity:.85}
.final-locked{background:#f6f3ec;border:1px dashed #d8ccb6;border-radius:12px;padding:16px;text-align:center;font-weight:700;color:#7a6a4a}
.assess-pass.hold{background:#fff8ec;border:1px solid #f0dca0}
.assess-pass-badge.hold{background:#e39a12;box-shadow:0 10px 24px rgba(227,154,18,.35)}
:root[data-theme=dark] .mod-figure{background:#141b12}
:root[data-theme=dark] .module-exam{background:#161b16}
:root[data-theme=dark] .mod-summary{background:#12271f}

/* V71 — module slide decks (hero) + mixed quiz + results review */
.module-inner{padding:2px 4px 12px}
.mod-deck{margin:6px 0 4px}
.slide{display:none;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;min-height:236px;box-shadow:0 8px 24px rgba(15,23,42,.05);animation:slideIn .25s ease}
.slide.active{display:block}
@keyframes slideIn{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}
.slide-eyebrow{font-size:11px;font-weight:900;letter-spacing:.16em;color:var(--o,#e8640a)}
.slide-h{font-family:Georgia,serif;font-size:23px;margin:6px 0 6px;color:var(--ink)}
.slide-h .slide-ic{color:var(--o,#e8640a)}
.slide-sub{color:var(--teal,#0b8064);font-weight:800;margin-bottom:8px}
.slide-copy{line-height:1.65;color:#33404f}
.slide-ul{margin:6px 0;padding-left:18px;line-height:1.7}
.slide-ul li{margin:4px 0}
.slide-muted{color:var(--muted);font-size:13px}
.slide-hero{background:linear-gradient(160deg,#0f3a6b,#123a4d);color:#eaf2f8;border:0}
.slide-hero .slide-h{color:#fff}.slide-hero .slide-copy{color:#cfe0ee}.slide-hero .slide-sub{color:#9fc0e6}
.slide-figure{text-align:center;margin:8px 0;padding:14px;background:#f6f9fc;border:1px solid var(--line);border-radius:14px}
.slide-figure .mod-svg{width:min(340px,100%);height:auto}
.dodont{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.dd{border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.dd b{display:block;margin-bottom:6px}
.dd.do{background:#eef7f0}.dd.do b{color:#1a7a45}
.dd.dont{background:#fdecea}.dd.dont b{color:#b3261e}
.dd ul{margin:0;padding-left:16px;line-height:1.6;font-size:13.5px}
.deck-bar{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.deck-btn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:9px 18px;font-weight:800;cursor:pointer}
.deck-btn.primary{background:var(--teal,#0b8064);color:#fff;border-color:var(--teal,#0b8064)}
.deck-btn.primary[data-deck-begin]{background:var(--o,#e8640a);border-color:var(--o,#e8640a)}
.deck-btn:disabled{opacity:.4;cursor:default}
.deck-dots{display:flex;gap:6px;flex:1;justify-content:center;flex-wrap:wrap}
.deck-dot{width:9px;height:9px;border-radius:50%;border:0;background:#cdd6e0;cursor:pointer;padding:0;transition:.15s}
.deck-dot.active{background:var(--o,#e8640a);transform:scale(1.25)}
.q-body{flex:1}
.assess-q legend{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.exam-result{border-top:5px solid #1a9d5a}
.exam-result.fail{border-top-color:#d9822b}
.er-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:6px}
.er-ring{--pct:0;width:84px;height:84px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:conic-gradient(#1a9d5a calc(var(--pct)*1%),#e6ebf1 0);font-weight:900}
.exam-result.fail .er-ring{background:conic-gradient(#d9822b calc(var(--pct)*1%),#e6ebf1 0)}
.er-ring span{width:64px;height:64px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:18px}
.er-badge{display:inline-block;font-size:12px;font-weight:800;border-radius:999px;padding:4px 12px;background:#e2f5ea;color:#1a7a45}
.exam-result.fail .er-badge{background:#fdecdd;color:#a8571a}
.er-copy h2{margin:6px 0 2px}
.er-list{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.er-q{border:1px solid var(--line);border-radius:12px;padding:12px 14px;border-left:4px solid #1a9d5a}
.er-q.bad{border-left-color:#e2574c}
.er-q-top{font-weight:700;display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;line-height:1.5}
.er-mark{font-weight:900;color:#1a9d5a}
.er-q.bad .er-mark{color:#e2574c}
.er-qn{color:var(--muted);font-weight:800}
.er-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.er-opt{font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:#4d5b68}
.er-opt em{font-style:normal;font-weight:800;margin-left:6px;font-size:10.5px;opacity:.85}
.er-opt.correct{background:#e6f7ee;border-color:#9bdcb6;color:#137a44}
.er-opt.chosen-wrong{background:#fdeae8;border-color:#f2b6ae;color:#b3261e}
.er-actions{display:flex;gap:10px;flex-wrap:wrap}
:root[data-theme=dark] .slide-figure{background:#141b12}
:root[data-theme=dark] .dd.do{background:#12271b}
:root[data-theme=dark] .dd.dont{background:#2a1512}
:root[data-theme=dark] .er-ring span{background:#182235}
@media(max-width:640px){.dodont{grid-template-columns:1fr}}

/* V73 — Corporate navy/blue/gold palette (top-bar palette switch) */
#paletteToggle.active{color:#0A74D9;border-color:#0A74D9}
:root[data-palette=corporate]{--o:#0A74D9;--teal:#0A74D9;--nav:#0B1F4D;--ink:#13294B;--muted:#4A5B70;--bg:#F6F8FB;--card:#FFFFFF;--line:#D9E3F0;--softline:#E8EEF5;--green:#00A86B;--red:#E63946;--gold:#D4A72C}
:root[data-palette=corporate] body{background:var(--bg);color:var(--ink)}
:root[data-palette=corporate] .app{background:linear-gradient(135deg,#eef3fb 0%,#f6f8fb 45%,#fff 100%)}
:root[data-palette=corporate] .side{background:linear-gradient(180deg,#0B1F4D,#08162F)}
:root[data-palette=corporate] .side a{color:#e7eefb}
:root[data-palette=corporate] .side a:hover,:root[data-palette=corporate] .side a.active{background:#fff;color:#0A74D9}
:root[data-palette=corporate] .side a.active{box-shadow:inset 3px 0 0 #D4A72C}
:root[data-palette=corporate] .side .logout-link{background:rgba(230,57,70,.9);color:#fff}
:root[data-palette=corporate] .brand-mark{background:linear-gradient(135deg,#2D9CFF,#0A74D9)}
:root[data-palette=corporate] .top-user{background:#0A74D9}
:root[data-palette=corporate] .top-signout{background:#E63946}
:root[data-palette=corporate] .btn{background:#0A74D9}
:root[data-palette=corporate] .btn:hover{filter:brightness(.92)}
:root[data-palette=corporate] .btn.secondary{background:#0B1F4D}
:root[data-palette=corporate] .btn.danger{background:#E63946}
:root[data-palette=corporate] .eyebrow{color:#0A74D9}
:root[data-palette=corporate] .metric b{color:#0A74D9}
:root[data-palette=corporate] .hero-copy h1,:root[data-palette=corporate] h1,:root[data-palette=corporate] h2{color:#13294B}
:root[data-palette=corporate] .progress i,:root[data-palette=corporate] .bar i,:root[data-palette=corporate] .progress.large i{background:linear-gradient(90deg,#0A74D9,#2D9CFF)}
:root[data-palette=corporate] .filter-chips button.active,:root[data-palette=corporate] .filter-chips button:hover,:root[data-palette=corporate] .course-cats button.active,:root[data-palette=corporate] .course-filters button.active,:root[data-palette=corporate] .course-filters button:hover{background:#0A74D9;color:#fff;border-color:#0A74D9}
:root[data-palette=corporate] .course-card:hover{border-color:#2D9CFF;box-shadow:0 10px 30px rgba(11,31,77,.15)}
:root[data-palette=corporate] .course-cat.cat-training{background:#eaf3ff;color:#0A74D9}
:root[data-palette=corporate] .course-cat.cat-inspection{background:#e9f7ff;color:#0b6fb8}
:root[data-palette=corporate] .course-cat.cat-iso{background:#fbf3dd;color:#96731a}
:root[data-palette=corporate] .status-active{background:#E8F8F1;color:#00805A}
:root[data-palette=corporate] .status-pending{background:#FFF8E1;color:#8a6400}
:root[data-palette=corporate] .status-suspended{background:#FDECEC;color:#b3261e}
:root[data-palette=corporate] .cp-inline .cp-amount,:root[data-palette=corporate] .pc-base{color:#0A74D9}
/* corporate + dark */
:root[data-palette=corporate][data-theme=dark]{--bg:#08111F;--card:#13294B;--line:#25476E;--softline:#25476E;--ink:#F5F7FA;--muted:#B8C5D3;--o:#2D9CFF;--teal:#2D9CFF;--gold:#D4A72C;--nav:#0B1F4D}
:root[data-palette=corporate][data-theme=dark] body{background:#08111F;color:#F5F7FA}
:root[data-palette=corporate][data-theme=dark] .app{background:#08111F}
:root[data-palette=corporate][data-theme=dark] .side{background:linear-gradient(180deg,#0B1F4D,#08111F)}
:root[data-palette=corporate][data-theme=dark] .top,:root[data-palette=corporate][data-theme=dark] .mobile-nav{background:#0B1F4D}
:root[data-palette=corporate][data-theme=dark] .card{background:#13294B;border-color:#25476E}
:root[data-palette=corporate][data-theme=dark] input,:root[data-palette=corporate][data-theme=dark] textarea,:root[data-palette=corporate][data-theme=dark] select{background:#0d1e36;color:#F5F7FA;border-color:#25476E}
:root[data-palette=corporate][data-theme=dark] .btn{background:#0A74D9}
:root[data-palette=corporate][data-theme=dark] .top-icon,:root[data-palette=corporate][data-theme=dark] .top-btn{background:#13294B;color:#F5F7FA;border-color:#25476E}

/* V75 — enriched module slides: charts, steps, symbol grid, question preview */
.chart-svg{width:min(430px,100%)!important;height:auto}
.slide-ul.obj li,.slide-ul.roles li{margin:6px 0}
.slide-steps{counter-reset:st;list-style:none;margin:8px 0;padding:0}
.slide-steps li{position:relative;padding:10px 12px 10px 46px;margin:8px 0;background:#f6f9fc;border:1px solid var(--line);border-radius:12px;line-height:1.55}
.slide-steps li:before{counter-increment:st;content:counter(st);position:absolute;left:10px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--teal,#0b8064);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px}
.sym-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:8px}
.sym-cell{display:flex;align-items:center;gap:8px;background:#f6f9fc;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12.5px;color:#4d5b68}
.sym-cell b{font-size:18px;color:#c2560c;line-height:1;width:22px;text-align:center}
.qpv{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.qpv-q{border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:var(--card)}
.qpv-top{font-weight:700;display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;line-height:1.5}
.qpv-n{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:#0B1F4D;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800}
.qpv-opts{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.qpv-opt{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:5px 11px;color:#5a6675}
.qpv-opt.correct{background:#e6f7ee;border-color:#9bdcb6;color:#137a44;font-weight:800}
:root[data-theme=dark] .slide-steps li,:root[data-theme=dark] .sym-cell{background:#141b12}

/* V76 — brand logo images (sidebar/top), theme-swapped */
.side-brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.side-logo{height:34px;width:auto;display:block}
.side-sub{color:#d7f1e9;letter-spacing:.06em;font-size:11px;font-weight:700}
.top-brand{display:flex;align-items:center;gap:12px}
.brand-logos .lg{height:34px;width:auto;display:block}
.brand-logos .lg-blue{display:none}
:root[data-palette=corporate] .brand-logos .lg-orange{display:none}
:root[data-palette=corporate] .brand-logos .lg-blue{display:block}
.top-sub{display:block;font-size:10px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;font-weight:800}
:root[data-palette=corporate] .side-sub{color:#cfe0f2}
@media(max-width:900px){.top-sub{display:none}}

/* ===== V77 mobile aesthetic polish ===== */
@media(max-width:600px){
  .content{padding:14px 11px 94px}
  .content>section{margin-bottom:16px}
  h1{font-size:24px}h2{font-size:19px}h3{font-size:16px}
  .section-head{flex-wrap:wrap;gap:8px}.section-head h2{font-size:18px}
  /* dashboard metric + cards */
  .card{padding:14px;border-radius:14px}
  .metrics{grid-template-columns:repeat(2,1fr)!important;gap:10px}
  .metric{min-height:auto!important;padding:15px}
  .metric b{font-size:27px!important}
  /* course catalogue cards */
  .course-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;gap:10px}
  .course-card{padding:12px;border-radius:14px}
  .course-card h3{font-size:14px;line-height:1.3;margin:6px 0}
  .course-cat,.badge{font-size:10px;padding:3px 8px}
  .course-tags{gap:5px}
  .course-open{padding:9px 12px;font-size:13px}
  /* course-intro (opened course) */
  .ci-hero{padding:18px 15px}.ci-hero h1{font-size:24px}
  .ci-two{grid-template-columns:1fr}
  .ci-price{font-size:22px}.ci-fee{padding:14px}
  .ci-mod,.ci-card{padding:14px;border-radius:14px}
  .ci-topbar{gap:8px}
  /* slide decks + exams */
  .slide{padding:18px 15px;border-radius:16px}
  .slide-hero{padding:20px 16px}.slide-h{font-size:20px}
  .slide-sub,.slide-copy{font-size:14px}
  .slide-figure{margin:10px 0}
  .deck-bar{gap:8px}.deck-btn{padding:9px 13px;font-size:13px}
  .q-body{padding:14px}.q-mcq,.q-tf,.q-fill{font-size:14px}
  .exam-result{padding:16px}
  /* buttons */
  .btn{padding:10px 13px;font-size:13px}
  .btn.small{padding:6px 9px;font-size:11px}
  /* messages / inbox chat -> full-screen sheet, tighter bubbles */
  .inbox-panel{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
  .inbox-head{padding:14px 16px}.inbox-head h2{font-size:18px}
  .inbox-logo{width:44px;height:44px;font-size:20px}
  .inbox-close{width:44px;height:44px;font-size:28px}
  .inbox-body{padding:12px}
  .chat-item,.empty-chat{padding:12px 14px;border-radius:14px;margin-bottom:9px}
  .chat-item.mine{margin-left:8%}
  .chat-item p{font-size:14px;margin:5px 0;line-height:1.5}
  .inbox-compose{padding:11px 13px;gap:8px}
  .inbox-compose input{padding:11px 15px}
  .send-round{width:46px;height:46px;font-size:18px;height:46px}
  .message{padding:11px 0}.message p{font-size:14px}
  /* certificate wallet + tables */
  .cc-certs{gap:10px}
  .table th,.table td{padding:9px;font-size:13px}
  /* top bar spacing */
  .top{gap:8px}
}
@media(max-width:380px){
  .course-grid{grid-template-columns:1fr!important}
  .metric b{font-size:24px!important}
}

/* ===== V78 Software page + red sidebar button ===== */
.side .soft-link{background:rgba(166,25,25,.92);color:#fff;font-weight:800;margin-top:6px}
.side .soft-link:hover,.side .soft-link.active{background:#a61919;color:#fff;box-shadow:0 7px 20px rgba(166,25,25,.35)}
.mobile-nav{grid-template-columns:repeat(6,1fr)!important}

.sw-hero{display:flex;align-items:center;gap:22px;justify-content:space-between;
  background:linear-gradient(115deg,#0f2f57 0%,#1f5fb0 78%,#2f7ad6 100%);
  color:#fff;border-radius:22px;padding:26px 30px;margin-bottom:22px;box-shadow:0 18px 46px rgba(15,47,87,.28);overflow:hidden}
.sw-hero-copy h1{margin:0 0 6px;font-size:30px}
.sw-hero-copy p{margin:0;max-width:640px;opacity:.92;line-height:1.5}
.sw-hero-art{opacity:.5;color:#fff;flex:0 0 auto}
.sw-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:24px}
.sw-card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 10px 30px rgba(15,23,42,.06);display:flex;flex-direction:column}
.sw-cap{height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff}
.sw-cap h3{margin:0;font-size:20px;font-weight:800}
.sw-glyph{display:grid;place-items:center}
.sw-mac .sw-cap{background:linear-gradient(160deg,#2b3140,#161a22)}
.sw-win .sw-cap{background:linear-gradient(160deg,#3b82f6,#1e5fd0)}
.sw-droid .sw-cap{background:linear-gradient(160deg,#57c777,#2fa457)}
.sw-ios .sw-cap{background:linear-gradient(160deg,#9aa2ad,#6f7681)}
.sw-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.sw-name{font-weight:800;font-size:16px;display:flex;align-items:center;gap:8px}
.sw-soon{background:#fff1e8;color:#c84f00;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:800}
.sw-note{margin:0;color:var(--muted);font-size:13px;line-height:1.5;min-height:38px}
.sw-btn{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  background:#0f2f57;color:#fff;border-radius:12px;padding:12px 14px;font-weight:800;text-decoration:none}
.sw-btn:hover{background:#123a6d}
.sw-btn-off{background:#eef0f4;color:#9aa3b2;cursor:not-allowed}
.sw-count{text-align:center;color:var(--muted);font-size:12px}
.sw-history{margin-top:6px}
.sw-eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--muted)}
@media(prefers-color-scheme:dark){.sw-btn-off{background:#233046;color:#7c8aa0}}
@media(max-width:960px){.sw-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .sw-hero{padding:20px 18px;border-radius:18px}.sw-hero-copy h1{font-size:23px}.sw-hero-art{display:none}
  .sw-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .sw-cap{height:110px}.sw-cap h3{font-size:16px}
  .mobile-nav small{font-size:9px}
}

/* ===== V79 course-flow + corporate palette fixes ===== */
/* (2) bottom-align every course card CTA */
.course-card{display:flex;flex-direction:column}
.course-cta{margin-top:auto;padding-top:12px}
.course-cta .course-open{width:100%}

/* (4/5) enroll flow pills + buttons on the course-intro page */
.ci-topleft{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.ci-enrolled-pill{display:inline-flex;align-items:center;gap:6px;background:#e7f7ee;color:#0f7a48;border:1px solid #bfe6d0;font-weight:800;border-radius:999px;padding:8px 14px;font-size:13px;white-space:nowrap}
.ci-enrolled-pill.lg{padding:10px 16px;font-size:14px}
.ci-enroll-btn{background:linear-gradient(135deg,var(--ci-o),var(--ci-o2));color:#fff;border:0;border-radius:999px;padding:11px 20px;font-weight:800;cursor:pointer;font-size:14px}
.ci-enroll-btn:hover{filter:brightness(1.05)}
.ci-enroll-form{margin:0}
.ci-start-btn.ci-enroll-btn{border-radius:14px;font-size:17px;padding:15px 34px}

/* (1) corporate (blue) palette — win over light/dark !important sidebar + kill leftover orange */
:root[data-palette=corporate] .side,
:root[data-palette=corporate][data-theme=light] .side,
:root[data-palette=corporate][data-theme=dark] .side{
  background:linear-gradient(180deg,#0B1F4D,#08162F)!important;color:#e7eefb!important}
:root[data-palette=corporate] .side a{color:#e7eefb!important}
:root[data-palette=corporate] .side a:hover,
:root[data-palette=corporate] .side a.active{background:#fff!important;color:#0A74D9!important}
:root[data-palette=corporate] .side .logout-link{background:rgba(230,57,70,.92)!important;color:#fff!important}
:root[data-palette=corporate] .side .soft-link{background:rgba(166,25,25,.92)!important;color:#fff!important}
:root[data-palette=corporate] .side .logout-link:hover,
:root[data-palette=corporate] .side .soft-link:hover{color:#fff!important}
/* switches / toggles -> blue */
:root[data-palette=corporate] .enroll-switch input:checked+span{background:#0A74D9!important}
/* progress bars -> blue */
:root[data-palette=corporate] .bar i,
:root[data-palette=corporate] .progress i,
:root[data-palette=corporate] .ci-progress-track i{background:linear-gradient(90deg,#0A74D9,#2D9CFF)!important}
/* (3) course-intro cream -> light blue via ci-* variables */
:root[data-palette=corporate]{--ci-o:#0A74D9;--ci-o2:#2D9CFF;--ci-o-soft:#eaf3fd;--ci-o-line:#cfe1f6;--ci-line:#dbe6f4;--ci-card:#ffffff;--ci-bg:#f4f8fd;--ci-ink:#13294B;--ci-muted:#4A5B70}
:root[data-palette=corporate] .ci-hero{background:linear-gradient(135deg,#eef4fc 0%,#ffffff 55%,#e9f1fb 100%)!important;border-color:#dbe6f4!important}
:root[data-palette=corporate][data-theme=dark] .ci-hero{background:linear-gradient(135deg,#0f2038,#0b1830)!important;border-color:#1b3a63!important}
:root[data-palette=corporate] .ci-stage-dot.done{box-shadow:0 0 0 5px rgba(10,116,217,.18)!important}
/* category badge orange -> blue */
:root[data-palette=corporate] .course-cat.cat-training{background:#e8f1fd!important;color:#0A5FB0!important}
/* misc accents that were hardcoded orange */
:root[data-palette=corporate] .metric b{color:#0A74D9}
:root[data-palette=corporate] .brand span{color:#2D9CFF}

/* ===== V81 LMS course player (outline + framed slide viewer) ===== */
.lms{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;align-items:start;margin-bottom:24px}
.lms-outline{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;box-shadow:0 8px 26px rgba(15,23,42,.05)}
.lms-back-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--o);font-size:13px;margin:2px 4px 10px}
.lms-course{display:flex;gap:12px;align-items:center;padding:0 4px 12px;border-bottom:1px solid var(--line);margin-bottom:8px}
.lms-thumb{width:56px;height:44px;border-radius:10px;background:linear-gradient(135deg,#1e3a8a,#2b6fe0);display:grid;place-items:center;color:#fff;flex:none}
.lms-course-meta{min-width:0;flex:1}.lms-course-meta b{display:block;font-size:14px;line-height:1.25}
.lms-course-meta small{color:var(--muted);font-size:12px}
.lms-course-meta .progress{height:7px;margin:6px 0 3px}
.lms-pct{font-weight:600}
.lms-modules{display:flex;flex-direction:column;gap:2px}
.lms-mod-head{display:flex;align-items:center;gap:10px;padding:11px 10px;border-radius:10px;font-weight:700;color:var(--ink);font-size:13.5px}
a.lms-mod-head:hover{background:#f2f6fc}
.lms-mod.open>.lms-mod-head{background:#e9f1ff;color:#1558d6}
.lms-mod-no{width:24px;height:24px;border-radius:7px;background:#eef2f7;display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}
.lms-mod.passed>.lms-mod-head .lms-mod-no{background:#dcfce7;color:#166534}
.lms-mod.open>.lms-mod-head .lms-mod-no{background:#1558d6;color:#fff}
.lms-mod-t{flex:1;min-width:0}
.lms-mod-mark{color:var(--muted);font-weight:800}
.lms-mod-head.locked{color:var(--muted);cursor:not-allowed}
.lms-mod.final .lms-mod-no{background:#fff1e8;color:#c84f00}
.lms-lessons{list-style:none;margin:1px 0 6px;padding:0 0 0 8px;border-left:2px solid var(--line);margin-left:20px}
.lms-lesson{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:12.8px;color:var(--muted)}
.lms-lesson:hover{background:#f3f6fb;color:var(--ink)}
.lms-lesson.active{background:#e8f0fe;color:#1558d6;font-weight:700}
.ll-ic{display:inline-flex;flex:none}.ll-t{flex:1;min-width:0}
.ll-ck{opacity:0;color:#16a34a;font-weight:900;flex:none}
.lms-lesson.done .ll-ck{opacity:1}
.lms-lesson.exam{color:#9a5a00;font-weight:700}
.lms-download{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:12px;border:1px solid var(--o);border-radius:11px;font-weight:800;color:var(--o)}
.lms-download:hover{background:var(--o);color:#fff}
/* stage */
.lms-stage{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;min-height:560px;box-shadow:0 10px 30px rgba(15,23,42,.06)}
.lms-topline{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--card)}
.lms-otoggle{display:none;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);cursor:pointer;place-items:center}
.lms-crumb{flex:1;font-size:14.5px;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lms-crumb b{color:var(--o);margin-right:6px}
.lms-top-actions{display:flex;gap:8px;flex:none}
.lms-complete{border:1px solid var(--o);color:var(--o);background:#fff;border-radius:10px;padding:9px 14px;font-weight:800;cursor:pointer;font-size:13px}
.lms-complete:hover{background:var(--o);color:#fff}
.lms-expand{width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;color:var(--ink)}
.lms-deck{position:relative;flex:1;padding:28px 32px;background:linear-gradient(180deg,#f7faff 0%,#ffffff 60%)}
.lms-deck .deck-track .slide{display:none}
.lms-deck .deck-track .slide.active{display:block;animation:lmsFade .35s ease}
@keyframes lmsFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lms-foot{display:flex;align-items:center;gap:18px;padding:14px 20px;border-top:1px solid var(--line);background:var(--card)}
.lms-nav{border:1px solid var(--line);background:#fff;border-radius:11px;padding:11px 18px;font-weight:800;cursor:pointer;color:var(--ink);font-size:13.5px;flex:none}
.lms-nav.primary{background:var(--o);color:#fff;border-color:var(--o)}
.lms-nav:disabled{opacity:.4;cursor:not-allowed}
.lms-prog{flex:1;text-align:center;min-width:0}
.lms-prog-tx{font-size:13px;color:var(--muted);font-weight:600}
.lms-prog-bar{height:7px;background:#e5e7eb;border-radius:20px;overflow:hidden;margin-top:6px}
.lms-prog-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--o),#fb923c);transition:width .3s}
.lms-tip{display:flex;align-items:center;gap:8px;padding:13px 20px;background:#eef4ff;color:#33507a;font-size:13px;border-top:1px solid var(--line)}
.lms-tip b{color:#1e3a5f}
.lms-exam{padding:24px;border-top:1px solid var(--line)}
.lms-empty{padding:70px 30px;text-align:center;margin:auto}
.lms-empty-ic{color:var(--o);display:flex;justify-content:center;margin-bottom:10px}
.lms-toast{position:fixed;left:50%;top:86px;transform:translateX(-50%) translateY(-10px);background:#b91c1c;color:#fff;padding:13px 20px;border-radius:12px;font-weight:700;font-size:13.5px;box-shadow:0 14px 34px rgba(0,0,0,.26);opacity:0;pointer-events:none;transition:.28s;z-index:99999;max-width:90vw}
.lms-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* expanded (fullscreen) stage */
body.lms-expanded{overflow:hidden}
.lms-stage.expanded{position:fixed;inset:14px;z-index:9998;min-height:0;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.lms-stage.expanded .lms-deck{overflow:auto}
/* corporate palette accents */
:root[data-palette=corporate] .lms-thumb{background:linear-gradient(135deg,#0B1F4D,#0A74D9)}
:root[data-palette=corporate] .lms-prog-bar i{background:linear-gradient(90deg,#0A74D9,#2D9CFF)}
@media(max-width:900px){
  .lms{grid-template-columns:1fr}
  .lms-outline{position:fixed;left:0;top:0;bottom:0;width:284px;max-width:86vw;transform:translateX(-102%);z-index:70;border-radius:0 16px 16px 0;max-height:none;transition:transform .25s}
  .lms-outline.show{transform:none}
  .lms-otoggle{display:grid}
  .lms-deck{padding:18px 15px}
  .lms-foot{gap:10px;padding:12px}.lms-nav{padding:10px 12px}
  .lms-toast{top:70px}
}

/* ===== V83 sidebar logo swap + blue-theme completeness ===== */
.side-logos{display:inline-block;line-height:0}
.side-logos .slg{height:34px;width:auto;display:none}
.side-logos .s-wo{display:block}                                   /* dark sidebar, orange */
:root[data-theme=light] .side-logos .s-wo{display:none}            /* light sidebar -> dark logo */
:root[data-theme=light] .side-logos .s-do{display:block}
:root[data-palette=corporate] .side-logos .s-wo,
:root[data-palette=corporate] .side-logos .s-do{display:none}      /* corporate sidebar is always navy */
:root[data-palette=corporate] .side-logos .s-wb{display:block}
/* course-intro accent variables are set on .ci-wrap, so the blue theme must override them there */
:root[data-palette=corporate] .ci-wrap{--ci-o:#0A74D9;--ci-o2:#2D9CFF;--ci-o-soft:#eaf3fd;--ci-o-line:#cfe1f6;--ci-line:#dbe6f4;--ci-bg:#f4f8fd}
/* tinted notice + report cards -> blue with readable text */
:root[data-palette=corporate] .notice{background:#eaf2fd!important;border-color:#cfe1f6!important;color:#13294B}
:root[data-palette=corporate] .report{background:#eaf2fd!important;border-color:#cfe1f6!important;color:#0f2f57}
/* payment fee banner: blue in the corporate theme + always-readable subtitle */
:root[data-palette=corporate] .payment-banner{background:linear-gradient(135deg,#0B1F4D,#0A74D9)!important;color:#fff}
.payment-banner .fee-note{color:rgba(255,255,255,.85)!important}

/* ===== V86 saved course materials + dashboard course cards ===== */
.badge-full{background:#fee2e2;color:#991b1b}
.dl-mats{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.dl-mat{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--card)}
.dl-mat-ic{width:40px;height:40px;flex:none;border-radius:11px;background:#eef2f7;color:var(--o);display:grid;place-items:center}
.dl-mat-meta{flex:1;min-width:0}.dl-mat-meta b{display:block;line-height:1.25}.dl-mat-meta small{color:var(--muted)}
.dl-mat-act{display:flex;align-items:center;gap:8px;flex:none}
.dl-mat-act form{margin:0}
/* dashboard enrolled/completed */
.dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:24px}
.dash-col .section-head{margin-bottom:12px}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.dash-course{display:block;border:1px solid var(--line);border-radius:14px;padding:13px;background:var(--card);transition:.18s;color:inherit}
.dash-course:hover{border-color:var(--o);box-shadow:0 8px 22px rgba(15,23,42,.08);transform:translateY(-2px)}
.dash-course .dc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dash-course .dc-code{font-size:11px;font-weight:800;color:var(--muted)}
.dash-course h4{margin:8px 0;font-size:13.5px;line-height:1.3;min-height:35px}
.dash-course .progress{height:7px;margin:6px 0 4px}
.dash-course small{color:var(--muted);font-size:11.5px}
/* letter payment button (its own toolbar accent) */
.tools a[href*="payments.php"]{background:#e8640a;color:#fff}
@media(max-width:820px){.dash-cols{grid-template-columns:1fr}}
@media(max-width:600px){.dl-mat{flex-wrap:wrap}.dl-mat-act{width:100%}.dl-mat-act .btn,.dl-mat-act form{flex:1}.dl-mat-act .btn{width:100%}.dash-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}

/* ===== V90 — full blue (corporate) theme pass: recolour every hardcoded orange ===== */
/* soft cream surfaces -> light blue */
:root[data-palette=corporate] .auth-bg,
:root[data-palette=corporate] .auth-body{background:linear-gradient(135deg,#eef4fc,#f7f9fc)}
:root[data-palette=corporate] .badge{background:#e8f1fd;color:#0A5FB0}
:root[data-palette=corporate] .badge-full{background:#fee2e2;color:#991b1b}
:root[data-palette=corporate] .initials,
:root[data-palette=corporate] .cm-av.initials{background:#e8f1fd;color:#0A5FB0}
:root[data-palette=corporate] .brand-mark,
:root[data-palette=corporate] .login-mark{background:linear-gradient(135deg,#2D9CFF,#0A74D9)}
:root[data-palette=corporate] .ci-progress-card{background:linear-gradient(135deg,#eef4fc,#ffffff)!important}
/* "Ready to begin" card -> blue, readable text + visible button */
:root[data-palette=corporate] .ci-start{background:linear-gradient(135deg,#0B1F4D,#0A74D9)}
:root[data-palette=corporate] .ci-start h2{color:#ffffff}
:root[data-palette=corporate] .ci-start .ci-fee-label,
:root[data-palette=corporate] .ci-start .cp-amount,
:root[data-palette=corporate] .ci-start .cp-code{color:#ffffff!important}
:root[data-palette=corporate] .ci-start .ci-start-btn{background:#ffffff!important;color:#0A74D9!important}
/* module / slide / quiz accents */
:root[data-palette=corporate] .mod-badge.go{background:#e8f1fd;color:#0A5FB0}
:root[data-palette=corporate] .mod-sym b,
:root[data-palette=corporate] .sym-cell b{color:#0A74D9}
:root[data-palette=corporate] .q-fill{background:#e8f1fd;color:#0A5FB0}
:root[data-palette=corporate] .slide-eyebrow,
:root[data-palette=corporate] .slide-h .slide-ic{color:#0A74D9}
:root[data-palette=corporate] .deck-btn.primary[data-deck-begin]{background:#0A74D9}
:root[data-palette=corporate] .deck-dot.active{background:#0A74D9}
/* software + LMS chips + progress */
:root[data-palette=corporate] .sw-soon,
:root[data-palette=corporate] .lms-mod.final .lms-mod-no{background:#e8f1fd;color:#0A5FB0}
:root[data-palette=corporate] .lms-prog-bar i{background:linear-gradient(90deg,#0A74D9,#2D9CFF)}
/* letter-of-completion pay button */
:root[data-palette=corporate] .tools a[href*="payments.php"]{background:#0A74D9}
/* headings that sit on coloured cards must stay white in the blue theme
   (the global corporate h1/h2 rule darkens them otherwise) */
:root[data-palette=corporate] .ci-start h2,
:root[data-palette=corporate] .assess-pass h2,
:root[data-palette=corporate] .payment-banner strong,
:root[data-palette=corporate] .payment-banner small{color:#ffffff}

/* ===== V92 admin candidates rework ===== */
.cand-head-actions{display:flex;gap:8px;align-items:center}
/* pending approval queue */
.approve-queue{margin-bottom:22px;border:1px solid #fde0c8}
:root[data-palette=corporate] .approve-queue{border-color:#cfe1f6}
.aq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:10px}
.aq-item{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:14px;padding:11px 13px;background:var(--card)}
.aq-id{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none;background:#e8f1fd;color:#0A5FB0;display:grid;place-items:center;font-weight:800}
.aq-id img{width:100%;height:100%;object-fit:cover}
.aq-meta{flex:1;min-width:0}.aq-meta b{display:block;line-height:1.2}.aq-meta small{color:var(--muted)}
.aq-act{display:flex;gap:6px;flex:none}.aq-act form{margin:0}
/* directory spacing + enlarged cards */
.cand-directory{margin-top:6px}
.cand-directory .candidate-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin-top:6px}
.cand-directory .candidate-card{padding:18px 14px;border-radius:18px;min-height:0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.candidate-card .cc-loc{display:block;color:var(--muted);font-size:11.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.candidate-card h3{font-size:15px;margin:8px 0 2px}
.candidate-card .cc-foot{margin-top:10px;display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
/* modal enrollment -> compact scrollable code+% grid */
.cm-enroll-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:6px 0 8px}
.cm-enroll-head h4{margin:0}
.cm-enroll-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:8px;max-height:260px;overflow:auto;padding:4px 2px 2px}
.cm-chip{border:1px solid var(--line);border-radius:10px;padding:8px 4px;background:var(--card);cursor:pointer;text-align:center;line-height:1.2}
.cm-chip b{display:block;font-size:10.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-chip span{font-size:13px;font-weight:800}
.cm-chip.zero{border-color:#e5e7eb}.cm-chip.zero span{color:#6b7280}
.cm-chip.prog{border-color:#bcd6f5}.cm-chip.prog span{color:#1558d6}
.cm-chip.done{border-color:#bfe6d0;background:#eefaf3}.cm-chip.done span{color:#0f7a48}
.cm-chip:hover{box-shadow:0 6px 16px rgba(15,23,42,.1);transform:translateY(-1px)}
/* progress + new-candidate popups */
.prog-pop{position:fixed;inset:0;background:rgba(12,20,30,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:10001}
.prog-pop[hidden]{display:none}
.prog-card{width:min(440px,96vw);background:var(--card);border-radius:18px;padding:24px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:10px}
.prog-card h3{margin:0}
.prog-card label{display:block;font-weight:700;margin:4px 0 0}
.prog-card input[type=text],.prog-card input[type=email],.prog-card input:not([type]){width:100%;margin-top:5px}
.pp-range{display:flex;align-items:center;gap:12px;margin:6px 0}
.pp-range input[type=range]{flex:1}
.pp-range b{font-size:18px;min-width:52px;text-align:right;color:var(--o)}

/* V171 — the candidate-card actions sit on one line, all the same size */
.pp-actions{display:flex;gap:7px;align-items:stretch;flex-wrap:wrap;margin-top:12px}
.pp-actions .btn{flex:1 1 0;min-width:92px;padding:10px 6px;font-size:12.1px;
  line-height:1.2;border-radius:10px;white-space:nowrap;text-align:center}
.pp-actions .btn.pp-complete{background:var(--green,#15803d);border-color:var(--green,#15803d);color:#fff}
.pp-actions .btn.pp-complete:hover{filter:brightness(1.08)}
.pp-note{margin:10px 0 0;font-size:11.6px;line-height:1.5;color:var(--muted)}
@media(max-width:520px){
  .pp-actions{flex-wrap:wrap}
  .pp-actions .btn{flex:1 1 46%}
}
@media(max-width:380px){
  .pp-actions{flex-direction:column}
  .pp-actions .btn{flex:none;width:100%}
}
.pp-check{display:flex;align-items:center;gap:8px;font-weight:600;font-size:12.4px;margin-top:10px}
.pp-check input{width:auto;margin:0}
.prog-card textarea{width:100%;margin-top:5px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;font-family:inherit;font-size:13.5px;resize:vertical}
.prog-card select{width:100%;margin-top:5px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;font-family:inherit;font-size:13.5px;background:var(--card)}
.prog-card input.is-locked{background:var(--soft,#f3f6fa);color:var(--muted)}

/* V172 — six equal actions in the candidate modal */
.cand-modal-card .candidate-actions{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.cand-modal-card .candidate-actions .btn{flex:1 1 0;min-width:84px;padding:9px 6px;
  font-size:11.8px;border-radius:9px;white-space:nowrap;text-align:center}
@media(max-width:520px){.cand-modal-card .candidate-actions .btn{flex:1 1 30%}}

/* V172 — the verification bar icons read as icons, not punctuation */
.verify-bar .vb-ic{line-height:1;margin-right:9px}
.small{font-size:12.5px}
@media(max-width:600px){.aq-grid{grid-template-columns:1fr}.cand-directory .candidate-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}

/* ===== V94 two-pane candidate inbox (contacts + chat) ===== */
.inbox-panel.im{width:min(940px,96vw);height:min(660px,92vh);padding:0;display:flex;flex-direction:column;overflow:hidden;border-radius:22px}
.im-top{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--softline);background:#fff}
.im-top h2{margin:0;font-size:22px}
.im-top .inbox-close{position:static;width:40px;height:40px;border:0;border-radius:50%;background:#efece6;color:#333;font-size:24px;cursor:pointer}
.im-body{flex:1;display:grid;grid-template-columns:264px 1fr;min-height:0}
.im-list{border-right:1px solid var(--softline);overflow:auto;background:#faf9f6;padding:8px}
.im-contact{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:0;background:transparent;padding:11px 12px;border-radius:12px;cursor:pointer}
.im-contact:hover{background:#f1efe9}
.im-contact.active{background:#e4f3ec}
.im-av{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;background:#e7f7f1;color:#08765d;font-weight:800;border:2px solid var(--teal,#0b8064)}
.im-av img{width:100%;height:100%;object-fit:cover}
.im-ct-meta{min-width:0}
.im-ct-meta b{display:block;font-size:14px;line-height:1.2;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.im-ct-meta small{color:var(--muted)}
.im-chat{display:flex;flex-direction:column;min-width:0;background:#f7f6f2}
.im-chat-head{padding:14px 20px;border-bottom:1px solid var(--softline);font-size:16px;background:#fff;font-weight:600}
.im-thread{flex:1;overflow:auto;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.im-empty{margin:auto;color:var(--muted);font-size:15px;text-align:center}
.im-msg{max-width:76%;align-self:flex-start}
.im-msg.mine{align-self:flex-end}
.im-bubble{background:#fff;border:1px solid var(--softline);border-radius:16px;padding:10px 14px;line-height:1.5;text-align:left}
.im-bubble p{margin:0}
.im-msg.mine .im-bubble{background:#dff3ea;border-color:#bfe6d0}
.im-msg small{display:block;color:var(--muted);font-size:11px;margin:3px 4px 0}
.im-msg.mine small{text-align:right}
.im-compose{display:flex;align-items:center;gap:10px;padding:14px 18px;border-top:1px solid var(--softline);background:#fff}
.im-compose input[name=body]{flex:1;border:2px solid var(--teal,#0b8064);border-radius:999px;padding:12px 18px}
.im-compose .attach-btn{cursor:pointer;font-size:19px;line-height:1}
.im-compose .attach-btn input{display:none}
:root[data-palette=corporate] .im-contact.active{background:#e8f1fd}
:root[data-palette=corporate] .im-av{background:#e8f1fd;color:#0A5FB0;border-color:#0A74D9}
:root[data-palette=corporate] .im-msg.mine .im-bubble{background:#e3effd;border-color:#cfe1f6}
:root[data-palette=corporate] .im-compose input[name=body]{border-color:#0A74D9}
:root[data-palette=corporate] .send-round{background:#0A74D9}
@media(max-width:700px){
  .inbox-panel.im{height:94vh;width:100vw;border-radius:0}
  .im-body{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .im-list{display:flex;gap:6px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--softline);padding:8px 10px}
  .im-contact{flex:0 0 auto;flex-direction:column;min-width:72px;text-align:center;gap:5px;padding:8px 6px}
  .im-ct-meta small{display:none}
  .im-ct-meta b{font-size:11px;max-width:70px}
}

/* ===== V95 online payment (Stripe: card / Apple Pay) ===== */
.online-pay-card{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;border:1.5px solid #12805f;background:linear-gradient(135deg,#eefaf3,#ffffff);margin-bottom:14px}
.online-pay-card h2{margin:0 0 4px;font-size:20px}
.online-pay-card .op-copy{min-width:240px;flex:1}
.op-btn{background:#0b8064;font-size:15px;padding:13px 22px}
.op-btn:hover{filter:brightness(1.06)}
.op-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;margin:6px 0 14px}
.op-or:before,.op-or:after{content:"";flex:1;height:1px;background:var(--line)}
.stripe-box{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:6px 0}
.stripe-box legend{font-weight:800;padding:0 8px}
:root[data-palette=corporate] .online-pay-card{border-color:#0A74D9;background:linear-gradient(135deg,#eef4fc,#fff)}
:root[data-palette=corporate] .op-btn{background:#0A74D9}

/* ===== V96 Apple Pay button + payment mode switch ===== */
.online-pay-card .op-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.online-pay-card .op-amount{font-weight:800;font-size:20px;margin-top:6px;color:#0b8064}
:root[data-palette=corporate] .online-pay-card .op-amount{color:#0A74D9}
.applepay-btn{display:inline-flex;align-items:center;gap:6px;background:#000;color:#fff;border:0;border-radius:11px;padding:12px 26px;font-size:17px;font-weight:600;cursor:pointer;line-height:1}
.applepay-btn:hover{background:#111}
.applepay-btn svg{margin-top:-2px}
.pay-mode{border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:12px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pay-mode legend{font-weight:800;padding:0 8px}
.pay-mode .pm-opt{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:11px;padding:11px 12px;cursor:pointer}
.pay-mode .pm-opt span{display:block}.pay-mode .pm-opt b{display:block}.pay-mode .pm-opt small{color:var(--muted)}
.pay-mode .pm-opt:has(input:checked){border-color:var(--o);background:#fff7f0}
:root[data-palette=corporate] .pay-mode .pm-opt:has(input:checked){border-color:#0A74D9;background:#eef4fc}
.pay-mode>.small{grid-column:1/-1}
@media(max-width:760px){.pay-mode{grid-template-columns:1fr}}

/* ===== V97 single unified "Pay" button ===== */
.online-pay-card .op-form{justify-content:flex-start}
.paynow-btn{display:inline-flex;flex-direction:column;align-items:center;gap:2px;background:#000;color:#fff;border:0;border-radius:13px;padding:13px 30px;cursor:pointer;min-width:250px;transition:.15s}
.paynow-btn:hover{background:#151515}
.paynow-btn .pn-top{display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:700}
.paynow-btn .pn-top svg{margin-top:-2px}
.paynow-btn .pn-sub{font-size:10.5px;opacity:.72;letter-spacing:.02em}

/* V101 — online-pay activation notice + admin warning */
.op-pending{margin:14px 0 2px;padding:14px 16px;border:1px solid #f0dca0;background:#fff8e6;color:#7a5a12;border-radius:12px;font-weight:600;font-size:14px}
.pay-warn{margin:10px 0 0;padding:12px 14px;border:1px solid #f3b4b4;background:#fdeaea;color:#8a2020;border-radius:10px;font-weight:600;font-size:13.5px}
:root[data-theme=dark] .op-pending{background:#3a3520;border-color:#5c5330;color:#f2dd9e}
:root[data-theme=dark] .pay-warn{background:#3a2020;border-color:#6b3535;color:#f3c0c0}

/* V102 — inline Pay Fee button on course intro (Apple Pay / Google Pay / card) */
.ci-pay-btn{display:inline-flex;align-items:center;gap:7px;background:#0b0b0d;color:#fff;border:0;border-radius:11px;padding:0 16px;height:42px;font-weight:700;font-size:14px;text-decoration:none;line-height:1;box-shadow:0 6px 16px rgba(0,0,0,.18);transition:transform .12s ease,box-shadow .12s ease}
.ci-pay-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,0,0,.24);color:#fff}
.ci-pay-btn svg{flex:0 0 auto}
.ci-top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ci-start-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
:root[data-palette=corporate] .ci-pay-btn{background:#0f2c50}
:root[data-palette=corporate] .ci-pay-btn:hover{background:#123a6b}
@media(max-width:560px){.ci-pay-btn{width:100%;justify-content:center}}

/* Brand logo responsive safeguard — keep aspect ratio, never overflow container */
.brand-logos .lg,.side-logos .slg{max-width:100%;object-fit:contain}
@media(max-width:520px){.brand-logos .lg{height:30px}.side-logos .slg{height:30px}}

/* =====================================================================
   V135 — mobile refinement (phones)
   Appended last on purpose: these rules override the earlier breakpoints
   without editing them, so nothing above is disturbed.
   ===================================================================== */

/* Horizontal scroll shadows for wide admin tables. The admin tables keep
   white-space:nowrap by design (7+ columns will never fit a phone), so
   instead of squeezing them we make it obvious they scroll. Pure CSS via
   background-attachment:local — no markup changes needed. */
@media(max-width:820px){
  .table-wrap{
    background:
      linear-gradient(to right,var(--card) 30%,rgba(255,255,255,0)) 0 0,
      linear-gradient(to left,var(--card) 30%,rgba(255,255,255,0)) 100% 0,
      radial-gradient(farthest-side at 0 50%,rgba(15,23,42,.16),rgba(15,23,42,0)) 0 0,
      radial-gradient(farthest-side at 100% 50%,rgba(15,23,42,.16),rgba(15,23,42,0)) 100% 0;
    background-repeat:no-repeat;
    background-size:38px 100%,38px 100%,13px 100%,13px 100%;
    background-attachment:local,local,scroll,scroll;
    -webkit-overflow-scrolling:touch;
  }
  .table th,.table td{padding:8px 10px;font-size:12.5px}
}

@media(max-width:560px){
  /* --- candidate / admin hero -------------------------------------
     The passport photo was 118x150 and ordered above the greeting, so
     it dominated the first screen. Put the greeting first and reduce
     the photo to a compact cluster beside its caption. */
  .profile-hero{padding:16px;gap:14px;border-radius:18px;margin-bottom:14px}
  .hero-copy{order:0;flex-basis:100%}
  .hero-copy h1{font-size:22px;line-height:1.25;margin-bottom:4px}
  .hero-copy p{font-size:13px;margin:2px 0}
  .eyebrow{font-size:11px;letter-spacing:.12em}

  .student-photo{order:1;margin:0;width:100%;
    display:grid;grid-template-columns:auto minmax(0,1fr);
    align-items:center;justify-items:start;gap:8px 12px;text-align:left}
  .student-photo img,.student-photo .hero-avatar{
    width:72px;height:92px;grid-row:span 2;border-width:3px}
  .student-photo .btn{grid-column:2;padding:9px 14px;font-size:13px}
  .student-photo small{grid-column:2;max-width:none;font-size:11.5px;line-height:1.35}

  .hero-tags{gap:6px}
  .hero-tags span{font-size:11.5px;padding:5px 9px}
  .hero-actions.inline{width:100%;gap:8px}
  .hero-actions.inline .btn{flex:1 1 auto;padding:9px 10px;font-size:13px}

  /* --- general density ------------------------------------------- */
  .content{padding:12px 12px 88px}
  .card{padding:14px;border-radius:14px}
  .content>section{margin-bottom:16px}
  h1{font-size:23px}
  h2{font-size:18px}
  .section-head{flex-direction:column;align-items:flex-start;gap:6px}
  .metric b{font-size:24px}
  .btn{padding:10px 13px}
  .btn.small{padding:6px 9px;font-size:11.5px}

  /* grids that had no phone override */
  .cred-meta{grid-template-columns:1fr;gap:6px}
  .price-card .cur-grid{grid-template-columns:1fr}
  .bar-row{grid-template-columns:72px 1fr 34px;gap:8px;font-size:12.5px}

  /* forms and modals */
  .two,.stack.two{grid-template-columns:1fr}
  .profile-row{gap:12px}
  .avatar{width:62px;height:62px;border-radius:16px;border-width:2px}
  .cand-modal-card{width:min(400px,94vw);padding:22px 18px 18px;border-radius:18px}
  .actions{gap:6px}
  .mini.wide{width:100%}
}

/* Bottom nav alignment ------------------------------------------------
   The Inbox item is a <button> (it opens the inbox overlay) while every
   other item is an <a>. Padding, font-size and text-align were only ever
   applied to `a`, and buttons don't inherit font-family, so Inbox sat
   higher and rendered in a different face. Style both identically and
   pin the icon box so differing glyph shapes can't shift the labels. */
.mobile-nav a,.mobile-nav button{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:3px;padding:10px 2px 8px;margin:0;
  font:inherit;font-size:11px;line-height:1;text-align:center;
  background:transparent;border:0;color:inherit;
  -webkit-appearance:none;appearance:none;cursor:pointer;
}
.mobile-nav svg{width:24px;height:24px;flex:0 0 24px;display:block;margin:0}
.mobile-nav small{display:block;font-size:9.5px;line-height:1.15}
.mobile-nav a.active,.mobile-nav button.active{color:var(--o);font-weight:800}

/* =====================================================================
   V137 — phone density: exams, slides, payments
   ===================================================================== */
@media(max-width:560px){
  /* --- exams -----------------------------------------------------
     The legend was a flex row: number + question + type badge. On a
     phone the badge stole ~70px so the question wrapped into a narrow
     column ~5 words wide. Lay it out as a grid instead: number and
     badge share row 1, the question gets the full width on row 2. */
  /* The global `input{width:100%}` also hits radios/checkboxes. .assess-opt
     already worked around it; .pm-opt never did, so the radio stretched to
     fill the row and shoved the label text against the right edge. */
  .pay-mode .pm-opt input{width:auto;flex:0 0 auto;margin:0}
  .assess-q,.pay-mode{min-width:0}
  .assess-q{padding:12px;border-radius:12px;margin:0 0 10px}
  .assess-q legend{display:grid;grid-template-columns:auto 1fr;
    align-items:center;gap:6px 8px;padding:0 2px;width:100%}
  .assess-n{width:22px;height:22px;font-size:12px}
  .q-type{grid-column:2;justify-self:start;margin-left:0;font-size:9px;padding:2px 6px}
  .q-body{grid-column:1/-1;flex:none;padding:0;font-size:14.5px;line-height:1.4;font-weight:700}

  .assess-opt{padding:9px 4px;gap:9px;font-size:13.5px;line-height:1.35;align-items:flex-start}
  .assess-opt input{margin-top:2px;flex:0 0 auto}
  .assess-opt span{flex:1;min-width:0}
  .assess-fill{max-width:100%}
  .assess-actions{gap:8px;margin-top:12px}
  .assess-actions .btn{flex:1 1 46%;padding:10px 10px;font-size:13px}
  .assess-pass-badge{width:52px;height:52px;font-size:26px}
  .assess-pass h2{font-size:19px}

  /* --- course slides --------------------------------------------- */
  .lms-deck{padding:14px 12px}
  .lms-foot{padding:10px;gap:8px;font-size:12px;flex-wrap:wrap}
  .lms-foot .btn{padding:8px 11px;font-size:12.5px}
  .slide{padding:14px 12px;border-radius:14px}
  .slide-h{font-size:18px;line-height:1.25}
  .slide-sub{font-size:13px}
  .slide p,.slide li{font-size:13.5px;line-height:1.55}
  .lms-outline{width:264px}

  /* --- payments --------------------------------------------------- */
  .price-cardgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
  .price-card{padding:10px 10px 9px;border-radius:12px}
  .price-card .pc-title{font-size:12.5px}
  .price-card .pc-base{font-size:14px}
  .pay-mode{padding:10px 12px;margin:10px 0}
  .pay-mode .pm-opt{padding:10px;gap:8px;text-align:left}
  .pay-mode .pm-opt span{flex:1;min-width:0;text-align:left}
  .pay-mode .pm-opt b{font-size:13.5px}
  .pay-mode .pm-opt small{font-size:11.5px;line-height:1.35}
  .pay-warn{padding:10px 12px;font-size:12.5px}

  /* --- course modules list ---------------------------------------- */
  .ci-module summary{padding:12px 13px;gap:10px}
  .ci-mod-no{width:32px;height:32px}
  .ci-mod-title{font-size:14px}
  .ci-mod-count{font-size:11px}
  .ci-module ul{padding:4px 14px 14px 44px;gap:5px}
  .ci-module li{font-size:12.5px;line-height:1.45}
}

/* =====================================================================
   V138 — My Certificates: bottom-align the card action rows
   The cards already stretch to equal height (grid default), but the card
   itself was a plain block, so the buttons sat wherever the content
   happened to end. A 3-line course title pushed them ~50px lower than
   its neighbour. Make the card a column and pin the closing block to the
   bottom so every Certificate / Pocket Card / Marks Sheet row lines up.
   ===================================================================== */
.cred-grid{gap:24px}
.cred-card{display:flex;flex-direction:column}
.cred-card>.cred-meta{margin-bottom:14px}

/* Whichever block closes the card gets pushed down. Cards awaiting a
   theme choice show .alert instead of .cred-theme, so both qualify. */
.cred-card>.cred-actions,
.cred-card>.cred-theme,
.cred-card>.alert{margin-top:auto}

/* ...and when one of those precedes the buttons, the buttons sit a fixed
   gap below it rather than being pushed down a second time. */
.cred-card>.cred-theme+.cred-actions,
.cred-card>.alert+.cred-actions{margin-top:12px}

.cred-theme{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cred-theme .btn{margin-left:auto}

/* Admin messenger: footer strip holding the link through to the full
   Communication Suite. The candidate inbox has no equivalent row, so this
   rule is new rather than shared. */
.im-foot{display:flex;justify-content:flex-end;align-items:center;
  padding:9px 18px;border-top:1px solid var(--softline);background:#fff}
.im-foot .btn{padding:7px 12px;font-size:12px}
@media(prefers-color-scheme:dark){.im-foot{background:#182235;border-top-color:#2d3a4e}}
@media(max-width:560px){.im-foot{padding:8px 12px}.im-foot .btn{width:100%;justify-content:center}}

/* Currency picker beside the course fee on the course introduction page. */
.ci-cur-pick{display:inline-flex;align-items:center;margin-left:8px;vertical-align:middle}
.ci-cur-pick select{width:auto;min-width:74px;padding:4px 8px;font-size:12px;font-weight:700;
  border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Free promotional courses */
.pc-toggle.pc-free{margin-top:6px}
.pc-toggle.pc-free em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.04em}
.course-card.is-promo{position:relative}
.course-card.is-promo::after{content:'FREE';position:absolute;top:10px;right:10px;z-index:2;
  background:#0f9d58;color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;
  padding:3px 8px;border-radius:999px}
.promo-note{display:inline-block;margin-top:6px;font-size:11.5px;font-weight:700;color:#0f9d58}
.promo-note.is-expired{color:#c0392b}

/* ---- Admin Controls (v155) ----
   Four switches sit inline in one row; each reveals its own panel below the
   row. Activity Logs is open on load. */
.ac-switches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.ac-card{display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px 16px;
  box-shadow:0 2px 10px rgba(15,23,42,.04);transition:box-shadow .25s ease,border-color .25s ease}
.ac-card.is-open{border-color:var(--o);box-shadow:0 8px 26px rgba(15,23,42,.10)}
.ac-ic{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:12px;
  background:var(--soft);color:var(--o)}
.ac-meta{flex:1;min-width:0}
.ac-meta h2{margin:0;font-size:16px;line-height:1.25}
.ac-meta p{margin:3px 0 0;font-size:12px;line-height:1.4}
/* sleek switch */
.ac-switch{position:relative;flex:0 0 auto;width:54px;height:30px;cursor:pointer;margin-top:auto}
.ac-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.ac-switch span{position:absolute;inset:0;border-radius:999px;background:#cbd5e1;
  transition:background .28s cubic-bezier(.4,0,.2,1)}
.ac-switch span::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(15,23,42,.28);
  transition:transform .28s cubic-bezier(.4,0,.2,1)}
.ac-switch input:checked+span{background:var(--o)}
.ac-switch input:checked+span::after{transform:translateX(24px)}
.ac-switch input:focus-visible+span{outline:2px solid var(--o);outline-offset:2px}
/* panels */
.ac-panels{display:grid;gap:14px}
.ac-panel-wrap{overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:16px;
  transition:max-height .32s cubic-bezier(.4,0,.2,1)}
.ac-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 16px;border-bottom:1px solid var(--softline);font-size:15px}
.ac-loading{padding:18px;font-size:13px;color:var(--muted)}
.ac-frame{display:block;width:100%;min-height:220px;border:0;background:transparent}
@media(max-width:1100px){.ac-switches{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ac-switches{grid-template-columns:1fr;gap:10px}
  .ac-card{flex-direction:row;align-items:center}
  .ac-switch{margin-top:0}
  .ac-meta h2{font-size:15px}}

/* dashboard avatar upload ring */
.hero-avatar-wrap.is-upload{border:0;background:none;padding:0}
.avatar-drop{position:relative;display:block;cursor:pointer;border-radius:50%}
.avatar-drop .avatar-cam{position:absolute;right:2px;bottom:2px;display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;background:var(--o);color:#fff;font-size:14px;
  box-shadow:0 2px 8px rgba(15,23,42,.3);opacity:0;transform:scale(.85);
  transition:opacity .2s ease,transform .2s ease}
.avatar-drop:hover .avatar-cam,.avatar-drop:focus-within .avatar-cam{opacity:1;transform:scale(1)}
@media(max-width:560px){.avatar-drop .avatar-cam{opacity:1;transform:scale(1);width:26px;height:26px}
 .ac-head{padding:13px 14px;gap:11px}.ac-meta h2{font-size:15.5px}}

/* ---- login security ---- */
.lgn-alert.warn{background:#fff8e6;border:1px solid #f0d089;color:#7a5a10}
.lgn-alert.ok{background:#eaf7ef;border:1px solid #a9d9bd;color:#1d6b42}
.cap-field{display:block}
.cap-row{display:flex;align-items:center;gap:10px}
.cap-code{flex:0 0 auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:19px;font-weight:800;
  letter-spacing:.22em;padding:9px 13px;border-radius:10px;color:#12233b;
  background:repeating-linear-gradient(45deg,#eef2f7,#eef2f7 6px,#e3e9f2 6px,#e3e9f2 12px);
  border:1px dashed #9fb0c6;user-select:none}
.cap-row input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.14em}
.lgn-recover{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-size:13px}
.lgn-recover .lnk,.lgn-recform .lnk{background:none;border:0;padding:0;cursor:pointer;
  color:var(--o,#e2601a);font-weight:700;font-size:13px;text-decoration:underline}
.lgn-recform{margin-top:14px;padding-top:14px;border-top:1px solid rgba(0,0,0,.08)}
.rec-title{margin:0 0 4px;font-size:17px}
.rec-note{margin:0 0 10px;font-size:12.5px;opacity:.75}

/* ---- email verification & pre-certificate confirmation ---- */
.verify-modal{position:fixed;inset:0;z-index:999;display:grid;place-items:center;padding:18px;
  background:rgba(9,16,28,.62);backdrop-filter:blur(3px)}
.verify-card{width:min(560px,96vw);max-height:92vh;overflow:auto;background:var(--card);
  border-radius:18px;padding:22px 22px 18px;box-shadow:0 30px 90px rgba(0,0,0,.4)}
.verify-card h2{margin:0 0 8px;font-size:19px;line-height:1.3}
.verify-card p{font-size:13.5px;line-height:1.55}
.verify-card .lgn-field{margin:12px 0}
.verify-card input[type=email]{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:11px}
.cert-confirm hr{border:0;border-top:2px dashed var(--line);margin:10px 0 14px}
.cc-rows{margin:0 0 12px}
.cc-rows>div{display:flex;gap:10px;padding:8px 0;border-bottom:1px dotted var(--line)}
.cc-rows dt{flex:0 0 44%;margin:0;font-weight:800;font-size:13px}
.cc-rows dd{margin:0;font-size:13.5px}
.cc-warn{background:#fff8e6;border:1px solid #f0d089;color:#7a5a10;border-radius:11px;padding:10px 12px}
.cc-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:14px}
.cc-actions form{margin:0}
.verify-note,.verify-lock{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.verify-lock{background:#fdecec;border-color:#e9b4b4;color:#8a2020}
.inline-form{display:inline;margin:0}
.verified-badge{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:3px 9px;
  border-radius:999px;background:#eaf7ef;color:#1d6b42;font-size:11.5px;font-weight:800}
input.is-locked{background:var(--soft);cursor:not-allowed}
@media(max-width:560px){.cc-rows>div{flex-direction:column;gap:2px}.cc-rows dt{flex:none}
 .cc-actions{flex-direction:column-reverse}.cc-actions .btn,.cc-actions form{width:100%}
 .cc-actions .btn{display:block;text-align:center}}
.mt-code{margin:8px 0 0;padding:10px 12px;border-radius:10px;background:#0f172a;color:#e2e8f0;
  font-size:12px;line-height:1.55;overflow:auto;white-space:pre}

/* ================= Gmail-style admin mail client ================= */
.gm{display:grid;grid-template-columns:210px minmax(280px,360px) minmax(0,1fr);gap:14px;
  height:calc(100vh - 150px);min-height:520px}
.gm-rail{display:flex;flex-direction:column;gap:4px}
.gm-compose{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px;
  padding:14px 16px;border:0;border-radius:16px;background:var(--o);color:#fff;font-weight:800;
  font-size:14px;cursor:pointer;box-shadow:0 4px 14px rgba(226,96,26,.3)}
.gm-fold{display:flex;align-items:center;gap:10px;padding:9px 14px;border:0;border-radius:999px;
  background:transparent;color:var(--ink);cursor:pointer;text-decoration:none;font-size:13.5px;width:100%;text-align:left}
.gm-fold b{flex:1;font-weight:700}
.gm-fold i{font-style:normal;font-size:11.5px;color:var(--muted)}
.gm-fold:hover{background:var(--soft)}
.gm-fold.active{background:#fde8db;color:#8a3b12;font-weight:800}
.gm-list,.gm-read{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:auto}
.gm-list-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;
  border-bottom:1px solid var(--softline);position:sticky;top:0;background:var(--card);z-index:1}
.gm-item{display:block;padding:11px 14px;border-bottom:1px solid var(--softline);text-decoration:none;color:var(--ink)}
.gm-item:hover{background:var(--soft)}
.gm-item.active{background:#fdf0e7}
.gm-item.unread .gm-item-sub{font-weight:800}
.gm-item-top{display:flex;justify-content:space-between;gap:8px;font-size:12.5px}
.gm-item-top b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-item-top span{flex:0 0 auto;color:var(--muted);font-size:11.5px}
.gm-item-sub{font-size:13.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-item-pre{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-chip{display:inline-block;margin-top:5px;padding:2px 8px;border-radius:999px;background:var(--soft);
  font-size:10.5px;font-weight:800}
.gm-chip.fail{background:#fdecec;color:#8a2020}
.gm-empty{padding:26px 16px;color:var(--muted);font-size:13.5px;text-align:center}
.gm-read{padding:18px 20px}
.gm-read h2{margin:0 0 8px;font-size:19px}
.gm-meta{font-size:12.5px;color:var(--muted);padding-bottom:12px;border-bottom:1px solid var(--softline)}
.gm-body{padding-top:14px;font-size:14px;line-height:1.6}
.gm-atts{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px}
.gm-att{padding:6px 11px;border:1px solid var(--line);border-radius:999px;font-size:12px;text-decoration:none;color:var(--ink)}
/* compose */
.gm-modal{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:16px;
  background:rgba(9,16,28,.55);backdrop-filter:blur(3px)}
.gm-card{width:min(720px,96vw);max-height:92vh;overflow:auto;background:var(--card);border-radius:16px;
  box-shadow:0 30px 90px rgba(0,0,0,.4)}
.gm-card-head{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;
  border-bottom:1px solid var(--softline);font-size:15px}
.gm-x{border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--muted)}
.gm-aud{display:flex;flex-wrap:wrap;gap:14px;padding:12px 16px 4px;font-size:13px}
.gm-aud label{display:inline-flex;align-items:center;gap:6px}
.gm-aud input{width:auto;flex:0 0 auto;margin:0}
.gm-row{padding:8px 16px}
.gm-row input,.gm-row select,.gm-row textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.gm-tools{display:flex;flex-wrap:wrap;gap:5px;padding:6px 16px;border-top:1px solid var(--softline);border-bottom:1px solid var(--softline)}
.gm-tools button{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:5px 10px;
  font-size:12.5px;cursor:pointer;color:var(--ink)}
.gm-tools button:hover{background:var(--soft)}
.gm-editor{min-height:200px;padding:14px 16px;font-size:14px;line-height:1.6;outline:0}
.gm-editor:empty::before{content:attr(data-placeholder);color:var(--muted)}
.gm-sig{display:flex;align-items:center;gap:7px;padding:4px 16px;font-size:12.5px}
.gm-sig input{width:auto;margin:0}
.gm-card-foot{display:flex;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--softline)}
@media(max-width:1000px){.gm{grid-template-columns:1fr;height:auto}
  .gm-rail{flex-direction:row;flex-wrap:wrap;gap:6px}
  .gm-compose{width:100%}.gm-fold{width:auto}
  .gm-list,.gm-read{max-height:none}}

/* ---- list pagination ---- */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:14px 0 4px;padding:10px 4px}
.pager-info{font-size:12.5px;color:var(--muted)}
.pager-btns{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.pg{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;
  border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);
  font-size:12.5px;font-weight:700;text-decoration:none}
.pg:hover{background:var(--soft)}
.pg.is-now{background:var(--o);border-color:var(--o);color:#fff}
.pg.is-off{opacity:.4;pointer-events:none}
.pg-gap{padding:0 4px;color:var(--muted)}
@media(max-width:560px){.pager{justify-content:center}.pager-info{width:100%;text-align:center}}

/* ---- candidate header verification bar (plain text, no container) ---- */
.verify-bar{width:100%;margin-top:10px;font-size:13px;line-height:1.55;text-align:left}
.verify-bar .vb-line{display:block}
/* Text-presentation glyph (U+2709 without VS16) so this colour applies;
   a colour-emoji envelope would ignore it. */
.verify-bar .vb-ic{margin-right:7px;color:#D32F2F}
.verify-bar .vb-count{color:#D32F2F;font-weight:800;font-variant-numeric:tabular-nums}
@media(max-width:560px){.verify-bar{font-size:12.5px;margin-top:8px}}

/* ---- admin course card header (v152) ----
   Was a single flex row holding the category badge and BOTH switches, so the
   Free toggle sat beside the status toggle and overlapped it. Note the
   `.price-card` prefix: the original rule is `.price-card .pc-top`, which
   outranks a bare `.pc-top` no matter where it sits in the file — the reason
   an earlier margin-top fix silently did nothing. */
.price-card .pc-top{display:grid;grid-template-columns:1fr auto;align-items:center;
  column-gap:12px;row-gap:10px}
.price-card .pc-top .course-cat{justify-self:start}
.price-card .pc-top .pc-toggle{justify-self:end;margin:0;display:flex;align-items:center}
.price-card .pc-top .pc-toggle.pc-free{margin-top:0}
.price-card .pc-free-label{justify-self:start;font-size:11px;font-weight:900;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);line-height:1}
.price-card .pc-free-label.on{color:#0f9d58}
@media(max-width:560px){
  .price-card .pc-top{column-gap:10px;row-gap:12px}
  .price-card .pc-top .pc-toggle .enroll-switch span{width:40px;height:23px}
  .price-card .pc-top .pc-toggle .enroll-switch span:after{width:17px;height:17px}
  .price-card .pc-top .pc-toggle input:checked+span:after{transform:translateX(17px)}
}

/* ---- pre-certification credential modal (v153) ---- */
.verify-card.cc-wide{width:min(720px,96vw)}
.cc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:12px 0}
.cc-field{min-width:0}
.cc-field label{display:block;font-size:11px;font-weight:900;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.cc-view{font-size:13.5px;line-height:1.45;padding:6px 0;border-bottom:1px dotted var(--line);word-break:break-word}
.cc-empty{color:#c0392b;font-style:italic}
.cc-field.is-blank .cc-view{border-bottom-color:#e9b4b4}
.cc-edit{display:none;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:9px;font-size:13.5px}
.cc-edit:disabled{background:var(--soft);color:var(--muted);cursor:not-allowed}
.cc-lock{display:none;font-size:10.5px;color:var(--muted);line-height:1.35;margin-top:3px}
.cert-confirm.is-editing .cc-view{display:none}
.cert-confirm.is-editing .cc-edit{display:block}
.cert-confirm.is-editing .cc-lock{display:block}
.verified-badge.unverified{background:#fdecec;color:#8a2020}
.cc-field textarea.cc-edit{resize:vertical}
@media(max-width:620px){.cc-grid{grid-template-columns:1fr}}

/* ---- postal address accordion ---- */
.postal-accordion summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer;
  list-style:none;padding:4px 0;font-size:15px}
.postal-accordion summary::-webkit-details-marker{display:none}
.postal-accordion summary::after{content:'\25BE';margin-left:auto;transition:transform .2s ease;color:var(--muted)}
.postal-accordion details[open] summary::after{transform:rotate(180deg)}
.postal-accordion .pa-ic{font-size:18px}
.postal-accordion summary small{flex:1 1 100%;font-size:12px}
.postal-accordion .pa-body{margin-top:12px;display:grid;gap:10px;justify-items:start}
.postal-accordion textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px}

/* ---- advanced compose (v154) ---- */
.gm-tools{align-items:center;padding:7px 14px;background:var(--soft);border-radius:0}
.gm-tools .gm-sep{width:1px;height:20px;background:var(--line);margin:0 3px}
.gm-tools select{width:auto;min-width:96px;padding:5px 8px;border:1px solid var(--line);
  border-radius:8px;background:var(--card);font-size:12.5px;color:var(--ink)}
.gm-tools button{min-width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center}
.gm-colour{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:var(--card);cursor:pointer}
.gm-colour span{font-weight:900;font-size:13px}
.gm-colour input{position:absolute;inset:0;opacity:0;cursor:pointer;padding:0;border:0}
.gm-emoji{display:flex;flex-wrap:wrap;gap:2px;padding:8px 14px;border-bottom:1px solid var(--softline);
  max-height:120px;overflow:auto}
.gm-emoji button{border:0;background:none;font-size:19px;line-height:1;padding:3px 5px;border-radius:7px;cursor:pointer}
.gm-emoji button:hover{background:var(--soft)}
.gm-editor img{max-width:100%;height:auto}
.gm-editor img.sel{outline:2px solid var(--o);outline-offset:2px}
.gm-editor blockquote{margin:8px 0;padding:4px 0 4px 12px;border-left:3px solid var(--line);color:var(--muted)}
/* drop zone */
.gm-drop{margin:10px 16px 4px;padding:14px;border:2px dashed var(--line);border-radius:12px;
  text-align:center;font-size:12.5px;color:var(--muted);transition:border-color .18s ease,background .18s ease}
.gm-drop.over{border-color:var(--o);background:#fff6f0}
.gm-browse{color:var(--o);font-weight:800;cursor:pointer;text-decoration:underline}
.gm-files{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:9px}
.gm-file{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);font-size:11.5px;color:var(--ink)}
.gm-file button{border:0;background:none;cursor:pointer;font-size:14px;line-height:1;color:var(--muted)}
/* image resize controls */
.gm-imgbar{position:absolute;z-index:1000;display:flex;gap:3px;padding:4px;border-radius:10px;
  background:#12233b;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.gm-imgbar button{border:0;background:transparent;color:#fff;font-size:11.5px;font-weight:700;
  padding:4px 8px;border-radius:6px;cursor:pointer}
.gm-imgbar button:hover{background:rgba(255,255,255,.16)}
.gm-grip{position:absolute;z-index:1000;width:14px;height:14px;border-radius:50%;
  background:var(--o);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);cursor:nwse-resize}
@media(max-width:560px){.gm-tools{gap:3px;padding:6px 10px}.gm-tools select{min-width:74px}}

/* The HTML `hidden` attribute is only display:none in the UA stylesheet, so ANY
   author `display` rule silently defeats it. .gm-modal/.verify-modal/.gm-emoji/
   .cc-actions all set display, which is why toggling `hidden` on them did
   nothing — the signature popup could never be closed. */
[hidden]{display:none!important}

/* ---- signature switch inside compose + rich signature popup (v156) ---- */
.gm-sigrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 16px}
.gm-sigrow b{font-size:13px}
.gm-siglink{border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:4px 11px;font-size:12px;font-weight:700;color:var(--o);cursor:pointer}
.gm-siglink:hover{background:var(--soft)}
.gm-sigprev{flex:1 1 100%;font-size:12px;color:var(--muted);border-left:3px solid var(--line);
  padding:2px 0 2px 10px;max-height:78px;overflow:auto}
.gm-sigprev img{max-width:120px;height:auto}
/* small switch */
.gm-switch-sm{position:relative;flex:0 0 auto;width:38px;height:22px;cursor:pointer}
.gm-switch-sm input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.gm-switch-sm span{position:absolute;inset:0;border-radius:999px;background:#cbd5e1;
  transition:background .25s cubic-bezier(.4,0,.2,1)}
.gm-switch-sm span::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(15,23,42,.3);transition:transform .25s cubic-bezier(.4,0,.2,1)}
.gm-switch-sm input:checked+span{background:var(--o)}
.gm-switch-sm input:checked+span::after{transform:translateX(16px)}
/* popup */
.gm-sigcard{width:min(620px,96vw)}
.gm-sigtools{border-top:1px solid var(--softline)}
.gm-sigedit{min-height:180px;padding:14px 16px;font-size:14px;line-height:1.6;outline:0;overflow:auto}
.gm-sigedit:empty::before{content:attr(data-placeholder);color:var(--muted)}
.gm-sigedit img{max-width:100%;height:auto}
.gm-sigdrop{margin:0 16px 12px;padding:10px;border:2px dashed var(--line);border-radius:10px;
  text-align:center;font-size:12px;color:var(--muted);transition:border-color .18s ease,background .18s ease}
.gm-sigdrop.over{border-color:var(--o);background:#fff6f0}
.gm-sigmsg{margin-right:auto;font-size:12.5px;color:var(--muted)}
.gm-sigcard .gm-card-foot{gap:8px;align-items:center}

/* ============================================================
   B2 — Slide viewport height
   The deck is capped to the visible viewport so the top line
   (module + topic name + full-view button) and the bottom bar
   (Previous / progress / Next) are always on screen without
   scrolling. Long slides scroll inside the deck, not the page.
   ============================================================ */
.lms-stage{min-height:0}
.lms-deck{
  /* leave room for the portal header, top line, footer bar and page padding */
  max-height:calc(100vh - 320px);
  min-height:340px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  padding:20px 24px;
}
.lms-deck::-webkit-scrollbar{width:8px}
.lms-deck::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px}
.lms-topline,.lms-foot{flex:0 0 auto;position:sticky;z-index:3}
.lms-topline{top:0}
.lms-foot{bottom:0}
/* keep the topic name readable rather than truncated to nothing */
.lms-crumb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lms-top-actions{flex:0 0 auto}

/* fullscreen: use the whole screen, same guarantee */
.lms-stage.expanded .lms-deck{max-height:calc(100vh - 132px)}

@media(max-width:900px){
  .lms-deck{max-height:calc(100vh - 300px)}
}
@media(max-width:720px){
  .lms-deck{max-height:none;min-height:0;overflow:visible}
  .lms-topline,.lms-foot{position:static}
}
@media print{
  .lms-deck{max-height:none;overflow:visible}
}

/* ============================================================
   Authored course-pack slides inside the deck
   Pack CSS is scoped to .pack-slide (see coursepack.php), so these
   rules only tidy how that content sits in the slide frame.
   ============================================================ */
.slide-pack{padding:0}
.pack-slide{max-width:100%;overflow-x:hidden;font-size:15px;line-height:1.65;color:var(--text)}
/* Geometry only. Authored backgrounds are kept — each module carries its own
   colour treatment and flattening them was what made every slide look bare. */
.pack-slide,
.pack-slide>div,
.pack-slide>article,
.pack-slide>section{margin:0!important;max-width:100%!important;width:auto!important;min-height:0!important}
.pack-slide img,.pack-slide svg,.pack-slide canvas,.pack-slide video{max-width:100%!important;height:auto}
.pack-slide table{width:100%!important;max-width:100%!important;border-collapse:collapse;display:block;overflow-x:auto}
.pack-slide pre{white-space:pre-wrap;word-break:break-word;max-width:100%}
.pack-slide *{max-width:100%}
.pack-slide h1{font-size:23px;line-height:1.25;margin:0 0 10px}
.pack-slide h2{font-size:19px;line-height:1.3;margin:16px 0 8px}
.pack-slide h3{font-size:16.5px;margin:13px 0 6px}
.pack-slide p{margin:0 0 11px}
.pack-slide ul,.pack-slide ol{margin:0 0 11px;padding-left:20px}
.pack-slide li{margin:4px 0}
.pack-slide li::marker{color:var(--brand)}
.pack-slide>section.hero{padding-top:0}
.pack-slide .u-signature{opacity:.6;font-size:11px}
@media(max-width:720px){.pack-slide{font-size:14.5px}.pack-slide h1{font-size:20px}.pack-slide h2{font-size:17px}}

/* B7 — candidate email verification control on the admin candidate card */
.cc-email{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:8px;
  border-top:1px dashed var(--line);font-size:12px}
.cc-email .ev-form{margin:0;display:flex;align-items:center}
.cc-email .ev-ok{color:#00805A;font-weight:800}
.cc-email .ev-warn{color:#b45309;font-weight:800}
.cc-email .ev-undo{background:none;border:0;color:#6a7686;font-size:11px;cursor:pointer;
  text-decoration:underline;padding:0 2px}
.ev-switch{position:relative;display:inline-block;width:38px;height:21px;margin-left:auto;cursor:pointer}
.ev-switch input{opacity:0;width:0;height:0}
.ev-switch span{position:absolute;inset:0;background:#cbd5e1;border-radius:999px;transition:.2s}
.ev-switch span:before{content:"";position:absolute;height:15px;width:15px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.ev-switch input:checked+span{background:#00805A}
.ev-switch input:checked+span:before{transform:translateX(17px)}
.cc-email.is-verified{border-top-color:#bfe6d0}

/* Course document links in the learning sidebar */
.lms-dl-group{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.lms-dl-group .lms-dl-form{margin:0}
.lms-download.doc{display:flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;text-align:center}

/* =====================================================================
   V165 — the course window: a presentation canvas
   ---------------------------------------------------------------------
   Every slide is drawn on a branded canvas: tinted paper, corner dot
   pattern, the HSE LEAD mark in the top corner and a slide index in the
   bottom corner. Rules are prefixed with .pk-canvas so they outrank the
   pack's own inline <style>, which is injected after this stylesheet.
   ===================================================================== */
.lms-deck{--pk-ink:#0B1F3A;--pk-line:#dbe4f0;--pk-paper1:#ffffff;--pk-paper2:#f3f7fd;
  padding:20px 22px;background:linear-gradient(180deg,#eef3fa 0%,#f7f9fd 100%)}
:root[data-palette=corporate] .lms-deck{--pk-ink:#0B1F4D}
:root[data-theme=dark] .lms-deck{--pk-ink:#e8eefc;--pk-line:#2a3446;--pk-paper1:#161d29;--pk-paper2:#111823;
  background:linear-gradient(180deg,#0f151f 0%,#131a26 100%)}

/* ---- the canvas ---------------------------------------------------- */
.slide.slide-pack{background:none;border:0;box-shadow:none;padding:0;min-height:0}
.pk-canvas{position:relative;overflow:hidden;border:1px solid var(--pk-line);border-radius:18px;
  background:linear-gradient(158deg,var(--pk-paper1) 0%,var(--pk-paper2) 62%,var(--pk-paper1) 100%);
  box-shadow:0 14px 40px rgba(15,32,63,.09),0 2px 6px rgba(15,32,63,.05);
  padding:30px 34px 34px;
  /* fills the deck's visible height for a short slide; a long slide grows and
     scrolls inside the deck, so nothing is ever cut off */
  min-height:clamp(300px,calc(100vh - 430px),560px);
  display:flex;flex-direction:column;justify-content:center}
/* corner dot patterns, as in the reference deck */
.pk-canvas:before,.pk-canvas:after{content:"";position:absolute;width:118px;height:78px;pointer-events:none;
  background-image:radial-gradient(currentColor 1.6px,transparent 1.6px);background-size:13px 13px;
  color:var(--o);opacity:.16}
.pk-canvas:before{top:18px;left:20px}
.pk-canvas:after{bottom:18px;right:20px}
:root[data-palette=corporate] .pk-canvas:before,
:root[data-palette=corporate] .pk-canvas:after{color:#0A74D9}
.pk-mark{position:absolute;top:20px;right:26px;line-height:0;z-index:3;opacity:.96}
.pk-mark img{height:36px;width:auto;display:none}
.pk-mark .pk-mark-o{display:block}
:root[data-palette=corporate] .pk-mark .pk-mark-o{display:none}
:root[data-palette=corporate] .pk-mark .pk-mark-b{display:block}
.pk-index{position:absolute;right:24px;bottom:16px;z-index:3;font-size:11px;font-weight:800;
  letter-spacing:.14em;color:var(--muted);opacity:.8}

/* ---- content sits above the decoration ----------------------------- */
.pk-canvas .pack-slide{position:relative;z-index:2;background:none!important;padding:0!important;
  color:var(--pk-ink);font-size:15.4px;line-height:1.62}
.pk-canvas .pack-slide>article,
.pk-canvas .pack-slide>main{background:none!important;border:0!important;box-shadow:none!important;
  padding:0!important;border-radius:0!important}

/* ---- headings: big, dark, with an accent rule beneath --------------- */
.pk-canvas .pack-slide h1,
.pk-canvas .pack-slide h2,
.pk-canvas .pack-slide>section>h3:first-child,
.pk-canvas .pack-slide h3.pk-cont{position:relative;color:var(--pk-ink);font-weight:800;
  letter-spacing:-.012em;line-height:1.18;margin:0 0 18px;padding-bottom:12px}
.pk-canvas .pack-slide h1{font-size:clamp(23px,2.5vw,32px)}
.pk-canvas .pack-slide h2{font-size:clamp(20px,2.1vw,26px)}
.pk-canvas .pack-slide>section>h3:first-child,
.pk-canvas .pack-slide h3.pk-cont{font-size:clamp(18px,1.9vw,23px)}
.pk-canvas .pack-slide h1:after,
.pk-canvas .pack-slide h2:after,
.pk-canvas .pack-slide>section>h3:first-child:after,
.pk-canvas .pack-slide h3.pk-cont:after{content:"";position:absolute;left:0;bottom:0;
  width:64px;height:4px;border-radius:3px;background:var(--o)}
:root[data-palette=corporate] .pk-canvas .pack-slide h1:after,
:root[data-palette=corporate] .pk-canvas .pack-slide h2:after,
:root[data-palette=corporate] .pk-canvas .pack-slide>section>h3:first-child:after,
:root[data-palette=corporate] .pk-canvas .pack-slide h3.pk-cont:after{background:#0A74D9}
.pk-canvas .pack-slide h3.pk-cont{opacity:.92}
.pk-canvas .pack-slide h3.pk-cont:after{width:34px;opacity:.6}

/* ---- the module hero ------------------------------------------------ */
.pk-canvas .pack-slide .hero{border-radius:16px;padding:26px 30px;margin:0 0 18px;color:#fff;
  background:linear-gradient(135deg,var(--pk-ink),#2f5f8d)}
.pk-canvas .pack-slide .hero h1,.pk-canvas .pack-slide .hero h2{color:#fff;margin-bottom:10px}
.pk-canvas .pack-slide .hero h1:after,.pk-canvas .pack-slide .hero h2:after{background:rgba(255,255,255,.75)}
.pk-canvas .pack-slide .hero p{color:rgba(255,255,255,.9);margin:0}
.pk-canvas .pack-slide .hero .code{color:rgba(255,255,255,.82);font-size:11.5px;letter-spacing:.09em}

/* ---- panels, cards and callouts ------------------------------------ */
.pk-canvas .pack-slide .card,
.pk-canvas .pack-slide .topic,
.pk-canvas .pack-slide .quiz,
.pk-canvas .pack-slide .visual,
.pk-canvas .pack-slide .step,
.pk-canvas .pack-slide .lens div{border-radius:13px;border:1px solid var(--pk-line)}
.pk-canvas .pack-slide .topic{padding:0;border:0;background:none!important}
.pk-canvas .pack-slide .topic-body{padding:0}
.pk-canvas .pack-slide .call{border-radius:12px;border-left-width:5px;padding:14px 17px;margin:14px 0;
  box-shadow:0 3px 10px rgba(15,32,63,.05)}
.pk-canvas .pack-slide .card{padding:15px 16px;box-shadow:0 3px 12px rgba(15,32,63,.05)}
.pk-canvas .pack-slide .flow{gap:9px}
.pk-canvas .pack-slide .step{font-size:12.5px;padding:11px 9px}
.pk-canvas .pack-slide .tag{background:color-mix(in srgb,var(--o) 13%,transparent);color:var(--o)}
.pk-canvas .pack-slide table{border-radius:11px;overflow:hidden;font-size:13px}
.pk-canvas .pack-slide th{background:var(--pk-ink);color:#fff}
.pk-canvas .pack-slide .visual{padding:12px;background:rgba(255,255,255,.6)}
.pk-canvas .pack-slide .visual img{max-height:300px;margin:0 auto}
.pk-canvas .pack-slide li::marker{color:var(--o)}
.pk-canvas .pack-slide p:last-child{margin-bottom:0}
/* the authored "target visual fill" band is production metadata, not content */
.pk-canvas .pack-slide .course-design-band{display:none}

/* ---- dark theme keeps the paper readable --------------------------- */
:root[data-theme=dark] .pk-canvas .pack-slide .card,
:root[data-theme=dark] .pk-canvas .pack-slide .visual,
:root[data-theme=dark] .pk-canvas .pack-slide .step,
:root[data-theme=dark] .pk-canvas .pack-slide .quiz{background:#1a2231!important;color:#e8eefc}
:root[data-theme=dark] .pk-canvas .pack-slide .call{filter:brightness(.34) saturate(1.5);color:#e8eefc}

/* ---- fullscreen: a wider, 16:9-shaped canvas ----------------------- */
.lms-stage.expanded .pk-canvas{min-height:calc(100vh - 250px);padding:40px 54px}
.lms-stage.expanded .pk-canvas .pack-slide{font-size:16.4px;max-width:1180px;margin:0 auto!important}
.lms-stage.expanded .pk-mark img{height:42px}

/* ---- generated (non-pack) slides get the same canvas treatment ----- */
.lms-deck .slide:not(.slide-pack){border-radius:18px;padding:30px 34px;
  min-height:clamp(400px,56vh,600px);border-color:var(--pk-line)}

@media(max-width:900px){
  .lms-deck{padding:12px}
  .pk-canvas{padding:24px 20px 34px;min-height:0;border-radius:15px}
  .pk-canvas:before,.pk-canvas:after{width:76px;height:52px}
  .pk-mark{top:14px;right:16px}.pk-mark img{height:27px}
  .pk-canvas .pack-slide{font-size:14.6px}
}
@media print{
  .pk-canvas{box-shadow:none;min-height:0;page-break-inside:avoid}
  .pk-canvas:before,.pk-canvas:after{display:none}
}

/* footer progress: label above, bar and percentage on one line */
.lms-prog-row{display:flex;align-items:center;gap:10px;margin-top:6px}
.lms-prog-row .lms-prog-bar{flex:1;margin-top:0}
.lms-prog-pct{font-size:12px;font-weight:800;color:var(--muted);flex:none;min-width:34px;text-align:right}

/* =====================================================================
   V165 — a tighter course outline
   The sidebar was taking a third of the window and setting its text at
   body size, which pushed the slide into a narrow column. Same
   information, noticeably less room.
   ===================================================================== */
.lms{grid-template-columns:248px minmax(0,1fr);gap:14px}
.lms-outline{padding:11px 10px;border-radius:14px;top:88px;max-height:calc(100vh - 110px)}
.lms-back-link{font-size:12px;margin:0 2px 8px}
.lms-course{gap:9px;padding:0 2px 9px;margin-bottom:6px}
.lms-thumb{width:40px;height:34px;border-radius:8px}
.lms-thumb svg{width:18px;height:18px}
.lms-course-meta b{font-size:12.4px;line-height:1.28;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lms-course-meta small{font-size:10.6px}
.lms-course-meta .progress{height:5px;margin:5px 0 2px}
.lms-mod-head{padding:8px 8px;font-size:12.2px;gap:8px;border-radius:8px}
.lms-mod-no{width:20px;height:20px;border-radius:6px;font-size:10.5px}
.lms-mod-mark{font-size:11px}
.lms-lessons{margin-left:15px;padding-left:6px}
.lms-lesson{padding:6px 8px;font-size:11.7px;gap:7px;line-height:1.35;
  transition:background .15s ease,color .15s ease}
.lms-lesson.active{box-shadow:inset 2px 0 0 var(--o)}
:root[data-palette=corporate] .lms-lesson.active{box-shadow:inset 2px 0 0 #0A74D9}
.lms-lesson .ll-ic{flex:none;opacity:.55}
.lms-lesson .ll-ic svg{width:11px;height:11px}
.lms-lesson .ll-t{flex:1;min-width:0;overflow:hidden;white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lms-lesson .ll-ck{flex:none;font-size:11px}
.lms-download{margin-top:8px;padding:9px 10px;font-size:11.6px;border-radius:9px;gap:6px}
.lms-download svg{width:13px;height:13px}
.lms-dl-group{gap:6px;margin-top:8px}
@media(max-width:1180px){.lms{grid-template-columns:214px minmax(0,1fr)}}
@media(max-width:900px){.lms-outline{width:262px;padding:13px 12px}}

/* =====================================================================
   V176 — universal interaction states
   ---------------------------------------------------------------------
   Every clickable thing lifts, brightens and picks up a ring in the
   accent of the CURRENT theme. --o is the accent, and it is already
   redefined per palette (orange by default, #0A74D9 in the blue theme),
   so one rule set follows the theme switch without duplication.
   --hi-ring is derived from it via color-mix, with a fallback for older
   browsers.
   ===================================================================== */
:root{
  --hi-ring:rgba(232,100,10,.30);
  --hi-soft:rgba(232,100,10,.10);
  --hi-lift:-1px;
}
:root[data-palette=corporate]{
  --hi-ring:rgba(10,116,217,.30);
  --hi-soft:rgba(10,116,217,.10);
}
@supports (color:color-mix(in srgb,red,blue)){
  :root{
    --hi-ring:color-mix(in srgb,var(--o) 34%,transparent);
    --hi-soft:color-mix(in srgb,var(--o) 12%,transparent);
  }
}

/* anything clickable gets the hand cursor */
.btn,button,[role=button],summary,label.switch-line,label.ev-switch,
.cm-chip,.lms-lesson,.filter-chips button,.candidate-card,.pc-card,
.dash-course,.lms-mod-head,.tab,.pager a,.pub-toggle{cursor:pointer}
button:disabled,.btn:disabled,.btn[disabled],[aria-disabled=true]{cursor:not-allowed}

/* --- solid buttons ------------------------------------------------- */
.btn:not(:disabled):hover{
  filter:brightness(1.07);
  transform:translateY(var(--hi-lift));
  box-shadow:0 6px 18px var(--hi-ring);
}
.btn:not(:disabled):active{transform:translateY(0);filter:brightness(.96);box-shadow:0 2px 8px var(--hi-ring)}
.btn{transition:transform .15s ease,box-shadow .15s ease,filter .15s ease,
     background-color .15s ease,color .15s ease,border-color .15s ease}

/* --- outlined / quiet buttons pick up the accent on hover ---------- */
.btn.secondary:not(:disabled):hover,
.lms-nav:not(.primary):not(:disabled):hover,
.tools .ghost:hover{
  border-color:var(--o);
  color:var(--o);
  background:var(--hi-soft);
  box-shadow:0 6px 18px var(--hi-ring);
}
/* destructive stays red — a themed hover must not disguise a delete */
.btn.danger:not(:disabled):hover{
  filter:brightness(1.06);
  box-shadow:0 6px 18px rgba(203,58,58,.32);
}

/* --- keyboard users get the same highlight, plus a visible ring ----- */
.btn:focus-visible,button:focus-visible,a.btn:focus-visible,
summary:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--o);
  outline-offset:2px;
}

/* --- chips, tabs, filters, list rows -------------------------------- */
.filter-chips button:hover,.pc-cats button:hover{
  border-color:var(--o);color:var(--o);background:var(--hi-soft)}
.cm-chip:hover{border-color:var(--o);box-shadow:0 4px 12px var(--hi-ring);transform:translateY(-1px)}
.lms-lesson:hover{background:var(--hi-soft);color:var(--o)}
.lms-mod-head:hover{background:var(--hi-soft)}
.pager a:hover{border-color:var(--o);color:var(--o);background:var(--hi-soft)}

/* --- cards that behave as links ------------------------------------- */
.candidate-card:hover,.pc-card:hover,.dash-course:hover,.dl-row:hover{
  border-color:var(--o);
  box-shadow:0 10px 26px var(--hi-ring);
  transform:translateY(-2px)}
.candidate-card,.pc-card,.dash-course{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}

/* --- switches ------------------------------------------------------- */
.ev-switch:hover span,.switch-line:hover{filter:brightness(1.04)}
.ev-switch input:focus-visible+span{outline:2px solid var(--o);outline-offset:2px}

/* --- table row actions --------------------------------------------- */
.table tr:hover .btn.small{box-shadow:0 3px 10px var(--hi-ring)}

/* --- dark theme: lift with light rather than shadow ----------------- */
:root[data-theme=dark] .btn:not(:disabled):hover{filter:brightness(1.16)}
:root[data-theme=dark] .btn.secondary:not(:disabled):hover{background:var(--hi-soft);color:#fff}

/* --- respect a reduced-motion preference ---------------------------- */
@media(prefers-reduced-motion:reduce){
  .btn,.candidate-card,.pc-card,.dash-course,.cm-chip{transition:none}
  .btn:not(:disabled):hover,.candidate-card:hover,.pc-card:hover,
  .dash-course:hover,.cm-chip:hover{transform:none}
}

/* =====================================================================
   V176 — Payments admin, arranged and separated
   The page was one enormous card: payment mode, fee, Stripe keys and
   every manual method stacked inside a single <form class="card">, so
   nothing read as a group. It is now four titled panels plus the review
   table, all inside the same form so one Save still writes everything.
   ===================================================================== */
.pay-head{align-items:flex-start;margin-bottom:6px}
.pay-head h1{margin:0 0 4px}
.pay-form{display:block}
.pay-card{margin:0 0 18px;padding:20px 22px}
.pay-card-head{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.pay-card-head h2{margin:0 0 3px;font-size:17px;display:flex;align-items:center;gap:9px}
.pay-card-head p{margin:0;font-size:13px}
.pay-ic{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:var(--hi-soft);color:var(--o);font-size:14px;flex:none}

/* the save bar stays with the form, away from the review table */
.pay-save{position:sticky;bottom:0;z-index:5;display:flex;justify-content:flex-end;
  gap:10px;padding:12px 0 16px;margin-top:-4px;
  background:linear-gradient(180deg,transparent,var(--bg) 42%)}
.pay-save .btn{padding:12px 26px}

/* method cards: state on the face of the card */
.payment-admin-grid{gap:16px}
.payment-setting-card{background:var(--card);padding:16px;position:relative;
  transition:border-color .18s ease,box-shadow .18s ease,opacity .18s ease}
.payment-setting-card.is-on{border-color:var(--line)}
.payment-setting-card.is-off{opacity:.72;background:var(--bg)}
.payment-setting-card:hover{border-color:var(--o);box-shadow:0 8px 22px var(--hi-ring)}
.payment-setting-title{display:flex;align-items:center;gap:10px;margin-bottom:10px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.payment-setting-title h3{margin:0;font-size:14.5px;flex:1;min-width:0}
.pm-ic{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--hi-soft);font-size:15px;flex:none}
.pm-state{font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:3px 9px;border-radius:999px;flex:none}
.pm-state.on{background:#e7f4ec;color:#1f8b4c}
.pm-state.off{background:#f1f3f6;color:#6b7686}
.pm-switch{margin:0 0 10px;font-size:12.5px}
.payment-setting-card label{font-size:12.5px}
.payment-setting-card input,.payment-setting-card textarea{font-size:13px}

/* receipt review */
.pay-review .table td{vertical-align:middle}
.pay-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800}
.pay-pill.approved{background:#e7f4ec;color:#1f8b4c}
.pay-pill.pending{background:#fff5e6;color:#a5651b}
.pay-pill.rejected{background:#fdecec;color:#b23b3b}

:root[data-theme=dark] .pm-state.on{background:#14331f;color:#8fe0b0}
:root[data-theme=dark] .pm-state.off{background:#222a36;color:#9aa6b5}
:root[data-theme=dark] .pay-pill.approved{background:#14331f;color:#8fe0b0}
:root[data-theme=dark] .pay-pill.pending{background:#3a2c15;color:#f0c98a}
:root[data-theme=dark] .pay-pill.rejected{background:#3a1d1d;color:#f0a1a1}

@media(max-width:1100px){.payment-admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .payment-admin-grid{grid-template-columns:1fr}
  .pay-card{padding:16px 15px}
  
  .pay-save .btn{width:100%}
}

/* V177 — "Send code" on the candidate card, beside the unverified notice */
.cc-email .ev-send{margin-left:auto}
.ev-code{border:1px solid var(--o);background:transparent;color:var(--o);border-radius:8px;
  padding:3px 9px;font-size:10.5px;font-weight:800;cursor:pointer;font-family:inherit;
  white-space:nowrap;transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.ev-code:hover{background:var(--o);color:#fff;box-shadow:0 4px 12px var(--hi-ring)}
.cc-email.is-unverified{flex-wrap:wrap;gap:6px}

/* the inline "(verify your email)" control sits on the same line as the field */
.two label .ev-link,label .ev-link{vertical-align:middle}
.verified-badge+.ev-link{margin-left:4px}

/* V179 — upload a built package from the Software page */
.sw-upload{margin-top:22px}
.sw-up-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.sw-up-form label{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:12.5px;min-width:200px}
.sw-up-form select,.sw-up-form input[type=file]{padding:9px 11px;border:1px solid var(--line);
  border-radius:10px;background:var(--card);font-family:inherit;font-size:13px}
.sw-up-form .btn{flex:none}
.sw-card .sw-soon{background:var(--hi-soft);color:var(--o)}
@media(max-width:620px){.sw-up-form{flex-direction:column;align-items:stretch}.sw-up-form .btn{width:100%}}

/* V182 — the security code field reads like the code it is copying */
.cap-row input{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;
  letter-spacing:.16em;text-align:center}
.cap-row input::placeholder{letter-spacing:.16em;font-weight:600;opacity:.55}
.cap-hint{display:block;margin-top:5px;font-size:11px;color:var(--muted);letter-spacing:0}
.cap-field .cap-code{user-select:all}          /* one click selects the whole code */

/* V183 — candidate edit: password and delivery choices */
.ep-pw,.ep-tell{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:12px 0 0}
.ep-pw legend,.ep-tell legend{font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);padding:0 6px}
.ep-radio,.ep-check{display:flex;align-items:flex-start;gap:9px;font-weight:600;
  font-size:13px;margin:6px 0;cursor:pointer;line-height:1.4}
.ep-radio input,.ep-check input{width:auto;margin:2px 0 0;flex:none}
.ep-radio small{color:var(--muted);font-weight:500}
.ep-pw input[type=text]{width:100%;margin-top:8px}
.ep-pw input[type=text]:disabled{background:var(--soft,#f3f6fa);color:var(--muted);cursor:not-allowed}
.ep-tell{display:block}
.ep-tell .ep-check{display:inline-flex;margin-right:16px}
.ep-pw>small,.ep-tell>small{display:block;margin-top:8px;font-size:11.5px;line-height:1.5}

/* =====================================================================
   V186 — the candidate dialogs fit the screen
   The edit dialog grew past the bottom of the window with no way to
   reach the buttons. It now stops at 86% of the viewport, scrolls its
   own body, and keeps the title and the save button always in view.
   ===================================================================== */
.prog-card{max-height:86vh;padding:20px 22px;gap:8px;overflow:hidden}
.prog-card > h3{margin:0 0 2px;padding-right:34px}
.prog-card > .muted.small,.prog-card > #epWho,.prog-card > #mpWho,.prog-card > #ipWho{margin:0 0 4px}
/* everything between the heading and the button scrolls */
.prog-card > label,.prog-card > fieldset,.prog-card > .pp-range,
.prog-card > .pp-actions,.prog-card > .pp-note,.prog-card > .pp-check{flex:0 0 auto}
.prog-card{scrollbar-width:thin}
.prog-scroll{overflow-y:auto;overflow-x:hidden;padding-right:6px;margin-right:-6px;
  display:flex;flex-direction:column;gap:8px;min-height:0;flex:1 1 auto}
.prog-scroll::-webkit-scrollbar{width:9px}
.prog-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px}
.prog-scroll::-webkit-scrollbar-thumb:hover{background:var(--o)}
.prog-card > button[type=submit],.prog-card > .btn{flex:0 0 auto;margin-top:10px}

/* tighter spacing so less has to scroll in the first place */
.prog-card label{font-size:12.5px;gap:4px}
.prog-card input,.prog-card select,.prog-card textarea{padding:9px 11px;font-size:13px}
.ep-pw,.ep-tell{padding:10px 12px;margin:8px 0 0}
.ep-radio,.ep-check{margin:4px 0;font-size:12.5px}
.ep-pw>small,.ep-tell>small{margin-top:6px;font-size:11px}

/* V186 — security code: the printed code and the box you type it in
   are the same size, side by side */
.cap-row{gap:10px;align-items:stretch}
.cap-row .cap-code{flex:1 1 0;display:flex;align-items:center;justify-content:center;
  min-width:0;padding:11px 8px;font-size:17px;letter-spacing:.16em;text-align:center}
.cap-row input{flex:1 1 0;min-width:0;padding:11px 8px;font-size:17px;height:auto}
@media(max-width:420px){.cap-row .cap-code,.cap-row input{font-size:15px;letter-spacing:.1em}}

/* =====================================================================
   V187 — Profile Management shows every credential field, in three
   columns. It used to carry four fields while the certificate demanded
   ten, so a candidate could fill this page in completely and still be
   stopped at the certificate with no idea what was missing.
   ===================================================================== */
.pm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 18px;margin:4px 0 6px}
.pm-field{display:flex;flex-direction:column;gap:5px;min-width:0;margin:0}
.pm-field.pm-wide{grid-column:span 2}
.pm-label{display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  font-weight:700;font-size:12.5px;color:var(--ink);line-height:1.3}
.pm-field input,.pm-field textarea{width:100%;padding:10px 12px;font-size:13.5px}
.pm-field textarea{resize:vertical;min-height:44px}
.pm-field input.is-locked,.pm-field textarea.is-locked{background:var(--soft,#f3f6fa);color:var(--muted)}
.pm-field.is-blank input,.pm-field.is-blank textarea{border-color:#e9b4b4;background:#fffafa}
.pm-field small{font-size:11px;line-height:1.45}
.pm-note{margin:2px 0 6px;padding:10px 13px;border-radius:11px;font-size:12.6px;line-height:1.55;
  background:#eef4ff;border:1px solid #ccdcf7;color:#26456f}
.pm-note.pm-todo{background:#fff8e6;border-color:#f0d089;color:#7a5a10}
.pm-form .profile-row{margin-bottom:4px}
:root[data-theme=dark] .pm-field.is-blank input,
:root[data-theme=dark] .pm-field.is-blank textarea{background:#2a1c1c;border-color:#6b3a3a}
:root[data-theme=dark] .pm-note{background:#16233a;border-color:#26456f;color:#cfe0f7}
:root[data-theme=dark] .pm-note.pm-todo{background:#33280f;border-color:#6b5520;color:#f0d89a}
@media(max-width:1000px){.pm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .pm-grid{grid-template-columns:1fr}
  .pm-field.pm-wide{grid-column:auto}
}

/* =====================================================================
   V188 — dashboard: notifications folded, email status in the hero
   <details> is used rather than a script, so the fold works even if
   JavaScript fails and it is reachable by keyboard.
   ===================================================================== */
.notif-card{padding:0;overflow:hidden}
.notif-fold summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:16px 20px;user-select:none;transition:background .15s ease}
.notif-fold summary::-webkit-details-marker{display:none}
.notif-fold summary:hover{background:var(--hi-soft)}
.notif-fold summary:focus-visible{outline:2px solid var(--o);outline-offset:-2px}
.nf-title{font-size:17px;font-weight:800;color:var(--ink);flex:none}
.nf-count{flex:none;min-width:22px;height:22px;padding:0 7px;border-radius:999px;
  background:var(--o);color:#fff;font-size:11.5px;font-weight:800;
  display:inline-grid;place-items:center}
.nf-hint{flex:1;text-align:right;font-size:12px;font-weight:700;color:var(--muted)}
.nf-chev{flex:none;color:var(--muted);font-size:13px;transition:transform .18s ease}
.notif-fold[open] .nf-chev{transform:rotate(180deg)}
.notif-fold[open] .nf-hint::after{content:""}
.notif-fold:not([open]) .nf-hint::after{content:""}
.notif-fold[open] .nf-hint{visibility:hidden}
.nf-body{padding:0 20px 16px;display:flex;flex-direction:column;gap:9px}
.nf-body .notice{margin:0}
/* nothing to read — say so on the closed row and dim the count */
.notif-fold .nf-count:empty,.notif-fold .nf-count:where(:not(:has(*)))[data-zero]{opacity:.5}

/* the verification mark sits on the same line as the address in the hero */
.hero-email{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.hero-email .ev-seal,.hero-email .ev-link{margin-left:2px}
.nf-count.is-zero{background:var(--line);color:var(--muted)}

/* --- paired page tabs: Messages|Email, Certificates|Issuance ---------
   Two equal columns so the buttons are always the same width whatever the
   label, inline on one row, themed with the same accent as everything else. */
.adm-tabs{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px;margin:0 0 22px}
.adm-tabs a{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:12px 20px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  font-weight:800;font-size:15px;line-height:1;text-align:center;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,
             background .18s ease,color .18s ease}
.adm-tabs a:hover{border-color:var(--o);color:var(--o);background:var(--hi-soft);
  box-shadow:0 6px 18px var(--hi-ring);transform:translateY(var(--hi-lift))}
.adm-tabs a.active{background:var(--o);border-color:var(--o);color:#fff;
  box-shadow:0 8px 22px var(--hi-ring)}
.adm-tabs a.active:hover{transform:none;background:var(--o);color:#fff}
.adm-tabs a:focus-visible{outline:2px solid var(--o);outline-offset:3px}
.adm-tabs .t-ic{display:inline-flex;flex:0 0 auto}
.adm-tabs .t-ic svg{display:block}
.content>.adm-tabs{margin-top:2px}
@media(max-width:700px){
  .adm-tabs{max-width:none;gap:9px}
  .adm-tabs a{min-height:44px;padding:10px 12px;font-size:13.5px;gap:6px}
}

/* --- V196: scrolling inside the message overlay ----------------------
   .im-chat and .im-list are grid items, and a grid item's min-height is
   auto, so it refuses to shrink below its content — which meant .im-thread
   could never scroll and the thread simply overflowed the panel instead.
   Zeroing the minimum down the whole chain lets overflow:auto engage. */
.im-body{min-height:0;grid-template-rows:minmax(0,1fr)}
.im-chat{min-height:0;overflow:hidden}
.im-list{min-height:0}
.im-thread{min-height:0;overflow-y:auto;overscroll-behavior:contain}

/* Visible scrollbars. macOS hides overlay scrollbars until you scroll, so
   long threads look like they simply end. These stay on screen. */
.im-thread,.im-list,.inbox-body,.notif-body,.thread-body,.prog-scroll,.gm-list{
  scrollbar-width:thin;scrollbar-color:var(--o) transparent}
.im-thread::-webkit-scrollbar,.im-list::-webkit-scrollbar,.inbox-body::-webkit-scrollbar,
.notif-body::-webkit-scrollbar,.thread-body::-webkit-scrollbar,.prog-scroll::-webkit-scrollbar,
.gm-list::-webkit-scrollbar{width:10px;height:10px}
.im-thread::-webkit-scrollbar-track,.im-list::-webkit-scrollbar-track,
.inbox-body::-webkit-scrollbar-track,.notif-body::-webkit-scrollbar-track,
.thread-body::-webkit-scrollbar-track,.prog-scroll::-webkit-scrollbar-track,
.gm-list::-webkit-scrollbar-track{background:transparent}
.im-thread::-webkit-scrollbar-thumb,.im-list::-webkit-scrollbar-thumb,
.inbox-body::-webkit-scrollbar-thumb,.notif-body::-webkit-scrollbar-thumb,
.thread-body::-webkit-scrollbar-thumb,.prog-scroll::-webkit-scrollbar-thumb,
.gm-list::-webkit-scrollbar-thumb{
  background:var(--o);border-radius:999px;border:3px solid transparent;background-clip:content-box}
.im-thread::-webkit-scrollbar-thumb:hover,.im-list::-webkit-scrollbar-thumb:hover,
.inbox-body::-webkit-scrollbar-thumb:hover,.notif-body::-webkit-scrollbar-thumb:hover,
.thread-body::-webkit-scrollbar-thumb:hover,.prog-scroll::-webkit-scrollbar-thumb:hover,
.gm-list::-webkit-scrollbar-thumb:hover{filter:brightness(1.15)}

/* --- V196: dark mode, every surface -----------------------------------
   Dark mode only ever recoloured a handful of elements. Everything else
   kept a hardcoded near-white background, so on the default (orange)
   palette the hero, the messenger and the overlays stayed light while the
   text turned pale — the hero heading was white on white. These are the
   surfaces that were left behind, all driven by the dark tokens already
   defined above (--bg #0f172a, --card #182235, --line #2d3a4e). */

/* page furniture */
:root[data-theme=dark] .app{background:var(--bg)}
:root[data-theme=dark] .profile-hero{background:var(--card);border-color:var(--line)}
:root[data-theme=dark] .profile-hero .hero-copy h1{color:var(--ink)}
:root[data-theme=dark] .profile-hero .hero-copy p,
:root[data-theme=dark] .profile-hero .hero-copy small{color:var(--muted)}
:root[data-theme=dark] .table-wrap{background:transparent}
:root[data-theme=dark] .search input{background:#101827;color:var(--ink)}
:root[data-theme=dark] .card,:root[data-theme=dark] .metric{background:var(--card);border-color:var(--line)}
:root[data-theme=dark] .metric b{color:#f4a261}
:root[data-theme=dark] .hero-tags span{background:#22303f;color:#cfe6dd}
:root[data-theme=dark] .hero-tags span+span{background:#232a33;color:#c4c9d1}

/* sign-in and account screens */
:root[data-theme=dark] .auth-bg,:root[data-theme=dark] .auth-body{background:var(--bg)}
:root[data-theme=dark] 
:root[data-theme=dark] 
:root[data-theme=dark] 

/* the message overlay */
:root[data-theme=dark] .inbox-panel{background:var(--bg)}
:root[data-theme=dark] .chat-item,:root[data-theme=dark] .empty-chat{
  background:var(--card);border-color:var(--line);color:var(--ink)}
:root[data-theme=dark] .inbox-compose{background:var(--card);border-top-color:var(--line)}
:root[data-theme=dark] .im-top,:root[data-theme=dark] .im-chat-head,
:root[data-theme=dark] .im-compose{background:var(--card);border-color:var(--line);color:var(--ink)}
:root[data-theme=dark] .im-chat{background:#141d2c}
:root[data-theme=dark] .im-list{background:var(--card);border-right-color:var(--line)}
:root[data-theme=dark] .im-bubble{background:var(--card);border-color:var(--line);color:var(--ink)}
:root[data-theme=dark] .im-msg.mine .im-bubble{background:#1d3a33;border-color:#2b5349}
:root[data-theme=dark] .im-contact:hover{background:#1e2a3d}
:root[data-theme=dark] .im-contact.active{background:#1d3a33}
:root[data-theme=dark] .im-top .inbox-close{background:#2a3550;color:var(--ink)}
:root[data-theme=dark] .im-empty{color:var(--muted)}

/* notifications and the thread viewer */
:root[data-theme=dark] .notif-panel,:root[data-theme=dark] .thread-panel{background:var(--bg)}
:root[data-theme=dark] .notif-item{background:var(--card);border-color:var(--line);color:var(--ink)}
:root[data-theme=dark] .cm-row,:root[data-theme=dark] .support-item{
  background:var(--card);border-color:var(--line)}
:root[data-theme=dark] .attach-btn{background:var(--card);color:var(--ink)}

/* course player controls */
:root[data-theme=dark] .lms-otoggle,:root[data-theme=dark] .lms-complete,
:root[data-theme=dark] .lms-expand,:root[data-theme=dark] .lms-nav{
  background:var(--card);border-color:var(--line);color:var(--ink)}

/* payments and admin panels */
:root[data-theme=dark] .candidate-payment-card pre{background:#101827;color:var(--muted)}
:root[data-theme=dark] .admin-qr-preview{background:var(--card)}
:root[data-theme=dark] .payment-setting-card{background:#101827;border-color:var(--line)}
:root[data-theme=dark] .gm-list,:root[data-theme=dark] .gm-rail{border-color:var(--line)}

/* the paired tab buttons read as outlines until selected */
:root[data-theme=dark] .adm-tabs a{background:var(--card);border-color:var(--line);color:var(--muted)}
:root[data-theme=dark] .adm-tabs a.active{background:var(--o);border-color:var(--o);color:#fff}
:root[data-theme=dark] .im-foot{background:var(--card);border-top-color:var(--line)}
:root[data-theme=dark] .im-foot .btn.secondary{background:#2a3550;color:var(--ink)}

/* --- online payment providers (Stripe / Paddle / Lemon Squeezy) -------- */
.gw-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:4px 0 20px}
.gw-opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:16px;
  padding:14px 15px;background:var(--card);cursor:pointer;font-weight:400;margin:0;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.gw-opt:hover{border-color:var(--o);background:var(--hi-soft);box-shadow:0 6px 18px var(--hi-ring)}
.gw-opt input{width:auto;margin-top:3px;flex:0 0 auto}
.gw-opt:has(input:checked){border-color:var(--o);box-shadow:0 0 0 1px var(--o) inset;background:var(--hi-soft)}
/* the ring marks what is SELECTED, not what was last saved — it used to be a
   server-rendered class, so it stayed on the old provider until you saved */
.gw-opt.is-active{border-color:var(--line);box-shadow:none}
.gw-opt-body{display:block;min-width:0}
.gw-opt-body b{display:flex;align-items:center;gap:8px;font-size:15px;margin-bottom:4px}
.gw-opt-body small{display:block;color:var(--muted);font-size:12.5px;line-height:1.5}
.gw-ok,.gw-no{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 8px;border-radius:999px}
.gw-ok{background:#dcfce7;color:#166534}
.gw-no{background:#fee2e2;color:#991b1b}
.gw-box{border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin:0 0 16px;background:var(--bg)}
.gw-box.is-active{border-color:var(--o);background:var(--hi-soft)}
.gw-box legend{font-weight:800;padding:0 8px;display:flex;align-items:center;gap:8px}
.gw-tag{background:var(--o);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px}
.gw-hook{font-size:12.5px;color:var(--muted);margin:12px 0 10px;line-height:1.6}
.gw-hook code{display:inline-block;margin-top:3px;background:#0d1424;color:#dbe6ff;
  padding:6px 10px;border-radius:8px;font-size:12px;word-break:break-all}
:root[data-theme=dark] .gw-opt,:root[data-theme=dark] .gw-box{background:var(--card);border-color:var(--line)}
:root[data-theme=dark] .gw-box.is-active,:root[data-theme=dark] .gw-opt:hover{background:#1e2a3d}
:root[data-theme=dark] .gw-ok{background:#14361f;color:#7ee2a8}
:root[data-theme=dark] .gw-no{background:#3a1a1a;color:#ffa1a1}
@media(max-width:700px){.gw-pick{grid-template-columns:1fr}}

/* --- the two verify-bar icons ----------------------------------------
   Sized in em so they sit on the text baseline at the same visual weight
   as the words beside them, instead of the oversized font glyphs before. */
.vb-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:1.02em;height:1.02em;vertical-align:-.14em}
.vb-svg{width:100%;height:100%;display:block}
.vb-line{display:flex;align-items:flex-start;gap:0;line-height:1.55}
.vb-line .vb-ic{margin-top:.16em}
@media(max-width:700px){.vb-ic{width:.96em;height:.96em}}

/* --- Payments page, arranged -----------------------------------------
   Was a long undifferentiated stack of cards with emoji headings and a
   plain button at the very bottom. Now: a hero, a stat strip, drawn
   icons, provider panels that fold shut, and a save bar that follows. */
.pay-hero{margin-bottom:18px}
.adm-stats,.pay-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:0 0 22px}
.adm-stat,.pay-stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px 17px;
  box-shadow:0 8px 24px rgba(15,23,42,.05)}
.adm-stat b,.pay-stat b{display:block;font-size:21px;font-weight:800;line-height:1.15;color:var(--o);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-stat small,.pay-stat small{display:block;margin-top:4px;color:var(--muted);font-size:12px;letter-spacing:.02em}
.adm-stat.is-alert b,.pay-stat.is-alert b{color:#dc2626}
.adm-stat.is-good b{color:#15803d}
.adm-stat.is-alert,.pay-stat.is-alert{border-color:#f3b4b4}

.pay-card{margin:0 0 20px;padding:22px 24px;border-radius:18px}
.pay-card-head h2{font-size:17px;gap:10px;align-items:center}
.pay-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:34px;height:34px;border-radius:11px;background:var(--hi-soft);color:var(--o)}
.pay-ic svg{width:20px;height:20px;display:block}

/* provider panels ---------------------------------------------------- */
.gw-box{border:1px solid var(--line);border-radius:16px;margin:0 0 12px;background:var(--bg);
  padding:0;overflow:hidden;transition:border-color .18s ease,background .18s ease}
.gw-box.is-active{border-color:var(--o);background:var(--hi-soft)}
.gw-sum{display:flex;align-items:center;gap:10px;padding:14px 17px;cursor:pointer;
  font-weight:800;font-size:15px;list-style:none;user-select:none}
.gw-sum::-webkit-details-marker{display:none}
.gw-sum:hover{background:var(--hi-soft)}
.gw-sum-name{flex:1;min-width:0}
.gw-caret{width:9px;height:9px;flex:0 0 auto;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-left:2px;transition:transform .2s ease}
.gw-box[open] .gw-caret{transform:rotate(-135deg)}
.gw-fields{padding:2px 17px 17px;border-top:1px solid var(--line)}
.gw-box.is-active .gw-fields{border-top-color:rgba(232,100,10,.28)}
.gw-fields>p:first-child{margin-top:12px}

/* save bar ----------------------------------------------------------- */
.pay-save{position:sticky;bottom:0;z-index:4;display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin:4px 0 0;padding:14px 20px;border:1px solid var(--line);border-top-width:2px;
  border-radius:16px 16px 0 0;background:var(--card);
  box-shadow:0 -10px 30px rgba(15,23,42,.10);backdrop-filter:blur(8px)}
.pay-save-note{color:var(--muted);font-size:13px}
.pay-save .btn{padding:12px 28px}

:root[data-theme=dark] .adm-stat,:root[data-theme=dark] .pay-stat,:root[data-theme=dark] .pay-save{background:var(--card);border-color:var(--line)}
:root[data-theme=dark] .gw-box{background:var(--card);border-color:var(--line)}
:root[data-theme=dark] .gw-box.is-active{background:#1e2a3d}
:root[data-theme=dark] .adm-stat.is-alert,:root[data-theme=dark] .pay-stat.is-alert{border-color:#6b3535}
:root[data-theme=dark] .adm-stat.is-good b{color:#5fd28f}

@media(max-width:700px){
  .adm-stats,.pay-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .adm-stat,.pay-stat{padding:12px 13px;border-radius:13px}
  .adm-stat b,.pay-stat b{font-size:17px}
  .pay-card{padding:16px 15px;border-radius:15px}
  .pay-ic{width:29px;height:29px;border-radius:9px}
  .pay-ic svg{width:17px;height:17px}
  .gw-sum{padding:12px 13px;font-size:14px;flex-wrap:wrap}
  .gw-fields{padding:2px 13px 14px}
  .pay-save{flex-direction:column;align-items:stretch;gap:9px;padding:12px 14px}
  .pay-save-note{text-align:center;font-size:12px}
  .pay-save .btn{width:100%}
}

/* one rhythm for every admin page opening */
.admin-hero{margin-bottom:18px}
.admin-hero .hero-copy h1{margin-bottom:6px}
.admin-hero .hero-copy p{max-width:78ch}
.adm-stats{margin-bottom:22px}
.adm-stat b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* candidate pages open the same way the admin ones do */
.student-hero{margin-bottom:18px;padding:26px 30px}
.student-hero .hero-copy h1{font-size:clamp(25px,3.4vw,36px);margin-bottom:6px}
.student-hero .hero-copy p{max-width:78ch;font-size:15px;margin:0}
.student-hero .eyebrow{margin-bottom:6px}
.pay-choose-h{margin:4px 0 14px;font-size:18px}
.cand-toolbar,.inbox-toolbar{margin-bottom:14px}
@media(max-width:700px){
  .student-hero{padding:18px 16px}
  .student-hero .hero-copy p{font-size:13.5px}
}

/* --- course slides: reading comfort ----------------------------------
   Running text was set to the full 1180px of the canvas. At 16px that is
   well over 120 characters a line, which is where the eye starts losing
   its place returning to the left margin. Prose is now held to a normal
   measure while tables, figures and any authored grid keep the full width
   they were designed for. */
.pack-slide > p,
.pack-slide > ul,
.pack-slide > ol,
.pack-slide > blockquote,
.pack-slide > h1,
.pack-slide > h2,
.pack-slide > h3,
.pack-slide > h4{max-width:74ch}
.pack-slide.pk-wide > *{max-width:none}

/* headings get air above and a tighter join to the text they introduce */
.pack-slide h2{margin-top:26px}
.pack-slide h3{margin-top:20px}
.pack-slide h1+p,.pack-slide h2+p,.pack-slide h3+p,
.pack-slide h1+ul,.pack-slide h2+ul,.pack-slide h3+ul{margin-top:0}
.pack-slide li{margin:6px 0;padding-left:2px}
.pack-slide li::marker{font-weight:700}

/* tables inside a slide read as data, not as a wall of borders */
.pack-slide table{border:1px solid var(--line);border-radius:12px;overflow:hidden;
  font-size:.94em;background:var(--card)}
.pack-slide table th{background:var(--hi-soft);color:var(--o);text-align:left;
  font-weight:800;font-size:.86em;letter-spacing:.04em;text-transform:uppercase;
  padding:10px 13px;border-bottom:1px solid var(--line)}
.pack-slide table td{padding:10px 13px;border-bottom:1px solid var(--line);vertical-align:top}
.pack-slide table tr:last-child td{border-bottom:0}
.pack-slide table tbody tr:nth-child(even) td{background:rgba(127,127,127,.045)}

/* a quotation or aside becomes a marked-off note rather than italic drift */
.pack-slide blockquote{margin:16px 0;padding:13px 17px;border-left:3px solid var(--o);
  background:var(--hi-soft);border-radius:0 12px 12px 0;font-style:normal}
.pack-slide blockquote p:last-child{margin-bottom:0}

/* figures sit centred with room to breathe */
.pack-slide img,.pack-slide svg{display:block;margin:16px auto;border-radius:10px}
.pack-slide figure{margin:18px 0;text-align:center}
.pack-slide figcaption{margin-top:8px;font-size:.86em;color:var(--muted)}

/* --- player chrome ---------------------------------------------------- */
.lms-mod-mark svg,.lms-mod-no svg,.ll-ic svg,.ll-ck svg,
.lms-complete svg,.lms-tip svg,.er-mark svg,.final-locked svg{display:block}
.lms-mod-mark,.ll-ck{display:inline-flex;align-items:center;justify-content:center}
.lms-complete,.lms-tip span,.final-locked{display:inline-flex;align-items:center;gap:8px}
.lms-tip span{align-items:flex-start}
.lms-tip svg{margin-top:1px;flex:0 0 auto}
.er-mark{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;flex:0 0 auto}
.er-q.ok .er-mark{background:#dcfce7;color:#166534}
.er-q.bad .er-mark{background:#fee2e2;color:#991b1b}
.dodont .dd b{display:inline-flex;align-items:center;gap:7px}
.assess-pass-badge{display:grid;place-items:center}
.assess-pass-badge svg{width:26px;height:26px}

:root[data-theme=dark] .pack-slide table{background:var(--card);border-color:var(--line)}
:root[data-theme=dark] .pack-slide table td{border-bottom-color:var(--line)}
:root[data-theme=dark] .pack-slide table tbody tr:nth-child(even) td{background:rgba(255,255,255,.035)}
:root[data-theme=dark] .er-q.ok .er-mark{background:#14361f;color:#7ee2a8}
:root[data-theme=dark] .er-q.bad .er-mark{background:#3a1a1a;color:#ffa1a1}

@media(max-width:900px){
  .pack-slide > p,.pack-slide > ul,.pack-slide > ol,.pack-slide > blockquote,
  .pack-slide > h1,.pack-slide > h2,.pack-slide > h3,.pack-slide > h4{max-width:none}
  .pack-slide h2{margin-top:20px}
  .pack-slide table th,.pack-slide table td{padding:8px 10px}
}

/* --- course page: the drawn icons that replaced the symbol font --------
   The page carried 71 characters like ◈ ▤ ◹ ◱ ⚿ ♙ ∞ ↺, which have no glyph
   in the default macOS or Windows UI fonts — they came out as empty boxes,
   or at a size and weight nothing else on the page shared. */
.ci-fact-ic,.ci-learn-ic,.ci-benefit-ic,.ci-res-ic,.ci-mod-no,.ci-topic,.ci-enrolled-pill{
  display:inline-flex;align-items:center;justify-content:center}
.ci-topic,.ci-enrolled-pill{gap:6px;justify-content:flex-start}
.ci-fact-ic svg,.ci-learn-ic svg,.ci-benefit-ic svg,.ci-res-ic svg,
.ci-mod-no svg,.ci-topic svg,.ci-enrolled-pill svg{display:block;flex:0 0 auto}
.ci-learn-ic,.ci-benefit-ic,.ci-res-ic,.ci-fact-ic{
  width:38px;height:38px;border-radius:12px;background:var(--ci-o-soft,rgba(232,100,10,.10));
  color:var(--o);flex:0 0 auto}
.ci-topic svg{color:var(--o)}
@media(max-width:700px){
  .ci-learn-ic,.ci-benefit-ic,.ci-res-ic,.ci-fact-ic{width:32px;height:32px;border-radius:10px}
}

/* --- slides fit the canvas, not the window ---------------------------
   Course packs collapse their grids with @media(max-width:760–980px).
   That measures the BROWSER, but a slide never gets the browser's width:
   the portal sidebar, the course outline, the deck and the canvas padding
   take 848px before any text is drawn. On a 1280px laptop the slide has
   432px and the pack, seeing "1280", still lays out four columns of 108px.

   Container queries ask the canvas how wide IT is, so the same rules also
   do the right thing when the outline is hidden or the stage is expanded —
   something a viewport query can never react to. */
.pk-canvas{container-type:inline-size;container-name:slide}

/* grid and flex children must be allowed to shrink, or a long word sets a
   minimum track width and pushes the whole row out of the canvas */
.pk-canvas .pack-slide *{min-width:0}
.pk-canvas .pack-slide table{min-width:auto}

@container slide (max-width: 1000px){
  :root .pk-canvas[class] .pack-slide[class][class] *{
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important}
}
@container slide (max-width: 780px){
  :root .pk-canvas[class] .pack-slide[class][class] *{
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important}
  :root .pk-canvas[class] .pack-slide[class][class] *{gap:14px}
}
@container slide (max-width: 560px){
  :root .pk-canvas[class] .pack-slide[class][class] *{grid-template-columns:1fr!important}
  .pk-canvas{padding:22px 18px}
  .pk-canvas .pack-slide{font-size:15.2px}
}

/* anything laid out as a row wraps rather than overflowing */
@container slide (max-width: 780px){
  :root .pk-canvas[class] .pack-slide[class][class] *{flex-wrap:wrap}
}

/* a wide table scrolls inside its own box instead of widening the slide */
.pk-canvas .pack-slide table{display:block;width:100%;overflow-x:auto;
  -webkit-overflow-scrolling:touch}

/* decorative absolute elements stay inside the slide they belong to */
.pk-canvas .pack-slide{position:relative}
.pk-canvas{overflow:hidden}

/* Browsers without container queries: assume the outline is showing and
   key off the viewport with the 848px of chrome subtracted. */
@supports not (container-type: inline-size){
  @media (max-width: 1848px){
    :root .pk-canvas[class] .pack-slide[class][class] *{
      grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important}
  }
  @media (max-width: 1408px){
    :root .pk-canvas[class] .pack-slide[class][class] *{grid-template-columns:1fr!important}
  }
}

/* =====================================================================
   MOBILE / INSTALLED APP
   The portal was responsive but still behaved like a web page: grey tap
   flashes, iOS zooming into every field, 26px touch targets, and a status
   bar that stayed the browser's colour. These are the things that make the
   difference between a site on a phone and an app.
   ===================================================================== */

/* 1. Taps. A flashing grey rectangle on every touch is the clearest tell
      that something is a web page. Replace it with a real pressed state. */
a,button,input,select,textarea,label,summary,[role=button],.btn,
.side a,.mobile-nav a,.mobile-nav button,.adm-tabs a,.gw-opt,.pm-opt{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation}
@media (hover:none){
  .btn:active,.adm-tabs a:active,.mobile-nav a:active,.mobile-nav button:active,
  .gw-opt:active,.pm-opt:active,.candidate-card:active,.course-card:active,
  .dash-course:active,.dl-row:active,.notif-item:active,.im-contact:active{
    transform:scale(.975);
    transition:transform .06s ease}
  /* hover styling never applies on a touch screen — stop it sticking after a tap */
  .btn:hover,.adm-tabs a:hover,.filter-chips button:hover{transform:none;box-shadow:none}
}

/* 2. Text fields. Below 16px iOS zooms the whole page on focus and does not
      zoom back out. This one rule is the single biggest app-feel fix. */
@media (max-width:900px){
  input,select,textarea,.search input{font-size:16px}
  input[type=checkbox],input[type=radio]{font-size:inherit}
}

/* 3. Touch targets. 44px is the accepted minimum; small buttons were 26px. */
@media (max-width:900px){
  .btn{min-height:44px;padding:12px 18px}
  .btn.small{min-height:38px;padding:9px 14px;font-size:13px}
  .actions .btn.small{flex:1 1 auto}
  .table td .btn.small{min-height:36px}
  .filter-chips button,.course-filters button,.course-cats button{min-height:40px;padding:10px 16px}
  .top-icon{width:44px;height:44px}
  .lms-nav,.lms-complete,.lms-expand,.lms-otoggle{min-height:44px}
  .switch-line,.pm-opt,.gw-opt{min-height:44px}
  summary{min-height:44px;display:flex;align-items:center}
}

/* 4. Scrolling. Contain the rubber band so the page behind never shows, and
      keep momentum in every pane that scrolls. */
@media (max-width:900px){body{overscroll-behavior-y:none}}
.table-wrap,.log-scroll,.prog-scroll,.im-thread,.im-list,.gm-list,
.notif-body,.inbox-body,.candidate-scroll,.pack-slide table{
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* 5. Safe areas. viewport-fit=cover lets the app paint under the notch and
      the gesture bar, so the insets have to be paid back manually. */
.mobile-nav{padding-bottom:max(6px,env(safe-area-inset-bottom))}
@media (max-width:900px){
  /* Only phones have insets to pay back. Written without this query, these
     replaced the desktop padding of 34px with 14px and every card stretched
     wider as a result. */
  .top{padding-left:max(13px,env(safe-area-inset-left));
       padding-right:max(13px,env(safe-area-inset-right))}
  .content{padding-left:max(14px,env(safe-area-inset-left));
           padding-right:max(14px,env(safe-area-inset-right))}
}

/* 6. The bottom bar. Six items, so they need the room; a blurred bar and a
      marker over the active one read as native. */
@media (max-width:900px){
  .mobile-nav{
    grid-template-columns:repeat(6,1fr)!important;
    background:color-mix(in srgb,var(--card) 88%,transparent);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-top:1px solid var(--line);
    box-shadow:0 -6px 24px rgba(15,23,42,.09)}
  .mobile-nav a,.mobile-nav button{
    position:relative;min-height:56px;justify-content:center;gap:3px;
    color:var(--muted);padding:8px 2px}
  .mobile-nav small{font-size:10.5px;font-weight:600;letter-spacing:0}
  .mobile-nav a.active,.mobile-nav button.active{color:var(--o);font-weight:800}
  .mobile-nav a.active::before{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:26px;height:3px;border-radius:0 0 4px 4px;background:var(--o)}
  .content{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}

/* 7. Nothing may scroll sideways. overflow-x:hidden on the root turns the
      root into a scroll container, which is what killed vertical scrolling
      after sign-in. overflow-x:clip contains the same overflow WITHOUT
      creating a scroll container, and it is applied to the app shell rather
      than to html/body. */
.app{overflow-x:clip}
@supports not (overflow-x:clip){.app{overflow-x:hidden}}
@media (max-width:900px){
  .card,.pay-card,.gw-box,.adm-stat,.profile-hero{max-width:100%}
  pre,code{overflow-x:auto;word-break:break-word}
  .table-wrap{max-width:100%}
}

/* 8. Selection and drag. Long-pressing chrome should not offer to copy it. */
.side,.mobile-nav,.top-actions,.adm-tabs,.lms-topline,.lms-foot,.pay-save{
  -webkit-user-select:none;user-select:none}
.mobile-nav svg,.side svg{-webkit-user-drag:none}

/* 9. Installed standalone: no browser chrome, so the header pays the notch. */
@media (display-mode:standalone){
  .top{padding-top:max(10px,env(safe-area-inset-top))}
  body{overscroll-behavior:none}
}

/* =====================================================================
   SLIDE STYLE NORMALISATION
   The 197 packs were authored in three generations and they do not look
   like one another:

     "ultra"    INS, most ISO, some SAF — rich, fills the canvas
     "deepfmt"  all ENV, all WAH, most SAF — thinner, stacks vertically
     "stub"     92 modules across 24 courses — a 760px Georgia serif
                column with everything else empty around it

   Packs are not re-authored here. These rules put the two older
   generations on the same footing as the newest one.
   ===================================================================== */

/* --- 1. the stub modules ---------------------------------------------
   A bare <article style="max-width:760px;margin:24px auto;font-family:
   Georgia,serif"> — a narrow vertical strip of serif text in the middle
   of a wide canvas. Inline styles, so this has to out-rank them. */
:root .pk-canvas .pack-slide > article[style]{
  max-width:none!important;
  margin:0!important;
  font-family:inherit!important;
  color:inherit!important;
  line-height:1.68!important}
:root .pk-canvas .pack-slide > article[style] > p[style]{
  font-family:inherit!important}

/* give the stub the shape the other slides have */
.pk-canvas .pack-slide > article[style] > p:first-of-type{
  display:inline-block;background:var(--hi-soft);color:var(--o);
  border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;margin:0 0 14px}
.pk-canvas .pack-slide > article[style] > h1{
  font-size:clamp(24px,2.6vw,34px);line-height:1.2;margin:0 0 14px}
.pk-canvas .pack-slide > article[style] > h3{
  font-size:clamp(17px,1.8vw,21px);margin:26px 0 10px;
  padding-bottom:8px;border-bottom:2px solid var(--hi-soft)}
/* the key-points list becomes cards, the way the richer packs present them */
.pk-canvas .pack-slide > article[style] > ul{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;list-style:none;padding:0;margin:0 0 18px;max-width:none}
.pk-canvas .pack-slide > article[style] > ul > li{
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--o);
  border-radius:12px;padding:13px 15px;margin:0;line-height:1.6}
.pk-canvas .pack-slide > article[style] > ul > li b{color:var(--o);display:block;margin-bottom:3px}
.pk-canvas .pack-slide > article[style] code{
  background:var(--hi-soft);color:var(--o);padding:2px 7px;border-radius:6px;
  font-size:.9em;white-space:nowrap}

/* --- 2. deepfmt: stop it stacking into a tall thin column ------------- */
:root .pk-canvas .pack-slide article[class]{max-width:none!important;margin:0!important}
.pk-canvas .pack-slide .topic,
.pk-canvas .pack-slide .deep-expansion{margin:0 0 18px}
.pk-canvas .pack-slide .topic-body{max-width:none}
/* its own two- and three-up blocks fill the width rather than sitting narrow */
.pk-canvas .pack-slide .deep-grid,
.pk-canvas .pack-slide .lens,
.pk-canvas .pack-slide .grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.pk-canvas .pack-slide .flow{gap:10px}
.pk-canvas .pack-slide .step{min-width:0;flex:1 1 150px}
/* notes and callouts get the same shape the newer packs use */
.pk-canvas .pack-slide .deep-note,
.pk-canvas .pack-slide .call{
  border-radius:12px;padding:13px 16px;margin:12px 0;border-left-width:3px;border-left-style:solid}
.pk-canvas .pack-slide .tag{
  display:inline-block;background:var(--hi-soft);color:var(--o);
  border-radius:999px;padding:5px 12px;font-size:12px;font-weight:800;letter-spacing:.04em}
.pk-canvas .pack-slide .visual img{max-height:none;width:100%;object-fit:contain}
.pk-canvas .pack-slide .deep-table{width:100%}

/* --- 3. a slide fills the stage instead of leaving it empty ----------- */
.pk-canvas{display:flex;flex-direction:column}
.pk-canvas .pack-slide{flex:1 1 auto}

/* --- the slide navigation bar -----------------------------------------
   It spanned the full width of the stage and sat at the very bottom of it,
   which on a short slide left it stranded far below the content. It is now
   a control strip: held to a comfortable width, centred, and stuck to the
   bottom of the stage so it stays reachable however long the slide is. */
.lms-foot{
  position:sticky;bottom:0;z-index:4;
  width:min(680px,100%);margin:0 auto;
  padding:11px 14px;gap:12px;
  border:1px solid var(--line);border-radius:16px 16px 0 0;
  background:color-mix(in srgb,var(--card) 92%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 -6px 20px rgba(15,23,42,.08)}
.lms-nav{padding:10px 15px;font-size:13px;flex:0 0 auto}
.lms-prog{flex:1 1 auto;min-width:0}
.lms-prog-tx{font-size:12.5px;white-space:nowrap}
.lms-prog-row{margin-top:5px}
.lms-tip{width:min(680px,100%);margin:0 auto;border-radius:0;font-size:12.5px;padding:10px 16px}
@media(max-width:900px){
  .lms-foot{width:100%;border-radius:0;padding:10px 12px;gap:8px}
  .lms-tip{width:100%}
  .lms-nav{padding:10px 12px;font-size:12.5px}
}
@media(max-width:720px){
  /* On a short screen a sticky bar eats too much of the slide — the deck
     already scrolls with the page here, so it rides along instead. */
  .lms-foot{position:static;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* --- the empty space under short slides -------------------------------
   .pk-canvas carried min-height:calc(100vh - 250px). On a 1250px screen
   that reserves about a thousand pixels of canvas no matter what the slide
   holds. The richer packs fill it, so nobody noticed; an ISO, ENV or WAH
   slide is short, so the canvas stayed tall, empty below the content, and
   pushed Previous / Next hundreds of pixels away from the slide.

   The canvas now takes its height from the slide, with a floor that keeps a
   short slide looking like a slide rather than a strip. */
:root .pk-canvas{min-height:340px}
@media(max-width:900px){:root .pk-canvas{min-height:260px}}

/* the bar and the tip sit against the slide, as they do on the other courses */
.lms-deck{flex:0 1 auto}
.lms-foot{margin-top:0}
.lms-tip{margin-top:0}

/* --- the locked final-exam note, in the portal's own language ---------- */
.final-exam{margin-top:22px}
.final-locked{
  background:var(--hi-soft);
  border:1px solid var(--line);
  border-left:3px solid var(--o);
  border-radius:12px;
  padding:14px 18px;
  text-align:left;
  font-weight:700;
  font-size:14px;
  color:var(--ink);
  gap:10px}
.final-locked svg{color:var(--o);flex:0 0 auto}
:root[data-theme=dark] .final-locked{background:#1e2a3d;border-color:var(--line);color:var(--ink)}
.sw-ver{display:inline-block;background:var(--hi-soft);color:var(--o);border-radius:999px;
  padding:3px 10px;font-size:11.5px;font-weight:800;letter-spacing:.03em;vertical-align:2px}

/* --- the password rule, one line ---------------------------------------
   Replaces the "Minimum Password Requirements" panel: a five-item checklist
   in its own card, which took more room than the form it described. */
.pw-hint{display:flex;align-items:center;gap:9px;margin:8px 0 2px;
  font-size:13.5px;line-height:1.45;color:var(--muted);transition:color .18s ease}
.pw-hint-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:20px;height:20px;border-radius:50%;background:var(--line);color:var(--card);
  transition:background .18s ease,color .18s ease}
.pw-hint-ic svg{display:block;width:13px;height:13px}
.pw-hint.is-ok{color:#15803d;font-weight:600}
.pw-hint.is-ok .pw-hint-ic{background:#15803d;color:#fff}
:root[data-theme=dark] .pw-hint.is-ok{color:#5fd28f}
:root[data-theme=dark] .pw-hint.is-ok .pw-hint-ic{background:#2f8f5b;color:#fff}
@media(max-width:900px){.pw-hint{font-size:13px}}
.gw-steps{margin:10px 0 14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.gw-steps summary{cursor:pointer;padding:10px 14px;font-weight:800;font-size:13.5px;list-style:none}
.gw-steps summary::-webkit-details-marker{display:none}
.gw-steps summary:hover{color:var(--o)}
.gw-steps ol{margin:0;padding:4px 20px 6px 34px;font-size:13px;line-height:1.65}
.gw-steps li{margin:9px 0}
.gw-steps li b{color:var(--o)}
.gw-steps code{background:var(--hi-soft);color:var(--o);padding:2px 6px;border-radius:6px;font-size:12px}
.gw-steps > p{padding:0 16px 12px;font-size:12.5px;margin:0}