@font-face {
    font-family: Manrope;
    src: url("/fonts/manrope-variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
}

:root {
    --bg: #080d1c;
    --surface: #111a30;
    --surface-hover: #1b2743;
    --line: rgba(130, 150, 210, .18);
    --text: #f4f7ff;
    --muted: #aab5d1;
    --accent: #a855f7;
    --accent-strong: #9644e8;
    --accent-bg: #2b2052;
    --accent-soft: #e8d5ff;
    --accent-ink: #160d2d;
    --accent-control-text: #fff;
}

.name-glow-violet { color: #f0ddff; text-shadow: 0 0 12px #b45dffb0; }
.name-glow-cyan { color: #d6f9ff; text-shadow: 0 0 12px #42d9ffc0; }
.name-glow-gold { color: #ffeab2; text-shadow: 0 0 12px #ffbe61b0; }
.name-glow-prism { color: #fff; text-shadow: -2px 0 11px #ec78e6, 2px 0 11px #59ddff; }
.name-glow-neon { color: #e4fcff; text-shadow: 0 0 5px #46dfff, 0 0 12px #18b9ec, 1px 1px #ef62d6; }
.name-glow-shadow3d { color: #f5f5ff; text-shadow: 1px 1px #f878d8, 2px 2px #9a62d8, 3px 3px #303878, 0 0 9px #b884ff; }
.name-glow-rainbow {
    color: #ffe1f5;
    background: linear-gradient(100deg, #ff9fda, #ffe393 22%, #aeffc3 42%, #8aeaff 65%, #c7a7ff 82%, #ff9fda);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 5px #a874ffb0);
}
.name-glow-glitch { color: #f4fbff; text-shadow: -1px 0 #5ce9ff, 1px 0 #ff78c6, 0 0 8px #9384ff; }

.account-display-name {
    padding: 7px 12px 9px;
    overflow-wrap: anywhere;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    font-weight: 800;
}

html[data-theme="green"],
html[data-theme="blue"],
html[data-theme="yellow"],
html[data-theme="red"] {
    --accent-control-text: var(--accent-ink);
}

body {
    --bg: #080d1c;
    --surface: #111a30;
    --surface-hover: #1b2743;
    --line: rgba(130, 150, 210, .18);
    --text: #f4f7ff;
    --muted: #aab5d1;
    padding-top: 56px;
    color: #f4f7ff;
    font-family: Manrope, Inter, "Segoe UI", sans-serif;
}

body.header-hidden {
    padding-top: 56px;
}

body .site-header,
body.header-hidden .site-header {
    height: 56px;
    padding: 0 18px;
    grid-template-columns: 210px minmax(240px, 1fr) 210px;
    gap: 16px;
    border-bottom-color: rgba(130, 150, 210, .13);
    background: rgba(11, 17, 35, .94);
    transform: none;
    backdrop-filter: blur(20px);
}

body .header-brand {
    gap: 8px;
}

body .site-logo {
    font-size: 21px;
    letter-spacing: -.07em;
    font-weight: 800;
}

body .menu-toggle {
    width: 32px;
    height: 36px;
}

body .menu-toggle .icon {
    width: 20px;
    height: 20px;
}

body .header-search {
    max-width: 620px;
    height: 40px;
    flex-direction: row-reverse;
    border-color: rgba(130, 150, 210, .28);
    background: rgba(28, 39, 69, .64);
    box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}

body .header-search input {
    padding: 0 14px 0 10px;
    font-size: 12px;
}

body .header-search input::placeholder {
    color: #8e9ab8;
}

body .header-search button {
    width: 45px;
    border: 0;
    border-radius: 12px 0 0 12px;
    color: #dce5fb;
    background: transparent;
}

body .header-actions {
    gap: 12px;
}

body .header-filter,
body .account-name {
    display: none;
}

body .profile-notifications {
    width: 36px;
    height: 36px;
    color: #d9e3fa;
}

body .profile-notifications .icon {
    width: 20px;
    height: 20px;
}

body .header-actions .avatar {
    position: relative;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 68%, #fff);
    border-radius: 10px;
    color: #fff;
    background: radial-gradient(circle at 22% 15%, #ffffff80, transparent 38%),
                linear-gradient(145deg, var(--accent), var(--accent-strong));
    font-weight: 800;
    box-shadow: inset 0 1px #ffffff8c, inset 0 -8px 15px #130d3833;
}

body .header-actions .account-menu summary {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, #52627f);
    border-radius: 15px;
    background: linear-gradient(145deg, #ffffff14, #ffffff04);
    box-shadow: inset 0 1px #ffffff22;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

body .header-actions .account-menu summary:hover,
body .header-actions .account-menu[open] summary {
    border-color: color-mix(in srgb, var(--accent) 62%, #8f9cb9);
    background: color-mix(in srgb, var(--accent) 11%, #141d32);
    box-shadow: inset 0 1px #ffffff2e, 0 0 18px color-mix(in srgb, var(--accent) 18%, transparent);
}

body .header-actions .account-menu summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

body .header-actions .avatar-letter {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding-top: 2px;
    line-height: 1;
    text-shadow: 0 1px 5px #15163877;
    transform: none;
}

body .site-sidebar,
body.header-hidden .site-sidebar {
    top: 56px;
    width: 210px;
    height: calc(100vh - 56px);
    padding: 18px 10px 14px;
    overflow-x: hidden;
    border-right-color: rgba(130, 150, 210, .13);
    background: linear-gradient(180deg, #0c1429, #0a1124 58%, #0e1730);
}

body .site-sidebar::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: min(62%, 520px);
    background: linear-gradient(180deg, #0b142800 0%, #0b14282a 55%, #0b142875 100%),
                url("/images/profile/sidebar-city-v4.webp") center bottom / auto 128% no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .5) 24%, #000 46%);
    mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .5) 24%, #000 46%);
    pointer-events: none;
}

body .site-sidebar[data-art="cyber"]::before {
    background-image: linear-gradient(180deg, #0b142800, #0b142875),
        url("/images/profile/sidebar-cyber-v1.webp");
}

body .site-sidebar[data-art="forest"]::before {
    background-image: linear-gradient(180deg, #0b142800, #0b142875),
        url("/images/profile/sidebar-forest-v1.webp");
}

body .sidebar-nav,
body .sidebar-bottom {
    position: relative;
    z-index: 1;
}

body .sidebar-nav {
    gap: 5px;
}

body .nav-link-item {
    position: relative;
    min-height: 44px;
    gap: 15px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #bdc8e0;
    font-size: 12px;
    font-weight: 600;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

body .nav-link-item .icon {
    width: 19px;
    height: 19px;
}

body .nav-link-item:hover {
    border-color: rgba(130, 150, 210, .17);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: #fff;
}

body .nav-link-item[aria-current="page"] {
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 38%, #111a30), color-mix(in srgb, var(--accent) 13%, #17223b));
    color: var(--accent-soft);
    box-shadow: inset 0 1px #ffffff13, 0 0 18px color-mix(in srgb, var(--accent) 10%, transparent);
}

body .nav-link-item[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
}

body .nav-link-item[aria-current="page"] .icon {
    color: var(--accent);
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 50%, transparent));
}

body .sidebar-divider {
    margin: 12px 8px;
    background: rgba(130, 150, 210, .19);
}

body .sidebar-bottom {
    margin: 0 4px 4px;
    padding: 12px;
    border: 1px solid rgba(130, 150, 210, .22);
    border-radius: 13px;
    background: linear-gradient(130deg, #15213ce3, #202354bb);
    box-shadow: inset 0 1px #ffffff0b;
    color: #d1dcf1;
    font-size: 11px;
    line-height: 1.45;
}

body .sidebar-bottom::before {
    content: "✦";
    display: block;
    margin-bottom: 6px;
    color: #f7c56c;
    font-size: 19px;
    line-height: 1;
}

body .sidebar-bottom p {
    margin-bottom: 7px;
}

body .sidebar-bottom a {
    color: #9dadd0;
    font-size: 10px;
}

body .site-content {
    min-height: calc(100vh - 56px);
    margin-left: 210px;
}

body .site-main {
    width: min(100%, 1700px);
    padding: 14px clamp(16px, 1.5vw, 28px) 64px;
}

body .site-footer {
    border-color: rgba(130, 150, 210, .12);
    color: #6f7c9d;
}

body .account-dropdown,
body .search-suggest {
    border-color: rgba(130, 150, 210, .25);
    background: rgba(17, 26, 48, .98);
    box-shadow: 0 16px 42px #030711a3, inset 0 1px #ffffff0a;
}

body .hero,
body .library-hero {
    border: 1px solid rgba(130, 150, 210, .22);
    border-radius: 20px;
    box-shadow: inset 0 1px #ffffff16, 0 10px 30px #03071128;
}

body .hero {
    min-height: clamp(290px, 26vw, 410px);
    background: #0d1426;
}

body .hero::after {
    background: linear-gradient(90deg, #080d1ce8 0%, #080d1cb8 30%, #080d1c52 56%, #080d1c12 100%),
                linear-gradient(0deg, #080d1c74, transparent 54%);
}

body .home-default-hero {
    background: url("/images/profile/home-scene-v2.webp") center 52% / cover no-repeat;
}

body .hero-copy { position: relative; z-index: 1; }
body .hero h1 { max-width: 640px; color: #f4f7ff; font-weight: 800; }
body .hero p { color: #cad3e9; }

body .primary-action {
    color: var(--accent-control-text);
    background: linear-gradient(120deg, var(--accent-strong), var(--accent));
    box-shadow: inset 0 1px #ffffff36, 0 5px 18px color-mix(in srgb, var(--accent) 16%, transparent);
}

body .primary-action:hover {
    color: var(--accent-control-text);
    background: linear-gradient(120deg, var(--accent), var(--accent-strong));
}

body .secondary-action {
    border: 1px solid rgba(196, 207, 240, .3);
    background: rgba(21, 30, 54, .72);
    box-shadow: inset 0 1px #ffffff14;
}

body .chip-row { gap: 8px; padding: 18px 0 4px; }
body .filter-chip {
    gap: 7px;
    min-height: 37px;
    padding: 7px 13px;
    border-color: rgba(130, 150, 210, .2);
    border-radius: 10px;
    background: rgba(17, 26, 48, .8);
    color: #b9c5df;
    box-shadow: inset 0 1px #ffffff0a;
}

body .filter-chip .icon { width: 14px; height: 14px; color: var(--accent); }
body .filter-chip.active {
    color: var(--accent-soft);
    background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 34%, #111a30), color-mix(in srgb, var(--accent) 12%, #1b2743));
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
body .filter-chip.active .icon { color: var(--accent); }

body .filter-chip.has-genre-art {
    --genre: var(--accent);
    border-color: color-mix(in srgb, var(--genre) 54%, #6575a2);
    background: linear-gradient(90deg, color-mix(in srgb, var(--genre) 32%, #0b1225) 0%, #0b122581 55%, #0b122536 100%), var(--genre-image) center / cover no-repeat;
    color: #fff;
    text-shadow: 0 1px 7px #050818;
}
body .filter-chip.has-genre-art .icon { color: var(--genre); filter: drop-shadow(0 1px 5px #050818); }
body .filter-chip.has-genre-art:hover { border-color: var(--genre); box-shadow: 0 4px 18px color-mix(in srgb, var(--genre) 20%, transparent); }

body .feed-section { margin-top: 30px; }
body .feed-heading { margin-bottom: 14px; }
body .feed-heading h2 { color: #f4f7ff; font-weight: 800; }
body .eyebrow { color: var(--accent); }
body .section-link { color: var(--accent); }

body .anime-grid,
body .anime-grid.compact {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 22px 15px;
}

body .anime-tile-rating {
    padding: 5px 8px;
    border-color: #f7c56c9c;
    border-radius: 9px;
    background: linear-gradient(135deg, #192137ed, #11192bd9);
    color: #ffe39a;
    box-shadow: 0 3px 12px #05081880, inset 0 1px #ffffff33;
    backdrop-filter: blur(8px);
    text-shadow: 0 1px 6px #050818;
}
body .anime-tile-watch {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 70%, #ffffff);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 83%, #11254f), color-mix(in srgb, var(--accent-strong) 73%, #16244c));
    box-shadow: 0 3px 13px #050818a3, inset 0 1px #ffffff50;
    backdrop-filter: blur(8px);
    font-weight: 800;
    text-shadow: 0 1px 5px #050818;
}
body .anime-tile-watch.is-watched {
    border-color: #70f6c1;
    color: #edfff7;
    background: linear-gradient(115deg, #178c6de8, #126a65e8);
}
body .anime-tile-watch-mark {
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff32;
    color: #fff;
    font-size: 9px;
    line-height: 1;
}
body .anime-tile-release { max-width: calc(100% - 16px); }
body .anime-tile-release.release-released,
body .anime-tile-release.release-ongoing,
body .anime-tile-release.release-anons {
    padding: 5px 8px;
    border: 1px solid currentColor;
    box-shadow: 0 3px 12px #0508188c, inset 0 1px #ffffff24;
    backdrop-filter: blur(8px);
    text-shadow: 0 1px 5px #050818;
}
body .anime-tile-release.release-released { background: #11664dcf; color: #9dffd2; }
body .anime-tile-release.release-ongoing { background: #0d577bcc; color: #9beaff; }
body .anime-tile-release.release-anons { background: #80531bd4; color: #ffe2a1; }

body .anime-tile-progress {
    height: 5px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 99px;
    background: #4b5675;
}
body .anime-tile-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-strong), var(--accent));
}
body .anime-tile-episodes { display: block; margin-top: 5px; color: #aab5d1; font-size: 10px; }

body .page-intro h1,
body .watch-title { color: #f4f7ff; font-weight: 800; }
body .page-intro p { color: #aab5d1; }
body .page-intro:not(.library-heading) {
    position: relative;
    margin: 0 0 18px;
    padding: 23px 26px;
    overflow: hidden;
    border: 1px solid rgba(130, 150, 210, .2);
    border-radius: 18px;
    background: radial-gradient(380px 150px at 95% 5%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 80%),
                linear-gradient(115deg, #141e36, #10182c);
    box-shadow: inset 0 1px #ffffff0f;
}
body .catalog-filters,
body .player-shell,
body .empty-feed,
body .empty-state,
body .access-card {
    border: 1px solid rgba(130, 150, 210, .2);
    background-color: rgba(17, 26, 48, .8);
    box-shadow: inset 0 1px #ffffff0d;
}
body .filter-field input,
body .filter-field select,
body .comment-form textarea {
    border-color: rgba(130, 150, 210, .25);
    background: #1a2540;
}
body .watch-tags a,
body .related-item,
body .watch-status button {
    border: 1px solid rgba(130, 150, 210, .2);
    background: rgba(17, 26, 48, .85);
    box-shadow: inset 0 1px #ffffff0b;
}
body .related-item { padding: 8px; border-radius: 12px; }
body .related-item:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

body .watch-tags a.watch-tag-art {
    border-color: color-mix(in srgb, var(--genre) 55%, #6575a2);
    background: linear-gradient(90deg, color-mix(in srgb, var(--genre) 29%, #0b1225), #0b12255c), var(--genre-image) center / cover no-repeat;
    color: #fff;
    text-shadow: 0 1px 6px #050818;
}

body .genre-options .genre-option-art span {
    border-color: rgba(130, 150, 210, .22);
    background: linear-gradient(90deg, #1a2438c9, #172038a6), var(--genre-image) center / cover no-repeat;
    color: #c2cbdc;
    filter: grayscale(1);
    transition: filter .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body .genre-options .genre-option-art:hover span {
    border-color: rgba(170, 185, 220, .55);
    background: linear-gradient(90deg, #202b43c9, #1b2740a6), var(--genre-image) center / cover no-repeat;
    box-shadow: inset 0 1px #ffffff1a;
}

body .genre-options .genre-option-art input:checked + span {
    border-color: var(--genre);
    background: linear-gradient(90deg, color-mix(in srgb, var(--genre) 29%, #0b1225), #0b12255c), var(--genre-image) center / cover no-repeat;
    color: #fff;
    filter: none;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--genre) 35%, transparent), 0 5px 13px color-mix(in srgb, var(--genre) 17%, transparent);
}
body .watch-tags a.watch-tag-art:hover {
    border-color: var(--genre);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--genre) 35%, transparent), 0 5px 13px color-mix(in srgb, var(--genre) 17%, transparent);
}
body .access-track { border-color: rgba(130, 150, 210, .3); background: #1a2540; }
body .access-handle { background: linear-gradient(120deg, var(--accent-strong), var(--accent)); }

@media (max-width: 1300px) {
    body .anime-grid,
    body .anime-grid.compact { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
    body .anime-grid,
    body .anime-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    body .site-header,
    body.header-hidden .site-header { grid-template-columns: 155px minmax(130px, 1fr) 85px; }
    body .site-sidebar[data-art="default"] { --mobile-sidebar-art: url("/images/profile/sidebar-city-v4.webp"); }
    body .site-sidebar[data-art="cyber"] { --mobile-sidebar-art: url("/images/profile/sidebar-cyber-v1.webp"); }
    body .site-sidebar[data-art="forest"] { --mobile-sidebar-art: url("/images/profile/sidebar-forest-v1.webp"); }
    body .site-sidebar,
    body.header-hidden .site-sidebar {
        --sidebar-top: 56px;
        top: var(--sidebar-top);
        width: min(84vw, 310px);
        height: calc(100vh - var(--sidebar-top));
        height: calc(100dvh - var(--sidebar-top));
        max-height: calc(100dvh - var(--sidebar-top));
        padding: 13px 12px max(16px, env(safe-area-inset-bottom));
        justify-content: flex-start;
        gap: 14px;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: linear-gradient(180deg, #0e1730, #0b1329 52%, #101a32);
        transform: translateX(-100%);
    }
    body .site-sidebar[data-art]::before {
        inset: 0;
        height: auto;
        opacity: 1;
        background-image: linear-gradient(180deg, #0a132898, #0a1328b2 52%, #0a1328c0),
            var(--mobile-sidebar-art, url("/images/profile/sidebar-city-v4.webp"));
        background-position: center, center bottom;
        background-size: cover;
        -webkit-mask-image: none;
        mask-image: none;
    }
    body .sidebar-nav,
    body .sidebar-bottom { flex: none; }
    body .sidebar-bottom { margin-top: auto; }
    body .nav-link-item { min-height: 42px; }
    body.menu-open .site-sidebar { transform: translateX(0); }
    body .sidebar-backdrop { inset: 56px 0 0; }
    body .site-content { margin-left: 0; }
}

@media (max-width: 680px) {
    body,
    body.header-hidden { padding-top: 108px; }
    body .site-header,
    body.header-hidden .site-header {
        height: 108px;
        grid-template-columns: 1fr auto;
        grid-template-rows: 54px 44px;
        gap: 0 6px;
        padding: 0 12px;
    }
    body .site-logo { font-size: 20px; }
    body .header-search { grid-column: 1 / -1; grid-row: 2; height: 39px; margin: 0; }
    body .header-actions { grid-column: 2; grid-row: 1; }
    body .site-sidebar,
    body.header-hidden .site-sidebar { --sidebar-top: 108px; }
    body .sidebar-backdrop { inset: 108px 0 0; }
    body .site-main { padding: 12px 12px 48px; }
    body .hero { min-height: 300px; }
    body .hero::after { background: linear-gradient(0deg, #080d1cf4 0%, #080d1cc4 45%, #080d1c36 100%); }
    body .anime-grid,
    body .anime-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
    body .feed-heading h2 { font-size: 20px; }
    body .filter-chip { min-height: 34px; font-size: 11px; }
}

@media (max-width: 430px) {
    body .anime-grid,
    body .anime-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    body .filter-chip:hover { transform: none; }
}