/* ============================================================
   DM Polish — micro-interactions, focus, loading, empty states
   ============================================================ */

/* ----------  GLOBAL FOCUS RINGS  ---------- */
:root {
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--gold) 38%, transparent);
}
*:focus { outline: none; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--gold);
}

/* ----------  BUTTONS  ---------- */
.btn, button.btn, .tbtn, .admin-tab, .admin-nav a, .ab-bell-trigger, .lb-bell-trigger {
    transition: background .16s ease, color .16s ease, border-color .16s ease,
                box-shadow .18s ease, transform .12s ease;
    will-change: transform;
}
.btn:active:not(:disabled), .tbtn:active:not(:disabled) {
    transform: translateY(1px);
}
.btn-primary:hover:not(:disabled) {
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--navy) 65%, transparent);
}
.btn:disabled, .tbtn:disabled, button[disabled] {
    opacity: 0.55; cursor: not-allowed; transform: none !important;
}

/* Inline wire:loading button spinner */
button [wire\:loading], a [wire\:loading], .wl-spin {
    display: none !important;
}
button.wl-busy {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
button.wl-busy::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    color: var(--paper); opacity: 0.85;
    animation: dm-spin .7s linear infinite;
}
.btn-ghost.wl-busy::after, .tbtn.wl-busy::after { color: var(--navy-ink); }

@keyframes dm-spin { to { transform: rotate(360deg); } }

/* ----------  CARDS  ---------- */
.admin-card, .kpi {
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.kpi:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -22px rgba(11,22,49,.32);
    border-color: color-mix(in srgb, var(--navy) 10%, var(--line));
}

/* ----------  TABLES  ---------- */
.admin-table tbody tr, .ab-tbl tbody tr {
    transition: background .12s ease;
}
.admin-table tbody tr:hover, .ab-tbl tbody tr:hover {
    background: color-mix(in srgb, var(--cream-deep) 50%, var(--paper));
}
.admin-table td, .ab-tbl td { transition: color .14s ease; }

/* ----------  TABS  ---------- */
.admin-tab {
    position: relative;
}
.admin-tab.active::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px;
    height: 2px; background: var(--gold); border-radius: 2px;
    animation: dm-tab-in .22s ease both;
}
@keyframes dm-tab-in { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* ----------  FORM FIELDS  ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
select, textarea, .field input, .field select, .field textarea {
    transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
input:not([type=checkbox]):not([type=radio]):focus-visible,
select:focus-visible, textarea:focus-visible {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
.field.has-error input, .field.has-error textarea, .field.has-error select {
    border-color: var(--flag-red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--flag-red) 18%, transparent);
}
.field-error {
    color: var(--flag-red); font-size: 12.5px; margin-top: 4px;
    display: flex; align-items: center; gap: 5px;
}

/* Required marker */
.field-required::after {
    content: "*"; color: var(--flag-red); margin-left: 3px;
}

/* ----------  TOAST / ALERT MOTION  ---------- */
.toast-stack .dma-toast {
    animation: dm-toast-in .26s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes dm-toast-in {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.alert-stack .dm-alert {
    animation: dm-alert-in .24s cubic-bezier(.2,.9,.3,1.05) both;
}
@keyframes dm-alert-in {
    from { opacity: 0; transform: translateY(-6px); max-height: 0; }
    to   { opacity: 1; transform: translateY(0); max-height: 200px; }
}

/* ----------  MODAL POLISH  ---------- */
.dm-confirm-root.show .dm-confirm-card {
    animation: dm-modal-in .28s cubic-bezier(.2,.9,.3,1.15) both;
}
@keyframes dm-modal-in {
    from { opacity: 0; transform: translateY(14px) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Prototype academy modal (dma-modal-root / dma-overlay / dma-modal) */
.dma-modal-root { z-index: 700; animation: dm-fade-in .2s ease both; }
.dma-overlay {
    background: rgba(8, 18, 40, .58) !important;
    backdrop-filter: blur(8px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
    animation: dm-backdrop-in .22s ease both;
}
@keyframes dm-backdrop-in {
    from { opacity: 0; backdrop-filter: blur(0); }
    to   { opacity: 1; }
}
.dma-modal {
    box-shadow:
        0 28px 80px -32px rgba(8, 18, 40, .55),
        0 12px 30px -16px rgba(8, 18, 40, .35),
        0 0 0 1px rgba(255, 255, 255, .6) inset !important;
    animation: dm-modal-in .3s cubic-bezier(.2,.9,.3,1.15) both;
}
.dma-x {
    transition: background .14s ease, color .14s ease, transform .14s ease;
}
.dma-x:hover { transform: rotate(90deg); }

/* ----------  REVEAL ON SCROLL  ---------- */
.reveal { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease; }
.reveal[data-pending]:not([data-shown]) {
    opacity: 0; transform: translateY(14px);
}

/* ----------  KPI NUMBER PULSE ON LOAD  ---------- */
.kpi b {
    animation: dm-kpi-rise .42s ease both;
}
@keyframes dm-kpi-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----------  SKELETON LOADER  ---------- */
.dm-skeleton {
    background: linear-gradient(90deg,
        var(--cream-deep) 0%,
        color-mix(in srgb, var(--cream-deep) 55%, var(--paper)) 50%,
        var(--cream-deep) 100%);
    background-size: 200% 100%;
    animation: dm-skeleton-pulse 1.4s ease-in-out infinite;
    border-radius: 8px; color: transparent !important;
}
@keyframes dm-skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.dm-skeleton-row { height: 14px; margin: 6px 0; }

/* Use [wire:loading] anywhere to show skeleton substitute */
[wire\:loading].as-skel { display: block; }
[wire\:loading.delay].as-skel { display: block; }

/* ----------  EMPTY STATE  ---------- */
.dm-empty {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 38px 22px 32px;
    border: 1px dashed color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: 14px; background: color-mix(in srgb, var(--cream-deep) 35%, var(--paper));
    color: var(--ink-soft);
}
.dm-empty-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: color-mix(in srgb, var(--gold-soft) 60%, var(--paper));
    color: var(--gold-600, var(--gold)); display: grid; place-items: center;
    margin-bottom: 14px;
}
.dm-empty h3 {
    margin: 0 0 6px; font-family: var(--serif); font-size: 17px;
    color: var(--navy-ink); font-weight: 700;
}
.dm-empty p {
    margin: 0 0 16px; max-width: 380px; line-height: 1.5; font-size: 13.5px;
}
.dm-empty .btn { margin-top: 4px; }

/* ----------  PAGE TRANSITION SOFT-IN  ---------- */
/* IMPORTANT: do NOT animate `transform` on ancestors of `position: fixed`
   elements like .dma-modal-root — it creates a containing block and the
   backdrop will only cover the parent instead of the full viewport. */
main, .admin-content > * {
    animation: dm-fade-in .26s ease both;
}
@keyframes dm-fade-in {
    from { opacity: 0.4; }
    to   { opacity: 1; }
}

/* ----------  CHIPS / PILLS  ---------- */
.admin-pill, .ab-chip {
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}

/* ----------  NAV LINKS  ---------- */
.admin-nav a {
    position: relative;
}
.admin-nav a:not(.active):hover {
    background: color-mix(in srgb, var(--navy) 70%, transparent);
    color: #fff;
}

/* news-card hero image */
.nc-media.has-image { padding: 0; overflow: hidden; }
.nc-media.has-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ----------  LEARNER ACCOUNT PAGE  ---------- */
.acct-back { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--navy-600); }
.acct-back:hover { color: var(--navy-ink); }
.acct-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.04)); padding: clamp(20px,3vw,28px); margin-top: 18px; }
.acct-identity { display: flex; align-items: center; gap: 16px; }
.acct-avatar { position: relative; overflow: hidden; width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--navy-ink); background: linear-gradient(135deg, var(--gold), #8a6a1a); }
.acct-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acct-identity b { display: block; font-family: var(--serif); font-size: 18px; color: var(--navy-ink); }
.acct-identity span { display: block; font-size: 13.5px; color: var(--ink-soft); }
.acct-gravatar { display: inline-block; margin-top: 5px; font-size: 12.5px; color: var(--navy-600); font-weight: 600; }
.acct-h { font-family: var(--serif); font-size: 19px; color: var(--navy-ink); margin: 0 0 16px; }
.acct-form { display: flex; flex-direction: column; gap: 14px; }
.acct-form .af-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .acct-form .af-row { grid-template-columns: 1fr; } }
.acct-actions { margin-top: 18px; display: flex; justify-content: flex-end; }
.acct-err { display: block; color: var(--flag-red); font-size: 12.5px; margin-top: -8px; }

/* ----------  INSTAGRAM FEED (home)  ---------- */
/* Brand gradient used for the IG accents. */
:root { --ig-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }

.ig-head { align-items: center; gap: 24px; }
.ig-head-left { display: flex; align-items: flex-start; gap: 16px; }
.ig-badge {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px;
    display: grid; place-items: center; color: #fff; background: var(--ig-gradient);
    box-shadow: 0 10px 22px -10px rgba(220,39,67,.6); margin-top: 4px;
}

/* Follow card (replaces the plain button) */
.ig-follow-card {
    display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0;
    padding: 10px 18px 10px 10px; border-radius: 999px;
    background: var(--paper); border: 1px solid var(--line);
    box-shadow: 0 8px 22px -16px rgba(11,22,49,.4);
    transition: transform .14s ease, box-shadow .18s ease, border-color .14s ease;
}
.ig-follow-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(11,22,49,.45); border-color: transparent; }
.ig-follow-ring { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--ig-gradient); flex-shrink: 0; }
.ig-follow-handle { font-family: var(--serif); font-size: 16px; color: var(--navy-ink); font-weight: 600; }
.ig-follow-cta { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--navy-ink); padding: 5px 12px; border-radius: 999px; }

