/* ==========================================================================
   AnimeSaturn — base.css (SHELL)
   Tokens, global element styles, the shared .as-* class API, Bootstrap-JS
   mechanics the theme still relies on (modal / dropdown / tooltip / alert),
   and the site shell: header, search, nav, drawer, user area, bell, auth
   modal, announcement bar, footer.
   Load order: base.css -> compat.css -> components.css -> page CSS -> $themeVars
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Admin colour overrides ($themeVars) redefine these three after us. */
    --ak-accent: #863dba;
    --ak-bg: #0d0c15;
    --ak-bg-2: #16151f;

    --as-brand: var(--ak-accent);
    --as-brand-hover: color-mix(in srgb, var(--as-brand) 82%, #fff);
    --as-brand-soft: color-mix(in srgb, var(--as-brand) 18%, transparent);
    --as-brand-ring: color-mix(in srgb, var(--as-brand) 35%, transparent);
    --as-on-brand: #fff;
    --as-grad: linear-gradient(135deg, #5d79ee 0%, var(--as-brand) 100%);
    --as-grad-hover: linear-gradient(135deg, #6d89fe 0%, #964dca 100%);

    --as-bg: #fff;
    --as-soft: #f6f4fb;
    --as-elev: #fff;
    --as-hover: #f1ecf8;
    --as-border: #e5e4e7;
    --as-border-strong: #ceccd3;
    --as-ink: oklch(18% .02 300);
    --as-ink-mute: oklch(42% .02 300);
    --as-ink-dim: oklch(55% .02 300);
    --as-overlay: rgba(13, 12, 21, .55);
    --as-shadow-pop: 0 18px 48px -12px rgba(40, 20, 70, .28);

    --as-dub: #16a34a;
    --as-star: #f59e0b;
    --as-danger: #e5484d;
    --as-success: #16a34a;
    --as-warning: #f59e0b;
    --as-info: #3b82f6;

    /* Corner radius scale (tightened 2026-10-19). Previous, rounder values
       — to reset, put these back: sm .375rem, md .625rem, lg .875rem,
       xl 1.25rem, 2xl 1.75rem. Pills (999px) and circles (50%) are separate. */
    --as-r-sm: .25rem;   /* 4px  — badges, small chips */
    --as-r-md: .4375rem; /* 7px  — buttons, inputs, tiles */
    --as-r-lg: .625rem;  /* 10px — cards, inner panels */
    --as-r-xl: .875rem;  /* 14px — large panels */
    --as-r-2xl: 1.125rem; /* 18px — hero banner */

    --as-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --as-font-display: "Manrope", "Inter", system-ui, sans-serif;
    --as-container: 1440px;
    --as-gutter: 1rem;
    --as-header-h: 4rem;
    --as-ease: cubic-bezier(.16, 1, .3, 1);

    /* Legacy names some untouched CSS still reads. */
    --primary: var(--as-brand);

    color-scheme: light;
}

html.dark {
    --as-bg: var(--ak-bg);
    --as-soft: var(--ak-bg-2);
    --as-elev: #1d1b26;
    --as-hover: #262432;
    --as-border: #2d2c37;
    --as-border-strong: #474655;
    --as-ink: oklch(96% .005 290);
    --as-ink-mute: oklch(75% .01 290);
    --as-ink-dim: oklch(58% .01 290);
    --as-brand-soft: color-mix(in srgb, #b072e0 22%, transparent);
    --as-overlay: rgba(4, 3, 8, .72);
    --as-shadow-pop: 0 24px 60px -16px rgba(0, 0, 0, .7);

    color-scheme: dark;
}

@media (min-width: 768px) {
    :root { --as-gutter: 1.5rem; }
}

/* --------------------------------------------------------------------------
   2. Base / reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    background-color: var(--as-bg);
    scrollbar-color: var(--as-border-strong) transparent;
    scroll-padding-top: calc(var(--as-header-h) + 1rem);
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--as-font);
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--as-ink);
    background-color: var(--as-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    text-align: left;
}

#wrapper { min-height: 100vh; display: flex; flex-direction: column; }
#wrapper > #body { flex: 1 0 auto; }

article, aside, figcaption, figure, footer, header, main, nav, section { display: block; }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5em;
    font-family: var(--as-font-display);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--as-ink);
}
h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }
h5, h6 { font-size: .9375rem; }

p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; }
img, svg, video, canvas { vertical-align: middle; }
img { max-width: 100%; height: auto; border-style: none; }
hr { border: 0; border-top: 1px solid var(--as-border); margin: 1rem 0; }
small { font-size: .8125rem; }
b, strong { font-weight: 700; }
code, kbd, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875em; }

a {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
    transition: color .15s, background-color .15s, border-color .15s;
}
a:hover { color: var(--as-brand-hover); }
html:not(.dark) a:hover { color: var(--as-brand); }

::selection { background: var(--as-brand-soft); color: var(--as-ink); }

button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }

/* Focus ring */
:focus { outline: none; }
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--as-brand-ring);
    border-radius: var(--as-r-sm);
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--as-border-strong);
    border-radius: 999px;
    border: 2px solid var(--as-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--as-ink-dim); }

/* Forms — zero-specificity so any component class overrides them. */
:where(input[type=text], input[type=email], input[type=password], input[type=search],
       input[type=number], input[type=url], input[type=tel], input[type=date],
       input[type=datetime-local], input[type=time], input:not([type]), select, textarea),
.form-control {
    display: block;
    width: 100%;
    min-height: 2.5rem;
    padding: .5rem .875rem;
    font: inherit;
    font-size: .875rem;
    line-height: 1.4;
    color: var(--as-ink);
    background-color: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-md);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
    appearance: none;
}
:where(textarea), textarea.form-control { min-height: 6rem; resize: vertical; }
:where(select), select.form-control {
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8696' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right .7rem center;
}
:where(input, textarea)::placeholder, .form-control::placeholder { color: var(--as-ink-dim); opacity: 1; }
:where(input[type=text], input[type=email], input[type=password], input[type=search],
       input[type=number], input[type=url], input[type=tel], input[type=date], input:not([type]), select, textarea):focus,
.form-control:focus {
    outline: none;
    border-color: var(--as-brand);
    box-shadow: 0 0 0 3px var(--as-brand-ring);
}
.form-control-lg { min-height: 2.875rem; font-size: .9375rem; }
:where(input[type=checkbox], input[type=radio]) { accent-color: var(--as-brand); width: 1rem; height: 1rem; }
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration { appearance: none; }
label { display: inline-block; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* --------------------------------------------------------------------------
   3. Utilities the shell relies on
   -------------------------------------------------------------------------- */
.sr-only, .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.d-none { display: none !important; }
.as-skip-link {
    position: absolute;
    left: .75rem;
    top: -3rem;
    z-index: 2000;
    padding: .5rem .875rem;
    border-radius: var(--as-r-md);
    background: var(--as-brand);
    color: #fff;
    font-weight: 600;
    transition: top .15s;
}
.as-skip-link:focus { top: .75rem; color: #fff; }

/* --------------------------------------------------------------------------
   4. Shared class API (.as-*)
   -------------------------------------------------------------------------- */
.as-container {
    width: 100%;
    max-width: var(--as-container);
    margin-inline: auto;
    padding-inline: var(--as-gutter);
}
.as-main { padding-top: 1.25rem; padding-bottom: 2.5rem; }
@media (min-width: 768px) { .as-main { padding-top: 1.75rem; } }

.as-section { margin-bottom: 2.5rem; }
.as-section:last-child { margin-bottom: 0; }

.as-sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.as-sec-head > :first-child { min-width: 0; }
.as-sec-title {
    margin: 0;
    font-family: var(--as-font-display);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--as-ink);
}
@media (min-width: 768px) { .as-sec-title { font-size: 1.75rem; } }
.as-sec-sub {
    margin: .25rem 0 0;
    font-size: .875rem;
    line-height: 1.4;
    color: var(--as-ink-mute);
}
.as-sec-more {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--as-brand);
    white-space: nowrap;
}
html.dark .as-sec-more { color: color-mix(in srgb, var(--as-brand) 70%, #fff); }
.as-sec-more:hover { color: var(--as-brand-hover); }
.as-sec-more svg { width: .875rem; height: .875rem; transition: transform .15s; }
.as-sec-more:hover svg { transform: translateX(2px); }

.as-sec-nav { display: inline-flex; align-items: center; gap: .375rem; flex-shrink: 0; }
.as-sec-nav > button,
.as-sec-nav > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: var(--as-ink);
    background: transparent;
    border: 0;
    border-radius: 999px;
    transition: color .15s, background-color .15s, transform .15s;
}
.as-sec-nav > button:hover:not(:disabled),
.as-sec-nav > a:hover { color: var(--as-brand); background: var(--as-hover); }
.as-sec-nav > button:disabled,
.as-sec-nav > .swiper-button-disabled { opacity: .3; cursor: not-allowed; }
.as-sec-nav svg { width: 1.25rem; height: 1.25rem; }

.as-panel {
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-xl);
    padding: 1.25rem;
}
@media (max-width: 575.98px) { .as-panel { padding: 1rem; border-radius: var(--as-r-lg); } }

