/* Portal layout. */
html, body, body.page-body { background: #1b1d1f; color: #c6c9cf; }
html.portal-theme-dark { color-scheme: dark; }
body.page-body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; }
body.page-body a { color: #c9cbd1; }
/* Desktop page scrollbar: match the reference portal's compact 5px rail.
* The generic WebKit selectors also keep internal scrollable theme panels
* visually consistent with the page viewport. */
html, body { scrollbar-color: rgba(130, 130, 130, .5) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(130, 130, 130, .5); }
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { border-radius: 4px; background-color: #f1404b; }
::-webkit-scrollbar-corner { border-radius: 0 0 8px 0; background: transparent; }
::-webkit-scrollbar-button { width: 2px; height: 2px; background-color: transparent; }
.page-container .main-content { background: #1b1d1f; padding: 28px 0 0; }
.sidebar-menu { width: 200px; background: #2c2e2f; }
.sidebar-menu .sidebar-menu-inner { display: flex; flex-direction: column; height: 100vh; }
.sidebar-menu .logo-env { flex: 0 0 74px; height: 74px; padding: 20px 20px 20px 40px; border-color: #35383a; box-sizing: border-box; }
.sidebar-menu .logo-env .logo-expanded img { max-width: 154px; max-height: 32px; height: auto !important; object-fit: contain; }
.sidebar-menu .logo-env .portal-brand-text { display: none; max-width: 154px; overflow: hidden; color: #e4e6eb; font-size: 19px; font-weight: 600; line-height: 32px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-menu .logo-env .logo-expanded.logo-fallback .portal-brand-text { display: block; }
.sidebar-menu .main-menu { position: relative; flex: 1 1 auto; min-height: 0; margin: 0; padding: 7px 0 14px; overflow-x: hidden; overflow-y: auto; }
.sidebar-menu .main-menu > li > a { display: flex; align-items: center; min-height: 45px; margin: 1.5px 8px; padding: 0 10px; border-color: transparent; border-radius: 5px; background: transparent; color: #c6c9cf; font-size: 14px; line-height: 21px; transition: background-color .3s ease, color .3s ease; }
.sidebar-menu .main-menu > li > a:hover, .sidebar-menu .main-menu > li > a:focus { background: rgba(0, 0, 0, .1); color: #fff; outline: 0; }
.sidebar-menu .main-menu > li.active > a, .sidebar-menu .main-menu > li.is-current > a { color: #fff; }
.sidebar-menu .main-menu > li > a > i { width: 26px; margin-right: 10px; color: #c6c9cf; font-size: 21px; text-align: center; transition: color .3s ease; }
.sidebar-menu .main-menu > li > a:hover > i, .sidebar-menu .main-menu > li > a:focus > i { color: #fff; }
.sidebar-menu .main-menu > li.is-current > a > i { color: #f0f1f2; }
.sidebar-menu .main-menu ul li a { min-height: 39px; padding-left: 31px; color: #9ca1a8; }
.sidebar-menu .submit-tag { display: none; }
.user-info-navbar { height: 74px !important; margin: -28px 0 0 !important; background: #2c2e2f; }
.navbar .navbar-content { display: flex !important; align-items: center; justify-content: flex-start !important; height: 74px; padding: 0; background: #2c2e2f !important; box-shadow: none; }
.navbar .navbar-content > .user-info-menu { float: none !important; margin: 0 !important; }
.navbar .navbar-content > .user-info-menu:last-child { margin-left: auto !important; }
.user-info-navbar .user-info-menu > li > a { padding: 28px 10px; color: #c6c9cf; }
.portal-welcome { display: none; }
.portal-top-menu { float: none !important; margin-left: 20px !important; }
.portal-top-menu ul { display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; list-style: none; }
.portal-top-menu a { display: block; padding: 27px 0; color: #d1d4d9; font-size: 14px; line-height: 20px; text-decoration: none; }
.portal-top-menu a:hover, .portal-top-menu a:focus { color: #fff; text-decoration: none; }
/* nav.css still assumes the original 250px sidebar. Pin both sides instead
* so the top bar joins the 200px sidebar cleanly and reaches the viewport. */
@media (min-width: 768px) {
/* The header must span the complete content rail. Legacy navbar rules
* otherwise reserve 50px at the far right on ultra-wide viewports. */
.page-container > .sidebar-menu + .main-content > nav.user-info-navbar { right: 0 !important; left: 200px !important; width: auto !important; }
.page-container > .sidebar-menu.collapsed + .main-content > nav.user-info-navbar { left: 80px; width: auto !important; }
}
/* The top channel strip follows the dense, unobtrusive rhythm of navigation sites. */
.portal-channels { display: none; }
.portal-channels-inner { height: 74px; max-width: none; padding: 0 20px; gap: 0; }
.portal-channels-inner { display: flex; align-items: center; }
.portal-channel-menu { display: flex; align-items: center; gap: 18px; margin: 0; padding: 0; overflow: visible; list-style: none; }
.portal-channel-menu a { display: block; padding: 7px 1px; border-radius: 4px; color: #d1d4d9; font-size: 14px; }
.portal-channel-menu a:hover, .portal-channel-menu .current-menu-item > a { background: transparent; color: #fff; box-shadow: inset 0 -2px 0 #aaa39a; }
/* Dedicated zone pages retain the portal grid while clearly separating the
* editable zone heading from the category sections below it. */
.portal-zone-back { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #35383a; }
.portal-zone-page .sites-list { padding-top: 0; }
.portal-zone-intro { max-width: 1920px; margin: 36px auto 0; padding: 0 15px; }
.portal-zone-intro h1 { margin: 0; color: #d8dadd; font-size: 22px; font-weight: 600; line-height: 30px; }
.portal-zone-description { margin-top: 7px; color: #838891; font-size: 13px; line-height: 21px; }
.portal-zone-description > :last-child { margin-bottom: 0; }
.portal-zone-empty { max-width: 520px; margin: 46px auto; padding: 22px; border: 1px dashed #45494e; border-radius: 9px; color: #8e939b; text-align: center; }
.portal-zone-empty a { margin-left: 8px; color: #c6c9cf; text-decoration: underline; }
/* Animation-zone news boards: self-hosted RSS/Atom output with a compact
* source/ranking/list rhythm. No third-party API or content is embedded. */
.portal-anime-zone-page #search { margin-top: 81px; margin-bottom: 34px; }
.portal-anime-zone-page .portal-zone-intro { display: none; }
.portal-news-boards { width: 100%; max-width: 1920px; margin: 0 auto 22px; padding: 0 15px; }
.portal-news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 455px)); justify-content: center; gap: 14px; }
.portal-news-board { display: flex; flex-direction: column; min-width: 0; height: 284px; border-radius: 9px; background: #2c2e2f; overflow: hidden; }
.portal-news-header { display: flex; align-items: center; min-height: 49px; padding: 14px 15px 8px; gap: 10px; }
.portal-news-source { display: flex; align-items: center; min-width: 0; gap: 8px; color: #d0d3d7; font-size: 14px; font-weight: 600; line-height: 20px; }
.portal-news-source img { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 4px; object-fit: cover; }
.portal-news-source-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; background: #41454a; color: #c0c4c9; font-size: 11px; overflow: hidden; }
.portal-news-source-icon .fa { display: none; }
.portal-news-source-icon.is-fallback .fa { display: inline-block; }
.portal-news-source-icon.is-fallback .portal-news-favicon { display: none; }
.portal-news-favicon { display: block; width: 20px; height: 20px; object-fit: cover; }
.portal-news-source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-news-footer { display: flex; align-items: center; min-height: 30px; padding: 2px 15px 10px; }
.portal-news-more { color: #777e86 !important; font-size: 12px; line-height: 20px; text-decoration: none; }
.portal-news-more:hover, .portal-news-more:focus { color: #d3d6da !important; text-decoration: none; }
.portal-news-refresh { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #747a82; font-size: 13px; line-height: 1; }
.portal-news-refresh:hover, .portal-news-refresh:focus { background: #383b3f; color: #e0e2e5; outline: 0; }
.portal-news-refresh.is-loading .fa { animation: portal-news-spin .8s linear infinite; }
.portal-news-refresh.is-failed { color: #e88a91; }
.portal-news-refresh .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@keyframes portal-news-spin { to { transform: rotate(360deg); } }
.portal-news-list { flex: 1; min-height: 0; padding: 0 15px; overflow: auto; scrollbar-color: rgba(130, 130, 130, .5) transparent; scrollbar-width: thin; }
.portal-news-list::-webkit-scrollbar { width: 5px; height: 5px; }
.portal-news-list::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(130, 130, 130, .5); }
.portal-news-list::-webkit-scrollbar-thumb:hover, .portal-news-list::-webkit-scrollbar-thumb:active { background-color: #f1404b; }
.portal-news-list ol { margin: 0; padding: 0; list-style: none; }
.portal-news-list li { display: flex; align-items: center; min-width: 0; min-height: 24px; margin: 0 0 3px; gap: 8px; }
.portal-news-list li a { overflow: hidden; color: #afb3b8; font-size: 12px; line-height: 18px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.portal-news-list li a:hover, .portal-news-list li a:focus { color: #f0f1f2; text-decoration: underline; }
.portal-news-rank { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 4px; background: #494d51; color: #c7cbd0; font-size: 10px; font-weight: 600; line-height: 1; }
.portal-news-rank-1 { background: #e94f58; color: #fff; }
.portal-news-rank-2 { background: #da8541; color: #fff; }
.portal-news-rank-3 { background: #b59a2c; color: #fff; }
.portal-news-empty { margin: 6px 0; color: #818790; font-size: 12px; line-height: 20px; }
#search {
/* The legacy nav is positioned outside normal flow. 81px places the
* search-tab row at 109px from the viewport top, matching the reference. */
max-width: 800px;
margin: 81px auto 34px;
}
.portal-search-form { position: relative; }
.portal-search-groups { display: flex; justify-content: center; gap: 0; height: 46px; margin-bottom: 0; }
#search .portal-search-group { position: relative; display: inline-flex; box-sizing: border-box; flex: 0 0 70px; align-items: center; justify-content: center; width: 70px !important; height: 46px !important; padding: 2px 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #c6c9cf; font-size: 15px; line-height: 22.5px; opacity: .5; transition: color .3s ease, opacity .3s ease; }
#search .portal-search-group, #search .portal-search-group:hover, #search .portal-search-group:focus { border-bottom: 0 !important; text-decoration: none; }
#search .portal-search-group:hover, #search .portal-search-group:focus, #search .portal-search-group.is-active { color: #c6c9cf; outline: 0; opacity: 1; }
/* Reference-style search group indicator: the selected provider has a small
* centred pill, while an unselected item shows only a subtle hover dot. */
#search .portal-search-group::after { position: absolute; right: auto; bottom: 5px; left: 50%; width: 4px; height: 4px; border: 0; border-radius: 2px; background: transparent; content: ""; opacity: 0; transform: translateX(-50%); transition: background-color .3s ease, opacity .3s ease; }
#search .portal-search-group:hover::after, #search .portal-search-group:focus::after { background: #fff; opacity: 1; }
#search .portal-search-group.is-active::after { right: auto; bottom: 5px; left: 50%; width: 35px; height: 4px; border: 0; border-radius: 100px; background: #888; opacity: 1; }
.portal-search-field { position: relative; }
#search .portal-search-field #search-text { display: block; width: 100%; height: 50px; padding: 9px 20px; border: 0 !important; border-radius: 50px; outline: 0; background: rgba(0, 0, 0, .2); color: #fff; box-shadow: none !important; -webkit-appearance: none; appearance: none; font-size: 16px; }
/* The reference search field has no focus ring, border or inset shadow.
* Keep that exact quiet state for mouse, keyboard and autofill focus. */
#search .portal-search-field #search-text:focus,
#search .portal-search-field #search-text:focus-visible,
#search .portal-search-field #search-text:-webkit-autofill,
#search .portal-search-field #search-text:-webkit-autofill:focus { border: 0 !important; border-color: transparent !important; outline: 0 !important; box-shadow: none !important; -webkit-text-fill-color: #fff; }
#search-text::placeholder { color: #777d87; }
#search .portal-search-field button { position: absolute; top: 4px; right: 7px; width: 42px; height: 42px; margin: 0; border: 0; border-radius: 50%; background: transparent; }
#search .portal-search-field button:hover, #search .portal-search-field button:focus { background: #2d3035; outline: 0; }
#search .portal-search-field button i { color: #f1f2f4; font-size: 18px; }
.portal-search-providers { min-height: 24px; margin-top: 0; }
.portal-search-provider-list { display: flex; justify-content: center; gap: 6px; }
.portal-search-provider-list[hidden] { display: none !important; }
/* The legacy theme targets every #search button. Reset that behaviour for
* the tab controls; only the magnifier button is absolutely positioned. */
#search .portal-search-group { position: relative !important; top: auto !important; right: auto !important; width: 70px !important; height: 46px !important; margin: 0 !important; }
#search .portal-search-provider { position: relative !important; top: auto !important; right: auto !important; width: auto !important; height: auto !important; margin: 0 !important; }
#search .portal-search-provider-list[data-search-provider-list="site"] { display: none !important; }
#search .portal-search-provider { padding: 3px 9px; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #777c84; font-size: 13px; line-height: 20px; }
#search .portal-search-provider:hover, #search .portal-search-provider:focus, #search .portal-search-provider.is-active { background: transparent !important; color: #d6d8dc; outline: 0; }
.sites-list {
/* 1920px is the wide-desktop measure; it stays centred on 2K/4K screens. */
width: 100%;
max-width: 1900px;
margin: 0 auto;
padding: 0 0 42px;
}
.sites-list .site-section-header { display: flex; align-items: center; min-height: 22px; margin: 30px 15px 24px; }
.sites-list .site-section-header h4.text-gray { display: block !important; margin: 0 !important; padding: 0; border: 0; color: #aaa299; font-size: 18px; font-weight: 600; letter-spacing: .1px; line-height: 22px; }
.sites-list .site-section-header h4.text-gray > .fa { width: 20px; margin-right: 8px; color: #aaa299; font-size: 17px; text-align: center; }
.site-section-more { margin-left: auto; padding: 0 !important; border: 0 !important; background: transparent !important; color: #9499a2 !important; font-size: 12px !important; line-height: 22px; }
.site-section-more:hover { background: transparent !important; color: #d9dbe0 !important; }
.site-section-more .fa { margin-left: 5px; }
.sites-list .site-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-auto-flow: row;
align-items: start;
margin: 0;
}
/* Bootstrap gives .row generated clearing boxes. In a CSS grid those boxes
* become real grid items and incorrectly consume the first/last columns. */
.sites-list .site-grid::before,
.sites-list .site-grid::after {
display: none !important;
content: none !important;
}
.sites-list .site-grid .xe-card {
/* Reset the configurable Bootstrap column classes carried by old entries. */
position: relative !important;
float: none !important;
grid-column: auto !important;
grid-row: auto !important;
width: auto !important;
min-width: 0;
height: 94px;
margin: 0 !important;
margin-left: 0 !important;
padding: 0 15px;
}
.sites-list .site-grid .xe-widget.xe-conversations { display: flex; align-items: center; box-sizing: border-box; left: 15px; right: 15px; height: 70px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: #2c2e2f; box-shadow: none; transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease; will-change: transform; }
/* Lift only the card surface, not its grid slot, so rows stay aligned. */
.sites-list .site-grid .xe-widget.xe-conversations:hover, .sites-list .site-grid .xe-widget.xe-conversations:focus-within { background: #2c2e2f !important; box-shadow: 0 26px 40px -24px rgba(2, 4, 6, .3); transform: translateY(-6px); }
.xe-card-link { display: flex; align-items: center; width: 100%; height: 100%; min-width: 0; padding: 15px 46px 15px 15px; border-radius: inherit; color: inherit; text-decoration: none; }
.xe-card-link:hover, .xe-card-link:focus { color: inherit; outline: 0; text-decoration: none; }
.xe-card-go { position: absolute; top: 20px; right: 0; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; color: #6c757d; font-size: 17px; line-height: 30px; opacity: .2; text-decoration: none; transition: opacity .3s ease; }
.sites-list .site-grid .xe-widget.xe-conversations:hover .xe-card-go,
.sites-list .site-grid .xe-widget.xe-conversations:focus-within .xe-card-go,
.xe-card-go:hover, .xe-card-go:focus { color: #6c757d; opacity: 1; outline: 0; text-decoration: none; }
/* The legacy stylesheet applies word-break to every tooltip in main content.
* Keep this short action label on one compact line, as a direct-link hint. */
.xe-card-go + .tooltip { max-width: none; overflow-wrap: normal; white-space: nowrap; word-break: normal; }
.xe-card-go + .tooltip .tooltip-inner { max-width: none; padding: 3px 8px; overflow-wrap: normal; white-space: nowrap; word-break: normal; }
.xe-comment-entry { display: flex; align-items: center; min-width: 0; }
.xe-comment-entry img { width: 40px; height: 40px; margin-right: 8px; border-radius: 50%; background: #3b3e44; object-fit: cover; }
.xe-comment { min-width: 0; }
.sites-list .xe-user-name strong { color: #c6c9cf; font-size: 14px; font-weight: 600; }
.sites-list .xe-comment p { margin-top: 0; color: #6c757d; font-size: 12px; line-height: 18px; }
/* The portal has no page-footer copyright block by design. */
footer.main-footer { display: none !important; }
.footer-text { color: #747984; }
.btn-move { border-color: #34363b !important; background: #25272b !important; color: #878c95 !important; }
.btn-move:hover { background: #34363b !important; color: #f2f3f4 !important; }
/* Site detail pages use a compact, action-oriented layout without ad slots
* or public comment forms. */
.portal-site-detail-container { max-width: 1270px; margin: 142px auto 0; padding: 0 15px 54px; }
.portal-site-detail { display: grid; grid-template-columns: 288px minmax(0, 1fr); column-gap: 30px; align-items: start; }
.portal-site-art { position: relative; display: flex; align-items: center; justify-content: center; width: 288px; height: 288px; border-radius: 10px; overflow: hidden; background: #222; box-shadow: 0 30px 20px -20px rgba(0,0,0,.15); }
.portal-site-art-blur { position: absolute; inset: -24px; background-position: center; background-repeat: no-repeat; background-size: cover; filter: blur(16px) brightness(.35) saturate(.65); opacity: .75; transform: scale(1.12); }
.portal-site-art img { position: relative; width: 72px; height: 72px; border: 0; border-radius: 6px; background: transparent; object-fit: cover; }
.portal-site-summary { min-width: 0; padding: 3px 0; }
.portal-site-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 20px; }
.portal-site-tags a { padding: 2px 6px; border-radius: 4px; background: #2684c7; color: #fff !important; font-size: 12px; line-height: 16px; text-decoration: none; }
.portal-site-tags a:hover, .portal-site-tags a:focus { background: #3d9bdd; text-decoration: none; }
.portal-site-summary h1 { margin: 16px 0; color: #d7dade; font-size: 28px; font-weight: 500; line-height: 34px; }
.portal-site-description { margin: 0 0 8px; color: #bbb; font-size: 16px; line-height: 32px; }
.portal-site-meta { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0; color: #c6c9cf; font-size: 14px; line-height: 21px; }
.portal-site-meta-label { margin-right: 8px; color: currentColor; white-space: nowrap; }
.portal-site-meta-link { display: inline-flex; align-items: baseline; margin-right: 8px; color: #c6c9cf !important; text-decoration: none; white-space: nowrap; transition: color .18s ease; }
.portal-site-meta-link i { margin-left: 3px; color: currentColor; font-size: 11px; }
.portal-site-meta-link:hover, .portal-site-meta-link:focus { color: #fff !important; outline: 0; text-decoration: none; }
.portal-site-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 16px; }
.portal-site-action { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 16px; border: 0; border-radius: 6px; background: rgba(138,138,138,.15); color: #ddd !important; font-size: 14px; line-height: 21px; text-decoration: none; transition: background-color .3s ease, color .3s ease; }
.portal-site-action i { margin-left: 5px; color: currentColor; font-size: 15px; transition: transform .2s ease-out; }
.portal-site-actions > a.portal-site-action:hover, .portal-site-actions > a.portal-site-action:focus { background: #202224; color: #fff !important; outline: 0; text-decoration: none; }
.portal-site-actions > a.portal-site-action:hover i, .portal-site-actions > a.portal-site-action:focus i { transform: translateX(4px); }
.portal-site-qr { position: relative; display: inline-flex; }
.portal-site-qr-trigger { cursor: default; user-select: none; }
.portal-site-qr-trigger:focus { background: #202224; color: #fff !important; outline: 0; }
.portal-site-qr-popover { position: absolute; top: calc(100% + 7px); left: 50%; z-index: 80; display: block; width: 166px; padding: 8px; border-radius: 4px; background: #000; box-shadow: 0 7px 18px rgba(0,0,0,.26); opacity: 0; pointer-events: none; transform: translate(-50%, -6px); transition: opacity .15s linear, transform .15s ease, visibility .15s linear; visibility: hidden; }
.portal-site-qr-popover::before { position: absolute; top: -6px; left: calc(50% - 6px); width: 0; height: 0; border-right: 6px solid transparent; border-bottom: 6px solid #000; border-left: 6px solid transparent; content: ''; }
.portal-site-qr-popover img { display: block; width: 150px; height: 150px; background: #fff; }
.portal-site-qr:hover .portal-site-qr-popover, .portal-site-qr:focus-within .portal-site-qr-popover { opacity: .9; transform: translate(-50%, 0); visibility: visible; }
.portal-site-alternatives { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 16px; margin-top: 10px; color: #c6c9cf; font-size: 14px; line-height: 21px; }
.portal-site-alternatives > .fa-link { margin-right: 5px; color: #c6c9cf; font-size: 13px; }
.portal-site-alternatives-label { margin-right: 0; color: currentColor; white-space: nowrap; }
.portal-site-alternatives a { display: inline-flex; align-items: center; margin-bottom: 8px; color: #c6c9cf !important; text-decoration: none; transition: color .18s ease, transform .18s ease; white-space: nowrap; }
.portal-site-alternatives a i { margin-left: 4px; color: currentColor; font-size: 12px; transition: color .18s ease, transform .18s ease; }
.portal-site-alternatives a:hover, .portal-site-alternatives a:focus { color: #fff !important; outline: 0; text-decoration: none; transform: translateX(2px); }
.portal-site-alternatives a:hover i, .portal-site-alternatives a:focus i { color: currentColor; transform: translate(1px, -1px); }
.portal-site-content { grid-column: 1 / -1; width: 100%; max-width: 1110px; justify-self: center; margin-top: 116px; padding-top: 24px; color: #aeb3b9; font-size: 14px; line-height: 24px; }
.portal-site-related { width: 100%; max-width: 1110px; margin: 48px auto 0; }
.portal-site-related h2 { margin: 0 0 23px; color: #aeb3b9; font-size: 17px; font-weight: 600; line-height: 24px; }
.portal-site-related h2 i { margin-right: 8px; color: #8e959d; }
.portal-site-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; }
.portal-site-related-grid .xe-card { min-width: 0; height: 72px; margin: 0; }
.portal-site-related-grid .xe-widget.xe-conversations { display: flex; align-items: center; height: 70px; margin: 0; padding: 0; border-radius: 10px; background: #2c2e2f; }
.portal-site-related-grid .xe-widget.xe-conversations:hover, .portal-site-related-grid .xe-widget.xe-conversations:focus { background: #2c2e2f !important; text-decoration: none; transform: none; }
.portal-site-related-grid .xe-comment p { margin-top: 0; margin-bottom: 0; color: #6c757d; font-size: 12px; line-height: 18px; }
.portal-site-related-empty { color: #818892; font-size: 14px; }
/* Fixed page tools mirror the reference navigation rhythm: the return button
* appears after scrolling, with the persistent theme switch directly below. */
.portal-floating-tools { position: fixed; right: 10px; bottom: 20px; z-index: 2100; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.portal-mobile-nav-scrim { display: none; }
.portal-back-to-top, .portal-theme-toggle { position: relative; right: auto; bottom: auto; z-index: auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(10, 10, 10, .4); color: #ccc; box-shadow: none; font-size: 18px; line-height: 1; transition: background-color .2s ease, color .2s ease, opacity .2s ease; }
.portal-back-to-top[hidden] { display: none !important; }
.portal-back-to-top:hover, .portal-back-to-top:focus, .portal-theme-toggle:hover, .portal-theme-toggle:focus { background: rgba(10, 10, 10, .72); color: #fff; outline: 0; }
.portal-theme-toggle:focus-visible { box-shadow: 0 0 0 3px rgba(156, 160, 165, .4); }
.portal-theme-toggle::before { position: absolute; top: 50%; right: calc(100% + 10px); padding: 6px 9px; border-radius: 3px; background: #090a0b; color: #fff; content: attr(data-theme-label); font-size: 14px; font-weight: 400; line-height: 20px; opacity: 0; pointer-events: none; transform: translate(4px, -50%); transition: opacity .2s ease, transform .2s ease; white-space: nowrap; }
.portal-theme-toggle:hover::before, .portal-theme-toggle:focus::before { opacity: 1; transform: translate(0, -50%); }
.portal-theme-toggle::after { position: absolute; top: 50%; right: calc(100% + 4px); width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid #090a0b; content: ""; opacity: 0; pointer-events: none; transform: translate(4px, -50%); transition: opacity .2s ease, transform .2s ease; }
.portal-theme-toggle:hover::after, .portal-theme-toggle:focus::after { opacity: 1; transform: translate(0, -50%); }
/* Accessible labels stay available to screen readers without taking space in
* either visible circular tool. */
.portal-floating-tools .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
/* Day palette. It overrides only portal presentation rules, leaving the
* WordPress admin and the login page untouched. */
html.portal-theme-light { color-scheme: light; }
html.portal-theme-light, html.portal-theme-light body, html.portal-theme-light body.page-body { background: #f5f6f8; color: #3d4650; }
html.portal-theme-light body.page-body a { color: #4b5662; }
html.portal-theme-light .page-container .main-content { background: #f5f6f8; }
html.portal-theme-light .sidebar-menu, html.portal-theme-light .user-info-navbar, html.portal-theme-light .navbar .navbar-content { background: #fff !important; }
html.portal-theme-light .sidebar-menu .logo-env { border-color: #edf0f3; }
html.portal-theme-light .sidebar-menu .logo-env .portal-brand-text { color: #2d3742; }
html.portal-theme-light .sidebar-menu .main-menu > li > a { color: #596572; }
html.portal-theme-light .sidebar-menu .main-menu > li > a > i { color: #647180; }
html.portal-theme-light .sidebar-menu .main-menu > li > a:hover, html.portal-theme-light .sidebar-menu .main-menu > li > a:focus { background: rgba(31, 42, 55, .06); color: #1f2933; }
html.portal-theme-light .sidebar-menu .main-menu > li > a:hover > i, html.portal-theme-light .sidebar-menu .main-menu > li > a:focus > i, html.portal-theme-light .sidebar-menu .main-menu > li.active > a, html.portal-theme-light .sidebar-menu .main-menu > li.is-current > a { color: #1f2933; }
html.portal-theme-light .sidebar-menu .main-menu ul li a { color: #66727e; }
html.portal-theme-light .user-info-navbar .user-info-menu > li > a, html.portal-theme-light .portal-top-menu a { color: #596572; }
html.portal-theme-light .portal-top-menu a:hover, html.portal-theme-light .portal-top-menu a:focus, html.portal-theme-light .portal-top-menu .current-menu-item > a { color: #1f2933; }
html.portal-theme-light #search .portal-search-group { color: #78838f; }
html.portal-theme-light #search .portal-search-group:hover, html.portal-theme-light #search .portal-search-group:focus, html.portal-theme-light #search .portal-search-group.is-active { color: #27323d; }
html.portal-theme-light #search .portal-search-group:hover::after, html.portal-theme-light #search .portal-search-group:focus::after { background: #586573; }
html.portal-theme-light #search .portal-search-group.is-active::after { background: #586573; }
html.portal-theme-light #search .portal-search-field #search-text { background: #fff; color: #27323d; box-shadow: 0 5px 18px rgba(24, 39, 56, .06); }
html.portal-theme-light #search .portal-search-field #search-text:focus { border-color: transparent !important; outline: 0; box-shadow: none; }
html.portal-theme-light #search .portal-search-field #search-text:-webkit-autofill,
html.portal-theme-light #search .portal-search-field #search-text:-webkit-autofill:focus { border-color: transparent !important; box-shadow: 0 0 0 1000px #fff inset !important; -webkit-text-fill-color: #27323d; }
html.portal-theme-light #search-text::placeholder { color: #9aa3ad; }
html.portal-theme-light #search .portal-search-field button i { color: #36424f; }
html.portal-theme-light #search .portal-search-field button:hover, html.portal-theme-light #search .portal-search-field button:focus { background: #eef1f4; }
html.portal-theme-light #search .portal-search-provider { color: #7a8590; }
html.portal-theme-light #search .portal-search-provider:hover, html.portal-theme-light #search .portal-search-provider:focus, html.portal-theme-light #search .portal-search-provider.is-active { color: #303b46; }
html.portal-theme-light .sites-list .site-section-header h4.text-gray, html.portal-theme-light .sites-list .site-section-header h4.text-gray > .fa, html.portal-theme-light .portal-zone-intro h1 { color: #313c47; }
html.portal-theme-light .portal-zone-description, html.portal-theme-light .site-section-more { color: #77828d !important; }
html.portal-theme-light .sites-list .site-grid .xe-widget.xe-conversations { background: #fff; box-shadow: 0 5px 16px rgba(24, 39, 56, .05); }
html.portal-theme-light .sites-list .site-grid .xe-widget.xe-conversations:hover, html.portal-theme-light .sites-list .site-grid .xe-widget.xe-conversations:focus { background: #fff !important; box-shadow: 0 8px 22px rgba(24, 39, 56, .11); }
html.portal-theme-light .xe-card-go { color: #6d7882; }
html.portal-theme-light .xe-card-go:hover, html.portal-theme-light .xe-card-go:focus { color: #6d7882; }
html.portal-theme-light .sites-list .xe-user-name strong { color: #37424d; }
html.portal-theme-light .sites-list .xe-comment p { color: #87919b; }
html.portal-theme-light .portal-zone-back { border-color: #e8ebef; }
html.portal-theme-light .portal-zone-empty { border-color: #cbd2d9; color: #6f7a85; }
html.portal-theme-light .portal-zone-empty a { color: #37424d; }
html.portal-theme-light .portal-news-board { background: #fff; box-shadow: 0 5px 16px rgba(24, 39, 56, .05); }
html.portal-theme-light .portal-news-source { color: #37424d; }
html.portal-theme-light .portal-news-source-icon { background: #edf0f3; color: #68737e; }
html.portal-theme-light .portal-news-more { color: #8a949e !important; }
html.portal-theme-light .portal-news-more:hover, html.portal-theme-light .portal-news-more:focus { color: #33404c !important; }
html.portal-theme-light .portal-news-refresh { color: #8a949e; }
html.portal-theme-light .portal-news-refresh:hover, html.portal-theme-light .portal-news-refresh:focus { background: #edf1f4; color: #35414c; }
html.portal-theme-light .portal-news-list li a { color: #65717c; }
html.portal-theme-light .portal-news-list li a:hover, html.portal-theme-light .portal-news-list li a:focus { color: #202b35; }
html.portal-theme-light .portal-news-rank { background: #e6e9ed; color: #6b7580; }
html.portal-theme-light .portal-news-rank-1 { background: #e94f58; color: #fff; }
html.portal-theme-light .portal-news-rank-2 { background: #da8541; color: #fff; }
html.portal-theme-light .portal-news-rank-3 { background: #b59a2c; color: #fff; }
html.portal-theme-light .portal-news-empty { color: #84909b; }
html.portal-theme-light .portal-back-to-top, html.portal-theme-light .portal-theme-toggle { background: #fff; color: #4f5d6a; box-shadow: 0 3px 13px rgba(24, 39, 56, .14); }
html.portal-theme-light .portal-back-to-top:hover, html.portal-theme-light .portal-back-to-top:focus, html.portal-theme-light .portal-theme-toggle:hover, html.portal-theme-light .portal-theme-toggle:focus { background: #edf1f4; color: #1f2933; }
html.portal-theme-light .portal-site-art { background: #eef1f4; }
html.portal-theme-light .portal-site-summary h1 { color: #303b46; }
html.portal-theme-light .portal-site-description { color: #68747f; }
html.portal-theme-light .portal-site-meta, html.portal-theme-light .portal-site-meta-link { color: #68747f !important; }
html.portal-theme-light .portal-site-meta-link:hover, html.portal-theme-light .portal-site-meta-link:focus { color: #2487c9 !important; }
html.portal-theme-light .portal-site-action { background: rgba(112,123,134,.12); color: #48545f !important; }
html.portal-theme-light .portal-site-actions > a.portal-site-action:hover, html.portal-theme-light .portal-site-actions > a.portal-site-action:focus, html.portal-theme-light .portal-site-qr-trigger:focus { background: #202224; color: #fff !important; }
html.portal-theme-light .portal-site-alternatives { color: #68747f; }
html.portal-theme-light .portal-site-alternatives a { color: #68747f !important; }
html.portal-theme-light .portal-site-alternatives a:hover, html.portal-theme-light .portal-site-alternatives a:focus { color: #2487c9 !important; }
html.portal-theme-light .portal-site-content { color: #596570; }
html.portal-theme-light .portal-site-related h2 { color: #47535e; }
html.portal-theme-light .portal-site-related-grid .xe-widget.xe-conversations { background: #fff; box-shadow: 0 5px 16px rgba(24,39,56,.05); }
@media (max-width: 1199px) { .sites-list .site-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .portal-news-grid { grid-template-columns: repeat(2, minmax(0, 455px)); } }
@media (max-width: 991px) { .sites-list .site-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* The reference portal enters its six-card wide-desktop grid at 1400px.
* Keeping this breakpoint aligned avoids oversized cards on 1440p displays
* while retaining the same six-column layout on 4K screens. */
@media (min-width: 1400px) { .sites-list .site-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
.sites-list .site-grid .xe-widget.xe-conversations { transition: none; }
.sites-list .site-grid .xe-widget.xe-conversations:hover,
.sites-list .site-grid .xe-widget.xe-conversations:focus-within { transform: none; }
}
@media (max-width: 767px) {
/* Mobile follows the compact two-column rhythm of a navigation portal.
* Keep the header short, make the content measure predictable, and never
* spend card width twice with nested padding. */
.sidebar-menu .sidebar-menu-inner { height: auto; max-height: 100vh; }
body.portal-mobile-nav-open { overflow: hidden; }
.portal-mobile-nav-scrim { display: none; }
body.portal-mobile-nav-open .portal-mobile-nav-scrim {
position: fixed;
inset: 0;
z-index: 1990;
display: block;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: rgba(0, 0, 0, .58);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
body.portal-mobile-nav-open .sidebar-menu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
display: flex;
flex-direction: column;
z-index: 2000;
width: 260px;
max-width: calc(100vw - 40px);
height: 100vh;
margin: 0;
background: #2c2e2f;
box-shadow: 12px 0 30px rgba(0, 0, 0, .32);
}
body.portal-mobile-nav-open .sidebar-menu .sidebar-menu-inner {
height: 100vh;
max-height: none;
overflow: hidden;
}
body.portal-mobile-nav-open .sidebar-menu .logo-env {
flex-basis: 74px;
height: 74px;
padding: 20px;
border-bottom: 1px solid #35383a;
}
/* The reference drawer uses a 40px-high brand centered in its 74px header.
* Keep the site's own aspect ratio instead of stretching its logo to the
* reference logo's wider aspect ratio. */
body.portal-mobile-nav-open .sidebar-menu .logo-env .logo-expanded {
max-width: 210px;
}
body.portal-mobile-nav-open .sidebar-menu .logo-env .logo-expanded img {
display: block;
width: auto;
max-width: 210px;
max-height: 40px;
height: 40px !important;
}
body.portal-mobile-nav-open .sidebar-menu .logo-env .portal-brand-text {
font-size: 20px;
line-height: 40px;
}
/* Bootstrap's .visible-xs uses !important. The drawer must not retain a
* second hamburger icon: the reference keeps only its centered brand. */
body.portal-mobile-nav-open .sidebar-menu .mobile-menu-toggle { display: none !important; }
body.portal-mobile-nav-open .sidebar-menu .main-menu.mobile-is-visible {
display: block;
flex: 1 1 auto;
height: calc(100vh - 74px);
max-height: none;
margin: 0;
padding: 0;
overflow-y: auto;
background: #2c2e2f;
}
body.portal-mobile-nav-open .sidebar-menu .main-menu > li > a {
min-height: 45px;
margin: 1.5px 8px;
padding: 12px 10px;
border-radius: 5px;
}
body.portal-mobile-nav-open .sidebar-menu .main-menu > li > a > i { width: 26px; margin-right: 10px; font-size: 21px; }
body.portal-mobile-nav-open .sidebar-menu .main-menu ul li a { padding-left: 52px; }
html.portal-theme-light body.portal-mobile-nav-open .sidebar-menu .logo-env { border-color: #edf0f3; }
html.portal-theme-light body.portal-mobile-nav-open .sidebar-menu .main-menu.mobile-is-visible { background: #fff; }
.sidebar-menu .logo-env {
position: relative;
display: flex;
flex: 0 0 56px;
align-items: center;
justify-content: center;
height: 56px;
padding: 10px 52px;
}
.sidebar-menu .logo-env .logo { float: none; min-width: 0; }
.sidebar-menu .logo-env .logo-expanded { display: block; max-width: 190px; }
.sidebar-menu .logo-env .logo-expanded img { display: block; max-width: 150px; max-height: 30px; }
.sidebar-menu .logo-env .portal-brand-text { max-width: 190px; font-size: 17px; line-height: 30px; text-align: center; }
.page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle {
position: absolute;
top: 17px;
left: 16px;
padding: 0;
}
.page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle a { margin: 0; }
.page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle a i { top: 0; font-size: 21px; }
.sidebar-menu .main-menu { flex: 0 1 auto; max-height: calc(100vh - 56px); padding-bottom: 8px; }
.page-container .main-content { top: 56px; padding: 0; }
.portal-channels, .user-info-navbar { display: none; }
.portal-zone-intro { margin-top: 24px; padding: 0 7px; }
.portal-news-boards { padding: 0 7px; }
.portal-news-grid { grid-template-columns: 1fr; gap: 10px; }
.portal-news-board { height: 244px; }
.portal-site-detail-container { margin-top: 34px; padding-right: 7px; padding-left: 7px; }
.portal-site-detail { grid-template-columns: 1fr; row-gap: 22px; }
.portal-site-art { width: 190px; height: 190px; }
.portal-site-summary h1 { font-size: 26px; }
.portal-site-description { font-size: 15px; line-height: 28px; }
.portal-site-alternatives { gap: 0 12px; margin-top: 10px; }
.portal-site-content { grid-column: auto; margin-top: 48px; }
.portal-site-related { margin-top: 38px; }
.portal-site-related-grid { grid-template-columns: 1fr; gap: 10px; }
.portal-theme-toggle { right: auto; bottom: auto; width: 40px; height: 40px; }
#search, .portal-anime-zone-page #search { box-sizing: border-box; width: 100%; margin: 24px auto 24px; padding: 0 15px; }
.portal-search-groups { justify-content: flex-start; gap: 0; overflow-x: auto; padding: 0 2px; scrollbar-width: none; }
.portal-search-groups::-webkit-scrollbar, .portal-search-provider-list::-webkit-scrollbar { display: none; }
.portal-search-provider-list { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
.sites-list { max-width: none; padding-right: 0; padding-left: 0; }
.sites-list .site-section-header { margin: 30px 10px 20px; }
.sites-list .site-section-header h4.text-gray { font-size: 16px; line-height: 21px; }
.sites-list .site-section-header h4.text-gray > .fa { width: 18px; margin-right: 6px; font-size: 15px; }
.sites-list .site-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sites-list .site-grid .xe-card { height: 94px; padding: 0 8px; }
.sites-list .site-grid .xe-widget.xe-conversations { right: 8px; left: 8px; height: 70px; padding: 0; }
.sites-list .site-grid .xe-card-link { padding: 15px 32px 15px 15px; }
.sites-list .site-grid .xe-card-go { top: 23px; right: 4px; width: 24px; height: 24px; font-size: 16px; line-height: 24px; opacity: .45; }
}