/* Catalog search/filter loading affordance */
.cat-search-spin { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--gold); animation: dm-spin .7s linear infinite; }
.course-grid.cat-busy { opacity: .45; transition: opacity .2s ease; pointer-events: none; }

/* ── Sticky social rail (public pages) ──────────────────────────────── */
.social-rail {
    position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 90;
    display: flex; flex-direction: column; gap: 9px; padding: 11px 9px;
    background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(9px);
    border: 1px solid var(--line); border-left: 0; border-radius: 0 16px 16px 0;
    box-shadow: 10px 0 30px -20px rgba(11,22,49,.45);
    animation: social-rail-in .55s cubic-bezier(.2,.8,.25,1) both .45s;
}
@keyframes social-rail-in { from { opacity: 0; transform: translate(-26px,-50%); } to { opacity: 1; transform: translate(0,-50%); } }
.social-rail-btn {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    color: var(--navy-ink); background: var(--cream-deep); border: 1px solid var(--line);
    transition: transform .26s cubic-bezier(.2,.8,.25,1), background .26s ease, color .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.social-rail-btn:hover, .social-rail-btn:focus-visible {
    transform: translateX(3px) scale(1.09); color: #fff; border-color: transparent;
    box-shadow: 0 9px 20px -9px rgba(0,0,0,.45); outline: none;
}
.sr-instagram:hover, .sr-instagram:focus-visible { background: linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); }
.sr-facebook:hover,  .sr-facebook:focus-visible  { background: #1877F2; }
.sr-youtube:hover,   .sr-youtube:focus-visible   { background: #FF0000; }
.sr-tiktok:hover,    .sr-tiktok:focus-visible    { background: #111; }
.sr-x:hover,         .sr-x:focus-visible         { background: #111; }
.sr-whatsapp:hover,  .sr-whatsapp:focus-visible  { background: #25D366; }
@media (max-width: 900px) { .social-rail { display: none; } }
@media (prefers-reduced-motion: reduce) { .social-rail { animation: none; } }

/* Prominent master on/off toggle (admin: IG feed + social rail) */
.ig-master-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 13px 16px; border-radius: 12px; margin-bottom: 16px;
    border: 1.5px solid var(--line); transition: background .2s ease, border-color .2s ease;
}
.ig-master-toggle.is-on { background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.ig-master-toggle.is-off { background: color-mix(in srgb, var(--ink-faint) 7%, var(--paper)); }
.ig-master-toggle .lr-info b { display: block; font-family: var(--serif); font-size: 15px; color: var(--navy-ink); margin-bottom: 1px; }
.ig-master-toggle .lr-info span { font-size: 12.5px; color: var(--ink-soft); }

/* ══ Pages CMS — designed editor ═════════════════════════════════════ */
.cms-layout { display: grid; grid-template-columns: 250px 1fr; gap: 20px; align-items: start; }
@media (max-width: 1000px) { .cms-layout { grid-template-columns: 1fr; } }

/* Navlist */
.cms-nav { position: sticky; top: 88px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px; box-shadow: 0 1px 2px rgba(20,48,79,.03); max-height: calc(100vh - 110px); overflow-y: auto; }
.cms-nav-page { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--ink-faint); padding: 14px 10px 6px; }
.cms-nav-page:first-child { padding-top: 4px; }
.cms-nav-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: transparent; border: 0; border-left: 2.5px solid transparent; padding: 8px 10px; border-radius: 7px; color: var(--ink-soft); font-weight: 500; font-size: 13.5px; cursor: pointer; transition: background .14s, color .14s; }
.cms-nav-item:hover { background: var(--cream-deep); color: var(--navy-ink); }
.cms-nav-item.is-active { background: var(--cream-deep); color: var(--navy-ink); font-weight: 600; border-left-color: var(--gold); border-radius: 0 7px 7px 0; }
.cms-nav-ic { flex-shrink: 0; opacity: .55; }
.cms-nav-item.is-active .cms-nav-ic { opacity: 1; color: #8a5a00; }
.cms-nav-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Editor shell */
.cms-editor { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; box-shadow: 0 1px 2px rgba(20,48,79,.03); }
.cms-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.cms-eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #8a5a00; }
.cms-editor-title { font-family: var(--serif); font-size: 23px; color: var(--navy-ink); margin: 5px 0 0; }
.cms-editor-desc { color: var(--ink-soft); font-size: 13.5px; margin: 7px 0 0; max-width: 64ch; line-height: 1.5; }
.cms-view-link { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--navy-600); border: 1px solid var(--line); padding: 8px 13px; border-radius: 9px; transition: background .15s, border-color .15s; }
.cms-view-link:hover { background: var(--cream-deep); border-color: var(--navy-600); }

/* Toolbar (segmented language switch + search) */
.cms-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.cms-langs { display: inline-flex; background: var(--cream-deep); border-radius: 9px; padding: 3px; gap: 2px; }
.cms-lang { background: transparent; border: 0; padding: 6px 14px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: background .14s, color .14s, box-shadow .14s; }
.cms-lang.is-active { background: var(--paper); color: var(--navy-ink); box-shadow: 0 1px 3px rgba(20,48,79,.12); }
.cms-toolbar .admin-search { margin-left: auto; }

/* Fixed-text field grid */
.cms-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .cms-fields { grid-template-columns: 1fr; } }
.cms-field { padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--cream-deep) 16%, var(--paper)); }
.cms-field.is-wide { grid-column: 1 / -1; }
.cms-field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--navy-ink); margin-bottom: 7px; }
.cms-field-ref { background: var(--cream); border-radius: 7px; padding: 6px 9px; margin-bottom: 8px; }
.cms-field-ref > span { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--ink-faint); }
.cms-field-ref > div { font-size: 12px; color: var(--ink-soft); margin-top: 2px; line-height: 1.4; }