/* Buttons */
.as-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 2.5rem;
    padding-inline: 1rem;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--as-ink);
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-md);
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: background-color .18s var(--as-ease), border-color .18s, color .18s, transform .18s var(--as-ease);
}
.as-btn:hover { color: var(--as-ink); background: var(--as-hover); border-color: var(--as-border-strong); }
.as-btn:disabled, .as-btn.disabled { opacity: .5; cursor: not-allowed; transform: none; }
.as-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.as-btn--primary { color: var(--as-on-brand); background: var(--as-brand); border-color: var(--as-brand); }
.as-btn--primary:hover { color: var(--as-on-brand); background: var(--as-brand-hover); border-color: var(--as-brand-hover); transform: translateY(-1px); }
.as-btn--ghost { background: transparent; border-color: var(--as-border); }
.as-btn--ghost:hover { background: var(--as-hover); }
.as-btn--sm { height: 2.125rem; padding-inline: .75rem; font-size: .8125rem; border-radius: var(--as-r-sm); }
.as-btn--lg { height: 2.875rem; padding-inline: 1.375rem; font-size: .9375rem; }
.as-btn--block { display: flex; width: 100%; }

.as-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    color: var(--as-ink);
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-md);
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.as-icon-btn:hover {
    color: var(--as-ink);
    background: var(--as-hover);
    border-color: var(--as-border-strong);
    transform: translateY(-1px);
}
.as-icon-btn svg { width: 1.25rem; height: 1.25rem; pointer-events: none; }
.as-icon-btn i { font-size: 1rem; pointer-events: none; }

/* Chips */
.as-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 2rem;
    padding-inline: .875rem;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--as-ink-mute);
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: 999px;
    transition: all .15s;
}
a.as-chip:hover, button.as-chip:hover { color: var(--as-ink); background: var(--as-hover); border-color: var(--as-border-strong); }
.as-chip svg { width: .875rem; height: .875rem; flex-shrink: 0; }
.as-chip .as-star, .as-chip--score svg { color: var(--as-star); }
.as-chip--brand, .as-chip.active, .as-chip.is-active { color: #fff; background: var(--as-brand); border-color: var(--as-brand); }
a.as-chip--brand:hover, a.as-chip.active:hover { color: #fff; background: var(--as-brand-hover); border-color: var(--as-brand-hover); }

/* Poster badges (appearance only — the card component positions them) */
.as-badge {
    display: inline-flex;
    align-items: center;
    gap: .125rem;
    padding: .2rem .45rem;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0, 0, 0, .7);
    border-radius: var(--as-r-sm);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    white-space: nowrap;
}
.as-badge--type { background: var(--as-brand); }
.as-badge--dub { background: var(--as-dub); }
.as-badge--ep { background: var(--as-brand); }
.as-badge--score { background: rgba(0, 0, 0, .7); letter-spacing: 0; }
.as-badge--score svg, .as-badge--score i { width: .7rem; height: .7rem; font-size: .65rem; color: var(--as-star); }

/* Grid of posters */
.as-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem .75rem;
}
@media (min-width: 480px) { .as-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .as-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem 1rem; } }
@media (min-width: 1024px) { .as-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .as-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Horizontal rail (same column widths as .as-grid) */
.as-rail {
    --as-rail-cols: 2.3;
    --as-rail-gap: .75rem;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--as-rail-cols) - 1) * var(--as-rail-gap)) / var(--as-rail-cols));
    gap: var(--as-rail-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.as-rail::-webkit-scrollbar { display: none; }
.as-rail > * { scroll-snap-align: start; min-width: 0; }
@media (min-width: 480px) { .as-rail { --as-rail-cols: 3.3; } }
@media (min-width: 768px) { .as-rail { --as-rail-cols: 4; --as-rail-gap: 1rem; } }
@media (min-width: 1024px) { .as-rail { --as-rail-cols: 5; } }
@media (min-width: 1280px) { .as-rail { --as-rail-cols: 6; } }
@media (prefers-reduced-motion: reduce) { .as-rail { scroll-behavior: auto; } }

/* Ads */
.as-ad-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .5rem;
    max-width: 100%;
    overflow: hidden;
    padding: .75rem;
    margin-bottom: 2rem;
    text-align: center;
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-xl);
}
.as-ad-box:empty { display: none; }
.as-ad-box iframe, .as-ad-box img { max-width: 100%; }

/* Empty state */
.as-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 3.5rem 1.5rem;
    text-align: center;
    color: var(--as-ink-mute);
    font-size: .875rem;
    background: var(--as-soft);
    border: 1px dashed var(--as-border-strong);
    border-radius: var(--as-r-xl);
}
.as-empty strong, .as-empty h2, .as-empty h3 { color: var(--as-ink); font-size: 1rem; margin: 0; }
.as-empty svg, .as-empty > i { width: 2.5rem; height: 2.5rem; font-size: 1.75rem; color: var(--as-ink-dim); margin-bottom: .25rem; }

/* Skeleton */
.as-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--as-soft);
    border-radius: var(--as-r-md);
    color: transparent !important;
}
.as-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--as-ink) 6%, transparent), transparent);
    animation: as-shimmer 1.4s infinite;
}
@keyframes as-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .as-skeleton::after { animation: none; } }

/* --------------------------------------------------------------------------
   5. Vendor skins: Swiper pagination, Tooltipster, Bootstrap JS widgets
   -------------------------------------------------------------------------- */
.swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.swiper-pagination-bullet {
    width: 22px;
    height: 3px;
    margin: 0 !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, .35);
    opacity: 1;
    cursor: pointer;
    transition: width .28s var(--as-ease), background-color .2s, transform .2s;
}
html:not(.dark) .swiper-pagination-bullet { background: color-mix(in srgb, var(--as-ink) 22%, transparent); }
.swiper-pagination-bullet:hover { transform: scaleY(1.4); background: rgba(255, 255, 255, .7); }
.swiper-pagination-bullet-active,
html:not(.dark) .swiper-pagination-bullet-active {
    width: 36px;
    background: var(--as-brand);
    box-shadow: 0 0 10px color-mix(in srgb, var(--as-brand) 55%, transparent);
}

.tooltipster-sidetip .tooltipster-box {
    background: var(--as-elev);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-lg);
    box-shadow: var(--as-shadow-pop);
}
.tooltipster-sidetip .tooltipster-content {
    color: var(--as-ink);
    font-family: var(--as-font);
    font-size: .8125rem;
    line-height: 1.5;
    padding: .875rem 1rem;
}
.tooltipster-sidetip .tooltipster-arrow { display: none; }

/* Bootstrap 4 JS widget mechanics (modal / dropdown / tooltip / collapse) */
.fade { transition: opacity .15s linear; }
.fade:not(.show) { opacity: 0; }
.collapse:not(.show) { display: none; }
.collapsing { position: relative; height: 0; overflow: hidden; transition: height .2s ease; }

.modal-open { overflow: hidden; }
.modal-open .modal { overflow-x: hidden; overflow-y: auto; }
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
}
.modal-dialog {
    position: relative;
    width: auto;
    max-width: 500px;
    margin: 1.75rem auto;
    padding-inline: .75rem;
    pointer-events: none;
}
.modal.fade .modal-dialog { transition: transform .25s var(--as-ease); transform: translateY(16px) scale(.98); }
.modal.show .modal-dialog { transform: none; }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 3.5rem); }
.modal-dialog-scrollable { max-height: calc(100% - 3.5rem); display: flex; }
.modal-dialog-scrollable .modal-content { max-height: calc(100vh - 3.5rem); overflow: hidden; }
.modal-dialog-scrollable .modal-body { overflow-y: auto; }
.modal-sm { max-width: 360px; }
.modal-lg { max-width: 800px; }
.modal-xl { max-width: 1140px; }
.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--as-ink);
    pointer-events: auto;
    background: var(--as-elev);
    background-clip: padding-box;
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-xl);
    box-shadow: var(--as-shadow-pop);
    outline: 0;
}
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #07060b;
}
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: .8; }
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--as-border);
}
.modal-title { margin: 0; font-family: var(--as-font-display); font-size: 1.125rem; font-weight: 800; }
.modal-body { position: relative; flex: 1 1 auto; padding: 1.25rem; }
.modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--as-border);
}
.modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; }

.close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 1.375rem;
    line-height: 1;
    color: var(--as-ink-dim);
    background: transparent;
    border: 0;
    border-radius: var(--as-r-sm);
    cursor: pointer;
    transition: color .15s, background-color .15s;
}
.close:hover { color: var(--as-ink); background: var(--as-hover); }

.dropdown, .dropup, .dropleft, .dropright { position: relative; }
.dropdown-toggle { white-space: nowrap; }
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    min-width: 12rem;
    margin: .5rem 0 0;
    padding: .375rem;
    font-size: .875rem;
    color: var(--as-ink);
    text-align: left;
    list-style: none;
    background: var(--as-elev);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-lg);
    box-shadow: var(--as-shadow-pop);
}
.dropdown-menu.show { display: block; }
.dropdown-menu-right { right: 0; left: auto; }
.dropdown-menu-left { right: auto; left: 0; }
.dropdown-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .5rem .75rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--as-ink-mute);
    text-align: inherit;
    white-space: nowrap;
    background: transparent;
    border: 0;
    border-radius: var(--as-r-sm);
    cursor: pointer;
}
.dropdown-item:hover, .dropdown-item:focus { color: var(--as-ink); background: var(--as-hover); }
.dropdown-item.active, .dropdown-item:active { color: #fff; background: var(--as-brand); }
.dropdown-divider { height: 0; margin: .375rem 0; overflow: hidden; border-top: 1px solid var(--as-border); }
.dropdown-header { display: block; padding: .5rem .75rem .25rem; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--as-ink-dim); }

