/* Hobby Horse Academy app skin v2: member portal (FluentCommunity).
   Same look as app-skin.css (night sky, glass, rounded type, gradient pills, floating tab bar),
   applied through the portal's own colour variables so its layout and features stay intact. */

html body {
  --hha-bg: #000000;
  --hha-glass: #121214;
  --hha-glass-hi: #1c1c20;
  --hha-glass-bar: rgba(10, 10, 12, 0.8);
  --hha-line: rgba(255, 255, 255, 0.08);
  --hha-line-strong: rgba(255, 255, 255, 0.14);
  --hha-ink: #f5f5f7;
  --hha-muted: #98989f;
  --hha-pink: #ff3d9a;
  --hha-grad: #d4148a;
  --hha-glow: 0 8px 22px -12px rgba(212, 20, 138, 0.9);
  --hha-shadow: none;
  --hha-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --hha-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hha-font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* portal colours: one pink, glass surfaces, soft lines */
html.dark body, html body {
  --fcom-primary-button: #e41d98;
  --fcom-primary-button-text: #ffffff;
  --fcom-text-link: var(--hha-pink);
  --fcom-menu-text-active: #ffffff;
}
html body {
  --fcom-primary-bg: #000000; /* solid, so menus and pop-ups stay readable */
  --fcom-secondary-bg: var(--hha-glass);
  --fcom-secondary-content-bg: var(--hha-glass);
  --fcom-active-bg: rgba(255, 47, 163, 0.16);
  --fcom-primary-border: #161618; /* near-invisible dividers, no white lines */
  --fcom-secondary-border: #1c1c1e;
  --fcom-primary-text: var(--hha-ink);
  --fcom-secondary-text: var(--hha-muted);
  color-scheme: dark;
}

/* night sky behind everything */
html body { background: var(--hha-bg) !important; }

/* type */
body, .fcom_wrap, .el-button, input, textarea { font-family: var(--hha-font-body) !important; }
h1, h2, h3, h4, .fcom_page_title, .fhr_content_layout_header h1, .fcom_box_card_title, .fcom_feed_title,
.fcom_user_name, .feed_author_name, .fcom_space_title {
  font-family: var(--hha-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}
html { -webkit-tap-highlight-color: transparent; }
body { -webkit-font-smoothing: antialiased; }
::selection { background: #e41d98; color: #fff; }
input, textarea, [contenteditable] { caret-color: var(--hha-pink); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--hha-pink) !important; outline-offset: 2px; }

/* header: frosted glass */
.fcom_top_menu, .fhr_content_layout_header, .fcom_header {
  background-color: var(--hha-glass-bar) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 0 !important;
}

/* buttons: gradient pills */
.fcom_primary_button, .el-button--primary, .fcom_card_button, .fcom_btn.fcom_primary {
  background: var(--hha-grad) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-family: var(--hha-font-display) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: transform 160ms var(--hha-ease-out), filter 160ms ease !important;
}
.fcom_card_button { min-height: 44px; font-size: 16px !important; }
.fcom_primary_button:active, .el-button--primary:active, .fcom_card_button:active { transform: scale(0.96); filter: brightness(0.92); }
@media (hover: hover) and (pointer: fine) {
  .fcom_primary_button:hover, .el-button--primary:hover, .fcom_card_button:hover { filter: brightness(1.08); }
}
html body .el-button.fcom_secondary_button, html body .fcom_space_opener_btn {
  border: 0 !important;
  background: #1c1c1e !important;
  color: var(--hha-ink) !important;
  border-radius: 999px !important;
}
.el-button--default, .fcom_secondary_button {
  border-radius: 999px !important;
  background: var(--hha-glass-hi) !important;
  border: 0 !important;
  color: var(--hha-ink) !important;
}

/* cards: glass with an inset cover photo */
.fcom_each_box_card, .feed_list_item, .fcom_welcome_box, .feed_item, .fcom_feed_item, .fcom_member_card {
  border-radius: 26px !important;
  overflow: hidden;
  background: #121214 !important;
  border: 0 !important;
  box-shadow: var(--hha-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
.fcom_each_box_card { transition: transform 220ms var(--hha-ease-out); padding: 8px 8px 0; }
.fcom_each_box_card:active { transform: scale(0.98); }
.fcom_each_box_card .fcom_box_card_avatar, .fcom_each_box_card .fcom_box_card_avatar img,
.fcom_each_box_card .fcom_box_card_cover, .fcom_each_box_card .fcom_box_card_cover img {
  border-radius: 20px !important;
  overflow: hidden;
}
.fcom_each_box_card .fcom_box_card_info { border-radius: 0 !important; background: transparent !important; }
.feed_item img, .fcom_feed_item img { border-radius: 16px; }

.feed_list_item { margin-bottom: 14px !important; }
.fcom_welcome_box { padding: 8px 8px 22px !important; }
.fcom_welcome_box img { border-radius: 20px !important; }
.feed_list_item .fcom_user_display_name, .fcom_welcome_box h1, .fcom_welcome_box h2, .fcom_welcome_box h3 {
  font-family: var(--hha-font-display) !important; font-weight: 600 !important;
}

/* quick links under the header (News, Compete, Shop, Events) become glass chips on one swipeable line */
.object_menu .fcom_space_menu_ul {
  display: flex !important; flex-wrap: nowrap !important; gap: 8px !important;
  overflow-x: auto; scrollbar-width: none; padding: 6px 12px !important;
}
.object_menu .fcom_space_menu_ul::-webkit-scrollbar { display: none; }
.object_menu .fcom_space_menu_ul > li { flex: 0 0 auto; }
.object_menu .fcom_space_menu_ul a.fcom_custom_link {
  border-radius: 999px !important; background: var(--hha-glass-hi) !important;
  box-shadow: none; padding: 8px 14px !important;
  font-family: var(--hha-font-display) !important; font-weight: 500 !important; color: var(--hha-ink) !important;
  transition: transform 160ms var(--hha-ease-out);
}
.object_menu .fcom_space_menu_ul a.fcom_custom_link:active { transform: scale(0.95); }

/* desktop sidebar: rounded rows, gradient for the current page */
.fcom_sidebar_wrap a { border-radius: 14px !important; }
.fcom_sidebar_wrap a.router-link-exact-active, .fcom_sidebar_wrap .active > a {
  background: var(--hha-grad) !important; color: #fff !important; box-shadow: var(--hha-glow);
}

/* the "All Spaces / All Courses" pill had grey text on a grey pill */
.object_menu .fcom_space_menu_ul a.router-link-exact-active {
  color: #fff !important; font-weight: 600; background: rgba(255, 47, 163, 0.18) !important;
  border-radius: 999px !important;
}

/* topic filters (All, APP Updates, HHA Competitions) */
.fcom_topics_filters .el-button {
  border-radius: 999px !important; background: var(--hha-glass-hi) !important; color: var(--hha-ink) !important;
  border: 0 !important; font-family: var(--hha-font-display) !important; font-weight: 500 !important;
  transition: transform 160ms var(--hha-ease-out);
}
.fcom_topics_filters .el-button:active { transform: scale(0.95); }
.fcom_topics_filters .el-button.fcom_active_topic { background: var(--hha-grad) !important; border-color: transparent !important; color: #fff !important; box-shadow: var(--hha-glow); }

/* inputs */
.el-input__wrapper, .el-textarea__inner, .fcom_input {
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  font-size: 16px;
}
.el-input__wrapper.is-focus, .el-textarea__inner:focus {
  box-shadow: 0 0 0 1px var(--hha-pink) inset, 0 0 0 4px rgba(255, 47, 163, 0.18) !important;
}

/* phone tab bar: full width, flat black, pink when you are there */
.fcom_mobile_menu {
  left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important;
  border-radius: 0 !important;
  background-color: rgba(0, 0, 0, 0.94) !important;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 0 !important; box-shadow: none !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
.fcom_mobile_menu a, .fcom_mobile_menu .item { transition: transform 160ms var(--hha-ease-out); }
.fcom_mobile_menu a:active, .fcom_mobile_menu .item:active { transform: scale(0.9); }
.fcom_mobile_menu a.router-link-exact-active, .fcom_mobile_menu a.router-link-exact-active * { color: var(--hha-pink) !important; }
@media (max-width: 767px) {
  .fcom_wrap, .fhr_content_layout_body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* unread badges */
.el-badge__content--danger { background: var(--hha-grad) !important; border: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .fcom_primary_button, .el-button--primary, .fcom_card_button, .fcom_mobile_menu a, .fcom_each_box_card { transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .fcom_mobile_menu, .fcom_top_menu, .fhr_content_layout_header { -webkit-backdrop-filter: none; backdrop-filter: none; background: #15111b !important; }
}

/* no white loading boxes or white overlays while the portal loads */
html body { --fcom-skeleton-bg: #161618; --el-skeleton-color: #161618; --el-skeleton-to-color: #1f1f22; --el-mask-color: rgba(0, 0, 0, 0.72); --el-bg-color: #121214; --el-bg-color-overlay: #121214; --el-fill-color-blank: #121214; --el-border-color: #1c1c1e; --el-border-color-light: #1c1c1e; --el-border-color-lighter: #161618; --fcom-header-height: 54px; }
.el-skeleton__item, .fcom_skeleton, [class*="skeleton"] .el-skeleton__item { background: #161618 !important; }
.el-skeleton.is-animated .el-skeleton__item { background: linear-gradient(90deg, #161618 25%, #1f1f22 37%, #161618 63%) 0 0 / 400% 100% !important; }
.el-loading-mask { background-color: rgba(0, 0, 0, 0.72) !important; }
.el-loading-spinner .path { stroke: #ff3d9a !important; }
img { background-color: transparent; }
.fcom_wrap, .fhr_wrap, .fhr_content_layout, .fhr_content_layout_body, #fluent_com_portal { background: #000 !important; }
@media (min-width: 1000px) { html body { --fcom-header-height: 0px; } }

/* page header: same black bar and bold centred title as the rest of the app */
.fhr_content_layout_header {
  background: rgba(0, 0, 0, 0.92) !important;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 0 !important; box-shadow: none !important;
  top: calc(54px + env(safe-area-inset-top, 0px)) !important;
}
.fhr_content_layout_header h1, .fhr_content_layout_header .community_name, .fhr_content_layout_header .fcom_page_title {
  font-size: 19px !important; font-weight: 700 !important; letter-spacing: -0.02em !important;
}
@media (min-width: 1000px) {
  .fhr_content_layout_header { top: 0 !important; }
}
/* the News / Compete / Shop / Events row is already in the app menu and sidebar */
.object_menu:has(a.fcom_custom_link) { display: none !important; }
.fcom_sub_header { background: transparent !important; border: 0 !important; }
.fcom_sub_header:has(> .object_menu a.fcom_custom_link):not(:has(> :not(.object_menu))) { display: none !important; }

/* ---------- One app: portal screens use the same page title and cards as the rest of the app ---------- */
/* the title bar becomes the same big centered title as Home, Shop, Events */
html.hha-shell .fhr_content_layout_header {
  position: relative !important; top: auto !important;
  display: grid !important; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 6px 4px;
  min-height: 0 !important; height: auto !important; padding: 14px 16px 10px !important;
  background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.hha-shell .fhr_content_layout_header .fhr_page_title, html.hha-shell .fhr_content_layout_header .fcom_page_title {
  grid-column: 2; margin: 0 !important; text-align: center;
  font: 800 clamp(32px, 8.6vw, 44px) / 1.05 var(--hha-font-display) !important;
  letter-spacing: -0.035em !important; color: var(--hha-ink) !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.hha-shell .fhr_content_layout_header .fhr_page_actions { grid-column: 1 / -1; display: flex; justify-content: center; }
/* a lone "All Spaces" / "All Courses" pill says nothing */
html.hha-shell .fhr_page_actions .object_menu:has(li:only-child) { display: none !important; }
html.hha-shell .fhr_page_actions:not(:has(.object_menu:not(:has(li:only-child)) , button, .el-button)) { display: none !important; }
/* back arrow only inside a group, lesson or post; a round button like the app's other buttons */
html.hha-shell .fhr_content_layout_header .back-button {
  grid-column: 1; grid-row: 1; width: 40px; height: 40px; margin: 0 !important; padding: 0 !important;
  display: grid; place-items: center; border-radius: 50% !important; background: #1c1c1e !important;
  color: var(--hha-ink) !important; font-size: 20px !important; line-height: 1 !important;
}
html.hha-shell[data-hha-depth="top"] .fhr_content_layout_header .back-button { visibility: hidden; }
@media (min-width: 1000px) {
  html.hha-shell .fhr_content_layout_header { padding: 28px 24px 14px !important; }
}

/* group and lesson cards: photo on top, centered bold name, pill button, like the home cards */
html.hha-shell .fcom_each_box_card { padding: 0 !important; display: flex; flex-direction: column; }
html.hha-shell .fcom_each_box_card .fcom_box_card_cover,
html.hha-shell .fcom_each_box_card .fcom_box_card_cover img { border-radius: 0 !important; }
html.hha-shell .fcom_each_box_card .fcom_box_card_info {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 16px 18px !important; text-align: center;
}
html.hha-shell .fcom_box_card_name, html.hha-shell .fcom_box_card_name a, html.hha-shell .fcom_each_box_card .community_name {
  font: 700 17px / 1.2 var(--hha-font-display) !important; letter-spacing: -0.02em !important; color: var(--hha-ink) !important; text-wrap: balance;
}
html.hha-shell .fcom_each_box_card .fcom_box_card_info > * { margin: 0 !important; position: static !important; }
html.hha-shell .fcom_box_card_name { height: auto !important; justify-content: center; }
html.hha-shell .fcom_page_title .fcom_space_title { display: inline-flex; align-items: center; gap: 8px; color: inherit !important; font: inherit !important; }
html.hha-shell .fcom_page_title .fcom_space_title .fcom_emoji { font-size: 0.7em; }
html.hha-shell .fcom_box_card_details, html.hha-shell .fcom_box_card_description { color: var(--hha-muted) !important; font-size: 14px !important; line-height: 1.4 !important; }
html.hha-shell .fcom_box_card_description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.hha-shell .fcom_box_card_action { margin-top: auto !important; padding-top: 8px; display: flex; justify-content: center; width: 100%; }
html.hha-shell .fcom_card_button { width: auto !important; min-width: 140px; padding: 0 24px !important; background: #d4148a !important; }

/* the portal's own side boxes look exactly like the side column on the other screens */
html.hha-shell .app_side_widget { border-radius: 20px !important; background: #121214 !important; border: 0 !important; padding: 14px 10px 10px !important; }
html.hha-shell .app_side_widget .widget_header { margin: 0 6px 6px !important; padding: 0 !important; border: 0 !important; font: 700 15px / 1.2 var(--hha-font-display) !important; color: var(--hha-ink) !important; }
html.hha-shell .app_side_widget .notification_item { padding: 8px 6px !important; border-radius: 14px; gap: 10px; border: 0 !important; }
html.hha-shell .app_side_widget .notification_content { font-size: 13.5px !important; line-height: 1.35 !important; color: var(--hha-ink) !important; }
html.hha-shell .app_side_widget .feed_timestamp { font-size: 12px !important; color: var(--hha-muted) !important; }

/* the portal's back arrow: a round button on the heading's line, on every portal screen */
html.hha-shell[data-hha-depth="top"] .fhr_content_layout_header .back-button { visibility: visible !important; }
/* same chevron as the back arrow on the other screens */
html.hha-shell .fhr_content_layout_header .back-button { font-size: 0 !important; }
html.hha-shell .fhr_content_layout_header .back-button::before {
  content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.hha-shell .fhr_content_layout_header .back-button font { display: none !important; }

/* the portal's page title gets the same lighter band with a thin line */
html.hha-shell .fhr_content_layout_header { position: relative !important; isolation: isolate; margin-bottom: 16px !important; padding: 16px 16px 18px !important; }
html.hha-shell .fhr_content_layout_header::before, html.hha-shell .fhr_content_layout_header::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; clip-path: inset(0 -100vmax); pointer-events: none; }
html.hha-shell .fhr_content_layout_header::before { top: 0; bottom: 0; background: #161619; box-shadow: 0 0 0 100vmax #161619; }
html.hha-shell .fhr_content_layout_header::after { bottom: 0; height: 1px; background: #2c2c30; box-shadow: 0 0 0 100vmax #2c2c30; }
html.hha-shell .fhr_content_layout_header .fhr_page_title, html.hha-shell .fhr_content_layout_header .fcom_page_title { font-size: clamp(28px, 7.6vw, 38px) !important; }
@media (min-width: 1000px) { html.hha-shell .fhr_content_layout_header { padding: 22px 24px 22px !important; } }
html.hha-shell .fhr_content_layout_header { margin-bottom: 4px !important; }
html.hha-shell .fhr_content_layout_header .back-button, html.hha-shell .fhr_content_layout_header .fhr_page_title, html.hha-shell .fhr_content_layout_header .fcom_page_title { align-self: center !important; margin-top: 0 !important; margin-bottom: 0 !important; }
html.hha-shell .fhr_content_layout_header .back-button { position: relative !important; }
html.hha-shell .fhr_content_layout_header .back-button::before { position: absolute; inset: 0; margin: auto; }

/* ---------- Portal page header: ONE row = back, title, the page's buttons. Filter tabs get a slim second row. ---------- */
html.hha-shell .fhr_content_layout_header { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px; grid-template-columns: none !important; }
html.hha-shell .fhr_content_layout_header .back-button { order: 0; flex: none; }
html.hha-shell .fhr_content_layout_header .fhr_page_title, html.hha-shell .fhr_content_layout_header .fcom_page_title {
  order: 1; flex: 1 1 0; min-width: 0; text-align: left !important;
  font-size: clamp(24px, 6.4vw, 32px) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.hha-shell .fhr_content_layout_header.hha-squeezed .fhr_page_title, html.hha-shell .fhr_content_layout_header.hha-squeezed .fcom_page_title { display: none !important; }
html.hha-shell .fhr_content_layout_header .fcom_page_title .fcom_space_title { max-width: 100%; overflow: hidden; }
html.hha-shell .fhr_page_actions, html.hha-shell .fhr_page_actions .space_header, html.hha-shell .fhr_page_actions .object_menu:has(> nav) { display: contents !important; }
html.hha-shell .fhr_page_actions * { order: 2; }
html.hha-shell .fhr_page_actions .object_menu:has(> ul), html.hha-shell .fhr_page_actions .object_menu > nav { order: 3 !important; flex: 1 0 100%; margin: 0 !important; }
html.hha-shell .fhr_page_actions .el-button, html.hha-shell .fhr_page_actions a.fcom_primary_button, html.hha-shell .fhr_page_actions .menu_actions > a, html.hha-shell .fhr_page_actions button {
  flex: none; min-height: 36px !important; height: 36px; padding: 0 14px !important; font-size: 14px !important; margin: 0 !important; white-space: nowrap;
}
html.hha-shell .fhr_page_actions .menu_actions { display: flex !important; align-items: center; gap: 8px; flex: none; }
/* filter tabs (All / My ...) as small chips */
html.hha-shell .fhr_page_actions .object_menu ul { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 !important; padding: 0 !important; }
html.hha-shell .fhr_page_actions .object_menu ul a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px !important; border-radius: 999px !important; background: #1c1c1e !important; color: var(--hha-ink) !important; font-size: 14px !important; font-weight: 600; white-space: nowrap; }
html.hha-shell .fhr_page_actions .object_menu ul a.router-link-exact-active, html.hha-shell .fhr_page_actions .object_menu ul a.router-link-active { background: #fff !important; color: #000 !important; }
/* less empty space between the header band and the page */
html.hha-shell .fhr_content_layout_body { padding-top: 12px !important; }
html.hha-shell .fhr_content_layout_body > .search_member:first-child, html.hha-shell .fhr_content_layout_body .search_member { margin-top: 0 !important; }

/* hearts: instant answer to a tap */
html.hha-shell li.fcom_reaction[aria-pressed="true"] svg path, html.hha-shell li.fcom_reaction.hha-heart-on svg path { fill: #ff3d9a !important; }
html.hha-shell li.fcom_reaction.hha-heart-off svg path { fill: currentColor !important; }
html.hha-shell li.fcom_reaction.hha-heart-pop svg { animation: hha-heart 420ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes hha-heart { 40% { transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { html.hha-shell li.fcom_reaction.hha-heart-pop svg { animation: none; } }
/* a heart that did not save: a plain note at the bottom (shell.js tell()) */
.hha-like-note { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 99999; width: max-content; max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 14px; background: #1c1c1e; color: #fff; font-size: 14.5px; line-height: 1.35; text-align: center; text-wrap: balance; box-shadow: 0 10px 30px rgba(0,0,0,.5); opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity 200ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.hha-like-note.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .hha-like-note { transition: opacity 200ms ease; transform: translate(-50%, 0); } }

/* ---------- page headers: smaller, ALWAYS one row (back, title, filter chips that scroll, buttons) ---------- */
html.hha-shell .fhr_content_layout_header { flex-wrap: nowrap !important; gap: 8px; padding-top: 12px !important; padding-bottom: 12px !important; }
html.hha-shell .fhr_content_layout_header .fhr_page_title, html.hha-shell .fhr_content_layout_header .fcom_page_title,
html.hha-shell .fhr_content_layout_header.hha-squeezed .fhr_page_title, html.hha-shell .fhr_content_layout_header.hha-squeezed .fcom_page_title {
  display: block !important; flex: 0 1 auto; max-width: 52%; font-size: clamp(20px, 5.4vw, 26px) !important; line-height: 1.15 !important;
}
html.hha-shell .fhr_content_layout_header:not(:has(.object_menu ul, .object_menu nav)) .fhr_page_title,
html.hha-shell .fhr_content_layout_header:not(:has(.object_menu ul, .object_menu nav)) .fcom_page_title { flex: 1 1 0; max-width: none; }
html.hha-shell .fhr_page_actions .object_menu:has(> ul), html.hha-shell .fhr_page_actions .object_menu > nav { order: 3 !important; flex: 1 1 0 !important; min-width: 0; overflow: hidden; }
html.hha-shell .fhr_page_actions .object_menu ul, html.hha-shell .fhr_page_actions .object_menu > nav > ul {
  -webkit-mask: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 22px), transparent); padding-right: 18px !important;
}
html.hha-shell .fhr_page_actions .el-button, html.hha-shell .fhr_page_actions a.fcom_primary_button, html.hha-shell .fhr_page_actions .menu_actions, html.hha-shell .fhr_page_actions button { order: 4 !important; }
html.hha-shell .fhr_page_actions .object_menu ul a { min-height: 32px; padding: 0 12px !important; font-size: 13.5px !important; }
@media (min-width: 1000px) { html.hha-shell .fhr_content_layout_header { padding-top: 16px !important; padding-bottom: 16px !important; } }

/* ---------- post photos: 2, 3 or 4 photos in a clean grid, never overlapping ---------- */
html.hha-shell .fcom_image_carousel .fcom_image_carousel__container:not(.fcom_image_carousel_count_1) {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: auto; gap: 4px !important;
  margin: 0 !important; padding: 0 !important; align-items: stretch !important; border-radius: 14px; overflow: hidden;
}
html.hha-shell .fcom_image_carousel__container:not(.fcom_image_carousel_count_1) .fcom_carousel__image {
  position: relative; min-width: 0; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; overflow: hidden; margin: 0 !important; line-height: 0;
}
html.hha-shell .fcom_image_carousel__container:not(.fcom_image_carousel_count_1) .fcom_carousel__image .fcom_image_wrap,
html.hha-shell .fcom_image_carousel__container:not(.fcom_image_carousel_count_1) .fcom_carousel__image .el-image {
  position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; border-radius: 0 !important; box-shadow: none !important;
}
html.hha-shell .fcom_image_carousel__container:not(.fcom_image_carousel_count_1) .fcom_carousel__image img {
  width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover !important; border-radius: 0 !important; display: block;
}
/* 3 photos: one tall on the left, two on the right */
html.hha-shell .fcom_image_carousel__container.fcom_image_carousel_num_3 .fcom_carousel__image:nth-child(1) { grid-row: 1 / span 2; aspect-ratio: auto; height: 100% !important; }
html.hha-shell .fcom_image_carousel__container .fcom_image_overlay { position: absolute !important; inset: 0; border-radius: 0 !important; line-height: 1; }
html.hha-shell .fcom_image_carousel__container .fcom_carousel__image.fcom_media_type_video { grid-column: 1 / -1 !important; aspect-ratio: 16 / 9; }

/* ---------- comments window: a calm full-screen sheet on phones, a centred card on bigger screens ---------- */
html.hha-shell .el-overlay:has(.fcom_feed_modal) .el-overlay-dialog { display: block !important; padding: 0 !important; overflow: hidden !important; }
html.hha-shell .el-dialog.fcom_feed_modal {
  --cm-top: calc(56px + env(safe-area-inset-top, 0px));
  position: fixed !important; inset: 0; width: 100% !important; max-width: none !important; height: 100dvh !important; max-height: none !important;
  margin: 0 !important; padding: var(--cm-top) 0 0 !important; border-radius: 0 !important; display: flex !important; flex-direction: column; background: #0b0b0c !important; overflow: hidden;
}
html.hha-shell .el-dialog.fcom_feed_modal::before {
  content: "Post"; position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: var(--cm-top); padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; background: #161619; border-bottom: 1px solid #2c2c30; color: #fff; font: 700 17px / 1 var(--hha-font-display);
}
html.hha-shell .el-dialog.fcom_feed_modal .el-dialog__header { position: absolute !important; z-index: 6; top: env(safe-area-inset-top, 0px); right: 8px; height: 56px; display: flex; align-items: center; padding: 0 !important; margin: 0 !important; }
html.hha-shell .el-dialog.fcom_feed_modal button.el-dialog__headerbtn { position: static !important; width: 40px !important; height: 40px !important; padding: 0 !important; display: grid; place-items: center; border-radius: 50% !important; background: #2c2c30 !important; }
html.hha-shell .el-dialog.fcom_feed_modal button.el-dialog__headerbtn .el-icon { color: #fff !important; font-size: 20px !important; }
html.hha-shell .el-dialog.fcom_feed_modal .el-dialog__body { flex: 1 1 auto; min-height: 0; padding: 0 !important; display: flex; flex-direction: column; }
html.hha-shell .el-dialog.fcom_feed_modal .el-dialog__body > .el-scrollbar { flex: 1 1 auto; min-height: 0; height: 100%; border-radius: 0 !important; }
html.hha-shell .el-dialog.fcom_feed_modal .el-scrollbar__wrap { max-height: none !important; height: 100% !important; overscroll-behavior: contain; }
html.hha-shell .el-dialog.fcom_feed_modal .feed { margin: 0 !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; padding: 14px 16px 0 !important; background: transparent !important; }
/* the post's own close link duplicates the top bar's: hide it, and keep the "..." menu in the flow so it never sits on the name */
html.hha-shell .el-dialog.fcom_feed_modal .fcom_close_pop { display: none !important; }
html.hha-shell .el-dialog.fcom_feed_modal .feed .feed_actions.fcom_concat_buttons { position: static !important; }
/* comments: wrap long words and links, keep photos inside */
html.hha-shell .el-dialog.fcom_feed_modal .feed_comments { padding-bottom: 12px; }
html.hha-shell .el-dialog.fcom_feed_modal .feed_comments, html.hha-shell .el-dialog.fcom_feed_modal .feed_comments * { overflow-wrap: anywhere; }
html.hha-shell .el-dialog.fcom_feed_modal .feed_comments img { max-width: 100%; height: auto; }
/* write a comment: pinned to the bottom, above the phone's home bar */
html.hha-shell .el-dialog.fcom_feed_modal .feed_commentbox_main {
  position: sticky !important; bottom: 0; z-index: 4; margin: 0 -16px !important; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  background: #161619 !important; border-top: 1px solid #2c2c30 !important;
}
/* while it is open, our own bars step aside */
html.hha-shell:has(.el-dialog.fcom_feed_modal) .hs-tabs, html.hha-shell:has(.el-dialog.fcom_feed_modal) .hs-top { visibility: hidden; }
@media (min-width: 768px) {
  html.hha-shell .el-dialog.fcom_feed_modal { --cm-top: 56px; inset: 24px 0 auto; margin: 0 auto !important; width: min(680px, calc(100vw - 48px)) !important; height: calc(100dvh - 48px) !important; border-radius: 20px !important; border: 1px solid #2c2c30; }
  html.hha-shell .el-dialog.fcom_feed_modal .el-dialog__header { top: 0; }
  html.hha-shell .el-dialog.fcom_feed_modal .feed_commentbox_main { padding-bottom: 12px !important; }
}
/* the title always starts on the left; buttons go to the right end */
html.hha-shell .fhr_content_layout_header { justify-content: flex-start !important; }
html.hha-shell .fhr_content_layout_header .fhr_page_title, html.hha-shell .fhr_content_layout_header .fcom_page_title { margin-right: auto !important; }

/* nothing on the left of a page title (no back arrow): the title sits in the middle, a little smaller */
html.hha-shell .fhr_content_layout_header:not(:has(.back-button)) { justify-content: center !important; }
html.hha-shell .fhr_content_layout_header:not(:has(.back-button)) .fhr_page_title,
html.hha-shell .fhr_content_layout_header:not(:has(.back-button)) .fcom_page_title { margin: 0 auto !important; flex: 0 1 auto !important; max-width: 70% !important; text-align: center !important; font-size: clamp(18px, 4.8vw, 22px) !important; }

/* portal page header band: slimmer too */
html.hha-shell .fhr_content_layout_header { padding-top: 8px !important; padding-bottom: 8px !important; min-height: 0 !important; }
html.hha-shell .fhr_content_layout_header .fhr_page_title, html.hha-shell .fhr_content_layout_header .fcom_page_title { font-size: clamp(18px, 4.8vw, 21px) !important; }
html.hha-shell .fhr_content_layout_header .back-button { width: 36px !important; height: 36px !important; min-width: 36px !important; }
@media (min-width: 1000px) { html.hha-shell .fhr_content_layout_header { padding-top: 12px !important; padding-bottom: 12px !important; } html.hha-shell .fhr_content_layout_header .fhr_page_title, html.hha-shell .fhr_content_layout_header .fcom_page_title { font-size: 22px !important; } }

/* comments window on phones: a floating card with a little room on every side (still fits the screen) */
@media (max-width: 767px) {
  html.hha-shell .el-dialog.fcom_feed_modal {
    inset: calc(10px + env(safe-area-inset-top, 0px)) 10px calc(10px + env(safe-area-inset-bottom, 0px)) 10px !important;
    width: auto !important; height: auto !important; --cm-top: 56px; border-radius: 22px !important; border: 1px solid #2c2c30;
  }
  html.hha-shell .el-dialog.fcom_feed_modal::before { padding-top: 0; border-radius: 22px 22px 0 0; }
  html.hha-shell .el-dialog.fcom_feed_modal .el-dialog__header { top: 0; }
  html.hha-shell .el-dialog.fcom_feed_modal .feed_commentbox_main { padding-bottom: 12px !important; }
  html.hha-shell .el-overlay:has(.fcom_feed_modal) { background: rgba(0, 0, 0, 0.7) !important; }
}

/* course lessons have no chat */
.fcom_lesson_comments, .fcom_lesson_comment_box, .course_comments, .fcom_course_comments, .fcom_course_comments_header { display: none !important; }

/* ---------- inside a lesson: calmer header, bigger title, a lesson bar on phones ---------- */
html.hha-shell .fcom_lesson_wrap .fcom_lesson_header, html.hha-shell .fcom_lesson_wrap .fcom_lesson_title { margin-bottom: 8px; }
html.hha-shell .fcom_lesson_wrap .lesson_title, html.hha-shell .fcom_lesson_wrap h1.fcom_lesson_title, html.hha-shell .fcom_lesson_wrap .fcom_lesson_name { font: 800 clamp(22px, 6vw, 30px) / 1.15 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; letter-spacing: -0.02em !important; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_number, html.hha-shell .fcom_lesson_wrap .lesson_number { font-size: 12.5px !important; font-weight: 700 !important; color: #ff5aa8 !important; text-transform: uppercase; letter-spacing: 0.04em; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_content { font-size: 16px; line-height: 1.6; }
html.hha-shell .fcom_lesson_wrap .lesson_feature_media, html.hha-shell .fcom_lesson_wrap .fcom_lesson_content iframe, html.hha-shell .fcom_lesson_wrap .fcom_lesson_content video { border-radius: 18px; overflow: hidden; }
html.hha-shell .fcom_lesson_wrap .el-button--primary, html.hha-shell .fcom_lesson_wrap .fcom_primary_button { background: #d4148a !important; border-color: #d4148a !important; border-radius: 999px !important; min-height: 48px; font: 500 15px / 1 Oswald, system-ui, sans-serif !important; letter-spacing: 0.05em; text-transform: uppercase; }
.hha-lbar { display: none; }
@media (max-width: 999px) {
  html.hha-shell .fcom_lesson_wrap .fcom_lesson_nav { display: none !important; }
  html.hha-shell .fcom_lesson_wrap { padding-bottom: 90px !important; }
  .hha-lbar { position: fixed; z-index: 9990; left: 12px; right: 12px; bottom: calc(var(--hs-tabs, 58px) + 24px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; border-radius: 999px; background: #1c1c1e; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.9); }
  .hha-lbar-list { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 8px; border: 0; border-radius: 999px; background: #2a2a2e; color: #fff; font: 600 14px / 1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
  .hha-lbar-list svg { width: 18px; height: 18px; }
  .hha-lbar-list[hidden] { display: none; }
  .hha-lbar-prog { display: grid; gap: 5px; min-width: 0; }
  .hha-lbar-prog b { font-size: 12.5px; color: #98989f; font-variant-numeric: tabular-nums; text-align: center; }
  .hha-lbar-prog i { display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
  .hha-lbar-prog u { display: block; height: 100%; width: 0; border-radius: 4px; background: #ff3d9a; transition: width 400ms cubic-bezier(0.23, 1, 0.32, 1); }
  .hha-lbar-next { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 10px 0 16px; border: 0; border-radius: 999px; background: #d4148a; color: #fff; font: 500 15px / 1 Oswald, system-ui, sans-serif; letter-spacing: 0.05em; text-transform: uppercase; }
  .hha-lbar-next svg { width: 18px; height: 18px; }
  .hha-lbar-next[disabled] { opacity: 0.45; }
  .hha-lsheet { position: fixed; inset: 0; z-index: 10001; }
  .hha-lsheet[hidden] { display: none; }
  .hha-lsheet-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); opacity: 0; transition: opacity 260ms ease; }
  .hha-lsheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 80svh; overflow-y: auto; padding: 10px 8px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0; background: #161618; transform: translateY(100%); transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1); }
  .hha-lsheet.is-open .hha-lsheet-bg { opacity: 1; }
  .hha-lsheet.is-open .hha-lsheet-panel { transform: none; }
  .hha-lsheet-grab { display: block; width: 40px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: #3a3a3e; }
  .hha-lsheet-panel { padding: 10px 14px calc(20px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
  .hha-lsheet-head { position: sticky; top: -10px; z-index: 2; display: flex; align-items: center; gap: 10px; margin: -10px -14px 0; padding: 12px 16px 10px; background: #161618; }
  .hha-lsheet-grab { position: sticky; top: 0; z-index: 3; }
  .hha-lsheet-head h2 { margin: 0; font: 800 20px / 1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #fff; }
  .hha-lsheet-pct { font-size: 13px; font-weight: 600; color: #ff5aa8; }
  .hha-lsheet-x { margin-left: auto; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #2a2a2e; color: #fff; }
  .hha-lsheet-x svg { width: 18px; height: 18px; }
  .hha-lsheet-sec { margin: 12px 4px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8e8e93; }
  .hha-lsheet-sec:first-child { margin-top: 2px; }
  .hha-lsheet-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 10px; border: 0; border-radius: 14px; background: transparent; color: #f5f5f7; font: 500 15px / 1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; text-align: left; cursor: pointer; }
  .hha-lsheet-item:active { background: #222226; }
  .hha-lsheet-item.is-cur { background: rgba(255, 61, 154, 0.14); color: #fff; font-weight: 700; }
  .hha-lsheet-mark { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #3a3a3e; color: #fff; box-sizing: border-box; }
  .hha-lsheet-mark svg { width: 14px; height: 14px; }
  .hha-lsheet-item.is-done .hha-lsheet-mark { border-color: #34c759; background: #34c759; }
  .hha-lsheet-item.is-cur .hha-lsheet-mark { border-color: #ff3d9a; }
  .hha-lsheet-item.is-cur.is-done .hha-lsheet-mark { background: #ff3d9a; }
}

/* ---------- the reading experience inside a lesson ---------- */
html.hha-shell .fcom_lesson_wrap .fcom_back_space { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
html.hha-shell .fcom_lesson_wrap .fcom_back_space .fcom_go_back { display: grid; place-items: center; width: 36px; height: 36px; margin-left: -8px; border-radius: 50%; color: #fff; }
html.hha-shell .fcom_lesson_wrap .fcom_back_space .fcom_go_back:active { background: rgba(255, 255, 255, 0.08); }
html.hha-shell .fcom_lesson_wrap .fcom_back_space .fcom_arrow_icon { width: 18px; height: 18px; }
.hha-lback { font: 700 16px / 1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #fff; }
.hha-lback small { font-size: 13px; font-weight: 500; color: #8e8e93; margin-left: 2px; }
.hha-lprog { position: sticky; top: 0; z-index: 6; height: 3px; margin: 0; background: transparent; pointer-events: none; }
.hha-lprog i { display: block; height: 100%; background: linear-gradient(90deg, #d4148a, #ff5aa8); transform-origin: left; transform: scaleX(0); transition: transform 120ms linear; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_details { padding: 16px 28px 24px !important; }
@media (max-width: 999px) { html.hha-shell .fcom_lesson_wrap .fcom_lesson_details { padding: 14px 24px 170px !important; } html.hha-shell .fcom_lesson_wrap .fcom_lesson_content > p, html.hha-shell .fcom_lesson_wrap .fcom_lesson_content > ul, html.hha-shell .fcom_lesson_wrap .fcom_lesson_content > ol, html.hha-shell .fcom_lesson_wrap .fcom_lesson_content > h2, html.hha-shell .fcom_lesson_wrap .fcom_lesson_content > h3 { margin-left: 4px !important; margin-right: 4px !important; } }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_header { position: relative; overflow: hidden; margin: 0 0 18px !important; padding: 20px 18px 18px !important; border-radius: 22px; background: radial-gradient(120% 140% at 100% 0%, rgba(212, 20, 138, 0.42), rgba(212, 20, 138, 0) 55%), #141416; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_header::after { content: attr(data-n); position: absolute; right: 10px; top: -14px; font: 700 96px / 1 Oswald, "Arial Narrow", sans-serif; color: rgba(255, 255, 255, 0.06); letter-spacing: -0.02em; pointer-events: none; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_header .fcom_lesson_title { width: 100%; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_header h1 { position: relative; margin: 2px 0 0 !important; max-width: 20ch; }
.hha-lmeta { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hha-lmeta span { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 12.5px; font-weight: 600; color: #e5e5ea; }
.hha-lmeta svg { width: 15px; height: 15px; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_content { font-size: 17px !important; line-height: 1.6 !important; color: #e6e6ea; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_content > p, html.hha-shell .fcom_lesson_wrap .fcom_lesson_content .hha-lcard p { margin: 0 0 12px; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_content > p:first-child { font-size: 18px; color: #fff; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_content hr, html.hha-shell .fcom_lesson_wrap .fcom_lesson_content .wp-block-separator { display: none !important; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_content h2, html.hha-shell .fcom_lesson_wrap .fcom_lesson_content > h3 { position: relative; margin: 26px 0 12px !important; padding-left: 14px; font: 800 clamp(20px, 5.4vw, 24px) / 1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; letter-spacing: -0.015em; color: #fff; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_content h2::before, html.hha-shell .fcom_lesson_wrap .fcom_lesson_content > h3::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 2px; background: linear-gradient(180deg, #ff5aa8, #d4148a); }
.hha-lcard { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0 0 12px; padding: 16px 16px 6px; border-radius: 20px; background: #121214; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.hha-lcard.has-emoji { padding-top: 14px; }
.hha-lemoji { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 14px; background: rgba(255, 61, 154, 0.14); font-size: 24px; line-height: 1; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_content .hha-lcard h3, html.hha-shell .fcom_lesson_wrap .fcom_lesson_content .hha-lcard h4 { margin: 0 0 6px !important; font: 700 18px / 1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; color: #fff; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_content .hha-lcard p:last-child { margin-bottom: 10px; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_content ul, html.hha-shell .fcom_lesson_wrap .fcom_lesson_content ol { padding-left: 22px; margin: 0 0 12px; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_content li { margin: 0 0 6px; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_content ul li::marker { color: #ff5aa8; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_content blockquote { margin: 0 0 14px; padding: 14px 16px; border-radius: 18px; border-left: 4px solid #ffcf5a; background: rgba(255, 207, 90, 0.08); color: #fff; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_content blockquote p { margin: 0; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_content strong { color: #fff; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_content a { color: #ff5aa8; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_content img, html.hha-shell .fcom_lesson_wrap .fcom_lesson_content figure { max-width: 100%; height: auto; border-radius: 18px; margin: 0 0 14px; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_content figure img { margin: 0; }
.hha-lend { display: grid; justify-items: center; gap: 12px; margin: 22px 0 8px; padding: 22px 18px; border-radius: 22px; background: linear-gradient(135deg, rgba(212, 20, 138, 0.28), rgba(212, 20, 138, 0.06)), #121214; text-align: center; }
.hha-lend-title { margin: 0; font-size: 17px; font-weight: 700; color: #fff; }
.hha-lend-next { display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 26px 0 28px; border: 0; border-radius: 999px; background: #d4148a; color: #fff !important; font: 500 16px / 1 Oswald, system-ui, sans-serif; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none !important; cursor: pointer; box-shadow: 0 14px 30px -12px rgba(212, 20, 138, 0.8); transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.hha-lend-next svg { width: 18px; height: 18px; }
.hha-lend-next:active { transform: scale(0.97); }
@media (min-width: 1000px) {
  html.hha-shell .fcom_lesson_wrap .fcom_lesson_details { max-width: 820px; margin: 0 auto; padding: 24px 40px 40px !important; }
  html.hha-shell .fcom_lesson_wrap .fcom_lesson_header { padding: 28px 28px 24px !important; }
  html.hha-shell .fcom_lesson_wrap .fcom_lesson_header::after { font-size: 150px; top: -26px; right: 18px; }
  html.hha-shell .fcom_lesson_wrap .fcom_lesson_content { font-size: 17.5px !important; }
  .hha-lcard { padding: 18px 20px 8px; }
  .hha-lend { margin-top: 32px; }
  html.hha-shell .fcom_lesson_sidebar .fcom_lesson_item.active, html.hha-shell .fcom_lesson_sidebar .is-active { background: rgba(212, 20, 138, 0.14) !important; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) { .hha-lprog i { transition: none; } }
/* lesson hero: one column, the meta under the title; the "Lesson 6 of 11" sits right next to the back arrow */
html.hha-shell .fcom_lesson_wrap .fcom_lesson_header { display: block !important; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_header .fcom_lesson_number { display: none !important; }
html.hha-shell .fcom_lesson_wrap .fcom_lesson_header h1 { max-width: 24ch; padding-right: 56px; }
html.hha-shell .fcom_lesson_wrap .fcom_back_space { justify-content: flex-start !important; }
html.hha-shell .fcom_lesson_wrap .fcom_back_space > *:not(.fcom_go_back):not(.hha-lback) { margin-left: auto; }

@media (min-width: 1000px) { html.hha-shell .fcom_lesson_wrap .fcom_lesson_header .fcom_lesson_nav { position: absolute; right: 18px; top: 18px; z-index: 2; margin: 0 !important; } }

/* while a lesson loads: no "Courses" header, no shortcuts, no grey skeleton bars, just a quiet pink spinner */
html[data-hha-lesson="1"] .fhr_content_layout_header, html[data-hha-lesson="1"] .hs-shortcuts { display: none !important; }
html.hha-portal .el-skeleton { position: relative; min-height: 220px; }
html.hha-portal .el-skeleton > * { visibility: hidden; }
html.hha-portal .el-skeleton::after { content: ""; position: absolute; left: 50%; top: 90px; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; border: 3px solid rgba(255, 61, 154, 0.25); border-top-color: #ff3d9a; animation: hha-spin 700ms linear infinite; }
@keyframes hha-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html.hha-portal .el-skeleton::after { animation-duration: 1.6s; } }

/* lessons: no black gap under the header, a bar that stands out, easier text */
html[data-hha-lesson="1"] .fhr_content_layout, html[data-hha-lesson="1"] .fcom_lesson_wrap, html[data-hha-lesson="1"] .fcom_portal_body { padding-top: 0 !important; margin-top: 0 !important; }
html[data-hha-lesson="1"] .fhr_content_layout > *:first-child { margin-top: 0 !important; }
@media (max-width: 999px) {
  .hha-lbar { background: #222226 !important; border: 1px solid #3a3a40; box-shadow: 0 22px 60px 6px rgba(0, 0, 0, 0.9), 0 0 80px 24px rgba(0, 0, 0, 0.6) !important; }
  html.hha-shell .fcom_lesson_wrap .fcom_lesson_content { font-size: 18px !important; line-height: 1.75 !important; }
  html.hha-shell .fcom_lesson_wrap .fcom_lesson_content > p, html.hha-shell .fcom_lesson_wrap .fcom_lesson_content .hha-lcard p { margin-bottom: 16px; }
  html.hha-shell .fcom_lesson_wrap .fcom_lesson_content li { margin-bottom: 10px; }
  .hha-lcard { padding: 18px 18px 8px; margin-bottom: 14px; }
}

/* log in / sign up on desktop: one centred card */
@media (min-width: 1000px) {
  html.hha-shell .fcom_auth_page { display: flex !important; align-items: center; justify-content: center; min-height: calc(100vh - 20px); padding: 40px 20px; }
  html.hha-shell .fcom_auth_page .fcom_layout_side { display: none !important; }
  html.hha-shell .fcom_auth_page .fcom_layout_main { width: min(480px, 100%); margin: 0 auto; }
}

html[data-hha-lesson="1"] .fhr_content_layout_body { padding-top: 0 !important; }

/* course completed: confetti + certificate */
.hha-cert { position: fixed; inset: 0; z-index: 10070; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, 0.78); opacity: 0; transition: opacity 240ms ease; }
.hha-cert.is-on { opacity: 1; }
.hha-cert-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hha-cert-card { position: relative; width: min(440px, 100%); display: grid; justify-items: center; gap: 8px; padding: 34px 24px 26px; border-radius: 26px; background: linear-gradient(160deg, #1b0d16, #121214 60%); color: #fff; text-align: center; box-shadow: 0 0 0 1.5px rgba(255, 207, 90, 0.5), 0 30px 80px -20px rgba(0, 0, 0, 1); transform: scale(0.94); transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1); }
.hha-cert.is-on .hha-cert-card { transform: none; }
.hha-cert-ribbon { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: #d4148a; color: #fff; font: 500 13px / 1 Oswald, "Arial Narrow", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.hha-cert-kicker { margin: 6px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ffcf5a; }
.hha-cert-who { margin: 0; font-size: 18px; font-weight: 600; color: #e5e5ea; }
.hha-cert-title { margin: 0; font: 800 clamp(22px, 6vw, 28px) / 1.15 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; letter-spacing: -0.02em; text-wrap: balance; }
.hha-cert-sub { margin: 0 0 10px; font-size: 13.5px; color: #a1a1a6; }
.hha-cert-btns { display: grid; gap: 8px; width: 100%; }
.hha-lend-next--ghost { background: #2a2a2e; box-shadow: none; }
.hha-cert-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; }
.hha-cert-x svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .hha-cert, .hha-cert-card { transition: none; } }

/* lesson videos: round corners on the player and its wrapper */
html.hha-shell .fcom_lesson_wrap .lesson_feature_media, html.hha-shell .fcom_lesson_wrap .fcom_lesson_media, html.hha-shell .fcom_lesson_wrap .fcom_media_wrapper, html.hha-shell .fcom_lesson_wrap [class*="video"], html.hha-shell .fcom_lesson_wrap [class*="_media"], html.hha-shell .fcom_lesson_wrap .plyr, html.hha-shell .fcom_lesson_wrap iframe, html.hha-shell .fcom_lesson_wrap video, html.hha-shell .fcom_lesson_wrap .wp-block-embed__wrapper, html.hha-shell .fcom_lesson_wrap figure.wp-block-video, html.hha-shell .fcom_lesson_wrap figure.wp-block-embed { border-radius: 18px !important; overflow: hidden !important; }
/* Next buttons: Oswald bold caps, no letter spacing */
.hha-lbar-next, .hha-lend-next, .hha-cert .hha-lend-next { font-family: Oswald, "Arial Narrow", sans-serif !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: uppercase; }

/* a course's own page: no shortcuts, lessons as friendly cards */
html[data-hha-course="1"] .hs-shortcuts { display: none !important; }
html[data-hha-course="1"] .fcom_course_single .fcom_section_primary, html[data-hha-course="1"] .fcom_course_sections .fcom_section_primary, html[data-hha-course="1"] .fcom_lesson_list .fcom_section_primary { margin: 0 0 14px; padding: 6px 8px 8px; border-radius: 20px; background: #121214; }
html[data-hha-course="1"] .fcom_section_primary_item_title h4 { font: 800 17px / 1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; color: #fff !important; }
html[data-hha-course="1"] .fcom_section_primary_item { padding: 10px 8px 6px; }
html[data-hha-course="1"] .fcom_section_item { margin: 2px 0; border-radius: 14px; transition: background-color 160ms ease; }
html[data-hha-course="1"] .fcom_section_item:active { background: #1c1c1e; }
html[data-hha-course="1"] .fcom_section_item_title { padding: 10px 10px; }
html[data-hha-course="1"] .fcom_heading_item { font-size: 15px !important; font-weight: 500; color: #f5f5f7 !important; }
html[data-hha-course="1"] .fcom_section_item .el-icon, html[data-hha-course="1"] .fcom_section_item svg { color: #ff5aa8; }
html[data-hha-course="1"] .fcom_course_header, html[data-hha-course="1"] .fcom_course_single_header { border-radius: 22px; overflow: hidden; }
html[data-hha-course="1"] .fcom_course_header img, html[data-hha-course="1"] .fcom_course_cover img { border-radius: 22px; }
html[data-hha-course="1"] .fcom_course_description, html[data-hha-course="1"] .fcom_course_single .feed_texts { font-size: 16px; line-height: 1.6; color: #e6e6ea; }
html[data-hha-course="1"] .el-button--primary, html[data-hha-course="1"] .fcom_primary_button, html[data-hha-course="1"] .fcom_course_enroll_btn { background: #d4148a !important; border-color: #d4148a !important; border-radius: 999px !important; min-height: 50px; font: 700 16px / 1 Oswald, system-ui, sans-serif !important; letter-spacing: 0; text-transform: uppercase; }
html[data-hha-course="1"] .el-progress-bar__outer { background: #2c2c30 !important; border-radius: 999px; }
html[data-hha-course="1"] .el-progress-bar__inner { background: linear-gradient(90deg, #d4148a, #ff5aa8) !important; }

/* the title row: whatever the page adds (Posts, Members, the dots menu) sits on the right as icons */
html.hha-shell .fhr_content_layout_header { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 6px; }
html.hha-shell .fhr_content_layout_header .back-button, html.hha-shell .fhr_content_layout_header .hs-back { order: 0; flex: none; }
html.hha-shell .fhr_content_layout_header .fhr_page_title, html.hha-shell .fhr_content_layout_header .fcom_page_title { order: 1; flex: 1 1 auto; min-width: 0; text-align: center; }
html.hha-shell .fhr_page_actions .object_menu:has(> ul), html.hha-shell .fhr_page_actions .object_menu > nav, html.hha-shell .fhr_page_actions .fcom_dot_menu, html.hha-shell .fhr_page_actions .el-dropdown, html.hha-shell .fhr_page_actions > button, html.hha-shell .fhr_page_actions .menu_actions { order: 5 !important; flex: 0 0 auto !important; margin: 0 !important; }
html.hha-shell .fhr_page_actions .object_menu:has(> ul) { display: block !important; }
html.hha-shell .object_menu .fcom_space_menu_ul { padding: 0 !important; gap: 6px !important; overflow: visible; }
html.hha-shell .object_menu .fcom_space_menu_ul a.fcom_custom_link.hs-iconlink { width: 40px; height: 40px; padding: 0 !important; display: grid; place-items: center; border-radius: 50% !important; background: #1c1c1e !important; color: #fff !important; }
html.hha-shell .object_menu .fcom_space_menu_ul a.fcom_custom_link.hs-iconlink.router-link-exact-active { background: rgba(212, 20, 138, 0.3) !important; color: #ff5aa8 !important; }
html.hha-shell .hs-iconlink svg { width: 20px; height: 20px; }
html.hha-shell .fhr_page_actions .fcom_dot_menu { width: 40px; height: 40px; border-radius: 50%; background: #1c1c1e; color: #fff; display: grid; place-items: center; }
/* phones: the space menu trigger is one round icon on the right; Join sits next to it */
html.hha-shell .fhr_content_layout_header .menu_actions { order: 9 !important; margin-left: auto !important; display: flex !important; align-items: center; gap: 6px; flex: 0 0 auto !important; }
html.hha-shell .fhr_content_layout_header .menu_actions .fcom_space_menu_trigger_label { display: none !important; }
html.hha-shell .fhr_content_layout_header .menu_actions .fcom_dot_menu { width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 50%; background: #1c1c1e !important; color: #fff !important; display: grid !important; place-items: center; }
html.hha-shell .fhr_content_layout_header .menu_actions .fcom_dot_menu > span { display: grid !important; place-items: center; width: 100%; }
html.hha-shell .fhr_content_layout_header .menu_actions .fcom_space_menu_trigger .el-icon svg { width: 20px; height: 20px; }
html.hha-shell .fhr_content_layout_header .menu_actions .fcom_join_space_auth, html.hha-shell .fhr_content_layout_header .menu_actions .fcom_primary_button { min-height: 36px !important; padding: 0 14px !important; }
html.hha-shell .fhr_content_layout_header .fcom_page_title { padding-left: 4px; }

/* likes work the FluentCommunity way again: the faces + "likes" row shows after a heart and opens the list of who liked */

/* comments card: only as tall as its content (no empty box under the comment field), never taller than the screen */
html.hha-shell .el-dialog.fcom_feed_modal { height: auto !important; bottom: auto !important; max-height: calc(100dvh - 48px) !important; }
html.hha-shell .el-dialog.fcom_feed_modal .el-dialog__body > .el-scrollbar { height: auto !important; }
html.hha-shell .el-dialog.fcom_feed_modal .el-scrollbar__wrap { height: auto !important; max-height: calc(100dvh - 48px - var(--cm-top, 56px)) !important; }
@media (max-width: 767px) {
  html.hha-shell .el-dialog.fcom_feed_modal { max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important; }
  html.hha-shell .el-dialog.fcom_feed_modal .el-scrollbar__wrap { max-height: calc(100dvh - 20px - 56px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important; }
}

/* welcome banner: hidden until our photo of the visit is in place (no flash of the old one) */
html.hha-shell .fcom_welcome_box .feed_media img:not([data-hha-wb]), html.hha-shell .fcom_welcome_box img.el-image__inner:not([data-hha-wb]) { opacity: 0; }
html.hha-shell .fcom_welcome_box img[data-hha-wb] { opacity: 1; transition: opacity 240ms ease; }
/* welcome banner: our square photo shown whole, never stretched, bled or cut */
html.hha-shell .fcom_welcome_box { padding: 8px 8px 22px !important; }
html.hha-shell .fcom_welcome_box .feed_media { display: block; width: 100% !important; height: auto !important; margin: 0 !important; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 20px; }
html.hha-shell .fcom_welcome_box .feed_media img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; object-fit: cover; object-position: center; }
/* Post popup: rows match the 16px side padding (FC pulls them out 20px), and the popup never scrolls sideways. */
html.hha-shell .el-dialog.fcom_feed_modal .feed > .feed_body, html.hha-shell .el-dialog.fcom_feed_modal .feed > .feed_footer, html.hha-shell .el-dialog.fcom_feed_modal .feed > .feed_comments { margin-left: -16px !important; margin-right: -16px !important; }
html.hha-shell .el-dialog.fcom_feed_modal .el-dialog__body, html.hha-shell .el-dialog.fcom_feed_modal .el-scrollbar__wrap { overflow-x: hidden !important; overscroll-behavior-x: none; }