/* Shared input */
.cms-input { width: 100%; font-family: var(--sans); font-size: 14px; color: var(--ink); padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 9px; background: var(--white); transition: border-color .15s, box-shadow .15s; }
.cms-input:focus { outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 12%, transparent); }
textarea.cms-input { resize: vertical; line-height: 1.5; }

/* Repeater item cards */
.cms-rep-item { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: color-mix(in srgb, var(--cream-deep) 18%, var(--paper)); display: flex; flex-direction: column; gap: 12px; }
.cms-rep-head { display: flex; align-items: center; gap: 10px; }
.cms-rep-head b { font-family: var(--serif); font-size: 14.5px; color: var(--navy-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-rep-num { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; font-size: 12px; font-weight: 700; color: #fff; background: var(--navy-ink); border-radius: 7px; flex-shrink: 0; }
.cms-rep-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.cms-rep-row > .cms-fld { flex: 1 1 200px; min-width: 0; }
.cms-fld { display: block; }
.cms-fld > span { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
.cms-rep-iconpreview { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
.cms-rep-iconpreview svg { width: 22px; height: 22px; }
.cms-rep-bullets { border-top: 1px dashed var(--line); padding-top: 12px; }
.cms-rep-bullets-head { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: var(--ink-faint); margin-bottom: 8px; }

/* Buttons */
.cms-icon-btn { width: 30px; height: 30px; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; color: var(--ink-soft); cursor: pointer; font-size: 14px; line-height: 1; transition: background .14s, color .14s, border-color .14s; }
.cms-icon-btn:hover:not(:disabled) { background: var(--cream-deep); color: var(--navy-ink); }
.cms-icon-btn.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--flag-red) 10%, var(--paper)); color: var(--flag-red); border-color: color-mix(in srgb, var(--flag-red) 35%, transparent); }
.cms-icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.cms-add { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; border: 1.5px dashed var(--line); border-radius: 11px; background: transparent; color: var(--navy-600); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s; }
.cms-add:hover { background: var(--cream-deep); border-color: var(--navy-600); }
.cms-add-sm { background: none; border: 0; color: var(--navy-600); font-weight: 600; font-size: 13px; cursor: pointer; padding: 6px 0; margin-top: 4px; }
.cms-add-sm:hover { text-decoration: underline; }

.ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.ig-tile {
    position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 16px;
    overflow: hidden; background: var(--cream-deep); isolation: isolate;
    box-shadow: 0 10px 26px -20px rgba(11,22,49,.4);
    animation: ig-tile-in .6s cubic-bezier(.2,.8,.25,1) both; animation-delay: var(--d, 0ms);
    transition: transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease;
}
.ig-tile:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -22px rgba(11,22,49,.5); }
@keyframes ig-tile-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.ig-tile img, .ig-tile-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.8,.25,1); }
.ig-tile:hover img { transform: scale(1.07); }
.ig-tile-video { z-index: 1; opacity: 0; transition: opacity .3s ease; }
.ig-tile.has-video:hover .ig-tile-video { opacity: 1; }
.ig-tile-ph { position: absolute; inset: 0; }
.ig-ph-0 { background: linear-gradient(135deg, #1f4ba0, var(--navy-ink)); }
.ig-ph-1 { background: linear-gradient(135deg, var(--gold), #6b4d09); }
.ig-ph-2 { background: linear-gradient(135deg, #1f5a43, var(--navy-ink)); }
/* Image-less tiles still read as Instagram posts: soft sheen + faint glyph watermark
   that fades/scales away on hover so the caption overlay can take over. */
.ig-tile-ph::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(130% 100% at 25% 15%, rgba(255,255,255,.16), transparent 55%),
        radial-gradient(90% 90% at 85% 95%, rgba(0,0,0,.22), transparent 70%);
}
.ig-tile-ph::after {
    content: ""; position: absolute; inset: 0;
    background: center / 40px 40px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.6' cy='6.4' r='1.1' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E");
    opacity: .5; transition: opacity .3s ease, transform .45s cubic-bezier(.2,.8,.25,1);
}
.ig-tile:hover .ig-tile-ph::after { opacity: 0; transform: scale(1.3); }

/* Reel/video play chip (top-right) */
.ig-tile-play {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; background: rgba(8,18,40,.5); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.25); transition: opacity .25s ease;
}
.ig-tile.has-video:hover .ig-tile-play { opacity: 0; }

.ig-tile-overlay {
    position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end;
    gap: 8px; padding: 14px; color: #fff;
    background: linear-gradient(180deg, rgba(8,18,40,0) 40%, rgba(8,18,40,.78) 100%);
    opacity: 0; transition: opacity .25s ease;
}
.ig-tile:hover .ig-tile-overlay, .ig-tile:focus-visible .ig-tile-overlay { opacity: 1; }
.ig-tile-mark { align-self: flex-start; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.ig-tile-cap { font-size: 12.5px; line-height: 1.4; text-shadow: 0 1px 8px rgba(0,0,0,.6); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } .ig-head { align-items: flex-start; flex-direction: column; } }
@media (max-width: 520px) { .ig-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* ----------  ACADEMY HERO WITH PORTRAIT  ---------- */
/* Tighter top padding, zero bottom — the portrait sits flush at the fold so
   there's no dead navy space under it. */
.aca-hero { padding-block: clamp(46px, 6vw, 78px) 0; }
.aca-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    gap: clamp(24px, 4vw, 52px);
    align-items: end;
}
.aca-hero-copy {
    /* Lift the (shorter) copy column off the very bottom so it reads as
       vertically balanced against the full-height portrait. */
    padding-bottom: clamp(28px, 4vw, 52px);
    animation: aca-copy-in 1.25s cubic-bezier(.16, 1, .3, 1) both;
}
/* Tighten the copy's internal rhythm so the hero band stays compact. */
.aca-hero-copy .lead { margin-top: 18px !important; }
.aca-hero-copy .aca-pills { margin-top: 20px; }
.aca-hero-copy .aca-stats { margin-top: 26px; gap: 30px; }
.aca-hero-copy .aca-stat b { font-size: 30px; }
@keyframes aca-copy-in {
    from { opacity: 0; transform: translateX(-22px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Frameless floating portrait — sits directly on the dark hero background,
   flush against the bottom fold. */
.aca-hero-portrait {
    position: relative;
    /* Fill the full height of the copy column so the figure is large and the
       two sides read as balanced — no empty navy above the portrait. */
    align-self: stretch;
    min-height: 480px;
    max-width: 540px;
    justify-self: end;
    width: 100%;
    margin-bottom: -2px; /* hide the 1px seam where the figure meets the fold */
    isolation: isolate;
    animation: aca-portrait-slide-in 1.8s cubic-bezier(.16, 1, .3, 1) .2s both;
    will-change: transform, opacity, filter;
}
@keyframes aca-portrait-slide-in {
    from { opacity: 0; transform: translateX(140px) scale(.95); filter: blur(12px); }
    to   { opacity: 1; transform: translateX(0) scale(1);     filter: blur(0); }
}

.aca-portrait-glow {
    position: absolute; inset: 8% -10% 6% 0;
    background:
        radial-gradient(closest-side at 55% 38%, color-mix(in srgb, var(--gold) 48%, transparent), transparent 70%),
        radial-gradient(closest-side at 45% 78%, color-mix(in srgb, #1f4ba0 60%, transparent), transparent 78%);
    filter: blur(56px);
    z-index: -1;
    animation: aca-glow-pulse 7s ease-in-out infinite;
}
@keyframes aca-glow-pulse {
    0%, 100% { transform: scale(1);    opacity: .85; }
    50%      { transform: scale(1.08); opacity: 1; }
}

.aca-portrait-img {
    position: absolute; inset: 0;
    display: block;
    width: 100%; height: 100%;
    /* Source is 1:1 with transparent padding; cover + a tall container crops
       the empty top/bottom and lets the figure fill the frame. */
    object-fit: cover;
    object-position: center 16%;
    filter:
        drop-shadow(0 30px 40px rgba(0, 0, 0, .55))
        drop-shadow(0 10px 18px rgba(0, 0, 0, .32));
    transition: transform .8s cubic-bezier(.2, .8, .25, 1), filter .6s ease;
}
.aca-hero-portrait:hover .aca-portrait-img {
    transform: translateY(-5px) scale(1.015);
    filter:
        drop-shadow(0 38px 48px rgba(0, 0, 0, .6))
        drop-shadow(0 12px 22px rgba(0, 0, 0, .38));
}

/* Floating glass meta panel pinned at the lower-left of the portrait. */
.aca-portrait-meta {
    position: absolute;
    left: -7%; bottom: 16%;
    display: inline-flex; flex-direction: column; gap: 6px;
    padding: 13px 18px 15px;
    background: rgba(8, 18, 40, .55);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    color: #fff;
    box-shadow:
        0 22px 50px -22px rgba(0, 0, 0, .65),
        0 0 0 1px rgba(255, 255, 255, .04) inset;
    animation: aca-meta-in 1.3s cubic-bezier(.16, 1, .3, 1) .95s both;
    max-width: 260px;
}
@keyframes aca-meta-in {
    from { opacity: 0; transform: translateX(-34px) translateY(8px); }
    to   { opacity: 1; transform: translateX(0) translateY(0); }
}
.aca-portrait-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px 5px 9px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase;
    align-self: flex-start;
}
.aca-portrait-badge svg { color: var(--gold); }
.aca-portrait-name {
    display: block; margin-top: 6px;
    font-family: var(--serif); font-size: 23px; line-height: 1.1;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .55);
}
.aca-portrait-role {
    display: block; font-size: 13px;
    color: rgba(255, 255, 255, .8);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}

@media (max-width: 1024px) {
    .aca-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
    .aca-hero-portrait { max-width: 520px; }
}
@media (max-width: 880px) {
    .aca-hero-grid { grid-template-columns: 1fr; }
    .aca-hero-portrait { max-width: 460px; justify-self: center; margin-top: 12px; aspect-ratio: 1 / 1; }
    .aca-portrait-meta { left: 0; bottom: 0; }
    .aca-portrait-name { font-size: 20px; }
}

/* ----------  COURSE LANGUAGE PILLS  ---------- */
.dm-lang-pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 14px 9px 11px;
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease, transform .12s ease;
    font-family: inherit;
}
.dm-lang-pill:hover {
    border-color: color-mix(in srgb, var(--navy) 40%, var(--line));
    background: color-mix(in srgb, var(--cream-deep) 35%, var(--paper));
    transform: translateY(-1px);
}
.dm-lang-pill.is-on {
    border-color: var(--navy-ink);
    background: var(--navy-ink);
    color: #fff;
    box-shadow: 0 8px 18px -14px rgba(11, 22, 49, .55);
}
.dm-lang-code {
    display: inline-grid; place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cream-deep) 60%, var(--paper));
    color: var(--navy-ink);
    font-family: var(--serif); font-weight: 700; font-size: 12px;
    letter-spacing: .03em;
}
.dm-lang-pill.is-on .dm-lang-code { background: var(--gold); color: var(--navy-ink); }
.dm-lang-name { font-size: 14px; font-weight: 600; }
.dm-lang-check {
    width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--ink-faint) 55%, transparent);
    display: grid; place-items: center; color: transparent;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.dm-lang-pill.is-on .dm-lang-check {
    background: var(--green); border-color: var(--green); color: #fff;
}
.dm-lang-pill:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent);
}

/* ----------  INSTRUCTOR PICKER CARDS  ---------- */
.dm-instr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}
.dm-instr-card {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr 22px;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease,
                box-shadow .15s ease, transform .12s ease;
    font-family: inherit;
}
.dm-instr-card:hover {
    border-color: color-mix(in srgb, var(--navy) 40%, var(--line));
    background: color-mix(in srgb, var(--cream-deep) 30%, var(--paper));
    transform: translateY(-1px);
}
.dm-instr-card:active { transform: translateY(0); }
.dm-instr-card.is-on {
    border-color: var(--navy-ink);
    background: color-mix(in srgb, var(--navy) 4%, var(--paper));
    box-shadow:
        0 1px 0 var(--navy-ink),
        0 10px 22px -16px rgba(11, 22, 49, .4);
}
.dm-instr-card.is-on:hover { background: color-mix(in srgb, var(--navy) 7%, var(--paper)); }