.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    margin: 0;
    font-family: var(--as-font);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.4;
    word-wrap: break-word;
    opacity: 0;
}
.tooltip.show { opacity: 1; }
.tooltip .arrow { display: none; }
.tooltip-inner {
    max-width: 220px;
    padding: .375rem .625rem;
    color: var(--as-bg);
    text-align: center;
    background: var(--as-ink);
    border-radius: var(--as-r-sm);
}
.bs-tooltip-top, .bs-tooltip-auto[x-placement^=top] { padding: .4rem 0; }
.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^=bottom] { padding: .4rem 0; }

/* Alerts (AjaxForm errors + #toast messages from main.js) */
.alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .75rem 2.5rem .75rem .875rem;
    margin-bottom: 1rem;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--as-ink);
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-md);
}
.alert > div { flex: 1 1 100%; }
.alert:has(> div) { flex-direction: column; gap: .125rem; }
.alert .close { position: absolute; top: .375rem; right: .375rem; width: 1.75rem; height: 1.75rem; font-size: 1.125rem; }
.alert-success { border-color: color-mix(in srgb, var(--as-success) 45%, transparent); background: color-mix(in srgb, var(--as-success) 12%, var(--as-elev)); }
.alert-danger { border-color: color-mix(in srgb, var(--as-danger) 45%, transparent); background: color-mix(in srgb, var(--as-danger) 12%, var(--as-elev)); }
.alert-info { border-color: color-mix(in srgb, var(--as-brand) 40%, transparent); background: color-mix(in srgb, var(--as-brand) 10%, var(--as-elev)); }
.alert-warning { border-color: color-mix(in srgb, var(--as-warning) 45%, transparent); background: color-mix(in srgb, var(--as-warning) 12%, var(--as-elev)); }
.alert-success > i { color: var(--as-success); }
.alert-danger > i { color: var(--as-danger); }
.alert-info > i { color: var(--as-brand); }

#toast {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    max-width: calc(100vw - 2rem);
    pointer-events: none;
}
#toast .alert {
    min-width: 240px;
    max-width: 380px;
    margin: 0;
    align-items: center;
    background: var(--as-elev);
    box-shadow: var(--as-shadow-pop);
    pointer-events: auto;
}
#toast .alert .mx-2 { margin-inline: .25rem; }

/* main.js "loading" placeholder */
.loading {
    width: 2rem;
    height: 2rem;
    margin: 1.5rem auto;
    border: 3px solid var(--as-brand-soft);
    border-top-color: var(--as-brand);
    border-radius: 50%;
    animation: as-spin .7s linear infinite;
}
@keyframes as-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.as-header {
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100%;
    background: color-mix(in srgb, var(--as-bg) 94%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--as-border);
    transition: box-shadow .2s, background-color .25s;
}
/* main.js FixedHeader still toggles .fixed on every <header>; keep ours sticky. */
.as-header.fixed { position: sticky; top: 0; margin-top: 0; }
.as-header.is-scrolled { box-shadow: 0 8px 24px -16px rgba(0, 0, 0, .5); }
.as-header__bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    height: var(--as-header-h);
}

/* Brand / wordmark */
.as-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
    min-width: 0;
    font-family: var(--as-font-display);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--as-ink);
}
.as-brand:hover { color: var(--as-ink); }
.as-brand__mark { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.as-brand__logo {
    display: block;
    width: auto;
    height: 2.25rem;
    max-width: 9rem;
    object-fit: contain;
    filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--as-brand) 40%, transparent));
}
.as-brand__spark {
    position: absolute;
    pointer-events: none;
    font-style: normal;
    line-height: 1;
    color: #c084fc;
    filter: drop-shadow(0 0 4px currentColor);
    animation: as-twinkle 2.6s ease-in-out infinite;
}
.as-brand__spark::before { content: "\2726"; display: block; }
.as-brand__spark--1 { top: -3px; right: 1px; font-size: 9px; }
.as-brand__spark--2 { bottom: 0; right: -4px; font-size: 6px; color: #5d79ee; animation-delay: .9s; }
.as-brand__spark--3 { top: 9px; left: -5px; font-size: 5px; animation-delay: 1.7s; }
@keyframes as-twinkle {
    0%, 100% { opacity: .2; transform: scale(.65); }
    50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .as-brand__spark { animation: none; opacity: .7; } }
/* Wordmark: "Retro spazio" (Righteous, pink-violet "Saturn", ring swoosh
   underneath) with the domain extension small above "Saturn". */
.as-brand__word {
    position: relative;
    padding-bottom: .16em;
    font-family: "Righteous", var(--as-font-display);
    font-weight: 400;
    letter-spacing: .01em;
    white-space: nowrap;
}
.as-brand__word::after {
    content: "";
    position: absolute;
    left: 4%;
    right: -4%;
    bottom: -.02em;
    height: .1em;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #6d89fe, #e86fb8, transparent);
    transform: rotate(-2deg);
    pointer-events: none;
}
.as-brand__glyph {
    position: relative;
    display: inline-block;
    font-weight: 400;
    color: #b38bff;
    background: linear-gradient(90deg, #b38bff, #e86fb8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.as-brand__tld {
    position: absolute;
    top: -.5em;
    right: .05em;
    font: 700 .34em/1 var(--as-font), sans-serif;
    letter-spacing: .12em;
    color: #cdb3ff;
    -webkit-text-fill-color: #cdb3ff;
}
html:not(.dark) .as-brand__tld { color: var(--as-brand); -webkit-text-fill-color: var(--as-brand); }

/* Search (main.js TopSearch binds #search, #search-toggler, .search-popup, .s-close, .body, a.more) */
.as-search {
    position: relative;
    display: none;
    flex: 1 1 auto;
    max-width: 36rem;
    margin-inline: auto;
    padding-inline: 1rem;
}
@media (min-width: 768px) { .as-search { display: block; } }
.as-search form { position: relative; display: block; width: 100%; margin: 0; }
.as-search__field { position: relative; display: block; }
.as-search__icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: .25rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    padding: 0;
    color: var(--as-ink-dim);
    background: transparent;
    border: 0;
    border-radius: var(--as-r-sm);
}
.as-search__icon:hover { color: var(--as-ink); }
.as-search__icon svg { width: 1rem; height: 1rem; }
.as-search .as-search__input {
    display: block;
    width: 100%;
    height: 2.25rem;
    min-height: 0;
    padding: 0 2.5rem 0 2.25rem;
    font-size: .8125rem;
    color: var(--as-ink);
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-md);
}
.as-search .as-search__input:focus { border-color: var(--as-brand); box-shadow: 0 0 0 3px var(--as-brand-ring); }
.as-search__kbd {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 .3rem;
    font-family: var(--as-font);
    font-size: .6875rem;
    font-weight: 700;
    color: var(--as-ink-dim);
    background: var(--as-elev);
    border: 1px solid var(--as-border);
    border-radius: .3rem;
    pointer-events: none;
}
#search.show .as-search__kbd { display: none; }

.as-search .search-popup {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    right: 0;
    z-index: 50;
    display: none;
    overflow: hidden;
    background: var(--as-elev);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-lg);
    box-shadow: var(--as-shadow-pop);
}
/* Only show the popup once there is something in it (results or "no results"). */
.as-search .search-popup:not(:has(.body > *)) { display: none !important; }
.as-search .search-popup .s-close {
    position: absolute;
    top: .5rem;
    right: .75rem;
    z-index: 2;
    font-size: .75rem;
    font-weight: 600;
    color: var(--as-ink-dim);
    cursor: pointer;
}
.as-search .search-popup .s-close:hover { color: var(--as-ink); }
.as-search .head-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem 4rem .5rem .875rem;
    border-bottom: 1px solid var(--as-border);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--as-ink-dim);
}
.as-search .head-box .filter {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    letter-spacing: 0;
    text-transform: none;
    font-size: .75rem;
    font-weight: 600;
    color: var(--as-brand);
}
html.dark .as-search .head-box .filter { color: color-mix(in srgb, var(--as-brand) 65%, #fff); }
.as-search .head-box .filter svg { width: .875rem; height: .875rem; }
.as-search .search-popup .body { max-height: min(24rem, 60vh); overflow-y: auto; }
.as-search .search-popup .foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem .875rem;
    font-size: .75rem;
    color: var(--as-ink-dim);
    border-top: 1px solid var(--as-border);
}
.as-search .nav-tip { display: none; align-items: center; gap: .75rem; }
@media (min-width: 1024px) { .as-search .nav-tip { display: inline-flex; } }
.as-search .nav-tip > span { display: inline-flex; align-items: center; gap: .25rem; }
.as-search .nav-tip kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .25rem;
    font-size: .625rem;
    font-weight: 700;
    color: var(--as-ink-mute);
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: .25rem;
}
.as-search .search-popup .foot .more {
    margin-left: auto;
    font-weight: 600;
    color: var(--as-brand);
}
html.dark .as-search .search-popup .foot .more { color: color-mix(in srgb, var(--as-brand) 65%, #fff); }

/* Search result rows (frontend.partials.search-results) */
.as-search .scaff.items { display: block; }
.as-search .scaff.items .item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .875rem;
    color: var(--as-ink);
    border-bottom: 1px solid color-mix(in srgb, var(--as-border) 60%, transparent);
}
.as-search .scaff.items .item:last-child { border-bottom: 0; }
.as-search .scaff.items .item:hover,
.as-search .scaff.items .item:focus,
.as-search .scaff.items .item.active { background: var(--as-hover); color: var(--as-ink); }
.as-search .scaff.items .item .poster { flex: 0 0 2.5rem; width: 2.5rem; }
.as-search .scaff.items .item .poster span {
    position: relative;
    display: block;
    padding-bottom: 140%;
    overflow: hidden;
    border-radius: var(--as-r-sm);
    background: var(--as-soft);
}
.as-search .scaff.items .item .poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.as-search .scaff.items .item .info { flex: 1; min-width: 0; }
.as-search .scaff.items .item .name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.3;
}
.as-search .scaff.items .item.active .name,
.as-search .scaff.items .item:hover .name { color: var(--as-brand-hover); }
html:not(.dark) .as-search .scaff.items .item.active .name,
html:not(.dark) .as-search .scaff.items .item:hover .name { color: var(--as-brand); }
.as-search .scaff.items .item .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .125rem .5rem;
    margin-top: .2rem;
    font-size: .6875rem;
    color: var(--as-ink-dim);
}
.as-search .scaff.items .item .meta .dot + .dot::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-right: .5rem;
    vertical-align: middle;
    border-radius: 50%;
    background: currentColor;
    opacity: .6;
}
.as-search .scaff.items .item .meta .fa-star { color: var(--as-star); }
.as-search .no-result { padding: 2.25rem 1rem; text-align: center; font-size: .8125rem; color: var(--as-ink-mute); }

