/* ==========================================================================
   University of SEO: global design system v3
   Inspired by portfolio.universityofseo.net: dark + light themes, lime accent,
   violet secondary, glass panels with an inner highlight, pill buttons, Google Sans.
   Loaded on every frontend page after the core theme CSS.
   Contrast rules (checked with an automated WCAG scan):
   - body text is always --uos-ink / --uos-text on canvas or glass;
   - lime is a FILL colour (buttons, chips) with dark ink text (--uos-on-accent);
   - as a TEXT colour use --uos-accent-text (lime in dark theme, deep olive in light).
   ========================================================================== */
/* metric-matched local fallback for Inter, so the web-font swap does not re-wrap text (CLS) */
@font-face{font-family:"Inter Fallback";src:local("Arial");ascent-override:90.49%;descent-override:22.56%;line-gap-override:0%;size-adjust:107.06%}
:root{
    /* University of SEO brand (brand pack v2): Sora for headings, Inter for everything else */
    --uos-font:"Inter","Inter Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --uos-font-display:"Sora","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    --uos-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    /* Fluid type scale (rem floor, rem + vw middle so browser zoom still scales, rem ceiling).
       320px to 1440px: display 34 to 62, h1 28 to 44, h2 24 to 36, h3 20 to 24, h4 18 to 20, h5 17 to 18.
       Every page title uses --uos-fs-h1; only the homepage hero (and the About hero) use --uos-fs-display. */
    --uos-fs-display:clamp(2.125rem,1.5rem + 2.75vw,3.875rem);
    --uos-fs-h1:clamp(1.75rem,1.35rem + 1.75vw,2.75rem);
    --uos-fs-h2:clamp(1.5rem,1.2rem + 1.15vw,2.25rem);
    --uos-fs-h3:clamp(1.25rem,1.1rem + .55vw,1.5rem);
    --uos-fs-h4:clamp(1.125rem,1.05rem + .3vw,1.25rem);
    --uos-fs-h5:clamp(1.0625rem,1.02rem + .15vw,1.125rem);
    --uos-fs-h6:1rem;
    --uos-fs-lead:clamp(1.0625rem,1rem + .25vw,1.1875rem);
    --uos-fs-body:1rem; --uos-fs-small:.9375rem; --uos-fs-xs:.8125rem; --uos-fs-caption:.75rem;
    --uos-lh-display:1.1;
    /* heading leading tightens as the size grows: 16px 1.35, 24px 1.27, 36px 1.21, 44px 1.19 */
    --uos-lh-heading:calc(.25rem + 1.1em); --uos-lh-title:calc(.25rem + 1.1em); --uos-lh-ui:1.5; --uos-lh-body:1.6;
    --uos-ls-display:-.03em; --uos-ls-heading:-.022em; --uos-ls-title:-.01em;
    --uos-measure:62ch; /* about 70 to 75 characters of Inter */
    --uos-ease:cubic-bezier(.2,.8,.2,1);
    /* motion tokens (same in both themes): enter ease-out, leave ease-in, in-place ease-std */
    --uos-ease-out:cubic-bezier(.2,.8,.2,1);--uos-ease-in:cubic-bezier(.4,0,1,1);--uos-ease-std:cubic-bezier(.4,0,.2,1);
    --uos-dur-1:120ms;--uos-dur-2:180ms;--uos-dur-3:240ms;--uos-dur-exit:180ms;--uos-dur-reveal:320ms;--uos-dur-story:400ms;--uos-dur-draw:600ms;
    --uos-stagger:60ms;--uos-rise:8px;--uos-nudge:2px;

    /* fixed brand values (same in both themes): Primary Blue #2458FF, Secondary Blue #8CB4FF, Text #101828 */
    --uos-accent:#2458ff; --uos-accent-rgb:36,88,255; --uos-on-accent:#ffffff;
    --uos-violet:#8cb4ff; --uos-violet-rgb:140,180,255; --uos-on-violet:#101828; --uos-emerald:#34d399;
    /* brand text colours for panels that stay dark in both themes (Arena promo, terminals, lesson top bar) */
    --uos-accent-text-dark:#8cb4ff; --uos-violet-text-dark:#bad2ff; --uos-accent-pale:#bad2ff; --uos-accent-deep-rgb:27,69,204; --uos-mark-hi:#8cb4ff;
    --uos-accent-hover:#1b45cc;
    /* Admin → Branding → Brand colours overrides these tokens with a <style id="uos-brand-vars"> block (see uos_brand_helper.php) */
    --uos-grad:#2458ff;
    --uos-grad-hover:#1b45cc;
    --uos-radius-sm:12px; --uos-radius:16px; --uos-radius-lg:24px;
    --uos-header-h:72px;
    --uos-logo-mark:#2458ff; --uos-logo-ink:#101828;

    /* ---------- dark theme (optional) ---------- */
    color-scheme:dark;
    --uos-canvas:#0b1220; --uos-canvas-2:#101828;
    --uos-ink:#f5f6f8; --uos-ink-rgb:245,246,248; --uos-text:#e3e7ee; --uos-muted:#a3acbc; --uos-subtle:#8d97a8;
    --uos-line:rgba(255,255,255,.09); --uos-line-2:rgba(255,255,255,.17);
    --uos-border:var(--uos-line); --uos-border-strong:var(--uos-line-2);
    --uos-surface:rgba(19,28,46,.72); --uos-surface-strong:rgba(22,32,52,.92); --uos-surface-solid:#131c2e; --uos-pop:#16203a;
    --uos-glass-hi:rgba(255,255,255,.06); --uos-glass-border:rgba(255,255,255,.09);
    --uos-input:rgba(255,255,255,.05);
    --uos-input-border:rgba(255,255,255,.42); /* form-control boundary, at least 3:1 on the dark input */
    --uos-accent-text:#8cb4ff; --uos-violet-text:#bad2ff; --uos-accent-strong:#bad2ff;
    --uos-primary:var(--uos-accent-text); --uos-primary-dark:var(--uos-accent-text); --uos-primary-2:var(--uos-violet);
    --uos-primary-soft:rgba(36,88,255,.16);
    --uos-success:#4ade80; --uos-success-soft:rgba(74,222,128,.13);
    --uos-warning:#fbbf24; --uos-warning-soft:rgba(251,191,36,.14);
    --uos-danger:#f87171; --uos-danger-soft:rgba(248,113,113,.14);
    --uos-info:#8cb4ff; --uos-info-soft:rgba(140,180,255,.14);
    --uos-orb-1:rgba(36,88,255,.14); --uos-orb-2:transparent; --uos-orb-3:rgba(140,180,255,.06);
    /* elevation, one ink and four levels: E1 resting, E2 floating, E3 blocking, side = drawer */
    --uos-shadow:0 1px 2px rgba(3,7,18,.35),0 4px 12px -6px rgba(3,7,18,.40);
    --uos-shadow-lg:0 1px 2px rgba(3,7,18,.30),0 8px 20px -8px rgba(3,7,18,.55);
    --uos-shadow-xl:0 2px 6px rgba(3,7,18,.35),0 24px 48px -16px rgba(3,7,18,.65);
    --uos-shadow-side:-8px 0 24px -8px rgba(3,7,18,.60);
    --uos-hi-line:rgba(255,255,255,.05);
    --uos-btn-shadow:none;
    --uos-ring:0 0 0 2px #8cb4ff;
    --uos-ring-solo:0 0 0 2px #0b1220,0 0 0 4px #8cb4ff;
    --uos-blur:blur(14px) saturate(140%);
    --uos-grad-dark:linear-gradient(160deg,#131c2e 0%,#101828 100%);
    --uos-text-grad:linear-gradient(0deg,#8cb4ff,#8cb4ff);
    --uos-logo-mark:#ffffff; --uos-logo-ink:#ffffff;

    /* core LMS theme variables re-pointed */
    --primary-color:var(--uos-muted); --primary-color-2:var(--uos-muted); --secondery-color:var(--uos-muted);
    --color-1:var(--uos-ink); --color-3:var(--uos-text); --color-4:var(--uos-accent-text); --color-6:var(--uos-muted); --color-7:var(--uos-ink);
    --color-10:var(--uos-text); --color-11:var(--uos-muted); --color-12:rgba(36,88,255,.14); --color-13:var(--uos-muted); --color-14:var(--uos-text); --color-16:var(--uos-muted);
    --bg-white:var(--uos-surface-solid); --bg-white-2:var(--uos-canvas-2); --bg-white-3:var(--uos-surface-solid);
    --bs-primary:#2458ff; --bs-primary-rgb:36,88,255; --bs-link-color:var(--uos-accent-text); --bs-link-hover-color:var(--uos-ink);
    --bs-body-font-family:var(--uos-font); --bs-body-color:var(--uos-text); --bs-body-bg:var(--uos-canvas); --bs-border-color:var(--uos-line);
    --bs-heading-color:var(--uos-ink); --bs-emphasis-color:var(--uos-ink); --bs-secondary-color:var(--uos-muted); --bs-tertiary-bg:var(--uos-canvas-2);
}
/* ---------- light theme (brand default: white background, Text #101828, Primary Blue) ---------- */
html[data-theme="light"]{
    color-scheme:light;
    --uos-canvas:#ffffff; --uos-canvas-2:#f5f6f8;
    --uos-ink:#101828; --uos-ink-rgb:16,24,40; --uos-text:#1d2433; --uos-muted:#545d6e; --uos-subtle:#5f6878;
    --uos-line:#e7e9ec; --uos-line-2:#d3d8df;
    --uos-surface:rgba(255,255,255,.92); --uos-surface-strong:rgba(255,255,255,.96); --uos-surface-solid:#ffffff; --uos-pop:#ffffff;
    --uos-glass-hi:#f5f6f8; --uos-glass-border:#e7e9ec;
    --uos-input:#ffffff;
    --uos-input-border:#7b8494; /* form-control boundary: 3.8:1 on white, 3.5:1 on #f5f6f8 */
    --uos-accent-text:#2458ff; --uos-violet-text:#1b45cc; --uos-accent-strong:#1b45cc;
    --uos-primary-soft:#e9eeff;
    --uos-success:#03644a; --uos-success-soft:rgba(16,185,129,.13);
    --uos-warning:#a14a07; --uos-warning-soft:rgba(245,158,11,.16);
    --uos-danger:#b91c1c; --uos-danger-soft:rgba(239,68,68,.12);
    --uos-info:#1b45cc; --uos-info-soft:#e9eeff;
    --uos-orb-1:rgba(36,88,255,.07); --uos-orb-2:transparent; --uos-orb-3:rgba(140,180,255,.12);
    --uos-shadow:0 1px 2px rgba(16,24,40,.04),0 2px 6px -2px rgba(16,24,40,.06);
    --uos-shadow-lg:0 1px 2px rgba(16,24,40,.04),0 6px 16px -6px rgba(16,24,40,.10);
    --uos-shadow-xl:0 2px 6px rgba(16,24,40,.05),0 20px 40px -16px rgba(16,24,40,.18);
    --uos-shadow-side:-8px 0 24px -8px rgba(16,24,40,.16);
    --uos-hi-line:transparent;
    --uos-btn-shadow:0 1px 2px rgba(16,24,40,.08);
    --uos-ring:0 0 0 2px #8cb4ff;
    --uos-ring-solo:0 0 0 2px #ffffff,0 0 0 4px #2458ff;
    --uos-blur:none;
    --uos-grad-dark:linear-gradient(160deg,#ffffff 0%,#f5f6f8 100%);
    --uos-text-grad:linear-gradient(0deg,#2458ff,#2458ff);
    --uos-logo-mark:#2458ff; --uos-logo-ink:#101828;
}

/* Headings use Sora (the global font rule above forces Inter on every element, so this needs an id-weight selector). */
html body :is(h1,h2,h3,h4,h5,h6,.uos-display,.mk-h2,.title,.title-1,.title-two,.course-title):not(#uos-no-display-font){font-family:var(--uos-font-display)!important}

/* ---------------------------------------------------------------- base */
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{background:var(--uos-canvas)!important;color:var(--uos-text)!important;font-family:var(--uos-font);font-size:var(--uos-fs-body);line-height:var(--uos-lh-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
        radial-gradient(closest-side,var(--uos-orb-1),transparent) -22vmax -30vmax/70vmax 70vmax no-repeat,
        radial-gradient(closest-side,var(--uos-orb-2),transparent) calc(100% + 20vmax) 10vh/60vmax 60vmax no-repeat,
        radial-gradient(closest-side,var(--uos-orb-3),transparent) 20vw calc(100% + 35vmax)/55vmax 55vmax no-repeat}
html body *:not(i):not(svg):not(svg *):not(code):not(pre):not(kbd):not(samp):not([class*="fa-"]):not([class^="fa"]):not([class*=" fa"]):not([class*="mdi"]):not([class*="icon"]):not([class*="note-"]):not(.slick-arrow):not(.owl-nav *){font-family:var(--uos-font)!important}
h1,h2,h3,h4,h5,h6,.title,.title-1,.title-two,.title-6,.course-title,.uos-display{color:var(--uos-ink);letter-spacing:-.025em;font-weight:600}
/* type scale on the plain elements (replaces the template's fixed h1 36px and Bootstrap's step sizes);
   component rules below and in the page stylesheets reuse the same tokens */
h1,.h1{font-size:var(--uos-fs-h1);line-height:var(--uos-lh-heading);letter-spacing:var(--uos-ls-heading)}
h2,.h2{font-size:var(--uos-fs-h2);line-height:var(--uos-lh-heading);letter-spacing:var(--uos-ls-heading)}
h3,.h3{font-size:var(--uos-fs-h3);line-height:var(--uos-lh-title);letter-spacing:-.015em}
h4,.h4{font-size:var(--uos-fs-h4);line-height:var(--uos-lh-title);letter-spacing:var(--uos-ls-title)}
h5,.h5{font-size:var(--uos-fs-h5);line-height:var(--uos-lh-title);letter-spacing:var(--uos-ls-title)}
h6,.h6{font-size:var(--uos-fs-h6);line-height:var(--uos-lh-title);letter-spacing:0}
h1,h2,h3{overflow-wrap:break-word;text-wrap:balance}
p,li,dd,blockquote{text-wrap:pretty}
/* captions never drop below 12px (Bootstrap's small is .875em of its parent, which gave 11px inside 13px text) */
small,.small{font-size:max(.875em,var(--uos-fs-caption))}
p{color:inherit}
a{color:var(--uos-accent-text);text-decoration:none;transition:color .15s}
a:hover{color:var(--uos-ink)}
::selection{background:var(--uos-accent);color:var(--uos-on-accent)}
/* browser surfaces: caret, focus ring, underlines, tap feedback and numerals follow the theme */
html{caret-color:var(--uos-accent-text);-webkit-tap-highlight-color:rgba(var(--uos-accent-rgb),.2)}
:focus-visible{outline:2px solid var(--uos-accent-text);outline-offset:3px;border-radius:8px}
a{text-underline-offset:.2em;text-decoration-thickness:from-font}
a,button,input,select,textarea,label,summary,[role="button"]{touch-action:manipulation}
table,time,.uos-num,.uos-stat,.uos-score-ring,.uos-badge,.uos-progress-label,.arena-stat,.arena-pts,.arena-q-pts,.arena-pos,.arena-table,.arena-task-count,.cal-num,.lc-countdown,.cm-comment-count,.cm-rx-count,.cm-post-stats,.community-my-rank,.community-rank-badge,.price,.current-price,.original-price,.course-price,.amount,.cart-total,.total-price{font-variant-numeric:tabular-nums}
code,kbd,samp,pre{font-family:var(--uos-font-mono)}
code{color:var(--uos-violet-text)}
img{max-width:100%}
hr{border-color:var(--uos-line);opacity:1}
.text-gradient,h1 em,h2 em,h3 em{font-style:normal;background:var(--uos-text-grad);-webkit-background-clip:text;background-clip:text;color:transparent!important}

/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:rgba(var(--uos-accent-rgb),.5) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(var(--uos-accent-rgb),.6),rgba(var(--uos-accent-rgb),.6));border-radius:999px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--uos-accent),var(--uos-accent));background-clip:padding-box}

/* ---------------------------------------------------------------- glass utilities */
.glass,.uos-glass{background:var(--uos-surface);border:1px solid var(--uos-glass-border);box-shadow:inset 0 1px 0 var(--uos-hi-line),var(--uos-shadow);-webkit-backdrop-filter:var(--uos-blur);backdrop-filter:var(--uos-blur);border-radius:var(--uos-radius-lg)}
.glass-strong{background:var(--uos-surface-strong);border:1px solid var(--uos-glass-border);box-shadow:inset 0 1px 0 var(--uos-hi-line),var(--uos-shadow-lg);-webkit-backdrop-filter:var(--uos-blur);backdrop-filter:var(--uos-blur);border-radius:var(--uos-radius-lg)}

/* ---------------------------------------------------------------- buttons (pill, like the portfolio) */
.btn{border-radius:999px;font-weight:600;padding:.62rem 1.25rem;transition:background-color var(--uos-dur-1),border-color var(--uos-dur-1),color var(--uos-dur-1),box-shadow var(--uos-dur-1)}
.btn:hover,.btn:focus,.btn:active{transform:none}
.btn-primary,.btn-primary:visited,.ctBtn,a.ctBtn,.purchase-btn,.enrollBtn,.green_purchase,.view-more-btn,.btn-1,.theme-btn{background:var(--uos-grad)!important;border:1px solid transparent!important;color:var(--uos-on-accent)!important;box-shadow:var(--uos-btn-shadow)}
.btn-primary *,.ctBtn *,.purchase-btn *,.enrollBtn *,.green_purchase *,.view-more-btn *{color:var(--uos-on-accent)!important}
.btn-primary:hover,.ctBtn:hover,.purchase-btn:hover,.enrollBtn:hover,.green_purchase:hover,.view-more-btn:hover,.btn-1:hover,.theme-btn:hover{background:var(--uos-grad-hover)!important;color:var(--uos-on-accent)!important}
.btn-outline-primary{color:var(--uos-accent-text)!important;border:1px solid var(--uos-line-2)!important;background:var(--uos-surface)!important}
.btn-outline-primary:hover{background:var(--uos-grad)!important;color:var(--uos-on-accent)!important}
.btn-light,.btn-white,.btn-outline-secondary,.btn-secondary-light,.btn-outline-light{background:var(--uos-surface-solid)!important;border:1px solid var(--uos-line-2)!important;color:var(--uos-ink)!important;box-shadow:none}
.btn-light:hover,.btn-white:hover,.btn-outline-secondary:hover,.btn-outline-light:hover{border-color:var(--uos-ink)!important;color:var(--uos-ink)!important}
.btn-secondary{background:var(--uos-surface-strong)!important;border:1px solid var(--uos-line-2)!important;color:var(--uos-ink)!important}
.btn-success{background:#047857!important;border-color:#047857!important;color:#fff!important}
.btn-success:hover{background:#065f46!important;border-color:#065f46!important}
.btn-danger{background:#dc2626!important;border-color:#dc2626!important;color:#fff!important}
.btn-warning{background:#f59e0b!important;border-color:#f59e0b!important;color:#111827!important}
.btn-info{background:#0369a1!important;border-color:#0369a1!important;color:#fff!important}
.btn-dark{background:var(--uos-ink)!important;border-color:var(--uos-ink)!important;color:var(--uos-canvas)!important}
.btn-link{color:var(--uos-accent-text)!important}
.btn:disabled,.btn.disabled{opacity:.5;transform:none;box-shadow:none}

/* ---------------------------------------------------------------- forms */
.form-control,.form-select,input.form-control,textarea.form-control,.search-input,.search-input-floating,select.form-control{background-color:var(--uos-input)!important;border:1px solid var(--uos-input-border)!important;border-radius:14px!important;color:var(--uos-ink)!important;padding:.65rem .95rem;min-height:48px;box-shadow:none;transition:border-color var(--uos-dur-1),box-shadow var(--uos-dur-1)}
.form-control::placeholder,input::placeholder,textarea::placeholder{color:var(--uos-subtle)!important;opacity:1}
.form-control:focus,.form-select:focus,.search-input:focus{border-color:var(--uos-accent)!important;box-shadow:var(--uos-ring)!important;outline:0}
.form-select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a9aea6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")!important}
select option{background:var(--uos-pop);color:var(--uos-ink)}
.form-label,label{color:var(--uos-ink);font-weight:500}
.form-text,.help-block{color:var(--uos-muted)!important}
.form-check-input{background-color:var(--uos-input);border-color:var(--uos-input-border)}
.form-check-input:checked{background-color:var(--uos-accent);border-color:var(--uos-accent)}
.form-check-input:checked[type=checkbox]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")}
.form-check-input:checked[type=radio]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e")}
.input-group-text{background:var(--uos-surface);border-color:var(--uos-line-2);color:var(--uos-muted)}

/* nice-select (every dropdown select on the site) */
.nice-select{background:var(--uos-input)!important;border:1px solid var(--uos-input-border)!important;border-radius:14px!important;color:var(--uos-ink)!important;height:46px;line-height:44px;padding-left:16px;padding-right:36px}
.nice-select .current{color:var(--uos-ink)!important}
.nice-select:after{border-color:var(--uos-muted)!important;right:16px}
.nice-select.open,.nice-select:focus{border-color:var(--uos-accent)!important;box-shadow:var(--uos-ring)}
.nice-select .list{background:var(--uos-pop)!important;border:1px solid var(--uos-line-2);border-radius:16px!important;box-shadow:var(--uos-shadow-lg)!important;padding:6px!important;max-height:280px;overflow-y:auto;z-index:30}
.nice-select .option{border-radius:10px;color:var(--uos-text)!important;min-height:38px;line-height:38px;font-weight:500;background:transparent!important}
.nice-select .option:hover,.nice-select .option.focus,.nice-select .option.selected.focus{background:var(--uos-primary-soft)!important;color:var(--uos-ink)!important}
.nice-select .option.selected{font-weight:700;color:var(--uos-accent-text)!important}

/* dropdowns, popovers, modals, offcanvas, toasts */
.dropdown-menu{background:var(--uos-pop);border:1px solid var(--uos-line-2);border-radius:18px;padding:8px;color:var(--uos-text)}
.dropdown-item{border-radius:12px;color:var(--uos-text);font-weight:500;padding:.55rem .85rem}
.dropdown-item:hover,.dropdown-item:focus{background:var(--uos-primary-soft);color:var(--uos-ink)}
.dropdown-item.active,.dropdown-item:active{background:var(--uos-accent);color:var(--uos-on-accent)}
.dropdown-divider{border-color:var(--uos-line)}
.modal-content{background:var(--uos-pop);border:1px solid var(--uos-line-2);border-radius:24px;box-shadow:var(--uos-shadow-xl);color:var(--uos-text)}
.modal-header,.modal-footer{border-color:var(--uos-line)}
.modal-title{color:var(--uos-ink)}
.btn-close{filter:var(--uos-btn-close-filter,invert(1) grayscale(1) brightness(2))}
html[data-theme="light"] .btn-close{filter:none}
.modal-backdrop.show{opacity:.6;background:#050607}
.offcanvas{background:var(--uos-pop)!important;color:var(--uos-text)}
.webui-popover{background:var(--uos-pop)!important;border:1px solid var(--uos-line-2)!important;border-radius:20px!important;box-shadow:var(--uos-shadow-lg)!important;color:var(--uos-text)}
.webui-popover *{color:inherit}
.webui-popover .arrow,.webui-popover .arrow:after{border-right-color:var(--uos-pop)!important;border-left-color:var(--uos-pop)!important}
#toast-container>div{border-radius:16px!important;box-shadow:var(--uos-shadow-lg)!important;opacity:1!important;font-weight:600}
#toast-container>.toast-success{background-color:#166534!important}
#toast-container>.toast-error{background-color:#991b1b!important}
#toast-container>.toast-info{background-color:#1b45cc!important}
#toast-container>.toast-warning{background-color:#92400e!important}
.tooltip-inner{background:var(--uos-ink);color:var(--uos-canvas);border-radius:10px}

/* cards, accordions, tables, pagination, tabs, badges */
.card{background:var(--uos-surface);border:1px solid var(--uos-glass-border);border-radius:var(--uos-radius-lg);box-shadow:inset 0 1px 0 var(--uos-hi-line),var(--uos-shadow);-webkit-backdrop-filter:var(--uos-blur);backdrop-filter:var(--uos-blur);color:var(--uos-text)}
.card-header,.card-footer{background:transparent;border-color:var(--uos-line)}
.accordion-item{background:var(--uos-surface)!important;border:1px solid var(--uos-glass-border)!important;border-radius:18px!important;margin-bottom:10px;overflow:hidden;color:var(--uos-text)}
.accordion-button{background:transparent!important;color:var(--uos-ink)!important;font-weight:600;box-shadow:none!important}
.accordion-button::after{filter:var(--uos-chevron-filter,invert(1))}
html[data-theme="light"] .accordion-button::after{filter:none}
.accordion-button:not(.collapsed){color:var(--uos-accent-text)!important}
.accordion-body{color:var(--uos-text)}
.table{--bs-table-bg:transparent;--bs-table-color:var(--uos-text);color:var(--uos-text)}
.table thead th{color:var(--uos-muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;border-bottom-color:var(--uos-line-2)}
.table td,.table th{border-color:var(--uos-line)}
.pagination .page-link{border:1px solid var(--uos-line-2);background:var(--uos-surface);color:var(--uos-text);border-radius:999px!important;margin:0 3px;min-width:42px;text-align:center;font-weight:600}
.pagination .page-item.active .page-link,.pagination .page-link:hover{background:var(--uos-accent);border-color:transparent;color:var(--uos-on-accent)}
.nav-tabs{border-bottom:1px solid var(--uos-line)}
.nav-tabs .nav-link{border:0;border-bottom:2px solid transparent;color:var(--uos-muted);font-weight:500;background:transparent!important}
.nav-tabs .nav-link.active,.nav-tabs .nav-link:hover{color:var(--uos-ink);border-bottom-color:var(--uos-accent)}
.nav-pills .nav-link{border-radius:999px;color:var(--uos-muted);font-weight:500}
.nav-pills .nav-link.active{background:var(--uos-accent);color:var(--uos-on-accent)}
.badge.bg-primary{background:var(--uos-accent)!important;color:var(--uos-on-accent)!important}
.bg-light,.bg-white{background-color:var(--uos-surface)!important}
.text-muted,.text-secondary{color:var(--uos-muted)!important}
.text-dark,.text-black{color:var(--uos-ink)!important}
.text-white{color:#fff!important}
.border,.border-top,.border-bottom{border-color:var(--uos-line)!important}
.progress{background:rgba(var(--uos-accent-rgb),.14);border-radius:999px}
.progress-bar{background:linear-gradient(90deg,var(--uos-accent),var(--uos-accent));color:var(--uos-on-accent)}
blockquote{border-left:1px solid var(--uos-line-2);padding-left:16px;color:var(--uos-text)}

/* ---------------------------------------------------------------- course cards & core page blocks */
.courses-card,.course-card,.single-course,.course-box{background:var(--uos-surface)!important;border:1px solid var(--uos-glass-border)!important;border-radius:24px!important;box-shadow:inset 0 1px 0 var(--uos-hi-line),var(--uos-shadow)!important;-webkit-backdrop-filter:var(--uos-blur);backdrop-filter:var(--uos-blur);overflow:hidden;transition:border-color var(--uos-dur-1) var(--uos-ease-std)}
.courses-card:hover,.course-card:hover{border-color:var(--uos-line-2)!important}
.courses-card-image{border-radius:18px;overflow:hidden}
.courses-text h5,.courses-card-body h5,.courses-text .title,.courses-card-body .title{color:var(--uos-ink)!important;font-weight:600}
.courses-text p,.courses-card-body p,.courses-price-left p{color:var(--uos-muted)!important}
.courses-price,.courses-price-left h5,.courses-price-left span{color:var(--uos-ink)!important;font-weight:700}
.courses-icon{background:var(--uos-surface-strong)!important;border-radius:999px;color:var(--uos-ink)}
.courses-icon.red-heart i,.red-heart i{color:#f43f5e!important}
.courses-card-image-text h3,.courses-card-image-text span{background:var(--uos-surface-strong)!important;color:var(--uos-ink)!important;border-radius:999px}

/* breadcrumb / core page banners */
.bread-crumb,.breadcrumb-section,.bread-crumb-section{background:transparent!important;border-bottom:1px solid var(--uos-line);position:relative;overflow:hidden}
.bread-crumb h1,.bread-crumb h2,.bread-crumb .title,.bread-crumb h3,.bread-crumb p,.bread-crumb span,.bread-crumb li{color:var(--uos-ink)!important}
.bread-crumb p,.bread-crumb .f-14,.bread-crumb .text-15px{color:var(--uos-muted)!important}
.breadcrumb{background:transparent}
.breadcrumb-item,.breadcrumb-item a{color:var(--uos-muted)!important}
.breadcrumb-item.active{color:var(--uos-ink)!important}
.breadcrumb-item+.breadcrumb-item::before{color:var(--uos-subtle)}

/* ==========================================================================
   Header (header.php)
   ========================================================================== */
.uh{position:sticky;top:0;z-index:1030;padding:12px 0}
.uh-bar{display:flex;align-items:center;gap:14px;min-height:64px;padding:8px 10px 8px 14px;background:var(--uos-surface-strong);border:1px solid var(--uos-glass-border);border-radius:999px;box-shadow:inset 0 1px 0 var(--uos-hi-line),var(--uos-shadow);-webkit-backdrop-filter:var(--uos-blur);backdrop-filter:var(--uos-blur)}
.uh.is-scrolled .uh-bar{box-shadow:inset 0 1px 0 var(--uos-hi-line),var(--uos-shadow-lg)}
.uh.uh-ready .uh-bar{transition:box-shadow var(--uos-dur-2) var(--uos-ease-std)}
.uh-brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;text-decoration:none;color:var(--uos-ink)}
.uh-brand:hover{color:var(--uos-ink)}
.uh-brand img{height:40px;width:auto;display:block}
.uh-brand svg{width:40px;height:40px;flex:0 0 auto}
.uh-brand-text{display:flex;flex-direction:column;line-height:1.1}
.uh-brand-text small{font-size:.66rem;font-weight:600;letter-spacing:.16em;color:var(--uos-muted);text-transform:uppercase}
.uh-brand-text strong{font-size:1.22rem;font-weight:700;letter-spacing:-.02em;background:var(--uos-text-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.uh-nav{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.uh-nav>li{position:relative}
.uh-link{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;color:var(--uos-muted);font-weight:500;font-size:.93rem;white-space:nowrap;border:0;background:transparent;cursor:pointer;transition:color .2s,background-color .2s}
.uh-link i.uh-caret{font-size:10px;opacity:.7;transition:transform .2s}
/* the current section is marked with aria-current only, no outline or tint, so a page opens with the menu looking normal */
.uh-link:hover,.uh-nav>li.open>.uh-link{background:var(--uos-glass-hi);color:var(--uos-ink)}
.uh-nav>li.open>.uh-link i.uh-caret{transform:rotate(180deg)}
.uh-drop{position:absolute;top:calc(100% + 14px);left:0;min-width:290px;padding:10px;background:var(--uos-pop);border:1px solid var(--uos-line-2);border-radius:22px;box-shadow:var(--uos-shadow-lg);opacity:0;visibility:hidden;z-index:20}
.uh-drop:before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.uh-nav>li.open>.uh-drop{opacity:1;visibility:visible}
@media (hover:hover) and (min-width:1200px){.uh-nav>li:hover>.uh-drop{opacity:1;visibility:visible;transition-delay:80ms}.uh-nav>li:hover>.uh-link{background:var(--uos-glass-hi);color:var(--uos-ink)}}
.uh-drop-wide{min-width:640px;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.uh-drop-item{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:16px;color:var(--uos-text);text-decoration:none;transition:background .2s}
.uh-drop-item:hover{background:var(--uos-glass-hi);color:var(--uos-ink)}
.uh-drop-item .uh-ico{width:40px;height:40px;border-radius:12px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--uos-primary-soft);border:1px solid var(--uos-line);color:var(--uos-accent-strong);font-size:16px}
.uh-drop-item strong{display:block;font-size:.93rem;color:var(--uos-ink);font-weight:600}
.uh-drop-item small{display:block;font-size:.8rem;color:var(--uos-muted);line-height:1.4;margin-top:2px}
.uh-drop-head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:6px 12px 8px;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--uos-accent-text)}
.uh-drop-head a{letter-spacing:0;text-transform:none;font-size:.82rem;color:var(--uos-muted)}
.uh-search{flex:1 1 200px;max-width:300px;position:relative;margin-left:auto}
.uh-search input{width:100%;height:44px;border-radius:999px;border:1px solid var(--uos-input-border);background:var(--uos-input);padding:0 16px 0 40px;color:var(--uos-ink);font-size:.9rem;outline:0;transition:border-color .2s,box-shadow .2s}
.uh-search input::placeholder{color:var(--uos-subtle)}
.uh-search input:focus{border-color:var(--uos-accent);box-shadow:var(--uos-ring)}
.uh-search>i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--uos-subtle);font-size:14px;pointer-events:none}
.uh-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.uh-icon{position:relative;width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--uos-ink);background:transparent;border:1px solid var(--uos-line-2);cursor:pointer;font-size:16px;transition:border-color var(--uos-dur-1),color var(--uos-dur-1)}
.uh-icon:hover,.uh-pop.open>.uh-icon{border-color:var(--uos-ink);color:var(--uos-ink)}
.uh-count,.uh-icon .menu_number{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--uos-accent);color:var(--uos-on-accent)!important;font-size:10.5px;font-weight:700;line-height:19px;text-align:center;margin:0;box-shadow:0 0 0 2px var(--uos-canvas)}
.uh-count:empty,.uh-icon .menu_number:empty{display:none}
.uh-pop{position:relative}
.uh-panel{position:absolute;right:0;top:calc(100% + 14px);width:370px;max-width:calc(100vw - 24px);background:var(--uos-pop);border:1px solid var(--uos-line-2);border-radius:22px;box-shadow:var(--uos-shadow-lg);opacity:0;visibility:hidden;z-index:25;overflow:hidden}
.uh-pop.open>.uh-panel{opacity:1;visibility:visible}
.uh-panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--uos-line)}
.uh-panel-head strong{font-size:.98rem;color:var(--uos-ink);font-weight:600}
.uh-panel-head a{font-size:.85rem}
.uh-panel-body{max-height:360px;overflow-y:auto;padding:8px}
.uh-panel-foot{padding:12px 16px;border-top:1px solid var(--uos-line);display:flex;gap:8px}
.uh-panel-foot .btn{flex:1}
.uh-avatar{width:42px;height:42px;border-radius:50%;padding:2px;border:0;background:var(--uos-accent);transition:box-shadow var(--uos-dur-1);cursor:pointer;display:inline-flex}
.uh-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--uos-canvas-2)}
.uh-user{display:flex;gap:12px;align-items:center;padding:16px;border-bottom:1px solid var(--uos-line);background:rgba(var(--uos-accent-rgb),.1)}
.uh-user img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.uh-user strong{display:block;color:var(--uos-ink);font-size:.98rem}
.uh-user small{display:block;color:var(--uos-muted);font-size:.8rem;word-break:break-all}
.uh-menu{list-style:none;margin:0;padding:8px}
.uh-menu a,.uh-menu button{display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border-radius:12px;color:var(--uos-text);font-weight:500;font-size:.9rem;border:0;background:transparent;text-align:left}
.uh-menu a i,.uh-menu button i{width:18px;text-align:center;color:var(--uos-accent-text)}
.uh-menu a:hover,.uh-menu button:hover{background:var(--uos-glass-hi);color:var(--uos-ink)}
.uh-menu .uh-sep{height:1px;background:var(--uos-line);margin:6px 4px}
.uh-menu a.uh-danger,.uh-menu a.uh-danger i{color:var(--uos-danger)}
.uh-login{font-weight:600;color:var(--uos-ink);padding:9px 16px;border-radius:999px}
.uh-login:hover{background:var(--uos-glass-hi);color:var(--uos-ink)}
.uh-join{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 18px;border-radius:999px;background:var(--uos-grad);border:1px solid transparent;color:var(--uos-on-accent)!important;font-weight:600;box-shadow:var(--uos-btn-shadow);white-space:nowrap;transition:background-color var(--uos-dur-1)}
.uh-join:hover{background:var(--uos-grad-hover);color:var(--uos-on-accent)}
.uh-theme .i-sun,.uh-theme .i-moon{transition:transform var(--uos-dur-2) var(--uos-ease-out),opacity var(--uos-dur-1);position:absolute}
.uh-theme .i-moon{opacity:0;transform:scale(.6) rotate(-45deg)}
html[data-theme="light"] .uh-theme .i-sun{opacity:0;transform:scale(.6) rotate(45deg)}
html[data-theme="light"] .uh-theme .i-moon{opacity:1;transform:none}
.uh-burger{display:none}
/* panel rows: cart, wishlist, notifications */
.uh-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:14px}
.uh-item:hover{background:var(--uos-glass-hi)}
.uh-item-link{display:flex;gap:12px;align-items:center;flex:1;min-width:0;color:var(--uos-text)}
.uh-item-link img{width:64px;height:44px;border-radius:10px;object-fit:cover;flex:0 0 auto;background:var(--uos-canvas-2)}
.uh-item-link span{min-width:0;display:flex;flex-direction:column}
.uh-item-link strong{font-size:.86rem;color:var(--uos-ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uh-item-link small{font-size:.76rem;color:var(--uos-muted)}
.uh-item-link em{font-style:normal;font-weight:700;font-size:.82rem;color:var(--uos-accent-text)}
.uh-item-link del{color:var(--uos-subtle);font-weight:500;margin-left:4px}
.uh-item-remove{width:32px;height:32px;border-radius:50%;border:1px solid var(--uos-line);background:transparent;color:var(--uos-muted);flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}
.uh-item-remove:hover{border-color:var(--uos-danger);color:var(--uos-danger)}
.uh-item-remove.d-hidden{display:none!important}
.uh-notif{display:flex;gap:11px;padding:10px;border-radius:14px;position:relative}
.uh-notif+.uh-notif{margin-top:2px}
.uh-notif:hover{background:var(--uos-glass-hi)}
.uh-notif.is-unread{background:rgba(var(--uos-accent-rgb),.07)}
.uh-notif.is-unread:after{content:"";position:absolute;right:12px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--uos-accent)}
.uh-notif-ico{width:36px;height:36px;border-radius:12px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--uos-primary-soft);border:1px solid var(--uos-line);color:var(--uos-accent-strong);font-size:14px}
.uh-notif-body{min-width:0;padding-right:14px}
.uh-notif-body strong{display:block;font-size:.86rem;color:var(--uos-ink);line-height:1.35}
.uh-notif-text{font-size:.8rem;color:var(--uos-muted);line-height:1.45;margin-top:2px;overflow-wrap:anywhere}
.uh-notif-text a{font-weight:600}
.uh-notif-body time{display:block;font-size:.74rem;color:var(--uos-subtle);margin-top:3px}
.uh-empty{text-align:center;padding:26px 16px;display:flex;flex-direction:column;align-items:center;gap:4px}
.uh-empty i{font-size:22px;color:var(--uos-accent-strong);margin-bottom:6px;width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:var(--uos-primary-soft);border:1px solid var(--uos-line)}
.uh-empty strong{color:var(--uos-ink);font-size:.9rem}
.uh-empty small{color:var(--uos-muted);font-size:.8rem;max-width:240px}

/* mobile drawer */
.ud{position:fixed;inset:0;z-index:1060;visibility:hidden;transition:visibility 0s linear var(--uos-dur-exit)}
.ud.open{visibility:visible;transition-delay:0s}
.ud-backdrop{position:absolute;inset:0;background:rgba(5,6,7,.6);opacity:0;transition:opacity var(--uos-dur-exit) var(--uos-ease-in);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ud.open .ud-backdrop{opacity:1;transition:opacity var(--uos-dur-3) var(--uos-ease-out)}
.ud-sheet{position:absolute;top:0;right:0;bottom:0;width:min(380px,90vw);background:var(--uos-pop);border-left:1px solid var(--uos-line-2);box-shadow:var(--uos-shadow-side);transform:translateX(100%);transition:transform var(--uos-dur-exit) var(--uos-ease-in);display:flex;flex-direction:column}
.ud.open .ud-sheet{transform:none;transition:transform var(--uos-dur-3) var(--uos-ease-out)}
.ud-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--uos-line)}
.ud-body{flex:1;overflow-y:auto;padding:12px 12px 24px}
.ud-group{margin-bottom:14px}
.ud-group h6{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--uos-accent-text);margin:12px 10px 6px;font-weight:600}
.ud-group a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;color:var(--uos-text);font-weight:500}
.ud-group a i{width:20px;text-align:center;color:var(--uos-accent-text)}
.ud-group a:hover{background:var(--uos-glass-hi);color:var(--uos-ink)}
.ud-search{position:relative;margin:4px 4px 12px}
.ud-search input{width:100%;height:48px;border-radius:999px;border:1px solid var(--uos-input-border);padding:0 14px 0 42px;background:var(--uos-input);color:var(--uos-ink)}
.ud-search i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--uos-subtle)}
.ud-auth{display:flex;gap:8px;padding:6px 4px}
.ud-auth a{flex:1;text-align:center}