.dm-instr-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-soft), color-mix(in srgb, var(--gold) 22%, var(--paper)));
    color: var(--navy-ink);
    display: grid; place-items: center;
    overflow: hidden; flex-shrink: 0;
    font-family: var(--serif); font-size: 14px; font-weight: 700;
    border: 1.5px solid color-mix(in srgb, var(--gold) 20%, transparent);
}
.dm-instr-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-instr-card.is-on .dm-instr-avatar {
    background: var(--navy-ink); color: var(--gold);
    border-color: var(--gold);
}

.dm-instr-body { min-width: 0; }
.dm-instr-body b {
    display: block; font-size: 14px; line-height: 1.25;
    color: var(--navy-ink); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-instr-body small {
    display: block; font-size: 12px; color: var(--ink-faint);
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.dm-instr-check {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1.6px solid color-mix(in srgb, var(--ink-faint) 60%, transparent);
    background: var(--paper);
    color: transparent;
    display: grid; place-items: center;
    transition: background .14s ease, color .14s ease, border-color .14s ease, transform .15s ease;
    flex-shrink: 0;
}
.dm-instr-card.is-on .dm-instr-check {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
    transform: scale(1.06);
}
.dm-instr-card:focus-visible {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent);
}

/* ----------  QUIZ EDITOR (lesson modal)  ---------- */
.qz-editor { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.qz-editor-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.qz-editor-head > span:first-child { font-weight: 700; font-size: 13.5px; color: var(--navy-ink); }
.qz-editor-head i { font-style: normal; color: var(--ink-faint); font-weight: 600; }
.qz-hint { font-size: 12px; color: var(--ink-faint); }
.qz-q { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: color-mix(in srgb, var(--cream-deep) 30%, var(--paper)); }
.qz-q-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.qz-q-num { width: 24px; height: 24px; border-radius: 7px; background: var(--navy-ink); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.qz-q-label { font-weight: 600; font-size: 13.5px; color: var(--navy-ink); flex: 1; }
.qz-x, .qz-opt-x { background: none; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-faint); cursor: pointer; display: grid; place-items: center; transition: background .14s, color .14s, border-color .14s; }
.qz-x { width: 28px; height: 28px; }
.qz-opt-x { width: 26px; height: 26px; flex-shrink: 0; }
.qz-x:hover, .qz-opt-x:hover { background: color-mix(in srgb, var(--flag-red) 10%, var(--paper)); color: var(--flag-red); border-color: color-mix(in srgb, var(--flag-red) 35%, transparent); }
.qz-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.qz-opt { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); transition: border-color .14s, background .14s; }
.qz-opt.is-correct { border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green-soft) 50%, var(--paper)); }
.qz-radio { position: relative; flex-shrink: 0; width: 20px; height: 20px; cursor: pointer; }
.qz-radio input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.qz-radio-dot { display: block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ink-faint); transition: border-color .14s, background .14s; }
.qz-opt.is-correct .qz-radio-dot { border-color: var(--green); background: radial-gradient(circle at center, var(--green) 0 5px, transparent 6px); }
.qz-opt-fields { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; }
.qz-opt-fields:has(input:only-child) { grid-template-columns: 1fr; }
.qz-opt-fields input { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-size: 13px; color: var(--ink); font-family: inherit; }
.qz-opt.is-correct .qz-opt-fields input { background: transparent; }

