/*
 * animeflv-member.css — owned by the member area.
 * Scope: /member/* (frontend/member/**), the public profile pages
 * (frontend/public-profile*, partials/profile/*, partials/member/*).
 * auth/reset-password is a stand-alone page that loads only animeflv's own
 * sheets.
 *
 * animeflv published one member page, the public profile (/perfil/<user>,
 * reference perfil-*.html): `.Wdgt.User` card + `section.WdgtCn` panels of
 * `article.Anime.alt` cards, the `.LstStylPs` grid/list tab page. css.css
 * (verbatim) draws all of that, and still carries the dormant pieces of its
 * logged-in pages: `.ListUser`, `.ListInfoUser`, `[class*=Form-]` rows,
 * `.Checkbox` / `.Radio`, `button.StylA/StylB`, `.Msj`, `.Sect` modals.
 * The member area is built from those; this file only adds what css.css
 * never drew (CMS features, engine-hook elements), in animeflv's tokens:
 * slate #3b4248, accent #01bcf3, red #fb3447 / #ff3146, green #00b046,
 * yellow #ffc107 / #fec601, text #3b4248 / #666 / #999 / #9da1a4 / #bbb,
 * hairlines #f3f3f3 / #efefef / #eceff1, panel shadow 0 0 30px rgba(0,0,0,.1).
 * Loaded on every page after animeflv-bridge.css; every rule is scoped.
 */

/* ── 1. Sidebar card (.Wdgt.User) and the account menu ─────────────────── */
.Wdgt.User .Avatar .Name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.Wdgt.User .Avatar figure a { display: block; border-radius: 50%; }
.Wdgt.User .Avatar figure img { object-fit: cover; }
.Wdgt.User .ListFollow > li > a { cursor: pointer; }
.Wdgt.User .af-UsrInfo { padding: 10px 10px 5px; }
.Wdgt.User .af-UsrInfo > li:before { width: 16px; margin-right: 8px; text-align: center; }