@media (max-width:1399px){.uh-search{max-width:220px}}
@media (max-width:1199px){
    .uh-nav,.uh-search{display:none}
    .uh-burger{display:inline-flex}
    .uh-actions{margin-left:auto}
}
@media (max-width:575px){
    .uh{padding:8px 0}
    .uh-bar{padding:6px 6px 6px 10px;gap:6px;min-height:58px}
    .uh-brand svg{width:36px;height:36px}
    .uh-brand-text strong{font-size:1.05rem}
    .uh-brand-text small{font-size:.58rem}
    .uh-icon{width:44px;height:44px;font-size:15px}
    .uh-avatar{width:44px;height:44px}
    /* phones: the icons are drawn at the full 44px touch size, so the wider invisible hit ring is not needed */
    .uh-bar .uh-icon::after,.uh-bar .uh-avatar::after{inset:0}
    .uh-hide-sm{display:none!important}
    .uh-panel{position:fixed;left:12px;right:12px;width:auto;top:78px}
}

/* ==========================================================================
   Footer (footer.php)
   ========================================================================== */
.uf{margin-top:16px;padding:0 0 26px;position:relative}
.uf-card{background:var(--uos-surface);border:1px solid var(--uos-glass-border);box-shadow:none;-webkit-backdrop-filter:var(--uos-blur);backdrop-filter:var(--uos-blur);color:var(--uos-muted);border-radius:30px;padding:48px 44px 28px;position:relative;overflow:hidden}
.uf-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr repeat(3,1fr) 1.3fr;gap:28px}
.uf h4,.uf h5,.uf .uf-h{color:var(--uos-ink)!important;font-size:.95rem;font-weight:600;margin:0 0 14px;letter-spacing:0}
.uf p,.uf li,.uf small,.uf span{color:var(--uos-muted)}
.uf a{color:var(--uos-text)}
.uf a:hover{color:var(--uos-accent-text)}
.uf ul{list-style:none;margin:0;padding:0}
.uf ul li{margin-bottom:9px;font-size:.92rem}
.uf-about{margin:14px 0 18px;font-size:.92rem;line-height:1.65;max-width:340px}
.uf-social{display:flex;gap:8px}
.uf-social a{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--uos-line-2);color:var(--uos-ink)}
.uf-social a:hover{border-color:var(--uos-ink);color:var(--uos-ink)}
.uf-news{background:var(--uos-glass-hi);border:1px solid var(--uos-line);border-radius:22px;padding:18px}
.uf-news p{font-size:.88rem;margin-bottom:12px}
.uf-news form{display:flex;gap:8px;flex-wrap:wrap}
.uf-news input{flex:1 1 160px;min-width:0;height:46px;border-radius:999px;border:1px solid var(--uos-input-border);background:var(--uos-input);color:var(--uos-ink);padding:0 16px;outline:0}
.uf-news input::placeholder{color:var(--uos-subtle)}
.uf-news input:focus{border-color:var(--uos-accent);box-shadow:var(--uos-ring)}
.uf-news button{height:46px;border-radius:999px;border:1px solid transparent;padding:0 18px;font-weight:600;background:var(--uos-grad);color:var(--uos-on-accent)}
.uf-bottom{position:relative;z-index:1;margin-top:34px;padding-top:20px;border-top:1px solid var(--uos-line);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:.85rem}
.uf-bottom select{background:var(--uos-input);color:var(--uos-ink);border:1px solid var(--uos-line-2);border-radius:999px;height:36px;padding:0 12px}
.uf-contact li{display:flex;gap:10px;align-items:flex-start}
.uf-contact i{color:var(--uos-accent-text);margin-top:3px;width:16px}
.uf-brand .uh-brand-text small{color:var(--uos-muted)}
@media (max-width:1199px){.uf-grid{grid-template-columns:1fr 1fr 1fr}.uf-col-brand,.uf-col-news{grid-column:1/-1}}
@media (max-width:640px){.uf-card{padding:32px 20px 22px;border-radius:24px}.uf-grid{grid-template-columns:1fr 1fr;gap:22px}.uf-bottom{justify-content:center;text-align:center}}