/* ----------  REPEATABLE ROW LIST (learn / requirements)  ---------- */
.dm-rowlist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.dm-row {
    display: grid;
    grid-template-columns: 22px 1fr 32px;
    align-items: center;
    gap: 10px;
}
.dm-row-check {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--green-soft); color: var(--green-600, var(--green));
    display: grid; place-items: center; flex-shrink: 0;
}
.dm-row-dot { background: transparent; position: relative; }
.dm-row-dot::after {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold);
}
.dm-row-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; }
.dm-row-fields:has(input:only-child) { grid-template-columns: 1fr; }
.dm-row-fields input {
    width: 100%; padding: 9px 12px;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--paper); font-size: 13.5px; color: var(--ink);
    font-family: inherit;
}
.dm-row-x {
    width: 32px; height: 32px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--paper);
    color: var(--ink-faint); display: grid; place-items: center; cursor: pointer;
    transition: background .14s, color .14s, border-color .14s;
    flex-shrink: 0;
}
.dm-row-x:hover { background: color-mix(in srgb, var(--flag-red) 10%, var(--paper)); color: var(--flag-red); border-color: color-mix(in srgb, var(--flag-red) 35%, transparent); }

/* ----------  LEARNERS: CLICKABLE KPI FILTERS  ---------- */
.lr-kpi {
    font-family: inherit; text-align: left; cursor: pointer;
    border: 1px solid var(--line);
    position: relative;
    transition: border-color .15s ease, box-shadow .18s ease, transform .12s ease;
}
.lr-kpi:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -22px rgba(11,22,49,.32); }
.lr-kpi.is-active { border-color: var(--navy-ink); box-shadow: 0 0 0 1px var(--navy-ink), 0 12px 26px -20px rgba(11,22,49,.4); }
.lr-kpi.is-active::after {
    content: ""; position: absolute; top: 12px; right: 12px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
}
.lr-kpi-tag {
    display: inline-block; margin-left: 6px; font-style: normal;
    font-size: 11px; font-weight: 700; color: var(--green-600, var(--green));
    background: var(--green-soft); padding: 1px 7px; border-radius: 999px;
}

