/* ══════════════════════════════════════════════════════════════
   AI-WB-001 LESSON PLAYER — DESIGN SYSTEM COMPLIANT
   All colors, fonts, radii, shadows, spacing from design-system.css
   Zero hardcoded hex — 100% CSS variables
   ══════════════════════════════════════════════════════════════ */

.wb-lms-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 60px;
    font-family: var(--font-body);
    color: var(--color-text);
}

/* ── Hero Command Center ── */
.wb-hero {
    position: relative;
    background: var(--brand-gradient);
    color: #fff;
    padding: 48px 44px 44px;
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}
.wb-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 25% 20%, rgba(255,255,255,.08) 0%, transparent 55%),
                radial-gradient(ellipse at 75% 80%, rgba(13,148,136,.12) 0%, transparent 50%);
    pointer-events: none;
}
.wb-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .12em; color: var(--color-gold);
    margin-bottom: var(--space-md); position: relative; z-index: 1;
}
.wb-hero__eyebrow .pulse-dot {
    width: 8px; height: 8px; background: var(--color-gold); border-radius: 50%;
    animation: wb-pulse-glow 2s ease-in-out infinite;
}
@keyframes wb-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,.5); }
    50% { box-shadow: 0 0 0 6px rgba(251,191,36,0); }
}
.wb-hero__h1 {
    font-family: var(--font-heading);
    font-size: 2.25rem; font-weight: 800; line-height: 1.2;
    margin: 0 0 var(--space-md); position: relative; z-index: 1;
    color: #fff;
}
.wb-hero__sub {
    font-size: 1.05rem; color: rgba(255,255,255,.8); line-height: 1.65;
    margin: 0 0 var(--space-xl); max-width: 640px;
    position: relative; z-index: 1;
}
.wb-hero__metrics {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md);
    margin-bottom: var(--space-xl); position: relative; z-index: 1;
}
.wb-hero__metric {
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-lg); padding: 18px 20px; text-align: center;
    backdrop-filter: blur(10px);
    transition: transform .2s ease, background .2s ease;
}
.wb-hero__metric:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.wb-hero__metric-val {
    font-family: var(--font-heading);
    font-size: 1.5rem; font-weight: 800; color: #fff;
    line-height: 1; margin-bottom: 6px;
}
.wb-hero__metric-label {
    font-size: .75rem; color: rgba(255,255,255,.6); font-weight: 600;
}
.wb-hero__cta-row {
    display: flex; flex-wrap: wrap; gap: var(--space-sm);
    align-items: center; position: relative; z-index: 1;
}
.wb-cta-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--color-cta); color: #fff;
    border: none; padding: 14px 32px;
    border-radius: var(--radius-md); font-size: 1rem; font-weight: 700;
    cursor: pointer; transition: all .2s var(--transition-base);
    box-shadow: 0 4px 16px rgba(234,88,12,.35);
}
.wb-cta-primary:hover {
    background: var(--color-cta-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(234,88,12,.4);
}
.wb-cta-secondary {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.1); color: #fff;
    border: 1px solid rgba(255,255,255,.18); padding: 12px 24px;
    border-radius: var(--radius-md); font-size: .92rem; font-weight: 600;
    cursor: pointer; transition: all .2s; text-decoration: none;
}
.wb-cta-secondary:hover { background: rgba(255,255,255,.16); color: #fff; }
.wb-hero__trust {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    margin-top: var(--space-xl); padding-top: var(--space-lg);
    border-top: 1px solid rgba(255,255,255,.1);
    position: relative; z-index: 1;
}
.wb-hero__trust-item {
    font-size: .73rem; color: rgba(255,255,255,.45); font-weight: 600;
    display: flex; align-items: center; gap: 4px;
}
.wb-hero__trust-item span { color: rgba(255,255,255,.6); }

/* ── Sticky Progress Bar ── */
.wb-sticky-bar {
    position: sticky; top: 0; z-index: 100;
    box-sizing: border-box; max-width: 100%;
    background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border); padding: 10px 0;
    margin: 0 -24px 20px; padding-left: 24px; padding-right: 24px;
    box-shadow: var(--shadow-sm);
}
.wb-sticky-bar__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-md); max-width: 1200px; margin: 0 auto;
}
.wb-progress-track {
    flex: 1; height: 6px; background: var(--color-border-light);
    border-radius: var(--radius-full); overflow: hidden;
}
.wb-progress-bar {
    height: 100%; width: 0%;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    transition: width .5s cubic-bezier(.4,0,.2,1);
}
.wb-progress-text {
    font-size: .8rem; font-weight: 700; color: var(--color-primary);
    white-space: nowrap;
}
.wb-timer-badge {
    font-size: .76rem; font-weight: 700; color: var(--color-text-muted);
    background: var(--color-border-light); padding: 4px 12px;
    border-radius: var(--radius-sm); white-space: nowrap;
    display: flex; align-items: center; gap: 4px;
}
.wb-timer-badge.active { background: var(--color-primary-bg); color: var(--color-primary); }

/* ── Main Layout: Sidebar (left) + Content (right) ── */
.wb-layout {
    display: grid; grid-template-columns: 260px minmax(0,1fr) 280px; gap: var(--space-xl);
    align-items: start;
}
.wb-context-panel { align-self: start; position: sticky; top: 76px; min-width: 0; }
.wb-context-panel details { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.wb-context-panel summary { cursor: pointer; list-style: none; padding: 16px 18px; font-weight: 800; color: var(--color-primary); display: flex; gap: 8px; align-items: center; }
.wb-context-panel summary::-webkit-details-marker { display: none; }
.wb-context-panel__body { padding: 0 18px 18px; }
.wb-context-panel__eyebrow { font-size: .67rem; letter-spacing: .12em; font-weight: 800; color: var(--color-text-muted); margin: 8px 0; }
.wb-context-panel__body h2 { font-size: 1rem; line-height: 1.35; margin: 0 0 8px; }
.wb-context-panel__body p { font-size: .82rem; line-height: 1.55; color: var(--color-text-muted); margin: 0; }
.wb-context-panel__body ul { padding-left: 18px; margin: 8px 0 0; color: var(--color-text); font-size: .8rem; line-height: 1.5; }
.wb-context-panel__rule { height: 1px; background: var(--color-border-light); margin: 16px 0; }
.wb-context-panel__stats { display: grid; gap: 7px; font-size: .78rem; color: var(--color-text-muted); }
.wb-context-panel__stats strong { color: var(--color-primary); font-size: .95rem; margin-right: 4px; }
.wb-context-panel__note { margin-top: 16px !important; font-size: .73rem !important; }
.wb-content { min-width: 0; width: 100%; }
.wb-stage-panel, .wb-art-pane, .wb-card, .wb-md { min-width: 0; max-width: 100%; }
.wb-md img, .wb-md video, .wb-md iframe { max-width: 100%; height: auto; }
.wb-art-tabs { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.wb-art-tab { flex: 0 0 auto; white-space: nowrap; }
.wb-table-wrap, .wb-md .wb-table-wrap { max-width: 100%; overflow-x: auto; }

/* ── Sidebar Timeline ── */
.wb-sidebar {
    position: sticky; top: 64px;
    background: var(--color-bg-white); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-md);
    box-shadow: var(--shadow-md);
}
.wb-sidebar__title {
    font-family: var(--font-heading);
    font-size: .7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .12em; color: var(--color-text-muted); margin-bottom: var(--space-md);
}
.wb-tl-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px; border-radius: var(--radius-md); cursor: pointer;
    transition: all .15s var(--transition-fast); margin-bottom: 2px;
    position: relative; border: 1.5px solid transparent;
}
.wb-tl-item:hover { background: var(--color-border-light); }
.wb-tl-item.active {
    background: var(--color-primary-bg);
    border-color: var(--color-primary-light);
}
.wb-tl-item.completed .wb-tl-icon { background: var(--color-accent); color: #fff; }
.wb-tl-item.locked { opacity: .5; cursor: not-allowed; position: relative; }
.wb-tl-item.locked:hover { background: transparent; }
.wb-tl-item.locked::after {
    content: 'Hoàn thành chặng trước để mở khóa';
    position: absolute;
    left: 100%; top: 50%;
    transform: translateY(-50%);
    margin-left: 12px;
    padding: 6px 12px;
    background: var(--color-bg-dark);
    color: #fff;
    font-size: .65rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
    pointer-events: none;
    z-index: 10;
}
.wb-tl-item.locked:hover::after,
.wb-tl-item.locked:focus::after {
    opacity: 1;
    visibility: visible;
}
.wb-tl-item.locked:active {
    animation: wb-shake .3s ease;
}
@keyframes wb-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}
.wb-tl-icon {
    width: 28px; height: 28px; min-width: 28px;
    border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 800; transition: all .2s;
}
.wb-tl-icon.available { background: var(--color-primary); color: #fff; }
.wb-tl-icon.in-progress { background: var(--color-warning); color: var(--color-text); animation: wb-pulse-warn 2s infinite; }
.wb-tl-icon.submitted { background: var(--color-info); color: #fff; }
.wb-tl-icon.error { background: var(--color-danger); color: #fff; }
.wb-tl-icon.locked { background: var(--color-border-light); color: var(--color-text-muted); }
@keyframes wb-pulse-warn {
    0%, 100% { box-shadow: 0 0 0 0 rgba(234,179,8,.4); }
    50% { box-shadow: 0 0 0 4px rgba(234,179,8,0); }
}
.wb-tl-info { flex: 1; min-width: 0; }
.wb-tl-code { font-size: .66rem; font-weight: 700; color: var(--color-primary); }
.wb-tl-title { font-size: .76rem; font-weight: 600; color: var(--color-text-secondary); line-height: 1.3; }
.wb-tl-min { font-size: .63rem; color: var(--color-text-muted); }
.wb-tl-connector {
    position: absolute; left: 23px; top: 38px; width: 2px; height: 12px;
    background: var(--color-border);
}
.wb-tl-item.completed .wb-tl-connector { background: var(--color-accent); }

/* ── Stage Panel ── */
.wb-stage-panel { display: none; animation: wb-fadeIn .3s ease; }
.wb-stage-panel.active { display: block; }
@keyframes wb-fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.wb-stage-header {
    background: var(--brand-gradient);
    color: #fff; border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-xl);
    margin-bottom: var(--space-xl); position: relative; overflow: hidden;
}
.wb-stage-header::after {
    content: ''; position: absolute; top: -30px; right: -30px;
    width: 120px; height: 120px; border-radius: 50%;
    background: rgba(255,255,255,.06);
}
.wb-stage-header__tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .1em; background: rgba(255,255,255,.15);
    color: #fff; padding: 4px 12px; border-radius: var(--radius-full);
    margin-bottom: var(--space-sm);
}
.wb-stage-header__title {
    font-family: var(--font-heading);
    font-size: 1.4rem; font-weight: 800; margin: 0 0 var(--space-sm); color: #fff; line-height: 1.3;
}
.wb-stage-header__desc {
    font-size: .9rem; color: rgba(255,255,255,.7); margin: 0 0 var(--space-md); line-height: 1.6;
}
.wb-stage-header__meta {
    display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: .8rem;
}
.wb-stage-header__meta-item {
    display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.8);
}
.wb-stage-header__meta-item strong { color: var(--color-gold); }

/* ── Artifact Tabs ── */
.wb-art-tabs {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-sm);
}
.wb-art-tab {
    background: var(--color-border-light); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); padding: 8px 16px; font-size: .8rem;
    font-weight: 600; color: var(--color-text-secondary); cursor: pointer;
    transition: all .15s var(--transition-fast);
}
.wb-art-tab:hover { background: var(--color-border); }
.wb-art-tab.active {
    background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}
