/*
 * nineanime-member.css — owned by the member area.
 * Scope: /member/* (frontend/member/**), the public profile pages
 * (frontend/public-profile*, partials/profile/**) and auth/reset-password.
 *
 * 9animetv.to's logged-in pages were never archived, but its stylesheet
 * (styles.css, vendored verbatim — never edit it) still carries its own user
 * area: the `.prc_-menu` / `.prc_-main` frame, `.prc__-filter`,
 * `.block_area-profile`, `.dub-toggle`, `.no-content-block`, `.pre-tabs-min`,
 * `.dropdown-menu-native`, `.form-dark`, `.profile-avatar`, `.setting-label`,
 * `.item-unwatched`, the light `.premodal` (tmp/visual/GUIDE.md §3, §4.1).
 * The member views are built from those classes; this file adds only what
 * they do not cover — CMS features 9anime never drew, and the places where
 * an engine hook forces an element 9anime did not use — in GUIDE §1 tokens
 * only (purple #5a2e98, light purple #a885da, panels #1c1c1c / #181818 /
 * #262626 / #343434, text #fff / #ddd / #ababab / #aaa / #666, danger
 * #921925 / #bd362f, green #409f4d, amber #d39e00).
 * Loaded on every page after nineanime-bridge.css.
 */

/* ------------------------------------------------------------------ frame */

.member-page .prc_-main > .na-member-flash { font-size: 13px; line-height: 1.4em; border: none; border-radius: 0; margin-bottom: 20px; }

/* Menu items: fixed icon column so the labels line up. */
.prc_-menu .prc__-list .item .btn i { width: 18px; text-align: center; }

/* The member card in 9anime's picture slot above the menu (`.prc__-icon`,
   hidden ≤1279 by styles.css). */
