/*
 * animeunity-bridge.css — shared additions on top of animeunity's own sheets
 * (css/app.css with Bootstrap 4.4.1 inside, css/animeunity-components.css,
 * Font Awesome 5.9.0 — all vendored, never edited). Owned by the foundation
 * (docs/ANIMEUNITY-FOUNDATION.md §3); area agents report the changes they
 * need instead of editing it. Tokens only (both themes): --color-background,
 * --color-background-0/1/2, --color-text, --color-text-0, --color-divider …;
 * hard-coded accents #3db4f2 (hover/active) and #007bff (buttons).
 *
 *   1. Icons: FA 5.9 (animeunity) + FA 6 (engine) on one page
 *   2. Bootstrap 4.6 JS on Bootstrap 4.4.1 CSS; utilities (au-modal-dialog,
 *      au-inline-alert, au-dropdown, au-plain …)
 *   3. Header: guest (Login), "Altro", live search, phone menu
 *   4. Header: member (bell + user menu)
 *   5. Sign-in modal (#sign)
 *   6. Toasts (window.showToast + engine toasts), loaders
 *   7. Shared components (box, sidebar row, poster extras, bar, add-to-list,
 *      folder menu, empty state, ads)
 *   8. Footer extras
 *   9. Small shared helpers kept from the previous skin (au-lbl, au-err …)
 */

/* ── 1. Icons ─────────────────────────────────────────────────────────────
   The layout loads FA6 (the engine prints `fa-solid` / `fa-regular` /
   `fa-brands` and v6-only names) BEFORE FA5: `.fa .fas .far .fab` are FA5's
   (animeunity's glyphs; FA5's "Font Awesome 5 Free" @font-face, declared
   last, wins over FA6's v5 shim), `.fa-solid .fa-regular .fa-brands` stay
   FA6's. A v6-only name written with `fas` (the engine's `fas
   fa-triangle-exclamation`, `fas fa-circle-check`) takes its code point from
   FA6's CSS — the same code points exist in FA5's font. Nothing in app.css
   styles icons globally (it only sizes `.navbar .fa-search/.fa-bell`,
   `#footer .fab`, `.multiselect` icons). */
.fa-solid, .fa-regular, .fa-brands { font-style: normal; }

/* ── 2. Bootstrap 4.6 JS on Bootstrap 4.4.1 CSS + utilities ───────────────
   Same major: modal, tooltip, collapse, tab and carousel states agree
   (`.show`, `.active`, `.carousel-item-next` …). main.js replaces the
   dropdown plugin: `.show` on the PARENT and an inline display on the menu,
   never `.show` on `.dropdown-menu` — style open menus from the parent. */
.dropdown.show > .dropdown-menu, .favourite.show > .dropdown-menu { display: block; }
/* main.js appends a `.dropdown-backdrop` on touch devices outside .navbar-nav. */
.dropdown-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 990; }

/* au-modal-dialog: app.css sizes `.modal-content` (75%, max 850px, margin
   60px auto) as if it sat directly in `.modal`; Bootstrap's 500px
   `.modal-dialog` would squeeze it. Put this class on `.modal-dialog`. */
.modal-dialog.au-modal-dialog { max-width: none; width: auto; margin: 0; pointer-events: none; }
.modal-dialog.au-modal-dialog > .modal-content { pointer-events: auto; }
/* One dim layer: app.css's `.modal` is itself the overlay (rgba(0,0,0,.4),
   fading with the modal); Bootstrap's `.modal-backdrop` (black .5) on top of
   it made every modal 70% dark. The backdrop element stays (BS JS manages
   it), it just draws nothing. */
.modal-backdrop.show { opacity: 0; }

/* au-inline-alert: app.css makes EVERY `.alert` a fixed pop-up (top 115px,
   centred, min-width 400px). In-form alerts (main.js AjaxForm prepends one
   into the form; member import / AniList status; area forms) stay in place
   inside an `.au-inline-alert` ancestor. */