/* Mobile: the toggler opens the search as a full-width bar over the header row */
.as-search-toggle { order: 20; }
@media (min-width: 768px) { .as-search-toggle { display: none; } }
.as-search-toggle .as-ico-close { display: none; }
.as-header.is-searching .as-search-toggle .as-ico-search { display: none; }
.as-header.is-searching .as-search-toggle .as-ico-close { display: block; }
@media (max-width: 767.98px) {
    #search.show {
        position: absolute;
        top: 0;
        bottom: 0;
        left: var(--as-gutter);
        right: calc(var(--as-gutter) + 2.25rem + .5rem);
        z-index: 5;
        display: flex;
        align-items: center;
        max-width: none;
        margin: 0;
        padding: 0;
        background: transparent;
    }
    #search.show::before {
        content: "";
        position: absolute;
        inset: 0 -.5rem 0 calc(-1 * var(--as-gutter));
        background: var(--as-bg);
        z-index: -1;
    }
    #search.show .as-search__input { height: 2.5rem; font-size: 1rem; }
    /* Reference: back button on the left, the field fills the rest of the bar. */
    .as-header.is-searching #search.show {
        left: calc(var(--as-gutter) + 2.25rem + .5rem);
        right: var(--as-gutter);
    }
    .as-header.is-searching #search.show::before {
        inset: 0 calc(-1 * var(--as-gutter)) 0 calc(-1 * (var(--as-gutter) + 2.25rem + .5rem));
    }
    .as-header.is-searching .as-search-toggle {
        position: absolute;
        top: 50%;
        left: var(--as-gutter);
        z-index: 6;
        transform: translateY(-50%);
    }
}

/* Nav */
.as-nav { display: none; align-items: center; gap: .25rem; margin-left: auto; }
@media (min-width: 1024px) { .as-nav { display: flex; } }
.as-nav__link {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 2.25rem;
    padding-inline: .875rem;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--as-ink-mute);
    background: transparent;
    border: 0;
    border-radius: var(--as-r-md);
    cursor: pointer;
    transition: color .15s, background-color .15s;
}
.as-nav__link:hover, .as-hdd.is-open > .as-nav__link { color: var(--as-ink); background: var(--as-hover); }
.as-nav__link.is-active { color: #fff; background: var(--as-brand); }
.as-nav__link.is-active:hover { color: #fff; background: var(--as-brand-hover); }
.as-nav__link svg:not(.as-nav__ico) { width: .75rem; height: .75rem; transition: transform .2s; }
.as-hdd.is-open > .as-nav__link svg:not(.as-nav__ico) { transform: rotate(180deg); }
/* Leading menu icons (Archivio anime, Anime in corso, Generi, Altro) */
.as-nav__ico { flex-shrink: 0; width: 1rem; height: 1rem; color: var(--as-brand-hover); opacity: .9; transition: color .15s, opacity .15s; }
.as-nav__link:hover .as-nav__ico, .as-hdd.is-open > .as-nav__link .as-nav__ico { opacity: 1; }
.as-nav__link.is-active .as-nav__ico { color: #fff; }
html:not(.dark) .as-nav__ico { color: var(--as-brand); }
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .as-nav { gap: 0; }
    .as-nav__link { padding-inline: .5rem; }
}
.as-xl-up { display: none; }
.as-2xl-up { display: none; }
@media (min-width: 1280px) { .as-xl-up { display: inline-flex; } .as-xl-down { display: none !important; } }
@media (min-width: 1536px) { .as-2xl-up { display: inline-flex; } .as-2xl-down { display: none !important; } }

/* Shell dropdowns (Genres / More) */
.as-hdd { position: relative; }
.as-hdd__menu {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 50;
    display: none;
    width: 16rem;
    max-height: calc(100vh - var(--as-header-h) - 1.5rem);
    overflow-y: auto;
    padding: .375rem;
    background: var(--as-elev);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-lg);
    box-shadow: var(--as-shadow-pop);
}
.as-hdd.is-open > .as-hdd__menu { display: block; animation: as-pop .16s var(--as-ease); }
@keyframes as-pop { from { opacity: 0; transform: translateY(-4px); } }
.as-hdd__menu--mega { width: min(42rem, calc(100vw - 2rem)); padding: .75rem; }
.as-hdd__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .75rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--as-ink-mute);
    border-radius: var(--as-r-sm);
}
.as-hdd__item:hover, .as-hdd__item:focus-visible { color: var(--as-ink); background: var(--as-hover); }
.as-hdd__item svg { width: .75rem; height: .75rem; color: var(--as-ink-dim); }
.as-hdd__sep { height: 1px; margin: .375rem 0; background: var(--as-border); }
.as-hdd__label {
    display: block;
    padding: .5rem .75rem .25rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--as-ink-dim);
}
.as-genre-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 640px) { .as-genre-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .as-hdd__menu--mega .as-genre-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.as-genre-grid a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: .4rem .625rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--as-ink-mute);
    border-radius: var(--as-r-sm);
}
.as-genre-grid a:hover { color: var(--as-ink); background: var(--as-hover); }
.as-type-row { display: flex; flex-wrap: wrap; gap: .375rem; padding: .25rem .625rem .25rem; }
.as-type-row .as-chip { height: 1.75rem; padding-inline: .75rem; font-size: .75rem; }

/* Actions */
.as-header__actions { display: flex; align-items: center; gap: .375rem; margin-left: auto; }
@media (min-width: 1024px) { .as-header__actions { margin-left: .5rem; } }
.as-header__burger { order: -1; }
@media (min-width: 1024px) { .as-header__burger { display: none; } }

.as-theme-btn .as-ico-sun { display: none; }
html.dark .as-theme-btn .as-ico-sun { display: block; }
html.dark .as-theme-btn .as-ico-moon { display: none; }

/* Title language switch (main.js Switch on [data-switch]) */
.as-lang { display: none; }
@media (min-width: 640px) { .as-header .as-lang { display: inline-flex; } }
.as-lang .settings-options,
.as-drawer .as-lang .settings-options {
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    padding: .1875rem;
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-md);
}
.as-lang .settings-options span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: 2rem;
    padding: 0 .5rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--as-ink-dim);
    border-radius: calc(var(--as-r-md) - .1875rem);
    cursor: pointer;
    user-select: none;
    transition: color .15s, background-color .15s;
}
.as-lang .settings-options span:hover { color: var(--as-ink); }
.as-lang .settings-options span.active { color: #fff; background: var(--as-brand); }
.as-drawer .as-lang,
.as-drawer__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .25rem .375rem .25rem .875rem; font-size: .875rem; font-weight: 600; color: var(--as-ink-mute); }

/* Phones: logo + random + theme + user + search all stay in the bar (like the
   reference); tighter gaps and a smaller logo make room, the wordmark folds
   away on the narrowest screens. */
@media (max-width: 479.98px) {
    .as-header__bar { gap: .5rem; }
    .as-header__actions { gap: .25rem; }
    .as-header .as-brand { gap: .375rem; }
    .as-header .as-brand__logo { height: 1.75rem; }
}
/* Narrow phones (360-399px): keep the "AnimeSaturn .net" wordmark, a touch
   smaller; random + theme move to the drawer (it already lists both). */
@media (max-width: 399.98px) {
    .as-header__bar { gap: .375rem; }
    .as-header .as-brand { font-size: 1rem; }
    .as-header .as-brand__logo { height: 1.5rem; }
    .as-header .as-brand__spark { display: none; }
    .as-header #random-anime,
    .as-header .as-theme-btn { display: none; }
}

/* Signed-in bar also carries the bell + avatar, so lower-priority actions fold
   away progressively (all of them stay reachable: the drawer has random, theme
   and EN/JP; at 1024-1279 the "More" menu has random + an EN/JP row, see
   .as-hdd__lang). The search field absorbs whatever width is left. */