.prc_-menu .prc__-icon.na-member-card { margin-bottom: 20px; padding: 20px 15px 15px; background: #1c1c1c; border-radius: 6px; text-align: center; }
.prc_-menu .prc__-icon.na-member-card .nmc-avatar { display: inline-block; margin-bottom: 10px; }
.prc_-menu .prc__-icon.na-member-card .nmc-avatar img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.na-member-card .nmc-name { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 16px; font-weight: 500; line-height: 1.3em; color: #fff; }
.na-member-card .nmc-name > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* styles.css stretches every image in the card (`.prc_-menu .prc__-icon img
   { width: 100% }`, meant for 9anime's own profile icon) — the rank badge
   beside the name blew up to the card's width. Pin it to the size the
   user-badge component asks for (18px; 22px for an uploaded custom badge). */
.prc_-menu .prc__-icon.na-member-card .nmc-name img.badg-level { flex: 0 0 auto; width: 18px; height: 18px; max-width: none; object-fit: contain; }
.prc_-menu .prc__-icon.na-member-card .nmc-name img.badg-level.level-custom { width: 22px; height: 22px; }
.prc_-menu .prc__-icon.na-member-card .nmc-name .badg-aura { display: inline-flex; flex: 0 0 auto; align-items: center; }
.na-member-card .nmc-user { font-size: 12px; color: #666; margin-top: 2px; }
.na-member-card .nmc-rank { margin-top: 12px; text-align: left; }
.na-member-card .nmc-rank-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; font-size: 12px; color: #666; }
.na-member-card .nmc-rank-label { color: #a885da; font-weight: 500; }
.na-member-card .nmc-stats { display: flex; margin-top: 15px; padding-top: 12px; border-top: 1px solid #262626; }
.na-member-card .nmc-stat { flex: 1 1 50%; }
.na-member-card .nmc-stat + .nmc-stat { border-left: 1px solid #262626; }
.na-member-card .nmc-stat-number { font-size: 16px; font-weight: 600; line-height: 1.3em; color: #fff; }
.na-member-card .nmc-stat-label { font-size: 12px; color: #666; }
.na-member-card .nmc-public { margin-top: 15px; }

/* Rank / progress bar (member card, public profile card). */
.na-mana-bar { position: relative; height: 6px; background: #343434; border-radius: 3px; overflow: hidden; }
.na-mana-bar > span { position: absolute; top: 0; left: 0; bottom: 0; background: #5a2e98; }

/* ------------------------------------------------------------------ panels */

/* Count chip inside header tab buttons (notifications, public list). */
.member-page .bah-tabs .btn .badge,
.na-public-profile .bah-tabs .btn .na-tab-count { display: inline-block; margin-left: 4px; padding: 2px 5px; border-radius: 3px; background: #343434; color: #ccc; font-size: 11px; font-weight: 500; line-height: 1.2em; vertical-align: 1px; }
.member-page .bah-tabs .btn.active .badge,
.na-public-profile .bah-tabs .btn.active .na-tab-count { background: #5a2e98; color: #fff; }

/* Count line + controls over a grid / list (`.description` = #666). */
.na-list-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.na-list-meta .description { margin: 0; color: #666; font-size: 13px; }
.na-list-meta .dub-toggle { margin-top: 0; }
.na-list-meta .dub-toggle.is-busy { opacity: .6; pointer-events: none; }
.na-list-meta .dub-toggle:focus { outline: none; box-shadow: 0 0 0 2px #5a2e98; border-radius: 5px; }

/* Body copy and inline links on dark panels (9anime's .link-highlight is
   #5a2e98, made for its white modals). */
.member-page .na-copy,
.na-public-profile .na-copy { font-size: 14px; line-height: 1.6em; font-weight: 300; color: #aaa; }
.member-page .link-highlight,
.na-public-profile .link-highlight { color: #a885da !important; }
.member-page .link-highlight:hover,
.na-public-profile .link-highlight:hover { color: #fff !important; }
.member-page .na-separator { height: 1px; background: #262626; margin: 25px 0; clear: both; }

/* ------------------------------------------------------------- filter bar
   9anime's `.prc__-filter` carries one search and one "Sort"; the CMS lists
   have several menus, so the bar wraps. */
.prc__-filter.na-list-tools .item .btn { font-size: 13px; }
.prc__-filter.na-list-tools .item .btn:hover,
.prc__-filter.na-list-tools .item.show .btn { background: #2d2d2d; }
.prc__-filter.na-list-tools .item.is-on .btn span { color: #fff; }
.prc__-filter.na-list-tools .item .btn i { font-size: 11px; }
.prc__-filter.na-list-tools .item.item-btn .btn,
.prc__-filter.na-list-tools .item.item-btn .btn:hover { background: #5a2e98; color: #fff; padding: 5px 15px; }
.prc__-filter.na-list-tools .item.item-reset .btn { color: #aaa; }
.prc__-filter.na-list-tools .item.item-reset .btn span { color: inherit; }
.prc__-filter.na-list-tools .item.item-search .form-control { color: #eee; border-radius: 4px; }
.prc__-filter.na-list-tools .item.item-search .form-control:focus { border-color: #404040; }
.prc__-filter.na-list-tools .item.item-search .form-control::placeholder { color: #666; }
.prc__-filter.na-list-tools .dropdown-menu { min-width: 180px; max-height: 320px; overflow-y: auto; z-index: 20; }
.prc__-filter.na-list-tools .dropdown-menu-native .dropdown-item { white-space: nowrap; }
.na-list-meta .prc__-filter { margin: 0; }
.na-list-meta .prc__-filter .item { margin: 0; }
.prc__-filter.na-list-tools .item .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media screen and (max-width: 639px) {
    /* styles.css pairs the search (100% - 96px) with the 84px button; the
       CMS bar has menus between them in the markup, so reorder. */
    .prc__-filter.na-list-tools { display: flex; flex-wrap: wrap; }
    .prc__-filter.na-list-tools > .item { order: 2; }
    .prc__-filter.na-list-tools > .item.item-search { order: 0; }
    .prc__-filter.na-list-tools > .item.item-btn { order: 1; }
    .prc__-filter.na-list-tools > .clearfix { display: none; }
    .prc__-filter.na-list-tools .dropdown-menu { min-width: 100%; }
    .na-list-meta .prc__-filter > .item { width: auto; }
}

/* --------------------------------------------------------------- the grids
   Four across inside `.prc_-main` (≈1009px at 1440 — five would be ~186px
   beside the menu as on /home but cramped with the menu card); from ≤1279
   styles.css's own 5 / 4 / 3 / 2 steps apply. */
@media screen and (min-width: 1280px) {
    .member-page .na-member-grid .film_list-wrap .flw-item { width: calc(25% - 14px); }
}
.na-member-grid .flw-item .fd-infor,
.na-public-profile .film_list .flw-item .fd-infor { margin-top: 3px; color: #666; font-size: 12px; }
.na-member-grid .flw-item .fd-infor .dot { margin: 3px 5px; }
.na-member-grid .flw-item .fd-infor .folder-name { color: #a885da; }

/* Empty grid (server-rendered, or the line member-watchlist.js /
   member-continue-watching.js write): 9anime's .no-content-block, spanning
   the float row. */
.member-page .film_list .film_list-wrap > .no-result,
.na-public-profile .film_list .film_list-wrap > .no-result { width: calc(100% - 14px); margin: 0 7px 20px; padding: 3em 1em; border-radius: 8px; background: #2c2c2c; color: #aaa; font-size: 14px; text-align: center; }
.member-page .no-result > i,
.member-page .no-content-block > i,
.na-public-profile .no-result > i,
.na-public-profile .no-content-block > i { display: block; margin-bottom: 12px; font-size: 30px; color: #666; }
.member-page .no-result .title-page,
.member-page .no-content-block .title-page,
.na-public-profile .no-result .title-page,
.na-public-profile .no-content-block .title-page { margin-bottom: 4px; }

/* Watch List card: the folder button over the poster's top right. */
.wl-folder .dr-fav { position: absolute; top: 8px; right: 8px; z-index: 6; }
.wl-folder .dr-fav .btn-fav { width: 30px; height: 30px; padding: 0; border-radius: 50%; font-size: 13px; line-height: 30px; text-align: center; box-shadow: 0 0 5px rgba(0, 0, 0, .3) !important; }
.wl-folder .dr-fav .dropdown-menu { min-width: 150px; margin-top: 5px; }
.wl-folder .folders .dropdown-item { cursor: pointer; }
.wl-folder .folders .dropdown-item.active::after { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; float: right; margin-left: 10px; font-size: 11px; }
.wl-folder .folders .na-folder-remove { margin-top: 5px; padding-top: 8px; border-top: 1px solid #2e2e2e; color: #bd362f; }
.wl-folder .folders .na-folder-remove:hover { color: #fff; background: #921925; }
.wl-folder.wl-busy { opacity: .6; pointer-events: none; }

/* Continue Watching card: 9anime's .btn-remove-fav ✕ over the poster corner,
   the progress rule under the poster. */
.film_list-continue .flw-item .cw-remove { position: absolute; top: 0; right: 0; z-index: 6; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 0 6px 0 6px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 13px; line-height: 30px; text-align: center; cursor: pointer; }
.film_list-continue .flw-item .cw-remove:hover,
.film_list-continue .flw-item .cw-remove:focus { background: #921925; outline: none; }
.film_list-continue .flw-item .cw-remove.is-busy { opacity: .5; pointer-events: none; }
.film_list-continue .flw-item .na-progress { position: relative; height: 3px; margin: -4px 0 9px; background: #343434; border-radius: 2px; overflow: hidden; }
.film_list-continue .flw-item .na-progress > span { position: absolute; top: 0; left: 0; bottom: 0; background: #5a2e98; }

/* ----------------------------------------------------------- notifications */
.na-noti-actions .btn { margin-left: 6px; }
.na-noti-actions .btn:first-child { margin-left: 0; }
.na-noti-list .noti-row { position: relative; min-height: 84px; padding: 12px 90px 12px 76px; border-bottom: 1px solid #262626; }
.na-noti-list .noti-row.with-avatar { min-height: 64px; padding-left: 70px; }
.na-noti-list .noti-row:last-child { border-bottom: none; }
.na-noti-list .noti-row.new { background: #181818; box-shadow: inset 3px 0 0 #5a2e98; }
.na-noti-list .noti-row.has-link:hover { background: #242424; }
.na-noti-list .noti-row .film-poster { position: absolute; top: 12px; left: 15px; width: 46px; padding-bottom: 60px; border-radius: 3px; }
.na-noti-list .noti-row .film-poster .film-poster-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.na-noti-list .na-noti-avatar { position: absolute; top: 12px; left: 15px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #343434; }
.na-noti-list .na-noti-avatar img { width: 100%; height: 100%; object-fit: cover; }
.na-noti-list .na-noti-icon i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 15px; color: #aaa; }
.na-noti-list .noti-row.new .na-noti-icon i { color: #a885da; }
.na-noti-list .na-noti-title { font-size: 14px; line-height: 1.4em; color: #ababab; word-break: break-word; }
.na-noti-list .na-noti-title strong { color: #fff; font-weight: 500; }
.na-noti-list .noti-row.old .na-noti-title,
.na-noti-list .noti-row.old .na-noti-title strong { color: #787878; }
.na-noti-list .na-noti-new { display: none; margin-left: 6px; cursor: default; vertical-align: 1px; }
.na-noti-list .noti-row.new .na-noti-new { display: inline-block; }
.na-noti-list .na-noti-body { margin-top: 3px; font-size: 13px; line-height: 1.4em; color: #666; word-break: break-word; }
.na-noti-list .time { display: block; margin-top: 4px; font-size: 12px; color: #666; }
.na-noti-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
.na-noti-list .noti-row-actions { position: absolute; top: 50%; right: 10px; z-index: 2; display: flex; transform: translateY(-50%); }
.na-noti-list .noti-row-actions button { width: 30px; height: 30px; margin-left: 2px; padding: 0; border: 0; border-radius: 3px; background: none; color: #525252; font-size: 13px; line-height: 30px; cursor: pointer; }
.na-noti-list .noti-row-actions button:hover { background: #2a2a2a; color: #fff; }
.na-noti-list .noti-row-actions .noti-delete:hover { color: #bd362f; }
.na-noti-empty { margin: 0; }
@media screen and (max-width: 479px) {
    .na-noti-actions { width: 100%; display: flex; }
    .na-noti-actions .btn { flex: 1 1 50%; }
    .na-noti-list .noti-row { padding-right: 15px; padding-bottom: 42px; }
    .na-noti-list .noti-row-actions { top: auto; bottom: 8px; transform: none; }
}

/* ------------------------------------------------------------------ forms
   9anime's `form.form-dark` (the contact page's measured field) on panels. */
.member-page .form-dark label { color: #aaa; }
.member-page .small { font-size: 12px; line-height: 1.5em; color: #666; }
.member-page .form-dark .form-control:disabled,
.member-page .form-dark .form-control[readonly] { background: rgba(255, 255, 255, .03); color: #666; }
.member-page .form-dark textarea.form-control { min-height: 90px; }
.member-page .form-dark .form-control::placeholder { color: #666; }
.member-page .na-form-title { margin: 0 0 15px; font-size: 16px; font-weight: 500; color: #fff; }
.member-page .btn-link-inline { padding: 0; margin: 0; border: 0; background: none; font: inherit; cursor: pointer; }

/* main.js AjaxForm prepends a Bootstrap .alert (with a .close) to a form;
   member-anilist.js / member-import.js write one into their status blocks.
   9anime restyled alerts only in its modals: radius 0, 13px. */
.member-page .alert { font-size: 13px; line-height: 1.4em; border: none; border-radius: 0; }
.member-page form .alert { position: relative; margin-bottom: 15px; padding-right: 2.5rem; }
.member-page form .alert .close { position: absolute; top: 8px; right: 12px; padding: 0; font-size: 20px; line-height: 1; }
.member-page .alert ul { margin: 0; }
.member-page .al-sync-feedback:empty,
.member-page #mal-import-status:empty { display: none; }

/* Settings rows. */
.member-page .na-setting-row { margin-bottom: 20px; }
.member-page .na-setting-row:last-child { margin-bottom: 0; }
.member-page .setting-label { font-size: 14px; color: #ddd; font-weight: 400; line-height: 1.4em; }
.member-page .na-setting-row .small { margin-top: 5px; }
.member-page .na-setting-value { font-size: 14px; color: #fff; font-weight: 500; }
.member-page .na-input-sm { max-width: 120px; }
.member-page .custom-control-label { font-size: 14px; line-height: 24px; cursor: pointer; }
.member-page .custom-control-label::before,
.member-page .custom-control-label::after { top: 4px; }
.member-page .custom-radio .custom-control-label::before { border-color: #4a4b51; background-color: #343434; }
.member-page .custom-control-input:disabled ~ .custom-control-label { color: #525252; cursor: not-allowed; }
.member-page .custom-control-input:disabled ~ .custom-control-label::before { border-color: #343434; background-color: #262626; }
.member-page .acustom.custom-control-inline { margin-right: 22px; }
.member-page .acustom.custom-control .custom-control-label::before { top: 5px; }
.member-page .acustom.custom-control .custom-control-input:checked ~ .custom-control-label::after { top: 0 !important; }
.member-page .custom-control-inline { margin-bottom: 4px; }
.member-page .na-settings-save { margin-top: 25px; }
@media screen and (max-width: 767px) {
    .member-page .na-setting-row .setting-label { margin-bottom: 8px; font-weight: 500; }
}

/* 9anime's on/off switch (.toggle-onoff: 40×24, #5a2e98 on, #4d5059 off,
   20px white knob) drawn around a real checkbox, so main.js AjaxForm
   serializes it (a checkbox goes as its value or 0) and member-anilist.js
   gets its `change` event. Not `.toggle-onoff` itself: the skin runtime
   toggles `.off` on every click of that class. */
.na-switch { display: inline-block; position: relative; width: 40px; height: 24px; margin: 0; vertical-align: middle; cursor: pointer; user-select: none; }
.na-switch input { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.na-switch > span { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 24px; background: #4d5059; transition: all .2s ease 0s; }
.na-switch > span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2); transition: all .2s ease 0s; }
.na-switch input:checked + span { background: #5a2e98; }
.na-switch input:checked + span::after { left: 18px; }
.na-switch input:focus-visible + span { box-shadow: 0 0 0 2px #a885da; }
.na-switch.is-locked { opacity: .5; cursor: not-allowed; }
.na-switch.is-locked input { cursor: not-allowed; }

/* ----------------------------------------------------------- profile page */
.na-avatar-edit { margin-bottom: 20px; text-align: center; }
.na-avatar-edit .profile-avatar { display: inline-block; position: relative; margin-bottom: 8px; cursor: pointer; }
.na-avatar-edit .profile-avatar img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; transition: opacity .2s ease 0s; }
.na-avatar-edit .profile-avatar:hover img { opacity: .8; }
.na-avatar-edit .profile-avatar:focus { outline: none; }
.na-avatar-edit .profile-avatar:focus img { box-shadow: 0 0 0 3px #5a2e98; }
.na-avatar-edit .pa-edit { position: absolute; right: 4px; bottom: 4px; width: 30px; height: 30px; border-radius: 50%; background: #5a2e98; color: #fff; font-size: 12px; line-height: 30px; text-align: center; box-shadow: 0 0 5px rgba(0, 0, 0, .3); }
.na-verify.tick-item { margin-left: 6px; padding: 2px 5px; border-radius: 3px; font-size: 11px; font-weight: 500; vertical-align: 1px; }
.na-verify.is-yes { background: #409f4d; color: #fff; }
.na-verify.is-no { background: #d39e00; color: #212121; }
.na-collapse-row .btn { margin: 0 8px 8px 0; }
.na-collapse-form { margin: 10px 0 5px; padding: 15px; border-radius: 6px; background: #181818; }
.na-account-links { margin-top: 15px; padding-top: 15px; border-top: 1px solid #262626; }
.na-account-links .btn { margin: 0 8px 8px 0; }
.member-page .block_area_manager .list-group-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0; border-left: 0; border-right: 0; }
.member-page .block_area_manager .list-group-item:first-child { border-top: 0; }
.member-page .block_area_manager .list-group-item:last-child { border-bottom: 0; }
.member-page .na-connection-name { font-size: 14px; font-weight: 500; color: #fff; }
.member-page .na-connection-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.member-page .na-connected { font-size: 13px; color: #409f4d; }

/* AniList state chip. */
.member-page .na-anilist-state { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 3px; background: #343434; color: #aaa; font-size: 13px; font-weight: 500; }
.member-page .na-anilist-state.is-connected { background: #409f4d; color: #fff; }
.member-page .na-anilist-state.is-expired { background: #bd362f; color: #fff; }

/* Import / Export. */
.mal-wrapper .pre-tabs-min { margin-bottom: 20px; }
.mal-wrapper .pre-tabs-min .nav-link { color: #fff; }
.mal-wrapper .pre-tabs-min .nav-link.active { color: #fff !important; }
.mal-wrapper .loading-relative { min-height: 40px; }

/* ------------------------------------------------------------ avatar picker
   The light `.premodal.premodal-large`; main.js UserEditAvatar puts `.active`
   on the span inside `.item`. */
.premodal-avatars .modal-content .modal-body { padding: 15px 20px 20px; }
.premodal-avatars .na-avatar-groups { flex-wrap: wrap; margin-bottom: 15px; border: none; }
.premodal-avatars .na-avatar-groups .nav-item { margin: 0 6px 6px 0; }
.premodal-avatars .na-avatar-groups .nav-link { min-width: 0; padding: 5px 10px; font-size: 12px; background: #ebe3f6 !important; color: #713abf; }
.premodal-avatars .na-avatar-groups .nav-link:hover { background: #e5dbf4 !important; }
.premodal-avatars .na-avatar-groups .nav-link.active { background: #5a2e98 !important; color: #fff !important; }
.premodal-avatars .avatar-list { max-height: 46vh; margin: 0 -5px; overflow-x: hidden; overflow-y: auto; font-size: 0; }
.premodal-avatars .avatar-list .item { display: inline-block; width: 12.5%; padding: 5px; }
.premodal-avatars .avatar-list .item > span { display: block; position: relative; outline: none; cursor: pointer; }
.premodal-avatars .na-avatar-pic img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border: 3px solid transparent; border-radius: 50%; object-fit: cover; transition: all .2s ease 0s; }
.premodal-avatars .avatar-list .item > span:hover img,
.premodal-avatars .avatar-list .item > span:focus img { border-color: #ebe3f6; }
.premodal-avatars .avatar-list .item > span.active img { border-color: #5a2e98; }
.premodal-avatars .avatar-list .checked { display: none; position: absolute; top: 0; right: 0; z-index: 2; width: 22px; height: 22px; border-radius: 50%; background: #5a2e98; color: #fff; font-size: 11px; line-height: 22px; text-align: center; }
.premodal-avatars .avatar-list .item > span.active .checked { display: block; }
.premodal-avatars .na-avatar-note { margin: 10px 0 0; font-size: 12px; color: #666; text-align: center; }
@media screen and (max-width: 639px) {
    .premodal-avatars .avatar-list .item { width: 20%; }
}

/* ---------------------------------------------------------- public profile
   Frame A; the profile card sits in #main-sidebar ≥1280 and on top of
   #main-content below that (9anime stacks the sidebar under the main
   column). */
.na-pp-card-top { display: none; }
@media screen and (max-width: 1279px) {
    .na-pp-card-top { display: block; }
    .na-pp-card-side { display: none; }
}
.na-pp-card .block_area-content { padding: 20px 15px; text-align: center; }
.na-pp-card .na-pp-avatar { display: inline-block; margin-bottom: 12px; }
.na-pp-card .na-pp-avatar img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.na-pp-card .na-pp-name { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 4px; font-size: 20px; font-weight: 500; line-height: 1.3em; }
.na-pp-card .na-pp-name a { min-width: 0; overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.na-pp-card .na-pp-meta { font-size: 12px; color: #666; }
.na-pp-card .na-pp-role { color: #a885da; }
.na-pp-card .na-pp-bio { max-width: 520px; margin: 10px auto 0; font-size: 13px; line-height: 1.5em; color: #aaa; word-break: break-word; }
.na-pp-card .na-pp-rank { max-width: 300px; margin: 15px auto 0; text-align: left; }
.na-pp-card .na-pp-rank-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; font-size: 12px; color: #666; }
.na-pp-card .na-pp-rank-label { color: #a885da; font-weight: 500; }
.na-pp-card .na-pp-stats { display: flex; max-width: 360px; margin: 15px auto 0; padding-top: 12px; border-top: 1px solid #262626; }
.na-pp-card .na-pp-stat { flex: 1 1 33.33%; }
.na-pp-card .na-pp-stat + .na-pp-stat { border-left: 1px solid #262626; }
.na-pp-card .na-pp-stat-number { font-size: 20px; font-weight: 600; line-height: 1.3em; color: #fff; }
.na-pp-card .na-pp-stat-label { font-size: 12px; color: #666; }
.na-pp-card .na-pp-now { margin-top: 12px; font-size: 13px; color: #666; }
.na-pp-card .na-pp-now a { color: #ababab; }
.na-pp-card .na-pp-now a:hover { color: #fff; }
.na-pp-card .na-pp-now-label { margin-right: 4px; color: #a885da; font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }
.na-pp-card .na-pp-actions { margin-top: 15px; }
.na-pp-card .na-pp-actions .btn { margin: 3px; }

/* Activity / posts rows: 9anime's sidebar-list rhythm, a round icon in the
   poster slot. */
.na-pp-rows .na-pp-row { position: relative; min-height: 34px; margin-bottom: 15px; padding-left: 46px; }
.na-pp-rows .na-pp-row:last-child { margin-bottom: 0; }
.na-pp-rows .na-pp-row-icon { position: absolute; top: 0; left: 0; width: 34px; height: 34px; border-radius: 50%; background: #343434; color: #aaa; font-size: 12px; line-height: 34px; text-align: center; }
.na-pp-rows .na-pp-row-text { font-size: 13px; line-height: 1.4em; color: #666; word-break: break-word; }
.na-pp-rows .na-pp-row-text strong { color: #ddd; font-weight: 500; }
.na-pp-rows .na-pp-row-link { color: #ababab; font-weight: 500; }
.na-pp-rows .na-pp-row-link:hover,
.na-pp-rows .na-pp-row-title:hover { color: #fff; }
.na-pp-rows .na-pp-row-muted { color: #666; }
.na-pp-rows .na-pp-row-title { display: -webkit-box; overflow: hidden; color: #ababab; font-size: 14px; line-height: 1.4em; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.na-pp-rows .fd-infor { margin-top: 3px; font-size: 12px; color: #666; }
.na-pp-rows .fd-infor .dot { margin: 3px 5px; }
.na-public-profile .na-pp-empty { margin: 0 0 20px; }
.na-pp-bookmarks .na-list-meta { margin-bottom: 15px; }

/* ----------------------------------------------------------- reset password
   The sign-in modal's panel (a light `.premodal .modal-content`) standing in
   the page. */
.na-auth-page { padding-top: 60px; }
.na-auth-card .modal-dialog { max-width: 450px; margin: 0 auto; pointer-events: auto; }
.na-auth-card .modal-content .modal-header .modal-title { margin: 10px 0 0; }
.na-auth-card .login-btn { margin-top: 30px; }
.na-auth-card .loading-relative { min-height: 0; margin-top: 15px; }
@media screen and (max-width: 768px) {
    .na-auth-page { padding-top: 30px; }
}