/*
 * nineanime-community.css — owned by the community area.
 * Scope: /community/* (board, post, create/edit, My Zone, Super X),
 * /leaderboard, /guides, /request-anime.
 *
 * 9animetv.to had none of these pages, so they are composed from 9anime's
 * own vocabulary (tmp/visual/GUIDE.md): frame A (#main-content +
 * #main-sidebar), `.block_area` panels (#1c1c1c, radius 6), `.cat-heading`,
 * the sidebar Top Anime chart rows, `.no-content-block`, the light
 * `.premodal` dialogs, `.btn-focus` purple (#5a2e98, no hover change),
 * `.btn-secondary` grey. Text levels: #fff heading, #ababab title, #aaa
 * body, #666 meta, #525252 inactive. No pink accent.
 *
 * Loaded on every page after nineanime-bridge.css: every selector is scoped
 * (`.na-cm-*`, `.na-lb-*`, `.na-gd-*`, `.na-req*`, `.req-*`, `.cm-*`,
 * `.tl-*`, `.poll-*`, or under a community root) so nothing leaks.
 * The engine's community.min.css is not loaded anywhere.
 */

/* ------------------------------------------------------------------ */
/* Shared: page head, links, quiet text, empty state, loaders           */
/* ------------------------------------------------------------------ */
.na-cm-page { padding-top: 5px; }
.na-cm-head { margin-bottom: 20px; }
.na-cm-head .na-cm-heading { color: #fff; font-weight: 600; line-height: 1.3em; margin: 0 0 6px; word-break: break-word; }
.na-cm-head .na-cm-lead { font-size: 14px; font-weight: 300; line-height: 1.6em; color: #aaa; }
.na-cm-head .na-cm-lead strong { font-weight: 500; color: #fff; }
.na-cm-head .na-cm-lead .dot { vertical-align: middle; }
/* 9anime's dormant underline tabs. Its active text is #5a2e98 on #0e0e0e,
   which barely reads; the light accent #a885da keeps the purple underline. */
.na-cm-tabs.pre-tabs { margin-top: 10px; border-bottom: 1px solid #262626; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.na-cm-tabs.pre-tabs::-webkit-scrollbar { display: none; }
.na-cm-tabs.pre-tabs .nav-item { margin-bottom: -1px; flex: none; }
.na-cm-tabs.pre-tabs .nav-item .nav-link { white-space: nowrap; }
.na-cm-tabs.pre-tabs .nav-item .nav-link:hover { color: #fff; }
.na-cm-tabs.pre-tabs .nav-item .nav-link.active { color: #a885da; border-color: #5a2e98; }
/* Only the skin's own dark-surface links (the comment widget keeps nineanime-watch.css). */
.na-cm-head .link-highlight, .na-cm-note-bar .link-highlight, .na-cm-empty .link-highlight, .req-foot .link-highlight, .na-gd-page .no-content-block .link-highlight { color: #a885da !important; }
.na-cm-head .link-highlight:hover, .na-cm-note-bar .link-highlight:hover, .na-cm-empty .link-highlight:hover, .req-foot .link-highlight:hover, .na-gd-page .no-content-block .link-highlight:hover { color: #fff !important; }
.na-cm-quiet { padding: 10px 0 15px; font-size: 13px; color: #666; }
.na-cm-center { text-align: center; margin-top: 15px; }
.na-cm-subhead { margin: 20px 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #666; }
.na-cm-empty { margin: 5px 0; color: #aaa; }
.na-cm-empty > i { display: block; margin-bottom: 12px; font-size: 32px; color: #525252; }
.na-cm-empty .na-cm-empty-title { margin-bottom: 4px; font-size: 18px; font-weight: 500; color: #fff; }
.na-cm-empty p { margin-bottom: 15px; }

/* CMS topic colours (the tag's own colour, content not chrome): a dot. */
.zt-white { --zt: #d5d5d5; } .zt-blue { --zt: #4b9bf5; } .zt-sky { --zt: #7cc8ff; }
.zt-cyan { --zt: #3fc6cf; } .zt-teal { --zt: #2bb5a0; } .zt-green { --zt: #409f4d; }
.zt-lime { --zt: #9ccc3d; } .zt-yellow { --zt: #c39d00; } .zt-amber { --zt: #d39e00; }
.zt-orange { --zt: #e07b2a; } .zt-coral { --zt: #e8765f; } .zt-red { --zt: #bd362f; }
.zt-pink { --zt: #c75b9b; } .zt-purple { --zt: #7346b3; } .zt-gray { --zt: #71797d; }

/* Topic pill: 9anime's grey `.bhsi-name` look (#4c4f57, radius 30, 12px),
   which styles.css only applies inside a block header. */
.na-cm-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 30px; background: #4c4f57; font-size: 12px; line-height: 22px; color: #ddd; white-space: nowrap; }
a.na-cm-tag:hover { color: #fff; background: #5a5d66; }
.na-cm-tagdot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--zt, #d5d5d5); }
.na-cm-meta { display: flex; flex-wrap: wrap; align-items: center; font-size: 12px; color: #666; }
.na-cm-meta .dot { margin: 0 6px; }
.na-cm-pinned.tick-item { margin-right: 8px; padding: 0 6px; border-radius: 3px; background: #5a2e98; color: #fff; font-size: 11px; line-height: 20px; font-weight: 500; }
.na-cm-hidden.tick-item { padding: 0 6px; border-radius: 3px; background: #4a4b51; color: #ddd; font-size: 11px; line-height: 20px; }
.na-cm-edited { font-style: normal; color: #525252; }
.na-cm-rank { font-size: 11px; color: #666; white-space: nowrap; }
.na-cm-owner .na-cm-rank::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 6px 2px; border-radius: 50%; background: #666; vertical-align: middle; }

/* Header tool row (right of a `.cat-heading`). */
.na-cm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 3px 0; }
/* 9anime's `.btn-filter` (only styled inside .sidebar-filter in styles.css). */
.na-cm-filter { position: relative; }
.na-cm-page .btn-filter { background: #262626; color: #666; font-size: 13px; line-height: 20px; padding: 5px 10px; border-radius: 3px; border: 0; white-space: nowrap; }
.na-cm-page .btn-filter span { color: #fff; margin-left: 2px; }
.na-cm-page .btn-filter i { color: #666; font-size: 11px; }
.na-cm-page .btn-filter:hover, .na-cm-filter.show .btn-filter { background: #2d2d2d; color: #787878; }
.na-cm-filter .dropdown-menu-native { min-width: 170px; }
.na-cm-filter .dropdown-menu-native.na-menu-scroll { max-height: 320px; overflow-y: auto; }
.na-cm-filter .dropdown-menu-native .dropdown-item { border-radius: 3px; }
.na-cm-filter .dropdown-menu-native .dropdown-item i { visibility: hidden; }
.na-cm-filter .dropdown-menu-native .dropdown-item.active i { visibility: visible; }
.na-cm-tools .btn-sm, .na-cm-row-actions .btn-sm, .na-cm-card-actions .btn-sm { white-space: nowrap; }

/* 9anime's pager button inside the engine's `div.btn.d-flex` wrapper: the
   wrapper must not pick up 9anime's `.btn` look (16px, padding, colours). */
.post-list .btn.d-flex.na-cm-more-wrap { display: flex; justify-content: center; width: 100%; margin: 15px 0 0; padding: 0; background: none !important; border: 0; font-size: inherit; line-height: inherit; cursor: default; }
#post-loading { margin: 10px 0; }

/* ------------------------------------------------------------------ */
/* Board: post rows                                                     */
/* ------------------------------------------------------------------ */
.na-cm-board > .block_area-content { padding: 10px 0 15px; }
.na-cm-board .na-cm-empty { margin: 5px 15px; }
.na-cm-note-bar { margin: 0 15px 10px; padding: 8px 12px; border-radius: 4px; background: #262626; font-size: 13px; color: #aaa; }
.na-cm-item { position: relative; display: flex; align-items: flex-start; padding: 15px; }
.post-list > .na-cm-item:nth-child(odd) { background: #181818; }
/* Pinned rows: all shaded, a 3px purple bar (the list after them keeps its zebra). */
.pin-group > .na-cm-item { background: #181818; box-shadow: inset 3px 0 0 #5a2e98; }
.pin-group > .na-cm-item + .na-cm-item { border-top: 1px solid #1c1c1c; }
.na-cm-vote { flex: none; width: 36px; margin-right: 12px; text-align: center; }
.na-cm-vote-btn { display: block; height: 20px; font-size: 20px; line-height: 20px; color: #525252; }
.na-cm-vote-btn:hover { color: #fff; }
.na-cm-vote-btn.active { color: #a885da; }
.na-cm-vote-num { font-size: 13px; font-weight: 500; line-height: 18px; color: #aaa; }
.na-cm-vote-num.is-down { font-size: 11px; font-weight: 400; color: #666; }
.na-cm-main { flex: 1; min-width: 0; }
.na-cm-title { margin: 8px 0 4px; font-size: 15px; font-weight: 500; line-height: 1.4em; word-break: break-word; }
.na-cm-title a { color: #ababab; }
.na-cm-title a:hover { color: #fff; }
.na-cm-excerpt { margin: 0 0 8px; font-size: 13px; line-height: 1.5em; color: #666; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
/* The format teaser (class attribute fixed by RenderCommunityTest). */
.na-cm-main .cm-teaser { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; max-width: 100%; margin: 2px 0 6px; color: #aaa; }
.na-cm-main .cm-teaser:hover { color: #fff; }
.na-cm-main .cm-teaser-posters { display: inline-flex; gap: 5px; }
.na-cm-main .cm-teaser-posters img { width: 46px; height: 60px; object-fit: cover; border-radius: 3px; background: #262626; }
.na-cm-main .cm-teaser-meta { font-size: 12px; line-height: 20px; padding: 0 8px; border-radius: 3px; background: #262626; white-space: nowrap; }
.na-cm-main .cm-teaser-meta i { color: #a885da; }
.na-cm-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.na-cm-owner { display: flex; align-items: center; min-width: 0; font-size: 13px; }
.na-cm-owner .na-cm-ava { flex: none; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; object-fit: cover; background: #262626; }
.na-cm-owner .user-name { display: inline-flex; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; color: #ababab; }
.na-cm-owner .user-name:hover { color: #fff; }
.na-cm-owner .dot { margin: 0 6px; }
.na-cm-stats { display: flex; flex: none; align-items: center; gap: 12px; }
.na-cm-stat { font-size: 12px; color: #666; white-space: nowrap; }
a.na-cm-stat:hover { color: #fff; }
.na-cm-more { position: relative; }
.na-cm-more-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #525252; }
.na-cm-more-btn:hover, .na-cm-more.show .na-cm-more-btn { background: #262626; color: #fff; }
.na-cm-more .dropdown-menu { top: 100%; right: 0; left: auto; min-width: 140px; margin-top: 4px; z-index: 20; }
.na-cm-more .dropdown-menu-model { border: 0; border-radius: 4px; padding: 5px 0; box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.na-cm-more .dropdown-menu-model .dropdown-item { color: #111; padding: 5px 15px; }
.na-cm-more .dropdown-menu-model .dropdown-item:hover { background: #f3eefa; color: #5a2e98; }
.na-cm-more .dropdown-menu-model .dropdown-item.text-danger { color: #bd362f !important; }

/* ------------------------------------------------------------------ */
/* Community sidebar: search + topics, Top this week, More posts        */
/* ------------------------------------------------------------------ */
.na-cm-search { position: relative; margin-bottom: 12px; }
.na-cm-search .search-input,
.na-gd-search .search-input,
.req-search .search-input { height: 32px; padding: 0 34px 0 12px; border: 1px solid #363636; border-radius: 4px; background: transparent; font-size: 13px; color: #eee; box-shadow: none; }
.na-cm-search .search-input:focus,
.na-gd-search .search-input:focus,
.req-search .search-input:focus { border-color: #404040; background: transparent; color: #eee; box-shadow: none; }
.na-cm-search .search-input::placeholder,
.na-gd-search .search-input::placeholder,
.req-search .search-input::placeholder { color: #666; }
.na-cm-search .search-input::-webkit-search-cancel-button,
.na-gd-search .search-input::-webkit-search-cancel-button { filter: invert(.6); }
.na-cm-search > i, .na-gd-search > i { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-size: 12px; color: #525252; pointer-events: none; }
.na-cm-cate .item { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-radius: 4px; font-size: 13px; color: #aaa; }
.na-cm-cate .item:hover { background: #242424; color: #fff; }
.na-cm-cate .item.active { background: #5a2e98; color: #fff; }
.na-cm-cate .item .ztag > span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--zt, #d5d5d5); vertical-align: middle; }
.na-cm-cate .item .number { min-width: 26px; padding: 0 6px; border-radius: 3px; background: #262626; font-size: 11px; line-height: 18px; text-align: center; color: #aaa; }
.na-cm-cate .item.active .number { background: rgba(0, 0, 0, .25); color: #fff; }

/* A round avatar in the chart row's 46px poster slot. */
.cbox.cbox-list .anime-block-ul li .film-poster.na-cm-avatar { width: 46px; padding-bottom: 46px; top: 7px; border-radius: 50%; background: #262626; }
.cbox.cbox-list .anime-block-ul li .film-poster.na-cm-avatar .film-poster-img { border-radius: 50%; }
.cbox.cbox-list .anif-block-chart li .film-poster.na-cm-avatar { left: 50px; }
.na-cm-chart li .film-detail .film-name { margin-bottom: 3px; }
.na-cm-chart li .film-detail .film-name .user-name { display: inline-flex; align-items: center; max-width: 100%; color: #ababab; }
.na-cm-chart li .film-detail .film-name .user-name:hover { color: #fff; }
.na-cm-chart li .fd-infor, .na-cm-rows li .fd-infor, .na-gd-rows li .fd-infor { font-size: 12px; color: #666; }
.na-cm-chart li .fd-infor a, .na-cm-rows li .fd-infor a { color: #666; }
.na-cm-chart li .fd-infor a:hover, .na-cm-rows li .fd-infor a:hover { color: #fff; }
.na-cm-chart li .fd-infor .dot, .na-cm-rows li .fd-infor .dot, .na-gd-rows li .fd-infor .dot { margin: 3px 5px; }
.na-cm-chart .na-cm-quote a, .na-cm-chart .na-cm-quote span { color: #ababab; font-size: 13px; }
.na-cm-chart .na-cm-quote a:hover { color: #fff; }
.na-cm-rows li .film-poster.na-cm-avatar { top: 0; }
.na-cm-rows li { min-height: 46px; }
.na-cm-rows li .film-detail { min-height: 46px; }

/* ------------------------------------------------------------------ */
/* Light dialogs (9anime's .premodal): create post, report, request     */
/* ------------------------------------------------------------------ */
.na-cm-modal .modal-content .modal-header { padding: 20px 20px 0; }
.na-cm-modal.premodal-report .modal-content .modal-header .modal-title { text-align: left; font-size: 22px; }
.na-cm-modal .modal-content .modal-body { padding: 10px 20px 20px; }
.na-cm-modal .modal-content .modal-body .description { margin-bottom: 15px; font-size: 13px; color: #666; }
.na-cm-modal .form-group > label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #111; }
.na-cm-modal .loginform .form-control-textarea { min-height: 110px; resize: vertical; }
.na-cm-modal .loginform select.form-control { -webkit-appearance: none; appearance: none; padding-right: 36px; background: #ebe3f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237346b3'/%3E%3C/svg%3E") no-repeat right 15px center; }
.na-cm-modal .na-cm-count, .na-cm-modal .na-cm-note { display: block; margin-top: 5px; font-size: 11px; color: #666; }
.na-cm-modal .na-cm-count { text-align: right; }
.na-cm-modal .btn-form:disabled { opacity: .65; }
.na-cm-modal .loading-relative { min-height: 40px; }
.na-cm-modal-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 15px; font-size: 12px; color: #666; }
.na-cm-modal-foot i { color: #7346b3; }
/* Formatting toolbar: 30px icon buttons #666 → #5a2e98. */
.na-cm-fmt { display: flex; gap: 2px; margin-bottom: 6px; }
.na-cm-fmt .cp-fmt-btn { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 3px; background: transparent; font-size: 13px; line-height: 30px; color: #666; }
.na-cm-fmt .cp-fmt-btn:hover { background: #f3eefa; color: #5a2e98; }
.na-cm-create .na-cm-fmt .cp-fmt-btn:hover { background: #262626; color: #a885da; }

/* The engine's anime picker (#tl-search-modal, appended to <body> by
   community.min.js as a bare .modal): 9anime's light dialog. */
#tl-search-modal .modal-dialog { max-width: 450px; }
#tl-search-modal .modal-content { background: #fff; color: #111; border: 0; border-radius: 10px; }
#tl-search-modal .modal-header { border-bottom: 0; padding: 20px 20px 0; }
#tl-search-modal .modal-title { font-size: 22px; font-weight: 600; color: #5a2e98; }
#tl-search-modal .close { color: #111; opacity: .5; text-shadow: none; }
#tl-search-modal .close:hover { opacity: 1; }
#tl-search-modal .modal-body { padding: 15px 20px 20px; }
#tl-search-modal .form-control { height: 40px; border: 0; border-radius: 0; background: #ebe3f6; color: #713abf; font-size: 13px; box-shadow: none; }
#tl-search-modal .form-control:focus { background: #e5dbf4; }
#tl-search-modal .form-control::placeholder { color: #b6a5ce; }
.tl-search-results { display: flex; flex-direction: column; max-height: 42vh; margin-top: 10px; overflow-y: auto; }
.tl-search-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 3px; font-size: 13px; color: #111; cursor: pointer; }
.tl-search-item:hover { background: #f3eefa; color: #5a2e98; }
.tl-search-item.is-added { opacity: .55; }
.tl-search-item img { flex: none; width: 30px; height: 40px; object-fit: cover; border-radius: 3px; background: #eee; }
.tl-search-name { flex: 1; min-width: 0; }
.tl-search-name em { font-style: normal; color: #666; }
.tl-search-state { font-size: 12px; color: #7346b3; }
.tl-search-state, .tl-search-hint { padding: 6px; font-size: 12px; }
.tl-search-hint { color: #666 !important; }

/* ------------------------------------------------------------------ */
/* Post page                                                            */
/* ------------------------------------------------------------------ */
.na-cm-post > .block_area-content { padding: 20px; }
.na-cm-byline { display: flex; align-items: center; margin-bottom: 15px; }
.na-cm-byline-ava { flex: none; width: 40px; height: 40px; margin-right: 12px; }
.na-cm-byline-ava img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #262626; }
.na-cm-byline-info { min-width: 0; }
.na-cm-byline-name { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 4px; font-size: 14px; }
.na-cm-byline-name .user-name { display: inline-flex; align-items: center; font-weight: 500; color: #fff; }
.na-cm-byline-name .user-name:hover { color: #a885da; }
.na-cm-byline-name .na-cm-rank { margin-left: 8px; }
.na-cm-post .na-cm-post-title { margin: 0 0 15px; color: #fff; font-weight: 600; line-height: 1.3em; word-break: break-word; }
.na-cm-post .cda-content { font-size: 14px; font-weight: 300; line-height: 1.6em; color: #ddd; word-break: break-word; }
.na-cm-post .cda-content p { margin-bottom: 12px; }
.na-cm-post .cda-content a { color: #927daf; }
.na-cm-post .cda-content a:hover { color: #fff; }
.na-cm-post .cda-content strong, .na-cm-post .cda-content b { font-weight: 500; color: #fff; }
.na-cm-post .cda-content blockquote { margin: 10px 0; padding: 6px 12px; border-left: 3px solid #5a2e98; background: #181818; color: #aaa; }
.na-cm-post .cda-content img { max-width: 100%; height: auto; border-radius: 4px; }
.na-cm-post .cda-content .spoiler, .na-cm-post .cda-content .btn-spoil { background: #343434; color: #343434; border-radius: 3px; cursor: pointer; }
.na-cm-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 20px; padding-top: 15px; border-top: 1px solid #262626; }
.na-cm-actions-l, .na-cm-actions-r { display: flex; flex-wrap: wrap; gap: 6px; }
.na-cm-actions .btn-sm { background: #343434; color: #ccc; border: 0; font-weight: 500; }
.na-cm-actions .btn-sm:hover { background: #494949; color: #fff; }
.na-cm-actions .btn-sm.active { background: #5a2e98; color: #fff; }
.na-cm-actions .btn-sm.na-cm-danger:hover { background: #921925; }
.na-cm-count-inline { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 3px; background: rgba(0, 0, 0, .25); font-size: 11px; line-height: 16px; }
#cm-share-box { padding-top: 5px; }
.na-cm-comments > .block_area-content { padding-top: 10px; }

/* ------------------------------------------------------------------ */
/* Post formats (poll, matchup, tier list, seasonal, recommendation)     */
/* ------------------------------------------------------------------ */
.na-cm-fmtbox { margin-bottom: 20px; border-radius: 6px; background: #262626; overflow: hidden; }
.na-cm-fmtbox .cm-poll-head { padding: 10px 15px; font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: #aaa; border-bottom: 1px solid #1c1c1c; }
.na-cm-fmtbox .cm-poll-head i { margin-right: 4px; color: #a885da; }
/* Poll: options as 9anime's `.ps__-list` chips, 6px result bars. */
.cm-poll-options { padding: 10px; }
.cm-poll-row { display: flex; align-items: center; gap: 6px; }
.cm-poll-row + .cm-poll-row { margin-top: 6px; }
.cm-poll-opt { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 8px; border: 0; border-radius: 3px; background: #343434; color: #ccc; font-size: 13px; text-align: left; cursor: pointer; }
.cm-poll-opt:hover:not(:disabled) { background: #494949; color: #fff; }
.cm-poll-opt.is-mine { background: #2f2242; color: #fff; box-shadow: inset 3px 0 0 #5a2e98; }
.cm-poll-opt:disabled { cursor: default; }
.cm-poll-poster { flex: none; width: 36px; height: 48px; overflow: hidden; border-radius: 3px; }
.cm-poll-poster img { width: 100%; height: 100%; object-fit: cover; }
.cm-poll-body { display: block; flex: 1; min-width: 0; }
.cm-poll-title { display: block; overflow: hidden; font-size: 13px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.cm-poll-bar { display: block; height: 6px; margin-top: 6px; border-radius: 6px; background: #1c1c1c; overflow: hidden; }
.cm-poll-bar > span { display: block; height: 100%; border-radius: 6px; background: #5a2e98; transition: width .5s; }
.cm-poll-meta { display: block; margin-top: 4px; font-size: 12px; color: #666; }
.cm-poll-link { display: flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 3px; background: #343434; color: #aaa; }
.cm-poll-link:hover { background: #494949; color: #fff; }
/* Matchup: two `.flw-item`-size posters with a VS between. */
.cm-matchup-row { display: flex; align-items: stretch; gap: 10px; padding: 12px; }
.cm-matchup-card { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 10px; border: 0; border-radius: 4px; background: #343434; color: #ccc; text-align: center; cursor: pointer; }
.cm-matchup-card:hover:not(:disabled) { background: #494949; color: #fff; }
.cm-matchup-card.is-mine { background: #2f2242; color: #fff; box-shadow: inset 0 -3px 0 #5a2e98; }
.cm-matchup-card:disabled { cursor: default; }
.cm-matchup-card img { width: 100%; max-width: 140px; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 6px; }
.cm-matchup-title { font-size: 13px; line-height: 1.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-matchup-cta { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #666; }
.cm-matchup-card .cm-matchup-pct { display: block; font-size: 20px; font-weight: 600; color: #fff; }
.cm-matchup-card .cm-matchup-votes { display: block; font-size: 12px; color: #666; }
.cm-matchup-vs { display: flex; align-items: center; font-size: 20px; font-weight: 600; color: #fff; }
/* Tier list: a 60px label cell in the tier colour + 46×60 posters. */
.tl-view .tl-row { display: flex; align-items: stretch; border-bottom: 1px solid #1c1c1c; }
.tl-view .tl-row:last-child { border-bottom: 0; }
.tl-view .tl-label { display: flex; flex: none; align-items: center; justify-content: center; width: 60px; padding: 6px; font-size: 14px; font-weight: 600; text-align: center; text-transform: uppercase; word-break: break-word; }
.tl-view .tl-items { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; padding: 7px; }
.tl-view .tl-item { width: 46px; }
.tl-view .tl-item img { width: 46px; height: 60px; object-fit: cover; border-radius: 3px; }
.tl-view .tl-item:hover img { box-shadow: 0 0 0 2px #5a2e98; }
.tl-view .tl-item-gone { width: 46px; height: 60px; border: 1px dashed #494949; border-radius: 3px; }
.tl-view .tl-empty { align-self: center; font-size: 12px; color: #525252; }
/* Tier colours are the author's content (shared with the builder rows). */
.tl-c-red { background: #bd362f; color: #fff; }
.tl-c-orange { background: #e07b2a; color: #fff; }
.tl-c-amber { background: #d39e00; color: #212121; }
.tl-c-yellow { background: #c39d00; color: #212121; }
.tl-c-green { background: #409f4d; color: #fff; }
.tl-c-teal { background: #2b9d8d; color: #fff; }
.tl-c-blue { background: #2f7fd1; color: #fff; }
.tl-c-purple { background: #5a2e98; color: #fff; }
.tl-c-pink { background: #b3548a; color: #fff; }
.tl-c-gray { background: #4a4b51; color: #fff; }
/* Seasonal: numbered rows like the Top Anime chart. */
.cm-seasonal-list { margin: 0; padding: 5px 15px; list-style: none; }
.cm-seasonal-list li { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.cm-seasonal-list .cm-seasonal-rank { flex: none; width: 34px; height: 34px; border: 1px solid #666; border-radius: 5px; font-size: 18px; font-weight: 300; line-height: 32px; text-align: center; color: #666; }
.cm-seasonal-list li.is-top .cm-seasonal-rank { border-color: #f8f8f8; background: #f8f8f8; font-weight: 700; color: #212121; }
.cm-seasonal-list a { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 14px; color: #ababab; }
.cm-seasonal-list a:hover { color: #fff; }
.cm-seasonal-list a span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cm-seasonal-list img { flex: none; width: 46px; height: 60px; object-fit: cover; border-radius: 3px; }
.cm-seasonal-list .cm-seasonal-gone { font-size: 12px; color: #525252; }
/* Recommendation: a poster rail. */
.cm-rec-refs { display: flex; gap: 12px; padding: 12px; overflow-x: auto; scrollbar-width: thin; }
.cm-rec-item { flex: none; width: 100px; font-size: 12px; line-height: 1.3em; color: #ababab; }
.cm-rec-item img { display: block; width: 100px; height: 140px; margin-bottom: 6px; object-fit: cover; border-radius: 6px; }
.cm-rec-item span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-rec-item:hover { color: #fff; }

/* ------------------------------------------------------------------ */
/* Create / edit post (form.cp-form.form-dark)                          */
/* ------------------------------------------------------------------ */
.na-cm-create > .block_area-content { padding: 15px; }
.na-cm-create .form-dark .form-group { margin-bottom: 20px; }
.na-cm-create .form-dark label { display: block; margin-bottom: 8px; font-size: 13px; color: #aaa; }
.na-cm-create .form-dark label span + span { font-size: 12px; color: #666; }
.na-cm-create .form-dark .form-control { height: 40px; padding: 10px 15px; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .05); font-size: 13px; color: #aaa; }
.na-cm-create .form-dark textarea.form-control { height: auto; min-height: 180px; line-height: 1.6em; }
.na-cm-create .form-dark .form-control:focus { box-shadow: 0 0 0 2px #5a2e98; color: #fff; }
.na-cm-create .form-dark .form-control::placeholder { color: #666; }
.na-cm-create .form-dark select.form-control option { background: #212121; color: #aaa; }
.na-cm-create .form-dark .form-control.is-invalid { box-shadow: 0 0 0 1px #bd362f; }
.na-cm-create .invalid-feedback { font-size: 12px; color: #e0605a; }
/* Topic radios as 9anime's grey pills (checked purple); the engine moves .is-on. */
.cp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-tags .cp-tag { position: relative; display: inline-flex; align-items: center; margin: 0 !important; padding: 0 12px; border-radius: 30px; background: #4c4f57; font-size: 12px !important; line-height: 30px; color: #ddd !important; cursor: pointer; user-select: none; }
.cp-tags .cp-tag:hover { background: #5a5d66; color: #fff !important; }
.cp-tags .cp-tag.is-on { background: #5a2e98; color: #fff !important; }
.cp-tags .cp-tag input { position: absolute; opacity: 0; pointer-events: none; }
.cp-tags .cp-tag > span[class^="zt-"]::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 2px 0; border-radius: 50%; background: var(--zt, #d5d5d5); vertical-align: middle; }
.cp-tags .cp-tag .na-cm-fmt-tag { margin-left: 6px; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; opacity: .6; }
.na-cm-md-help { margin-top: 6px; font-size: 11px; color: #666; }
.na-cm-md-help code { padding: 1px 4px; border-radius: 3px; background: #262626; color: #a885da; }
.na-cm-create-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.na-cm-mana-note { font-size: 12px; color: #666; }
.na-cm-mana-note i { color: #a885da; }
/* Builders: runtime markup from community.min.js (tl-*, poll-*) on #262626 cards. */
.tl-builder, .poll-builder { border-radius: 6px; background: #262626; overflow: hidden; }
.tl-brow { display: flex; align-items: stretch; border-bottom: 1px solid #1c1c1c; }
.tl-brow .tl-label { display: flex; flex: none; align-items: center; width: 60px; }
.tl-label-input { width: 100%; padding: 4px; border: 0; background: none; font-size: 14px; font-weight: 600; text-align: center; text-transform: uppercase; color: inherit; }
.tl-label-input:focus { outline: 1px solid rgba(255, 255, 255, .5); }
.tl-bitems { display: flex; flex: 1; flex-wrap: wrap; gap: 5px; min-width: 0; padding: 7px; }
.tl-bitem, .tl-bitem-ph { position: relative; width: 46px; height: 60px; overflow: hidden; border-radius: 3px; background: #343434; }
.tl-bitem img { width: 100%; height: 100%; object-fit: cover; }
.tl-bitem-x { position: absolute; top: 2px; right: 2px; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(0, 0, 0, .75); font-size: 9px; color: #fff; cursor: pointer; }
.tl-add-item { width: 46px; height: 60px; padding: 0; border: 1px dashed #494949; border-radius: 3px; background: none; font-size: 13px; color: #666; cursor: pointer; }
.tl-add-item:hover, .tl-tool:hover { border-color: #5a2e98; color: #a885da; }
.tl-rowtools { display: grid; flex: none; grid-template-columns: 22px 22px; align-content: center; gap: 4px; padding: 6px; }
.tl-tool { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid #363636; border-radius: 3px; font-size: 10px; color: #666; }
.tl-tool.is-off { opacity: .3; pointer-events: none; }
.tl-toolbar, .poll-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; font-size: 12px; color: #666; }
.poll-season-bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border-bottom: 1px solid #1c1c1c; }
.na-cm-create .poll-season-bar .form-control { width: auto; height: 32px; padding: 4px 10px; }
.poll-options { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.poll-opt { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 3px; background: #343434; }
.poll-rank { flex: none; width: 24px; font-size: 13px; font-weight: 600; text-align: center; color: #aaa; }
.poll-opt img, .poll-opt-ph { flex: none; width: 30px; height: 40px; object-fit: cover; border-radius: 3px; background: #262626; }
.poll-opt-title { flex: 1; min-width: 0; overflow: hidden; font-size: 13px; color: #ccc; white-space: nowrap; text-overflow: ellipsis; }
.poll-opt-tools { display: flex; flex: none; gap: 4px; }
.poll-opt-tools > *, .poll-opt-x { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 3px; background: #262626; font-size: 11px; color: #666; cursor: pointer; }
.poll-opt-tools > *:hover, .poll-opt-x:hover { color: #fff; }
.poll-empty { padding: 20px; font-size: 12px; text-align: center; color: #666 !important; }
.poll-type-switch { display: flex; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------------------------ */
/* My Zone                                                              */
/* ------------------------------------------------------------------ */
.na-cm-zone-block > .block_area-content { padding: 10px 0 15px; }
.na-cm-zone-block .no-content-block { margin: 5px 15px; }
.na-cm-row { padding: 12px 15px; }
.na-cm-row:nth-of-type(odd) { background: #181818; }
.na-cm-row .na-cm-title { margin: 6px 0 2px; font-size: 14px; }
.na-cm-row .na-cm-foot { margin-top: 4px; }
.na-cm-row-actions { display: flex; flex: none; gap: 6px; }
.na-cm-card > .block_area-content { padding: 20px 15px; }
.na-cm-card-top { text-align: center; }
.na-cm-card .profile-avatar { display: inline-block; width: 120px; height: 120px; margin-bottom: 10px; }
.na-cm-card .profile-avatar img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; background: #262626; }
.na-cm-card-name { margin-bottom: 4px; font-size: 20px; font-weight: 500; }
.na-cm-card-name .user-name { color: #fff; }
.na-cm-card-top .fd-infor { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-size: 12px; color: #666; }
.na-cm-card-top .fd-infor .fdi-item { display: inline-flex; align-items: center; }
.na-cm-mana { margin-top: 15px; }
.na-cm-mana-head { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 13px; color: #aaa; }
.na-cm-mana-head i { color: #a885da; }
.na-cm-mana-head strong { font-weight: 500; color: #fff; }
.na-cm-bar { height: 6px; border-radius: 6px; background: #343434; overflow: hidden; }
.na-cm-bar > span { display: block; height: 100%; max-width: 100%; border-radius: 6px; background: #5a2e98; }
.na-cm-mana-foot { margin-top: 6px; font-size: 12px; color: #666; }
.na-cm-card-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 15px; }
.na-cm-ladder li { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 0 6px 20px; font-size: 13px; color: #666; }
.na-cm-ladder li::before { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: #343434; }
.na-cm-ladder li:first-child::before { top: 50%; }
.na-cm-ladder li:last-child::before { bottom: 50%; }
.na-cm-ladder li.is-reached::before { background: #5a2e98; }
.na-cm-ladder-dot { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #343434; z-index: 1; }
.na-cm-ladder li.is-reached .na-cm-ladder-dot { background: #5a2e98; }
.na-cm-ladder li.is-current .na-cm-ladder-dot { box-shadow: 0 0 0 3px rgba(90, 46, 152, .4); }
.na-cm-ladder li img { width: 20px; height: 20px; object-fit: contain; }
.na-cm-ladder-name { flex: 1; }
.na-cm-ladder li.is-reached .na-cm-ladder-name { color: #ababab; }
.na-cm-ladder li.is-current .na-cm-ladder-name { color: #fff; font-weight: 500; }
.na-cm-ladder-min { font-size: 12px; }
.na-cm-ledger-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #262626; }
.na-cm-ledger-name { font-size: 13px; color: #ababab; }
.na-cm-ledger-time { font-size: 11px; color: #666; }
.na-cm-ledger-amt { flex: none; font-size: 13px; font-weight: 500; color: #409f4d; }
.na-cm-ledger-amt.is-neg { color: #bd362f; }

/* ------------------------------------------------------------------ */
/* Super X                                                              */
/* ------------------------------------------------------------------ */
.na-cm-sx { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.na-cm-sx .na-cm-sx-panel { width: calc(33.333% - 14px); }
.na-cm-sx-panel .tab-content > .tab-pane { display: none; }
.na-cm-sx-panel .tab-content > .tab-pane.active { display: block; }
.na-cm-sx-panel .wv-ul:not(.expand) .anime-block-ul li:nth-of-type(n+6) { display: none; }
.na-cm-sx-panel .wv-loadmore .btn-showmore { border: 0; border-radius: 3px; }
.na-cm-sx-foot { margin: -10px 0 10px; text-align: center; }

/* ------------------------------------------------------------------ */
/* Leaderboard                                                          */
/* ------------------------------------------------------------------ */
.na-lb-grid { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.na-lb-grid .na-lb-board { width: calc(33.333% - 14px); }
.na-lb-board .tab-content > .tab-pane { display: none; }
.na-lb-board .tab-content > .tab-pane.active { display: block; }
.na-lb-board .bah-tab-min .anw-tabs { flex-wrap: nowrap; }
/* Rank 1 member: the avatar, blurred, as the item-top art. */
.cbox.cbox-list .anif-block-chart li.na-lb-top .film-poster { overflow: hidden; }
.cbox.cbox-list .anif-block-chart li.na-lb-top .film-poster .film-poster-img { filter: blur(6px) brightness(.8); transform: scale(1.15); }
.na-lb-board li.na-lb-me:not(.item-top) { margin-left: -15px !important; margin-right: -15px; padding-left: 125px !important; padding-top: 7px; padding-bottom: 7px; background: #181818 !important; box-shadow: inset 3px 0 0 #5a2e98; }
.na-lb-board li.na-lb-me:not(.item-top) .film-number { left: 15px; }
.na-lb-board li.na-lb-me:not(.item-top) .film-poster.na-cm-avatar { left: 65px; top: 14px; }
.na-lb-board li.na-lb-me .film-name .user-name { color: #fff; }
.na-lb-fold:not(.is-open) .na-lb-extra { display: none !important; }
.na-lb-more { margin-top: 5px; padding: 8px 12px; border: 0; border-radius: 3px; background: #343434; font-size: 12px; color: #fff !important; }
.na-lb-more:hover { background: #494949; }
/* Member name colour by Mana tier (the profile hero's tiers). */
.na-lb-tier-bronze { color: #f0a36b !important; }
.na-lb-tier-silver { color: #cbd5e1 !important; }
.na-lb-tier-gold { color: #ffce71 !important; }
.na-lb-tier-emerald { color: #7df796 !important; }
.na-lb-tier-radiant { color: #a885da !important; }

/* ------------------------------------------------------------------ */
/* Guides                                                               */
/* ------------------------------------------------------------------ */
.na-gd-list > .block_area-content { padding: 5px 0 15px; }
.na-gd-list .no-content-block { margin: 5px 15px; }
.na-gd-tools { margin: 3px 0; }
.na-gd-search { position: relative; width: 240px; }
.na-gd-list .na-gd-count { clear: both; padding-top: 2px; font-size: 13px; color: #666; }
/* 9anime's dormant `.news-anime-block-ul` rows: 80px thumb, 125px indent. */
.na-gd-rows li { min-height: 90px; }
.na-gd-rows li .film-poster.na-gd-thumb { top: 15px; left: 15px; width: 80px; padding-bottom: 60px; border-radius: 3px; background: #2c2c2c; }
.na-gd-thumb-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #525252; transition: color .2s; }
.na-gd-rows li:hover .na-gd-thumb-inner { color: #a885da; }
.na-gd-rows li .film-detail { min-height: 60px; }
.na-gd-rows li .film-detail .film-name { margin-bottom: 4px; font-size: 15px; font-weight: 500; }
.na-gd-desc { margin-bottom: 6px; font-size: 13px; line-height: 1.5em; color: #666; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.na-gd-cat { display: inline-block; height: 20px; padding: 0 10px; border-radius: 30px; background: #4c4f57; font-size: 11px; line-height: 20px; color: #ddd; }
.na-gd-article > .block_area-content { padding: 20px; }
.na-gd-article .na-gd-title { margin: 0 0 8px; color: #fff; font-weight: 600; line-height: 1.3em; }
.na-gd-meta { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 15px; font-size: 13px; color: #666; }
.na-gd-intro { font-size: 15px; font-weight: 300; line-height: 1.6em; color: #ddd; }
.na-gd-article .article-content { font-size: 14px; font-weight: 300; line-height: 1.6em; color: #aaa; }
.na-gd-article .article-content section { margin-top: 25px; }
.na-gd-article .article-content h2 { margin-bottom: 12px; font-size: 20px; font-weight: 500; line-height: 1.3em; color: #fff; }
.na-gd-step { position: relative; margin-bottom: 12px; padding: 12px 15px 12px 58px; border-radius: 6px; background: #181818; }
.na-gd-step-num { position: absolute; top: 12px; left: 15px; width: 28px; height: 28px; border-radius: 50%; background: #5a2e98; font-size: 13px; font-weight: 600; line-height: 28px; text-align: center; color: #fff; }
.na-gd-step h3 { margin: 3px 0 6px; font-size: 15px; font-weight: 500; line-height: 1.4em; color: #fff; }
.na-gd-lead { margin-bottom: 12px; }
.na-gd-article .gd-p { margin-bottom: 10px; }
.na-gd-article .gd-list { margin-bottom: 10px; padding-left: 20px; }
.na-gd-article .gd-li { margin-bottom: 4px; }
.na-gd-article .gd-li::marker { color: #a885da; }
.na-gd-article .gd-note { margin: 10px 0; padding: 8px 12px; border-left: 3px solid #5a2e98; border-radius: 0 4px 4px 0; background: #262626; }
.na-gd-article .gd-body a { color: #927daf; }
.na-gd-article .gd-body a:hover { color: #fff; }
.na-gd-article .gd-body strong, .na-gd-article .gd-body b { font-weight: 500; color: #fff; }
.na-gd-article .gd-path { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 8px; font-size: 12px; color: #666; }
.na-gd-article .gd-path-sep { margin: 0 6px; font-size: 10px; color: #525252; }
.na-gd-article .gd-shot { margin: 12px 0 0; }
.na-gd-article .gd-shot img { max-width: 100%; height: auto; margin: 0 !important; border-radius: 6px; }
.na-gd-article .gd-caption { margin-top: 6px; font-size: 12px; text-align: center; color: #666; }
.na-gd-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; padding-top: 15px; border-top: 1px solid #262626; }

/* ------------------------------------------------------------------ */
/* Request anime                                                        */
/* ------------------------------------------------------------------ */
/* The inline script shows / hides with the class `hidden` (Bootstrap 4 has none). */
.req-page .hidden, #req-new-modal .hidden { display: none !important; }
.req-page { position: relative; }
/* The two cross-faded [data-req-hero] layers: a faint blurred wash behind the head. */
.na-req-hero { position: absolute; top: 0; left: 0; right: 0; height: 260px; overflow: hidden; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 35%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 35%, #000 55%, transparent 100%); }
.na-req-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 14, 14, .3) 0, #0e0e0e 100%); }
.na-req-hero-img { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(24px); transition: opacity .6s; }
.req-page > .container { position: relative; z-index: 1; }
.req-totals strong { font-weight: 500; color: #fff; }
.na-req .na-req-bar .cat-heading { font-size: 24px; }
.na-req-tabs { margin-top: 2px; }
.na-req .bah-tabs .btn.req-tab { border: 0; background: none; }
.na-req .bah-tabs .btn.req-tab.is-active { color: #fff !important; }
.na-req-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 3px 0; }
.req-search { position: relative; width: 240px; }
.req-search .search-input { padding-left: 32px; padding-right: 58px; }
.req-search-ic { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); font-size: 12px; color: #525252; }
.req-matches { position: absolute; top: 50%; right: 32px; transform: translateY(-50%); padding: 0 5px; border-radius: 3px; background: #343434; font-size: 11px; line-height: 16px; color: #aaa; }
.req-search-clear { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 22px; height: 22px; padding: 0; border: 0; border-radius: 3px; background: none; font-size: 12px; line-height: 22px; color: #666; }
.req-search-clear:hover { color: #fff; }
/* Full width: 7 cards a row at ≥1280 (≈ 9anime's 186px), then styles.css's steps. */
@media screen and (min-width: 1280px) {
    .na-req .film_list-wrap .flw-item.req-cell { width: calc(14.2857% - 14px); }
}
.req-cell .film-poster .na-req-noposter { display: flex; align-items: center; justify-content: center; background: #262626; font-size: 28px; color: #525252; }
.req-cell .film-poster .na-req-link { position: absolute; inset: 0; z-index: 3; }
.req-cell .film-poster .na-req-link::before, .req-cell .film-poster .na-req-link::after { display: none !important; }
.req-cell .tick-item.na-req-status { color: #fff; }
.req-cell .tick-item.na-req-status.is-pending { background: #c39d00; }
.req-cell .tick-item.na-req-status.is-approved { background: #5a2e98; }
.req-cell .tick-item.na-req-status.is-available { background: #409f4d; }
.req-cell .tick-item.na-req-status.is-rejected { background: #921925; }
.req-cell .film-detail { margin-bottom: 8px; }
.na-req-sub { font-size: 12px; line-height: 1.4em; text-align: center; color: #666; }
.na-req-sub span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.na-req-sub .na-req-sub2 { color: #525252; }
.req-cta { display: block; width: 100%; border: 0; border-radius: 3.2px; background: #5a2e98; font-size: 13px; line-height: 1.5em; color: #fff !important; }
.req-cta:hover { color: #fff; }
.req-cta.is-req { background: #4a4b51; }
.req-cta.is-req:hover:not(:disabled) { background: #6e6f74; }
.req-cta:disabled { background: #343434; color: #666 !important; cursor: default; }
.req-cta.is-req:disabled { background: #4a4b51; color: #fff !important; opacity: .65; }
.req-cta .na-btn-loading { display: inline-block; margin-left: 6px; }
.req-state-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.req-more-wrap { margin-top: 10px; text-align: center; }
.req-foot { margin: 0 0 30px; font-size: 13px; text-align: center; color: #666; }
.req-foot .link-highlight { padding: 0; border: 0; background: none; font-size: 13px; }
/* Request dialog (light). */
#req-new-modal .ar-search { margin-bottom: 15px; }
#req-new-modal .ar-search-spin { min-height: 40px; }
.req-results { max-height: 45vh; margin-top: 8px; overflow-y: auto; }
.req-hit { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 3px; }
.req-hit:hover { background: #f3eefa; }
.req-hit-poster { flex: none; width: 30px; height: 40px; overflow: hidden; border-radius: 3px; background: #eee; }
.req-hit-poster img { width: 100%; height: 100%; object-fit: cover; }
.req-hit-body { flex: 1; min-width: 0; }
.req-hit-title { overflow: hidden; font-size: 13px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; color: #111; }
.req-hit-meta { font-size: 11px; color: #666; }
.req-hit-err { margin-top: 2px; font-size: 11px; color: #bd362f; }
.req-results .req-cta { flex: none; width: auto; padding: 4px 10px; font-size: 12px; }
.req-note { padding: 10px 4px; font-size: 13px; color: #666; }
.req-by-id { margin-top: 5px; padding-top: 12px; border-top: 1px solid #eee; font-size: 13px; }
.req-by-id summary { color: #5a2e98; font-weight: 500; cursor: pointer; list-style: none; }
.req-by-id summary::-webkit-details-marker { display: none; }
.req-by-id summary i { transition: transform .2s; }
.req-by-id[open] summary i { transform: rotate(90deg); }
.req-by-id form { margin-top: 12px; }
.req-src { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 10px; }
.req-src .custom-control { width: auto; margin: 0; }
.req-src .custom-control-label { font-size: 13px; line-height: 24px; color: #111; }
.req-id-row { display: flex; gap: 8px; }
.req-id-row .form-control { flex: 1; }
.req-id-row .btn { flex: none; height: 40px; padding: 0 18px; }
.req-id-hint { display: block; margin-top: 6px; font-size: 11px; color: #666; }
.req-id-hint strong { color: #5a2e98; }

/* ------------------------------------------------------------------ */
/* Responsive (9anime's breakpoints: 1279 / 989 / 768 / 639 / 479)      */
/* ------------------------------------------------------------------ */
@media screen and (max-width: 1279px) {
    .na-cm-sx .na-cm-sx-panel, .na-lb-grid .na-lb-board { width: 100%; }
    /* styles.css puts sidebar chart rows two a row when the sidebar stacks. */
    .na-cm-page #main-sidebar .na-cm-topics .na-cm-cate { display: flex; flex-wrap: wrap; gap: 4px; }
    .na-cm-page #main-sidebar .na-cm-topics .na-cm-cate .item { gap: 8px; background: #262626; }
    .na-cm-page #main-sidebar .na-cm-topics .na-cm-cate .item.active { background: #5a2e98; }
}
@media screen and (max-width: 989px) {
    .na-cm-head .na-cm-heading, .na-cm-post .na-cm-post-title, .na-gd-article .na-gd-title { font-size: 20px !important; }
}
@media screen and (max-width: 768px) {
    .na-cm-board .block_area-header .na-cm-tools,
    .na-cm-zone-block .block_area-header .na-cm-tools,
    .na-gd-list .block_area-header .na-gd-tools,
    .na-req-bar .na-req-tools { float: none !important; width: 100%; margin: 8px 0 0; }
    .na-cm-board .na-cm-tools .na-cm-create { margin-left: auto; }
    .na-gd-search, .req-search { flex: 1; width: auto; min-width: 0; }
    .na-req-bar .bah-tabs { white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
    .na-req-bar .bah-tabs::-webkit-scrollbar { display: none; }
    .na-cm-actions { flex-direction: column; }
}
@media screen and (max-width: 639px) {
    .na-cm-item { padding: 12px 10px; }
    .na-cm-vote { width: 28px; margin-right: 8px; }
    .na-cm-main .cm-teaser-posters img { width: 36px; height: 48px; }
    .na-cm-post > .block_area-content, .na-gd-article > .block_area-content, .na-cm-create > .block_area-content { padding: 15px; }
    .na-cm-foot { flex-wrap: wrap; }
    .na-cm-row .na-cm-foot { align-items: flex-end; }
    .cm-matchup-row { gap: 6px; padding: 8px; }
    .na-gd-rows li { padding-left: 105px !important; padding-right: 10px !important; }
    .na-gd-rows li .film-poster.na-gd-thumb { left: 10px; width: 80px; }
    .tl-brow .tl-label, .tl-view .tl-label { width: 48px; }
}
@media screen and (max-width: 479px) {
    .na-cm-owner .na-cm-rank { display: none; }
}