.as-header__actions, .as-nav { flex-shrink: 0; }
.as-header .as-search { min-width: 0; }
@media (max-width: 1279.98px) {
    .as-header:has(.top-profile) #random-anime,
    .as-header:has(.top-profile) .as-header__actions > .as-lang { display: none; }
}
@media (max-width: 767.98px) {
    .as-header:has(.top-profile) .as-header__actions > .as-theme-btn { display: none; }
}

/* EN/JP row inside the "More" dropdown — signed-in, 1024-1279 only. */
.as-header .as-hdd__lang,
.as-header .as-hdd__sep--lang { display: none; }
@media (max-width: 1279.98px) {
    .as-header:has(.top-profile) .as-hdd__lang { display: flex; }
    .as-header:has(.top-profile) .as-hdd__sep--lang { display: block; }
}
.as-hdd__lang { align-items: center; justify-content: space-between; gap: .75rem; padding: .25rem .25rem .25rem .75rem; font-size: .8125rem; font-weight: 600; color: var(--as-ink-mute); }
.as-hdd__lang .settings-options { height: 2rem; }

/* User area (#user — filled by main.js UserPanel from frontend.partials.user-panel) */
#user { display: flex; align-items: center; min-width: 2.25rem; min-height: 2.25rem; }
#user > .placeholder {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--as-soft);
    border: 1px solid var(--as-border);
}
#user .sign-in,
#user .sign-in.btn {
    display: inline-flex;
    min-height: 0;
    align-items: center;
    gap: .375rem;
    height: 2.25rem;
    padding-inline: .875rem;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: #fff;
    background: var(--as-brand);
    border: 1px solid var(--as-brand);
    border-radius: var(--as-r-md);
    transition: background-color .15s, transform .15s;
}
#user .sign-in:hover { color: #fff; background: var(--as-brand-hover); transform: translateY(-1px); }
#user .sign-in i { font-size: .75rem; }
#user .sign-in .as-sign-in__ico { display: none; width: 1.25rem; height: 1.25rem; }
/* Below 1280px (phones, and the tight 1024-1279 desktop bar with all four nav
   items): "Sign in" becomes a user icon button (opens the same #sign modal). */
@media (max-width: 1279.98px) {
    #user .sign-in,
    #user .sign-in.btn {
        position: relative;
        justify-content: center;
        width: 2.25rem;
        padding: 0;
        color: var(--as-ink);
        background: var(--as-soft);
        border-color: var(--as-border);
    }
    #user .sign-in:hover { color: var(--as-ink); background: var(--as-hover); border-color: var(--as-border-strong); }
    #user .sign-in i { display: none; }
    #user .sign-in .as-sign-in__ico { display: block; }
    #user .sign-in .as-sign-in__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

.top-profile { display: flex; align-items: center; gap: .375rem; }
.top-profile .notify { position: relative; }
.top-profile .notify > .toggler {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
    color: var(--as-ink);
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-md);
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.top-profile .notify > .toggler:hover,
.top-profile .notify.show > .toggler { background: var(--as-hover); border-color: var(--as-border-strong); }
.top-profile .notify > .toggler.active::before {
    content: "";
    position: absolute;
    top: .4rem;
    right: .45rem;
    left: auto;
    width: .5rem;
    height: .5rem;
    background: var(--as-brand);
    border: 2px solid var(--as-soft);
    border-radius: 50%;
    box-shadow: 0 0 8px color-mix(in srgb, var(--as-brand) 70%, transparent);
}
.top-profile .user { position: relative; }
.top-profile .user > .avatar {
    position: relative;
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid var(--as-border);
    cursor: pointer;
    transition: border-color .15s;
}
.top-profile .user > .avatar:hover,
.top-profile .user.show > .avatar { border-color: var(--as-brand); }
.top-profile .user > .avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.top-profile .user > .avatar.has-cosmetics { overflow: visible; border-color: transparent; }
.top-profile .user > .avatar .avatar-clip { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; }
.top-profile .user > .avatar .avatar-decoration { position: absolute; inset: -18%; width: 136%; height: 136%; max-width: none; pointer-events: none; }

.top-profile .user .dropdown-menu {
    width: 15rem;
    max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - var(--as-header-h) - 1rem);
    overflow-y: auto;
}
/* Phones: the bell sits left of the avatar + search buttons, so a menu
   right-aligned to its own toggler would run off the left edge. Anchor both
   menus to the header bar's right edge instead (.as-header__bar is the
   positioned ancestor), 8px in from the viewport. */