/* ----------  LEARNERS: TABLE CELLS  ---------- */
.lr-cell { display: flex; align-items: center; gap: 12px; }
.lr-avatar {
    position: relative; overflow: hidden;
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--serif); font-weight: 700; font-size: 13.5px;
    color: var(--navy-ink);
    background: linear-gradient(135deg, var(--gold-soft), color-mix(in srgb, var(--gold) 30%, var(--paper)));
    border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
}
.lr-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lr-avatar.is-suspended {
    background: var(--cream-deep); color: var(--ink-faint);
    border-color: var(--line);
}
.lr-id { min-width: 0; }
.lr-id b { display: block; font-size: 14px; color: var(--navy-ink); line-height: 1.25; }
.lr-id span { display: block; font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }

.lr-status {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 600; color: #176a3a;
    background: var(--green-soft); padding: 4px 11px 4px 9px; border-radius: 999px;
}
.lr-status .lr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.lr-status.is-suspended { color: #8a5a00; background: var(--gold-soft); }
.lr-status.is-suspended .lr-dot { background: var(--gold); }

/* ----------  PAGINATOR (branded)  ---------- */
.dm-pager { display: inline-flex; align-items: center; gap: 4px; }
.dm-pager-btn {
    min-width: 32px; height: 32px; padding: 0 9px;
    display: inline-grid; place-items: center;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--paper); color: var(--ink-soft);
    font-family: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
    cursor: pointer; text-decoration: none;
    transition: background .14s ease, border-color .14s ease, color .14s ease, transform .1s ease;
}
a.dm-pager-btn { text-decoration: none; }
.dm-pager-btn:hover:not(.is-disabled):not(.is-current) {
    background: var(--cream-deep); border-color: color-mix(in srgb, var(--navy) 35%, var(--line)); color: var(--navy-ink);
}
.dm-pager-btn:active:not(.is-disabled):not(.is-current) { transform: translateY(1px); }
.dm-pager-btn.is-current {
    background: var(--navy-ink); border-color: var(--navy-ink); color: #fff; cursor: default;
}
.dm-pager-btn.is-disabled { opacity: .4; cursor: not-allowed; }
.dm-pager-btn svg { display: block; }
.dm-pager-gap { padding: 0 4px; color: var(--ink-faint); font-weight: 600; align-self: flex-end; }