.wb-art-pane { display: none; animation: wb-fadeIn .2s ease; }
.wb-art-pane.active { display: block; }

/* ── Content Cards ── */
.wb-card {
    background: var(--color-bg-white); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: var(--space-xl);
    margin-bottom: var(--space-lg); box-shadow: var(--shadow-sm);
}
.wb-card__title {
    font-family: var(--font-heading);
    font-size: 1.05rem; font-weight: 700; color: var(--color-text);
    margin: 0 0 var(--space-md); display: flex; align-items: center;
    gap: 8px; flex-wrap: wrap;
}
.wb-card__badge {
    font-size: .65rem; font-weight: 700;
    background: var(--color-primary-bg); color: var(--color-primary);
    padding: 3px 10px; border-radius: var(--radius-sm);
}

/* ── Markdown Typography ── */
.wb-md h1, .wb-md h2, .wb-md h3, .wb-md h4, .wb-md h5, .wb-md h6 {
    font-family: var(--font-heading); font-weight: 700;
    color: var(--color-text); margin: 20px 0 8px;
}
.wb-md h1.wb-heading-1 { font-size: 1.35rem; color: var(--color-primary); border-bottom: 2px solid var(--color-border); padding-bottom: 8px; }
.wb-md h2.wb-heading-2 { font-size: 1.15rem; color: var(--color-primary); }
.wb-md h3.wb-heading-3 { font-size: 1rem; color: var(--color-primary-dark); }
.wb-md h4.wb-heading-4 { font-size: .9rem; color: var(--color-text-secondary); }
.wb-md p.wb-paragraph { margin: 0 0 var(--space-md); font-size: .9rem; line-height: 1.75; color: var(--color-text-secondary); }
.wb-md ul.wb-list, .wb-md ol.wb-list-ordered { padding-left: 22px; margin: 0 0 var(--space-md); }
.wb-md li { margin-bottom: 5px; font-size: .9rem; line-height: 1.65; color: var(--color-text-secondary); }
.wb-md blockquote.wb-quote {
    border-left: 4px solid var(--color-accent); margin: var(--space-md) 0;
    padding: var(--space-md) var(--space-lg);
    background: #f0fdfa; color: #115e59; font-style: italic;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: .9rem; line-height: 1.65;
}
.wb-md code.wb-code-inline {
    background: var(--color-border-light); color: var(--color-text);
    padding: 2px 8px; border-radius: var(--radius-sm);
    font-size: .85em; font-family: 'Fira Code', monospace;
}
.wb-md pre.wb-code-block {
    background: var(--color-bg-dark); color: var(--color-text-light);
    padding: var(--space-lg); border-radius: var(--radius-md);
    overflow-x: auto; margin: var(--space-md) 0; font-size: .85rem; line-height: 1.6;
}
.wb-md pre.wb-code-block code { background: transparent; color: inherit; padding: 0; }
.wb-md .wb-table-wrap { overflow-x: auto; margin: var(--space-md) 0; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.wb-md table.wb-table-custom { width: 100%; border-collapse: collapse; font-size: .84rem; }
.wb-md table.wb-table-custom th {
    background: var(--color-primary); color: #fff; padding: 12px 16px;
    text-align: left; font-weight: 700; white-space: nowrap;
}
.wb-md table.wb-table-custom td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); vertical-align: top; }
.wb-md table.wb-table-custom tr:nth-child(even) { background: var(--color-bg-light); }
.wb-md table.wb-table-custom tr:hover { background: var(--color-primary-bg); }
.wb-md strong { font-weight: 700; color: var(--color-text); }
.wb-stage-panel.active .wb-art-pane.active .wb-md { max-height: 620px; overflow-y: auto; padding-right: 14px; }
@media (max-width: 600px) { .wb-stage-panel.active .wb-art-pane.active .wb-md { max-height: 520px; } }
.wb-md a { color: var(--color-primary); text-decoration: underline; }
.wb-md a:hover { color: var(--color-primary-dark); }

/* ── Media Players ── */
.wb-video-box {
    position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg);
    overflow: hidden; background: var(--color-bg-dark); margin: var(--space-md) 0;
    box-shadow: var(--shadow-lg);
}
.wb-video-box iframe { width: 100%; height: 100%; border: 0; }
.wb-audio-box {
    background: var(--color-bg-light); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: var(--space-lg);
    margin: var(--space-md) 0; display: flex; flex-direction: column; gap: 10px;
}
.wb-audio-box audio { width: 100%; border-radius: var(--radius-sm); }
.wb-audio-info { font-size: .8rem; color: var(--color-text-muted); display: flex; justify-content: space-between; }

/* ── Data Table ── */
.wb-table-custom { width: 100%; border-collapse: collapse; font-size: .84rem; }
.wb-table-custom th {
    background: var(--color-primary); color: #fff; padding: 12px 14px;
    text-align: left; font-weight: 700; position: sticky; top: 0;
}
.wb-table-custom td {
    border-bottom: 1px solid var(--color-border); padding: 10px 14px;
    color: var(--color-text-secondary); vertical-align: top;
}
.wb-table-custom tr:hover { background: var(--color-bg-light); }

/* ── Mind-Map Tree ── */
.wb-tree { padding: var(--space-sm) 0; }
.wb-tree-node { margin: 6px 0; }
.wb-tree-label {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: var(--radius-sm); font-size: .86rem;
    font-weight: 600; cursor: pointer; transition: all .15s;
}
.wb-tree-label:hover { transform: translateX(4px); }
.wb-tree-label.root { background: var(--color-bg-dark); color: #fff; font-weight: 700; font-size: .95rem; }
.wb-tree-label.branch { background: var(--color-primary-bg); color: var(--color-primary-dark); border: 1px solid var(--color-primary-light); }
.wb-tree-label.leaf { background: var(--color-border-light); color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.wb-tree-children {
    padding-left: 24px; border-left: 2px dashed var(--color-border);
    margin-left: 12px; margin-top: 4px;
}

/* ── Flashcards ── */
.wb-fc-container { max-width: 540px; margin: var(--space-xl) auto; }
.wb-fc-card { height: 280px; perspective: 1200px; cursor: pointer; }
.wb-fc-inner {
    position: relative; width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.wb-fc-inner.flipped { transform: rotateY(180deg); }
.wb-fc-side {
    position: absolute; inset: 0; backface-visibility: hidden;
    border-radius: var(--radius-xl); padding: var(--space-xl) var(--space-xl);
    display: flex; flex-direction: column; justify-content: space-between;
}
.wb-fc-front {
    background: var(--brand-gradient); color: #fff;
    border: 2px solid rgba(255,255,255,.15);
}
.wb-fc-back {
    background: var(--color-bg-white); color: var(--color-text);
    border: 2px solid var(--color-primary-light);
    transform: rotateY(180deg); box-shadow: var(--shadow-lg);
}
.wb-fc-meta { display: flex; justify-content: space-between; align-items: center; font-size: .75rem; color: rgba(255,255,255,.6); }
.wb-fc-text { font-size: 1.1rem; font-weight: 700; line-height: 1.5; margin: auto 0; text-align: center; }
.wb-fc-back .wb-fc-text { font-size: .95rem; font-weight: 500; color: var(--color-text-secondary); line-height: 1.65; text-align: left; }
.wb-fc-hint { font-size: .72rem; color: rgba(255,255,255,.5); text-align: center; }
.wb-fc-back .wb-fc-hint { color: var(--color-text-muted); }
.wb-fc-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-md); margin-top: var(--space-md); }
.wb-fc-btn {
    background: var(--color-border-light); border: 1px solid var(--color-border);
    padding: 8px 18px; border-radius: var(--radius-sm); font-size: .85rem;
    font-weight: 600; color: var(--color-text-secondary); cursor: pointer;
    transition: all .15s;
}
.wb-fc-btn:hover { background: var(--color-border); }
.wb-fc-counter { font-size: .85rem; font-weight: 700; color: var(--color-text-muted); }

/* ── Quiz ── */
.wb-quiz-wrap { max-width: 760px; margin: 0 auto; }
.wb-q-card {
    background: var(--color-bg-white); border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-xl);
    margin-bottom: var(--space-lg); transition: all .25s;
}
.wb-q-card.answered { border-color: var(--color-border); }
.wb-q-card:hover:not(.answered) { border-color: var(--color-primary-light); box-shadow: var(--shadow-sm); }
.wb-q-num { font-size: .7rem; font-weight: 800; color: var(--color-primary); text-transform: uppercase; margin-bottom: 4px; }
.wb-q-title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--color-text); margin: 0 0 var(--space-md); line-height: 1.5; }
.wb-opt-list { display: flex; flex-direction: column; gap: 8px; }
.wb-opt-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md); cursor: pointer;
    transition: all .15s; font-size: .9rem; color: var(--color-text-secondary);
}
.wb-opt-item:hover { border-color: var(--color-primary-light); background: var(--color-primary-bg); }
.wb-opt-item.selected { border-color: var(--color-primary); background: var(--color-primary-bg); font-weight: 600; color: var(--color-text); }
.wb-opt-item.correct { border-color: var(--color-success); background: #f0fdf4; color: #166534; }
.wb-opt-item.incorrect { border-color: var(--color-danger); background: #fef2f2; color: #991b1b; }
.wb-q-feedback { margin-top: 12px; padding: 12px 16px; border-radius: var(--radius-sm); font-size: .84rem; line-height: 1.6; display: none; }
.wb-q-feedback.show { display: block; animation: wb-fadeIn .2s ease; }
.wb-q-feedback.correct { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.wb-q-feedback.incorrect { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.wb-quiz-score-box {
    background: var(--brand-gradient); color: #fff;
    border-radius: var(--radius-xl); padding: var(--space-xl) var(--space-2xl);
    text-align: center; margin-top: var(--space-xl); display: none;
    position: relative; overflow: hidden;
}
.wb-quiz-score-box::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.08) 0%, transparent 60%);
}
.wb-quiz-score-val {
    font-family: var(--font-heading);
    font-size: 3.5rem; font-weight: 900; color: var(--color-gold);
    line-height: 1; margin: 8px 0; position: relative;
}

/* ── Credential Panel ── */
.wb-cert-box {
    background: var(--brand-gradient); color: #fff;
    border-radius: var(--radius-xl); padding: var(--space-2xl) var(--space-xl);
    text-align: center; margin: var(--space-lg) 0;
    border: 2px solid rgba(255,255,255,.15);
    position: relative; overflow: hidden;
    box-shadow: var(--shadow-xl);
}
.wb-cert-box::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(251,191,36,.1) 0%, transparent 60%);
}
.wb-cert-badge {
    font-size: 3.5rem; margin-bottom: var(--space-md);
    position: relative; animation: wb-float 3s ease-in-out infinite;
}
@keyframes wb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.wb-cert-title {
    font-family: var(--font-heading);
    font-size: 1.5rem; font-weight: 800; color: var(--color-gold);
    margin: 0 0 var(--space-sm); position: relative;
}
.wb-cert-sub { font-size: .9rem; color: rgba(255,255,255,.7); margin: 0 0 var(--space-xl); position: relative; }
.wb-cert-code {
    font-size: 1.05rem; font-family: 'Fira Code', monospace; font-weight: 700;
    background: rgba(0,0,0,.25); padding: 10px 24px;
    border-radius: var(--radius-md); display: inline-block;
    color: var(--color-gold); margin-bottom: var(--space-xl);
    border: 1px solid rgba(255,255,255,.1); position: relative;
    letter-spacing: .04em;
}