@media (max-width: 767.98px) {
    .as-header__actions > #user,
    .as-header__actions .top-profile,
    .as-header__actions .top-profile .notify,
    .as-header__actions .top-profile .user { position: static; }
    .as-header__actions .top-profile .dropdown-menu {
        top: calc(100% - .375rem);
        right: .5rem;
        left: auto;
        margin-top: 0;
    }
}
.as-user-menu__head {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding: .5rem .75rem .625rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--as-border);
}
.as-user-menu__name { font-weight: 700; font-size: .875rem; color: var(--as-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-user-menu__sub { font-size: .75rem; color: var(--as-ink-dim); }
.top-profile .user .dropdown-item { display: flex; align-items: center; gap: .625rem; }
.top-profile .user .dropdown-item i { width: 1rem; text-align: center; font-size: .8125rem; color: var(--as-ink-dim); }
.top-profile .user .dropdown-item:hover i { color: var(--as-brand); }
.as-user-menu__logout { margin: 0; }
.top-profile .user .dropdown-item.logout { color: var(--as-danger); }
.top-profile .user .dropdown-item.logout i { color: currentColor; }

/* --------------------------------------------------------------------------
   7a. Bell dropdown structure carried over from the retired
       assets/anikoto/css/notifications-bell.css (layout only, no colours).
       Section 7 below re-themes and overrides it.
   -------------------------------------------------------------------------- */
.dropdown-menu.user-notification { max-width: min(100vw - 24px, 400px); min-width: 300px; }
.dropdown-menu.user-notification .noti-bell-head { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.dropdown-menu.user-notification .noti-bell-tabs { display: flex; width: 100%; min-width: 0; align-items: stretch; gap: 0; }
.dropdown-menu.user-notification .noti-bell-tabs > span { flex: 1 1 0; text-align: center; cursor: pointer; padding: 10px 4px 9px; font-weight: 600; font-size: 0.78rem; line-height: 1.2; margin-bottom: -1px; user-select: none; }
.dropdown-menu.user-notification .noti-bell-tabs > span .badge { display: inline-block; margin-left: 2px; font-size: 0.65rem; vertical-align: middle; }
.dropdown-menu.user-notification .noti-bell-actions { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding: 6px 10px; min-height: 34px; }
.dropdown-menu.user-notification .noti-bell-actions .filter { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 0.75rem; font-weight: 500; line-height: 1; padding: 5px 10px; border-radius: 999px; text-decoration: none; }
.dropdown-menu.user-notification .noti-bell-actions .filter i { font-size: 0.8rem; }
div.dropdown-menu.dropdown-menu-right.noclose.user-notification > .noti-bell-pane { display: none !important; }
div.dropdown-menu.dropdown-menu-right.noclose.user-notification > .noti-bell-pane.active { display: block !important; }
.dropdown-menu.user-notification .noti-bell-anime .body-box, .dropdown-menu.user-notification .noti-bell-community .noti-panel-community > .body-box, .dropdown-menu.user-notification .noti-bell-friends .noti-panel-friends > .body-box, .dropdown-menu.user-notification .noti-bell-system .noti-panel-system > .body-box { max-height: 340px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.dropdown-menu.user-notification .noti-system { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; cursor: default; text-decoration: none; }
.dropdown-menu.user-notification .system-noti-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; }
.dropdown-menu.user-notification .system-noti-main { flex: 1 1 auto; min-width: 0; }
.dropdown-menu.user-notification .system-noti-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 4px; }
.dropdown-menu.user-notification .system-noti-title { font-size: 0.88rem; font-weight: 600; line-height: 1.3; }
.dropdown-menu.user-notification .system-noti-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.dropdown-menu.user-notification .system-noti-body { margin: 0; font-size: 0.78rem; line-height: 1.4; font-weight: 400; white-space: normal; }
.dropdown-menu.user-notification .system-noti-reason { margin: 6px 0 0; padding: 6px 8px; border-radius: 6px; font-size: 0.75rem; line-height: 1.35; }
.dropdown-menu.user-notification .system-noti-reason span { font-weight: 600; margin-right: 4px; }
.dropdown-menu.user-notification .system-noti-time { display: block; margin-top: 6px; font-size: 0.7rem; }
.dropdown-menu.user-notification .noti-system .poster, .dropdown-menu.user-notification .noti-system .dot::before { display: none !important; content: none !important; }
.dropdown-menu.user-notification .system-noti-body, .member-notifications-page .system-noti-body { white-space: normal; }
.dropdown-menu.user-notification .noti-panel-community .noti-mention { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; text-decoration: none; }
.dropdown-menu.user-notification .noti-panel-community .noti-mention .poster { flex: 0 0 auto; }
.dropdown-menu.user-notification .noti-panel-community .noti-mention .poster .user-avatar { display: block; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; }
.dropdown-menu.user-notification .noti-panel-community .noti-mention .user-avatar-img { width: 36px; height: 36px; max-width: 36px; max-height: 36px; object-fit: cover; display: block; }
.dropdown-menu.user-notification .noti-panel-community .noti-mention .info { flex: 1; min-width: 0; }
.dropdown-menu.user-notification .noti-panel-community .noti-mention .content { display: block; }
.dropdown-menu.user-notification .noti-panel-community .noti-mention .noti-mention-user { display: block; font-size: 0.8125rem; line-height: 1.35; margin-bottom: 2px; }
.dropdown-menu.user-notification .noti-panel-community .noti-mention .noti-mention-manga { display: block; font-size: 0.8125rem; line-height: 1.35; font-weight: 600; }
.dropdown-menu.user-notification .noti-panel-community .noti-mention time { display: block; margin-top: 4px; font-size: 0.75rem; }
.dropdown-menu.user-notification .noti-panel-community .no-result { padding: 24px 16px; text-align: center; font-size: 0.875rem; }
.dropdown-menu.user-notification .noti-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 36px 18px; text-align: center; min-height: 160px; }
.dropdown-menu.user-notification .noti-empty i { font-size: 1.6rem; margin-bottom: 4px; }
.dropdown-menu.user-notification .noti-empty strong { display: block; font-size: 0.9rem; font-weight: 600; }
.dropdown-menu.user-notification .noti-empty span { display: block; max-width: 240px; font-size: 0.78rem; line-height: 1.4; font-weight: 400; }
.dropdown-menu.user-notification .noti-friend { display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-decoration: none; }
.dropdown-menu.user-notification .noti-friend .ak-noti-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; }
.dropdown-menu.user-notification .noti-friend .ak-noti-ava { width: 40px; height: 40px; position: relative; flex: 0 0 40px; overflow: visible; }
.dropdown-menu.user-notification .noti-friend .avatar-clip { display: block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.dropdown-menu.user-notification .noti-friend .avatar-clip-img { width: 40px; height: 40px; max-width: 40px; border-radius: 50%; object-fit: cover; display: block; }
.dropdown-menu.user-notification .noti-friend .avatar-decoration { position: absolute !important; top: -12% !important; left: -12% !important; width: 124% !important; height: 124% !important; max-width: none !important; object-fit: contain; pointer-events: none; z-index: 2; }
.dropdown-menu.user-notification .noti-friend .info { flex: 1; min-width: 0; text-align: left; }
.dropdown-menu.user-notification .noti-friend .content { font-size: 0.82rem; line-height: 1.35; }
.dropdown-menu.user-notification .noti-friend time { display: block; margin-top: 3px; font-size: 0.72rem; }
.dropdown-menu.user-notification .noti-friend .badg-level, .dropdown-menu.user-notification .noti-friend img.badg-level { width: 18px; height: 18px; object-fit: contain; display: inline-block; }
.dropdown-menu.user-notification .noti-friend .ak-friend-flex { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.dropdown-menu.user-notification .noti-friend .ak-title-eq { margin-left: 0; }
.dropdown-menu.user-notification .noti-friend .ak-noti-acts { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.dropdown-menu.user-notification .noti-friend .ak-noti-act { border-radius: 6px; padding: 4px 8px; font-size: 11px; font-weight: 700; cursor: pointer; line-height: 1.2; white-space: nowrap; }
.dropdown-menu.user-notification .noti-friend .ak-noti-act:disabled { cursor: wait; }

/* --------------------------------------------------------------------------
   7. Notification bell dropdown (themed on top of 7a)
   -------------------------------------------------------------------------- */
.top-profile .notify .dropdown-menu.user-notification,
.dropdown-menu.user-notification {
    width: min(23rem, calc(100vw - 1rem));
    min-width: 0;
    max-width: calc(100vw - 1rem);
    padding: 0;
    overflow: hidden;
    color: var(--as-ink);
    background: var(--as-elev);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-lg);
}
.dropdown-menu.user-notification .noti-bell-head {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-bottom: 1px solid var(--as-border);
}
.dropdown-menu.user-notification .noti-bell-tabs {
    display: flex;
    gap: 0;
    padding: 0 .375rem;
    border-bottom: 1px solid var(--as-border);
}
.dropdown-menu.user-notification .noti-bell-tabs > span {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: .75rem .25rem .625rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: var(--as-ink-dim);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    user-select: none;
    transition: color .15s, border-color .15s;
}
.dropdown-menu.user-notification .noti-bell-tabs > span:hover { color: var(--as-ink); }
.dropdown-menu.user-notification .noti-bell-tabs > span.active { color: var(--as-ink); border-bottom-color: var(--as-brand); }
.dropdown-menu.user-notification .noti-bell-tabs > span .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    margin-left: 0;
    padding: 0 .3rem;
    font-size: .625rem;
    font-weight: 700;
    line-height: 1;
    color: var(--as-ink-mute);
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: 999px;
}
.dropdown-menu.user-notification .noti-bell-tabs > span.active .badge { color: #fff; background: var(--as-brand); border-color: var(--as-brand); }
.dropdown-menu.user-notification .noti-bell-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 0;
    padding: .4rem .625rem;
}
.dropdown-menu.user-notification .noti-bell-actions .filter {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .3rem .625rem;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--as-ink-mute);
    background: var(--as-soft);
    border: 1px solid var(--as-border);
    border-radius: 999px;
}
.dropdown-menu.user-notification .noti-bell-actions .filter:hover { color: var(--as-ink); background: var(--as-brand-soft); border-color: color-mix(in srgb, var(--as-brand) 45%, transparent); }
.dropdown-menu.user-notification .noti-bell-actions .filter i { font-size: .75rem; opacity: 1; color: var(--as-brand); }
.dropdown-menu.user-notification .noti-bell-actions .filter.d-none { display: none !important; }

div.dropdown-menu.dropdown-menu-right.noclose.user-notification > .noti-bell-pane { display: none !important; }
div.dropdown-menu.dropdown-menu-right.noclose.user-notification > .noti-bell-pane.active { display: block !important; }

.dropdown-menu.user-notification .noti-bell-anime .body-box,
.dropdown-menu.user-notification .noti-bell-community .noti-panel-community > .body-box,
.dropdown-menu.user-notification .noti-bell-friends .noti-panel-friends > .body-box,
.dropdown-menu.user-notification .noti-bell-system .noti-panel-system > .body-box {
    max-height: min(22rem, 60vh);
    overflow-y: auto;
    padding: .25rem 0;
}

/* Anime tab rows */
.dropdown-menu.user-notification .scaff.items .item,
.dropdown-menu.user-notification .noti-panel-anime a.item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .625rem .875rem;
    color: var(--as-ink);
    background: transparent;
    border-bottom: 1px solid color-mix(in srgb, var(--as-border) 60%, transparent);
    transition: background-color .15s;
}
.dropdown-menu.user-notification .scaff.items .item:last-child { border-bottom: 0; }
.dropdown-menu.user-notification .scaff.items .item:hover { background: var(--as-hover); }
.dropdown-menu.user-notification .scaff.items .item:not(.old) { background: color-mix(in srgb, var(--as-brand) 7%, transparent); }
.dropdown-menu.user-notification .scaff.items .item:not(.old):hover { background: var(--as-hover); }
.dropdown-menu.user-notification .scaff.items .item .poster { flex: 0 0 2.5rem; width: 2.5rem; }
.dropdown-menu.user-notification .scaff.items .item .poster span {
    position: relative;
    display: block;
    padding-bottom: 140%;
    overflow: hidden;
    border-radius: var(--as-r-sm);
    background: var(--as-soft);
}
.dropdown-menu.user-notification .scaff.items .item .poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dropdown-menu.user-notification .scaff.items .item .info { flex: 1; min-width: 0; }
.dropdown-menu.user-notification .scaff.items .item .content { display: flex; flex-direction: column; gap: .125rem; font-size: .8125rem; line-height: 1.35; }
.dropdown-menu.user-notification .scaff.items .item .dot.title { font-weight: 600; color: var(--as-ink); }
.dropdown-menu.user-notification .scaff.items .item .dot.highlight { color: var(--as-brand-hover); font-weight: 600; font-size: .75rem; }
html:not(.dark) .dropdown-menu.user-notification .scaff.items .item .dot.highlight { color: var(--as-brand); }
.dropdown-menu.user-notification .scaff.items .item time { display: block; margin-top: .25rem; font-size: .6875rem; color: var(--as-ink-dim); }
.dropdown-menu.user-notification .noti-panel-anime a.item.old { opacity: .62; }
.dropdown-menu.user-notification .noti-panel-anime a.item.old .dot.title,
.dropdown-menu.user-notification .noti-panel-anime a.item.old .dot.highlight { color: var(--as-ink-mute) !important; }
.dropdown-menu.user-notification .noti-panel-anime a.item.old time { color: var(--as-ink-dim); }