/* announcement bar */
.u-announce{font-size:.9rem;font-weight:500;padding:9px 0;color:var(--uos-on-accent);background:var(--uos-accent)}
.u-announce .container{display:flex;align-items:center;justify-content:space-between;gap:12px}
.u-announce a{color:var(--uos-on-accent);text-decoration:underline;text-underline-offset:3px;margin-left:6px;font-weight:700}
.u-announce button{border:0;background:rgba(0,0,0,.12);color:var(--uos-on-accent);width:28px;height:28px;border-radius:50%;flex:0 0 auto}
.u-announce-success{background:#4ade80}
.u-announce-warning{background:#fbbf24}
.u-announce-dark{background:var(--uos-ink);color:var(--uos-canvas)}
.u-announce-dark a,.u-announce-dark button{color:var(--uos-canvas)}

/* level pills with user-chosen colours stay readable */
.community-level-pill,.uos-level-pill{color:#fff!important}

/* legacy partials */
.sub-header{display:none!important}

/* ==========================================================================
   Core LMS pages in the dark theme: many core styles hard-code light
   backgrounds and dark text. Re-point the common ones at the tokens.
   ========================================================================== */
body>section,#uos-page>section,main>section{color:var(--uos-text)}
.courses-details-1st-text h1,.courses-details-1st-text p,.course-details-1st-text,.course-meta,.course-meta *{color:var(--uos-text)!important}
.course-sidebar,.course-sidebar-1,.course-price-card,.courses-details-sidebar,.course-details-sidebar,.sidebar,.course-sidebar-content,.course-playing-content,.course-sidebar-card,.purchase-section{background:var(--uos-surface)!important;border:1px solid var(--uos-glass-border)!important;border-radius:24px!important;color:var(--uos-text)!important}
.course-sidebar *,.courses-details-sidebar *,.course-price-card *{border-color:var(--uos-line)!important}
.will-learn,.will-learn *,.outCome,.outCome *,.requirment,.description,.description *{color:var(--uos-text)!important}
.courses-card-body,.courses-text{color:var(--uos-text)}
.instructor-card,.instructor-1,.review-card,.reviews,.comment-box,.blog-card,.blog-details,.single-blog,.blog-sidebar,.blogs-card,.cart-item,.shopping-cart,.cart-box,.purchase-history,.user-dashboard,.my-course-card,.my-courses,.wishlist-card,.profile-card,.user-profile,.payment-card,.checkout-card{background:var(--uos-surface)!important;border-color:var(--uos-glass-border)!important;color:var(--uos-text)!important}
.lms2-footer-section,.footer,.footer-area{background:transparent!important}
.text-14px,.text-15px,.text-16px,.text-13px,.text-12px,.f-14,.fw-500,.fw-600,.ellipsis-line-2,.last-update,.info,.subtitle{color:inherit}
.color-1,.color-3,.text-color-1{color:var(--uos-ink)!important}
.login-area,.sign-up-area,.login-form,.signup-form,.login-page,.sign-up-page{background:transparent!important;color:var(--uos-text)}
.login-area h4,.login-area h2,.sign-up-area h4,.sign-up-area h2{color:var(--uos-ink)!important}
.accordion-collapse,.collapse-body{color:var(--uos-text)}
table,tbody,tr,td,th{color:inherit}
.bg-primary{background:var(--uos-accent)!important;color:var(--uos-on-accent)!important}
.text-primary{color:var(--uos-accent-text)!important}
.text-success{color:var(--uos-success)!important}
.text-danger{color:var(--uos-danger)!important}
.text-warning{color:var(--uos-warning)!important}
.text-info{color:var(--uos-info)!important}
.alert{border-radius:16px;border:1px solid var(--uos-line-2)}
.alert-info{background:var(--uos-info-soft);color:var(--uos-info)}
.alert-success{background:var(--uos-success-soft);color:var(--uos-success)}
.alert-warning{background:var(--uos-warning-soft);color:var(--uos-warning)}
.alert-danger{background:var(--uos-danger-soft);color:var(--uos-danger)}
.list-group-item{background:var(--uos-surface);color:var(--uos-text);border-color:var(--uos-line)}
.note-editor,.note-editable,.note-toolbar{background:var(--uos-surface-solid)!important;color:var(--uos-text)!important;border-color:var(--uos-line-2)!important}
.tagify{--tags-border-color:var(--uos-line-2);--tag-bg:var(--uos-primary-soft);--tag-text-color:var(--uos-ink);background:var(--uos-input)}
.swiper-pagination-bullet{background:var(--uos-muted)}
.swiper-pagination-bullet-active{background:var(--uos-accent)}
.eu-cookie,#cookieConsentContainer,.uos-cookie{background:var(--uos-pop)!important;border:1px solid var(--uos-line-2)!important;color:var(--uos-text)!important;border-radius:20px!important;box-shadow:var(--uos-shadow-lg)}
.uos-cookie-text,#cookieConsentContainer p{color:var(--uos-text)}
.uos-cookie a,#cookieConsentContainer a{color:var(--uos-accent-text)!important}

/* reduce motion */
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}}
.btn-primary.text-white,.btn-primary .text-white{color:var(--uos-on-accent)!important}
.cb-cert{color:#1d1d2b}
.cb-cert :where(div,strong,span,small,p,h1,h2,h3,h4,em,b){color:inherit}

/* ===== Palette lock: one accent (lime) + violet. Colours stored per item in the database (categories, groups,
   levels, badges, reactions, post kinds, Arena rooms) are ignored on purpose until the final brand palette is set. ===== */
[style*="--kind-color"]{--kind-color:var(--uos-accent-text)!important}
[style*="--badge-color"]{--badge-color:var(--uos-accent)!important}
[style*="--lv"]{--lv:var(--uos-accent)!important}
[style*="--g:"]{--g:var(--uos-accent)!important}
.arena-page [style*="--accent"],.arena-complete [style*="--accent"]{--accent:var(--uos-accent-text)!important}
.community-nav-dot,.community-category-dot{background:var(--uos-accent)!important}
.community-reaction-icon{background:var(--uos-accent)!important;color:var(--uos-on-accent)!important}
.community-level-pill{background:var(--uos-accent)!important;background-image:none!important;color:var(--uos-on-accent)!important;text-shadow:none!important}
.cm-level.is-unlocked i,.uos-badge-tile.is-owned i{color:var(--uos-on-accent)!important;box-shadow:none!important}
.hm-level i,.hm-lvl i{color:var(--uos-on-accent)}
.arena-page .arena-pos[style]{background:var(--uos-surface-strong)!important;color:var(--uos-accent-text)!important}
.arena-page .arena-list i[style]{color:var(--uos-accent-text)!important}
.cm-gthumb{color:var(--uos-on-accent)}
.uos-cover-fallback{background:linear-gradient(150deg,#1b1d22,#121316)!important}
/* Skip link: hidden until keyboard focus */
.uos-skip{position:fixed;left:16px;top:-60px;z-index:100000;padding:10px 18px;border-radius:999px;background:var(--uos-accent);color:var(--uos-on-accent)!important;font-weight:700;transition:top .15s}
.uos-skip:focus{top:12px;outline:2px solid var(--uos-ink);outline-offset:2px}
span#main-content{display:block;height:0;outline:0}
/* Phones: the whole header row (logo + actions + menu button) must fit in 320-420px */
@media (max-width:420px){
  .uh-bar{gap:4px;padding:5px 5px 5px 8px}
  .uh-brand{gap:7px;min-width:0;flex:0 1 auto}
  .uh-brand svg{width:32px;height:32px}
  .uh-actions{gap:3px;min-width:0}
  .uh-icon{font-size:14px}
  .uh-join{min-height:34px;padding:0 11px;font-size:.82rem;gap:5px}
  .uh-join i{display:none}
}
/* courses sidebar search: the submit icon is a 44px target */
.course-category .form-group button[type=submit]{min-width:44px;min-height:44px;top:50%;left:0;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;padding:0}
.course-category .form-group .form-control{padding-left:44px}
@media (max-width:359px){.uh-brand .uh-brand-text,.uh-brand span:not(:first-child){display:none}}
/* 320-359px: five 44px header targets plus the logo do not fit, so the icons keep their compact size and a
   hit ring that stays inside the 3px gaps (no overlap between neighbours) */
@media (max-width:359px){.uh-icon{width:34px;height:34px}.uh-avatar{width:38px;height:38px}.uh-bar .uh-icon::after,.uh-bar .uh-avatar::after{inset:-1px}}
/* Values that were styled as h1 (prices, profile stats, review scores) keep their size without breaking the outline */
.ammount .uos-price{font-size:24px;font-weight:600;color:var(--uos-ink);margin:0;line-height:1.2;font-variant-numeric:tabular-nums}
.ammount .uos-price-old{font-size:18px;color:var(--uos-muted);padding:4px 10px;font-variant-numeric:tabular-nums}
.skill-point-1 .uos-stat-num{display:block;font-size:32px;font-weight:600;color:var(--uos-ink);line-height:1.2;font-variant-numeric:tabular-nums}
.skill-point-1 .uos-stat-label{display:block;font-size:15px;font-weight:600;color:var(--uos-muted)}
.uos-rating-num{font-size:20px;font-weight:600;color:var(--uos-ink);font-variant-numeric:tabular-nums}
.uos-section-title{font-size:var(--uos-fs-h2);line-height:var(--uos-lh-heading);margin:24px 0 12px}
.uos-inner-title{font-size:24px;font-weight:600;margin:0 0 16px}
/* 404: the original template painted these links #754FFE */
.error-body{padding:48px 0 64px}
.error-body .error-body-text{margin-top:0;text-align:left}
.error-body-text h2{font-size:var(--uos-fs-h2);margin:0 0 8px}
.error-body-text ul{padding-left:18px;margin:0 0 8px}
.error-body-text li a{background:none!important;color:var(--uos-accent-text)!important;padding:0!important;text-decoration:underline}
.error-body-text>a{display:inline-flex;align-items:center;min-height:44px;background:var(--uos-accent)!important;color:var(--uos-on-accent)!important;border-radius:999px!important;padding:10px 22px!important;font-weight:600;text-decoration:none}
.message-btn{background:var(--uos-accent)!important;color:var(--uos-on-accent)!important;min-height:44px;border-radius:999px!important;font-weight:600}
.post p{color:var(--uos-muted)!important}
.blog-body .profile-img{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.blog-body .profile-img p{margin:0;color:var(--uos-muted)}
/* Plain page headers (blog, auth pages): title, optional intro, breadcrumb; no banner image */
.uos-crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 12px;padding:0;font-size:.9rem;color:var(--uos-muted)}
.uos-crumbs li{display:inline-flex;align-items:center;gap:6px;min-width:0}
.uos-crumbs li+li:before{content:"/";color:var(--uos-muted)}
.uos-crumbs a{color:var(--uos-muted);text-decoration:underline;display:inline-flex;align-items:center;min-height:44px}
.uos-crumbs a:hover{color:var(--uos-ink)}
.uos-crumbs [aria-current]{color:var(--uos-ink);font-weight:600;overflow-wrap:anywhere}
.uos-blog-head{padding:40px 12px 8px}
.uos-blog-head h1{font-size:var(--uos-fs-h1);margin:0 0 8px}
.uos-blog-head p{color:var(--uos-muted);max-width:62ch;margin:0}
.uos-article-title{font-size:var(--uos-fs-h1);line-height:var(--uos-lh-heading);margin:0 0 14px;text-wrap:balance}
.uos-comments-title{font-size:var(--uos-fs-h3);margin:28px 0 14px}
.uos-auth-title{font-size:var(--uos-fs-h1);margin:0 0 8px}
/* Template page titles that had fixed px sizes (course catalogue 40/30px, course page 30px desktop but 32px
   on phones) and the hub/topic heroes now share the h1 token, so every page title scales the same way. */
html body .bread-crumb h1,.courses-details .courses-details-1st-text h1,html body .uhub-hero h1{font-size:var(--uos-fs-h1);line-height:var(--uos-lh-heading);letter-spacing:var(--uos-ls-heading)}
/* long text keeps a readable measure on wide screens */
.uos-page section>p.uos-muted,.uhub-page section>p.uos-muted,main section>p.uos-muted{max-width:var(--uos-measure)}
/* Touch: every control gets a 44px hit area. Compact header icons keep their drawn size and extend the
   hit area with an invisible ring; text inputs are 16px so iOS does not zoom the page on focus. */
@media (max-width:767px),(pointer:coarse){
  .uh-icon,.uh-join,.uh-brand,.uh-avatar{position:relative}
  .uh-icon::after,.uh-join::after,.uh-brand::after,.uh-avatar::after{content:"";position:absolute;inset:-5px}
  .u-announce button{width:44px;height:44px}
  .uf ul a,.ul-forgot,.uos-crumbs a{display:inline-flex;align-items:center;min-height:44px}
  .u-announce a{padding:12px 0}
  .uf ul li{margin-bottom:0}
  .uf-bottom a,.uf-contact a,.uos-stat-link,.arena-topnav .arena-brand,.uos-page a.uos-link:not(p a):not(li a):not(dd a){display:inline-flex;align-items:center;min-height:44px}
  .uos-page summary{padding-block:10px}
  a.uos-badge{position:relative}
  a.uos-badge::after{content:"";position:absolute;inset:-7px -2px}
  .uh-join,.uh-brand{min-height:44px}
  .uos-btn,.uos-btn-sm,.uos-chip,.community-btn,.arena-btn,.arena-tab,.btn,.uos-link.uos-back,.pagination .page-link{min-height:44px}
  .uos-btn-icon,.uos-icon-btn,.btn-icon{min-width:44px;min-height:44px}
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select,textarea{font-size:16px!important}
}
.ud{overflow:hidden}
/* Open dropdowns/popovers always sit above neighbouring glass cards (each blur creates its own layer). */
.uos-card:has(.dropdown-menu.show),.community-card:has(.dropdown-menu.show),.card:has(.dropdown-menu.show),
.uos-card:has([aria-expanded="true"]),.community-card:has([aria-expanded="true"]){position:relative;z-index:40}
.dropdown-menu{z-index:1060}

/* ===== Rich-text editor (Summernote) on the site tokens ===== */
.note-editor.note-frame,.note-editor.note-airframe{border:1px solid var(--uos-line-2)!important;border-radius:16px!important;background:var(--uos-input)!important;overflow:visible}
.note-editor .note-toolbar,.note-popover .popover-content{background:var(--uos-surface-strong)!important;border-bottom:1px solid var(--uos-line)!important;border-radius:16px 16px 0 0;padding:8px!important;display:flex;flex-wrap:wrap;gap:6px}
.note-editor .note-toolbar>.note-btn-group,.note-popover .popover-content>.note-btn-group{margin:0!important;display:inline-flex;gap:2px;padding:2px;border-radius:12px;background:var(--uos-surface);border:1px solid var(--uos-line)}
.note-btn,.note-editor .note-btn,.note-popover .note-btn{background:transparent!important;border:0!important;color:var(--uos-text)!important;min-width:32px;height:30px;padding:0 8px!important;border-radius:9px!important;box-shadow:none!important;font-size:13px;line-height:30px}
.note-btn:hover,.note-btn:focus,.note-btn.active{background:rgba(var(--uos-accent-rgb),.16)!important;color:var(--uos-ink)!important}
.note-btn .note-current-color-button i,.note-color .note-recent-color{border-radius:4px}
.note-editor .note-editing-area .note-editable{background:transparent!important;color:var(--uos-text)!important;min-height:160px;padding:14px 16px!important;font-size:.98rem;line-height:1.65}
.note-editor .note-editing-area .note-editable a{color:var(--uos-accent-text)}
.note-editor .note-placeholder{color:var(--uos-subtle)!important;padding:14px 16px!important}
.note-editor .note-statusbar{background:transparent!important;border-top:1px solid var(--uos-line)!important;border-radius:0 0 16px 16px}
.note-editor .note-statusbar .note-resizebar .note-icon-bar{border-top-color:var(--uos-line-2)!important}
.note-editor.note-frame.codeview .note-editing-area .note-codable{background:var(--uos-canvas-2)!important;color:var(--uos-ink)!important}
.note-dropdown-menu,.note-editor .dropdown-menu,.note-popover .dropdown-menu{background:var(--uos-pop)!important;border:1px solid var(--uos-line-2)!important;border-radius:14px!important;padding:6px!important;box-shadow:var(--uos-shadow-lg)!important;min-width:170px}
.note-dropdown-item,.note-dropdown-menu a,.note-dropdown-menu .dropdown-item{color:var(--uos-text)!important;border-radius:9px;padding:6px 10px!important;display:block}
.note-dropdown-item:hover,.note-dropdown-menu a:hover{background:rgba(var(--uos-accent-rgb),.14)!important;color:var(--uos-ink)!important}
.note-dropdown-menu h1,.note-dropdown-menu h2,.note-dropdown-menu h3,.note-dropdown-menu h4,.note-dropdown-menu h5,.note-dropdown-menu h6,.note-dropdown-menu p,.note-dropdown-menu blockquote,.note-dropdown-menu pre{color:var(--uos-ink)!important;margin:0}
.note-popover.popover{background:var(--uos-pop)!important;border:1px solid var(--uos-line-2)!important;border-radius:14px}
.note-popover .popover-arrow,.note-popover .arrow{display:none}
.note-modal .modal-content,.note-modal-content{background:var(--uos-pop)!important;color:var(--uos-text)!important;border:1px solid var(--uos-line-2)!important;border-radius:20px!important}
.note-modal .modal-header,.note-modal-header{border-bottom:1px solid var(--uos-line)!important}
.note-modal .modal-title,.note-modal-title,.note-modal label,.note-form-label{color:var(--uos-ink)!important}
.note-modal .note-input,.note-modal input.form-control{background:var(--uos-input)!important;color:var(--uos-ink)!important;border:1px solid var(--uos-line-2)!important;border-radius:12px!important}
.note-modal .note-btn-primary,.note-modal .btn-primary{background:var(--uos-grad)!important;color:var(--uos-on-accent)!important;border:0!important;border-radius:999px!important}
.note-modal-backdrop{background:rgba(0,0,0,.55)!important}
.note-color-palette .note-color-btn{border-radius:4px}
.note-dropdown-menu{min-width:200px!important;max-height:320px;overflow:auto}.note-dropdown-item,.note-dropdown-menu a{white-space:nowrap}
/* Core course page: the curriculum step line follows the brand accent (was the original Academy violet) */
ul.step-down li::before{background-color:rgba(var(--uos-accent-rgb),.35)}

/* Original template states that were hard-coded to #754FFE (purple): repainted with the brand accent */
.dropdown-menu li a:hover,.courses-card-body:hover .courses-text h5,.courses-card-body .courses-text .courses-price .courses-price-right i,.qustion .accordion-item .active,.footer a:hover,.ac-lecture li a span i,.accordion-body-2 .accordion-body-video h2 a:hover,.accordion-body-2 .accordion-time h2:hover,.include-icon i,.sing-up-right h3 span,.faq .faq-accrodion .faq-acc-heading h4{color:var(--uos-accent-text)}
.search-item span:hover,.inline-form .search-btn,.search-option .submit-cls,.grid-view-body .courses-card .courses-text .review-icon span,.pagenation .active,.accordion-body-2 .accordion-body-video .icon i,.instructor .instructor-icon i:hover,.blog-body .left-tag a:hover,.blog-body .right-section .right-tag a:hover,.purchase-btn:hover,.faq-accrodion .accordion .accordion-button::before,.eBtn .btn:hover,.enrollBtn{background:var(--uos-accent);color:var(--uos-on-accent);border-color:var(--uos-accent)}
.bundle-active{background:var(--uos-accent);color:var(--uos-on-accent);border-color:var(--uos-accent)!important}
.search-icon,.cross-icon{border-color:var(--uos-line-2)}
.comment #phone:hover,.form-section #exampleFormControlInput1:focus-visible{border-color:var(--uos-accent-text)}

/* ===== Account profile header: cover photo + profile photo, both edited with the crop editor (uos-cropper.js) ===== */
.uprof{position:relative;margin:0 0 20px;border:1px solid var(--uos-line);border-radius:var(--uos-radius);background:var(--uos-surface-solid);overflow:hidden}
.uprof-cover{position:relative;aspect-ratio:3/1;min-height:120px;background-color:var(--uos-canvas-2);background-size:cover;background-position:center;
    background-image:url("../brand/v2/uos-cover-default.svg");background-color:#2458ff} /* brand default cover: Primary Blue with the cropped O */
.uprof-cover.has-image{background-color:#000}
.uprof-cover-form{position:absolute;right:12px;bottom:12px;margin:0;z-index:2}
.uprof-cover-remove{position:absolute;right:12px;top:12px;margin:0;z-index:2}
.uprof-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.uprof-tools[data-state=idle] .uprof-when-ready,.uprof-tools[data-state=ready] .uprof-when-idle{display:none!important}
.uprof-btn{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;margin:0;border-radius:999px;border:1px solid var(--uos-line-2);
    background:var(--uos-surface-strong);color:var(--uos-ink);font-size:14px;font-weight:600;cursor:pointer;transition:background-color .15s,border-color .15s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.uprof-btn:hover{border-color:var(--uos-accent-text)}
.uprof-btn-primary{background:var(--uos-accent);border-color:var(--uos-accent);color:var(--uos-on-accent)}
.uprof-btn-primary:hover{border-color:var(--uos-accent);filter:brightness(.96)}
.uprof-btn-ghost{background:rgba(8,9,11,.55);color:#f3f4f1;border-color:rgba(255,255,255,.2)}
.uprof-btn:focus-visible,.uprof-cam:focus-visible{outline:2px solid var(--uos-accent);outline-offset:2px}
.uprof-id{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;padding:0 20px 18px;margin:-48px 0 0;position:relative}
.uprof-avatar{position:relative;flex-shrink:0}
.uprof-avatar img{display:block;width:132px;height:132px;border-radius:50%;object-fit:cover;border:4px solid var(--uos-surface-solid);background:var(--uos-canvas-2)}
.uprof-cam{position:absolute;right:4px;bottom:4px;display:grid;place-items:center;width:38px;height:38px;margin:0;border-radius:50%;cursor:pointer;
    background:var(--uos-accent);color:var(--uos-on-accent);border:3px solid var(--uos-surface-solid)}
.uprof-text{flex:1 1 220px;min-width:0;padding-bottom:4px}
.uprof-name{margin:0 0 2px;font-size:22px;line-height:1.25;color:var(--uos-ink)}
.uprof-text p{margin:0;color:var(--uos-muted);font-size:14px}
.uprof-photo-tools{padding-bottom:6px}
.uprof label.uprof-btn,.uprof label.uprof-cam{margin-bottom:0}
.uprof input.visually-hidden:focus-visible ~ .uprof-tools .uprof-when-idle{outline:2px solid var(--uos-accent);outline-offset:2px}
@media (max-width:575px){
    .uprof-id{margin-top:-40px;padding:0 14px 14px;gap:12px}
    .uprof-avatar img{width:104px;height:104px}
    .uprof-cover-form{right:8px;bottom:8px}.uprof-cover-remove{right:8px;top:8px}
    .uprof-btn{min-height:36px;padding:0 12px;font-size:13px}
}
/* ===== Animated line illustrations (helpers/uos_illo_helper.php): hub cards, homepage, About page =====
   Static by default; a picture below the fold draws once when scrolled into view (.il-armed holds frame 0
   off-screen, .il-play runs it, .il-rest = finished); hovering or focusing the link around a resting picture
   plays one small gesture (.il-replay) that never hides anything. Elements can wait (--d), a batch is staggered
   (--o). html.il-ready is set only when IntersectionObserver exists and the visitor has not asked for reduced
   motion; otherwise pictures stay still. */
.il{display:block;width:100%;height:100%;overflow:visible;--il-ink:rgba(var(--uos-ink-rgb),.78);--il-muted:rgba(var(--uos-ink-rgb),.28);--il-surface:var(--uos-surface-solid)}
.il .sf{fill:var(--il-surface)}
.il .ln,.il .mt,.il .as,.il .dk{fill:none;stroke-linecap:round;stroke-linejoin:round}
.il .sf.ln,.il .sf.mt{fill:var(--il-surface)}
.il .ln{stroke:var(--il-ink);stroke-width:1.6}
.il .mt{stroke:var(--il-muted);stroke-width:1.6}
.il .as{stroke:var(--uos-accent-text);stroke-width:4}
.il .ac{fill:var(--uos-accent)}
.il .dk{stroke:var(--uos-on-accent);stroke-width:2}
.il .dkf{fill:var(--uos-on-accent)}
.il .sfk{fill:var(--uos-canvas)}
.il [class*="a-"]{transform-box:fill-box;transform-origin:50% 50%}
.il .a-rise{transform-origin:50% 100%}
.il .a-wave{transform-origin:0 50%}
.il .a-plant{transform-origin:50% 100%}
html.il-ready .il:is(.il-armed,.il-play) [class*='a-']{animation-duration:520ms;animation-timing-function:var(--uos-ease-out);animation-delay:calc(var(--o,0s) + var(--d,0s) * .4);animation-iteration-count:1;animation-fill-mode:both}
html.il-ready .il.il-armed [class*='a-']{animation-play-state:paused}
html.il-ready .il:is(.il-armed,.il-play) .a-write{stroke-dasharray:1 1;animation-name:il-in-write;animation-duration:var(--uos-dur-draw)}
html.il-ready .il:is(.il-armed,.il-play) .a-rise{animation-name:il-in-rise;animation-duration:420ms}
html.il-ready .il:is(.il-armed,.il-play) .a-pop{animation-name:il-in-pop;animation-duration:var(--uos-dur-reveal)}
html.il-ready .il:is(.il-armed,.il-play) .a-spinpop{animation-name:il-in-spinpop;animation-duration:var(--uos-dur-reveal)}
html.il-ready .il:is(.il-armed,.il-play) .a-plant{animation-name:il-in-plant;animation-duration:var(--uos-dur-reveal)}
html.il-ready .il:is(.il-armed,.il-play) .a-slide{animation-name:il-in-slide;animation-duration:var(--uos-dur-reveal)}
html.il-ready .il:is(.il-armed,.il-play) .a-twinkle{animation-name:il-in-twinkle;animation-duration:var(--uos-dur-reveal)}
html.il-ready .il:is(.il-armed,.il-play) .a-ring{animation-name:il-in-ring;animation-duration:var(--uos-dur-reveal)}
html.il-ready .il:is(.il-armed,.il-play) .a-bubble{animation-name:il-in-bubble;animation-duration:var(--uos-dur-reveal)}
html.il-ready .il.il-replay [class*='a-']{animation-duration:520ms;animation-timing-function:var(--uos-ease-std);animation-delay:calc(var(--d,0s) * .15);animation-iteration-count:1}
html.il-ready .il:is(.il-armed,.il-play,.il-replay) .a-bounce{animation-name:il-g-bounce}
html.il-ready .il:is(.il-armed,.il-play,.il-replay) :is(.a-pulse,.a-beat){animation-name:il-g-pulse}
html.il-ready .il:is(.il-armed,.il-play,.il-replay) :is(.a-wiggle,.a-shake){animation-name:il-g-wiggle}
html.il-ready .il:is(.il-armed,.il-play,.il-replay) :is(.a-sway,.a-tilt){animation-name:il-g-sway}
html.il-ready .il:is(.il-armed,.il-play,.il-replay) .a-spin{animation-name:il-g-spin}
html.il-ready .il:is(.il-armed,.il-play,.il-replay) :is(.a-flip,.a-coin){animation-name:il-g-coin}
html.il-ready .il:is(.il-armed,.il-play,.il-replay) .a-fly{animation-name:il-g-fly}
html.il-ready .il:is(.il-armed,.il-play,.il-replay) :is(.a-float,.a-peek,.a-type){animation-name:il-g-lift}
html.il-ready .il:is(.il-armed,.il-play,.il-replay) .a-sweep{animation-name:il-g-sweep}
html.il-ready .il:is(.il-armed,.il-play,.il-replay) .a-wave{animation-name:il-g-wave}
html.il-ready .il:is(.il-armed,.il-play,.il-replay) .a-ripple{animation-name:il-g-ripple}
html.il-ready .il:is(.il-armed,.il-play,.il-replay) .a-scan{animation-name:il-g-scan;animation-duration:900ms}
@keyframes il-in-write{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes il-in-rise{from{transform:scaleY(0)}}
@keyframes il-in-pop{from{opacity:0;transform:scale(.85)}}
@keyframes il-in-spinpop{from{opacity:0;transform:scale(.85) rotate(-40deg)}}
@keyframes il-in-plant{from{opacity:0;transform:translateY(-8px)}}
@keyframes il-in-slide{from{opacity:0;transform:translateY(8px)}}
@keyframes il-in-twinkle{from{opacity:0;transform:scale(.6) rotate(-45deg)}}
@keyframes il-in-ring{from{opacity:0;transform:scale(.8)}}
@keyframes il-in-bubble{from{opacity:0;transform:translateY(6px)}}
@keyframes il-g-bounce{40%{transform:translateY(-4px)}}
@keyframes il-g-pulse{40%{transform:scale(1.06)}}
@keyframes il-g-wiggle{30%{transform:rotate(-4deg)}65%{transform:rotate(3deg)}}
@keyframes il-g-sway{50%{transform:rotate(3deg)}}
@keyframes il-g-spin{from{transform:rotate(-90deg)}}
@keyframes il-g-coin{50%{transform:scaleX(.2)}}
@keyframes il-g-fly{50%{transform:translate(6px,-4px)}}
@keyframes il-g-lift{50%{transform:translateY(-3px)}}
@keyframes il-g-scan{50%{transform:translateY(54px)}}
@keyframes il-g-sweep{50%{transform:translate(-12px,-3px)}}
@keyframes il-g-wave{50%{transform:skewY(-4deg) scaleX(.94)}}
@keyframes il-g-ripple{50%{transform:translateX(-6px)}}
@media print{html.il-ready .il [class*='a-']{animation:none!important}}
@media (prefers-reduced-motion:reduce){.il *{animation:none!important;transition:none!important}}
/* ===== One consistent space between page content and the footer (about 56 px on every page) =====
   Pages used to add 64 to 96 px of bottom padding, sometimes twice (page + last section), plus an 80 px footer margin. */
[data-uos-page]>main,[data-uos-page]>.mk,[data-uos-page]>.uos-page,[data-uos-page]>section:last-of-type{padding-bottom:40px!important;margin-bottom:0!important;min-height:0!important}
[data-uos-page] .mk-section:last-child,[data-uos-page] main:not(.uos-main-auto)>.container>section:last-child,[data-uos-page] main:not(.uos-main-auto)>.container>nav:last-child{padding-bottom:0!important;margin-bottom:0!important}
[data-uos-page] main:not(.uos-main-auto)>.container>:last-child,[data-uos-page] main:not(.uos-main-auto)>.container>:last-child>p:last-child{margin-bottom:0!important}
/* the footer always follows the content directly, also on short pages */
[data-uos-page]{min-height:0}
/* instructor profile: the about block ended with a 120 px margin above the footer */
[data-uos-page] .instructor-about:last-child{margin-bottom:0!important}

/* brand pack v2: logo */
/* logo lockup (S-E-O symbol + wordmark): 3116 x 432 artwork, never under 180px wide */
html body img.uos-logo{display:block;height:30px!important;width:auto!important;max-width:none!important;min-width:180px;flex:0 0 auto}
html body img.uos-logo-for-dark{display:none!important}
html[data-theme="dark"] body img.uos-logo-for-light{display:none!important}
html[data-theme="dark"] body img.uos-logo-for-dark{display:block!important}

.uh-brand{gap:0}
@media (max-width:991px){html body .uh-brand img.uos-logo{height:26px!important}}
.ul-brand img.uos-logo{height:32px!important}
.uf-brand img.uos-logo{height:32px!important}

/* phones: the S-E-O symbol alone (the full lockup needs 180px), cropped from the same artwork */
@media (max-width:575px){html body .uh-head img.uos-logo,html body header .uh-brand img.uos-logo{width:84px!important;min-width:0;height:27px!important;object-fit:cover;object-position:left center}}
/* footer: the full lockup, edge to edge, closes every page (brand master artwork, never redrawn) */
/* outside .container: almost the full footer width (wider than the card), close under the footer card */
.uf-giant{margin:clamp(12px,1.6vw,24px) auto 0;padding:0 clamp(8px,1.8vw,28px);max-width:1680px;box-sizing:border-box}
.uf-giant svg{display:block;width:100%;height:auto;overflow:visible}
html body .uf-giant text.uf-giant-word:not(#uos-no-display-font){font-family:var(--uos-font-display)!important;fill:var(--uos-logo-ink)}
.uf-giant-sym{fill:var(--uos-logo-mark)}

/* ---- icons never take the colour of their own background (icon audit, brand refine) ---- */
.review-btn .compare-img{color:var(--uos-muted)!important}
.review-btn .compare-img:hover{color:var(--uos-accent-text)!important}
.info-tag svg{color:var(--uos-accent-text)}
.list-btn{color:var(--uos-ink)}
html body .list-btn svg path{fill:currentColor}
html body .list-btn:hover,html body .list-btn.active{color:var(--uos-on-accent)}
html body .courses-icon i{color:var(--uos-muted)!important}
html body .courses-icon.red-heart i,html body .red-heart i{color:#e11d48!important}
html body .review-icon i.filled,html body .review-icon-star i.filled,html body .my-course-1-last .icon-img .star .gold,html body .icon-color i{color:#d97706!important}
html body .my-course-1-last .icon-img .star i:not(.gold){color:var(--uos-subtle)}
html body a[href*="twitter.com/intent"] svg :is(path,rect){fill:currentColor}
html body a[href*="twitter.com/intent"]{color:var(--uos-ink)!important}
html body :is(.uos-btn-primary,.hm-btn-primary,.btn-primary,.uh-join) :is(i,svg){color:var(--uos-on-accent)!important}
.place-2 .cm-podium-block,.place-3 .cm-podium-block{color:var(--uos-muted)}

/* ===== Scroll reveal (js/uos-reveal.js): card groups arrive once; hidden only while below the fold ===== */
@keyframes uos-rv{from{opacity:0;transform:translate3d(0,var(--uos-rise),0)}}
html.uos-motion .rv-wait{opacity:0;transform:translate3d(0,var(--uos-rise),0)}
html.uos-motion .rv-in{animation:uos-rv var(--uos-dur-reveal) var(--uos-ease-out) backwards;animation-delay:calc(var(--rv-i,0) * var(--uos-stagger))}
@media (prefers-reduced-motion:reduce){html.uos-motion .rv-wait{opacity:1;transform:none}html.uos-motion .rv-in{animation:none}}
@media print{html.uos-motion .rv-wait{opacity:1!important;transform:none!important}}

/* ==========================================================================
   UI/UX audit fixes (2026-10-14)
   ========================================================================== */
/* Focus: one brand ring on every control (Bootstrap's faint blue halo and the template's outline:0 never win). */
html body :is(.btn,.list-btn,.nav-link,.page-link,.dropdown-toggle,[role=tab]):focus-visible{outline:2px solid var(--uos-accent-text)!important;outline-offset:2px!important;box-shadow:none!important}
html body .accordion-button:focus-visible{outline:2px solid var(--uos-accent-text)!important;outline-offset:-2px!important}

/* Form controls: a boundary of at least 3:1 (WCAG 1.4.11); --uos-line-2 stays for decorative borders. */
html body .form-check-input:not(:checked):not(.form-switch .form-check-input){border-color:var(--uos-input-border)!important}
html body .form-control:disabled,html body .uos-input:disabled{background:var(--uos-canvas-2)!important;color:var(--uos-muted)!important;cursor:not-allowed}

/* Course filters: plain divided groups inside the sidebar card, not cards inside a card (first letters were clipped). */
html body .course-all-category .accordion-item{border:0!important;border-bottom:1px solid var(--uos-line)!important;border-radius:0!important;background:transparent!important;overflow:visible;margin:0;padding:14px 0;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}
html body .course-all-category .accordion-item:last-child{border-bottom:0!important}

/* Results and related-course containers are layout, not cards. */
html body .grid-view-body>.courses-card,html body .course-details-card .courses-card{border:0!important;background:transparent!important;box-shadow:none!important;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}

/* Level label on course thumbnails: one plain pill (the dark legacy box behind it is gone). */
html body .courses-card-image-text.position-absolute,html body .courses-card-image-text{background:transparent!important;padding:0!important}
html body .courses-card-image-text .course-level{display:inline-block;margin:10px;padding:4px 10px;font-size:12px;font-weight:600;line-height:1.3}

/* Course toolbar: the active view is Primary Blue with a white icon in both themes. */
html body .list-btn{border:1px solid var(--uos-line-2)!important;background:var(--uos-surface-solid)}
html body .list-btn:hover,html body .list-btn.active{background:var(--uos-accent)!important;border-color:var(--uos-accent)!important;color:#fff}

/* Wishlist heart and compare: real buttons/links on top of the stretched card link. */
.courses-card-body.uos-card-wrap{position:relative}
.uos-card-wrap .uos-stretched{color:inherit;text-decoration:none}
.uos-card-wrap .uos-stretched::after{content:"";position:absolute;inset:0;z-index:1}
.uos-card-wrap .uos-stretched:focus-visible{outline:0}
.uos-card-wrap:has(.uos-stretched:focus-visible){outline:2px solid var(--uos-accent-text);outline-offset:2px}
html body .uos-card-wrap button.courses-icon{position:absolute;top:14px;right:7px;z-index:2;width:32px;height:32px;padding:0;border:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
html body .uos-card-wrap button.courses-icon i{position:static;padding:0;background:transparent!important;font-size:14px}
.uos-card-wrap .compare-img,.uos-card-wrap .uos-card-cta{position:relative;z-index:2}
@media (pointer:coarse){.uos-card-wrap button.courses-icon::after,.uos-card-wrap .compare-img::after{content:"";position:absolute;inset:-6px}}
.courses-card-body .courses-text h3.uos-card-title{font-size:16px;line-height:24px;font-weight:600;padding-right:7px;color:var(--uos-ink);letter-spacing:-.01em}
.grid-view-body .courses-text h3.uos-card-title{height:48px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.courses-list-view-body .courses-text h3.uos-card-title{height:auto}
.courses-card-body:hover .courses-text h3.uos-card-title{color:var(--uos-accent-text)}
.courses-price-left .uos-card-price{font-size:18px;font-weight:700;color:var(--uos-ink)!important;margin:0}
.uos-muted{color:var(--uos-muted)!important}

/* Legacy cards in the dark theme use the subtle line token, not a near-white outline. */
html[data-theme="dark"] :is(.common-card,.wish-list-body .wish-list-search,.my-course-1-full-body,.courses-card-body,.course-all-category){border-color:var(--uos-line)!important}

/* Older controls animated every property: list the ones that change, at the feedback timing. */
html body .courses-card-body{transition:border-color var(--uos-dur-2),box-shadow var(--uos-dur-2),background-color var(--uos-dur-2)}
html body .btn-profile-menu{transition:background-color var(--uos-dur-2),color var(--uos-dur-2)}

/* Toasts sit below the sticky header and never cover it. */
#toast-container.toast-top-right{top:88px}
#toast-container .toast-close-button{color:#fff;opacity:.9;text-shadow:none;font-size:20px;width:28px;height:28px;line-height:1;top:-2px;right:-6px}
#toast-container .toast-close-button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Account menu: the list scrolls, settings and Log out stay in a fixed footer. */
.uh-panel.uh-panel-account{width:300px;display:flex;flex-direction:column;max-height:calc(100dvh - 110px);overflow:hidden}
.uh-panel-account>.uh-menu:not(.uh-menu-foot){flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.uh-panel-account>.uh-menu-foot{flex:0 0 auto;border-top:1px solid var(--uos-line);padding-top:6px}
.uh-avatar:hover,.uh-pop.open>.uh-avatar{box-shadow:0 0 0 2px var(--uos-ink)}

/* Main landmark added around views that had none (views/frontend/default-new/index.php): spacing unchanged. */
[data-uos-page]>main.uos-main-auto{padding-bottom:0!important;min-height:0!important;outline:0}
[data-uos-page]>main.uos-main-auto>:is(.mk,.uos-page,section:last-of-type){padding-bottom:40px!important;margin-bottom:0!important;min-height:0!important}

/* Footer */
.ud-body{overscroll-behavior:contain}
@media (min-width:1200px){
  .uf-grid{grid-template-columns:1.3fr repeat(3,minmax(120px,1fr))}
  .uf-col-news{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 32px;align-items:center}
  .uf-news{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);column-gap:24px;align-items:center}
  .uf-news h2,.uf-news p{grid-column:1;margin-bottom:0}
  .uf-news h2{margin-bottom:4px}
  .uf-news form{grid-column:2;grid-row:1/span 2}
  .uf-col-news .uf-contact{margin-top:0!important}
}
@media (max-width:480px){.uf-news form{flex-direction:column}.uf-news input,.uf-news button{width:100%;flex:0 0 auto}}
@media (max-width:767px),(pointer:coarse){
  .uf-social a{width:44px;height:44px}
  .uf-bottom a{padding:0 9px}
  .uf-bottom>span.d-flex{gap:4px 8px!important;justify-content:center}
}

/* Profile header on phones: the name and helper text sit below the photo, never on the cover. */
@media (max-width:575px){.uprof-text{flex-basis:100%;padding-top:4px}}

/* 404 */
.error-body .uos-404-search{display:flex;gap:8px;flex-wrap:wrap;max-width:520px;margin:20px 0 16px}
.error-body .uos-404-search input{flex:1 1 220px;min-width:0}
.error-body .uos-404-links{display:flex;gap:10px;flex-wrap:wrap}
/* Blog index (blog_latest_and_popular.php): heading row with a text link, brand placeholder for posts without a thumbnail */
.uos-blog-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.uos-blog-sechead .uos-section-title{margin:0}
.uos-blog-sechead a{font-weight:600;text-decoration:underline;text-underline-offset:.2em;display:inline-flex;align-items:center;min-height:44px}
.blogCard .uos-blog-ph{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/9;background:var(--uos-canvas-2,#f5f6f8)}
.blogCard .courses-card-image img{width:100%;aspect-ratio:16/9;object-fit:cover}
.blogCard .courses-text .h5{display:block;font-size:18px;margin:0 0 8px}
.blogCard .courses-price-left .h5{font-size:15px;margin:0;font-weight:600;color:var(--uos-ink)}
/* Course filters: groups, plain-text options, show more, and the off-canvas panel below 992px (courses_page.php) */
.course-all-category fieldset{margin:0;padding:0;border:0;min-width:0}
.course-all-category .uos-more-toggle{background:none;border:0;padding:8px 0;min-height:44px;font-weight:600;font-size:14px;color:var(--uos-accent-text);cursor:pointer}
.course-all-category .uos-rating-opt{display:flex;align-items:center;gap:8px}
.course-all-category .uos-rating-opt .form-check-icon ul{margin:0}
.course-all-category .form-check-label{cursor:pointer}
.uos-filter-btn{display:inline-flex;align-items:center;gap:8px;margin:16px 0 0}
.uos-filter-canvas .offcanvas-header{gap:12px;border-bottom:1px solid var(--uos-line)}
.uos-filter-canvas .offcanvas-header .uos-filter-clear{margin-left:auto;font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.uos-filter-canvas .offcanvas-header .btn-close{margin:0}
@media (max-width:991.98px){.uos-filter-canvas{background:var(--uos-pop)!important;color:var(--uos-text);width:min(360px,92vw)!important}.uos-filter-canvas .offcanvas-body{overflow-y:auto;overscroll-behavior:contain}}
@media (min-width:992px){.uos-filter-canvas .offcanvas-body{display:block}}
@media (max-width:991.98px){.uos-filter-canvas .course-all-category{margin-top:0!important}}
html body .ammount .echecks,html body .review-btn .echecks{border-color:var(--uos-line-2)}
/* Course page sidebar: one filled primary action, the rest outline; buttons look like the old links */
.course-right-section .button button{text-decoration:none;background-color:var(--bg-white-2);border:1.5px solid var(--color-4);color:var(--color-4);text-align:center;border-radius:10px;margin-top:14px;padding:10px 14px 12px;font-size:15px;font-weight:600;transition:background-color .15s,color .15s;cursor:pointer}
.course-right-section .button button:hover{background-color:var(--color-4);color:#fff}
.course-right-section .button button.d-hidden{display:none}
html body .course-right-section .button .uos-cta-primary{background:var(--uos-accent);border-color:var(--uos-accent);color:#fff}
html body .course-right-section .button .uos-cta-primary:hover{background:var(--uos-accent-hover);border-color:var(--uos-accent-hover);color:#fff}
.course-details-sidebar button.card-video-icon{border:0;padding:0}
html body .course-details-sidebar button.uos-heart-btn{position:absolute;top:14px;right:7px;z-index:2;width:32px;height:32px;padding:0;border:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
html body .course-details-sidebar button.uos-heart-btn i{position:static;padding:0;background:transparent!important;font-size:14px;margin:0!important}
.uos-forum-tablink{margin:10px 0 0}
.uos-forum-tablink a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600}
.uos-related-more a{font-weight:600}
/* Empty states for account lists (cart, wishlist, my courses, purchase history) */
.uos-empty-block{display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 16px;margin:8px 0 16px;border:1px solid var(--uos-line);border-radius:var(--uos-radius);background:var(--uos-surface-solid);text-align:center}
.uos-empty-block[hidden]{display:none}
.uos-table-empty{padding:28px 12px!important;text-align:center}
.uos-table-empty strong{display:block;color:var(--uos-ink);margin-bottom:4px}
.uos-table-empty span{color:var(--uos-muted)}
.uos-icon-plain{border:0;background:none;color:inherit;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;cursor:pointer}
.uos-icon-plain:hover{color:var(--uos-danger)}
/* Account pages on phones: the profile menu is a compact one-line scroller, so the list is the first thing you see */
@media (max-width:767px){
  .wish-list-search{margin-bottom:16px!important;padding:8px!important}
  .wish-list-search .student-profile-info{display:none}
  .wish-list-search .wish-list-course{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 2px 6px}
  .wish-list-search .btn-profile-menu{flex:0 0 auto;width:auto!important;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;margin:0;padding:8px 14px}
}
.uos-reviews-empty{color:var(--uos-muted);margin:16px 0}
#course_page_add_review_form .form-label{display:block;margin:4px 0 6px;font-weight:600}
/* Header bell panel: Mark all read is a button that looks like a link; the Open link is at least 24px tall */
.uh-link-btn{border:0;background:none;padding:4px 2px;font-size:.85rem;font-weight:600;color:var(--uos-accent-text);cursor:pointer;min-height:24px}
.uh-link-btn:hover{color:var(--uos-ink);text-decoration:underline}
.uh-notif-text a.uos-notify-link{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 0}
/* Shared confirm dialog (window.uosConfirm in uos-shell.js) */
.uos-cd-backdrop{position:fixed;inset:0;background:rgba(5,6,7,.55);z-index:2100;display:flex;align-items:center;justify-content:center;padding:16px}
.uos-cd{background:var(--uos-pop);color:var(--uos-text);border:1px solid var(--uos-line-2);border-radius:20px;box-shadow:var(--uos-shadow-xl);width:min(440px,100%);padding:22px 22px 18px}
.uos-cd h2{font-size:18px;margin:0 0 8px;color:var(--uos-ink)}
.uos-cd p{margin:0 0 18px;color:var(--uos-muted);font-size:14px;line-height:1.55}
.uos-cd-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.uos-cd-btn{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--uos-line-2);background:var(--uos-surface-solid);color:var(--uos-ink);font-weight:600;cursor:pointer}
.uos-cd-btn.is-danger{background:#b91c1c;border-color:#b91c1c;color:#fff}
.uos-cd-btn.is-primary{background:var(--uos-accent);border-color:var(--uos-accent);color:#fff}
.uos-cd-btn:focus-visible{outline:2px solid var(--uos-accent-text);outline-offset:2px}

/* course page curriculum rows: title (link or button), optional Preview chip, duration on the same line */
.ac-lecture li.uos-lesson-row{display:flex;align-items:center;gap:10px;padding:0 0 4px;margin:0}
.ac-lecture .uos-lesson-link{flex:1 1 auto;min-width:0;display:flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--uos-ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.ac-lecture .uos-lesson-link:hover{color:var(--uos-accent-text)}
.ac-lecture .uos-lesson-link:focus-visible{outline:2px solid var(--uos-accent-text);outline-offset:2px;border-radius:4px}
.ac-lecture .uos-lesson-link span{font-size:15px}
.ac-lecture .uos-lesson-link i{color:var(--uos-accent-text);margin-right:12px;font-size:18px}
.ac-lecture .uos-lesson-preview{flex:0 0 auto;border:1px solid var(--uos-line-2);cursor:pointer}
.ac-lecture .uos-lesson-row .lecture-info{flex:0 0 auto;margin-left:auto;font-size:13px;color:var(--uos-muted);white-space:nowrap}