.au-inline-alert .alert { position: static; transform: none; left: auto; top: auto; min-width: 0; z-index: auto; margin: 0 0 14px; text-align: left; font-size: 14px; }
.au-inline-alert .alert .close { padding: 10px 14px; }

/* au-dropdown: animeunity's only dropdown look is the header's
   (`#nav-top .dropdown-menu`); outside #nav-top Bootstrap's menus are
   white. In-page menus (folder menus, post menus) copy those values. */
.au-dropdown .dropdown-menu, .dropdown-menu.au-dropdown { background: var(--color-background-1); border: 1px solid var(--color-divider); border-radius: 3.5px; padding: 7px 0; min-width: 140px; font-size: 14px; }
.au-dropdown .dropdown-item, .dropdown-menu.au-dropdown .dropdown-item { color: var(--color-text); padding: 6px 27px; font-weight: 600; background: none; }
.au-dropdown .dropdown-item:hover, .au-dropdown .dropdown-item:focus,
.dropdown-menu.au-dropdown .dropdown-item:hover, .dropdown-menu.au-dropdown .dropdown-item:focus { background: inherit; color: var(--color-text-0); }
.au-dropdown .dropdown-item.active, .dropdown-menu.au-dropdown .dropdown-item.active { background: none; color: #3db4f2; }
.au-dropdown .dropdown-item i, .dropdown-menu.au-dropdown .dropdown-item i { width: 10px; margin-right: 12px; color: var(--color-text); }
.au-dropdown .dropdown-divider, .dropdown-menu.au-dropdown .dropdown-divider { border-color: var(--color-divider); }

/* Engine-built controls on purpose: Bootstrap's light pieces the engine's
   templates print (`badge-light`, `btn-light`, `text-muted`, `.close`) read
   on both themes. */
.text-muted { color: var(--color-text) !important; opacity: .8; }
.btn-light { background: var(--color-background); border-color: var(--color-background); color: var(--color-text-0); }
.btn-light:hover { background: var(--color-background-1); color: var(--color-text-0); }
.close { color: var(--color-text-0); text-shadow: none; }
.close:hover { color: var(--color-text-0); }
hr { border-top-color: var(--color-divider); }

/* ── 3. Header ─────────────────────────────────────────────────────────── */
/* The live search overlay's host sits in #nav-top but takes no room. */
#nav-top .au-search-host { position: absolute; top: 0; left: 0; width: 0; height: 0; }
#nav-top .search-backdrop[hidden] { display: none !important; }
#nav-top .results[hidden] { display: none !important; }
.search-backdrop .livesearch-title { color: var(--color-text-list-1); }
.search-backdrop .results #guardatutto { color: #fff; background-color: var(--color-background-0); opacity: .8; border-color: var(--color-background-0); border-radius: 0 0 4px 4px; cursor: pointer; }
.search-backdrop .results #guardatutto:hover { background: #3db4f2; opacity: 1; }
.search-backdrop .result .livesearch-image img { object-fit: cover; }

/* "Altro" (CMS-only destinations): animeunity's dormant hover menu
   (`#nav-top .dropdown:hover .dropdown-menu`, bg-1, items i + span) under
   the nav item, with no gap so the pointer can travel into it. */
#nav-top .au-more { position: relative; }
#nav-top .au-more .dropdown-menu { top: 100%; margin-top: 0; left: 0; }
#nav-top .au-more:focus-within .dropdown-menu { display: block; }
#nav-top .au-more .dropdown-item.au-active, #nav-top .au-more .dropdown-item.au-active i, #nav-top .au-more .dropdown-item.au-active span { color: #3db4f2 !important; }

/* #user (main.js UserPanel's slot) after the collapse: visible at every
   width for members (bell + user menu), the guest "Login" item only ≥768
   (as animeunity's). Below 768 a guest's #user takes no room, so the bar
   is logo + search icon exactly as animeunity's. */
#nav-top #user { flex-direction: row; align-items: center; margin: 0; padding: 0; list-style: none; }
@media (max-width: 767.98px) {
    #nav-top #user:not(:has(.top-profile)) { display: none; }
    #nav-top .nav-top-mobile:has(~ #user .top-profile) { margin-left: auto; margin-right: 8px !important; }
}

/* ── 4. Header: member (partials/user-panel) ───────────────────────────── */
#nav-top .au-member { display: flex; align-items: center; list-style: none; height: 100%; }
#nav-top .au-member > .nav-item { position: relative; height: auto; }
/* The bell: icon only (app.css `.navbar .fa-bell` 20px), opens on CLICK —
   app.css opens every `#nav-top .dropdown` on hover, so the bell's menu is
   forced shut unless main.js has written its inline display. */
#nav-top .au-bell .au-bell-btn { position: relative; color: #fff; margin-right: 14px; padding: 8px 6px; line-height: 1; }
#nav-top .au-bell .au-bell-btn:hover, #nav-top .au-bell.show .au-bell-btn { color: #3db4f2; }
#nav-top .au-bell .au-bell-count { position: absolute; top: 2px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #dc3545; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
#nav-top .au-bell .au-bell-count[hidden] { display: none; }
#nav-top .au-bell.dropdown .dropdown-menu.user-notification { display: none; }
#nav-top .au-bell .dropdown-menu.user-notification { top: calc(100% + 18px); right: 0; left: auto; width: 360px; padding: 0; border: 0; border-radius: 6px; box-shadow: 0 1px 20px rgba(0, 0, 0, .3); overflow: hidden; font-size: 13px; }
@media (max-width: 767.98px) {
    #nav-top .au-bell .dropdown-menu.user-notification { position: fixed; top: 80px; left: 8px; right: 8px; width: auto; }
}
.au-bell-head { padding: 12px 16px 0; border-bottom: 1px solid var(--color-divider); }
.noti-bell-tabs { display: flex; gap: 20px; }
.noti-bell-tabs > span { padding: 0 2px 9px; color: var(--color-text); font-size: 15px; cursor: pointer; border-bottom: 1px solid transparent; margin-bottom: -1px; }
.noti-bell-tabs > span.active { color: var(--color-text-0); border-bottom-color: var(--color-text-0); }
.noti-bell-tabs .badge { background: #3db4f2; color: #fff; font-size: 10px; vertical-align: 1px; }
.noti-bell-tabs .badge.au-zero { display: none; }
.noti-bell-actions { padding: 8px 16px 0; text-align: right; font-size: 12px; }
.noti-bell-actions a { color: #3db4f2; }
.noti-bell-actions a:hover { color: var(--color-text-0); text-decoration: none; }
.noti-bell-pane { display: none; max-height: 340px; overflow-y: auto; padding: 6px 0; }
.noti-bell-pane.active { display: block; }
.noti-bell-pane::-webkit-scrollbar { width: 5px; }
.noti-bell-pane::-webkit-scrollbar-thumb { background: #555; border-radius: 10px; }
.noti-bell-pane::-webkit-scrollbar-track { background: inherit; }
.au-bell-menu .nnl-item { display: grid; grid-template-columns: 40px auto; gap: 12px; padding: 10px 16px; color: var(--color-text); text-decoration: none; opacity: .5; border-left: 3px solid transparent; }
.au-bell-menu .nnl-item.new { opacity: 1; border-left-color: #3db4f2; }
.au-bell-menu a.nnl-item:hover { background: var(--color-background); color: var(--color-text); text-decoration: none; }
.au-bell-menu .nnl-item .film-poster img { width: 40px; height: 56px; object-fit: cover; border-radius: 3px; }
.au-bell-menu .nnl-item .user-avatar img, .au-bell-menu .nnl-item .user-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.au-bell-menu .system-noti-icon { display: flex; align-items: center; justify-content: center; background: var(--color-background-0); color: #3db4f2; }
.au-bell-menu .nnl-item strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--color-text-0); font-size: 13px; font-weight: 700; line-height: 1.3; }
.au-bell-menu .nnl-item p { margin: 2px 0; font-size: 12px; font-weight: 400; line-height: 1.35; }
.au-bell-menu .nnl-item .time { font-size: 11px; font-weight: 400; }
.au-bell-menu .no-result { display: block; padding: 30px 16px; text-align: center; font-size: 16px; opacity: 1; border: 0; grid-template-columns: none; }
.au-bell-menu .nnl-more { display: block; padding: 8px; text-align: center; color: #fff; background: var(--color-background-0); opacity: .8; }
.au-bell-menu .nnl-more:hover { opacity: 1; background: #3db4f2; color: #fff; text-decoration: none; }

/* The user menu: animeunity's dormant hover menu (app.css
   `#nav-top .dropdown:hover .dropdown-menu`), avatar `.profile-img` 25px. */
#nav-top .au-usermenu-btn { display: flex; align-items: center; gap: 8px; margin-right: 0; padding: 8px 0; color: #fff; }
#nav-top .au-usermenu-btn:hover { color: #3db4f2; text-decoration: none; }
#nav-top .au-usermenu-btn .profile-img { vertical-align: middle; flex: 0 0 25px; }
#nav-top .au-usermenu-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; color: inherit !important; }
#nav-top .au-usermenu .dropdown-menu { top: 100%; margin-top: 0; right: 0; left: auto; }
#nav-top .au-usermenu .au-logout { width: 100%; border: 0; text-align: left; cursor: pointer; }
#user-panel-logout-form { margin: 0; }
/* 768–991 the nav items shrink (12px spans) and a 120px name pushed #user ~1px past the container. */
@media (min-width: 768px) and (max-width: 991.98px) { #nav-top .au-usermenu-name { max-width: 88px; } }
@media (max-width: 767.98px) {
    #nav-top .au-usermenu-name { display: none; }
    /* The container has no side padding on phones; keep the avatar off the screen edge. */
    #nav-top #user.au-user { margin-right: 10px; }
    #nav-top .au-bell .au-bell-btn { margin-right: 10px; }
}

/* Phone menu (partials/animeunity/nav-mobile, NavMobile scoped CSS): the
   CMS-only destinations add two rows (3 → 5) to animeunity's 3×3 grid. */
.au-nav-mobile .menu { grid-template-rows: repeat(5, 1fr); height: 350px; }
.au-nav-mobile .menu[hidden], .au-nav-mobile .hamburger[hidden] { display: none !important; }
.au-nav-mobile .menu a { display: block; }
.au-nav-mobile .menu .au-v-nav-search { justify-content: center; }
.au-nav-mobile .menu .search-box button { margin: 0 auto; }

/* ── 5. Sign-in modal (#sign, partials/animeunity/sign-in-modal) ───────────
   animeunity's /login, /register, /password/reset `div.wrapper` (app.css
   `#login .wrapper`: bg-1, 50px padding, radius 6) as the modal's body,
   540px like its col-lg-6 column. Inside a modal app.css would give the
   text Open Sans 24px and every input its dark modal look; the auth forms
   keep the page look (stock Bootstrap inputs, Overpass 14px). */
.au-sign-modal { font-family: Overpass, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-size: 14px; }
.au-sign-modal .modal-content.au-sign-content { position: relative; max-width: 540px; background: var(--color-background-1); border: 0; }
@media (max-width: 575.98px) { .au-sign-modal .modal-content.au-sign-content { width: 92%; } }
.au-sign-wrapper { background: var(--color-background-1); padding: 50px; border-radius: 6px; margin: 0; }
@media (max-width: 500px) { .au-sign-wrapper { padding: 50px 25px; } }
.au-sign-wrapper .title { font-size: 25px; color: var(--color-text-0); }
.au-sign-wrapper a { color: #007bff; }
.au-sign-wrapper a:hover { color: #0056b3; }
.au-sign-close { position: absolute; top: 12px; right: 18px; z-index: 2; font-size: 28px; opacity: .8; }
.au-sign-close:hover { opacity: 1; }
.au-sign-content input.form-control,
.au-sign-content input.form-control:focus { height: calc(1.5em + .75rem + 2px); padding: .375rem .75rem; font-size: 14px; font-weight: 400; color: #495057; background-color: #fff; border: 1px solid #ced4da !important; border-radius: 3.5px; }
.au-sign-content input.form-control:focus { border-color: #80bdff !important; box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25); }
.au-sign-content input[type=checkbox] { height: auto; width: auto; padding: 0; }
.au-sign-content .form-check-label { color: var(--color-text-0); font-size: 14px; }
.au-sign-content .au-captcha:has(.captcha:empty) { display: none; }
.au-sign-content .au-social { margin-bottom: 7px; color: #fff; background: var(--au-brand, #007bff); border: 0; }
.au-sign-content .au-social:hover { color: #fff; opacity: .9; }
.au-sign-content .loading { margin: 0 auto 10px; }

/* ── 6. Toasts, loaders ───────────────────────────────────────────────────
   window.showToast (app.js) renders animeunity's VueAlert into
   `#alert .col-md-12`: `div.alert.alert-success|danger.alert-dismissible`
   — app.css fixes every .alert at top 115px, centred; colours stay
   Bootstrap's light ones, as on animeunity. The engine's own toast
   containers (main.js `#toast`, comments.js `#toast-container`, the
   member/community `.ak-toast` fallback) land on the same spot. */
#alert .alert { max-width: calc(100vw - 20px); }
@media (max-width: 500px) { #alert .alert, #toast .alert, #toast-container .alert { min-width: calc(100vw - 30px); } }
#toast .alert i, #toast-container .alert i { margin-right: 4px; }
#toast .alert .mx-2 { margin: 0 6px !important; }
.ak-toast { position: fixed; z-index: 1051; top: 115px; left: 50%; transform: translate(-50%, -50%); min-width: 400px; padding: 10px 17.5px; border-radius: 3.5px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.ak-toast.is-on { opacity: 1; pointer-events: auto; }
.ak-toast-success { background: #d4edda; color: #155724; }
.ak-toast-error { background: #f8d7da; color: #721c24; }
/* Engine-written busy markers (`<div class="loading"></div>`). */
div.loading:empty { min-height: 24px; position: relative; }
div.loading:empty::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 3px solid var(--color-divider); border-top-color: #3db4f2; border-radius: 50%; animation: au-spin .7s linear infinite; }
@keyframes au-spin { to { transform: rotate(360deg); } }

/* ── 7. Shared components ─────────────────────────────────────────────── */
/* Pager (partials/animeunity/pagination): animeunity's 11 bubbles × 32px
   (‹‹ ‹ 8 numbers ›) overflow a ≤390px phone, as on animeunity; they shrink
   to fit the column there instead. */
@media (max-width: 420px) {
    .pre-pagination .pagination .page-item, .pre-pagination .pagination .page-link { width: min(32px, calc((100vw - 34px) / 11)); }
    .pre-pagination .pagination .page-link { padding-left: 0; padding-right: 0; text-align: center; }
}
/* Section box (partials/animeunity/section-box): app.css's `#home
   .home-wrapper-*` values for every page. */
.au-box-header { width: 100%; background: var(--color-background-1); padding: 20px 24px; border-bottom: 1px solid var(--color-divider); border-radius: 3px 3px 0 0; line-height: 1; }
.au-box-header .title { font-size: 18px; font-weight: 700; font-family: P5 hatty, sans-serif; color: var(--color-text-0); }
.au-box-body { padding: 24px; background: var(--color-background-1); border-radius: 0 0 3px 3px; }
@media (max-width: 500px) { .au-box-header { padding: 24px 12px; } .au-box-body { padding: 12px; } .au-box-header > .row { margin-left: -12px; margin-right: -12px; } }
.au-box-actions { float: right; font-size: 12px; font-weight: 600; line-height: 18px; font-family: Overpass, sans-serif; }
.au-box-actions > a, .au-box-actions > button { margin-left: 12px; color: #3db4f2; background: none; border: 0; padding: 0; }
.au-box-actions > a:hover, .au-box-actions > button:hover { color: var(--color-text-0); text-decoration: none; }

/* Sidebar row (partials/animeunity/sidebar-row): app.css's `#home
   .latest-anime-*` values for every page. */
.au-sidebar-row { line-height: 1.2; margin-bottom: 15px; max-height: 86px; }
.au-sidebar-row .latest-anime-title { color: inherit !important; font-size: 12px !important; }
.au-sidebar-row .latest-anime-info { font-size: 10px !important; color: var(--color-text); }
.au-sidebar-row img { object-fit: cover; border-radius: 0; }

/* Poster card extras (continue watching): progress rule + round remove. */
.au-cw-item { position: relative; }
.au-cw-item .au-cw-rule { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 3; background: rgba(0, 0, 0, .5); border-radius: 3px 3px 0 0; overflow: hidden; pointer-events: none; }
.au-cw-item .au-cw-rule > span { display: block; height: 100%; background: #3db4f2; }
.au-cw-item .au-cw-remove { position: absolute; top: 6px; right: 6px; z-index: 101; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--color-background-1); color: var(--color-text); font-size: 11px; line-height: 22px; text-align: center; cursor: pointer; opacity: .85; }
.au-cw-item .au-cw-remove:hover { opacity: 1; color: #3db4f2; transform: scale(1.1); }
.au-cw-grid { grid-template-rows: auto; }

/* Gradient bar (partials/animeunity/bar, partials/site-alert). */
.au-bar[hidden] { display: none !important; }
.au-bar .bar-info b strong { font-weight: inherit; }
.au-bar .bar-info i { margin-right: 4px; }

/* Add-to-list (partials/animeunity/add-to-list) and the folder menu main.js fills. */
.au-add-list { position: relative; }
.au-add-list > .list.btn { padding: 7px 10px; line-height: 1; }
.au-add-list.au-add-list--round > .list-button { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-background-1); color: var(--color-text); font-size: 11px; text-decoration: none; }
.au-add-list.au-add-list--round > .list-button:hover { transform: scale(1.1); color: #3db4f2; }
.dropdown-menu.folders { background: var(--color-background-1); border: 1px solid var(--color-divider); border-radius: 3.5px; padding: 7px 0; min-width: 170px; font-size: 13px; }
.dropdown-menu.folders .dropdown-item { color: var(--color-text); padding: 6px 20px; font-weight: 600; background: none; }
.dropdown-menu.folders .dropdown-item:hover, .dropdown-menu.folders .dropdown-item:focus { color: var(--color-text-0); background: var(--color-background); }
.dropdown-menu.folders .dropdown-item.active { color: #3db4f2; background: none; }

/* Empty state (GUIDE §13): a centred 16px line, animeunity's `#nofound`. */
.au-empty { padding: 15px 0 0; text-align: center; font-size: 16px; color: var(--color-text-0); width: 100%; list-style: none; }

/* Ad slots (<x-frontend.ad>, Admin › Ads). */
.ak-ad.ak-ad--footer { margin: 0 auto 20px; text-align: center; }
#content > .ak-ad { max-width: 1140px; margin: 20px auto 0; padding: 0 15px; text-align: center; }

/* Poster tooltip (partials/anime-tooltip; only on markup that carries
   [data-tip] — animeunity's cards don't). */
.tooltipster-sidetip.tooltipster-base .tooltipster-box { background: var(--color-background-1); border: 0; border-radius: 6px; box-shadow: 0 1px 20px rgba(0, 0, 0, .3); }
.tooltipster-sidetip .tooltipster-content { padding: 15px; color: var(--color-text); font-size: 12px; line-height: 18px; }
.tooltipster-sidetip .tooltipster-arrow { display: none; }

/* ── 8. Footer extras (partials/animeunity/footer) ─────────────────────── */
#footer .au-footer-contact, #footer .col-md-4 .text-center a { color: inherit; }
#footer .au-footer-contact:hover { color: #3db4f2; text-decoration: none; }
#footer .au-friends { margin-top: 4px; font-size: 12px; }
/* The EN/JP title switch mirrors the theme swatches, at the right. */
#footer .au-title-lang { position: absolute; right: 15px; top: 20px; }
#footer .au-title-lang .theme-label { color: #3db4f2; display: inline-block; position: relative; top: -5px; margin-right: 10px; }
#footer .au-title-lang-sw { display: inline-block; }
#footer .au-title-lang .theme-preview { border: 2px solid #46546b; height: 25px; width: 30px; padding: 3px 0 0; font-size: 12px; text-align: center; background: #272c38; color: #9fadbd; }
#footer .au-title-lang .theme-preview.active { border-color: #3db4f2; color: #fff; }
@media (max-width: 991.98px) { #footer .au-title-lang .theme-label { display: none; } }
/* The CMS page links (and friends) after animeunity's copyright sentence:
   inline after it at ≥1200 like animeunity's "- StreamingCommunity", on their
   own centred line below it under 1200 (the swatches sit above that line).
   Overpass's "·" has a wide left bearing, hence 3px / 7px around it. */
#footer .au-sep { margin: 0 7px 0 3px; }
#footer .au-copy-links a, #footer .au-friends a { white-space: nowrap; }
/* The global hr rule (§2) would draw a line animeunity's footer doesn't show. */
#footer hr { border-top-color: rgba(0, 0, 0, .1); }
#footer .au-copy-links > .au-sep:first-child { margin: 0 4px 0 0; }
@media (max-width: 1199.98px) {
    #footer .au-copy-links { display: block; margin-top: 4px; }
    #footer .au-copy-links > .au-sep:first-child { display: none; }
}
/* ≤500 animeunity drops the swatches 75px down (absolute) over an 80px
   margin under the sentence; with the CMS lines that collides, so the row
   flows instead: the sentence (kept two lines tall, so the swatches land where
   animeunity's do), swatches left + EN/JP right, then the links. */
@media (max-width: 500px) {
    #footer .copyright { display: flex; flex-wrap: wrap; align-items: flex-start; margin-bottom: 21px !important; }
    #footer .au-copy-text { flex: 0 0 100%; min-height: 42px; }
    #footer .copyright .theme-settings { order: 1; position: static; margin-top: 4px; }
    #footer .au-title-lang { order: 1; position: static; margin: 5px 0 0 auto; }
    #footer .au-copy-links, #footer .au-friends { order: 2; flex: 0 0 100%; margin-top: 10px; }
    #footer .au-copy-links + .au-friends { margin-top: 4px; }
}
/* #footer is absolute (app.css) under #content's margin-bottom; the CMS
   lines make it one line (~25px) taller under 1200 and the friends line
   ~22px taller anywhere, so the margin grows by that much at every app.css
   breakpoint — the gap above the footer stays animeunity's. */
#app:has(> #footer) { --au-footer-extra: 0px; }
#app:has(> #footer .au-friends) { --au-footer-extra: 22px; }
#app:has(> #footer) > #content { margin-bottom: calc(200px + var(--au-footer-extra)); }
@media (max-width: 1199.98px) {
    #app:has(> #footer) { --au-footer-extra: 25px; }
    #app:has(> #footer .au-friends) { --au-footer-extra: 47px; }
}
@media (max-width: 991px) { #app:has(> #footer) > #content { margin-bottom: calc(250px + var(--au-footer-extra)); } }
@media (max-width: 768px) { #app:has(> #footer) > #content { margin-bottom: calc(320px + var(--au-footer-extra)); } }
@media (max-width: 500px) { #app:has(> #footer) > #content { margin-bottom: calc(380px + var(--au-footer-extra)); } }
@media (max-width: 460px) { #app:has(> #footer) > #content { margin-bottom: calc(400px + var(--au-footer-extra)); } }
@media (max-width: 390px) { #app:has(> #footer) > #content { margin-bottom: calc(420px + var(--au-footer-extra)); } }
@media (max-width: 327px) { #app:has(> #footer) > #content { margin-bottom: calc(460px + var(--au-footer-extra)); } }
/* animeunity's anime / episode pages render the footer bold (its unclosed <b>). */
.au-anime-page #footer { font-weight: 900; }

/* ── 9. Small shared helpers (kept for the areas; animeunity palette) ──── */
.au-lbl { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 700; color: var(--color-text-0); }
.au-err { display: block; margin-top: -5px; margin-bottom: 10px; font-size: 12px; color: #dc3545; }
.au-av { display: inline-block; width: 24px; height: 24px; border-radius: 50%; margin: -2px 8px 0 0; vertical-align: middle; object-fit: cover; }
.au-meta { font-size: 11px; line-height: 20px; color: var(--color-text); margin-bottom: 10px; }
.au-meta a { color: #3db4f2; font-weight: 700; }
.au-acts { margin-top: 10px; }
.au-acts .btn { margin: 0 5px 5px 0; }
/* A "·" separator: Overpass draws it with a wide left bearing, hence less room on its left. */
.au-dot { margin: 0 7px 0 3px; }
.au-plain button, button.au-plain { padding: 0; margin: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; }
/* The phone hamburger carries a red dot while the bell has unread items (app.js memberHeader). */
.au-nav-mobile .hamburger.au-has-unread::after { content: ''; position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #dc3545; }
/* app.css sizes every `.navbar .fa-bell` 20px (the header bell); the user menu's own bell icon stays item-sized. */
#nav-top .au-usermenu .dropdown-menu .fa-bell { font-size: inherit !important; padding-top: 0 !important; }
.au-sidebar-top .au-box-body { overflow: hidden; }
.au-qtip { position: relative; min-width: 260px; }
.au-qtip-title { padding-right: 34px; margin-bottom: 8px; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--color-text-0); }
.au-qtip-badges { margin-bottom: 8px; font-size: 11px; }
.au-qtip-type { display: inline-block; padding: 0 6px; border-radius: 3px; line-height: 16px; text-transform: uppercase; color: #fff; background: #3480ea; }
.au-qtip-type--movie { background: #c4213f; } .au-qtip-type--ova { background: #9256f3; } .au-qtip-type--ona { background: #c063ff; } .au-qtip-type--special { background: #f2870d; }
.au-qtip-score { margin-left: 8px; color: var(--color-text-0); font-weight: 700; }
.au-qtip-desc { margin-bottom: 10px; max-height: 108px; overflow: hidden; color: var(--color-text-plot); font-size: 11px; }
.au-qtip-info { display: flex; flex-wrap: wrap; gap: 0 18px; margin-bottom: 10px; line-height: 1.4; }
.au-qtip-info .info-item { margin-bottom: 8px; }
.au-qtip-info strong { color: var(--color-text-0); font-weight: 900; font-size: 12px; }
.au-qtip-info small { color: var(--color-text); }
.au-qtip-info a { color: #3db4f2; }
.au-qtip-fav { position: absolute; top: 0; right: 0; }
.au-qtip-fav > .list-button { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-background); color: var(--color-text); font-size: 11px; }
.au-qtip-fav > .list-button:hover { color: #3db4f2; }
.au-qtip > .loading { margin: 10px 0; }