/* =====================================================================
   Website template: ACADEMY — classic institute
   Utility top bar, solid white header, serif headlines on warm paper,
   bordered cards, flat brand-colour buttons. Layered over learnify.css and
   scoped to body.lf-tpl-academy (Admin → Settings → Appearance).
   ===================================================================== */
body.lf-tpl-academy {
    --lf-bg: #faf8f3;
    --lf-card: #ffffff;
    --lf-border: #e7e2d6;
    --lf-ink: #1c1917;
    --lf-muted: #6b6560;
    --lf-radius: 10px;
    --lf-radius-lg: 14px;
    --lf-shadow-sm: 0 1px 2px rgba(60,45,20,.05);
    --lf-shadow: 0 10px 28px rgba(60,45,20,.10);
    --lf-shadow-lg: 0 18px 44px rgba(60,45,20,.14);
    --lf-grad: linear-gradient(135deg, var(--lf-primary) 0%, var(--lf-primary) 100%);
    --bs-body-font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --lf-font-heading: 'Lora', Georgia, 'Times New Roman', serif;
    --lf-paper-2: #f3efe4;
    font-size: 1.02rem;
}
body.lf-tpl-academy.bg-light { background-color: var(--lf-bg) !important; }
[data-bs-theme="dark"] body.lf-tpl-academy { --lf-bg: #12100d; --lf-card: #1b1814; --lf-border: #2d2823; --lf-ink: #ece7dd; --lf-muted: #a49d92; --lf-paper-2: #1f1b16; }
[data-bs-theme="dark"] body.lf-tpl-academy.bg-light { background-color: var(--lf-bg) !important; }

body.lf-tpl-academy h1, body.lf-tpl-academy h2, body.lf-tpl-academy h3,
body.lf-tpl-academy .hero-title, body.lf-tpl-academy .lf-sec-title, body.lf-tpl-academy .lf-band h2 { font-family: var(--lf-font-heading); font-weight: 600; letter-spacing: -.01em; }
body.lf-tpl-academy .display-1, body.lf-tpl-academy .display-2, body.lf-tpl-academy .display-3, body.lf-tpl-academy .display-4, body.lf-tpl-academy .display-5 { font-weight: 600; letter-spacing: -.015em; }
body.lf-tpl-academy .text-gradient { background: none; -webkit-text-fill-color: var(--lf-primary); color: var(--lf-primary); }

/* ---------- Buttons: flat, square-ish, no lift ---------- */
body.lf-tpl-academy .btn { border-radius: 6px; letter-spacing: .01em; }
body.lf-tpl-academy .btn-lg { border-radius: 7px; }
body.lf-tpl-academy .btn-sm { border-radius: 5px; }
body.lf-tpl-academy .btn-primary { background-image: none; background-color: var(--lf-primary) !important; box-shadow: none; }
body.lf-tpl-academy .btn-primary:hover, body.lf-tpl-academy .btn-primary:focus { background-color: var(--lf-primary-dark) !important; transform: none; box-shadow: 0 6px 16px rgba(var(--lf-primary-rgb), .25); }
body.lf-tpl-academy .btn-light { box-shadow: none; border: 1px solid var(--lf-border); }
body.lf-tpl-academy .btn-light:hover, body.lf-tpl-academy .btn-outline-primary:hover { transform: none; }
body.lf-tpl-academy .btn.rounded-pill, body.lf-tpl-academy .form-select.rounded-pill { border-radius: 6px !important; }
body.lf-tpl-academy .card { box-shadow: none; }

/* ---------- Utility strip + header ---------- */
body.lf-tpl-academy .lf-topstrip { background: #1c1917; color: #d6d3d1; font-size: .8rem; }
[data-bs-theme="dark"] body.lf-tpl-academy .lf-topstrip { background: #000; }
body.lf-tpl-academy .lf-header { background: var(--lf-card); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--lf-border); }
body.lf-tpl-academy .lf-header.is-scrolled { box-shadow: 0 4px 18px rgba(60,45,20,.08); }
body.lf-tpl-academy .lf-header-inner { min-height: 74px; }
body.lf-tpl-academy .lf-brand-mark { border-radius: 6px; background: var(--lf-primary); }
body.lf-tpl-academy .lf-brand-name { font-family: var(--lf-font-heading); font-weight: 700; letter-spacing: 0; font-size: 1.2rem; }
body.lf-tpl-academy .lf-nav { gap: .25rem; margin-inline-start: 1rem; }
body.lf-tpl-academy .lf-nav-link { border-radius: 0; padding: .55rem .7rem; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; border-bottom: 2px solid transparent; color: var(--lf-ink); }
body.lf-tpl-academy .lf-nav-link:hover { background: transparent; color: var(--lf-primary); }
body.lf-tpl-academy .lf-nav-link.is-active { background: transparent; color: var(--lf-primary); border-bottom-color: var(--lf-primary); }
body.lf-tpl-academy .lf-searchbox { border-radius: 6px; background: var(--lf-bg); border-color: var(--lf-border); }
body.lf-tpl-academy .lf-searchbox:focus-within { background: var(--lf-card); }
body.lf-tpl-academy .lf-nav-btn, body.lf-tpl-academy .lf-btn-ghost, body.lf-tpl-academy .lf-btn-solid { border-radius: 6px; }
body.lf-tpl-academy .lf-btn-ghost { border-color: var(--lf-ink); color: var(--lf-ink); }
body.lf-tpl-academy .lf-btn-solid { background: var(--lf-primary); box-shadow: none; }
body.lf-tpl-academy .lf-btn-solid:hover { background: var(--lf-primary-dark); transform: none; box-shadow: none; }
body.lf-tpl-academy .lf-user-menu, body.lf-tpl-academy .lf-region-menu { border-radius: 8px; }

/* ---------- Hero: warm paper, dark serif copy (photo layout keeps its image) ---------- */
body.lf-tpl-academy .hero:not(.hero--photo) {
    color: var(--lf-ink);
    background: linear-gradient(180deg, var(--lf-paper-2) 0%, var(--lf-bg) 100%);
    border-bottom: 1px solid var(--lf-border);
}
body.lf-tpl-academy .hero:not(.hero--photo)::after { background-image: radial-gradient(rgba(28,25,23,.12) 1px, transparent 1px); opacity: .35; }
body.lf-tpl-academy .hero-orb, body.lf-tpl-academy .hero-grid, body.lf-tpl-academy .hero-glow { display: none; }
body.lf-tpl-academy .hero-title { font-weight: 600; line-height: 1.08; letter-spacing: -.015em; }
body.lf-tpl-academy .hero:not(.hero--photo) .hero-hl { color: var(--lf-primary); font-style: italic; }
body.lf-tpl-academy .hero:not(.hero--photo) .hero-hl::after { background: rgba(var(--lf-primary-rgb), .12); transform: none; height: .28em; }
body.lf-tpl-academy .hero:not(.hero--photo) .hero-lede { color: var(--lf-muted); font-size: 1.15rem; }
body.lf-tpl-academy .hero:not(.hero--photo) .hero-badge { background: var(--lf-card); border: 1px solid var(--lf-border); color: var(--lf-ink); backdrop-filter: none; box-shadow: none; border-radius: 6px; }
body.lf-tpl-academy .hero:not(.hero--photo) .hero-chip { color: var(--lf-ink); background: var(--lf-card); border: 1px solid var(--lf-border); }
body.lf-tpl-academy .hero:not(.hero--photo) .hero-chip:hover { color: var(--lf-primary); border-color: var(--lf-primary); background: var(--lf-card); transform: none; }
body.lf-tpl-academy .hero:not(.hero--photo) .opacity-75 { color: var(--lf-muted); opacity: 1 !important; }
body.lf-tpl-academy .hero:not(.hero--photo) .hero-stat-ico { background: rgba(var(--lf-primary-rgb), .1); border-color: rgba(var(--lf-primary-rgb), .2); color: var(--lf-primary); backdrop-filter: none; border-radius: 8px; }
body.lf-tpl-academy .hero:not(.hero--photo) .hero-faces img, body.lf-tpl-academy .hero:not(.hero--photo) .hero-face-more { border-color: var(--lf-card); box-shadow: none; }
body.lf-tpl-academy .hero:not(.hero--photo) .hero-face-more { background: var(--lf-primary); }
body.lf-tpl-academy .hero:not(.hero--photo) .btn-light { background: var(--lf-ink); color: var(--lf-bg); border-color: var(--lf-ink); }
body.lf-tpl-academy .hero-search { background: var(--lf-card); border: 1px solid var(--lf-border); box-shadow: var(--lf-shadow); backdrop-filter: none; }
body.lf-tpl-academy .hero-search.rounded-pill { border-radius: 8px !important; }
body.lf-tpl-academy .hero-search:focus-within { border-color: var(--lf-primary); box-shadow: 0 0 0 4px rgba(var(--lf-primary-rgb), .12); transform: none; }
body.lf-tpl-academy .hero-search .btn { box-shadow: none; }
body.lf-tpl-academy .hero-search .btn.rounded-pill { border-radius: 6px !important; }
body.lf-tpl-academy .hero-card { transform: none; animation: none; border-radius: 12px; box-shadow: var(--lf-shadow-lg); border: 1px solid var(--lf-border); }
body.lf-tpl-academy .hero-card:hover { transform: translateY(-4px); box-shadow: var(--lf-shadow-lg); }
body.lf-tpl-academy .hero-card-media { border-radius: 8px; }
body.lf-tpl-academy .hero-card-pill { border-radius: 4px; }
body.lf-tpl-academy .hero-float { border-radius: 10px; background: var(--lf-card); border: 1px solid var(--lf-border); box-shadow: var(--lf-shadow); backdrop-filter: none; animation: none; color: var(--lf-ink); }
body.lf-tpl-academy .hero-float-ico { border-radius: 8px; background: var(--lf-primary); box-shadow: none; }
body.lf-tpl-academy .hero-float-ring span { background: var(--lf-card); }
body.lf-tpl-academy .hero-visual { padding-bottom: 40px; }
/* centered layout */
body.lf-tpl-academy .hero-showcase .hero-card { transform: translateY(20px); }
body.lf-tpl-academy .hero-showcase .hero-card--n2 { transform: translateY(0) scale(1.04); }
body.lf-tpl-academy .hero-showcase .hero-card:hover { transform: translateY(-6px) scale(1.04); }
body.lf-tpl-academy .hero:not(.hero--photo) .hero-statbar { background: var(--lf-card); border-top: 1px solid var(--lf-border); backdrop-filter: none; }
/* bento layout */
body.lf-tpl-academy .hero--bento .hero-hl { color: var(--lf-primary); background: none; -webkit-text-fill-color: var(--lf-primary); }
body.lf-tpl-academy .hero-bento-tile { border-radius: 10px; box-shadow: none; }
body.lf-tpl-academy .hero-bento-tile--grad { background: var(--lf-primary); box-shadow: none; }
/* photo layout: warm, darker shade; no glass blur */
body.lf-tpl-academy .hero--photo { background: #1c1917; }
body.lf-tpl-academy .hero-photo-bg { animation: none; transform: none; }
body.lf-tpl-academy .hero-photo-shade { background: linear-gradient(100deg, rgba(20,16,12,.94) 0%, rgba(20,16,12,.78) 50%, rgba(20,16,12,.35) 100%), linear-gradient(0deg, rgba(20,16,12,.55) 0%, transparent 45%); }
body.lf-tpl-academy .hero--photo .hero-hl { color: #fcd34d; }
body.lf-tpl-academy .hero--photo .hero-badge { border-radius: 6px; }
body.lf-tpl-academy .hero-glass { border-radius: 12px; background: rgba(28,25,23,.55); border-color: rgba(255,255,255,.14); backdrop-filter: blur(8px); }
body.lf-tpl-academy .hero-glass-tile { border-radius: 8px; }
body.lf-tpl-academy .hero-glass-tile i { color: #fcd34d; }

/* ---------- Sections ---------- */
body.lf-tpl-academy .lf-sec { padding: 5rem 0; }
body.lf-tpl-academy .lf-sec--surface { background: var(--lf-card); }
body.lf-tpl-academy .lf-sec--tint { background: var(--lf-paper-2); }
body.lf-tpl-academy .lf-sec--dark { background: #1c1917; }
body.lf-tpl-academy .lf-sec + .lf-sec:not(.lf-sec--dark)::before { width: 100%; opacity: 1; }
body.lf-tpl-academy .lf-sec-head { margin-bottom: 2.25rem; }
body.lf-tpl-academy .lf-eyebrow { background: transparent; padding: 0; border-radius: 0; letter-spacing: .14em; font-size: .72rem; gap: .6rem; }
body.lf-tpl-academy .lf-eyebrow::before { width: 26px; height: 2px; border-radius: 0; }
body.lf-tpl-academy .lf-sec-head--center .lf-eyebrow::after { content: ""; width: 26px; height: 2px; background: currentColor; }
body.lf-tpl-academy .lf-sec-title { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); }
body.lf-tpl-academy .lf-sec-lead { font-size: 1.08rem; }
body.lf-tpl-academy .lf-sec-link { text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; }

body.lf-tpl-academy .lf-tile, body.lf-tpl-academy .lf-cat, body.lf-tpl-academy .course-card, body.lf-tpl-academy .lf-stats, body.lf-tpl-academy .lf-band, body.lf-tpl-academy .lf-faq .accordion-item { border-radius: var(--lf-radius); }
body.lf-tpl-academy .lf-tile--hover:hover, body.lf-tpl-academy .lf-cat:hover { transform: translateY(-2px); box-shadow: var(--lf-shadow); border-color: var(--lf-primary); }
body.lf-tpl-academy .lf-tile--hover:hover .lf-ico { transform: none; }
body.lf-tpl-academy .lf-ico { border-radius: 8px; }
body.lf-tpl-academy .lf-ico--grad { background: var(--lf-primary); box-shadow: none; }
body.lf-tpl-academy .lf-feature h3 { font-family: var(--lf-font-heading); font-size: 1.15rem; }
body.lf-tpl-academy .lf-cat .lf-ico { border-radius: 6px; }
body.lf-tpl-academy .lf-cat-name { font-family: var(--lf-font-heading); font-weight: 600; }

/* course cards: bordered, flat, title in serif */
body.lf-tpl-academy .course-card:hover { transform: translateY(-3px); box-shadow: var(--lf-shadow); border-color: var(--lf-border); }
body.lf-tpl-academy .course-thumb { transition: none; }
body.lf-tpl-academy .course-card:hover .course-thumb { transform: none; }
body.lf-tpl-academy .lf-course-title { font-family: var(--lf-font-heading); font-weight: 600; font-size: 1.05rem; }
body.lf-tpl-academy .lf-badge { border-radius: 4px; backdrop-filter: none; box-shadow: none; text-transform: uppercase; letter-spacing: .05em; font-size: .64rem; }
body.lf-tpl-academy .lf-wishlist-btn { border-radius: 6px; }
body.lf-tpl-academy .lf-play span { border-radius: 6px; }
body.lf-tpl-academy .lf-price { font-family: var(--lf-font-heading); }
body.lf-tpl-academy .lf-more { border-radius: var(--lf-radius); }

body.lf-tpl-academy .lf-step-num { border-radius: 50%; background: var(--lf-primary); box-shadow: none; font-family: var(--lf-font-heading); }
body.lf-tpl-academy .lf-step h3 { font-family: var(--lf-font-heading); }
@media (min-width: 768px) { body.lf-tpl-academy .lf-step::after { background-image: linear-gradient(90deg, var(--lf-border) 100%, transparent 0); background-size: auto; } }

body.lf-tpl-academy .lf-stat-num { font-family: var(--lf-font-heading); font-weight: 600; letter-spacing: -.02em; color: var(--lf-primary); }
body.lf-tpl-academy .lf-stat .lf-ico--grad { background: rgba(var(--lf-primary-rgb), .1); color: var(--lf-primary); }
body.lf-tpl-academy .lf-person h3 { font-family: var(--lf-font-heading); }
body.lf-tpl-academy .avatar-ring { background: var(--lf-primary); }
body.lf-tpl-academy .lf-quote p { font-family: var(--lf-font-heading); font-style: italic; font-size: 1.05rem; line-height: 1.7; }
body.lf-tpl-academy .lf-quote::before { opacity: .15; }
body.lf-tpl-academy .lf-initial { border-radius: 50%; }

body.lf-tpl-academy .lf-band { padding: 3.5rem 2rem; }
body.lf-tpl-academy .lf-band--gradient { background: var(--lf-primary); box-shadow: none; }
body.lf-tpl-academy .lf-band--dark { background: #1c1917; }
body.lf-tpl-academy .lf-band--gradient::after, body.lf-tpl-academy .lf-band--dark::after { opacity: .18; }
body.lf-tpl-academy .lf-band .btn-light { background: #fff; color: var(--lf-ink); border-color: #fff; }
body.lf-tpl-academy .lf-search { border-radius: 6px; border-color: var(--lf-border); background: var(--lf-bg); }
body.lf-tpl-academy .lf-faq .accordion-button { font-family: var(--lf-font-heading); font-weight: 600; font-size: 1.05rem; }

/* ---------- Footer: light paper with dark text (dark mode → deep coffee) ---------- */
body.lf-tpl-academy .lf-footer { background: var(--lf-paper-2); border-top: 1px solid var(--lf-border); }
body.lf-tpl-academy .lf-footer.text-light { color: var(--lf-ink) !important; }
body.lf-tpl-academy .lf-footer .text-white, body.lf-tpl-academy .lf-footer-heading { color: var(--lf-ink) !important; }
body.lf-tpl-academy .lf-footer-heading { font-family: var(--lf-font-heading); text-transform: none; letter-spacing: 0; font-size: 1rem; }
body.lf-tpl-academy .lf-footer-copy, body.lf-tpl-academy .lf-footer-link, body.lf-tpl-academy .lf-footer-copyright { color: var(--lf-muted); }
body.lf-tpl-academy .lf-footer-link:hover, body.lf-tpl-academy .lf-footer-link:focus-visible { color: var(--lf-primary); }
body.lf-tpl-academy .lf-footer-copy i { color: var(--lf-primary); }
body.lf-tpl-academy .lf-footer-social { color: var(--lf-ink); background: var(--lf-card); border-color: var(--lf-border); border-radius: 6px; }
body.lf-tpl-academy .lf-footer-social:hover, body.lf-tpl-academy .lf-footer-social:focus-visible { color: #fff; background: var(--lf-primary); border-color: var(--lf-primary); transform: none; }
body.lf-tpl-academy .lf-footer-divider { border-color: var(--lf-border); opacity: 1; }
body.lf-tpl-academy .lf-footer-newsletter { background: var(--lf-primary); border-radius: var(--lf-radius-lg) !important; }
body.lf-tpl-academy .lf-footer-newsletter .text-white { color: #fff !important; }
body.lf-tpl-academy .lf-footer-newsletter-copy { color: rgba(255,255,255,.85); }
body.lf-tpl-academy .lf-footer-logo img { filter: none; }
body.lf-tpl-academy .lf-footer .lf-logo-knockout { filter: none; }
[data-bs-theme="dark"] body.lf-tpl-academy .lf-footer .lf-logo-knockout { filter: brightness(0) invert(1); }
body.lf-tpl-academy .lf-footer .brand-logo { color: var(--lf-ink) !important; }

/* ---------- Inner pages ---------- */
body.lf-tpl-academy .eyebrow { letter-spacing: .14em; }
body.lf-tpl-academy .category-tile { border-radius: var(--lf-radius); }

@media (max-width: 767.98px) {
    body.lf-tpl-academy .lf-sec { padding: 3.5rem 0; }
    body.lf-tpl-academy .lf-header-inner { min-height: 64px; }
}

/* ---------- Auth screens (login / register / reset) ---------- */
body.lf-tpl-academy.lf-panel { background: var(--lf-bg); }
body.lf-tpl-academy .lf-auth-side { background: #1c1917; color: #f5f5f4; }
body.lf-tpl-academy .lf-auth-side::after { background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); opacity: .25; }
body.lf-tpl-academy .lf-auth-side .hero-badge { border-radius: 6px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); backdrop-filter: none; }
body.lf-tpl-academy .lf-auth-side h1 { font-family: var(--lf-font-heading); font-weight: 600; letter-spacing: -.015em !important; }
body.lf-tpl-academy .lf-auth-feature i { border-radius: 6px; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fcd34d; }
body.lf-tpl-academy .lf-auth-quote { border-radius: 10px; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); backdrop-filter: none; }
body.lf-tpl-academy .lf-auth-quote p { font-family: var(--lf-font-heading); }
body.lf-tpl-academy .lf-auth-card h3, body.lf-tpl-academy .lf-auth-card h4 { font-family: var(--lf-font-heading); font-weight: 600; }
body.lf-tpl-academy .lf-auth-card .form-control, body.lf-tpl-academy .lf-auth-card .form-select { border-radius: 6px; border-color: var(--lf-border); }
body.lf-tpl-academy .lf-auth-card .btn-lg { border-radius: 7px; }
body.lf-tpl-academy .lf-role-pick label { border-radius: 8px; border-color: var(--lf-border); }
body.lf-tpl-academy .lf-role-pick label i { border-radius: 6px; }
body.lf-tpl-academy .lf-role-pick input:checked + label { border-color: var(--lf-primary); }
body.lf-tpl-academy .lf-demo-box, body.lf-tpl-academy .lf-demo-box .lf-demo-chip { border-radius: 8px; }
body.lf-tpl-academy .lf-demo-box .lf-demo-chip > i, body.lf-tpl-academy .lf-demo-head > i { border-radius: 6px; }
body.lf-tpl-academy .lf-brand-ico { border-radius: 6px !important; background: var(--lf-primary) !important; }

/* ---------- Demo "Home ▾" group: uppercase link style, underline spans link + caret ---------- */
body.lf-tpl-academy .lf-nav-demos, body.lf-tpl-academy .lf-nav-demos:hover, body.lf-tpl-academy .lf-nav-demos.is-active,
body.lf-tpl-academy .lf-nav-demos:has(.lf-nav-caret[aria-expanded="true"]) { background: transparent; border-radius: 0; border-bottom: 2px solid transparent; }
body.lf-tpl-academy .lf-nav-demos.is-active { border-bottom-color: var(--lf-primary); }
body.lf-tpl-academy .lf-nav-demos .lf-nav-link, body.lf-tpl-academy .lf-nav-demos .lf-nav-link.is-active { border-bottom: 0; }
body.lf-tpl-academy .lf-nav-caret { padding: 0 .25rem 0 .1rem; color: var(--lf-ink); }
body.lf-tpl-academy .lf-nav-demos:hover .lf-nav-link, body.lf-tpl-academy .lf-nav-demos:hover .lf-nav-caret,
body.lf-tpl-academy .lf-nav-caret[aria-expanded="true"], body.lf-tpl-academy .lf-nav-demos.is-active .lf-nav-caret { color: var(--lf-primary); }
body.lf-tpl-academy .lf-demo-menu { border-radius: 8px; border-color: var(--lf-border); }
body.lf-tpl-academy .lf-demo-item { border-radius: 6px; }
body.lf-tpl-academy .lf-demo-swatch { border-radius: 4px; }

@media (max-width: 1199.98px) {
    body.lf-tpl-academy .lf-nav-link { padding: .55rem .45rem; font-size: .74rem; letter-spacing: .04em; }
    body.lf-tpl-academy .lf-header-inner { min-height: 66px; }
}

/* ---------- Inner-page hero bands (course / bundle / instructor / blog headers) ----------
   They are written for the dark gradient band (text-white, btn-light); on this light band ink them. */
body.lf-tpl-academy .hero:not(.hero--photo) .text-white { color: var(--lf-ink) !important; }
body.lf-tpl-academy .hero:not(.hero--photo) .text-white-50 { color: var(--lf-muted) !important; }
body.lf-tpl-academy .hero:not(.hero--photo) .lead { color: var(--lf-muted); }
body.lf-tpl-academy .hero:not(.hero--photo) .btn-outline-light { color: var(--lf-ink); border-color: var(--lf-ink); }
body.lf-tpl-academy .hero:not(.hero--photo) .btn-outline-light:hover { background: var(--lf-ink); color: var(--lf-bg); }
body.lf-tpl-academy .hero:not(.hero--photo) .avatar-ring img { border-color: var(--lf-card); }