/* Branding uses the portal's existing type, surfaces, and form controls. */
.customer-logo{width:140px;height:48px;max-width:140px;object-fit:contain;object-position:right center;flex-shrink:0}
.wordmark{max-width:320px;overflow:hidden;text-overflow:ellipsis;display:block}
.bar-side{flex-wrap:wrap;justify-content:flex-end}
.customer-branded button.primary,.customer-branded .button.primary{background:var(--accent);border-color:var(--accent);color:var(--brand-button-ink)}
.customer-branded button.primary:hover,.customer-branded .button.primary:hover{filter:brightness(.94)}
.customer-branded a:not(.wordmark):not(.button){color:var(--brand-link)}
.customer-branded .wordmark{color:var(--brand-link)}
.customer-branded .login-aside{background:var(--accent-soft);color:var(--brand-accent-ink)}
.customer-branded .login-aside p{color:inherit}
.branding-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:28px;align-items:start}
.branding-layout>div,.branding-layout>aside{min-width:0}
.branding-form-panel{padding:0;overflow:hidden}
.branding-section{padding:22px 24px;border-bottom:1px solid #e8edf1}
.branding-section:last-child{border-bottom:0}
.branding-section h2{font-size:16px;margin:0 0 4px;font-weight:650}
.branding-section>p{font-size:12px;color:var(--muted);margin:0 0 18px;line-height:1.6}
.branding-section label{font-size:12px;display:block}
.branding-section label>input,.branding-section label>textarea{margin-top:6px}
.branding-section>label+label{margin-top:16px}
.branding-section small{font-size:11px;color:var(--muted);display:block;line-height:1.6;margin-top:7px}
.branding-section textarea{min-height:80px}
.branding-upload{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.branding-upload>div:last-child{min-width:0}
.branding-upload button{font-size:12px;padding:6px 12px;min-height:34px}
#branding-logo-sample{width:128px;min-width:100px;height:64px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:7px;color:#526272;font-size:13px;background:repeating-conic-gradient(#f1f4f6 0% 25%,white 0% 50%) 50%/14px 14px}
#branding-logo-sample img{max-width:110px;max-height:48px;object-position:center}
.branding-colour{display:flex;align-items:center;gap:10px;border:1px solid #d2dce4;border-radius:7px;padding:7px 10px;margin-top:6px;min-height:43px;background:#fff;font-weight:400}
.branding-colour input[type=color]{width:29px;height:27px;min-height:0;margin:0;padding:0;border:0;background:none;cursor:pointer;flex-shrink:0}
.branding-form-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.branding-form-footer button{font-size:12px}
.branding-status{font-size:12px;color:var(--muted);margin:12px 0;min-height:20px;line-height:1.6}
.branding-status.error{color:#a23535}
.branding-preview{position:sticky;top:146px}
.branding-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.branding-preview-heading h2{font-size:15px;margin:0}
.branding-preview-tabs{display:flex;border:1px solid var(--line);border-radius:7px;padding:3px;background:#fff;flex-shrink:0}
.branding-preview-tabs button{border:0;background:transparent;min-height:30px;padding:4px 10px;font-size:11px}
.branding-preview-tabs button[aria-pressed=true]{background:#e9f0f5;color:#2d4e68;font-weight:650}
.branding-preview-screen{border:1px solid #cbd7e1;border-radius:10px;overflow:hidden;background:#f7f8fa;box-shadow:0 10px 28px #18384709}
.branding-preview-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line);background:#fff}
.branding-preview-header strong{font-size:14px;overflow-wrap:anywhere;min-width:0}
.branding-preview-screen .customer-logo{width:95px;height:36px;max-width:95px}
.branding-logo-placeholder{font-size:11px;color:#617181;border:1px dashed #aabcc9;padding:6px 10px;flex-shrink:0}
.branding-preview-nav{display:flex;gap:22px;padding:10px 18px;background:#fff;border-bottom:1px solid var(--line);font-size:11px}
.branding-preview-nav strong{color:var(--preview-link)}
.branding-preview-body{padding:23px 20px}
.branding-preview-welcome{background:var(--preview-accent);color:var(--preview-accent-ink);padding:23px 20px;border-radius:7px;margin-bottom:23px}
.branding-preview-welcome h3{font-size:20px;letter-spacing:-.025em;line-height:1.3;margin:0 0 7px;overflow-wrap:anywhere}
.branding-preview-welcome p{font-size:12px;line-height:1.65;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.branding-preview-body>h3{font-size:14px;margin:0 0 12px}
.branding-preview-course{background:#fff;border:1px solid var(--line);border-radius:7px;padding:17px;margin-bottom:12px}
.branding-preview-course small{font-size:10px;color:var(--muted);letter-spacing:.05em}
.branding-preview-course h4{font-size:13px;margin:5px 0 13px;line-height:1.4}
.branding-preview-progress{height:5px;background:#e9eef3;border-radius:5px;margin-bottom:13px;overflow:hidden}
.branding-preview-progress span{display:block;background:var(--preview-primary);height:100%;width:40%}
.branding-preview-course-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;color:var(--muted)}
.branding-preview-primary,.branding-preview-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:7px;font-size:11px;padding:6px 12px;min-height:31px;flex-shrink:0}
.branding-preview-primary{background:var(--preview-primary);color:var(--preview-ink);border-color:var(--preview-primary)}
.branding-preview-support{padding:15px 18px;border-top:1px solid var(--line);background:#fff;text-align:center;font-size:10px;color:var(--muted);overflow-wrap:anywhere}
.branding-preview-signin{text-align:center;background:#fff;padding:48px 28px;min-height:400px;display:flex;flex-direction:column;align-items:center}
.branding-preview-signin h3{font-size:22px;line-height:1.3;margin:25px 0 10px;overflow-wrap:anywhere;max-width:100%}
.branding-preview-signin p{font-size:13px;color:var(--muted);margin:0;white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}
.branding-preview-signin .branding-preview-primary{margin-top:28px;width:100%;padding:10px}
.branding-preview-signin small{display:block;font-size:11px;color:var(--muted);margin-top:12px}
.branding-preview-note{font-size:12px;line-height:1.7;color:var(--muted);margin:16px 2px}
.branding-preview-note strong{color:#3a5266}
.branding-support{margin-top:30px;padding:20px 0 0;border-top:1px solid var(--line);text-align:center;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.branding-welcome{padding:24px;background:var(--accent-soft);color:var(--brand-accent-ink);border-radius:10px;margin-bottom:24px}
.branding-welcome h2{font-size:22px;margin:0 0 8px;overflow-wrap:anywhere}
.branding-welcome p{margin:0;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.branding-login-logo{display:flex;justify-content:flex-end;margin-bottom:22px}
.branding-login-logo img{max-width:180px;height:60px;width:auto}
[hidden]{display:none!important}
@media(min-width:901px){.topbar-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:12px 28px}.topnav{grid-column:1/-1;order:3;overflow-x:auto;padding-bottom:2px}.bar-side{justify-self:end}}
@media(max-width:1050px){.branding-layout{gap:20px}.branding-section{padding:20px}.branding-preview{position:static}.branding-preview-heading{flex-wrap:wrap}.branding-layout .form-grid{grid-template-columns:1fr}}
@media(max-width:800px){.branding-layout{grid-template-columns:1fr}.branding-preview{margin-top:8px}.branding-preview-heading{flex-wrap:nowrap}.branding-layout .form-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.topbar-inner{grid-template-columns:minmax(0,1fr) auto}.bar-side{max-width:210px;gap:4px}.bar-side .customer-logo{width:100%;max-width:100px;height:32px}.wordmark{max-width:100%;font-size:16px}.branding-form-footer{flex-wrap:wrap}.branding-form-footer>.actions{margin-left:auto}.branding-section{padding:20px}.branding-layout .form-grid{grid-template-columns:1fr}.branding-upload{gap:12px}.branding-upload .actions{flex-wrap:wrap}.branding-preview-heading{flex-wrap:wrap}.branding-preview-body{padding:20px 14px}.branding-preview-header{padding:14px}.branding-preview-welcome{padding:20px 16px}.branding-preview-course{padding:14px}.branding-support{font-size:11px}.branding-welcome{padding:20px}.branding-preview{top:auto}}

/* Reference styling keeps the existing branding form and live-preview behavior. */
.page.branding-design{padding-top:22px}
.page.branding-design .branding-settings-tabs{display:flex;width:auto;gap:12px;margin:0 3px 19px;background:transparent;border:0;padding:0;box-shadow:none}
.page.branding-design .branding-settings-tabs button{min-height:44px;font-size:14px;padding:10px 18px;gap:10px;border:1px solid #dce9ee;border-radius:12px;background:#ffffffcf;font-weight:500}
.page.branding-design .branding-settings-tabs button.active{background:linear-gradient(135deg,#d7faf4,#adede7);color:#005a62;border:3px solid #fff;box-shadow:0 3px 9px #247b7921;font-weight:700;padding:8px 16px}
.page.branding-design>.page-head{margin:0 5px 26px}.page.branding-design>.page-head h1{font-size:36px;margin-bottom:5px}.page.branding-design>.page-head p{font-size:16px;color:#48627d}
.page.branding-design .branding-layout{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:30px}
.page.branding-design #branding-form{background:linear-gradient(135deg,#fff,#f9fdfe);border:1px solid #d0e4eb;border-radius:17px;box-shadow:0 7px 18px #1c617d09;overflow:hidden;padding:0 20px 9px}
.page.branding-design .branding-form-panel{border:0;box-shadow:none;background:transparent;border-radius:0;overflow:visible}
.page.branding-design .branding-section{position:relative;padding:21px 0 21px 62px;border-color:#e2edf1}
.page.branding-design .branding-section h2{font-size:18px;font-weight:750;line-height:1.3;color:#11263c;margin-bottom:4px;letter-spacing:-.025em}
.page.branding-design .branding-section>p{font-size:13px;color:#4b6680;line-height:1.45;margin-bottom:17px}
.branding-section-icon{display:grid;place-items:center;width:42px;height:42px;background:linear-gradient(135deg,#dbfaf3,#baf0ed);color:#007878;border-radius:12px;position:absolute;left:2px;top:21px}
.branding-section-icon .ui-icon{width:25px;height:25px}
.page.branding-design .branding-section label{font-size:12px;color:#182d43;font-weight:500}
.page.branding-design .branding-section input:not([type=color]),.page.branding-design .branding-section textarea{border:1px solid #c8dbe7;border-radius:9px;background:linear-gradient(120deg,#fff,#faffff);min-height:36px;font-size:12px;padding:8px 11px;color:#19344e}
.page.branding-design .branding-section textarea{min-height:60px;line-height:1.5}
.page.branding-design .branding-section small{color:#536e87;font-size:11px;line-height:1.5;margin-top:8px}
.page.branding-design .branding-section .form-grid{gap:17px;grid-template-columns:repeat(2,minmax(0,1fr))}
.page.branding-design .branding-upload{gap:18px;margin-bottom:16px}
.page.branding-design #branding-logo-sample{width:145px;min-width:105px;height:64px;border:1px dashed #c9dbe5;border-radius:9px;font-size:12px;color:#223e53;flex-shrink:0}
.page.branding-design .branding-upload button{font-size:12px;min-height:34px;padding:7px 12px;border-color:#cbdde7;gap:8px;font-weight:500}
.page.branding-design .branding-upload .ui-icon{width:18px;height:18px}.page.branding-design .branding-upload small{font-size:10px;line-height:1.5}
.page.branding-design .branding-colour{min-height:36px;padding:5px 11px;gap:13px;margin-top:6px;border-color:#c7dce7;background:#ffffffb3}
.page.branding-design .branding-colour input[type=color]{width:28px;height:22px;min-height:0;border-radius:3px}
.page.branding-design .branding-colour [data-branding-hex]{font-size:12px}




.page.branding-design .branding-form-footer{margin:0;padding:14px 0 0;border-top:1px solid #e1edf0;gap:12px;align-items:center}
.page.branding-design .branding-form-footer button{min-height:35px;font-size:11px;padding:8px 13px;gap:8px;white-space:nowrap}
.page.branding-design .branding-form-footer .ui-icon{width:17px;height:17px}.page.branding-design .branding-form-footer .actions{gap:10px}
.page.branding-design .branding-status{font-size:11px;min-height:19px;margin:10px 2px 1px;line-height:1.5;color:#49627b}
.page.branding-design .branding-status[data-state=saved]::before{content:'✓';display:inline-grid;place-items:center;width:13px;height:13px;border-radius:50%;margin-right:7px;color:#fff;background:#00a74b;font-size:10px;vertical-align:middle}
.page.branding-design .branding-preview{top:90px;padding-top:4px}
.page.branding-design .branding-preview-heading{margin:0 2px 17px;gap:15px}
.page.branding-design .branding-preview-heading h2{font-size:23px;font-weight:750;letter-spacing:-.025em;color:#10283b}
.page.branding-design .branding-preview-tabs{border-radius:11px;border-color:#d5e6ed;padding:3px;background:#ffffffcf;box-shadow:0 3px 9px #216e7d09}
.page.branding-design .branding-preview-tabs button{min-height:30px;font-size:11px;border:0;background:transparent;box-shadow:none;border-radius:7px;padding:6px 13px;gap:0}
.page.branding-design .branding-preview-tabs button[aria-pressed=true]{background:linear-gradient(135deg,#d3f9ef,#9be8e0);color:#00525d;font-weight:650}
.page.branding-design .branding-preview-screen{border:1px solid #ccdee7;border-radius:15px;box-shadow:0 7px 16px #17677c0d;background:linear-gradient(135deg,#fff,#f8fdfe)}
.page.branding-design .branding-preview-header{padding:15px 24px;background:#ffffffd9;min-height:58px}.page.branding-design .branding-preview-header strong{font-size:21px;letter-spacing:-.035em;color:#07548b;font-weight:750}
.page.branding-design .branding-logo-placeholder{font-size:11px;padding:8px 18px;border-radius:5px;color:#426680}.page.branding-design .branding-preview-nav{padding:0 24px;gap:22px;font-size:12px;min-height:39px;align-items:center;background:transparent}.page.branding-design .branding-preview-nav strong{padding:10px 0 8px;border-bottom:3px solid var(--preview-primary);color:var(--preview-link)}
.page.branding-design .branding-preview-body{padding:24px 18px 5px}
.page.branding-design .branding-preview-welcome{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(120deg,#eaf9fc,var(--preview-accent));color:var(--preview-accent-ink);padding:22px 25px;border-radius:13px;margin-bottom:22px}
.page.branding-design .branding-preview-welcome::before{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(155deg,transparent 55%,#4acfc226 55%,#4acfc236 70%,transparent 70%)}
.page.branding-design .branding-preview-welcome h3{font-size:22px;font-weight:750;line-height:1.25;margin-bottom:6px;letter-spacing:-.025em}.page.branding-design .branding-preview-welcome p{font-size:13px;line-height:1.5}
.page.branding-design .branding-preview-course{display:grid;grid-template-columns:96px minmax(0,1fr);gap:17px;border:1px solid #d9e6ec;border-radius:13px;padding:12px 14px;background:#ffffffd9;margin-bottom:17px;box-shadow:0 4px 11px #1e6c8009;align-items:center}
.branding-preview-thumbnail{min-height:90px;align-self:stretch;border-radius:11px;border:1px solid #e0edef;background:#f3f9fa}
.page.branding-design .branding-preview-course>div{min-width:0}.page.branding-design .branding-preview-course small{font-size:9px;display:inline-block;padding:4px 9px;border-radius:12px;background:#d0f6f2;color:#056772;font-weight:700;letter-spacing:.04em;line-height:1.2}
.page.branding-design .branding-preview-course h4{font-size:15px;line-height:1.4;margin:5px 0 9px;letter-spacing:-.02em;color:#102c41}
.page.branding-design .branding-preview-course-footer{gap:9px;flex-wrap:wrap;min-width:0;font-size:10px;color:#57718a}
.page.branding-design .branding-preview-progress{flex:1;min-width:65px;height:7px;margin:0;background:#d9e2eb}.page.branding-design .branding-preview-progress span{background:var(--preview-primary)}
.page.branding-design .branding-preview-primary,.page.branding-design .branding-preview-button{font-size:10px;min-height:30px;padding:7px 11px;gap:8px;border-radius:9px;font-weight:600;white-space:nowrap;box-shadow:0 3px 9px #14637709;margin-left:auto}
.page.branding-design .branding-preview-primary .ui-icon{width:15px;height:15px}.page.branding-design .branding-preview-button{border-color:#9acbd4;color:#075568;background:#faffff}
.page.branding-design .branding-preview-support{display:flex;justify-content:center;align-items:center;gap:9px;background:transparent;border-color:#dde9ef;padding:15px 18px;font-size:11px;line-height:1.5;color:#536b83}.page.branding-design .branding-preview-support .ui-icon{width:20px;height:20px;color:#007c7c}
.page.branding-design .branding-preview-note{font-size:13px;margin:18px 3px;line-height:1.6;color:#546f87}.page.branding-design .branding-preview-note strong{font-size:14px;color:#25455e}
.page.branding-design .branding-preview-signin{min-height:420px;background:#ffffffeb}.page.branding-design .branding-preview-signin .branding-preview-primary{margin-left:0}
@media(max-width:1449px){.page.branding-design .branding-layout{gap:26px}.page.branding-design #branding-form{padding:0 18px 10px}.page.branding-design .branding-section{padding-left:56px}.branding-section-icon{width:38px;height:40px;border-radius:11px}.branding-section-icon .ui-icon{width:24px;height:24px}.page.branding-design .branding-upload{gap:13px}.page.branding-design #branding-logo-sample{width:125px;min-width:105px}.page.branding-design .branding-section h2{font-size:17px}.page.branding-design .branding-section>p{font-size:12px}.page.branding-design .branding-preview-course{grid-template-columns:79px minmax(0,1fr);padding:12px;gap:13px}.page.branding-design .branding-preview-header{padding:14px 22px}.page.branding-design .branding-preview-welcome{padding:21px}.page.branding-design .branding-preview-course h4{font-size:14px}.page.branding-design .branding-form-footer{flex-wrap:wrap}.page.branding-design .branding-form-footer>.actions{margin-left:auto}}
@media(max-width:1100px){.page.branding-design .branding-section{padding-left:49px}.branding-section-icon{width:34px;height:37px}.page.branding-design .branding-upload{flex-wrap:wrap}.page.branding-design .branding-section .form-grid{grid-template-columns:1fr}.page.branding-design .branding-preview-heading{flex-wrap:wrap}.page.branding-design .branding-preview-heading h2{font-size:21px}.page.branding-design .branding-preview-course{grid-template-columns:62px minmax(0,1fr);gap:12px}.page.branding-design .branding-preview-welcome h3{font-size:19px}.page.branding-design .branding-preview-course h4{font-size:13px}}
@media(max-width:800px){.page.branding-design .branding-layout{grid-template-columns:1fr;gap:25px}.page.branding-design .branding-preview{position:static}.page.branding-design .branding-preview-heading{flex-wrap:nowrap}.page.branding-design .branding-section{padding-left:61px}.page.branding-design .branding-section .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.branding-section-icon{width:42px;height:42px}.page.branding-design .branding-upload{flex-wrap:nowrap}.page.branding-design .branding-preview-course{grid-template-columns:95px minmax(0,1fr)}.page.branding-design .branding-preview-welcome h3{font-size:23px}}
@media(max-width:640px){.page.branding-design{padding-top:22px}.page.branding-design .branding-settings-tabs{gap:9px;margin-bottom:22px}.page.branding-design .branding-settings-tabs button{font-size:12px;padding:10px 13px;min-height:41px}.page.branding-design .branding-settings-tabs button.active{padding:8px 11px}.page.branding-design .branding-settings-tabs .ui-icon{width:18px;height:18px}.page.branding-design>.page-head{margin:0 3px 24px}.page.branding-design>.page-head h1{font-size:32px}.page.branding-design>.page-head p{font-size:15px}.page.branding-design #branding-form{padding:0 15px 10px;border-radius:14px}.page.branding-design .branding-section{padding:20px 0}.branding-section-icon{position:static;float:left;width:35px;height:35px;margin:0 12px 12px 0;border-radius:10px}.branding-section-icon .ui-icon{width:22px;height:22px}.page.branding-design .branding-section h2{font-size:17px;min-height:35px;display:flex;align-items:center}.page.branding-design .branding-section>p{clear:both;font-size:12px;line-height:1.5;margin-bottom:15px}.page.branding-design .branding-upload{flex-wrap:wrap;gap:14px}.page.branding-design #branding-logo-sample{width:125px;height:62px}.page.branding-design .branding-section .form-grid{grid-template-columns:1fr;gap:14px}.page.branding-design .branding-section input:not([type=color]),.page.branding-design .branding-section textarea{font-size:12px;min-height:39px}.page.branding-design .branding-section textarea{min-height:80px}.page.branding-design .branding-form-footer{gap:13px;padding-top:15px}.page.branding-design .branding-form-footer button{font-size:10px;min-height:35px;padding:8px 10px;gap:6px}.page.branding-design .branding-form-footer .actions{gap:8px}.page.branding-design .branding-preview-heading{flex-wrap:wrap;margin-bottom:14px}.page.branding-design .branding-preview-heading h2{font-size:22px}.page.branding-design .branding-preview-tabs{margin-left:auto}.page.branding-design .branding-preview-tabs button{font-size:10px;padding:6px 11px}.page.branding-design .branding-preview-header{padding:13px 16px}.page.branding-design .branding-preview-header strong{font-size:18px}.page.branding-design .branding-logo-placeholder{font-size:10px;padding:7px 12px}.page.branding-design .branding-preview-nav{padding:0 16px;font-size:11px}.page.branding-design .branding-preview-body{padding:16px 12px 0}.page.branding-design .branding-preview-welcome{padding:20px 17px;margin-bottom:17px}.page.branding-design .branding-preview-welcome h3{font-size:21px}.page.branding-design .branding-preview-welcome p{font-size:12px}.page.branding-design .branding-preview-course{grid-template-columns:64px minmax(0,1fr);padding:11px;gap:12px;margin-bottom:13px}.branding-preview-thumbnail{min-height:84px}.page.branding-design .branding-preview-course small{font-size:8px;padding:3px 6px}.page.branding-design .branding-preview-course h4{font-size:13px}.page.branding-design .branding-preview-primary,.page.branding-design .branding-preview-button{font-size:9px;min-height:29px;padding:6px 9px}.page.branding-design .branding-preview-support{font-size:10px;padding:13px}.page.branding-design .branding-preview-note{font-size:12px}.page.branding-design .branding-preview-note strong{font-size:13px}}
.page.learning-design .learning-stat>span>.ui-icon{color:inherit}
.page.learning-design .learning-completed>.ui-icon{color:#fff}
.page.learning-design::before,.page.branding-design::before{background-size:auto,100% 650px}
@media(min-width:1280px) and (max-width:1449px){.topbar.portal-header .topbar-inner{display:flex;gap:14px;padding:8px 26px;min-height:64px}.topbar.portal-header .topnav{order:initial;width:auto;gap:2px;padding:0}.topbar.portal-header .wordmark{font-size:23px;padding-right:10px}.topbar.portal-header .nav-button{font-size:12px;padding:10px 11px;min-height:40px}.topbar.portal-header .bar-side{gap:8px}.topbar.portal-header .bar-side button{font-size:11px;padding:7px 10px}.topbar.portal-header [data-action=notifications]{gap:7px;margin-right:0}}