/* ── Stage Footer ── */
.wb-stage-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-md); margin-top: var(--space-2xl); padding: var(--space-lg);
    background: var(--color-bg-light); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.wb-btn-next {
    background: var(--color-primary); color: #fff; border: none;
    padding: 12px 28px; border-radius: var(--radius-md); font-size: .92rem;
    font-weight: 700; cursor: pointer; transition: all .2s var(--transition-base);
}
.wb-btn-next:hover { background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.wb-btn-next:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.wb-btn-next:focus-visible { outline: 3px solid var(--color-primary-light); outline-offset: 3px; }
.wb-btn-prev {
    background: transparent; color: var(--color-text-muted);
    border: 1px solid var(--color-border); padding: 12px 20px;
    border-radius: var(--radius-md); font-size: .92rem; font-weight: 600;
    cursor: pointer; transition: all .15s;
}
.wb-btn-prev:hover { background: var(--color-border-light); color: var(--color-text); }
.wb-btn-prev:active { background: var(--color-border); }
.wb-btn-prev:focus-visible { outline: 3px solid var(--color-primary-light); outline-offset: 3px; }
.wb-check-stage {
    display: flex; align-items: center; gap: 8px;
    font-size: .88rem; font-weight: 600; color: var(--color-text-secondary); cursor: pointer;
}
.wb-check-stage input { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; }

/* ── Activity Section ── */
.wb-activity-box {
    background: var(--color-primary-bg); border: 1.5px solid var(--color-primary-light);
    border-radius: var(--radius-lg); padding: var(--space-xl); margin: var(--space-lg) 0;
}
.wb-activity-box__header { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-md); }
.wb-activity-box__icon {
    width: 36px; height: 36px; background: var(--color-primary); color: #fff;
    border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.wb-activity-box__title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--color-text); }