/* Community tab rows */
.dropdown-menu.user-notification .noti-panel-community .noti-mention {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .625rem .875rem;
    color: var(--as-ink);
    border-bottom: 1px solid color-mix(in srgb, var(--as-border) 60%, transparent);
}
.dropdown-menu.user-notification .noti-panel-community .noti-mention:hover { background: var(--as-hover); }
.dropdown-menu.user-notification .noti-panel-community .noti-mention:last-child { border-bottom: 0; }
.dropdown-menu.user-notification .noti-panel-community .noti-mention.new { background: color-mix(in srgb, var(--as-brand) 7%, transparent); }
.dropdown-menu.user-notification .noti-panel-community .noti-mention .poster .user-avatar {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    overflow: hidden;
    border-radius: 50%;
    background: var(--as-soft);
}
.dropdown-menu.user-notification .noti-panel-community .noti-mention .user-avatar-img { width: 2.25rem; height: 2.25rem; max-width: none; max-height: none; object-fit: cover; }
.dropdown-menu.user-notification .noti-panel-community .noti-mention .noti-mention-user { display: block; font-size: .8125rem; line-height: 1.35; color: var(--as-ink); }
.dropdown-menu.user-notification .noti-panel-community .noti-mention .noti-mention-manga { display: block; font-size: .75rem; line-height: 1.35; font-weight: 500; color: var(--as-ink-mute); }
.dropdown-menu.user-notification .noti-panel-community .noti-mention time { display: block; margin-top: .25rem; font-size: .6875rem; color: var(--as-ink-dim); }
.dropdown-menu.user-notification .noti-panel-community .noti-mention.old { opacity: .62; }
.dropdown-menu.user-notification .noti-panel-community .noti-mention.old .noti-mention-user,
.dropdown-menu.user-notification .noti-panel-community .noti-mention.old .noti-mention-manga { color: var(--as-ink-mute); }
.dropdown-menu.user-notification .noti-panel-community .noti-mention.old time { color: var(--as-ink-dim); }
.dropdown-menu.user-notification .noti-panel-community .no-result { padding: 2rem 1rem; text-align: center; color: var(--as-ink-mute); font-size: .8125rem; }

/* Friends tab rows */
.dropdown-menu.user-notification .noti-friend {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .625rem .875rem;
    border-bottom: 1px solid color-mix(in srgb, var(--as-border) 60%, transparent);
}
.dropdown-menu.user-notification .noti-friend:last-child { border-bottom: 0; }
.dropdown-menu.user-notification .noti-friend.new { background: color-mix(in srgb, var(--as-brand) 7%, transparent); }
.dropdown-menu.user-notification .noti-friend.old { opacity: .75; }
.dropdown-menu.user-notification .noti-friend .ak-noti-link { display: flex; align-items: flex-start; gap: .625rem; color: var(--as-ink); }
.dropdown-menu.user-notification .noti-friend .ak-noti-ava { position: relative; flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; }
.dropdown-menu.user-notification .noti-friend .ak-noti-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.dropdown-menu.user-notification .noti-friend .ak-noti-ava .avatar-decoration { position: absolute; inset: -18%; width: 136%; height: 136%; max-width: none; border-radius: 0; }
.dropdown-menu.user-notification .noti-friend .info { flex: 1; min-width: 0; }
.dropdown-menu.user-notification .noti-friend .noti-mention-user { font-size: .8125rem; line-height: 1.35; }
.dropdown-menu.user-notification .noti-friend .ak-friend-flex { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem; margin-top: .25rem; font-size: .75rem; }
.dropdown-menu.user-notification .noti-friend time { display: block; margin-top: .25rem; font-size: .6875rem; color: var(--as-ink-dim); }
.dropdown-menu.user-notification .ak-noti-acts { display: flex; gap: .5rem; padding-left: 2.875rem; }
.dropdown-menu.user-notification .ak-noti-act {
    height: 1.875rem;
    padding: 0 .875rem;
    font-size: .75rem;
    font-weight: 600;
    border-radius: var(--as-r-sm);
    border: 1px solid var(--as-border);
    background: var(--as-soft);
    color: var(--as-ink);
}
.dropdown-menu.user-notification .ak-noti-act.is-accept { color: #fff; background: var(--as-brand); border-color: var(--as-brand); }
.dropdown-menu.user-notification .ak-noti-act.is-accept:hover { background: var(--as-brand-hover); }
.dropdown-menu.user-notification .ak-noti-act.is-decline:hover { background: var(--as-hover); }

/* System tab rows */
.dropdown-menu.user-notification .noti-system {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem .875rem;
    color: var(--as-ink);
    background: transparent;
    border-bottom: 1px solid color-mix(in srgb, var(--as-border) 60%, transparent);
}
.dropdown-menu.user-notification .noti-system:last-child { border-bottom: 0; }
.dropdown-menu.user-notification .noti-system.new { background: color-mix(in srgb, var(--as-brand) 7%, transparent); }
.dropdown-menu.user-notification .noti-system.old { opacity: .72; }
.dropdown-menu.user-notification .system-noti-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    font-size: .9rem;
    color: var(--as-brand);
    background: var(--as-brand-soft);
    border-radius: var(--as-r-md);
}
.dropdown-menu.user-notification .noti-system[data-category="ban_permanent"] .system-noti-icon,
.dropdown-menu.user-notification .noti-system[data-category="ban"] .system-noti-icon,
.dropdown-menu.user-notification .noti-system[data-category="warn"] .system-noti-icon { color: var(--as-danger); background: color-mix(in srgb, var(--as-danger) 16%, transparent); }
.dropdown-menu.user-notification .noti-system[data-category="mute"] .system-noti-icon { color: var(--as-warning); background: color-mix(in srgb, var(--as-warning) 16%, transparent); }
.dropdown-menu.user-notification .noti-system[data-category="unban"] .system-noti-icon { color: var(--as-success); background: color-mix(in srgb, var(--as-success) 16%, transparent); }
.dropdown-menu.user-notification .system-noti-title { font-size: .8125rem; font-weight: 600; color: var(--as-ink); line-height: 1.3; }
.dropdown-menu.user-notification .system-noti-badge { padding: .1rem .45rem; font-size: .625rem; font-weight: 700; color: var(--as-brand-hover); background: var(--as-brand-soft); border-radius: 999px; }
.dropdown-menu.user-notification .system-noti-body { margin: 0; font-size: .75rem; line-height: 1.45; color: var(--as-ink-mute); }
.dropdown-menu.user-notification .system-noti-reason { color: var(--as-ink); background: var(--as-soft); border-radius: var(--as-r-sm); }
.dropdown-menu.user-notification .system-noti-reason span { color: var(--as-ink-dim); }
.dropdown-menu.user-notification .system-noti-time { font-size: .6875rem; color: var(--as-ink-dim); }

/* Empty states */
.dropdown-menu.user-notification .no-result { padding: 2rem 1rem; text-align: center; font-size: .8125rem; color: var(--as-ink-mute); }
.dropdown-menu.user-notification .noti-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-height: 10rem;
    padding: 2rem 1.25rem;
    text-align: center;
}
.dropdown-menu.user-notification .noti-empty i { margin-bottom: .25rem; font-size: 1.5rem; color: var(--as-brand); opacity: .9; }
.dropdown-menu.user-notification .noti-empty strong { font-size: .875rem; font-weight: 700; color: var(--as-ink); }
.dropdown-menu.user-notification .noti-empty span { max-width: 15rem; font-size: .75rem; line-height: 1.4; color: var(--as-ink-mute); }

/* --------------------------------------------------------------------------
   8. Mobile drawer
   -------------------------------------------------------------------------- */
.as-drawer {
    position: fixed;
    inset: 0;
    z-index: 1030;
    visibility: hidden;
    pointer-events: none;
}
.as-drawer.is-open { visibility: visible; pointer-events: auto; }
.as-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    transition: opacity .2s;
}
.as-drawer.is-open .as-drawer__overlay { opacity: 1; }
.as-drawer__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 18rem;
    max-width: 82vw;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--as-bg);
    border-right: 1px solid var(--as-border);
    transform: translateX(-100%);
    transition: transform .22s var(--as-ease);
}
.as-drawer.is-open .as-drawer__panel { transform: none; }
@media (prefers-reduced-motion: reduce) { .as-drawer__panel, .as-drawer__overlay { transition: none; } }
.as-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-shrink: 0;
    height: var(--as-header-h);
    padding: 0 1rem;
    border-bottom: 1px solid var(--as-border);
}
.as-drawer__nav { display: flex; flex-direction: column; gap: .25rem; padding: 1rem .75rem 1.5rem; }
.as-drawer__nav .as-nav__link { width: 100%; justify-content: flex-start; font-weight: 500; }
.as-drawer__sep { height: 1px; margin: .5rem 0; background: var(--as-border); }
.as-drawer__label {
    margin: 0;
    padding: .25rem .75rem .375rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--as-ink-dim);
}
.as-drawer details > summary { list-style: none; cursor: pointer; }
.as-drawer__nav details > summary.as-nav__link { display: flex; justify-content: space-between; }
.as-drawer details > summary::-webkit-details-marker { display: none; }
.as-drawer details[open] > summary svg { transform: rotate(180deg); }
.as-drawer details .as-genre-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .25rem .25rem .5rem; }
.as-drawer details .as-type-row { padding: .25rem .5rem .5rem; }
html.as-lock, html.as-lock body { overflow: hidden; }

/* --------------------------------------------------------------------------
   9. Announcement bar (frontend.partials.site-alert)
   -------------------------------------------------------------------------- */