/* ----------  LEARN PLAYER: content below the video (dark theme)  ---------- */
.lp-lesson-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.lp-sec-label { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.lp-lesson-title { font-family: var(--serif); color: #fff; font-size: 28px; margin: 6px 0 0; line-height: 1.2; }

/* Mark-complete: a checkmark toggle that matches the sidebar ticks */
.lp-complete {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 16px 9px 10px; border-radius: 999px; cursor: pointer;
    background: transparent; border: 1.5px solid rgba(255,255,255,.25);
    color: #fff; font-family: inherit; font-size: 14px; font-weight: 600;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
    white-space: nowrap;
}
.lp-complete:hover:not(.is-done) { border-color: var(--gold); background: rgba(176,136,60,.12); }
.lp-complete:active:not(.is-done) { transform: translateY(1px); }
.lp-complete-tick {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    border: 2px solid rgba(255,255,255,.4); color: transparent;
    transition: background .15s, border-color .15s, color .15s;
}
.lp-complete:hover:not(.is-done) .lp-complete-tick { border-color: var(--gold); color: rgba(176,136,60,.5); }
.lp-complete.is-done { border-color: var(--green-600); background: rgba(31,90,67,.22); color: #cfe9d9; cursor: default; }
.lp-complete.is-done .lp-complete-tick { background: var(--green-600); border-color: var(--green-600); color: #fff; }

/* Tabs */
.lp-tabs { margin-top: 34px; }
.lp-tabbar { display: flex; gap: 4px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 22px; flex-wrap: wrap; }
.lp-tab {
    background: none; border: 0; cursor: pointer; font-family: inherit;
    padding: 12px 16px; font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,.55);
    border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s;
    display: inline-flex; align-items: center; gap: 7px;
}
.lp-tab:hover { color: #fff; }
.lp-tab.active { color: #fff; border-bottom-color: var(--gold); }
.lp-tab i { font-style: normal; font-size: 11.5px; font-weight: 700; background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); padding: 1px 7px; border-radius: 999px; }
.lp-tab.active i { background: var(--gold); color: var(--navy-ink); }

.lp-h { font-family: var(--serif); color: #fff; font-size: 19px; margin: 0 0 12px; }
.lp-prose { color: rgba(255,255,255,.82); font-size: 15.5px; line-height: 1.7; max-width: 70ch; }
.lp-prose p { margin: 0 0 12px; }
.lp-prose h2, .lp-prose h3 { color: #fff; font-family: var(--serif); margin: 18px 0 8px; }
.lp-prose ul, .lp-prose ol { margin: 0 0 12px; padding-left: 20px; }
.lp-prose a { color: var(--gold); text-decoration: underline; }
.lp-prose strong { color: #fff; }

.lp-learn { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.lp-learn li { display: flex; align-items: flex-start; gap: 10px; color: rgba(255,255,255,.85); font-size: 14.5px; line-height: 1.45; }
.lp-learn svg { width: 17px; height: 17px; color: var(--green-600); flex-shrink: 0; margin-top: 2px; }

.lp-instructors { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.lp-instructor { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.04); }
.lp-ins-ini { position: relative; overflow: hidden; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold), #8a6a1a); color: var(--navy-ink); font-family: var(--serif); font-weight: 700; font-size: 15px; }
.lp-ins-ini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-ins-meta { min-width: 0; }
.lp-instructor b { display: block; color: #fff; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-instructor span { display: block; color: rgba(255,255,255,.6); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Community Q&A — GitHub-issues style (dark) ===== */
:root { --gh-line: rgba(255,255,255,.14); --gh-card: rgba(255,255,255,.045); }
.gh-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    background: rgba(255,255,255,.14); color: #fff;
    font-size: 12px; font-weight: 700; z-index: 1;
    border: 2px solid var(--navy-ink); /* punches through the timeline line */
}
.gh-avatar.is-instructor { background: linear-gradient(135deg, var(--gold), #8a6a1a); color: var(--navy-ink); }

/* Ask box */
.gh-ask { display: grid; grid-template-columns: 36px 1fr; gap: 14px; margin-bottom: 26px; }
.gh-ask-box { position: relative; border: 1px solid var(--gh-line); border-radius: 10px; background: var(--gh-card); overflow: hidden; }
.gh-ask-box::before { content: ""; position: absolute; left: -7px; top: 14px; width: 12px; height: 12px; background: var(--gh-card); border-left: 1px solid var(--gh-line); border-bottom: 1px solid var(--gh-line); transform: rotate(45deg); }
.gh-ask-box textarea { display: block; width: 100%; resize: vertical; padding: 12px 14px; border: 0; background: transparent; color: #fff; font-family: inherit; font-size: 14.5px; line-height: 1.55; }
.gh-ask-box textarea::placeholder { color: rgba(255,255,255,.4); }
.gh-ask-box textarea:focus { outline: none; }
.gh-ask-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--gh-line); background: rgba(255,255,255,.03); }
.gh-ask-foot span { font-size: 12px; color: rgba(255,255,255,.45); }

/* Thread: avatars connected by a vertical timeline line */
.gh-thread { position: relative; display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.08); }
.gh-thread:last-child { border-bottom: 0; }
.gh-thread::before { content: ""; position: absolute; left: 17px; top: 6px; bottom: 6px; width: 2px; background: var(--gh-line); }
.gh-item { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; }

/* Comment card with a speech-bubble pointer toward the avatar */
.gh-card { position: relative; border: 1px solid var(--gh-line); border-radius: 10px; background: var(--gh-card); overflow: hidden; min-width: 0; }
.gh-card::before { content: ""; position: absolute; left: -7px; top: 13px; width: 12px; height: 12px; background: inherit; border-left: 1px solid var(--gh-line); border-bottom: 1px solid var(--gh-line); transform: rotate(45deg); }
.gh-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 14px; background: rgba(255,255,255,.04); border-bottom: 1px solid var(--gh-line); }
.gh-card-head b { color: #fff; font-size: 13.5px; font-weight: 700; }
.gh-meta { color: rgba(255,255,255,.5); font-size: 12px; }
.gh-card-body { padding: 13px 14px; color: rgba(255,255,255,.85); font-size: 14.5px; line-height: 1.6; }

/* Instructor (and pinned) accents */
.gh-card.is-instructor { border-color: rgba(176,136,60,.45); background: rgba(176,136,60,.10); }
.gh-card.is-instructor::before { border-color: rgba(176,136,60,.45); }
.gh-card.is-instructor .gh-card-head { background: rgba(176,136,60,.16); border-bottom-color: rgba(176,136,60,.3); }
.gh-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; border: 1px solid; }
.gh-badge-instructor { color: var(--gold); border-color: rgba(176,136,60,.5); background: rgba(176,136,60,.14); }
.gh-badge-pin { color: var(--gold); border-color: rgba(176,136,60,.5); background: rgba(176,136,60,.14); margin-left: auto; }
.gh-role { font-size: 11.5px; color: rgba(255,255,255,.5); }

.lp-empty { text-align: center; padding: 36px 16px; color: rgba(255,255,255,.5); }
.lp-empty p { margin: 10px 0 0; font-size: 14px; }

/* Resources */
.lp-resources { display: flex; flex-direction: column; gap: 8px; }
.lp-resource { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.88); font-size: 14.5px; }
.lp-resource svg { color: var(--gold); flex-shrink: 0; }
.lp-resource span { flex: 1; }
.lp-resource a { color: var(--gold); font-weight: 600; }
.lp-resource i { color: rgba(255,255,255,.4); font-size: 12.5px; font-style: normal; }

/* Certificate line in the sidebar */
.ps-cert .les-name { color: var(--gold); font-weight: 600; }
.ps-cert:hover { background: rgba(176,136,60,.12); }

/* ----------  LEARNER PROFILE  ---------- */
.lp-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lp-avatar {
    width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--serif); font-weight: 700; font-size: 23px;
    color: var(--navy-ink);
    background: linear-gradient(135deg, var(--gold-soft), color-mix(in srgb, var(--gold) 34%, var(--paper)));
    border: 1.5px solid color-mix(in srgb, var(--gold) 26%, transparent);
}
.lp-avatar { position: relative; overflow: hidden; }
.lp-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-avatar.is-suspended { background: var(--cream-deep); color: var(--ink-faint); border-color: var(--line); }
.lp-hero-main { flex: 1; min-width: 220px; }
.lp-hero-name { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lp-hero-name h1 { margin: 0; font-size: 23px; color: var(--navy-ink); }
.lp-hero-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--ink-soft); }
.lp-hero-meta a, .lp-hero-meta span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.lp-hero-meta a:hover { color: var(--navy-ink); }
.lp-hero-meta svg { color: var(--ink-faint); }
.lp-hero-spend {
    text-align: right; padding-left: 20px; border-left: 1px solid var(--line-soft);
}
.lp-hero-spend span { display: block; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.lp-hero-spend b { display: block; font-family: var(--serif); font-size: 24px; color: var(--navy-ink); margin-top: 2px; }
@media (max-width: 620px) { .lp-hero-spend { padding-left: 0; border-left: 0; text-align: left; } }

.lp-section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 4px; }
.lp-ring { position: relative; width: 52px; height: 52px; flex-shrink: 0; display: grid; place-items: center; }
.lp-ring svg { position: absolute; inset: 0; }
.lp-ring span { font-size: 12.5px; font-weight: 700; color: var(--navy-ink); font-variant-numeric: tabular-nums; }

.lp-courses { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.lp-course {
    display: flex; align-items: center; gap: 14px; padding: 11px 12px;
    border-radius: 12px; background: var(--cream); border: 1px solid transparent;
    text-decoration: none; color: inherit;
    transition: background .14s ease, border-color .14s ease, transform .12s ease;
}
.lp-course:hover { background: var(--cream-deep); border-color: var(--line); transform: translateY(-1px); }
.lp-course-thumb { width: 56px !important; height: 38px !important; border-radius: 8px; flex-shrink: 0; aspect-ratio: auto !important; }
.lp-course-body { flex: 1; min-width: 0; }
.lp-course-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-course-top b { font-family: var(--serif); font-size: 14.5px; color: var(--navy-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-progress { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.lp-progress-bar { flex: 1; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.lp-progress-fill { height: 100%; border-radius: 6px; background: var(--green); transition: width .4s ease; }
.lp-progress-fill.new { background: var(--ink-faint); }
.lp-progress-fill.progress { background: var(--gold); }
.lp-progress-fill.done { background: var(--green); }
.lp-progress-pct { font-size: 12px; color: var(--ink-soft); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.lp-course-meta { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 5px; }
.lp-cert { font-style: normal; color: var(--gold-600, #8a6a1a); font-weight: 600; }

.lp-chip { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; flex-shrink: 0; }
.lp-chip-done { background: var(--green-soft); color: #176a3a; }
.lp-chip-progress { background: var(--gold-soft); color: #8a5a00; }
.lp-chip-new { background: var(--cream-deep); color: var(--ink-faint); }

/* ----------  RESOURCE ROWS (course editor)  ---------- */
.dm-reslist { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.dm-res { border: 1px solid var(--line); border-radius: 11px; padding: 12px; background: color-mix(in srgb, var(--cream-deep) 26%, var(--paper)); }
.dm-res-top { display: grid; grid-template-columns: 24px 1fr 32px; align-items: center; gap: 10px; }
.dm-res-ico { width: 24px; height: 24px; border-radius: 7px; background: color-mix(in srgb, var(--navy) 8%, var(--paper)); color: var(--navy-ink); display: grid; place-items: center; }
.dm-res-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; }
.dm-res-fields:has(input:only-child) { grid-template-columns: 1fr; }
.dm-res-fields input { width: 100%; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-size: 13.5px; color: var(--ink); font-family: inherit; }
.dm-res-file { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-left: 34px; flex-wrap: wrap; }
.dm-res-upload { position: relative; display: inline-flex; align-items: center; padding: 7px 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-size: 12.5px; font-weight: 600; color: var(--navy-ink); cursor: pointer; transition: background .14s, border-color .14s; }
.dm-res-upload:hover { background: var(--cream-deep); border-color: var(--navy); }
.dm-res-upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.dm-res-name { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
a.dm-res-name { color: var(--navy-600); font-weight: 600; }
.dm-res-name.new { color: var(--green-600, var(--green)); font-weight: 600; }
.dm-res-name.new i { color: var(--ink-faint); font-style: normal; font-weight: 400; }
.dm-res-name.muted { color: var(--ink-faint); }

/* ----------  WYSIWYG EDITOR (Quill, admin)  ---------- */
.dm-wysiwyg .ql-toolbar.ql-snow {
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    background: var(--cream-deep);
}
.dm-wysiwyg .ql-container.ql-snow {
    border: 1px solid var(--line);
    border-radius: 0 0 10px 10px;
    background: var(--paper);
    font-family: var(--sans);
    font-size: 14.5px;
}
.dm-wysiwyg .ql-editor {
    min-height: 150px;
    line-height: 1.65;
    color: var(--ink);
}
.dm-wysiwyg .ql-editor.ql-blank::before {
    color: var(--ink-faint);
    font-style: normal;
}
.dm-wysiwyg .ql-snow .ql-stroke { stroke: var(--ink-soft); }
.dm-wysiwyg .ql-snow .ql-fill { fill: var(--ink-soft); }
.dm-wysiwyg .ql-snow.ql-toolbar button:hover .ql-stroke,
.dm-wysiwyg .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--navy-ink); }
.dm-wysiwyg .ql-snow.ql-toolbar button:hover .ql-fill,
.dm-wysiwyg .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--navy-ink); }
.dm-wysiwyg .ql-snow .ql-picker { color: var(--ink-soft); }
.dm-wysiwyg:focus-within .ql-toolbar.ql-snow,
.dm-wysiwyg:focus-within .ql-container.ql-snow { border-color: var(--gold); }

/* ----------  RICH-TEXT OUTPUT (public)  ---------- */
.cd-prose { font-size: 16.5px; line-height: 1.7; color: var(--ink); }
.cd-prose > *:first-child { margin-top: 0; }
.cd-prose > *:last-child { margin-bottom: 0; }
.cd-prose p { margin: 0 0 14px; }
.cd-prose h2 { font-family: var(--serif); font-size: 22px; color: var(--navy-ink); margin: 24px 0 10px; }
.cd-prose h3 { font-family: var(--serif); font-size: 18.5px; color: var(--navy-ink); margin: 20px 0 8px; }
.cd-prose ul, .cd-prose ol { margin: 0 0 14px; padding-left: 22px; }
.cd-prose li { margin: 4px 0; }
.cd-prose a { color: var(--navy-600); text-decoration: underline; text-underline-offset: 2px; }
.cd-prose a:hover { color: var(--navy-ink); }
.cd-prose blockquote {
    margin: 16px 0; padding: 8px 16px;
    border-left: 3px solid var(--gold);
    background: var(--cream-deep); border-radius: 0 8px 8px 0;
    color: var(--ink-soft);
}
.cd-prose strong { color: var(--navy-ink); }

/* ----------  FILE DROPZONE  ---------- */
[x-cloak] { display: none !important; }
.dm-dropzone {
    display: block;
    position: relative;
    border: 1.5px dashed color-mix(in srgb, var(--navy) 22%, var(--line));
    border-radius: 14px;
    padding: 18px 18px;
    background: color-mix(in srgb, var(--cream-deep) 28%, var(--paper));
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.dm-dropzone:hover {
    border-color: var(--navy);
    background: color-mix(in srgb, var(--cream-deep) 55%, var(--paper));
}
.dm-dropzone.is-drag {
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold-soft) 55%, var(--paper));
    transform: scale(1.005);
}
.dm-dropzone input[type=file] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.dm-dropzone-body { display: flex; align-items: center; gap: 14px; pointer-events: none; }
.dm-dropzone-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    background: color-mix(in srgb, var(--navy) 8%, var(--paper));
    color: var(--navy-ink);
    display: grid; place-items: center;
    transition: background .15s ease, color .15s ease;
}
.dm-dropzone:hover .dm-dropzone-icon { background: var(--navy-ink); color: var(--gold); }
.dm-dropzone.is-drag .dm-dropzone-icon { background: var(--gold); color: var(--navy-ink); animation: dm-pulse .9s ease-in-out infinite; }
@keyframes dm-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.dm-dropzone-body b { display: block; font-size: 14px; color: var(--ink); font-weight: 600; line-height: 1.3; }
.dm-dropzone-body b u { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.dm-dropzone-body small { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 3px; }
.dm-dropzone [wire\:loading] .dm-dropzone-icon svg { animation: dm-spin 1.1s linear infinite; }

/* ----------  COURSE DETAIL: INSTRUCTOR / LANGUAGE META LINE  ---------- */
.cd-instr-line {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.cd-instr-line .cd-meta-sep { color: #59708a; }
.cd-lang-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cd-lang-tag svg { opacity: .85; flex-shrink: 0; }

/* ----------  COURSE DETAIL: STICKY BUY CARD FIX  ---------- */
/* The .cd-wrap grid is `align-items: start`, so the .buy-col only grows to the
   card's own height — `position: sticky` then has nowhere to travel and the
   card scrolls away, leaving the whole right rail empty. Stretching the column
   to the full row height gives the sticky card room to follow the scroll. */
@media (min-width: 901px) {
    .cd-body + .buy-col,
    .cd-wrap > .buy-col {
        align-self: stretch;
    }
}

/* ----------  COURSE THUMB IMAGE  ---------- */
.course-thumb.has-image {
    background-color: var(--cream-deep);
    box-shadow: inset 0 -40px 60px -40px rgba(0,0,0,.35);
}
.course-thumb.has-image::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.18) 100%);
    pointer-events: none;
}

/* ----------  COURSE CARD HOVER (public)  ---------- */
.course-card, .course-thumb {
    transition: transform .22s ease, box-shadow .22s ease;
}
.course-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -28px rgba(11,22,49,.36);
}

/* ----------  REDUCED MOTION  ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ----------  SCROLLBAR  ---------- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--navy-ink) 22%, transparent);
    border-radius: 999px;
    border: 2px solid var(--paper);
}
*::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--navy-ink) 36%, transparent);
}