.wb-activity-box__desc { font-size: .86rem; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: var(--space-md); }
.wb-prompt-copy {
    display: flex; align-items: center; gap: 8px;
    background: var(--color-bg-dark); color: var(--color-accent);
    padding: 12px 16px; border-radius: var(--radius-sm);
    font-size: .85rem; font-family: 'Fira Code', monospace;
    cursor: pointer; transition: all .2s; margin-bottom: var(--space-sm);
}
.wb-prompt-copy:hover { background: var(--color-bg-darker); }
.wb-prompt-copy .copy-icon { font-size: .75rem; }
.wb-prompt-copy.copied { background: var(--color-accent); color: #fff; }

/* ── Confetti Canvas ── */
#wb-confetti-canvas { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }

/* ── Focus Visible & Active States for Interactive Elements ── */
.wb-art-tab:focus-visible,
.wb-tl-item:focus-visible,
.wb-prompt-copy:focus-visible,
.wb-opt-item:focus-visible,
.wb-fc-btn:focus-visible,
.wb-btn-prev:focus-visible,
.wb-btn-next:focus-visible,
.wb-check-stage:focus-visible,
.wb-art-pane [role="button"]:focus-visible,
.ai-wb-linkedin-outline__row:focus-visible {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 2px;
}

.wb-art-tab:active { transform: scale(0.98); }
.wb-tl-item:active { transform: scale(0.98); }
.wb-prompt-copy:active { transform: scale(0.99); }
.wb-opt-item:active { transform: scale(0.99); }
.wb-fc-btn:active { transform: scale(0.97); }

/* ── Responsive ── */
@media (max-width: 960px) {
    .wb-layout { grid-template-columns: 1fr; }
    .wb-sidebar { order: 0; }
    .wb-hero__h1 { font-size: 1.5rem; }
    .wb-hero__metrics { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
@media (max-width: 600px) {
    .wb-sticky-bar { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
    .wb-sticky-bar__inner { gap: 6px; min-width: 0; }
    .wb-timer-badge { padding-left: 8px; padding-right: 8px; }
    .wb-progress-track { min-width: 24px; }
    .wb-progress-text { max-width: 42%; overflow: hidden; text-overflow: ellipsis; }
    .wb-stage-panel { overflow: hidden; }
    .wb-lms-wrap { padding-left: 16px; padding-right: 16px; }
    .wb-hero { padding: 28px 20px 24px; }
    .wb-hero__h1 { font-size: 1.25rem; }
    .wb-hero__metrics { grid-template-columns: 1fr; }
    .wb-hero__cta-row { flex-direction: column; }
    .wb-stage-header { padding: var(--space-lg); }
    .wb-stage-header__title { font-size: 1.15rem; }
    .wb-stage-footer { flex-direction: column; align-items: stretch; }
    .wb-art-tabs { flex-wrap: nowrap; padding-bottom: 10px; }
    .wb-card { padding: var(--space-lg); }
    .wb-cert-box { padding: var(--space-xl) var(--space-lg); }
    .wb-cert-title { font-size: 1.2rem; }
}

/* ── Enhanced Quiz Option States ── */
.wb-opt-item.selected:not(.correct):not(.incorrect) {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.wb-opt-item.correct:active { background: #dcfce7; }
.wb-opt-item.incorrect:active { background: #fee2e2; }

/* ── Sidebar Mobile Expand Indicator ── */
@media (max-width: 760px) {
    .wb-sidebar__title::after {
        content: '⌄';
        margin-left: auto;
        font-size: .7rem;
        transition: transform .2s;
    }
    .wb-sidebar:hover .wb-sidebar__title::after,
    .wb-sidebar:focus-within .wb-sidebar__title::after {
        transform: rotate(180deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .uai-core-trial *, .uai-core-trial *::before, .uai-core-trial *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* ── Learner workspace width controls ── */
@media (min-width: 961px) {
    .uai-core-trial .wb-sidebar__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
    .uai-core-trial .wb-sidebar__toolbar .wb-sidebar__title { flex: 1 1 auto; margin: 0; }
    .uai-core-trial .wb-sidebar__collapse { flex: 0 0 auto; min-height: 32px; padding: 5px 9px; border: 1px solid #cbded4; border-radius: 8px; background: #fff; color: #0f766e; font-size: 11px; font-weight: 800; cursor: pointer; }
    .uai-core-trial .wb-sidebar__collapse:hover, .uai-core-trial .wb-sidebar__collapse:focus-visible { background: #edf8f3; border-color: #0f766e; outline: 2px solid rgba(15,118,110,.18); outline-offset: 2px; }
    .uai-core-trial .wb-layout { position: relative; --wb-sidebar-width: 260px; --wb-context-width: 280px; grid-template-columns: var(--wb-sidebar-width) minmax(0, 1fr) var(--wb-context-width); transition: grid-template-columns .22s ease; }
    .uai-core-trial .wb-layout.is-context-hidden { grid-template-columns: var(--wb-sidebar-width) minmax(0, 1fr); }
    .uai-core-trial .wb-layout.is-sidebar-collapsed { --wb-sidebar-width: 56px; }
    .uai-core-trial .wb-sidebar { min-width: 0; position: relative; }
    .uai-core-trial .wb-sidebar__resize { position: absolute; z-index: 3; top: 0; right: -10px; width: 20px; height: 100%; padding: 0; border: 0; background: transparent; cursor: col-resize; touch-action: none; }
    .uai-core-trial .wb-sidebar__resize span { display: block; width: 3px; height: 64px; margin: 10px auto 0; border-radius: 3px; background: #cbded4; transition: background .2s, height .2s; }
    .uai-core-trial .wb-sidebar__resize:hover span, .uai-core-trial .wb-sidebar__resize:focus-visible span { height: 92px; background: #168277; }
    .uai-core-trial .wb-sidebar.is-collapsed { overflow: hidden; }
    .uai-core-trial .wb-sidebar.is-collapsed nav, .uai-core-trial .wb-sidebar.is-collapsed .wb-sidebar__footer { visibility: hidden; pointer-events: none; }
    .uai-core-trial .wb-sidebar.is-collapsed .wb-sidebar__title { width: 56px; padding-inline: 0; overflow: hidden; white-space: nowrap; color: transparent; }
    .uai-core-trial .wb-sidebar.is-collapsed .wb-sidebar__title::first-letter { color: #168277; }
    .uai-core-trial .wb-sidebar.is-collapsed .wb-sidebar__toolbar { justify-content: center; }
    .uai-core-trial .wb-sidebar.is-collapsed .wb-sidebar__collapse { width: 36px; padding-inline: 0; font-size: 0; }
    .uai-core-trial .wb-sidebar.is-collapsed .wb-sidebar__collapse::before { content: '↔'; font-size: 18px; line-height: 1; }
    .uai-core-trial .wb-context-panel__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: #334155; }
    .uai-core-trial .wb-context-panel__toggle { min-height: 32px; padding: 5px 10px; border: 1px solid #cbded4; border-radius: 8px; background: #fff; color: #0f766e; font-size: 12px; font-weight: 700; cursor: pointer; }
    .uai-core-trial .wb-context-panel__toggle:hover, .uai-core-trial .wb-context-panel__toggle:focus-visible { background: #edf8f3; border-color: #0f766e; }
    .uai-core-trial .wb-context-panel details > summary { display: none; }
    .uai-core-trial .wb-context-panel__show { position: absolute; z-index: 4; top: 0; right: 0; min-height: 34px; padding: 6px 10px; border: 1px solid #cbded4; border-radius: 9px; background: #fff; color: #0f766e; font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 18px rgba(16,60,52,.08); }
    .uai-core-trial .wb-context-panel__show:hover, .uai-core-trial .wb-context-panel__show:focus-visible { background: #edf8f3; border-color: #0f766e; outline: 2px solid rgba(15,118,110,.18); outline-offset: 2px; }
    .uai-core-trial .wb-layout.is-context-hidden .wb-context-panel { display: none; }
}
@media (max-width: 960px) { .uai-core-trial .wb-sidebar__resize { display: none; } .uai-core-trial .wb-context-panel__toolbar { margin-bottom: 8px; } .uai-core-trial .wb-context-panel__show { display: none; } }
@media (max-width: 960px) { .uai-core-trial .wb-sidebar__collapse { display: none; } .uai-core-trial .wb-sidebar__toolbar { display: block; } }

/* ── Enhanced LinkedIn Outline Row ── */
.ai-wb-linkedin-outline__row:active {
    background: #e8f3ef;
    transform: scale(0.995);
}

/* ── Instant Feedback: Remove Animation Delay on Stage Switch ── */
.wb-stage-panel {
    will-change: opacity, transform;
}
.wb-stage-panel.active {
    animation: wb-stage-enter .25s ease;
}
@keyframes wb-stage-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Larger Touch Targets for Mobile ── */
@media (max-width: 760px) {
    .wb-tl-item { padding: 14px 12px; min-height: 56px; }
    .wb-art-tab { padding: 12px 18px; min-height: 48px; }
    .wb-opt-item { padding: 14px 16px; min-height: 52px; }
    .wb-fc-btn { padding: 12px 24px; min-height: 48px; }
    .wb-tl-item.locked::after { display: none; }
}

/* ── Reduced Motion Support ── */
@media (prefers-reduced-motion: reduce) {
    .wb-tl-item:active,
    .wb-art-tab:active,
    .wb-opt-item:active,
    .wb-prompt-copy:active,
    .wb-fc-btn:active,
    .ai-wb-linkedin-outline__row:active { transform: none; }
    .wb-stage-panel.active { animation: none; }
}

/* CiCC single-course editorial shell — presentation only. */
.wb-lms-wrap{max-width:1240px;padding:0 28px 76px;background:#f7faf8;color:#173d37}.wb-lms-wrap .wb-sticky-bar{margin:0 -28px 26px;padding-inline:28px;background:rgba(247,250,248,.94);border-color:#dbe8df;box-shadow:0 8px 22px rgba(16,60,52,.08)}.wb-sticky-bar__inner{max-width:1184px}.wb-progress-track{height:7px;background:#e4eee7}.wb-progress-bar{background:linear-gradient(90deg,#0f766e,#83c957)}.wb-progress-text{color:#0f766e}.wb-timer-badge{color:#537064;background:#edf4ee}
.wb-layout{grid-template-columns:294px minmax(0,1fr);gap:28px}.wb-sidebar{top:84px;padding:18px 13px;border:1px solid #dbe8df;border-radius:17px;background:rgba(255,255,255,.96);box-shadow:0 12px 30px rgba(16,60,52,.08)}.wb-sidebar__title{padding:0 8px 13px;margin:0;border-bottom:1px solid #e8f0ea;color:#4b6e62;font-size:.68rem}.wb-tl-item{padding:11px 9px;border-radius:11px}.wb-tl-item.active{background:#eef8ec;border-color:#b8d9b5}.wb-tl-item.available:hover{background:#f2f9f0}.wb-tl-icon{border-radius:9px}.wb-tl-icon.available{background:#0f766e}.wb-tl-item.completed .wb-tl-icon{background:#82c957}.wb-tl-code{color:#0f766e}.wb-tl-title{color:#284d42}.wb-tl-min{color:#789187}.wb-tl-connector{background:#dbe8df}.wb-sidebar__footer{margin:14px 4px 0;padding-top:13px;border-top:1px solid #e8f0ea}.wb-sidebar__footer a{color:#0f766e;font-size:.72rem;font-weight:700}
.wb-content{min-width:0}.wb-stage-panel{animation:wb-editorial-enter .28s ease}@keyframes wb-editorial-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}.wb-stage-header{padding:25px 28px;margin-bottom:20px;border:1px solid #dce9df;border-radius:17px;color:#173d37;background:linear-gradient(135deg,#fff 0%,#f1f8ef 100%);box-shadow:0 10px 25px rgba(16,60,52,.06)}.wb-stage-header:after{background:radial-gradient(circle,#b8df9d55,transparent 70%)}.wb-stage-header__tag{color:#0f766e;background:#e7f5e8}.wb-stage-header__title{color:#173d37}.wb-stage-header__desc{color:#58736a}.wb-stage-header__meta-item{color:#60786e}.wb-stage-header__meta-item strong{color:#0f766e}
.wb-art-tabs{gap:7px;margin-bottom:16px;padding-bottom:10px;border-color:#dce9df}.wb-art-tab{padding:9px 13px;border-color:#dce9df;border-radius:9px;color:#49685d;background:#fff}.wb-art-tab:hover,.wb-art-tab.active{color:#0f766e;border-color:#9bc8ad;background:#eaf6e8;box-shadow:none}.wb-card{border:1px solid #dce9df;border-radius:15px;background:#fff;box-shadow:0 8px 22px rgba(16,60,52,.05)}.wb-card__title{border-color:#e8f0ea;color:#234b3e;background:#fbfdfb}.wb-md{color:#405f53;line-height:1.78}.wb-md h2,.wb-md h3{color:#173d37}.wb-md a{color:#0f766e}.wb-activity-box{border:1px solid #d7e7c8;border-radius:15px;background:#f1f8eb;box-shadow:none}.wb-activity-box__title{color:#234b3e}.wb-activity-box__desc{color:#5b7465}.wb-check-stage{color:#315b48;border-color:#bfd8b5;background:#fff}.wb-stage-footer{display:flex;justify-content:space-between;gap:12px;margin-top:20px;padding-top:17px;border-top:1px solid #dce9df}.wb-btn-next,.wb-btn-prev{border-radius:10px;font-weight:750}.wb-btn-next{background:#0f766e;box-shadow:0 7px 17px rgba(15,118,110,.18)}.wb-btn-prev{color:#42665a;border-color:#bfd8c4;background:#fff}.wb-video-box{border-radius:13px;background:#0b2730;box-shadow:0 12px 26px rgba(0,0,0,.12)}.wb-audio-box{border:1px solid #dce9df;border-radius:13px;background:#f7faf8}
@media(max-width:1000px){.wb-lms-wrap{padding-inline:20px}.wb-lms-wrap .wb-sticky-bar{margin-inline:-20px;padding-inline:20px}.wb-layout{grid-template-columns:250px minmax(0,1fr);gap:18px}.wb-context-panel{grid-column:1 / -1;position:static}}@media(max-width:760px){.wb-lms-wrap{padding-inline:14px}.wb-lms-wrap .wb-sticky-bar{width:100%;margin-inline:0;padding-inline:14px}.wb-layout{grid-template-columns:1fr}.wb-sidebar{position:sticky;top:54px;z-index:20;max-height:72px;overflow:hidden;transition:max-height .25s ease}.wb-sidebar:focus-within,.wb-sidebar:hover{max-height:480px;overflow:auto}.wb-sidebar__title{cursor:pointer}.wb-stage-header{padding:22px 20px}.wb-stage-footer{flex-direction:column}.wb-btn-next,.wb-btn-prev{width:100%;min-height:46px}}

/* North Star layout override: curriculum + main content + optional context panel. */
.wb-layout { grid-template-columns: 294px minmax(0, 1fr) 280px; }
.uai-core-artifact audio { width: 100%; margin-top: 14px; }
.uai-core-artifact__image img { display: block; width: 100%; height: auto; margin-top: 14px; border-radius: 12px; }
.uai-core-artifact__document iframe { display: block; width: 100%; min-height: 560px; margin-top: 14px; border: 1px solid rgba(148,163,184,.35); border-radius: 12px; }
.uai-core-artifact__reader { margin-top: 14px; padding: 16px; border: 1px solid rgba(148,163,184,.28); border-radius: 12px; background: #f8fafc; }
.uai-core-readable-text { max-height: 420px; overflow: auto; white-space: pre-wrap; font: inherit; line-height: 1.65; color: #334155; }
.uai-core-reader-error { color: #8a3f3f; margin: 0 0 10px; }
.uai-core-flashcards { display: grid; gap: 10px; }
.uai-core-flashcard { padding: 10px 12px; border: 1px solid rgba(148,163,184,.28); border-radius: 10px; background: #fff; }
.uai-core-flashcard summary { cursor: pointer; font-weight: 700; line-height: 1.45; }
.uai-core-flashcard p { margin: 10px 0 0; line-height: 1.55; color: #475569; }
.uai-core-quiz-preview { margin: 0; padding-left: 22px; line-height: 1.55; }
.uai-core-quiz-preview > li { margin: 0 0 14px; font-weight: 650; }
.uai-core-quiz-preview ul { margin-top: 6px; padding-left: 20px; font-weight: 400; color: #475569; }
.uai-core-mindmap { margin: 0; padding: 14px 18px; border-left: 3px solid #9bc8ad; color: #315b48; line-height: 1.55; }
.uai-core-mindmap ul { margin: 6px 0 4px 18px; padding-left: 18px; border-left: 1px dashed #bfd8c4; }
.uai-core-mindmap li { margin: 7px 0; padding-left: 4px; }
.uai-core-mindmap strong { font-size: .9rem; }
.uai-core-data-table-wrap { overflow: auto; max-width: 100%; border: 1px solid #dce9df; border-radius: 10px; }
.uai-core-data-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .78rem; line-height: 1.45; }
.uai-core-data-table th { position: sticky; top: 0; background: #eaf6e8; color: #234b3e; text-align: left; font-weight: 800; }
.uai-core-data-table th, .uai-core-data-table td { padding: 10px; border-bottom: 1px solid #e8f0ea; vertical-align: top; }
.uai-core-data-table tbody tr:nth-child(even) { background: #fbfdfb; }
.uai-core-markdown { color: #405f53; line-height: 1.75; }
.uai-core-markdown h1, .uai-core-markdown h2, .uai-core-markdown h3 { color: #173d37; line-height: 1.3; margin: 0 0 10px; }
.uai-core-markdown h2 { font-size: 1.15rem; margin-top: 20px; }
.uai-core-markdown h3 { font-size: 1rem; margin-top: 16px; }
.uai-core-markdown p { margin: 0 0 12px; }
.uai-core-markdown ul, .uai-core-markdown ol { margin: 0 0 14px; padding-left: 22px; }
.uai-core-markdown li { margin: 4px 0; }
.uai-core-markdown blockquote { margin: 14px 0; padding: 10px 14px; border-left: 3px solid #82c957; background: #f1f8eb; color: #315b48; }
.uai-core-quiz-question label { display: block; margin: 7px 0; padding: 10px 12px; border: 1px solid #dce9df; border-radius: 9px; background: #fff; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.uai-core-quiz-question label:hover, .uai-core-quiz-question label.is-selected { border-color: #82c957; background: #f1f8eb; }
.uai-core-quiz-question input { accent-color: #0f766e; }
@media (max-width: 1000px) { .wb-layout { grid-template-columns: 250px minmax(0, 1fr); } .wb-context-panel { grid-column: 1 / -1; position: static; } }
@media (max-width: 760px) { .wb-layout { grid-template-columns: 1fr; } }
.wb-sidebar__title[role="button"] { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; }
.wb-sidebar__title[role="button"]:focus-visible { outline: 3px solid var(--color-primary-light); outline-offset: 3px; border-radius: 6px; }
.wb-timeline-module { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border-light); }
.wb-timeline-module:last-child { border-bottom: 0; margin-bottom: 0; }
.wb-tl-module-heading { display: flex; align-items: flex-start; gap: 10px; padding: 4px 6px 8px; }
.wb-tl-module-heading > div { min-width: 0; }
.wb-tl-module-heading strong { display: block; color: var(--color-text); font-size: .78rem; line-height: 1.35; }
.wb-timeline-lessons { display: grid; gap: 4px; margin-left: 13px; padding-left: 16px; border-left: 2px solid var(--color-border-light); }
.wb-tl-lesson { display: flex; align-items: flex-start; gap: 7px; padding: 8px 9px; border-radius: 8px; color: var(--color-text-secondary); text-decoration: none; font-size: .76rem; line-height: 1.35; }
.wb-tl-lesson:hover, .wb-tl-lesson.is-current { color: var(--color-primary-dark); background: var(--color-primary-bg); }
.wb-tl-lesson strong { display: block; color: inherit; font-weight: 700; }
.wb-tl-lesson small { display: block; margin-top: 2px; color: var(--color-text-muted); font-size: .65rem; }
.wb-tl-lesson-state { flex: 0 0 auto; color: var(--color-text-muted); }
.wb-tl-lesson.is-current .wb-tl-lesson-state { color: var(--color-primary); }
.wb-tl-lesson[data-core-locked-lesson] { width: 100%; border: 0; text-align: left; font: inherit; cursor: pointer; opacity: .78; background: transparent; }
.wb-tl-lesson[data-core-locked-lesson]:hover, .wb-tl-lesson[data-core-locked-lesson].is-lock-notice { color: #8a4b08; background: #fff5df; }
.wb-tl-lesson[data-core-locked-lesson]:focus-visible { outline: 3px solid rgba(180, 110, 12, .3); outline-offset: 2px; }
.wb-timeline-artifacts { margin: 8px 6px 0; padding: 10px 8px 0; border-top: 1px dashed var(--color-border); }
.wb-timeline-artifacts > small { display: block; margin-bottom: 5px; color: var(--color-text-muted); font-size: .58rem; font-weight: 800; letter-spacing: .08em; }
.wb-tl-artifact { display: block; width: 100%; padding: 5px 3px; border: 0; background: transparent; color: var(--color-text-secondary); cursor: pointer; text-align: left; font: inherit; font-size: .68rem; }
.wb-tl-artifact:hover { color: var(--color-primary); }
.wb-tl-artifact:focus-visible { outline: 3px solid var(--color-primary-light); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 760px) {
    .wb-sidebar { max-height: 58px; overflow: hidden; }
    .wb-sidebar.is-open { max-height: 480px; overflow: auto; }
    .wb-sidebar:hover { max-height: 58px; overflow: hidden; }
.wb-sidebar.is-open:hover { max-height: 480px; overflow: auto; }
.wb-sidebar__title span { float: right; transition: transform .2s ease; }
.wb-sidebar.is-open .wb-sidebar__title span { transform: rotate(180deg); }
}

/* ── Admin-bar style learner sidebar ── */
@media (min-width: 961px) {
    .uai-core-trial .wb-sidebar { position: sticky; top: 10px; align-self: start; max-height: calc(100vh - 20px); overflow: auto; scrollbar-width: thin; }
    .uai-core-trial .wb-sidebar__toolbar { position: sticky; top: -18px; z-index: 2; margin: -18px -13px 12px; padding: 12px 13px 10px; background: rgba(255,255,255,.98); border-bottom: 1px solid #e8f0ea; }
    .uai-core-trial .wb-sidebar__title { min-width: 0; padding: 5px 7px; border: 0; color: #234b3e; font-size: .75rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .uai-core-trial .wb-sidebar__collapse { min-width: 72px; }
    .uai-core-trial .wb-sidebar.is-collapsed { padding-inline: 8px; }
    .uai-core-trial .wb-sidebar.is-collapsed .wb-sidebar__toolbar { margin-inline: -8px; padding-inline: 8px; }
    .uai-core-trial .wb-sidebar.is-collapsed .wb-sidebar__title { display: none; }
    .uai-core-trial .wb-sidebar__rail { display: none; }
    .uai-core-trial .wb-sidebar.is-collapsed .wb-sidebar__rail { display: grid; gap: 8px; justify-items: center; visibility: visible; pointer-events: auto; }
    .uai-core-trial .wb-sidebar__rail-item { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #cfe4da; border-radius: 10px; background: #f4fbf7; color: #0f766e; font-size: 10px; font-weight: 900; cursor: pointer; }
    .uai-core-trial .wb-sidebar__rail-item:hover, .uai-core-trial .wb-sidebar__rail-item:focus-visible { background: #dff4e8; border-color: #0f766e; outline: 2px solid rgba(15,118,110,.18); outline-offset: 2px; }
}
.wb-stage-footer { position: sticky; bottom: 10px; z-index: 25; box-shadow: 0 8px 24px rgba(16,60,52,.14); }
.uai-core-trial { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; padding: 0 24px 60px !important; box-sizing: border-box; background: linear-gradient(180deg, #f8fcfa 0%, #ffffff 38%, #f8fbff 100%); }
.uai-core-trial .wb-layout { width: 100%; max-width: 1440px; margin-inline: auto; padding: 20px 0 0; }
.uai-core-trial .wb-content { position: relative; }
.uai-core-trial .wb-content::before { content: ''; position: absolute; inset: -12px -14px auto; height: 100%; min-height: 720px; border: 1px solid rgba(113,173,157,.12); border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(249,252,255,.58)); box-shadow: 0 12px 30px rgba(41,91,79,.045); pointer-events: none; }
.uai-core-trial .wb-stage-panel { position: relative; z-index: 1; }
.wb-trial-conversion-shell { width: 100%; max-width: none; box-sizing: border-box; padding: 0 24px 42px; background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%); }
.wb-trial-conversion-shell .wb-trial-conversion { max-width: 1200px; margin-inline: auto; }
.wb-roadmap-shell { width: 100%; box-sizing: border-box; padding: 0 24px 48px; background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%); }
.uai-core-trial .wb-roadmap { max-width: 1200px; margin: 0 auto; padding: 30px 0 4px; }
.uai-core-trial .wb-roadmap__intro { max-width: 640px; margin-bottom: 18px; }
.uai-core-trial .wb-roadmap__eyebrow { color: #0f766e; font-size: .62rem; font-weight: 900; letter-spacing: .12em; }
.uai-core-trial .wb-roadmap__intro h2 { margin: 7px 0 7px; color: #173d37; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.2; }
.uai-core-trial .wb-roadmap__intro p { margin: 0; color: #58736a; font-size: .84rem; line-height: 1.55; }
.uai-core-trial .wb-roadmap__track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.uai-core-trial .wb-roadmap__track::before { content: ''; position: absolute; top: 27px; left: 7%; right: 7%; height: 2px; background: linear-gradient(90deg, #b7d9ca, #d7c9f3); pointer-events: none; }
.uai-core-trial .wb-roadmap__node { position: relative; z-index: 1; display: grid; gap: 8px; min-height: 142px; padding: 14px; border: 1px solid #dbe9e1; border-radius: 14px; background: rgba(255,255,255,.9); color: #315b4d; text-decoration: none; box-shadow: 0 7px 18px rgba(41,91,79,.055); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.uai-core-trial .wb-roadmap__node:hover, .uai-core-trial .wb-roadmap__node:focus-visible { transform: translateY(-3px); border-color: #72bea0; box-shadow: 0 12px 24px rgba(41,91,79,.11); outline: none; }
.uai-core-trial .wb-roadmap__node.is-current { background: linear-gradient(145deg, #f1fbf5, #ffffff); border-color: #72bea0; }
.uai-core-trial .wb-roadmap__node.is-champion { background: linear-gradient(145deg, #f6f2ff, #ffffff); border-color: #c7b8e9; }
.uai-core-trial .wb-roadmap__icon { display: grid; place-items: center; width: 28px; height: 28px; border: 3px solid #fff; border-radius: 50%; background: #0f766e; color: #fff; font-size: .72rem; font-weight: 900; box-shadow: 0 0 0 2px #b7d9ca; }
.uai-core-trial .wb-roadmap__node:nth-child(2) .wb-roadmap__icon { background: #d39c12; box-shadow: 0 0 0 2px #ecd99d; }
.uai-core-trial .wb-roadmap__node:nth-child(3) .wb-roadmap__icon { background: #29945a; box-shadow: 0 0 0 2px #b8dfc7; }
.uai-core-trial .wb-roadmap__node:nth-child(4) .wb-roadmap__icon { background: #355b9b; box-shadow: 0 0 0 2px #becdec; }
.uai-core-trial .wb-roadmap__node.is-champion .wb-roadmap__icon { background: #7652b7; box-shadow: 0 0 0 2px #d5c9ef; }
.uai-core-trial .wb-roadmap__node strong { display: block; color: #173d37; font-size: .82rem; }
.uai-core-trial .wb-roadmap__node small { display: block; margin-top: 4px; color: #6b827a; font-size: .67rem; line-height: 1.4; }
.uai-core-trial .wb-roadmap__node b { align-self: end; color: #0f766e; font-size: .65rem; }
@media (max-width: 760px) { .wb-roadmap-shell { padding: 0 14px 32px; } .uai-core-trial .wb-roadmap { padding-top: 22px; } .uai-core-trial .wb-roadmap__track { grid-template-columns: 1fr; gap: 8px; } .uai-core-trial .wb-roadmap__track::before { top: 20px; bottom: 20px; left: 20px; right: auto; width: 2px; height: auto; background: linear-gradient(#b7d9ca, #d7c9f3); } .uai-core-trial .wb-roadmap__node { grid-template-columns: 30px minmax(0,1fr); align-items: center; min-height: 0; padding: 11px 13px; } .uai-core-trial .wb-roadmap__node b { grid-column: 2; } }
.wb-platforms-shell { width: 100%; box-sizing: border-box; padding: 0 24px 56px; background: #fff; }
.uai-core-trial .wb-platforms { max-width: 1200px; margin: 0 auto; padding-top: 26px; }
.uai-core-trial .wb-platforms__intro { margin-bottom: 18px; }
.uai-core-trial .wb-platforms__eyebrow { color: #0f766e; font-size: .62rem; font-weight: 900; letter-spacing: .12em; }
.uai-core-trial .wb-platforms__intro h2 { margin: 7px 0; color: #173d37; font-size: clamp(1.25rem, 2vw, 1.7rem); }
.uai-core-trial .wb-platforms__intro p { max-width: 680px; margin: 0; color: #58736a; font-size: .84rem; line-height: 1.55; }
.uai-core-trial .wb-platforms__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.uai-core-trial .wb-platforms__grid a { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 10px; align-items: center; min-height: 86px; padding: 14px; border: 1px solid #dbe9e1; border-radius: 14px; background: linear-gradient(145deg, #fbfffd, #f7fbff); color: #315b4d; text-decoration: none; box-shadow: 0 7px 18px rgba(41,91,79,.045); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.uai-core-trial .wb-platforms__grid a:hover, .uai-core-trial .wb-platforms__grid a:focus-visible { transform: translateY(-3px); border-color: #72bea0; box-shadow: 0 12px 24px rgba(41,91,79,.10); outline: none; }
.uai-core-trial .wb-platforms__mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #e6f7ef; color: #0f766e; font-size: .67rem; font-weight: 900; }
.uai-core-trial .wb-platforms__grid a:nth-child(2) .wb-platforms__mark { background: #e7f1ff; color: #315b9b; }
.uai-core-trial .wb-platforms__grid a:nth-child(3) .wb-platforms__mark { background: #f1eaff; color: #7652b7; }
.uai-core-trial .wb-platforms__grid a:nth-child(4) .wb-platforms__mark { background: #fff4d9; color: #a16b08; }
.uai-core-trial .wb-platforms__grid a:nth-child(1) { background: linear-gradient(145deg, #f0efff 0%, #fbfaff 100%); border-color: #d8d2fa; }
.uai-core-trial .wb-platforms__grid a:nth-child(1):hover, .uai-core-trial .wb-platforms__grid a:nth-child(1):focus-visible { border-color: #8b7bd8; }
.uai-core-trial .wb-platforms__grid a:nth-child(2) { background: linear-gradient(145deg, #eafbf8 0%, #f9fffe 100%); border-color: #b9e5dc; }
.uai-core-trial .wb-platforms__grid a:nth-child(2):hover, .uai-core-trial .wb-platforms__grid a:nth-child(2):focus-visible { border-color: #48b9a7; }
.uai-core-trial .wb-platforms__grid a:nth-child(3) { background: linear-gradient(145deg, #f8efff 0%, #fffaff 100%); border-color: #e2c9f3; }
.uai-core-trial .wb-platforms__grid a:nth-child(3):hover, .uai-core-trial .wb-platforms__grid a:nth-child(3):focus-visible { border-color: #ad70d5; }
.uai-core-trial .wb-platforms__grid a:nth-child(4) { background: linear-gradient(145deg, #fff7e7 0%, #fffdf8 100%); border-color: #f0d59d; }
.uai-core-trial .wb-platforms__grid a:nth-child(4):hover, .uai-core-trial .wb-platforms__grid a:nth-child(4):focus-visible { border-color: #d39a2c; }
.uai-core-trial .wb-platforms__grid strong { display: block; color: #173d37; font-size: .76rem; line-height: 1.25; }
.uai-core-trial .wb-platforms__grid small { display: block; margin-top: 4px; color: #6b827a; font-size: .63rem; line-height: 1.35; }
.uai-core-trial .wb-platforms__grid b { grid-column: 2; color: #0f766e; font-size: .64rem; }
@media (max-width: 760px) { .wb-platforms-shell { padding: 0 14px 36px; } .uai-core-trial .wb-platforms { padding-top: 22px; } .uai-core-trial .wb-platforms__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; } .uai-core-trial .wb-platforms__grid a { grid-template-columns: 32px minmax(0,1fr); min-height: 96px; padding: 11px; } .uai-core-trial .wb-platforms__mark { width: 30px; height: 30px; } }
@media (max-width: 760px) { .uai-core-trial { padding-inline: 14px !important; } .uai-core-trial .wb-layout { padding-top: 12px; } .uai-core-trial .wb-content::before { inset: -8px -8px auto; min-height: 520px; border-radius: 16px; } .wb-trial-conversion-shell { padding-inline: 14px; } }

/* ── AI trending hero: full-bleed, light command strip ── */
@media (min-width: 761px) {
    .uai-core-trial .wb-hero { max-width: none; margin: 0 -24px 18px; padding: 24px 40px; border-radius: 0 0 22px 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 36px; align-items: center; min-height: 156px; background: linear-gradient(110deg, #102f3b 0%, #123e4a 42%, #164e63 72%, #263d68 100%); box-shadow: 0 12px 30px rgba(18,62,74,.16); }
    .uai-core-trial .wb-hero::before { background: radial-gradient(circle at 12% 0%, rgba(91,226,190,.22), transparent 35%), radial-gradient(circle at 82% 18%, rgba(111,130,255,.26), transparent 32%), linear-gradient(90deg, transparent 0 49%, rgba(255,255,255,.035) 50%, transparent 51%); background-size: auto, auto, 34px 34px; opacity: .9; }
    .uai-core-trial .wb-hero::after { content: ''; position: absolute; width: 260px; height: 260px; right: 12%; top: -180px; border: 1px solid rgba(126,246,216,.22); border-radius: 50%; box-shadow: 0 0 0 28px rgba(126,246,216,.04), 0 0 0 56px rgba(126,246,216,.025); pointer-events: none; }
    .uai-core-trial .wb-hero__eyebrow { grid-column: 1 / -1; margin: 0 0 8px; font-size: .64rem; letter-spacing: .14em; color: #9df5dc; }
    .uai-core-trial .wb-hero__h1 { grid-column: 1; margin: 0 0 6px; max-width: 760px; font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.15; letter-spacing: -.02em; }
    .uai-core-trial .wb-hero__sub { grid-column: 1; margin: 0; max-width: 720px; font-size: .88rem; line-height: 1.45; color: rgba(236,253,250,.72); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .uai-core-trial .wb-hero__metrics { grid-column: 2; grid-row: 2 / span 2; display: flex; gap: 8px; margin: 0; }
    .uai-core-trial .wb-hero__metric { min-width: 92px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.08); border-color: rgba(187,255,239,.16); }
    .uai-core-trial .wb-hero__metric-val { font-size: 1.1rem; margin-bottom: 4px; }
    .uai-core-trial .wb-hero__metric-label { font-size: .62rem; color: rgba(236,253,250,.58); }
    .uai-core-trial .wb-hero__cta-row, .uai-core-trial .wb-hero__trust { display: none; }
}
@media (max-width: 760px) {
    .uai-core-trial .wb-hero { background: linear-gradient(135deg, #fbfffd 0%, #eefaf6 58%, #f3f2ff 100%); border: 1px solid rgba(113,173,157,.22); box-shadow: 0 10px 26px rgba(41,91,79,.09); }
    .uai-core-trial .wb-hero__eyebrow { color: #0f766e; }
    .uai-core-trial .wb-hero__h1 { color: #173d37; }
    .uai-core-trial .wb-hero__sub { color: #58736a; }
    .uai-core-trial .wb-hero__metric { background: rgba(255,255,255,.72); border-color: rgba(113,173,157,.24); }
    .uai-core-trial .wb-hero__metric-val { color: #173d37; }
    .uai-core-trial .wb-hero__metric-label { color: #6b827a; }
}

/* ── Trial promise + full-course return card ── */
@media (min-width: 761px) {
    .uai-core-trial .wb-hero__metrics { grid-column: 1; grid-row: 3; justify-content: flex-start; }
    .uai-core-trial .wb-hero__trial-card { position: absolute; top: 24px; right: 40px; display: grid; gap: 5px; min-width: 238px; max-width: 286px; padding: 14px 16px; border: 1px solid rgba(113,173,157,.28); border-radius: 14px; background: rgba(255,255,255,.76); box-shadow: 0 8px 20px rgba(41,91,79,.07); z-index: 1; }
    .uai-core-trial .wb-hero__trial-card strong { color: #173d37; font-size: .86rem; line-height: 1.25; }
    .uai-core-trial .wb-hero__trial-card small { color: #6b827a; font-size: .68rem; line-height: 1.4; }
    .uai-core-trial .wb-hero__trial-badge { color: #0f766e; font-size: .58rem; font-weight: 900; letter-spacing: .08em; }
    .uai-core-trial .wb-hero__trial-card a { justify-self: start; margin-top: 3px; color: #0f766e; font-size: .72rem; font-weight: 900; text-decoration: none; }
    .uai-core-trial .wb-hero__trial-card a:hover { color: #075e58; text-decoration: underline; }
}
@media (max-width: 760px) {
    .uai-core-trial .wb-hero__trial-card { display: grid; gap: 5px; margin: 14px 0 16px; padding: 13px 14px; border: 1px solid rgba(113,173,157,.28); border-radius: 13px; background: rgba(255,255,255,.72); }
    .uai-core-trial .wb-hero__trial-card strong { color: #173d37; font-size: .84rem; }
    .uai-core-trial .wb-hero__trial-card small { color: #6b827a; font-size: .68rem; }
    .uai-core-trial .wb-hero__trial-badge { color: #0f766e; font-size: .57rem; font-weight: 900; letter-spacing: .06em; }
    .uai-core-trial .wb-hero__trial-card a { color: #0f766e; font-size: .72rem; font-weight: 900; text-decoration: none; }
}
@media (max-width: 760px) {
    .uai-core-trial .wb-hero { margin-bottom: 14px; padding: 24px 18px 20px; border-radius: 0 0 18px 18px; }
    .uai-core-trial .wb-hero__metrics { gap: 6px; margin-bottom: 0; }
    .uai-core-trial .wb-hero__metric { padding: 10px 8px; }
}

/* ── Core Slide: full-width adaptive AI canvas ── */
.uai-core-trial .wb-art-pane[data-artifact-type="slide"] .uai-artifact-card { overflow: hidden; }
.uai-core-trial .wb-art-pane[data-artifact-type="slide"] .uai-core-artifact__heading { padding: 12px 16px; background: linear-gradient(100deg, #102f3b, #263d68); color: #e8fffa; }
.uai-core-trial .wb-art-pane[data-artifact-type="slide"] .uai-core-artifact__heading span { color: rgba(232,255,250,.62); }
.uai-core-trial .wb-art-pane[data-artifact-type="slide"] .uai-core-artifact__document { width: calc(100% + 32px); margin: 0 -16px -16px; padding: 16px; background: radial-gradient(circle at 70% 0%, rgba(91,226,190,.12), transparent 35%), #0d1d2b; }
.uai-core-trial .wb-art-pane[data-artifact-type="slide"] .uai-core-artifact__document iframe { width: 100%; height: min(68vh, 720px); min-height: 440px; margin: 0; aspect-ratio: 16 / 9; border: 1px solid rgba(157,245,220,.2); border-radius: 12px; background: #142b3b; box-shadow: 0 16px 36px rgba(0,0,0,.28); }
@media (max-width: 760px) {
    .uai-core-trial .wb-art-pane[data-artifact-type="slide"] .uai-core-artifact__document { width: calc(100% + 24px); margin-inline: -12px; padding: 10px; }
    .uai-core-trial .wb-art-pane[data-artifact-type="slide"] .uai-core-artifact__document iframe { height: 58vh; min-height: 300px; border-radius: 9px; }
}

/* ── Simple ordered learning path ── */
.uai-core-trial .uai-core-artifacts { min-width: 0; }
.uai-core-trial .wb-art-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow: visible; padding: 4px; border: 0; counter-reset: artifact-step; }
.uai-core-trial .wb-art-tab { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 8px 10px 8px 38px; border: 1px solid #dce9df; border-radius: 10px; background: #fff; color: #49685d; text-align: left; white-space: normal; line-height: 1.25; counter-increment: artifact-step; }
.uai-core-trial .wb-art-tab::before { content: counter(artifact-step, decimal-leading-zero); position: absolute; left: 10px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 7px; background: #edf8f3; color: #0f766e; font-size: 10px; font-weight: 900; }
.uai-core-trial .wb-art-tab.active { border-color: #72bea0; background: linear-gradient(135deg, #f2fbf6, #f7f5ff); color: #0f766e; box-shadow: 0 5px 14px rgba(41,91,79,.08); }
.uai-core-trial .wb-art-tab.active::before { background: #0f766e; color: #fff; }
/* Resource tabs are selectable references, not ordered learning steps. */
.uai-core-trial .wb-art-tabs--resources { counter-reset: none; }
.uai-core-trial .wb-art-tabs--resources .wb-art-tab { counter-increment: none; padding-left: 14px; }
.uai-core-trial .wb-art-tabs--resources .wb-art-tab::before { content: '•'; left: 8px; width: 14px; background: transparent; color: #72bea0; font-size: 16px; }
.uai-core-trial .wb-art-tabs--resources .wb-art-tab.active::before { background: transparent; color: #0f766e; }
.uai-core-trial video.uai-core-artifact__media { display: block; width: 100%; max-height: min(68vh, 720px); border-radius: 12px; background: #102b32; }
.uai-core-trial .wb-resource-hub__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.uai-core-trial .wb-resource-progress { display: grid; justify-items: end; color: #58786d; font-size: .72rem; line-height: 1.2; white-space: nowrap; }
.uai-core-trial .wb-resource-progress strong { color: #0f766e; font-size: 1rem; }
.uai-core-trial .wb-art-tabs--resources { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 0; }
.uai-core-trial .wb-resource-group { border: 1px solid #dce9df; border-radius: 14px; background: #fbfefc; overflow: hidden; }
.uai-core-trial .wb-resource-group__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 14px; border: 0; background: #f1f8f3; color: #174f45; font-weight: 800; text-align: left; cursor: pointer; }
.uai-core-trial .wb-resource-group__toggle span { display: inline-flex; align-items: center; gap: 8px; }
.uai-core-trial .wb-resource-group__toggle b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: #d8f0e2; font-size: .78rem; }
.uai-core-trial .wb-resource-group__toggle small { color: #648178; font-size: .72rem; font-weight: 700; }
.uai-core-trial .wb-resource-group__toggle i { margin-left: 6px; font-style: normal; }
.uai-core-trial .wb-resource-group.is-collapsed .wb-resource-group__items { display: none; }
.uai-core-trial .wb-resource-group__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 52px; padding: 8px 10px; border: 1px solid #e1ece5; border-radius: 10px; background: #fff; color: #49685d; text-align: left; cursor: pointer; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-item::before { display: none; }
.uai-core-trial .wb-resource-item__icon { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #b9d9c8; border-radius: 50%; color: #72a88f; font-size: .78rem; }
.uai-core-trial .wb-resource-item__copy { display: grid; min-width: 0; gap: 3px; }
.uai-core-trial .wb-resource-item__copy strong { overflow: hidden; color: #315c50; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.uai-core-trial .wb-resource-item__copy small { color: #82988e; font-size: .66rem; }
.uai-core-trial .wb-resource-item__status { color: #8da096; font-size: .63rem; font-weight: 700; white-space: nowrap; }
.uai-core-trial .wb-resource-item.active { border-color: #68b697; background: #f0fbf5; box-shadow: 0 3px 12px rgba(41,91,79,.08); }
.uai-core-trial .wb-resource-item.active .wb-resource-item__icon { background: #0f766e; border-color: #0f766e; color: #fff; }
.uai-core-trial .wb-resource-item.is-opened .wb-resource-item__icon { background: #dff5e7; color: #16734e; }
.uai-core-trial .wb-resource-item.is-opened .wb-resource-item__status { color: #16734e; }
@media (max-width: 760px) { .uai-core-trial .wb-resource-hub__header { align-items: flex-start; } .uai-core-trial .wb-resource-group__items { grid-template-columns: 1fr; } .uai-core-trial .wb-art-tabs--resources .wb-resource-item { min-height: 48px; } }
/* Resource Hub menubar: only the selected category expands. */
.uai-core-trial .wb-art-tabs--resources { display: flex; align-items: flex-start; gap: 6px; overflow: visible; position: relative; z-index: 8; }
.uai-core-trial .wb-resource-group { position: relative; flex: 0 0 auto; min-width: 0; border: 0; border-radius: 10px; background: transparent; overflow: visible; }
.uai-core-trial .wb-resource-group__toggle { min-height: 42px; padding: 8px 11px; border: 1px solid #dce9df; border-radius: 10px; background: #f4faf6; color: #315c50; font-size: .75rem; white-space: nowrap; }
.uai-core-trial .wb-resource-group__toggle b { width: 21px; height: 21px; font-size: .68rem; }
.uai-core-trial .wb-resource-group__toggle small { display: inline-flex; align-items: center; margin-left: 4px; }
.uai-core-trial .wb-resource-group__items { display: none; position: absolute; top: calc(100% + 6px); left: 0; grid-template-columns: minmax(270px, 340px); width: max-content; max-width: min(390px, 80vw); padding: 7px; border: 1px solid #cfe2d5; border-radius: 12px; background: #fff; box-shadow: 0 16px 34px rgba(30,73,58,.18); }
.uai-core-trial .wb-resource-group.is-active .wb-resource-group__items { display: grid; }
.uai-core-trial .wb-resource-group.is-active .wb-resource-group__toggle { border-color: #68b697; background: #eaf8ef; color: #0f766e; box-shadow: 0 3px 10px rgba(41,91,79,.08); }
.uai-core-trial .wb-art-tabs--resources .wb-resource-item { grid-template-columns: 22px minmax(0, 1fr) auto; min-height: 45px; border: 0; border-radius: 8px; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-item:hover { background: #f1faf4; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-item.active { background: #eaf8ef; box-shadow: none; }
@media (max-width: 760px) { .uai-core-trial .wb-art-tabs--resources { flex-wrap: wrap; } .uai-core-trial .wb-resource-group__items { position: fixed; top: auto; left: 12px; right: 12px; width: auto; max-width: none; grid-template-columns: 1fr; } .uai-core-trial .wb-resource-group__toggle { font-size: .7rem; } }
/* Keep the category menubar on one row at every viewport width. */
.uai-core-trial .wb-art-tabs--resources { flex-wrap: nowrap; overflow: visible; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.uai-core-trial .wb-art-tabs--resources::-webkit-scrollbar { height: 4px; }
.uai-core-trial .wb-art-tabs--resources::-webkit-scrollbar-thumb { background: #b8d8c7; border-radius: 99px; }
@media (max-width: 760px) { .uai-core-trial .wb-art-tabs--resources { flex-wrap: nowrap; overflow-x: auto; overflow-y: visible; gap: 4px; padding-bottom: 5px; } .uai-core-trial .wb-resource-group__toggle { padding: 7px 9px; font-size: .68rem; } .uai-core-trial .wb-resource-group__toggle b { display: none; } .uai-core-trial .wb-resource-group__toggle small { font-size: .6rem; } }
@media (max-width: 760px) { .uai-core-trial .wb-art-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 2px; } .uai-core-trial .wb-art-tab { min-height: 42px; padding-left: 34px; font-size: .75rem; } .uai-core-trial .wb-art-tab::before { left: 8px; } }

/* ── Resource menubar: stays inside the learning-material area ── */
.uai-core-trial .uai-core-artifacts { position: relative; min-width: 0; max-width: 100%; overflow: visible; }
.uai-core-trial .wb-art-tabs--resources { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; width: 100%; max-width: 100%; min-width: 0; gap: 5px; margin: 0 0 14px; padding: 0; overflow: visible; }
.uai-core-trial .wb-resource-group { position: relative; min-width: 0; width: 100%; overflow: visible; }
.uai-core-trial .wb-resource-group__toggle { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 36px; padding: 6px 7px; gap: 4px; border: 1px solid #dce9df; border-radius: 9px; background: #f4faf6; color: #315c50; font-size: .69rem; line-height: 1.1; white-space: nowrap; }
.uai-core-trial .wb-resource-group__toggle span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uai-core-trial .wb-resource-group__toggle b { display: none; }
.uai-core-trial .wb-resource-group__toggle small { display: inline-flex; align-items: center; margin: 0; color: #648178; font-size: 0; }
.uai-core-trial .wb-resource-group__toggle small::before { content: ''; }
.uai-core-trial .wb-resource-group__toggle i { margin-left: 2px; font-size: .72rem; font-style: normal; }
.uai-core-trial .wb-resource-group__items { display: none; position: absolute; z-index: 20; top: calc(100% + 5px); left: 0; width: min(340px, calc(100vw - 32px)); grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 6px; border: 1px solid #cfe2d5; border-radius: 11px; background: #fff; box-shadow: 0 14px 30px rgba(30,73,58,.18); }
.uai-core-trial .wb-resource-group:nth-child(n + 4) .wb-resource-group__items { right: 0; left: auto; }
.uai-core-trial .wb-resource-group.is-active .wb-resource-group__items { display: grid; }
.uai-core-trial .wb-resource-group.is-active .wb-resource-group__toggle { border-color: #68b697; background: #eaf8ef; color: #0f766e; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-item { width: 100%; min-width: 0; min-height: 42px; padding: 7px 8px; }
@media (max-width: 760px) {
    .uai-core-trial .wb-art-tabs--resources { display: flex; flex-wrap: nowrap; width: 100%; overflow-x: auto; overflow-y: visible; gap: 4px; padding-bottom: 4px; }
    .uai-core-trial .wb-resource-group { flex: 0 0 auto; width: auto; min-width: 92px; }
    .uai-core-trial .wb-resource-group__toggle { min-height: 34px; padding-inline: 8px; font-size: .67rem; }
    .uai-core-trial .wb-resource-group__items { width: min(320px, calc(100vw - 28px)); max-width: none; }
}

/* The open resource menu belongs to the whole learning-material area,
 * never to the width of the clicked category button. */
.uai-core-trial .wb-art-tabs--resources { position: relative; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group { position: static; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group__items,
.uai-core-trial .wb-art-tabs--resources .wb-resource-group:nth-child(n + 4) .wb-resource-group__items { top: calc(100% + 5px); right: 0; left: 0; width: auto; max-width: none; }

/* Calm visual feedback for the compact resource menubar. */
.uai-core-trial .wb-art-tabs--resources .wb-resource-group__toggle { position: relative; overflow: hidden; transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group__toggle::after { content: ''; position: absolute; right: 10%; bottom: -1px; left: 10%; height: 2px; border-radius: 99px; background: linear-gradient(90deg, #55b68d, #7c83df); opacity: 0; transform: scaleX(.35); transition: opacity .18s ease, transform .18s ease; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group__toggle:hover { border-color: #9bc8ad; background: #edf9f2; color: #0f766e; box-shadow: 0 4px 12px rgba(41,91,79,.08); transform: translateY(-1px); }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group__toggle:focus-visible { outline: 3px solid rgba(15,118,110,.2); outline-offset: 2px; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group.is-active .wb-resource-group__toggle::after { opacity: 1; transform: scaleX(1); }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group.is-active .wb-resource-group__toggle { border-width: 2px; border-color: #0f766e; background: linear-gradient(135deg, #d9f5e5, #eef8ff); color: #075e58; box-shadow: 0 0 0 3px rgba(15,118,110,.13), 0 7px 16px rgba(15,118,110,.14); transform: translateY(-1px); }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group.is-active .wb-resource-group__toggle span { font-weight: 900; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group.is-active .wb-resource-group__toggle small { color: #075e58; font-weight: 900; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group.is-active .wb-resource-group__toggle i { color: #0f766e; font-weight: 900; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group:nth-child(1).is-active .wb-resource-group__toggle { background: linear-gradient(135deg, #d9f5e5, #f0fff8); }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group:nth-child(2).is-active .wb-resource-group__toggle { background: linear-gradient(135deg, #dff4ff, #eef8ff); border-color: #2583a5; color: #145b75; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group:nth-child(3).is-active .wb-resource-group__toggle { background: linear-gradient(135deg, #eee8ff, #f8f4ff); border-color: #7565bd; color: #51428d; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group:nth-child(4).is-active .wb-resource-group__toggle { background: linear-gradient(135deg, #fff0d8, #fff9ed); border-color: #c47b22; color: #8a5412; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group:nth-child(5).is-active .wb-resource-group__toggle { background: linear-gradient(135deg, #ffe2e6, #fff2f4); border-color: #c65368; color: #933247; }

/* Final compact navigation rule: one calm visual language for all categories. */
.uai-core-trial .wb-art-tabs--resources .wb-resource-group__toggle,
.uai-core-trial .wb-art-tabs--resources .wb-resource-group.is-active .wb-resource-group__toggle,
.uai-core-trial .wb-art-tabs--resources .wb-resource-group:nth-child(n).is-active .wb-resource-group__toggle {
    min-height: 36px;
    border: 1px solid #d6e2db;
    border-radius: 8px;
    background: #fff;
    color: #315c50;
    box-shadow: none;
    transform: none;
}
.uai-core-trial .wb-art-tabs--resources .wb-resource-group__toggle:hover {
    border-color: #78b89a;
    background: #f2faf5;
    color: #0f766e;
    box-shadow: none;
    transform: none;
}
.uai-core-trial .wb-art-tabs--resources .wb-resource-group.is-active .wb-resource-group__toggle {
    border-color: #0f766e;
    background: #0f766e;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(15,118,110,.16);
}
.uai-core-trial .wb-art-tabs--resources .wb-resource-group.is-active .wb-resource-group__toggle small,
.uai-core-trial .wb-art-tabs--resources .wb-resource-group.is-active .wb-resource-group__toggle i {
    color: #fff;
}
.uai-core-trial .wb-art-tabs--resources .wb-resource-group__toggle:focus-visible {
    outline: 3px solid rgba(15,118,110,.3);
    outline-offset: 2px;
}


/* High-attention category colors: each learning mode has a clear visual signal. */
.uai-core-trial .wb-art-tabs--resources .wb-resource-group:nth-child(1) .wb-resource-group__toggle { border-color: #2f9e67; background: #d9f7e5; color: #075e3c; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group:nth-child(2) .wb-resource-group__toggle { border-color: #2188b5; background: #d9f2ff; color: #075477; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group:nth-child(3) .wb-resource-group__toggle { border-color: #7664c3; background: #eee8ff; color: #49378d; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group:nth-child(4) .wb-resource-group__toggle { border-color: #d18a27; background: #fff0d2; color: #814b05; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group:nth-child(5) .wb-resource-group__toggle { border-color: #cc5369; background: #ffe2e8; color: #8c2940; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group:nth-child(n) .wb-resource-group__toggle:hover { filter: saturate(1.2) brightness(.98); box-shadow: 0 4px 12px rgba(30,73,58,.14); }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group:nth-child(n).is-active .wb-resource-group__toggle { border-width: 2px; border-color: currentColor; color: #fff; box-shadow: 0 0 0 4px rgba(15,118,110,.18), 0 7px 16px rgba(30,73,58,.2); }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group:nth-child(1).is-active .wb-resource-group__toggle { background: #168b58; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group:nth-child(2).is-active .wb-resource-group__toggle { background: #1479a8; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group:nth-child(3).is-active .wb-resource-group__toggle { background: #6250ac; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group:nth-child(4).is-active .wb-resource-group__toggle { background: #b96d0d; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-group:nth-child(5).is-active .wb-resource-group__toggle { background: #b63d56; }

.uai-core-trial .wb-art-tabs--resources .wb-resource-group__items { transform-origin: top center; animation: wb-resource-menu-in .16s ease both; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-item { transition: color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.uai-core-trial .wb-art-tabs--resources .wb-resource-item:hover { color: #0f766e; background: #f0faf4; transform: translateX(2px); }
@keyframes wb-resource-menu-in { from { opacity: 0; transform: translateY(-4px) scaleY(.98); } to { opacity: 1; transform: translateY(0) scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .uai-core-trial .wb-art-tabs--resources .wb-resource-group__toggle, .uai-core-trial .wb-art-tabs--resources .wb-resource-item { transition: none; } .uai-core-trial .wb-art-tabs--resources .wb-resource-group__items { animation: none; } }

/* Discourage casual copying without disabling notes, quizzes or activity fields. */
.uai-core-trial .uai-core-artifact { -webkit-user-select: none; user-select: none; }
.uai-core-trial .uai-core-artifact input, .uai-core-trial .uai-core-artifact textarea, .uai-core-trial .uai-core-artifact button, .uai-core-trial .uai-core-artifact audio, .uai-core-trial .uai-core-artifact video { -webkit-user-select: auto; user-select: auto; }
.uai-core-trial .uai-pdf-reader { min-height: 620px; overflow: hidden; border: 1px solid #dce9df; border-radius: 12px; background: #eef5f1; }
.uai-core-trial .uai-pdf-reader__toolbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border-bottom: 1px solid #d5e5db; background: rgba(247,252,249,.96); color: #315c50; }
.uai-core-trial .uai-pdf-reader__toolbar button { min-width: 32px; min-height: 30px; padding: 3px 9px; border: 1px solid #cfe2d5; border-radius: 7px; background: #fff; color: #0f766e; font-weight: 800; cursor: pointer; }
.uai-core-trial .uai-pdf-reader__toolbar button:hover { background: #eaf8ef; border-color: #68b697; }
.uai-core-trial .uai-pdf-reader__pages { display: grid; justify-items: center; gap: 14px; max-height: 670px; overflow: auto; padding: 18px; user-select: none; }
.uai-core-trial .uai-pdf-reader__page { display: block; max-width: 100%; height: auto; background: #fff; box-shadow: 0 5px 18px rgba(30,73,58,.16); }
.uai-core-trial .uai-pdf-reader__fallback { display: block; width: 100%; height: 620px; border: 0; }
@media (max-width: 760px) { .uai-core-trial .uai-pdf-reader { min-height: 420px; } .uai-core-trial .uai-pdf-reader__pages { max-height: 520px; padding: 10px; } .uai-core-trial .uai-pdf-reader__fallback { height: 420px; } }
@media print {
    .uai-core-trial { display: none !important; }
    body::after { content: 'Nội dung học liệu chỉ được phép xem trên nền tảng UngDungAI.'; display: block; padding: 48px; color: #173d37; font: 700 18px/1.5 Arial, sans-serif; }
}

/* ── Premium AI light hero refinement ── */
@media (min-width: 761px) {
    .uai-core-trial .wb-hero { background: linear-gradient(110deg, #fbfffd 0%, #f0fbf7 48%, #f3f2ff 100%); border: 1px solid rgba(113,173,157,.22); box-shadow: 0 14px 36px rgba(41,91,79,.10); }
    .uai-core-trial .wb-hero::before { background: radial-gradient(circle at 12% 0%, rgba(86,210,173,.18), transparent 34%), radial-gradient(circle at 86% 14%, rgba(145,139,255,.16), transparent 32%), linear-gradient(90deg, transparent 0 49%, rgba(15,118,110,.035) 50%, transparent 51%); background-size: auto, auto, 34px 34px; }
    .uai-core-trial .wb-hero::after { border-color: rgba(15,118,110,.12); box-shadow: 0 0 0 28px rgba(15,118,110,.035), 0 0 0 56px rgba(111,93,219,.025); }
    .uai-core-trial .wb-hero__eyebrow { color: #0f766e; }
    .uai-core-trial .wb-hero__eyebrow .pulse-dot { background: #14b8a6; }
    .uai-core-trial .wb-hero__h1 { color: #173d37; }
    .uai-core-trial .wb-hero__sub { color: #58736a; }
    .uai-core-trial .wb-hero__metric { background: rgba(255,255,255,.72); border-color: rgba(113,173,157,.24); box-shadow: 0 5px 16px rgba(41,91,79,.05); backdrop-filter: blur(12px); }
    .uai-core-trial .wb-hero__metric:hover { background: rgba(255,255,255,.94); }
    .uai-core-trial .wb-hero__metric-val { color: #173d37; }
    .uai-core-trial .wb-hero__metric-label { color: #6b827a; }
}
.uai-core-trial .wb-tl-lesson.is-current { position: relative; box-shadow: inset 3px 0 0 #0f766e; }
.uai-core-trial .wb-tl-lesson.is-route-focus { background: #dff4e8; box-shadow: inset 4px 0 0 #0f766e, 0 0 0 3px rgba(15,118,110,.16); }
.uai-core-trial .wb-tl-lesson.is-artifact-focus { background: linear-gradient(90deg, #e8f8ef, #f5fbf7); box-shadow: inset 4px 0 0 #55b68d; }
.uai-core-trial .wb-tl-lesson.is-current:focus-visible { outline: 3px solid rgba(15,118,110,.28); outline-offset: 2px; }
.uai-core-trial .wb-trial-conversion { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: 24px; align-items: center; margin-top: 28px; padding: 28px 30px; overflow: hidden; border: 1px solid rgba(113,173,157,.28); border-radius: 20px; background: linear-gradient(120deg, #effbf5 0%, #f9fbff 52%, #f2efff 100%); box-shadow: 0 14px 32px rgba(41,91,79,.09); }
.uai-core-trial .wb-trial-conversion__glow { position: absolute; inset: auto -70px -110px auto; width: 260px; height: 260px; border: 1px solid rgba(111,93,219,.16); border-radius: 50%; box-shadow: 0 0 0 28px rgba(111,93,219,.035), 0 0 0 56px rgba(111,93,219,.02); pointer-events: none; }
.uai-core-trial .wb-trial-conversion__content, .uai-core-trial .wb-trial-conversion__signal { position: relative; z-index: 1; }
.uai-core-trial .wb-trial-conversion__eyebrow { color: #0f766e; font-size: .62rem; font-weight: 900; letter-spacing: .12em; }
.uai-core-trial .wb-trial-conversion h2 { max-width: 680px; margin: 7px 0 8px; color: #173d37; font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.2; }
.uai-core-trial .wb-trial-conversion p { max-width: 700px; margin: 0; color: #58736a; font-size: .84rem; line-height: 1.55; }
.uai-core-trial .wb-trial-conversion__proof { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 13px; color: #356b59; font-size: .68rem; font-weight: 800; }
.uai-core-trial .wb-trial-conversion__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 17px; }
.uai-core-trial .wb-trial-conversion__actions a { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 14px; border-radius: 9px; font-size: .74rem; font-weight: 900; text-decoration: none; }
.uai-core-trial .wb-trial-conversion__primary { background: #0f766e; color: #fff; box-shadow: 0 7px 16px rgba(15,118,110,.2); }
.uai-core-trial .wb-trial-conversion__primary:hover { background: #075e58; color: #fff; }
.uai-core-trial .wb-trial-conversion__secondary { border: 1px solid #b8d9ca; background: rgba(255,255,255,.64); color: #0f766e; }
.uai-core-trial .wb-trial-conversion__secondary:hover { background: #fff; color: #075e58; }
.uai-core-trial .wb-trial-conversion__signal { display: grid; place-items: center; gap: 3px; justify-self: end; width: 120px; height: 120px; border: 1px solid rgba(15,118,110,.16); border-radius: 50%; background: rgba(255,255,255,.58); color: #0f766e; box-shadow: inset 0 0 0 9px rgba(255,255,255,.32); }
.uai-core-trial .wb-trial-conversion__signal span, .uai-core-trial .wb-trial-conversion__signal small { font-size: .56rem; font-weight: 900; letter-spacing: .12em; }
.uai-core-trial .wb-trial-conversion__signal strong { font-size: 1.5rem; line-height: 1; }
.wb-trial-conversion-shell { max-width: 1200px; margin: 0 auto; padding: 0 24px 36px; }
@media (max-width: 760px) { .uai-core-trial .wb-trial-conversion { grid-template-columns: 1fr; gap: 14px; margin-top: 20px; padding: 22px 18px; border-radius: 16px; } .uai-core-trial .wb-trial-conversion__signal { display: none; } .uai-core-trial .wb-trial-conversion h2 { font-size: 1.25rem; } .uai-core-trial .wb-trial-conversion__actions { flex-direction: column; } .uai-core-trial .wb-trial-conversion__actions a { justify-content: center; width: 100%; box-sizing: border-box; } }

/* ── Module drawers: show/hide child lessons without losing the timeline ── */
@media (min-width: 761px) {
    .uai-core-trial .wb-tl-module-heading { position: relative; padding-right: 34px; }
    .uai-core-trial .wb-module-toggle { position: absolute; top: 3px; right: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 70px; height: 28px; padding: 0 6px; border: 1px solid #d7e7df; border-radius: 8px; background: #fff; color: #0f766e; cursor: pointer; }
    .uai-core-trial .wb-module-toggle:hover, .uai-core-trial .wb-module-toggle:focus-visible { background: #edf8f3; border-color: #0f766e; outline: 2px solid rgba(15,118,110,.18); outline-offset: 2px; }
    .uai-core-trial .wb-module-toggle span { display: block; font-size: 17px; line-height: 1; transition: transform .2s ease; }
    .uai-core-trial .wb-module-toggle em { font-style: normal; font-size: 10px; font-weight: 800; white-space: nowrap; }
    .uai-core-trial .wb-module-toggle[aria-expanded="false"] span { transform: rotate(-90deg); }
    .uai-core-trial .wb-module-content { overflow: hidden; }
    .uai-core-trial .wb-module-content[hidden] { display: none; }
    .uai-core-trial .wb-sidebar.is-collapsed .wb-module-toggle { display: none; }
}
@media (max-width: 760px) {
    .uai-core-trial .wb-tl-module-heading { position: relative; padding-right: 34px; }
    .uai-core-trial .wb-module-toggle { position: absolute; top: 0; right: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 70px; height: 28px; padding: 0 6px; border: 1px solid #d7e7df; border-radius: 8px; background: #fff; color: #0f766e; }
    .uai-core-trial .wb-module-toggle span { font-size: 17px; line-height: 1; }
    .uai-core-trial .wb-module-toggle em { font-style: normal; font-size: 10px; font-weight: 800; }
    .uai-core-trial .wb-module-toggle[aria-expanded="false"] span { transform: rotate(-90deg); }
    .uai-core-trial .wb-sidebar__rail { display: none; }
}