.as-announce { position: relative; display: none; margin: 1.25rem 0; }
.as-announce.is-visible { display: block; }
.as-announce__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .8rem 3rem .8rem 1rem;
    color: var(--as-ink-mute);
    background: color-mix(in srgb, var(--as-tone, var(--as-brand)) 6%, var(--as-bg));
    border: 1px solid color-mix(in srgb, var(--as-tone, var(--as-brand)) 26%, var(--as-border));
    border-radius: var(--as-r-lg);
    transition: border-color .2s, background-color .2s, transform .2s;
}
.as-announce.is-linked .as-announce__inner { cursor: pointer; }
.as-announce.is-linked .as-announce__inner:hover {
    background: color-mix(in srgb, var(--as-tone, var(--as-brand)) 10%, var(--as-bg));
    border-color: color-mix(in srgb, var(--as-tone, var(--as-brand)) 45%, var(--as-border));
    transform: translateY(-1px);
}
.as-announce__badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    padding: .26rem .6rem;
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
    color: color-mix(in srgb, var(--as-tone, var(--as-brand)) 75%, var(--as-ink));
    background: color-mix(in srgb, var(--as-tone, var(--as-brand)) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--as-tone, var(--as-brand)) 28%, transparent);
    border-radius: 999px;
}
.as-announce__badge i { font-size: .7rem; }
.as-announce__text { flex: 1; min-width: 0; margin: 0; font-size: .875rem; line-height: 1.45; color: var(--as-ink-mute); }
.as-announce__text b, .as-announce__text strong { color: var(--as-ink); font-weight: 700; }
.as-announce__text a { color: var(--as-ink); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--as-tone, var(--as-brand)) 60%, transparent); text-underline-offset: 2px; }
.as-announce__text p:last-child { margin-bottom: 0; }
.as-announce__arrow { flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: var(--as-tone, var(--as-brand)); transition: transform .2s; }
html.dark .as-announce__arrow { color: color-mix(in srgb, var(--as-tone, var(--as-brand)) 70%, #fff); }
.as-announce.is-linked .as-announce__inner:hover .as-announce__arrow { transform: translateX(3px); }
.as-announce__close {
    position: absolute;
    top: 50%;
    right: .45rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: var(--as-ink-dim);
    background: transparent;
    border: 0;
    border-radius: .5rem;
    transform: translateY(-50%);
    transition: color .2s, background-color .2s;
}
.as-announce__close:hover { color: var(--as-ink); background: color-mix(in srgb, var(--as-ink) 8%, transparent); }
.as-announce__close svg { width: 1rem; height: 1rem; }
.as-announce--info { --as-tone: #3b82f6; }
.as-announce--news, .as-announce--bookmark { --as-tone: #db2777; }
.as-announce--warning { --as-tone: #f59e0b; }
.as-announce--critical { --as-tone: #e5484d; }
@media (max-width: 575.98px) {
    .as-announce__inner { align-items: flex-start; flex-wrap: wrap; gap: .5rem .75rem; }
    .as-announce__arrow { display: none; }
}
.site-alert { margin: 1.25rem 0; }

/* --------------------------------------------------------------------------
   10. Auth modal (#sign)
   -------------------------------------------------------------------------- */
#sign .modal-dialog { max-width: 27rem; }
#sign .modal-content { overflow: hidden; }
#sign .modal-content::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 7rem;
    background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--as-brand) 26%, transparent), transparent 70%);
    pointer-events: none;
}
#sign .modal-header { position: relative; align-items: flex-start; padding: 1.5rem 1.5rem .25rem; border-bottom: 0; }
#sign .as-auth__brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
#sign .as-auth__brand img { width: auto; height: 2.5rem; flex-shrink: 0; }
#sign .modal-title { font-size: 1.375rem; line-height: 1.15; color: var(--as-ink); }
#sign .modal-header .close { margin: -.25rem -.5rem 0 0; }
#sign .modal-body { position: relative; padding: .75rem 1.5rem 1.25rem; }
#sign .modal-body > p { margin: 0 0 1.125rem; font-size: .875rem; color: var(--as-ink-mute); }
#sign .text-gray2 { color: var(--as-ink-mute); }
#sign .form-group { position: relative; margin-bottom: .875rem; }
#sign .form-group > .icon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.875rem;
    font-size: .9375rem;
    color: var(--as-ink-dim);
    pointer-events: none;
}
#sign .form-group .form-control { height: 2.875rem; padding-left: 2.75rem; font-size: .9375rem; background: var(--as-soft); }
#sign .as-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
#sign .as-auth__remember { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--as-ink-mute); }
#sign .custom-control-input {
    position: static;
    z-index: auto;
    width: 1rem;
    height: 1rem;
    margin: 0;
    opacity: 1;
    accent-color: var(--as-brand);
    cursor: pointer;
}
#sign .custom-control-label { margin: 0; padding: 0; font-size: .8125rem; color: var(--as-ink-mute); cursor: pointer; }
#sign .custom-control-label::before, #sign .custom-control-label::after { display: none; }
#sign .btn.clear {
    display: inline;
    height: auto;
    min-height: 0;
    line-height: 1.4;
    padding: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--as-brand-hover);
    background: none;
    border: 0;
}
html:not(.dark) #sign .btn.clear { color: var(--as-brand); }
#sign .btn.clear:hover { text-decoration: underline; }
#sign .captcha:empty { display: none; }
#sign .form-group:has(> .captcha:empty) { display: none; }
#sign button[type=submit].btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2.875rem;
    font-size: .9375rem;
    font-weight: 700;
    color: #fff;
    background: var(--as-brand);
    border: 1px solid var(--as-brand);
    border-radius: var(--as-r-md);
    transition: background-color .15s, transform .15s;
}
#sign button[type=submit].btn-primary:hover { background: var(--as-brand-hover); transform: translateY(-1px); }
#sign button[type=submit]:disabled { opacity: .6; transform: none; }
#sign .as-auth__divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0 .875rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--as-ink-dim);
}
#sign .as-auth__divider::before, #sign .as-auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--as-border); }
#sign .desi-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; }
#sign .desi-buttons .social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0 .875rem;
    font-size: .8125rem;
    font-weight: 600;
    border: 0;
    border-radius: var(--as-r-md);
    transition: filter .15s, transform .15s;
}
#sign .desi-buttons .social-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
#sign .modal-footer {
    position: relative;
    justify-content: center;
    padding: 1rem 1.5rem;
    font-size: .8125rem;
    background: var(--as-soft);
    border-top: 1px solid var(--as-border);
}
#sign .modal-footer a { font-weight: 700; color: var(--as-brand-hover); }
html:not(.dark) #sign .modal-footer a { color: var(--as-brand); }
#sign .loading { position: absolute; inset: 0; z-index: 5; width: auto; height: auto; margin: 0; border: 0; border-radius: 0; background: color-mix(in srgb, var(--as-elev) 60%, transparent); animation: none; }
#sign .loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2rem;
    height: 2rem;
    margin: -1rem 0 0 -1rem;
    border: 3px solid var(--as-brand-soft);
    border-top-color: var(--as-brand);
    border-radius: 50%;
    animation: as-spin .7s linear infinite;
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.as-footer-ad { margin-top: 2.5rem; }
.as-footer-ad:not(:has(.as-ad-box)) { display: none; }
.as-footer-ad .as-ad-box { margin-bottom: 0; }
.as-footer {
    margin-top: 4rem;
    background: var(--as-soft);
    border-top: 1px solid var(--as-border);
}
.as-footer__inner { padding-top: 3rem; padding-bottom: 3rem; }
.as-footer__title {
    margin: 0 0 .75rem;
    font-family: var(--as-font);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--as-ink-dim);
}
.as-footer__letters { margin-bottom: 2.5rem; }
.as-footer__letters ul { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.as-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding-inline: .625rem;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--as-ink-mute);
    background: var(--as-elev);
    border: 1px solid var(--as-border);
    border-radius: var(--as-r-md);
    transition: all .15s;
}
.as-letter:hover { color: #fff; background: var(--as-brand); border-color: var(--as-brand); transform: translateY(-1px); }
.as-footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .as-footer__grid { grid-template-columns: 1.5fr 2fr; } }
.as-footer .as-brand { font-size: 1.25rem; }
.as-footer__desc { max-width: 24rem; margin: 1rem 0 0; font-size: .875rem; line-height: 1.65; color: var(--as-ink-mute); }
.as-footer__disclaimer { max-width: 24rem; margin: .75rem 0 0; font-size: .75rem; line-height: 1.55; color: var(--as-ink-dim); }
.as-footer__socials { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.25rem; }
.as-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.5rem; font-size: .875rem; }
@media (min-width: 1024px) { .as-footer__cols { grid-template-columns: repeat(var(--as-footer-cols, 3), minmax(0, 1fr)); } }
.as-footer__cols ul { margin: 0; padding: 0; list-style: none; }
.as-footer__cols li + li { margin-top: .4rem; }
.as-footer__cols a { display: inline-flex; align-items: center; gap: .3rem; color: var(--as-ink-mute); }
.as-footer__cols a:hover { color: var(--as-ink); }
.as-footer__cols a svg { width: .75rem; height: .75rem; flex-shrink: 0; }
.as-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    font-size: .75rem;
    color: var(--as-ink-dim);
    border-top: 1px solid var(--as-border);
}
.as-footer__bottom p { margin: 0; }
.as-footer__copy { display: flex; flex-direction: column; gap: .25rem; }
.as-footer__credit { font-size: .6875rem; }
.as-footer__credit a { text-decoration: underline; text-underline-offset: 2px; }
.as-footer__credit a:hover { color: var(--as-ink); }
.as-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.as-footer__legal a:hover { color: var(--as-ink); }
@media (min-width: 640px) { .as-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; } }

/* Print */
@media print {
    .as-header, .as-drawer, .as-footer, .as-announce, .as-ad-box { display: none !important; }
}

/* Announcement bar is rendered once by the layout, above every page's content. */
.as-alert-slot .site-alert { margin: 1rem 0 0; }
/* The page below brings its own top padding; avoid a double gap under the bar. */
.as-alert-slot .as-announce { margin-bottom: 0; }