.af-MbrNav > .Top strong { font-size: 15px; line-height: 20px; }
.af-MbrNav .ListUser > li > a { color: #3b4248; font-size: 13px; line-height: 20px; }
.af-MbrNav .ListUser > li > a:before { width: 16px; text-align: center; }
.af-MbrNav .ListUser > li > a:hover, .af-MbrNav .ListUser > li > a.af-on, .af-MbrNav .ListUser > li > a.af-on:before { color: #01bcf3; }
.af-MbrNav .ListUser > li > a.af-on { font-weight: 700; background-color: rgba(1, 188, 243, .05); box-shadow: inset 3px 0 0 #01bcf3; }
.af-MbrNav .ListUser > li:last-child { padding-bottom: 15px; }
.af-MbrNav .ListUser { padding-bottom: 0; }
.af-MbrNav > .Bod { padding: 0; }
@media all and (max-width: 767px) {
    .af-MbrNav > .Top { cursor: pointer; }
}

.af-MbrMain > .af-MbrFlash { margin-bottom: 20px; }

/* ── 2. Forms (css.css's dormant Form-*, .Checkbox, .Radio, StylA/StylB) ── */
.af-Mbr .WdgtCn .af-Form, .af-Mbr .af-Form { margin-bottom: 0; }
.af-Mbr .af-lbl { font-size: 12px; }
.af-Mbr .Form-Grp { margin-bottom: 20px; }
.af-Mbr .Form-Grp input:not([type=checkbox]):not([type=radio]), .af-Mbr .Form-Grp textarea { color: #3b4248; font-size: 14px; }
.af-Mbr .Form-Grp textarea { min-height: 90px; padding: 10px 15px; resize: vertical; }
.af-Mbr input::placeholder, .af-Mbr textarea::placeholder, .af-Fltrs input::placeholder { color: #bbb; opacity: 1; }
.af-Mbr .Form-Grp input[readonly] { background-color: #fafafa; color: #666; }
.af-Mbr .af-Note { font-size: 12px; line-height: 18px; color: #999; margin: 5px 0 0; }
.af-Mbr p.af-Note { margin-bottom: 10px; }
.af-Mbr .af-Count { text-align: right; }
.af-Mbr .af-Num { max-width: 120px; }
.af-Mbr .af-Val { display: block; font-size: 15px; line-height: 20px; font-weight: 700; color: #3b4248; }
.af-Mbr .af-Copy p { font-size: 13px; line-height: 20px; color: #666; margin-bottom: 0; }
.af-Mbr .af-Copy a, .af-Mbr .af-Note a, .af-Mbr label.Checkbox a { color: #01bcf3; font-weight: 700; }
.af-Mbr .af-Sep { border-top: 1px solid #f3f3f3; margin: 20px -20px; }
.af-Mbr .af-FoldTitle { font-size: 15px; line-height: 20px; font-weight: 700; color: #3b4248; margin-bottom: 15px; }
.af-Mbr .af-Fold { border-top: 1px solid #f3f3f3; margin: 15px -20px 0; padding: 20px 20px 0; }
.af-Mbr .af-Inline { display: inline; margin: 0; }
.af-Mbr button.af-Lnk { display: inline; color: #01bcf3; font-size: inherit; font-weight: 700; line-height: inherit; vertical-align: baseline; }
.af-Mbr button.af-Lnk:hover { text-decoration: underline; }

/* Choices: css.css's .Checkbox / .Radio — the input stays in the label
   (visually hidden by css.css); the bridge restores native boxes elsewhere,
   so keep these at zero size. */
.af-Mbr label.Checkbox, .af-Mbr label.Radio, .af-Pp label.Checkbox { position: relative; font-size: 13px; line-height: 20px; color: #666; margin: 0 0 5px; cursor: pointer; }
.af-Mbr .Checkbox input[type=checkbox], .af-Mbr .Radio input[type=radio] { position: absolute; left: 0; top: 0; width: 0 !important; height: 0 !important; opacity: 0; margin: 0; padding: 0; }
.af-Mbr .Checkbox input + i:before { border-radius: 3px; background-color: #fff; color: #01bcf3; }
.af-Mbr .Checkbox input + i, .af-Mbr .Radio input + i { margin-right: 10px; }
.af-Mbr .Radio input + i { border-radius: 50%; background-color: #fff; }
.af-Mbr .Checkbox input:focus-visible + i:before, .af-Mbr .Radio input:focus-visible + i { box-shadow: 0 0 0 3px rgba(1, 188, 243, .25); }
.af-Mbr .af-Set label.Radio, .af-Mbr .af-Set label.af-Inl { display: inline-block; margin-right: 20px; }
.af-Mbr .Checkbox.is-locked { cursor: default; opacity: .7; }
.af-Mbr label.Checkbox, .af-Mbr label.Radio { font-weight: 400; }
.af-Mbr .af-Set label.Radio, .af-Mbr .af-Set label.af-Inl { color: #3b4248; }
.af-Mbr .WdgtCn > .Form-Grp:last-child, .af-Mbr .af-Form > .Form-Grp:last-child { margin-bottom: 0; }

/* Actions */
.af-Mbr .af-Acts { margin-top: 5px; font-size: 0; }
.af-Mbr .af-Acts > button, .af-Mbr .af-Acts > .Button { font-size: 12px; margin: 0 5px 5px 0; vertical-align: top; }
.af-Mbr .af-Acts > .Button { line-height: 20px; }
.af-Mbr button.StylB, .af-Mbr .Button.StylB { font-size: 12px; min-width: 150px; text-transform: uppercase; }
.af-Mbr button.StylA, .af-Mbr button.StylB { line-height: 20px; }
.af-Mbr button.StylA:before, .af-Mbr button.StylB:before, .af-Mbr .Button.StylA:before, .af-Mbr .Button.StylB:before { margin-right: 8px; }
.af-Mbr button[disabled].StylB, .af-Mbr button[disabled].StylA { opacity: .5; cursor: default; }
.af-Mbr button.LogOut.af-AccOut { background-color: #fb3447; color: #fff; font-size: 12px; min-width: 150px; line-height: 20px; }
.af-Mbr button.LogOut.af-AccOut:hover { opacity: .8; }
.af-Mbr button.LogOut.af-AccOut:before { margin-right: 8px; }
.af-Mbr .af-AccToggles { margin-bottom: 0; }

/* Chips (verified / AniList state) */
.af-Mbr .af-Vrf { display: inline-block; vertical-align: top; margin-left: 5px; padding: 0 8px; border-radius: 10px; font-size: 10px; line-height: 18px; font-weight: 700; text-transform: uppercase; color: #9da1a4; background-color: rgba(59, 66, 72, .08); }
.af-Mbr .af-Vrf:before { margin-right: 4px; }
.af-Mbr .af-Vrf.is-yes { color: #00b046; background-color: rgba(0, 176, 70, .1); }
.af-Mbr .af-Vrf.is-no { color: #fb3447; background-color: rgba(251, 52, 71, .1); }
.af-Mbr .af-AlState { margin-left: 0; font-size: 12px; line-height: 26px; padding: 0 12px; border-radius: 13px; text-transform: none; }

/* Profile head: avatar + e-mail */
.af-Mbr .af-AccHead { display: flex; align-items: flex-start; margin-bottom: 20px; }
.af-Mbr .af-AccAv { position: relative; flex: 0 0 80px; width: 80px; height: 80px; margin-right: 20px; border-radius: 50%; }
.af-Mbr .af-AccAv img { display: block; width: 80px; height: 80px; border-radius: 50%; object-fit: cover; padding: 3px; background-color: #fff; box-shadow: 0 0 0 1px #e8e7f0; }
.af-Mbr .af-AccAv > span { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 15px; background-color: #01bcf3; color: #fff; font-size: 13px; box-shadow: 0 0 0 3px #fff; transition: transform .2s; }
.af-Mbr .af-AccAv:hover > span { transform: scale(1.1); }
.af-Mbr .af-AccMail { flex: 1; min-width: 0; }
.af-Mbr .af-AccMail input { margin-bottom: 0; }
@media all and (max-width: 467px) {
    .af-Mbr .af-AccHead { display: block; }
    .af-Mbr .af-AccAv { display: block; margin: 0 auto 15px; }
}

/* Connected accounts */
.af-Mbr .ListCnnct { margin: 0 -20px -20px; }
.af-Mbr .ListCnnct > li { display: flex; align-items: center; flex-wrap: wrap; padding: 15px 20px; border-top: 1px solid #efefef; }
.af-Mbr .ListCnnct .af-CnName { flex: 1; font-size: 13px; color: #3b4248; }
.af-Mbr .ListCnnct .af-CnState { display: flex; align-items: center; flex-wrap: wrap; font-size: 0; }
.af-Mbr .ListCnnct .af-CnState > * { font-size: 12px; margin: 0 0 0 10px; }
.af-Mbr .ListCnnct .af-CnState .Button { font-size: 12px; }

/* AniList feedback (member-anilist.js writes a BS `.alert`; bridge draws it as .Msj) */
.af-Mbr .af-AlFeedback:empty { display: none; }
.af-Mbr .af-AlFeedback, .af-Mbr #mal-import-status { margin-top: 10px; }
.af-Mbr .af-AlFeedback ul { margin: 5px 0 0 15px; }
.af-Mbr .af-PortLoading { display: inline-block; vertical-align: top; line-height: 40px; font-size: 12px; color: #666; }
.af-Mbr .af-PortLoading img { vertical-align: -3px; margin-right: 5px; }

/* ── 3. animeflv's `.Order` pill group outside a page title ────────────── */
.af-Order { font-size: 0; margin-bottom: 15px; }
.af-Order > a { display: inline-block; vertical-align: top; position: relative; height: 30px; min-width: 65px; padding: 0 15px; font-size: 12px; font-weight: 700; line-height: 30px; text-align: center; color: #fff; background-color: #3b4248; }
.af-Order > a:first-child { border-top-left-radius: 15px; border-bottom-left-radius: 15px; }
.af-Order > a:last-child { border-top-right-radius: 15px; border-bottom-right-radius: 15px; }
.af-Order > a:hover, .af-Order > a.active { color: #fff; background-color: #01bcf3; }
.af-Order > a.active:before { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; margin: auto; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #01bcf3; }
.af-Order > a .badge { margin: -2px 0 0 6px; padding: 0 6px; min-width: 18px; font-size: 10px; line-height: 16px; vertical-align: middle; color: #fff; background-color: #fb3447; }

/* ── 4. Filter bar (animeflv's .filters + bootstrap-multiselect) ──────── */
/* Until the multiselect builds its buttons, keep the raw selects out of
   sight (css.css would draw each as a full-width 40px field). */
.af-Fltrs .filters > select { display: none; }
.af-Fltrs { margin-bottom: 0; }
.af-Fltrs .af-FltrQ { display: inline-block; vertical-align: top; margin: 0 5px 10px 0; }
.af-Fltrs .af-FltrQ input { width: 190px; height: 30px; margin: 0; padding: 0 12px; border: 0; border-radius: 3px; background-color: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); font-size: 12px; color: #333; }
.af-Fltrs .af-FltrQ input:focus { box-shadow: 0 1px 1px rgba(0, 0, 0, .1), 0 0 0 1px #01bcf3; }
.af-Fltrs .af-FltrReset { display: inline-block; vertical-align: top; margin-left: 10px; font-size: 12px; font-weight: 700; line-height: 30px; color: #fb3447; }
.af-Fltrs .af-FltrReset:before { margin-right: 5px; }
.af-Fltrs .af-FltrReset:hover { opacity: .8; }
.af-Fltrs .multiselect-container { max-height: 360px; overflow-y: auto; }
@media all and (max-width: 467px) {
    .af-Fltrs .af-FltrQ, .af-Fltrs .af-FltrQ input { width: 100%; }
}

.af-ListMeta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: -5px 0 5px; font-size: 12px; line-height: 20px; color: #9da1a4; }
.af-ListMeta strong { color: #3b4248; }
.af-Mbr p.af-ListMeta { display: block; margin-bottom: 15px; }
.af-ListMeta .Checkbox { margin: 0 !important; font-size: 12px !important; font-weight: 700; color: #3b4248 !important; }

/* Empty states inside the card grids (server: li.af-NoRes; engine:
   member-watchlist.js / member-continue-watching.js append div.no-result). */
.ListAnimes > li.af-NoRes, .ListEpisodios > li.af-NoRes { width: 100% !important; }
.af-NoRes .Msj { margin-bottom: 0; }
.af-NoRes .Msj a { margin-left: 5px; }
.watchlist > div.no-result, #list-items > div.no-result { flex: 0 0 calc(100% - 20px); margin: 20px 10px 0; padding: 10px 20px; border-radius: 20px; font-size: 12px; line-height: 20px; color: #666; background-color: rgba(255, 193, 7, .1); }

/* ── 5. Profile-list cards (article.Anime.alt, no .B) ───────────────────── */
/* Folder badges the CMS adds to animeflv's three (a.RmvFv red, a.AnmQv
   blue, a.Pndnt yellow). */
a.AnmQv.af-Vst { background-color: #00b046; padding-left: 0; }
a.AnmQv.af-Psd { background-color: #3b4248; padding-left: 0; }
a.AnmQv.af-Drp { background-color: #ff3146; padding-left: 0; }
a.AnmQv:hover, a.Pndnt:hover { color: #fff; opacity: .9; }

/* Watch-list folder menu in the badge's place (member-watchlist.js). */
.Anime.alt > .af-WlFldr { position: absolute; right: -5px; top: -5px; z-index: 5; }
.af-WlFldr > .folder-toggle { display: block; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 15px; font-size: 15px; color: #fff; background-color: #01bcf3; box-shadow: 0 2px 4px rgba(0, 0, 0, .15); }
.af-WlFldr > .folder-toggle:before { line-height: 30px; }
.af-WlFldr > .folder-toggle:hover, .af-WlFldr.show > .folder-toggle { color: #fff; transform: scale(1.1); }
.af-WlFldr > .folder-text-1 { background-color: #01bcf3; }
.af-WlFldr > .folder-text-2 { background-color: #3b4248; }
.af-WlFldr > .folder-text-3 { background-color: #ffc107; }
.af-WlFldr > .folder-text-4 { background-color: #ff3146; }
.af-WlFldr > .folder-text-5 { background-color: #00b046; }
.af-WlFldr > .dropdown-menu { top: 35px; margin: 0; }
.af-WlFldr .af-WlFldrHd { display: block; padding: 5px 15px 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; color: #9da1a4; }
.af-WlFldr .dropdown-item { cursor: pointer; }
.af-WlFldr .dropdown-item.active:after { font-family: FontAwesome; content: '\f00c'; float: right; margin-left: 10px; }
.af-WlFldr .af-folder-remove { margin-top: 5px; border-top: 1px solid #f3f3f3; color: #fb3447 !important; }
.af-WlFldr .af-folder-remove:hover { background-color: rgba(251, 52, 71, .05) !important; }
.wl-folder.wl-busy .af-WlFldr > .folder-toggle { opacity: .5; }
.Anime.alt > .af-Fldr { display: block; margin-top: 2px; text-align: center; font-size: 10px; font-weight: 700; line-height: 14px; text-transform: uppercase; color: #9da1a4; }
@media all and (min-width: 1020px) {
    .LstStylPs.show .Anime.alt > .af-Fldr { display: none; }
}

/* ── 6. Seguir viendo (the home's episode cards) ───────────────────────── */
.af-CwList > li { position: relative; }
.af-CwList .af-Prgrs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; overflow: hidden; border-radius: 0 0 5px 5px; background-color: rgba(255, 255, 255, .3); }
.af-CwList .af-Prgrs > span { display: block; height: 100%; background-color: #01bcf3; }
.af-CwList .Image img { object-fit: cover; }
.af-CwList button.cw-remove { position: absolute; left: 5px; top: 15px; z-index: 4; width: 30px; height: 30px; margin: 0; padding: 0; line-height: 30px; text-align: center; border-radius: 15px; font-size: 15px; font-weight: 400; color: #fff; background-color: #ff3146; box-shadow: 0 2px 4px rgba(0, 0, 0, .15); }
.af-CwList button.cw-remove:hover { color: #fff; background-color: #ff3146; transform: scale(1.1); }
.af-CwList button.cw-remove.is-busy { opacity: .5; }
.af-Cw .cw-toolbar .Button { line-height: 18px; padding: 5px 15px; min-width: 0; }
.af-Cw .cw-toolbar .Button:before { margin-right: 6px; }

/* ── 7. Notificaciones (ul.ListCaps rows) ──────────────────────────────── */
.af-NotiBar { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.af-NotiBar .af-Order { margin-right: 10px; }
.af-NotiActs { margin-bottom: 15px; font-size: 0; }
.af-Noti .af-NotiActs button { min-width: 0; height: 30px; margin: 0 0 0 5px; padding: 0 12px; line-height: 28px; font-size: 12px; }
.af-Noti .af-NotiActs button:first-child { margin-left: 0; }
.af-Noti .af-NotiActs button:before { margin-right: 6px; }
.af-Noti .af-NotiActs button[disabled] { opacity: .5; }
.af-Noti .af-NotiEmpty { margin-bottom: 0; }
.af-Noti .af-NotiEmpty strong { color: #3b4248; margin-right: 5px; }
.af-NotiList.ListCaps { margin: 0 -20px -20px; border-top: 1px solid #efefef; }
.af-NotiList > li > .af-NtLnk { display: block; min-height: 100px; padding: 20px 10px 20px 125px; margin-right: 70px; color: #3b4248; }
.af-NotiList > li > a.af-NtLnk:hover .Title { color: #00bcf2; }
.af-NotiList > li .Title strong { font-weight: 700; }
.af-NotiList > li.old:before { color: rgba(59, 67, 72, .2); }
.af-NotiList > li.old .Title { font-weight: 400; color: #666; }
.af-NotiList > li.new { background-color: rgba(1, 188, 243, .03); }
.af-NotiList .af-NtNew { display: inline-block; vertical-align: top; margin: 2px 0 0 5px; padding: 0 6px; border-radius: 8px; font-size: 9px; font-weight: 700; line-height: 16px; text-transform: uppercase; color: #fff; background-color: #01bcf3; }
.af-NotiList > li.old .af-NtNew { display: none; }
.af-NotiList > li p { color: #666; }
.af-NotiList > li p.af-NtTm { font-size: 11px; color: #bbb; }
.af-NotiList > li.af-NtAvatar figure, .af-NotiList > li.af-NtAvatar figure img { width: 60px; border-radius: 30px; }
.af-NotiList > li.af-NtAvatar figure { left: 75px; }
.af-NotiList > li.af-NtSystem figure { background: #f3f3f3; text-align: center; }
.af-NotiList .af-NtIco { display: block; font-size: 24px; line-height: 60px; color: #3b4248; opacity: .4; }
.af-NotiList .af-NtIco:before { margin-right: 0; }
.af-NotiList .noti-row-actions { position: absolute; right: 9px; top: 0; bottom: 0; z-index: 3; height: 26px; margin: auto; font-size: 0; }
.af-Noti .noti-row-actions button { width: 26px; height: 26px; margin: 0 0 0 4px; padding: 0; border-radius: 13px; font-size: 12px; line-height: 26px; text-align: center; color: #3b4248; background-color: #f3f3f3; }
.af-Noti .noti-row-actions button:hover { color: #fff; background-color: #01bcf3; }
.af-Noti .noti-row-actions button.noti-delete:hover { background-color: #fb3447; }
.af-Noti .noti-row-actions button:only-child { margin-left: 30px; }
@media all and (max-width: 666px) {
    .af-NotiList > li > .af-NtLnk { padding-left: 60px; }
    .af-NotiList > li.af-NtAvatar figure, .af-NotiList > li.af-NtAvatar figure img { width: 50px; height: 50px; }
    .af-NotiList > li.af-NtAvatar figure { left: 50px; }
}

/* ── 8. Avatar picker (BS4 modal in animeflv's .Sect dress) ────────────── */
.af-AvModal .Sect { margin-bottom: 0; box-shadow: 0 5px 30px rgba(0, 0, 0, .3); }
.af-AvModal .Sect > .Top { padding-top: 20px; padding-bottom: 20px; line-height: 20px; }
.af-AvModal .Sect > .Top:before { margin-right: 10px; }
.af-AvModal .Sect > .Top .close { text-shadow: none; }
.af-AvModal .Sect > .Top .close:hover { opacity: .8; }
.af-AvModal .Sect > .Bod { padding: 15px; }
.af-AvGroups.af-Order > a { margin: 0 5px 5px 0; border-radius: 15px; min-width: 0; }
.af-AvGroups.af-Order > a.active:before { display: none; }
.af-AvGroups { margin-bottom: 10px; }
.af-AvGrid { display: flex; flex-wrap: wrap; max-height: 340px; overflow-y: auto; margin: 0 -5px; padding-top: 5px; }
.af-AvGrid > .item { width: 16.666%; padding: 5px; }
.af-AvGrid > .item > span { display: block; position: relative; max-width: 80px; margin: 0 auto; border-radius: 50%; cursor: pointer; }
.af-AvGrid > .item > span img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; border: 3px solid transparent; background-color: #f3f3f3; transition: border-color .2s, transform .2s; }
.af-AvGrid > .item > span:hover img { transform: scale(1.05); }
.af-AvGrid > .item > span.active img { border-color: #01bcf3; }
.af-AvGrid > .item > span > i { display: none; position: absolute; right: -2px; top: -2px; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 11px; font-size: 11px; color: #fff; background-color: #01bcf3; box-shadow: 0 0 0 2px #fff; }
.af-AvGrid > .item > span.active > i { display: block; }
.af-AvGrid > .item > span:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(1, 188, 243, .4); }
.af-AvFoot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 15px; padding-top: 15px; border-top: 1px solid #f3f3f3; }
.af-AvFoot .af-Note { margin: 0 10px 0 0; font-size: 12px; color: #999; }
.af-AvFoot button.StylB { margin: 0; font-size: 12px; min-width: 150px; text-transform: uppercase; }
@media all and (max-width: 767px) {
    .af-AvGrid > .item { width: 25%; }
}
@media all and (max-width: 467px) {
    .af-AvGrid > .item { width: 33.333%; }
    .af-AvGrid { max-height: 50vh; }
}

/* ── 9. Public profile sidebar extras ──────────────────────────────────── */
.af-Pp .af-PpBio { padding: 15px; margin-top: -10px; }
.af-Pp .af-PpBio p { margin: 0; font-size: 12px; line-height: 18px; color: #666; word-wrap: break-word; white-space: pre-line; }
.af-Pp .af-PpFeed { margin-bottom: 20px; }
.af-Pp .af-PpFeed:last-child { margin-bottom: 0; }
.af-Pp .af-PpEmpty { margin: 0; font-size: 12px; line-height: 20px; color: #9da1a4; }
.af-Pp .af-PpEmpty:before { margin-right: 6px; }
.af-Pp .af-PpRows { margin: -5px 0 0; }
.af-Pp .af-PpRows > li { position: relative; white-space: normal; padding: 8px 0 8px 24px; border-bottom: 1px solid #f3f3f3; line-height: 18px; }
.af-Pp .af-PpRows > li:last-child { border-bottom: 0; padding-bottom: 0; }
.af-Pp .af-PpRows > li:before { position: absolute; left: 0; top: 8px; width: 16px; line-height: 18px; text-align: center; margin-right: 0; }
.af-Pp .af-PpRows strong, .af-Pp .af-PpRows a { color: #3b4248; font-weight: 700; word-wrap: break-word; }
.af-Pp .af-PpRows a:hover { color: #01bcf3; }
.af-Pp .af-PpMeta { display: block; margin-top: 2px; font-size: 11px; line-height: 16px; color: #bbb; }
.af-Pp .af-PpMore { margin-top: 15px; }
/* Phones: animeflv shows only the user card above the lists; the CMS's
   activity / posts boxes move below them (the home does the same with its
   CMS sidebar widgets). Below 767px `.BX.Row` is a plain block, so the row
   becomes a flex column and the aside lends its children to it. */
@media all and (max-width: 766px) {
    .af-Pp > .BX.Row { display: flex; flex-direction: column; }
    .af-Pp > .BX.Row > .SidebarA { display: contents; }
    .af-Pp > .BX.Row > .SidebarA > * { margin-left: 10px; margin-right: 10px; }
    .af-Pp > .BX.Row > .SidebarA > .Wdgt.User { order: 0; margin-top: 20px; }
    .af-Pp > .BX.Row > .SidebarA > .af-PpBio { order: 0; }
    .af-Pp > .BX.Row > .Main { order: 1; }
    .af-Pp > .BX.Row > .SidebarA > .af-PpFeed { order: 2; margin-top: 20px; margin-bottom: 0; }
}