:root {
    --swiper-theme-color: #007aff
}

:host {
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative
}

.swiper {
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    list-style: none;
    display: block;
    position: relative;
    overflow: hidden
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    z-index: 1;
    width: 100%;
    height: 100%;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box;
    display: flex;
    position: relative
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
    transform: translate(0, 0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    transition-property: transform;
    display: block;
    position: relative
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0)
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

.swiper-3d .swiper-slide {
    transform-style: preserve-3d
}

.swiper-3d .swiper-cube-shadow {
    transform-style: preserve-3d
}

.swiper-css-mode>.swiper-wrapper {
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow: auto
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start: var(--swiper-slides-offset-before);
    scroll-margin-inline-start: var(--swiper-slides-offset-before)
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:last-child {
    margin-inline-end: var(--swiper-slides-offset-after)
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    margin-block-start: var(--swiper-slides-offset-before);
    scroll-margin-block-start: var(--swiper-slides-offset-before)
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:last-child {
    margin-block-end: var(--swiper-slides-offset-after)
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
    scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: none
}

.swiper-css-mode.swiper-centered>.swiper-wrapper:before {
    content: "";
    flex-shrink: 0;
    order: 9999
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow {
    pointer-events: none;
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.swiper-3d .swiper-slide-shadow-left {
    pointer-events: none;
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.swiper-3d .swiper-slide-shadow-right {
    pointer-events: none;
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.swiper-3d .swiper-slide-shadow-top {
    pointer-events: none;
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.swiper-3d .swiper-slide-shadow-bottom {
    pointer-events: none;
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.swiper-3d .swiper-slide-shadow {
    pointer-events: none;
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.swiper-3d .swiper-slide-shadow-left {
    pointer-events: none;
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.swiper-3d .swiper-slide-shadow-right {
    pointer-events: none;
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.swiper-3d .swiper-slide-shadow-top {
    pointer-events: none;
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.swiper-3d .swiper-slide-shadow-bottom {
    pointer-events: none;
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.swiper-3d .swiper-slide-shadow {
    background: #00000026
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(270deg, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(90deg, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(#0000, #00000080)
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(#00000080, #0000)
}

.swiper-lazy-preloader {
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-top-color: #0000;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    margin-left: -21px;
    position: absolute;
    top: 50%;
    left: 50%
}

:is(.swiper:not(.swiper-watch-progress), .swiper-watch-progress .swiper-slide-visible) .swiper-lazy-preloader {
    animation: 1s linear infinite swiper-preloader-spin
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-prev,
.swiper-button-next {
    width: var(--swiper-navigation-size);
    height: var(--swiper-navigation-size);
    z-index: 10;
    cursor: pointer;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute
}

:is(.swiper-button-prev, .swiper-button-next).swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

:is(.swiper-button-prev, .swiper-button-next).swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none
}

.swiper-navigation-disabled :is(.swiper-button-prev, .swiper-button-next) {
    display: none !important
}

:is(.swiper-button-prev, .swiper-button-next) ::slotted(svg) {
    object-fit: contain;
    transform-origin: 50%;
    fill: currentColor;
    pointer-events: none;
    width: 100%;
    height: 100%
}

:is(.swiper-button-prev, .swiper-button-next) svg {
    object-fit: contain;
    transform-origin: 50%;
    fill: currentColor;
    pointer-events: none;
    width: 100%;
    height: 100%
}

.swiper-button-lock {
    display: none
}

.swiper-button-prev,
.swiper-button-next {
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2))
}

.swiper-button-prev {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto
}

.swiper-button-prev ::slotted(.swiper-navigation-icon) {
    transform: rotate(180deg)
}

.swiper-button-prev .swiper-navigation-icon {
    transform: rotate(180deg)
}

.swiper-button-next {
    right: var(--swiper-navigation-sides-offset, 4px);
    left: auto
}

.swiper-horizontal .swiper-button-prev {
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-left: 0
}

.swiper-horizontal .swiper-button-next {
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-left: 0
}

.swiper-horizontal~.swiper-button-prev {
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-left: 0
}

.swiper-horizontal~.swiper-button-next {
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-left: 0
}

.swiper-horizontal .swiper-button-prev {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto
}

.swiper-horizontal~.swiper-button-prev {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto
}

.swiper-horizontal.swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto
}

.swiper-horizontal.swiper-rtl~.swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto
}

.swiper-horizontal .swiper-button-next {
    right: var(--swiper-navigation-sides-offset, 4px);
    left: auto
}

.swiper-horizontal~.swiper-button-next {
    right: var(--swiper-navigation-sides-offset, 4px);
    left: auto
}

.swiper-horizontal.swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 4px);
    left: auto
}

.swiper-horizontal.swiper-rtl~.swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 4px);
    left: auto
}

.swiper-horizontal .swiper-button-prev ::slotted(.swiper-navigation-icon) {
    transform: rotate(180deg)
}

.swiper-horizontal .swiper-button-prev .swiper-navigation-icon {
    transform: rotate(180deg)
}

.swiper-horizontal~.swiper-button-prev ::slotted(.swiper-navigation-icon) {
    transform: rotate(180deg)
}

.swiper-horizontal~.swiper-button-prev .swiper-navigation-icon {
    transform: rotate(180deg)
}

.swiper-horizontal.swiper-rtl .swiper-button-next ::slotted(.swiper-navigation-icon) {
    transform: rotate(180deg)
}

.swiper-horizontal.swiper-rtl .swiper-button-next .swiper-navigation-icon {
    transform: rotate(180deg)
}

.swiper-horizontal.swiper-rtl~.swiper-button-next ::slotted(.swiper-navigation-icon) {
    transform: rotate(180deg)
}

.swiper-horizontal.swiper-rtl~.swiper-button-next .swiper-navigation-icon {
    transform: rotate(180deg)
}

.swiper-horizontal.swiper-rtl .swiper-button-prev ::slotted(.swiper-navigation-icon) {
    transform: rotate(0)
}

.swiper-horizontal.swiper-rtl .swiper-button-prev .swiper-navigation-icon {
    transform: rotate(0)
}

.swiper-horizontal.swiper-rtl~.swiper-button-prev ::slotted(.swiper-navigation-icon) {
    transform: rotate(0)
}

.swiper-horizontal.swiper-rtl~.swiper-button-prev .swiper-navigation-icon {
    transform: rotate(0)
}

.swiper-vertical .swiper-button-prev {
    left: var(--swiper-navigation-top-offset, 50%);
    margin-left: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-top: 0;
    right: auto
}

.swiper-vertical .swiper-button-next {
    left: var(--swiper-navigation-top-offset, 50%);
    margin-left: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-top: 0;
    right: auto
}

.swiper-vertical~.swiper-button-prev {
    left: var(--swiper-navigation-top-offset, 50%);
    margin-left: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-top: 0;
    right: auto
}

.swiper-vertical~.swiper-button-next {
    left: var(--swiper-navigation-top-offset, 50%);
    margin-left: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-top: 0;
    right: auto
}

.swiper-vertical .swiper-button-prev {
    top: var(--swiper-navigation-sides-offset, 4px);
    bottom: auto
}

.swiper-vertical .swiper-button-prev ::slotted(.swiper-navigation-icon) {
    transform: rotate(-90deg)
}

.swiper-vertical .swiper-button-prev .swiper-navigation-icon {
    transform: rotate(-90deg)
}

.swiper-vertical~.swiper-button-prev {
    top: var(--swiper-navigation-sides-offset, 4px);
    bottom: auto
}

.swiper-vertical~.swiper-button-prev ::slotted(.swiper-navigation-icon) {
    transform: rotate(-90deg)
}

.swiper-vertical~.swiper-button-prev .swiper-navigation-icon {
    transform: rotate(-90deg)
}

.swiper-vertical .swiper-button-next {
    bottom: var(--swiper-navigation-sides-offset, 4px);
    top: auto
}

.swiper-vertical .swiper-button-next ::slotted(.swiper-navigation-icon) {
    transform: rotate(90deg)
}

.swiper-vertical .swiper-button-next .swiper-navigation-icon {
    transform: rotate(90deg)
}

.swiper-vertical~.swiper-button-next {
    bottom: var(--swiper-navigation-sides-offset, 4px);
    top: auto
}

.swiper-vertical~.swiper-button-next ::slotted(.swiper-navigation-icon) {
    transform: rotate(90deg)
}

.swiper-vertical~.swiper-button-next .swiper-navigation-icon {
    transform: rotate(90deg)
}

.swiper-zoom-container {
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex
}

.swiper-zoom-container>img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%
}

.swiper-zoom-container>svg {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%
}

.swiper-zoom-container>canvas {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%
}

.swiper-slide-zoomed {
    cursor: move;
    touch-action: none
}

* {
    margin: 0
}

html {
    scroll-padding-top: calc(var(--header-height) + 14px);
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizelegibility
}

html.search-active {
    scroll-padding-top: 0
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    line-height: 1.5
}

img,
picture,
video,
canvas {
    max-width: 100%;
    display: block
}

svg {
    flex-shrink: 0;
    display: block
}

img,
svg {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit
}

button {
    cursor: pointer;
    background: 0 0;
    border: 0
}

a,
button {
    outline: none
}

a {
    color: inherit;
    text-decoration: none
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word
}

ul[role=list],
ol[role=list] {
    padding: 0;
    list-style: none
}

button,
a {
    outline: none
}

:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px
}

* {
    scrollbar-width: thin;
    scrollbar-color: #2a2e3a transparent
}

::-webkit-scrollbar {
    width: 11px;
    height: 11px
}

::-webkit-scrollbar-track {
    background: 0 0
}

::-webkit-scrollbar-thumb {
    border: 3px solid var(--c-bg);
    background: #272b36 padding-box padding-box;
    border-radius: 999px
}

::-webkit-scrollbar-thumb:hover {
    background: #353a48 padding-box padding-box
}

::-webkit-scrollbar-corner {
    background: 0 0
}

.scroll-area {
    scrollbar-width: thin;
    scrollbar-color: #2a2e3a transparent
}

.scroll-area::-webkit-scrollbar {
    width: 9px;
    height: 9px
}

.scroll-area::-webkit-scrollbar-thumb {
    border: 2px solid var(--c-surface-2);
    background: #272b36 padding-box padding-box;
    border-radius: 999px
}

.scroll-area::-webkit-scrollbar-thumb:hover {
    background: #353a48 padding-box padding-box
}

:root {
    --header-height: 66px;
    --c-bg: #0e131b;
    --c-surface-1: #141924;
    --c-surface-2: #191f2b;
    --c-surface-3: #1f2733;
    --c-surface-hover: #1d2531;
    --c-border: #232b38;
    --c-border-strong: #28303d;
    --c-border-subtle: #1a2029;
    --c-divider: #1a2029;
    --c-text-1: #cfd2db;
    --c-text-2: #aeb2bf;
    --c-text-3: #8a8f9e;
    --c-text-4: #6b7080;
    --c-text-5: #5a5f6e;
    --c-text-6: #4a4f5d;
    --c-accent: #10a3ea;
    --c-accent-strong: #3db8f5;
    --c-accent-soft: #10a3ea29;
    --c-accent-softer: #10a3ea1a;
    --c-on-accent: #fff;
    --c-danger: #e8736a;
    --c-danger-soft: #e8736a1f;
    --c-official: #e8c46a;
    --c-official-soft: #e8b94a24;
    --c-warning: #f0b429;
    --c-success: #5fd99a;
    --c-success-soft: #22c55e1f;
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 14px;
    --radius-pill: 999px;
    --control-sm: 30px;
    --control-md: 36px;
    --control-lg: 42px;
    --control-xl: 50px;
    --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Space Grotesk", "Geist", sans-serif;
    --font-jp: "Space Grotesk", "Geist", sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;
    --text-2xs: 10px;
    --text-xs: 11px;
    --text-sm: 12.5px;
    --text-base: 13.5px;
    --text-md: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 22px;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --shadow-xs: 0 1px 2px #0000004d;
    --shadow-sm: 0 1px 3px #0006;
    --shadow-card: 0 4px 16px -8px #00000080;
    --shadow-md: 0 8px 24px -12px #00000080;
    --shadow-pop: 0 10px 30px -14px #0000008c;
    --shadow-modal: 0 30px 80px -24px #000000b8;
    --shadow-rail: 0 10px 28px -12px #0000008c;
    --ease: .15s ease
}

*,
:before,
:after {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    padding: 0
}

body {
    background: var(--c-bg);
    color: var(--c-text-1);
    font-family: var(--font-sans)
}

[data-swiper] {
    scrollbar-width: none;
    -ms-overflow-style: none
}

[data-swiper]::-webkit-scrollbar {
    display: none
}

input::placeholder {
    color: var(--c-text-6)
}

.app-shell {
    --r: 18px;
    --pr: 14px;
    --bd: 1px solid var(--c-border-subtle);
    --cardbg: #171a22;
    --tab-r: 999px;
    --sh: 0 12px 34px -16px #000000b3;
    --grid-gap: 22px;
    --h2: 26px;
    isolation: isolate;
    min-height: 100vh;
    background-color: var(--c-bg);
    min-height: 100dvh;
    color: var(--c-text-1);
    font-family: var(--font-sans);
    flex-direction: column;
    display: flex;
    position: relative
}

.app-main {
    flex: 1 0 auto;
    min-width: 0
}

.btn {
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-lg);
    padding: 0 var(--space-4);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    color: var(--c-text-1);
    cursor: pointer;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    transition: background var(--ease), color var(--ease), border-color var(--ease), box-shadow var(--ease), transform 50ms ease;
    background: 0 0;
    border: 0;
    line-height: 1;
    display: inline-flex
}

.btn:active {
    transform: translateY(1px)
}

.btn:disabled {
    opacity: .5;
    cursor: not-allowed
}

.btn--primary {
    background: var(--c-accent);
    color: var(--c-on-accent)
}

.btn--primary:hover {
    background: var(--c-accent-strong);
    box-shadow: 0 8px 22px -10px var(--c-accent)
}

.btn--secondary {
    background: var(--c-surface-2);
    color: var(--c-text-2)
}

.btn--secondary:hover {
    background: var(--c-surface-3);
    color: var(--c-text-1)
}

.btn--ghost {
    color: var(--c-text-3);
    background: 0 0
}

.btn--ghost:hover {
    background: var(--c-surface-2);
    color: var(--c-text-1)
}

.btn--soft {
    background: var(--c-accent-soft);
    color: var(--c-accent)
}

.btn--soft:hover {
    background: #10a3ea42
}

.btn--sm {
    height: var(--control-sm);
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm)
}

.btn--md {
    height: var(--control-md);
    padding: 0 var(--space-4);
    border-radius: var(--radius-md)
}

.btn--xl {
    height: var(--control-xl);
    font-size: var(--text-lg)
}

.btn--block {
    width: 100%
}

.icon-btn {
    width: var(--control-md);
    height: var(--control-md);
    border-radius: var(--radius-md);
    background: var(--c-surface-2);
    color: var(--c-text-2);
    cursor: pointer;
    transition: background var(--ease), color var(--ease), transform 50ms ease;
    border: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.icon-btn:hover {
    color: var(--c-accent);
    background: var(--c-accent-soft)
}

.icon-btn:active {
    transform: translateY(1px)
}

.icon-btn svg {
    display: block
}

.icon-btn--bare {
    color: var(--c-text-5);
    box-shadow: none;
    background: 0 0;
    border: 0
}

.icon-btn--bare:hover {
    background: var(--c-surface-3);
    color: var(--c-accent);
    box-shadow: none
}

.icon-btn--sm {
    width: var(--control-sm);
    height: var(--control-sm);
    border-radius: var(--radius-sm)
}

.icon-btn--lg {
    width: var(--control-lg);
    height: var(--control-lg);
    border-radius: var(--radius-lg)
}

.icon-btn--xl {
    width: var(--control-xl);
    height: var(--control-xl);
    border-radius: var(--radius-lg)
}

.icon-btn--active {
    color: var(--c-accent);
    background: var(--c-accent-soft);
    box-shadow: none
}

.field {
    position: relative
}

.field__icon {
    color: var(--c-text-4);
    pointer-events: none;
    align-items: center;
    display: flex;
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%)
}

.field__hint {
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
    color: var(--c-text-5);
    background: var(--c-surface-3);
    border-radius: var(--radius-xs);
    pointer-events: none;
    padding: 3px 6px;
    position: absolute;
    top: 50%;
    right: 9px;
    transform: translateY(-50%)
}

.field__label {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: #9aa0b0;
    margin-bottom: 7px;
    display: block
}

.input {
    width: 100%;
    height: var(--control-md);
    border-radius: var(--radius-md);
    background: var(--c-surface-2);
    color: var(--c-text-1);
    padding: 0 var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    transition: background var(--ease), border-color var(--ease), box-shadow var(--ease);
    border: 0;
    outline: none
}

.input::placeholder {
    color: var(--c-text-6)
}

.input:hover {
    background: var(--c-surface-3)
}

.input:focus {
    background: var(--c-surface-2);
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft)
}

.input--lg {
    height: var(--control-lg);
    border-radius: var(--radius-lg);
    font-size: var(--text-md)
}

.input--icon {
    padding-left: 34px
}

.input--hint {
    padding-right: 56px
}

.input[type=number] {
    -webkit-appearance: textfield;
    appearance: textfield
}

.input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-xl);
    min-width: max(180px, 100%);
    max-height: 240px;
    overflow-y: auto;
    padding: var(--space-2);
    z-index: 300;
    box-shadow: var(--shadow-pop);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.site-header__inner>.dropdown__menu {
    position: fixed;
    top: calc(var(--header-height, 60px) - 6px);
    left: 16px;
    right: auto;
    width: 212px;
    min-width: 180px;
    max-height: calc(100vh - var(--header-height, 60px) - 16px);
    overflow-y: auto;
    z-index: 300;
}

.dropdown.is-open .dropdown__menu,
.is-open>.dropdown__menu,
.dropdown__menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.dropdown__label {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-text-4);
    padding: 6px 10px 8px
}

.dropdown__item {
    align-items: center;
    gap: var(--space-2);
    text-align: left;
    width: 100%;
    color: var(--c-text-2);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--fw-regular);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    background: 0 0;
    border: 0;
    padding: 7px 10px;
    display: flex
}

.dropdown__item:hover {
    background: var(--c-surface-3);
    color: var(--c-text-1)
}

.dropdown__item--active {
    background: var(--c-accent-soft);
    color: var(--c-accent)
}

.dropdown__item--danger {
    color: var(--c-danger)
}

.dropdown__item--danger:hover {
    background: var(--c-danger-soft);
    color: var(--c-danger)
}

.dropdown__divider {
    background: var(--c-divider);
    height: 1px;
    margin: 6px 4px
}

.browse-menu {
    width: 212px;
    min-width: auto;
}

.browse-menu__item {
    text-align: left;
    width: 100%;
    color: var(--c-text-3);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    display: flex
}

.browse-menu__item:hover {
    background: var(--c-surface-3);
    color: var(--c-text-1)
}

.browse-menu__icon {
    color: var(--c-text-5);
    transition: color var(--ease);
    flex: none;
    display: flex
}

.browse-menu__item:hover .browse-menu__icon {
    color: var(--c-accent)
}

.browse-menu__label {
    flex: auto
}

.select {
    align-items: center;
    gap: var(--space-2);
    height: var(--control-md);
    border-radius: var(--radius-md);
    background: var(--c-surface-2);
    color: var(--c-text-1);
    cursor: pointer;
    transition: background var(--ease);
    border: 0;
    padding: 0 13px;
    display: flex
}

.select:hover {
    background: var(--c-surface-hover)
}

.select__label {
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-text-5);
    flex-shrink: 0;
}

.select__value {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.select__caret {
    color: var(--c-text-4);
    align-items: center;
    margin-left: 2px;
    display: inline-flex;
    flex-shrink: 0;
}

.select__menu {
    min-width: 190px;
    top: 50px;
    right: 0
}

.segment {
    align-items: center;
    gap: var(--space-1);
    height: var(--control-md);
    border-radius: var(--radius-md);
    background: var(--c-surface-2);
    border: 0;
    padding: 3px;
    display: flex
}

.segment__btn {
    height: 100%;
    color: var(--c-text-3);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    background: 0 0;
    border: 0;
    border-radius: 7px;
    align-items: center;
    gap: 6px;
    padding: 0 13px;
    display: inline-flex
}

.segment__btn:hover {
    color: var(--c-text-1)
}

.segment__btn--active {
    background: var(--c-accent);
    color: var(--c-on-accent)
}

.segment__btn--active:hover {
    color: var(--c-on-accent)
}

.badge {
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #fff;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-radius: var(--radius-xs);
    background: #0b0c10a8;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    display: inline-flex
}

.badge--accent {
    background: var(--c-accent);
    color: var(--c-on-accent)
}

.badge--official {
    color: var(--c-official);
    background: var(--c-official-soft)
}

.badge--status {
    color: var(--c-success);
    background: var(--c-success-soft)
}

.badge--rating {
    color: var(--c-text-2);
    background: var(--c-surface-3)
}

.badge--rating-safe {
    color: var(--c-success);
    background: var(--c-success-soft)
}

.badge--rating-suggestive {
    color: var(--c-warning);
    background: #f0b4291f
}

.badge--rating-erotica {
    color: var(--c-danger);
    background: var(--c-danger-soft)
}

.link {
    color: var(--c-text-3);
    cursor: pointer;
    transition: color var(--ease);
    text-decoration: none
}

.link:hover {
    color: var(--c-accent)
}

.link--muted {
    color: var(--c-text-4)
}

.link--muted:hover {
    color: var(--c-text-1)
}

.nav-link {
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    color: var(--c-text-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    padding: 8px 12px;
    text-decoration: none
}

.nav-link:hover {
    background: var(--c-surface-1);
    color: var(--c-text-1)
}

.nav-link--active,
.nav-link--active:hover {
    color: var(--c-accent)
}

.nav-link--icon {
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.card {
    cursor: pointer
}

.card__poster {
    position: relative;
    overflow: hidden
}

.card__poster img {
    transition: transform .4s
}

.card:hover .card__poster img {
    transform: scale(1.06)
}

.card__title {
    transition: color var(--ease)
}

.card:hover .card__title {
    color: #fff
}

.row-hover {
    transition: background var(--ease)
}

.row-hover:hover {
    background: var(--c-surface-3)
}

@keyframes ds-pop {
    0% {
        opacity: 0;
        transform: translateY(-6px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes ds-fade {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes ds-slide-in {
    0% {
        opacity: 0;
        transform: translate(12px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes dropIn {
    0% {
        opacity: 0;
        transform: translateY(-6px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.page {
    max-width: 1200px;
    padding: 40px var(--space-6) 72px;
    margin: 0 auto
}

.home-notice {
    border-radius: var(--radius-lg);
    background: var(--c-accent-softer);
    border: 1px solid var(--c-accent-soft);
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
    padding: 13px 15px;
    display: flex
}

.home-notice__icon {
    flex: none;
    font-size: 18px;
    line-height: 1.4
}

.home-notice__lines {
    flex-direction: column;
    flex: 1;
    gap: 5px;
    min-width: 0;
    display: flex
}

.home-notice__line {
    font-size: var(--text-base);
    color: var(--c-text-2);
    margin: 0;
    line-height: 1.5
}

.home-notice__link {
    color: var(--c-accent);
    font-weight: var(--fw-semibold)
}

.home-notice__link:hover {
    text-decoration: underline
}

@media (max-width:600px) {
    .home-notice {
        gap: 9px;
        margin-bottom: 18px;
        padding: 12px 13px
    }

    .home-notice__icon {
        font-size: 16px
    }

    .home-notice__lines {
        gap: 8px
    }

    .home-notice__line {
        line-height: 1.55
    }
}

.brand {
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    flex: none;
    display: flex
}

.brand__logo {
    width: auto;
    height: 30px;
    display: block
}

.brand__mark {
    background: var(--c-accent);
    width: 36px;
    height: 36px;
    color: var(--c-bg);
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    border-radius: 9px;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    display: flex
}

.brand__name {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    letter-spacing: -.5px;
    color: var(--c-text-1);
    font-size: 19px
}

.brand--sm .brand__mark {
    width: 34px;
    height: 34px;
    font-size: 18px
}

.brand--sm .brand__name {
    font-size: 18px
}

.site-header {
    z-index: 50;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-divider);
    background: #0b0c10d1;
    position: sticky;
    top: 0
}

.site-header__inner {
    max-width: 1200px;
    padding: 0 var(--space-6);
    height: var(--header-height);
    align-items: center;
    gap: 22px;
    margin: 0 auto;
    display: flex;
    position: relative
}

.site-header__nav {
    flex: none;
    align-items: center;
    gap: 2px;
    display: flex
}

.site-header__quicknav {
    align-items: center;
    gap: var(--space-3);
    flex: none;
    display: flex
}

.site-header__search {
    flex: auto;
    justify-content: center;
    display: flex
}

.site-header__actions {
    align-items: center;
    gap: var(--space-3);
    flex: none;
    display: flex
}

.site-header__right {
    align-items: center;
    gap: var(--space-3);
    flex: none;
    margin-left: auto;
    display: flex
}

.site-header__signin {
    flex: none
}

.site-header__search-toggle,
.site-header__menu {
    flex: none;
    display: none
}

.search__close {
    display: none
}

.search {
    width: 100%;
    max-width: 480px;
    position: relative
}

.search__panel {
    display: none;
    background: var(--c-surface-2);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    z-index: 60;
    max-height: 440px;
    animation: .14s dropIn;
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    overflow-y: auto;
    box-shadow: 0 18px 44px -14px #000000bf
}

.search__panel.is-open {
    display: block;
}

.search__head {
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px 8px;
    display: flex
}

.search__title {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-text-4)
}

.search__clear {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: var(--c-accent);
    cursor: pointer
}

.search__row {
    cursor: pointer;
    transition: background var(--ease);
    border-radius: 9px;
    align-items: center;
    gap: 11px;
    padding: 7px 10px;
    display: flex
}

.search__row:hover,
.search__row--active {
    background: var(--c-surface-3)
}

.search__thumb {
    border-radius: var(--radius-xs);
    background: var(--c-border-subtle);
    flex: 0 0 34px;
    width: 34px;
    height: 48px;
    overflow: hidden
}

.search__thumb img {
    object-fit: cover;
    background: var(--c-border-subtle);
    width: 100%;
    height: 100%;
    display: block
}

.search__body {
    flex: 1;
    min-width: 0
}

.search__name {
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    color: #eef0f4;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.search__meta {
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: var(--c-text-5);
    margin-top: 2px
}

.search__remove {
    width: 24px;
    height: 24px;
    color: var(--c-text-5);
    transition: background var(--ease), color var(--ease);
    border-radius: 6px;
    flex: none;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    display: flex
}

.search__remove:hover {
    background: var(--c-border-strong);
    color: var(--c-text-1)
}

.search__viewall {
    width: 100%;
    color: var(--c-accent);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    text-align: center;
    cursor: pointer;
    transition: background var(--ease);
    background: 0 0;
    border: 0;
    border-radius: 9px;
    margin-top: 4px;
    padding: 9px 10px;
    display: block
}

.search__viewall:hover {
    background: var(--c-surface-3)
}

.search__empty {
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    color: var(--c-text-5);
    text-align: center;
    padding: 14px 10px
}

.search__empty--history {
    padding: 16px 10px 18px
}

.manga-card {
    cursor: pointer;
    min-width: 0
}

.manga-card__poster {
    aspect-ratio: 7/10;
    border-radius: var(--pr, var(--radius-lg));
    border: var(--bd, 1px solid var(--c-border-subtle));
    background: var(--c-border-subtle);
    box-shadow: var(--sh, none);
    position: relative;
    overflow: hidden
}

.manga-card__img {
    object-fit: cover;
    background: var(--c-border-subtle);
    width: 100%;
    height: 100%;
    display: block
}

.manga-card__type {
    font-family: var(--font-sans);
    font-size: 8px;
    font-weight: var(--fw-bold);
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #fff;
    border-radius: var(--radius-pill);
    background: #0b0c10d9;
    border: 1px solid #ffffff1a;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    display: inline-flex;
    position: absolute;
    top: 6px;
    left: 6px
}

.manga-card__type:before {
    content: "";
    background: #94a3b8;
    border-radius: 50%;
    flex: none;
    width: 5px;
    height: 5px
}

.manga-card__type[data-type=manga]:before {
    background: #38bdf8
}

.manga-card__type[data-type=manhwa]:before {
    background: #f59e0b
}

.manga-card__type[data-type=manhua]:before {
    background: #a855f7
}

.manga-card__read {
    font-family: var(--font-sans);
    font-size: var(--text-2xs);
    font-weight: var(--fw-bold);
    color: var(--c-bg);
    background: var(--c-accent);
    border-radius: 6px;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    display: flex;
    position: absolute;
    top: 8px;
    right: 8px
}

.manga-card__read svg {
    display: block
}

.manga-card .manga-card__ring {
    background: #08090cb8;
    border-radius: 50%;
    position: absolute;
    bottom: 6px;
    right: 6px;
    box-shadow: 0 2px 8px -2px #0009
}

.manga-card__ring .reading-ring__pct {
    color: #fff;
    font-size: 9px
}

.manga-card__foot {
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: var(--c-text-5);
    margin-top: 9px;
    display: flex
}

.manga-card__ch {
    font-weight: var(--fw-bold);
    color: var(--c-text-4);
    align-items: center;
    gap: 4px;
    display: inline-flex
}

.manga-card__title {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--text-md);
    color: var(--c-text-1);
    -webkit-line-clamp: 2;
    min-height: 2.6em;
    transition: color var(--ease);
    -webkit-box-orient: vertical;
    margin-top: 4px;
    line-height: 1.3;
    display: -webkit-box;
    overflow: hidden
}

.manga-card:hover .manga-card__title {
    color: var(--c-text-1)
}

.manga-card:hover .manga-card__img {
    transform: scale(1.06)
}

.manga-card__img {
    transition: transform .4s
}

.follow-btn {
    z-index: 3;
    position: absolute;
    top: 8px;
    right: 8px
}

.manga-card__remove {
    z-index: 3;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    width: 26px;
    height: 26px;
    color: var(--c-text-2);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--ease), transform var(--ease), background var(--ease), color var(--ease);
    background: #0b0c10b3;
    border: 0;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 8px;
    right: 8px;
    transform: translateY(-4px)
}

.manga-card:hover .manga-card__remove {
    opacity: 1;
    transform: none
}

.manga-card__remove:focus-visible {
    opacity: 1;
    transform: none
}

.manga-card__remove:hover {
    background: var(--c-danger);
    color: #fff
}

.follow-btn__toggle {
    border-radius: var(--radius-sm);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    width: 30px;
    height: 30px;
    transition: opacity var(--ease), transform var(--ease), background var(--ease), color var(--ease);
    background: #0b0c10a8;
    border: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    transform: translateY(-4px)
}

.manga-card:hover .follow-btn__toggle,
.bookmark-card:hover .follow-btn__toggle,
.title-row-card:hover .follow-btn__toggle {
    opacity: 1;
    transform: translateY(0)
}

.follow-btn__toggle:focus-visible {
    opacity: 1;
    transform: translateY(0)
}

.follow-btn__toggle:hover {
    background: #0b0c10eb
}

.follow-btn__toggle--on {
    background: var(--c-accent);
    color: var(--c-on-accent)
}

.follow-btn__toggle--on:hover {
    background: var(--c-accent-strong)
}

.follow-btn__icon--filled {
    fill: currentColor
}

.follow-btn--label {
    position: static
}

.follow-btn__chip {
    border-radius: var(--radius-sm);
    background: var(--c-surface-2);
    color: var(--c-text-3);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    align-items: center;
    gap: 6px;
    max-width: 220px;
    padding: 6px 11px;
    display: inline-flex
}

.follow-btn__chip:hover {
    color: var(--c-text-1);
    background: var(--c-surface-3)
}

.follow-btn__chip-label {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.follow-btn__chip svg {
    flex: none
}

.follow-btn__chip svg:first-child {
    color: var(--c-accent)
}

.follow-btn__menu {
    z-index: 300;
    min-width: 188px;
    max-height: 400px;
    overflow-y: auto
}

.follow-btn__item-label {
    flex: 1;
    align-items: center;
    gap: 9px;
    min-width: 0;
    display: flex
}

.follow-btn__item-label svg {
    flex: none
}

.follow-btn__name {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    overflow: hidden
}

.follow-btn__check {
    width: 16px;
    color: var(--c-accent);
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

@media (hover:none) {

    .follow-btn__toggle,
    .manga-card__remove {
        opacity: 1;
        transform: none
    }
}

.poster-skeleton {
    aspect-ratio: 7/10;
    border-radius: var(--pr, var(--radius-lg));
    background: var(--c-border-subtle)
}

.card-skeleton {
    flex-direction: column;
    display: flex
}

.card-skeleton__foot {
    min-height: 1.5em;
    line-height: 1.5;
    font-size: var(--text-xs);
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    margin-top: 9px;
    display: flex
}

.card-skeleton__title {
    font-size: var(--text-md);
    min-height: 2.6em;
    margin-top: 4px;
    line-height: 1.3
}

.card-skeleton--row {
    flex-direction: row;
    height: 140px;
    padding: 10px;
    background: var(--c-surface-1);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-xl);
    gap: 14px
}

.card-skeleton--row .poster-skeleton {
    width: 86px;
    height: 100%;
    aspect-ratio: auto;
    border-radius: var(--radius-md);
    flex: none
}

.card-skeleton__body {
    flex: auto;
    display: flex;
    flex-direction: column;
    padding: 4px 6px 4px 0
}

.skeleton-line {
    background: var(--c-border-subtle);
    border-radius: 6px;
    height: 11px;
    display: block
}

.home-section {
    margin-bottom: 60px
}

.home-section__head {
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
    display: flex
}

.home-section__heading-group {
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    display: flex
}

.home-section__title {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--h2, 30px);
    letter-spacing: -.6px;
    color: var(--c-text-1);
    line-height: 1.12
}

.home-section__eyebrow {
    font-family: var(--font-jp);
    font-size: var(--text-sm);
    color: var(--c-text-5);
    letter-spacing: 2px;
    margin-top: 7px
}

.home-section__controls {
    align-items: center;
    gap: var(--space-3);
    display: flex
}

.home-section__action {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-text-4);
    cursor: pointer
}

.home-section__arrows {
    gap: 6px;
    display: flex
}

.home-section__track {
    padding: 4px 2px 10px
}

.home-section__track .swiper-wrapper {
    align-items: stretch
}

.home-section__item.swiper-slide {
    width: calc(16.6667% - 13.3333px);
    min-width: 0;
    height: auto;
    margin-right: 16px;
}

.home-section__item.swiper-slide:last-child {
    margin-right: 0;
}

.home-section__item.swiper-slide>.home-section__item,
.home-section__item.swiper-slide>.title-grid__link {
    width: 100%
}

@media (max-width:1100px) {
    .home-section__item.swiper-slide {
        width: calc(20% - 12.8px)
    }
}

@media (max-width:860px) {
    .home-section__item.swiper-slide {
        width: calc(25% - 12px)
    }
}

@media (max-width:640px) {
    .home-section__item.swiper-slide {
        width: calc(33.3333% - 10.6667px)
    }
}

@media (max-width:460px) {
    .home-section__item.swiper-slide {
        width: calc(50% - 8px)
    }
}

.latest__head {
    margin-bottom: 22px
}

.latest__filters {
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    display: flex
}

.latest__title {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--h2, 28px);
    letter-spacing: -.6px;
    color: var(--c-text-1);
    line-height: 1
}

.title-grid {
    gap: var(--grid-gap, 22px);
    transition: opacity var(--ease);
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    display: grid
}

.title-grid.is-fetching {
    opacity: .5;
    pointer-events: none
}

.title-grid__link {
    color: inherit;
    text-decoration: none;
    display: block
}

.load-more {
    justify-content: center;
    gap: 12px;
    margin-top: 36px;
    display: flex
}

.load-more--tight {
    margin-top: 28px
}

.site-footer {
    border-top: 1px solid var(--c-divider);
    font-family: var(--font-sans);
    background: #0c0d12
}

.site-footer__inner {
    max-width: 1200px;
    padding: 34px var(--space-6);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    margin: 0 auto;
    display: flex
}

.site-footer__brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    display: flex
}

.site-footer__brand .brand__logo {
    flex: none;
    width: auto;
    height: 26px
}

.site-footer__slogan {
    font-size: var(--text-base);
    color: var(--c-text-5);
    max-width: 400px;
    margin: 0;
    line-height: 1.6
}

.site-footer__meta {
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    display: flex
}

.site-footer__nav {
    align-items: center;
    gap: 8px;
    display: flex
}

.site-footer__link {
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    color: var(--c-text-3);
    border-radius: var(--radius-pill);
    background: var(--c-surface-2);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    border: 0;
    padding: 8px 14px;
    line-height: 1;
    text-decoration: none
}

.site-footer__link:hover {
    background: var(--c-surface-3);
    color: var(--c-text-1)
}

.site-footer__copy {
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--c-text-6)
}

.user-id {
    cursor: pointer;
    background: 0 0;
    border: 0;
    flex: none;
    align-items: center;
    gap: 9px;
    padding: 0;
    display: flex
}

.user-id__avatar {
    background: linear-gradient(135deg, var(--c-accent), var(--c-accent-strong));
    width: 36px;
    height: 36px;
    color: var(--c-bg);
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    display: flex
}

.user-id__text {
    text-align: left;
    line-height: 1.15
}

.user-id__name {
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    color: var(--c-text-1);
    display: block
}

.user-id__role {
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: var(--c-accent);
    display: block
}

.user-menu {
    flex: none;
    position: relative;
    display: flex;
    align-items: center;
}

.user-menu .dropdown {
    display: flex;
    align-items: center;
}

.user-menu__pop {
    z-index: 60;
    width: 220px;
    animation: .14s dropIn;
    box-shadow: 0 18px 44px -14px #000000bf;
    max-height: none !important;
    overflow: visible !important
}

.user-menu__profile {
    align-items: center;
    gap: 11px;
    padding: 8px 10px 12px;
    display: flex
}

.user-menu__avatar {
    background: linear-gradient(135deg, var(--c-accent), var(--c-accent-strong));
    width: 40px;
    height: 40px;
    color: var(--c-bg);
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    border-radius: 50%;
    flex: 0 0 40px;
    justify-content: center;
    align-items: center;
    font-size: 17px;
    display: flex
}

.user-menu__profile-text {
    min-width: 0
}

.user-menu__profile-name {
    font-size: var(--text-md);
    font-weight: var(--fw-bold);
    color: var(--c-text-1);
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden
}

.user-menu__profile-email {
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--c-text-5);
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden
}

.user-menu__item {
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    display: flex
}

.notif-bell {
    flex: none;
    position: relative;
    display: flex;
    align-items: center;
}

.notif-bell .dropdown {
    display: flex;
    align-items: center;
}

.notif-bell__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notif-bell__dot {
    background: var(--c-warning);
    border: 2px solid var(--c-bg);
    border-radius: 50%;
    width: 8px;
    height: 8px;
    position: absolute;
    top: 7px;
    right: 7px;
}

.notif {
    z-index: 60;
    width: 360px;
    max-height: 460px;
    animation: .14s dropIn;
    overflow-y: auto;
    box-shadow: 0 18px 44px -14px #000000bf
}

.notif__head {
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px 10px;
    display: flex
}

.notif__title {
    font-size: var(--text-md);
    font-weight: var(--fw-bold);
    color: var(--c-text-1);
    line-height: 1.2;
}

.notif__mark {
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-accent);
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 5px;
    padding: 2px 4px;
    display: flex
}

.notif__mark svg {
    flex-shrink: 0;
}

.notif__mark:disabled {
    cursor: default;
    color: var(--c-text-5)
}

.notif__state {
    padding: 20px var(--space-3);
    text-align: center;
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    color: var(--c-text-5)
}

.notif__state--empty {
    padding: 26px var(--space-3)
}

.notif__item {
    text-align: left;
    cursor: pointer;
    width: 100%;
    transition: background var(--ease);
    background: 0 0;
    border: 0;
    border-radius: 9px;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 10px;
    display: flex
}

.notif__item:hover {
    background: var(--c-surface-3)
}

.notif__viewall {
    border-radius: var(--radius-md);
    background: var(--c-surface-3);
    width: 100%;
    color: var(--c-accent);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background var(--ease);
    border: 0;
    margin-top: 6px;
    padding: 11px;
    display: block
}

.notif__viewall:hover {
    background: var(--c-accent-soft)
}

.notifications-tab__filter {
    margin-bottom: 16px
}

.notifications-tab__filter .segment {
    border: 0
}

.notif__thumb {
    background: var(--c-border-subtle);
    border-radius: 6px;
    flex: 0 0 40px;
    width: 40px;
    height: 56px;
    overflow: hidden
}

.notif__thumb img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.notif__body {
    flex: 1;
    min-width: 0
}

.notif__content {
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    color: var(--c-text-2);
    line-height: 1.35;
    display: block
}

.notif__content b {
    font-weight: var(--fw-semibold)
}

.notif__time {
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: var(--c-text-5);
    margin-top: 3px;
    display: block
}

.notif__unread-dot {
    background: var(--c-accent);
    border-radius: 50%;
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: 6px
}

.user-page__header {
    margin-bottom: 28px
}

.user-page__eyebrow {
    font-family: var(--font-jp);
    font-size: var(--text-sm);
    color: var(--c-text-5);
    letter-spacing: 2px;
    margin-bottom: 7px
}

.user-page__title {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--h2, 30px);
    letter-spacing: -.6px;
    color: var(--c-text-1);
    margin: 0;
    line-height: 1
}

.user-page__empty {
    text-align: center;
    font-size: var(--text-md);
    font-weight: var(--fw-medium);
    color: var(--c-text-5);
    padding: 60px 0
}

.user-page__toolbar {
    margin-bottom: var(--space-4);
    justify-content: flex-end;
    display: flex
}

.user-page__list {
    gap: var(--space-2);
    transition: opacity var(--ease);
    flex-direction: column;
    display: flex
}

.user-page__list.is-fetching {
    opacity: .5;
    pointer-events: none
}

.notif-row {
    align-items: flex-start;
    gap: var(--space-4);
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-lg);
    background: var(--c-surface-1);
    width: 100%;
    transition: background var(--ease);
    padding: 13px 15px;
    display: flex
}

.notif-row:hover {
    background: var(--c-surface-2)
}

.notif-row--unread {
    background: var(--c-accent-softer)
}

.notif-row--unread:hover {
    background: var(--c-accent-soft)
}

.notif-row__thumb {
    background: var(--c-border-subtle);
    border-radius: 6px;
    flex: 0 0 38px;
    width: 38px;
    height: 54px;
    overflow: hidden
}

.notif-row__thumb img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.notif-row__body {
    flex: 1;
    min-width: 0
}

.notif-row__content {
    font-size: var(--text-md);
    font-weight: var(--fw-medium);
    color: var(--c-text-1);
    line-height: 1.4;
    display: block
}

.notif-row__time {
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--c-text-5);
    margin-top: 5px;
    display: block
}

.notif-row__unread-dot {
    background: var(--c-accent);
    border-radius: 50%;
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 7px
}

.modal {
    z-index: 200;
    padding: var(--space-5);
    justify-content: center;
    align-items: center;
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.modal.is-open {
    display: flex;
}

.modal__backdrop {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: #050609a8;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.modal__card {
    background: var(--c-surface-1);
    border-radius: 18px;
    width: 100%;
    max-width: 400px;
    padding: 28px 26px 22px;
    animation: .18s ease-out modal-in;
    position: relative;
    box-shadow: 0 24px 70px -20px #000c
}

.modal__close {
    border-radius: var(--radius-sm);
    width: 30px;
    height: 30px;
    color: var(--c-text-4);
    cursor: pointer;
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    line-height: 1;
    display: flex;
    position: absolute;
    top: 14px;
    right: 14px
}

.modal__title {
    font-size: var(--text-2xl);
    font-weight: var(--fw-bold);
    color: var(--c-text-1);
    margin: 0
}

.modal__subtitle {
    font-size: var(--text-base);
    font-weight: var(--fw-regular);
    color: var(--c-text-4);
    margin: 6px 0 18px
}

.modal__form {
    gap: var(--space-4);
    flex-direction: column;
    display: flex
}

.modal__submit {
    height: 44px;
    margin-top: 4px
}

.modal__foot {
    margin-top: var(--space-4);
    text-align: center
}

.modal__foot-text {
    font-size: var(--text-base);
    font-weight: var(--fw-regular);
    color: var(--c-text-4);
    margin: 0
}

.modal__alert {
    border-radius: var(--radius-md);
    color: #e7989a;
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    background: #d4474a1f;
    border: 1px solid #d4474a66;
    padding: 10px 12px
}

.modal-field {
    gap: var(--space-2);
    flex-direction: column;
    display: flex
}

.modal-field__label-row {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-text-3);
    justify-content: space-between;
    align-items: center;
    display: flex
}

.modal-field__input {
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border-strong);
    background: var(--c-surface-2);
    height: 42px;
    color: var(--c-text-1);
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    outline: none;
    padding: 0 13px
}

.modal-field__input--invalid {
    border-color: #d4474a
}

.modal-field__error {
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: #e06a6d
}

.modal-captcha {
    min-height: 65px;
    width: 100%;
    margin: 6px 0;
}

.modal-captcha .cf-turnstile {
    width: 100%;
    min-height: 65px;
}

.auth-link {
    color: var(--c-accent);
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0
}

.auth-link--sub {
    font-size: var(--text-sm);
    font-weight: var(--fw-medium)
}

.user-dashboard {
    min-width: 0
}

.user-dashboard__loading {
    text-align: center;
    font-size: var(--text-md);
    font-weight: var(--fw-medium);
    color: var(--c-text-5);
    padding: 60px 0
}

.profile-banner {
    background: var(--c-surface-1);
    position: relative
}

.profile-banner__inner {
    max-width: 1200px;
    padding: 34px var(--space-6);
    align-items: center;
    gap: 22px;
    margin: 0 auto;
    display: flex
}

.profile-banner__avatar-wrap {
    flex: none;
    position: relative
}

.profile-banner__avatar {
    background: linear-gradient(135deg, var(--c-accent), var(--c-accent-strong));
    width: 84px;
    height: 84px;
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    color: var(--c-bg);
    border: 3px solid var(--c-surface-2);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-size: 34px;
    display: flex
}

.profile-banner__status {
    background: var(--c-success);
    border: 3px solid var(--c-surface-1);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    position: absolute;
    bottom: 2px;
    right: 2px
}

.profile-banner__identity {
    flex: auto;
    min-width: 0
}

.profile-banner__name-row {
    align-items: center;
    gap: 10px;
    display: flex
}

.profile-banner__name {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    letter-spacing: -.5px;
    color: var(--c-text-1);
    font-size: 26px
}

.profile-banner__premium {
    font-size: var(--text-2xs)
}

.profile-banner__meta {
    font-size: var(--text-base);
    color: var(--c-text-4);
    margin-top: 5px
}

.profile-banner__stats {
    flex: none;
    gap: 24px;
    display: flex
}

.profile-banner__stat {
    text-align: center
}

.profile-banner__stat-value {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    color: var(--c-text-1);
    font-size: 22px
}

.profile-banner__stat-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--c-text-5);
    margin-top: 2px
}

.user-dashboard__body {
    max-width: 1200px;
    padding: 28px var(--space-6) 72px;
    grid-template-columns: 236px 1fr;
    align-items: start;
    gap: 32px;
    margin: 0 auto;
    display: grid
}

.user-dashboard__sidebar {
    flex-direction: column;
    gap: 3px;
    display: flex
}

.user-dashboard__navselect {
    display: none;
    width: 100%;
}

.user-dashboard__navselect .dropdown {
    width: 100%;
    display: block;
}

.user-navselect__trigger {
    border-radius: var(--radius-md);
    background: var(--c-surface-2);
    width: 100%;
    height: 44px;
    color: var(--c-text-1);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    border: 0;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    display: flex
}

.user-navselect__label {
    text-align: left;
    flex: 1
}

.user-navselect__menu {
    width: 100%;
    min-width: 100%;
}

.user-navselect__menu .dropdown__item {
    gap: 10px
}

.user-dashboard__divider {
    background: var(--c-border-subtle);
    height: 1px;
    margin: 8px 4px
}

.user-dashboard__content {
    min-width: 0
}

.user-nav-item {
    text-align: left;
    width: 100%;
    color: var(--c-text-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: var(--fw-semibold);
    transition: background var(--ease), color var(--ease);
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    text-decoration: none;
    display: flex;
    position: relative
}

.user-nav-item:hover {
    background: var(--c-surface-2);
    color: var(--c-text-1)
}

.user-nav-item--active {
    background: var(--c-accent-soft);
    color: var(--c-accent)
}

.user-nav-item--active:before {
    content: "";
    background: var(--c-accent);
    border-radius: 0 2px 2px 0;
    width: 3px;
    height: 18px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%)
}

.user-nav-item--danger {
    color: var(--c-danger)
}

.user-nav-item--danger:hover {
    background: var(--c-danger-soft);
    color: var(--c-danger)
}

.user-nav-item__icon {
    flex: none;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    display: flex
}

.user-nav-item__label {
    flex: 1
}

.user-nav-item__badge {
    border-radius: var(--radius-pill);
    background: var(--c-accent);
    min-width: 20px;
    height: 20px;
    color: var(--c-on-accent);
    font-size: var(--text-2xs);
    font-weight: var(--fw-bold);
    flex: none;
    justify-content: center;
    align-items: center;
    padding: 0 6px;
    display: flex
}

.user-section__head {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
    display: flex
}

.user-section__title {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--text-2xl);
    letter-spacing: -.4px;
    color: var(--c-text-1)
}

.user-section__subtitle {
    font-size: var(--text-base);
    color: var(--c-text-5);
    margin-top: 4px
}

.profile-tab {
    flex-direction: column;
    gap: 20px;
    display: flex
}

.profile-card {
    background: var(--c-surface-1);
    border-radius: var(--radius-xl);
    padding: 24px
}

.profile-card__title {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--text-xl);
    color: var(--c-text-1);
    margin-bottom: 4px
}

.profile-card__section-title {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--text-lg);
    color: var(--c-text-1);
    margin-bottom: 4px
}

.profile-card__divider {
    background: var(--c-divider);
    height: 1px;
    margin: 24px 0
}

.profile-card__subtitle {
    font-size: var(--text-base);
    color: var(--c-text-5);
    margin-bottom: 22px
}

.profile-card__avatar-row {
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    display: flex
}

.profile-card__avatar {
    background: linear-gradient(135deg, var(--c-accent), var(--c-accent-strong));
    width: 64px;
    height: 64px;
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    color: var(--c-bg);
    border-radius: 50%;
    flex: none;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    display: flex
}

.profile-form-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    display: grid
}

.profile-form-grid__full {
    grid-column: 1/-1
}

.profile-form-grid__half {
    max-width: calc(50% - 8px)
}

.profile-form__textarea {
    resize: vertical;
    height: auto;
    min-height: 92px;
    padding: 12px 14px;
    line-height: 1.6
}

.profile-card__actions {
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    display: flex
}

.profile-card__status {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-success)
}

.field__error {
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--c-danger);
    margin-top: 6px
}

.toggle-switch {
    border-radius: var(--radius-pill);
    cursor: pointer;
    background: var(--c-border-strong);
    width: 38px;
    height: 22px;
    transition: background var(--ease);
    border: 0;
    flex: none;
    padding: 0;
    position: relative
}

.toggle-switch--on {
    background: var(--c-accent)
}

.toggle-switch:disabled {
    opacity: .6;
    cursor: default
}

.toggle-switch__knob {
    width: 16px;
    height: 16px;
    transition: transform var(--ease);
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px
}

.toggle-switch--on .toggle-switch__knob {
    transform: translate(16px)
}

.settings-tab {
    flex-direction: column;
    gap: 20px;
    display: flex
}

.settings-card {
    background: var(--c-surface-1);
    border-radius: var(--radius-xl);
    padding: 22px
}

.settings-card__title {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--text-lg);
    color: var(--c-text-1)
}

.settings-card__subtitle {
    font-size: var(--text-base);
    color: var(--c-text-5);
    margin-top: 4px;
    margin-bottom: 8px
}

.settings-card .field {
    margin-top: 18px
}

.settings-row {
    border-top: 1px solid var(--c-divider);
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    display: flex
}

.settings-row__label {
    align-items: center;
    gap: 11px;
    display: flex
}

.settings-row__icon {
    border-radius: var(--radius-sm);
    background: var(--c-accent-soft);
    width: 30px;
    height: 30px;
    color: var(--c-accent);
    flex: none;
    justify-content: center;
    align-items: center;
    display: flex
}

.settings-row__icon--flag {
    background: var(--c-surface-2);
    font-size: 16px;
    line-height: 1
}

.settings-langs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
    display: grid
}

.settings-lang {
    border-radius: var(--radius-md);
    background: var(--c-surface-2);
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 8px 10px;
    display: flex
}

.settings-lang .settings-row__icon--flag {
    background: var(--c-surface-3)
}

.settings-lang__name {
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-text-2);
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    overflow: hidden
}

@media (max-width:760px) {
    .settings-langs {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width:440px) {
    .settings-langs {
        grid-template-columns: 1fr
    }
}

.settings-row__name {
    font-size: var(--text-md);
    font-weight: var(--fw-semibold);
    color: var(--c-text-2)
}

.folder-tabs {
    background: var(--c-surface-2);
    border-radius: var(--radius-md);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    align-items: center;
    gap: 2px;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    padding: 3px;
    display: flex;
    overflow-x: auto
}

.folder-tabs::-webkit-scrollbar {
    display: none
}

.folder-tabs.is-dragging {
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none
}

.folder-tabs.is-dragging .folder-tab {
    pointer-events: none
}

.folder-tab {
    white-space: nowrap;
    height: 30px;
    color: var(--c-text-4);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    transition: background var(--ease), color var(--ease);
    background: 0 0;
    border: 0;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    display: flex
}

.folder-tab:hover {
    color: var(--c-text-1)
}

.folder-tab--active {
    background: var(--c-accent-soft);
    color: var(--c-accent)
}

.folder-tab:has(.folder-tab__label) {
    gap: 4px;
    padding: 0 6px 0 14px
}

.folder-tab__label {
    color: inherit;
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 8px 0
}

.folder-tab__actions {
    align-items: center;
    gap: 2px;
    display: flex
}

.folder-tab__action {
    border-radius: var(--radius-sm);
    width: 22px;
    height: 22px;
    color: inherit;
    cursor: pointer;
    opacity: .65;
    transition: background var(--ease), opacity var(--ease), color var(--ease);
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    display: flex
}

.folder-tab__action:hover {
    opacity: 1;
    background: var(--c-surface-3)
}

.folder-tab--active .folder-tab__action:hover {
    background: #ffffff2e
}

.folder-tab__action--danger:hover {
    color: var(--c-danger)
}

.folder-tab--active .folder-tab__action--danger:hover {
    color: #fff;
    background: var(--c-danger)
}

.modal__card--narrow {
    max-width: 380px
}

.bookmarks-grid {
    transition: opacity var(--ease);
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 18px;
    display: grid
}

.bookmarks-grid.is-fetching {
    opacity: .5;
    pointer-events: none
}

.bookmark-card {
    min-width: 0;
    position: relative
}

.bookmark-card__link {
    color: inherit;
    text-decoration: none;
    display: block
}

.bookmark-card__poster {
    aspect-ratio: 7/10;
    border-radius: var(--radius-xs);
    background: var(--c-border-subtle);
    position: relative;
    overflow: hidden
}

.bookmark-card__img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform .4s;
    display: block
}

.bookmark-card:hover .bookmark-card__img {
    transform: scale(1.06)
}

.bookmark-card__ago {
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: var(--c-text-5)
}

.bookmark-card__follow {
    z-index: 2;
    position: absolute;
    top: 6px;
    right: 6px
}

.bookmark-card__title {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--text-md);
    color: var(--c-text-1);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 4px;
    line-height: 1.3;
    display: -webkit-box;
    overflow: hidden
}

.bookmark-card__meta {
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    display: flex
}

.bookmark-card__progress {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: var(--c-text-3);
    align-items: center;
    gap: 4px;
    display: inline-flex
}

.bookmark-card__progress svg {
    color: var(--c-accent);
    flex: none
}

.bookmarks-tab__actions {
    align-items: center;
    gap: 8px;
    display: flex
}

.view-toggle {
    background: var(--c-surface-2);
    border-radius: var(--radius-md);
    align-items: center;
    gap: 2px;
    padding: 3px;
    display: inline-flex
}

.view-toggle__btn {
    border-radius: var(--radius-sm);
    width: 30px;
    height: 28px;
    color: var(--c-text-4);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    display: flex
}

.view-toggle__btn:hover {
    color: var(--c-text-1)
}

.view-toggle__btn--active {
    background: var(--c-accent-soft);
    color: var(--c-accent)
}

.bookmarks-tab {
    flex-direction: column;
    gap: 18px;
    display: flex
}

.bookmarks-tab>* {
    margin-bottom: 0
}

.bookmarks-tab>.pagination {
    margin-top: 0
}

.bookmarks-bar {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 4px 0 8px;
    display: flex
}

.quick-sort {
    background: var(--c-surface-2);
    border-radius: var(--radius-md);
    scrollbar-width: none;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 3px;
    display: flex;
    overflow-x: auto
}

.quick-sort::-webkit-scrollbar {
    display: none
}

.quick-sort__btn {
    border-radius: var(--radius-sm);
    height: 28px;
    color: var(--c-text-4);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    background: 0 0;
    border: 0;
    flex: none;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    display: inline-flex
}

.quick-sort__btn:hover {
    color: var(--c-text-1)
}

.quick-sort__btn--active {
    background: var(--c-accent-soft);
    color: var(--c-accent)
}

.bookmarks-list {
    transition: opacity var(--ease);
    flex-direction: column;
    gap: 12px;
    display: flex
}

.bookmarks-list.is-fetching {
    opacity: .5;
    pointer-events: none
}

.bookmark-row {
    background: var(--c-surface-1);
    border-radius: var(--radius-lg);
    min-width: 0;
    transition: background var(--ease);
    align-items: center;
    gap: 14px;
    padding: 12px;
    display: flex;
    position: relative
}

.bookmark-row:hover {
    background: var(--c-surface-2)
}

.bookmark-row__poster {
    aspect-ratio: 7/10;
    border-radius: var(--radius-sm);
    background: var(--c-border-subtle);
    flex: none;
    width: 46px;
    overflow: hidden
}

.bookmark-row__img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.bookmark-row__detail {
    flex-direction: column;
    flex: 1;
    gap: 4px;
    min-width: 0;
    display: flex
}

.bookmark-row__follow {
    flex: none;
    margin-left: auto
}

.bookmark-row__title {
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--text-md);
    color: var(--c-text-1);
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.3;
    text-decoration: none;
    overflow: hidden
}

.bookmark-row__title:hover {
    color: var(--c-accent)
}

.bookmark-row__meta {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    display: flex
}

.bookmark-row__meta>*+:before {
    content: "·";
    color: var(--c-text-6);
    margin-right: 8px
}

.bookmark-row--skeleton {
    pointer-events: none
}

.bookmark-row__poster-skeleton {
    aspect-ratio: 7/10;
    border-radius: var(--radius-xs);
    background: var(--c-border-subtle);
    flex: none;
    width: 52px
}

.bookmark-row__detail-skeleton {
    border-radius: var(--radius-xs);
    background: var(--c-border-subtle);
    flex: 1;
    height: 20px
}

.folder-manager__create {
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    display: flex
}

.folder-manager__create .modal-field__input {
    height: var(--control-md);
    flex: 1
}

.folder-manager__create .btn {
    height: var(--control-md);
    flex: none
}

.folder-manager__list {
    flex-direction: column;
    gap: 6px;
    max-height: 340px;
    display: flex;
    overflow-y: auto
}

.folder-manager__row {
    align-items: center;
    gap: 8px;
    display: flex
}

.folder-manager__row .modal-field__input {
    flex: 1
}

.folder-manager__name {
    min-width: 0;
    font-weight: var(--fw-semibold);
    color: var(--c-text-2);
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    overflow: hidden
}

.folder-manager__btn {
    border-radius: var(--radius-sm);
    background: var(--c-surface-2);
    width: 30px;
    height: 30px;
    color: var(--c-text-4);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    border: 0;
    flex: none;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    line-height: 1;
    display: inline-flex
}

.folder-manager__btn:hover:not(:disabled) {
    background: var(--c-surface-3);
    color: var(--c-text-1)
}

.folder-manager__btn:disabled {
    opacity: .5;
    cursor: not-allowed
}

.folder-manager__btn--danger:hover:not(:disabled) {
    color: var(--c-danger);
    background: var(--c-danger-soft)
}

.folder-manager__btn--accent {
    color: var(--c-accent)
}

.folder-manager__empty {
    font-size: var(--text-sm);
    color: var(--c-text-5);
    padding: 10px 0
}

.folder-manager__row .modal-field__input {
    height: 32px
}

.pagination {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    display: flex
}

.npager {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 24px;
    display: flex
}

.npager__num,
.npager__nav {
    background: var(--c-surface-2);
    min-width: 36px;
    height: 36px;
    color: var(--c-text-2);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    display: inline-flex
}

.npager__num:hover,
.npager__nav:hover:not(:disabled) {
    background: var(--c-surface-3);
    color: var(--c-text-1)
}

.npager__num.is-active,
.npager__num.is-active:hover {
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-weight: var(--fw-semibold)
}

.npager__nav:disabled {
    color: var(--c-text-5);
    cursor: not-allowed;
    background: 0 0
}

.reading-list {
    transition: opacity var(--ease);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    display: grid
}

@media (max-width:600px) {
    .reading-list {
        grid-template-columns: 1fr
    }
}

.reading-list.is-fetching {
    opacity: .5;
    pointer-events: none
}

.reading-row {
    background: var(--c-surface-1);
    border-radius: var(--radius-lg);
    color: inherit;
    transition: background var(--ease);
    align-items: flex-start;
    gap: 14px;
    padding: 12px;
    display: flex;
    position: relative
}

.reading-row:hover {
    background: var(--c-surface-2)
}

.reading-row--skeleton {
    height: 78px
}

.reading-row__thumb {
    aspect-ratio: 7/10;
    border-radius: var(--radius-sm);
    background: var(--c-border-subtle);
    flex: 0 0 46px;
    width: 46px;
    display: block;
    overflow: hidden
}

.reading-row__thumb img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.reading-row__info {
    flex-direction: column;
    flex: auto;
    justify-content: center;
    align-self: center;
    gap: 4px;
    min-width: 0;
    display: flex
}

.reading-row__title {
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--text-md);
    color: var(--c-text-1);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
    text-decoration: none;
    display: -webkit-box;
    overflow: hidden
}

.reading-row__title:hover {
    color: var(--c-accent)
}

.reading-row__meta {
    font-size: var(--text-sm);
    color: var(--c-text-5);
    align-items: center;
    gap: 5px;
    display: inline-flex
}

.reading-row__chapter {
    color: var(--c-text-3);
    font-weight: var(--fw-semibold);
    transition: color var(--ease);
    text-decoration: none
}

.reading-row__chapter:hover {
    color: var(--c-accent)
}

.reading-ring {
    flex: none;
    align-self: center;
    width: 36px;
    height: 36px;
    text-decoration: none;
    position: relative
}

.reading-ring__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg)
}

.reading-ring__bg {
    fill: none;
    stroke: var(--c-border-strong);
    stroke-width: 3px
}

.reading-ring__fg {
    fill: none;
    stroke: var(--c-accent);
    stroke-width: 3px;
    stroke-linecap: round;
    transition: stroke-dasharray var(--ease)
}

.reading-ring__pct {
    font-size: 10px;
    font-weight: var(--fw-bold);
    color: var(--c-text-2);
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.reading-row__remove {
    z-index: 1;
    width: 24px;
    height: 24px;
    color: var(--c-text-6);
    cursor: pointer;
    transition: background var(--ease), color var(--ease), opacity var(--ease);
    background: 0 0;
    border: 0;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 6px;
    right: 6px
}

.reading-row__remove:hover {
    background: var(--c-surface-3);
    color: var(--c-danger)
}

@media (hover:hover) {
    .reading-row__remove {
        opacity: 0
    }

    .reading-row:hover .reading-row__remove {
        opacity: 1
    }
}

.import-export-tab {
    flex-direction: column;
    gap: 28px;
    display: flex
}

.settings-card__actions {
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    display: flex
}

.import-export-choices {
    flex-wrap: wrap;
    gap: 8px;
    display: flex
}

.import-export-choice {
    border-radius: var(--radius-sm);
    background: var(--c-surface-2);
    color: var(--c-text-3);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    align-items: center;
    padding: 8px 15px;
    display: inline-flex;
    position: relative
}

.import-export-choice input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute
}

.import-export-choice:hover {
    background: var(--c-surface-3);
    color: var(--c-text-1)
}

.import-export-choice.is-active {
    background: var(--c-accent-soft);
    color: var(--c-accent)
}

.import-export-drop {
    border: 1px dashed var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-surface-1);
    cursor: pointer;
    transition: border-color var(--ease), background var(--ease);
    padding: 18px;
    display: block;
    position: relative
}

.import-export-drop:hover {
    border-color: var(--c-accent)
}

.import-export-drop.has-file {
    background: var(--c-surface-2);
    border-style: solid
}

.import-export-drop input[type=file] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute
}

.import-export-drop__body {
    color: var(--c-text-3);
    align-items: center;
    gap: 12px;
    display: flex
}

.import-export-drop__text {
    flex-direction: column;
    min-width: 0;
    display: flex
}

.import-export-drop__text strong {
    font-size: var(--text-md);
    font-weight: var(--fw-semibold);
    color: var(--c-text-2);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.import-export-drop__meta {
    font-size: var(--text-sm);
    color: var(--c-text-5)
}

.import-export-drop__clear {
    border-radius: var(--radius-sm);
    width: 26px;
    height: 26px;
    color: var(--c-text-5);
    cursor: pointer;
    transition: color var(--ease), background var(--ease);
    background: 0 0;
    border: 0;
    flex: none;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    display: flex
}

.import-export-drop__clear:hover {
    background: var(--c-surface-3);
    color: var(--c-text-2)
}

.import-export-status {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-success)
}

.import-export-hint {
    font-size: var(--text-sm);
    color: var(--c-text-5);
    margin-top: 8px;
    line-height: 1.5
}

.import-export-sync {
    flex-direction: column;
    gap: 20px;
    display: flex
}

.sync-status {
    font-size: var(--text-md);
    color: var(--c-text-2);
    line-height: 1.5
}

.sync-status strong {
    color: var(--c-text-1);
    font-weight: var(--fw-semibold)
}

.sync-status--muted {
    color: var(--c-text-5)
}

.sync-note {
    font-size: var(--text-sm);
    color: var(--c-text-5);
    line-height: 1.5
}

.sync-note--warn {
    color: var(--c-warning)
}

.sync-note--danger {
    color: var(--c-danger)
}

@media (max-width:900px) {
    .user-dashboard__body {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .user-dashboard__sidebar {
        display: none
    }

    .user-dashboard__navselect {
        display: block
    }

    .profile-banner__inner {
        flex-wrap: wrap;
        gap: 16px
    }

    .profile-form-grid {
        grid-template-columns: 1fr
    }

    .profile-form-grid__half {
        max-width: none
    }
}

.browse {
    max-width: 1200px;
    padding: 28px var(--space-6) 72px;
    flex-direction: column;
    gap: 28px;
    margin: 0 auto;
    display: flex
}

.browse__head {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    display: flex
}

.browse__title {
    font-family: var(--font-sans);
    font-size: var(--h2, 30px);
    font-weight: var(--fw-bold);
    color: var(--c-text-1)
}

.filters {
    flex-direction: column;
    display: flex
}

.filters__bar {
    align-items: stretch;
    gap: 12px;
    display: flex
}

.filters__search {
    flex: 1;
    min-width: 0
}

.filters__search .input {
    border-radius: var(--radius-md);
    height: 40px
}

.filters__toggle {
    border-radius: var(--radius-md);
    background: var(--c-surface-2);
    height: 40px;
    color: var(--c-text-2);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--ease), color var(--ease);
    flex: none;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    display: inline-flex
}

.filters__toggle:hover {
    background: var(--c-surface-3);
    color: var(--c-text-1)
}

.filters__toggle[aria-expanded=true] {
    background: var(--c-accent-soft);
    color: var(--c-accent)
}

.filters__toggle-badge {
    background: var(--c-accent);
    min-width: 18px;
    height: 18px;
    color: var(--c-on-accent);
    font-size: var(--text-2xs);
    font-weight: var(--fw-bold);
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
    display: inline-flex
}

.filters__collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.filters__collapse--open {
    grid-template-rows: 1fr;
}

.filters__collapse-inner {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.filters__collapse--open .filters__collapse-inner {
    opacity: 1;
}

.filters__collapse--open:not(.filters__collapse--animating) .filters__collapse-inner {
    overflow: visible;
}

.filters__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    gap: 16px 18px;
    padding-top: 18px;
    padding-bottom: 5px;
    display: grid
}

.filters__grid>.filter-field {
    width: 100%;
    min-width: 0
}

.filter-field {
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    display: flex
}

.filter-field__label {
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-text-5)
}

.filter-field>.field,
.filter-field>.dropdown,
.filter-field>.filter-range,
.filter-field>.btn,
.filter-field>.input {
    width: 100%;
    min-width: 0
}

.filter-field .filter-dropdown__trigger,
.filter-field .select {
    justify-content: space-between;
    width: 100%
}

.filter-field .select__value {
    flex: 1
}

.filter-field .select__label {
    display: none
}

.filters__grid .filter-field .filter-dropdown__trigger,
.filters__grid .filter-field .select,
.filters__grid .filter-field .input,
.filters__grid .filter-field .btn {
    border-radius: var(--radius-md);
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 36px
}

.bookmarks-tab .filters__grid .filter-field .filter-dropdown__trigger,
.bookmarks-tab .filters__grid .filter-field .select,
.bookmarks-tab .filters__grid .filter-field .input,
.bookmarks-tab .filters__grid .filter-field .btn {
    height: 36px;
    line-height: 34px
}

.filter-block {
    flex-direction: column;
    gap: 9px;
    display: flex
}

.filter-block__head {
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    display: flex
}

.filter-block__label {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-text-4);
    padding: 6px 2px 8px;
    display: block
}

.filter-rows {
    flex-direction: column;
    gap: 3px;
    display: flex
}

.filter-rows--inline {
    flex-direction: row;
    gap: 6px
}

.filter-rows--grid {
    gap: 3px 8px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.filter-rows--inline .filter-row {
    flex: none;
    width: auto
}

.filter-row {
    border-radius: var(--radius-sm);
    width: 100%;
    color: var(--c-text-3);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    text-align: left;
    cursor: pointer;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
    background: 0 0;
    border: 1px solid #0000;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    display: flex
}

.filter-row:hover {
    background: var(--c-surface-hover);
    color: var(--c-text-1)
}

.filter-row--selected {
    color: var(--c-text-1)
}

.filter-row--excluded {
    color: var(--c-danger)
}

.filter-row__label {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden
}

.filter-row__box {
    border-radius: var(--radius-xs);
    border: 1px solid var(--c-text-5);
    background: var(--c-surface-2);
    width: 14px;
    height: 14px;
    color: var(--c-on-accent);
    transition: background var(--ease), border-color var(--ease), color var(--ease);
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.filter-row__box svg {
    width: 10px;
    height: 10px;
    display: block
}

.filter-row:hover .filter-row__box {
    border-color: var(--c-text-4)
}

.filter-row__box--include {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-on-accent)
}

.filter-row__box--exclude {
    background: var(--c-danger);
    border-color: var(--c-danger);
    color: var(--c-on-accent)
}

.filter-row__box-mark {
    font-weight: var(--fw-bold);
    line-height: 1
}

.filter-row__radio {
    border: 1px solid var(--c-text-5);
    background: var(--c-surface-2);
    width: 14px;
    height: 14px;
    transition: border-color var(--ease);
    border-radius: 50%;
    flex: none;
    position: relative
}

.filter-row:hover .filter-row__radio {
    border-color: var(--c-text-4)
}

.filter-row__radio--on {
    border-color: var(--c-accent)
}

.filter-row__radio--on:after {
    content: "";
    background: var(--c-accent);
    border-radius: 50%;
    width: 6px;
    height: 6px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.genres-panel__mode {
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
    padding-left: 6px;
    display: flex
}

.genres-panel__mode-label {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-text-5);
    flex: none
}

.genres-panel__mode .filter-rows {
    flex: 1
}

.filter-range {
    align-items: center;
    gap: 10px;
    display: flex
}

.filter-range .input {
    flex: 1;
    min-width: 0
}

.filter-range__dash {
    color: var(--c-text-5)
}

.filter-dropdown__trigger {
    height: var(--control-md);
    border-radius: var(--radius-md);
    background: var(--c-surface-2);
    color: var(--c-text-2);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--ease), color var(--ease);
    border: 0;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    display: inline-flex
}

.filter-dropdown__trigger:hover {
    background: var(--c-surface-hover);
    color: var(--c-text-1)
}

.filter-dropdown__trigger--active {
    background: var(--c-accent-soft);
    color: var(--c-accent)
}

.filter-dropdown__value {
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    flex: 1;
    min-width: 0;
    overflow: hidden
}

.filter-dropdown__value--muted {
    color: var(--c-text-5);
    font-weight: var(--fw-medium)
}

.filter-dropdown__caret {
    color: var(--c-text-4);
    align-items: center;
    margin-left: -1px;
    display: inline-flex
}

.filter-dropdown__panel {
    min-width: 230px;
    max-width: min(360px, 92vw)
}

.filter-dropdown__panel--wide {
    width: 550px;
    max-width: calc(100vw - 32px)
}

.filter-dropdown__scroll {
    max-height: 300px;
    padding-right: 6px;
    overflow-y: auto
}

.genres-panel {
    flex-direction: column;
    max-height: 420px;
    padding-right: 6px;
    display: flex;
    overflow-y: auto
}

.genres-panel__block+.genres-panel__block {
    border-top: 1px solid var(--c-divider);
    padding-top: 14px
}

.genres-panel__section-label {
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--c-text-4);
    padding: 2px 6px 8px
}

.genres-panel>.genres-panel__section-label:not(:first-child) {
    border-top: 1px solid var(--c-divider);
    margin-top: 14px;
    padding-top: 14px
}

.tag-search {
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    display: flex
}

.tag-search__input-wrap {
    position: relative
}

.tag-search__input-wrap .input {
    background: var(--c-bg);
    width: 100%
}

.tag-search__input-wrap .input:hover {
    background: var(--c-surface-1)
}

.tag-search__suggestions {
    z-index: 10;
    border-radius: var(--radius-md);
    background: var(--c-surface-3);
    max-height: 220px;
    padding: 5px;
    display: block;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    overflow-y: auto;
    box-shadow: 0 14px 34px -12px #0009
}

.tag-search__suggestions--portaled {
    z-index: 400;
    position: fixed;
    right: auto
}

.tag-search__suggestion {
    text-align: left;
    border-radius: var(--radius-sm);
    width: 100%;
    color: var(--c-text-2);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    background: 0 0;
    border: 0;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    display: flex
}

.tag-search__suggestion:hover {
    background: var(--c-accent-soft);
    color: var(--c-accent)
}

.tag-search__suggestion-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.tag-search__suggestion-type {
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-text-6);
    flex: none
}

.tag-search__chips {
    flex-direction: column;
    gap: 6px;
    display: flex
}

.tag-search__chip {
    border-radius: var(--radius-sm);
    background: var(--c-accent-soft);
    width: 100%;
    color: var(--c-accent);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 11px;
    display: flex
}

.tag-search__chip-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.tag-search__chip-remove {
    color: inherit;
    cursor: pointer;
    opacity: .75;
    transition: opacity var(--ease);
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.tag-search__chip-remove:hover {
    opacity: 1
}

@media (max-width:900px) {
    .filters__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media (max-width:600px) {
    .filters__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px
    }
}

@media (max-width:540px) {
    .filter-dropdown__panel--wide {
        width: auto;
        min-width: auto
    }
}

.dropdown__backdrop {
    display: none
}

@media (max-width:600px) {
    .dropdown__backdrop {
        z-index: 299;
        background: #0009;
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0
    }

    .dropdown__menu--dialog {
        width: min(440px, 92vw) !important;
        min-width: 0 !important;
        max-width: 92vw !important;
        max-height: 60% !important;
        position: fixed !important;
        top: 50% !important;
        bottom: auto !important;
        left: 50% !important;
        right: auto !important;
        overflow-y: auto !important;
        transform: translate(-50%, -50%) !important
    }

    .dropdown__menu--dialog .genres-panel,
    .dropdown__menu--dialog .filter-dropdown__scroll {
        max-height: none;
        overflow: visible
    }

    .dropdown__menu--dialog .filter-rows--grid {
        grid-template-columns: 1fr !important
    }

}

.browse__results {
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    display: flex
}

.browse__results .title-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr))
}

@media (max-width:1200px) {
    .browse__results .title-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }
}

@media (max-width:992px) {
    .browse__results .title-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

@media (max-width:768px) {
    .browse__results .title-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media (max-width:520px) {
    .browse__results .title-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

.browse__results-head {
    min-height: var(--control-md);
    justify-content: space-between;
    align-items: center;
    display: flex
}

.browse__count {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-text-4)
}

.browse__view-toggle {
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-md);
    background: var(--c-surface-2);
    align-items: center;
    gap: 2px;
    padding: 2px;
    display: flex
}

.browse__view-btn {
    border-radius: var(--radius-sm);
    width: 30px;
    height: 26px;
    color: var(--c-text-5);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    display: flex
}

.browse__view-btn:hover {
    color: var(--c-text-3)
}

.browse__view-btn.is-active {
    background: var(--c-surface-3);
    color: var(--c-text-1)
}

.latest__filters .browse__view-toggle {
    height: var(--control-md);
    box-sizing: border-box;
    border: 0;
    padding: 3px
}

.latest__filters .browse__view-btn {
    width: 34px;
    height: 100%
}

.title-rows {
    transition: opacity var(--ease);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    display: grid
}

.title-rows.is-fetching {
    opacity: .5;
    pointer-events: none
}

@media (max-width:1300px) {
    .title-rows {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width:680px) {
    .title-rows {
        grid-template-columns: 1fr
    }
}

.title-rows__link {
    text-decoration: none
}

.title-row-card {
    background: var(--c-surface-1);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-xl);
    height: 140px;
    transition: background var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease);
    gap: 14px;
    padding: 10px;
    display: flex
}

.title-row-card__follow {
    z-index: 2;
    position: absolute;
    top: 6px;
    right: 6px
}

.title-row-card__follow .follow-btn__toggle {
    border-radius: var(--radius-sm);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    background: #0a0c1099;
    width: 26px;
    height: 26px;
    box-shadow: 0 4px 12px -4px #000000b3
}

.title-row-card__follow .follow-btn__toggle--on {
    background: var(--c-accent)
}

.title-row-card:hover {
    background: var(--c-surface-2);
    border-color: var(--c-border);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -18px #000000b3
}

.title-row-card__poster {
    border-radius: var(--radius-md);
    background: var(--c-surface-3);
    flex: none;
    width: 86px;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 16px -10px #000000b3
}

.title-row-card__poster img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.title-row-card__info {
    flex-direction: column;
    flex: auto;
    min-width: 0;
    padding: 4px 6px 4px 0;
    display: flex
}

.title-row-card__type {
    font-size: var(--text-2xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-text-3);
    background: var(--c-surface-3);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-pill);
    align-self: flex-start;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    display: inline-flex
}

.title-row-card__type:before {
    content: "";
    background: #94a3b8;
    border-radius: 50%;
    flex: none;
    width: 5px;
    height: 5px
}

.title-row-card__type[data-type=manga]:before {
    background: #38bdf8
}

.title-row-card__type[data-type=manhwa]:before {
    background: #f59e0b
}

.title-row-card__type[data-type=manhua]:before {
    background: #a855f7
}

.title-row-card__title {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--text-md);
    color: var(--c-text-1);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 8px;
    line-height: 1.3;
    display: -webkit-box;
    overflow: hidden
}

.title-row-card__meta {
    font-size: var(--text-sm);
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    display: flex
}

.title-row-card__ch {
    font-weight: var(--fw-semibold);
    color: var(--c-text-2);
    white-space: nowrap;
    align-items: center;
    gap: 5px;
    display: inline-flex
}

.title-row-card__ch svg {
    color: var(--c-accent)
}

.title-row-card__time {
    color: var(--c-text-5);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.browse__empty {
    color: var(--c-text-4);
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 72px 0;
    display: flex
}

@media (max-width:900px) {
    .browse {
        gap: 22px
    }
}

@media (max-width:768px) {

    .site-header__nav,
    .site-header__quicknav {
        display: none
    }

    :root {
        --header-height: 60px
    }

    .site-header__inner {
        padding: 0 var(--space-4);
        gap: 14px
    }

    .site-header__actions {
        gap: var(--space-2)
    }

    .search {
        max-width: none
    }

    .site-header__right {
        gap: var(--space-2)
    }

    .site-header__menu {
        display: inline-flex
    }

    .site-header__search {
        display: none
    }

    .site-header__search-toggle {
        display: inline-flex
    }

    .site-header__search--open {
        z-index: 30;
        padding: 10px var(--space-4);
        border-bottom: 1px solid var(--c-divider);
        background: #0b0c10;
        align-items: center;
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        box-shadow: 0 12px 24px -12px #0009
    }

    .site-header__search--open .search {
        width: 100%
    }

    .site-header__search--open .field__hint {
        display: none
    }

    .site-header__search--open .search__close {
        width: 32px;
        height: 32px;
        color: var(--c-text-3);
        cursor: pointer;
        z-index: 2;
        background: 0 0;
        border: 0;
        justify-content: center;
        align-items: center;
        display: inline-flex;
        position: absolute;
        top: 50%;
        right: 6px;
        transform: translateY(-50%)
    }

    .notif {
        position: fixed;
        top: calc(var(--header-height, 60px) + 8px);
        left: 8px;
        right: 8px;
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        min-width: 0;
        margin: 0;
        max-height: calc(100vh - var(--header-height, 60px) - 24px);
        z-index: 350;
    }
}

@media (max-width:600px) {
    .page {
        padding: 28px var(--space-4) 56px
    }

    .browse {
        padding: 24px var(--space-4) 56px
    }

    .profile-banner__inner {
        padding: 24px var(--space-4)
    }

    .user-dashboard__body {
        padding: 22px var(--space-4) 56px
    }

    .site-footer__inner {
        padding: 20px var(--space-4)
    }

    .app-shell {
        --h2: 23px
    }

    .home-section {
        margin-bottom: 40px
    }

    .home-section__controls,
    .latest__filters {
        margin-left: auto
    }

    .profile-banner__avatar {
        width: 64px;
        height: 64px;
        font-size: 26px
    }

    .profile-banner__name {
        font-size: 22px
    }

    .profile-banner__stats {
        gap: 18px;
        width: 100%
    }

    .user-section__head {
        align-items: flex-start
    }

    .npager {
        gap: 3px
    }

    .npager__num,
    .npager__nav {
        min-width: 32px;
        height: 32px;
        font-size: var(--text-sm);
        padding: 0 8px
    }
}

@media (max-width:480px) {
    .site-footer__inner {
        align-items: flex-start;
        gap: 20px
    }

    .site-footer__meta {
        align-items: flex-start
    }

    .settings-row {
        flex-wrap: nowrap;
        gap: 12px
    }

    .settings-row__label {
        flex: auto;
        min-width: 0
    }

    .import-export-choice {
        flex: auto;
        justify-content: center
    }

    .import-export-drop__body {
        flex-wrap: wrap
    }
}

@media (max-width:600px) {
    .modal__card {
        max-height: 88vh;
        max-height: 88dvh;
        overflow-y: auto
    }
}

@media (max-width:380px) {
    .modal {
        padding: var(--space-3)
    }

    .modal__card {
        padding: 24px 18px 18px
    }

    .modal__card--narrow {
        padding: 20px 16px
    }
}

.title-detail {
    position: relative
}

.title-detail__skeleton,
.title-detail__notfound {
    max-width: 1000px;
    color: var(--c-text-4);
    margin: 0 auto;
    padding: 120px 24px 80px
}

.title-detail__notfound h1 {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    color: var(--c-text-1);
    margin: 0 0 8px;
    font-size: 28px
}

.title-detail__notfound p {
    margin: 0 0 18px
}

.title-detail__banner {
    pointer-events: none;
    height: 460px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden
}

.title-detail__banner-img {
    object-fit: cover;
    filter: blur(42px)saturate(1.3);
    opacity: .24;
    width: 100%;
    height: 100%;
    transform: scale(1.15)
}

.title-detail__banner-fade {
    background: linear-gradient(180deg, #0b0c1059, #0b0c10c7 58%, var(--c-bg));
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.title-detail__main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 90px 24px 80px;
    position: relative
}

.title-detail__top {
    grid-template-columns: 260px 1fr;
    align-items: start;
    gap: 40px;
    display: grid
}

.title-detail__poster-col {
    flex-direction: column;
    gap: 20px;
    display: flex
}

.title-detail__poster {
    aspect-ratio: 2/3;
    border-radius: var(--radius-xl);
    background: var(--c-surface-3);
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 60px -22px #000000d9
}

.title-detail__poster img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.title-detail__crumbs {
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--c-text-5);
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    display: flex
}

.title-detail__crumbs a {
    color: var(--c-text-4);
    text-decoration: none
}

.title-detail__crumbs a:hover {
    color: var(--c-accent)
}

.title-detail__crumb-current {
    color: var(--c-text-2)
}

.title-detail__meta .badge {
    background: var(--c-surface-3);
    color: var(--c-text-2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none
}

.title-detail__meta .badge--status {
    background: var(--c-success-soft);
    color: var(--c-success)
}

.title-detail__meta-stats {
    align-items: center;
    gap: 10px;
    margin-left: 4px;
    display: inline-flex
}

.title-detail__meta-follows {
    align-items: center;
    gap: 5px;
    display: inline-flex
}

.title-detail__status-dot {
    background: var(--c-success);
    border-radius: 50%;
    width: 6px;
    height: 6px
}

.title-detail__title {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    letter-spacing: -1px;
    color: var(--c-text-1);
    margin: 0;
    font-size: 34px;
    line-height: 1.18
}

.title-detail__badges {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    display: flex
}

.title-detail__badges .badge {
    font-size: var(--text-2xs);
    border-radius: var(--radius-sm);
    padding: 3px 8px
}

.title-detail__badges .badge:not([class*=badge--]) {
    background: var(--c-surface-2);
    color: var(--c-text-2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none
}

.title-detail__alt {
    font-family: var(--font-jp);
    font-size: var(--text-md);
    color: var(--c-text-4);
    margin-top: 8px
}

.title-detail__alt-toggle {
    max-width: 300px;
    color: inherit;
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 6px;
    padding: 0;
    display: inline-flex
}

.title-detail__alt-caret {
    transition: transform var(--ease);
    flex: none
}

.title-detail__alt[data-open=true] .title-detail__alt-caret {
    transform: rotate(180deg)
}

.title-detail__alt-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    overflow: hidden
}

.title-detail__alt-list {
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s;
    display: grid
}

.title-detail__alt[data-open=true] .title-detail__alt-list {
    grid-template-rows: 1fr;
    margin-top: 4px
}

.title-detail__alt-list-inner {
    min-height: 0;
    overflow: hidden
}

.title-detail__alt-line {
    line-height: 1.65;
    display: block
}

.title-detail__meta {
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    color: var(--c-text-3);
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    display: flex
}

.title-detail__credits {
    margin-top: 20px
}

.title-detail__credit-link {
    color: inherit;
    transition: color var(--ease);
    text-decoration: none
}

.title-detail__credit-link:hover {
    color: var(--c-accent)
}

.title-detail__meta strong {
    color: var(--c-text-2);
    font-weight: var(--fw-semibold)
}

.title-detail__meta-dot {
    background: var(--c-text-6);
    border-radius: 50%;
    width: 3px;
    height: 3px
}

.title-detail__tags {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    display: flex
}

.title-detail__tag {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: var(--c-text-2);
    background: var(--c-surface-2);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    text-decoration: none
}

.title-detail__tag:hover {
    color: var(--c-accent);
    background: var(--c-accent-soft)
}

.title-detail__synopsis {
    max-width: 680px;
    margin-top: 15px
}

.title-detail__synopsis p {
    font-size: var(--text-md);
    color: var(--c-text-3);
    margin: 0;
    line-height: 1.7;
    max-height: 72px;
    overflow: hidden
}

.title-detail__synopsis.is-animating p {
    transition: max-height .3s ease;
}

.title-detail__synopsis.is-expanded p {
    max-height: none
}

.title-detail__synopsis a {
    color: var(--c-accent);
    text-decoration: none
}

.title-detail__synopsis a:hover {
    text-decoration: underline
}

.title-detail__synopsis .spoil {
    background: var(--c-text-3);
    color: #0000;
    cursor: pointer;
    transition: color var(--ease);
    border-radius: 3px
}

.title-detail__synopsis .spoil:hover {
    color: var(--c-bg)
}

.title-detail__synopsis-toggle {
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    color: var(--c-accent);
    cursor: pointer;
    background: 0 0;
    border: 0;
    margin-top: 8px;
    padding: 0
}

.title-detail__actions {
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    display: flex
}

.title-detail__actions .btn--xl {
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.title-detail__read-label {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.title-detail__follow .follow-btn__chip {
    height: var(--control-xl);
    font-size: var(--text-md);
    border-radius: var(--radius-lg);
    gap: 8px;
    max-width: none;
    padding: 0 18px
}

.title-detail__follow .follow-btn__chip svg:first-child {
    width: 18px;
    height: 18px
}

.title-detail__rate svg {
    fill: currentColor
}

.title-detail__trackers {
    flex-wrap: wrap;
    gap: 8px;
    display: flex
}

.tracker-link {
    border-radius: var(--radius-md);
    background: var(--c-surface-2);
    width: 32px;
    height: 32px;
    transition: background var(--ease);
    flex: none;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: inline-flex
}

.tracker-link:hover {
    background: var(--c-surface-3)
}

.tracker-link__icon {
    border-radius: 3px;
    flex: none;
    width: 18px;
    height: 18px
}

.title-detail__links {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-top: 50px;
    display: flex
}

.title-detail__links .share-block {
    margin: 0
}

.title-detail__info>:first-child {
    margin-top: 0
}

.title-detail__tags-icon {
    color: var(--c-text-5);
    flex: none
}

.title-detail__tags-more {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-accent);
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0 4px
}

.title-detail__stats {
    font-size: var(--text-md);
    font-weight: var(--fw-medium);
    color: var(--c-text-3);
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    display: inline-flex
}

.title-detail__stat {
    align-items: center;
    gap: 5px;
    display: inline-flex
}

.title-detail__stat strong {
    color: var(--c-text-1);
    font-weight: var(--fw-semibold)
}

.title-detail__stat svg {
    color: var(--c-text-4)
}

.title-detail__stat-star {
    fill: currentColor;
    color: var(--c-official)
}

.title-detail__stat-muted {
    color: var(--c-text-5)
}

.title-detail__stats-divider {
    background: var(--c-text-6);
    border-radius: 50%;
    flex: none;
    width: 3px;
    height: 3px
}

.title-detail__follow .follow-btn__chip--active,
.title-detail__rate.is-active,
.title-detail__follow .follow-btn__chip--active:hover {
    background: var(--c-accent-soft);
    color: var(--c-accent)
}

.rate-pop {
    min-width: 240px;
    padding: 14px 16px
}

.rate-pop__label {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--c-text-5);
    display: block
}

.rate-pop__value {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-text-3);
    margin-top: 10px
}

.rate-pop__clear {
    color: var(--c-accent);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    background: 0 0;
    border: 0;
    margin-left: 8px;
    padding: 0
}

.mstars {
    gap: 4px;
    margin-top: 10px;
    display: flex
}

.mstars__btn {
    cursor: pointer;
    background: 0 0;
    border: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    position: relative
}

.mstars__btn:disabled {
    cursor: default
}

.mstars__svg {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.mstars__svg--bg {
    fill: var(--c-text-6)
}

.mstars__svg--fg {
    fill: var(--c-accent);
    clip-path: inset(0 100% 0 0)
}

.mstars__btn.is-on .mstars__svg--fg {
    clip-path: inset(0)
}

.mstars__btn.is-half .mstars__svg--fg {
    clip-path: inset(0 50% 0 0)
}

.title-detail__play {
    fill: currentColor
}

.title-detail__chapters {
    margin-top: 52px
}

.title-detail__chapters-head {
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    display: flex
}

.title-detail__tabs {
    align-items: center;
    gap: var(--space-1);
    border-radius: var(--radius-lg);
    background: var(--c-surface-2);
    padding: 4px;
    display: inline-flex
}

.title-detail__tab {
    border-radius: var(--radius-md);
    cursor: pointer;
    height: 34px;
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--text-md);
    color: var(--c-text-4);
    transition: background var(--ease), color var(--ease);
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    line-height: 1;
    display: inline-flex
}

.title-detail__tabs--single .title-detail__tab {
    cursor: default
}

.title-detail__tab:hover {
    color: var(--c-text-1);
    background: var(--c-surface-3)
}

.title-detail__tab.is-active {
    color: var(--c-accent-strong);
    background: var(--c-accent-soft)
}

.title-detail__tab.is-active:hover {
    background: var(--c-accent-soft)
}

.title-detail__panel {
    border-radius: var(--radius-xl);
    background: var(--c-surface-1)
}

.title-detail__toolbar {
    border-bottom: 1px solid var(--c-divider);
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    display: flex
}

.title-detail__search {
    flex: 200px;
    min-width: 160px
}

.title-detail__sort {
    align-items: center;
    gap: 6px;
    display: flex
}

.title-detail__sort-label {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--c-text-5)
}

@media (max-width:600px) {
    .title-detail__toolbar {
        gap: 10px
    }

    .title-detail__search {
        flex: 100%;
        min-width: 0
    }

    .title-detail__toolbar .dropdown {
        flex: calc(50% - 5px);
        min-width: 0
    }

    .title-detail__toolbar .select {
        width: 100%;
        min-width: 0;
        justify-content: space-between
    }

    .title-detail__sort {
        flex: 100%
    }
}

.title-detail__list {
    border-bottom-left-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
    transition: opacity var(--ease);
    overflow: hidden
}

.title-detail__chapters-pager {
    justify-content: center;
    padding: 16px 12px 4px;
    display: flex
}

.title-detail__row:last-child {
    border-bottom: 0
}

.title-detail__list.is-fetching {
    opacity: .5;
    pointer-events: none
}

.title-detail__list-empty {
    text-align: center;
    color: var(--c-text-5);
    font-size: var(--text-base);
    padding: 32px 18px
}

.title-detail__row {
    border-bottom: 1px solid var(--c-divider);
    transition: background var(--ease);
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    display: flex
}

.title-detail__row:hover {
    background: var(--c-surface-3)
}

.title-detail__row-flag {
    text-align: center;
    width: 26px;
    color: var(--c-text-5);
    flex: none;
    font-size: 19px;
    line-height: 1
}

.title-detail__row-name {
    flex: auto;
    align-items: baseline;
    min-width: 0;
    display: flex
}

.title-detail__row-link {
    white-space: nowrap;
    align-items: baseline;
    min-width: 0;
    max-width: 100%;
    text-decoration: none;
    display: inline-flex;
    overflow: hidden
}

.title-detail__row-link:hover .title-detail__row-num {
    color: var(--c-accent)
}

.title-detail__row-num {
    font-size: var(--text-md);
    font-weight: var(--fw-bold);
    color: var(--c-text-1);
    flex: none
}

.title-detail__row-sub {
    text-overflow: ellipsis;
    min-width: 0;
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    color: var(--c-text-4);
    overflow: hidden
}

.title-detail__row-sub:before {
    content: "·";
    color: var(--c-text-6);
    margin: 0 8px
}

.title-detail__row-badge {
    width: 16px;
    height: 16px;
    color: var(--c-success);
    background: var(--c-success-soft);
    border-radius: 50%;
    flex: none;
    justify-content: center;
    align-self: center;
    align-items: center;
    margin-left: 8px;
    display: inline-flex
}

.title-detail__row-date {
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--c-text-5);
    white-space: nowrap;
    flex: none
}

.title-detail__row-bookmark {
    cursor: pointer;
    border-radius: var(--radius-sm);
    width: 30px;
    height: 30px;
    color: var(--c-text-6);
    transition: background var(--ease), color var(--ease);
    background: 0 0;
    border: 0;
    flex: none;
    justify-content: center;
    align-items: center;
    display: flex
}

.title-detail__row-bookmark:hover {
    background: var(--c-surface-3);
    color: var(--c-accent)
}

.title-detail__row-bookmark.is-active {
    color: var(--c-accent)
}

@media (max-width:760px) {
    .title-detail__main {
        padding: 40px 16px 60px
    }

    .title-detail__top {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .title-detail__poster-col {
        gap: 16px
    }

    .title-detail__poster {
        max-width: 220px;
        margin: 0 auto
    }

    .title-detail__title {
        font-size: 26px;
        line-height: 1.2
    }

    .title-detail__stats {
        display: flex
    }

    .title-detail__actions {
        flex-wrap: nowrap;
        gap: 8px;
        margin-top: 22px
    }

    .title-detail__actions .btn--xl {
        min-width: 0;
        height: var(--control-lg);
        font-size: var(--text-md);
        flex: auto;
        padding: 0 14px
    }

    .title-detail__actions .icon-btn--xl {
        width: var(--control-lg);
        height: var(--control-lg);
        flex: none
    }

    .title-detail__follow {
        flex: none
    }

    .title-detail__follow .follow-btn__chip {
        width: var(--control-lg);
        height: var(--control-lg);
        justify-content: center;
        gap: 0;
        padding: 0
    }

    .title-detail__follow .follow-btn__chip-label,
    .title-detail__follow .follow-btn__chip>svg:last-child {
        display: none
    }

    .title-detail__links {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-top: 24px
    }
}

.reader {
    isolation: isolate;
    background: var(--c-bg);
    min-height: 100vh;
    color: var(--c-text-1);
    position: relative
}

.reader--state {
    min-height: 100vh;
    color: var(--c-text-4);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    display: flex
}

.reader-img {
    object-fit: contain
}

.reader--gray .reader-img {
    filter: grayscale()
}

.reader-progress {
    z-index: 60;
    counter-reset: seg;
    display: flex;
    position: fixed
}

.reader-progress__seg {
    cursor: pointer;
    counter-increment: seg;
    background: #ffffff29;
    border: 0;
    flex: 1 1 0;
    margin: 0;
    padding: 0;
    transition: background .12s, width .18s, height .18s;
    position: relative
}

.reader-progress__seg.is-visited {
    background: #10a3ea8c
}

.reader-progress__seg.is-active,
.reader-progress__seg:hover {
    background: var(--c-accent)
}

.reader-progress__seg:before {
    content: counter(seg);
    background: var(--c-text-2);
    color: var(--c-bg);
    font-size: 11px;
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    border-radius: 4px;
    padding: 0 6px;
    line-height: 1.5;
    transition: top .2s, bottom .2s, left .2s, right .2s, opacity .2s;
    position: absolute
}

.reader-progress__seg:hover:before {
    opacity: 1
}

.reader-progress--left,
.reader-progress--right {
    flex-direction: column;
    width: 24px;
    top: 0;
    bottom: 0
}

.reader-progress--left {
    align-items: flex-start;
    left: 0
}

.reader-progress--right {
    align-items: flex-end;
    right: 0
}

.reader-progress--left .reader-progress__seg,
.reader-progress--right .reader-progress__seg {
    border-bottom: 1px solid var(--c-bg);
    width: 3px;
    min-height: 0
}

.reader-progress--left .reader-progress__seg:last-child,
.reader-progress--right .reader-progress__seg:last-child {
    border-bottom: 0
}

.reader-progress--left:hover .reader-progress__seg,
.reader-progress--right:hover .reader-progress__seg {
    width: 24px
}

.reader-progress--left .reader-progress__seg:before,
.reader-progress--right .reader-progress__seg:before {
    top: 50%;
    transform: translateY(-50%)
}

.reader-progress--left .reader-progress__seg:before {
    left: 0
}

.reader-progress--left .reader-progress__seg:hover:before {
    left: 100%
}

.reader-progress--right .reader-progress__seg:before {
    right: 0
}

.reader-progress--right .reader-progress__seg:hover:before {
    right: 100%
}

.reader-progress--top,
.reader-progress--bottom {
    flex-direction: row;
    height: 24px;
    left: 0;
    right: 0
}

.reader-progress--top.reader-progress--rtl,
.reader-progress--bottom.reader-progress--rtl {
    flex-direction: row-reverse
}

.reader-progress--top {
    align-items: flex-start;
    top: 0
}

.reader-progress--bottom {
    align-items: flex-end;
    bottom: 0
}

.reader-progress--top .reader-progress__seg,
.reader-progress--bottom .reader-progress__seg {
    border-right: 1px solid var(--c-bg);
    min-width: 0;
    height: 3px
}

.reader-progress--top .reader-progress__seg:last-child,
.reader-progress--bottom .reader-progress__seg:last-child {
    border-right: 0
}

.reader-progress--top:hover .reader-progress__seg,
.reader-progress--bottom:hover .reader-progress__seg {
    height: 24px
}

.reader-progress--top .reader-progress__seg:before,
.reader-progress--bottom .reader-progress__seg:before {
    left: 50%;
    transform: translate(-50%)
}

.reader-progress--top .reader-progress__seg:before {
    top: 0
}

.reader-progress--top .reader-progress__seg:hover:before {
    top: 100%
}

.reader-progress--bottom .reader-progress__seg:before {
    bottom: 0
}

.reader-progress--bottom .reader-progress__seg:hover:before {
    bottom: 100%
}

.reader__paged {
    height: 100vh
}

.reader-swiper {
    width: 100%;
    height: 100vh
}

.reader-swiper__slide {
    justify-content: center;
    align-items: center;
    display: flex
}

.reader-swiper__slide--end {
    overflow-y: auto
}

.reader-swiper .swiper-zoom-container {
    width: 100%;
    height: 100vh
}

.reader-swiper__spread {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    display: flex
}

.reader-swiper__img {
    object-fit: contain;
    background: #1a1d25;
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: 100%;
    display: block
}

.reader-swiper__spread--double .reader-swiper__img {
    max-width: 50%
}

.reader__rail,
.reader__topbar,
.reader__zoom,
.reader-progress {
    transition: opacity var(--ease)
}

.reader--immersive .reader__rail,
.reader--immersive .reader__topbar,
.reader--immersive .reader__zoom {
    opacity: 0;
    pointer-events: none
}

.reader__topbar {
    z-index: 80;
    align-items: center;
    gap: 8px;
    display: flex;
    position: fixed;
    top: 10px;
    right: 10px
}

.reader__nav {
    border-radius: var(--radius-md);
    width: 40px;
    height: 40px;
    color: var(--c-text-2);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    background: #14161cd1;
    border: 1px solid #ffffff0f;
    flex: none;
    justify-content: center;
    align-items: center;
    display: flex;
    box-shadow: 0 16px 40px -16px #000c
}

.reader__nav:hover {
    color: var(--c-text-1);
    background: #ffffff1a
}

.reader__nav:disabled {
    opacity: .3;
    pointer-events: none
}

.reader__pill {
    border-radius: var(--radius-pill);
    background: #14161cd1;
    border: 1px solid #ffffff0f;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    display: flex;
    box-shadow: 0 16px 40px -16px #000c
}

.reader__pill-ch {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--text-sm);
    color: var(--c-text-1);
    white-space: nowrap;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--ease);
    background: 0 0;
    border: 0;
    padding: 4px 10px
}

.reader__pill-ch:hover {
    background: #ffffff1a
}

.reader__pill-nav {
    width: 30px;
    height: 30px;
    color: var(--c-text-2);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    background: #ffffff0f;
    border: 0;
    border-radius: 50%;
    flex: none;
    justify-content: center;
    align-items: center;
    display: flex
}

.reader__pill-nav:hover {
    color: var(--c-text-1);
    background: #ffffff24
}

.reader__pill-nav:disabled {
    opacity: .3;
    pointer-events: none
}

.reader__strip {
    align-items: center;
    gap: var(--strip-margin, 0px);
    flex-direction: column;
    max-width: none;
    margin: 0 auto;
    padding: 0;
    display: flex
}

.reader__page {
    width: 100%;
    max-width: min(var(--page-limit-width, 100%), 100%);
    background: #1a1d25;
    border-radius: 2px;
    position: relative;
    overflow: hidden
}

.reader:not(.reader--stretch) .reader__page {
    max-width: min(var(--page-native-width, 100%), var(--page-limit-width, 100%), 100%)
}

.reader:not(.reader--fit-width):not(.reader--fit-height) .reader__page {
    width: var(--page-native-width, 100%);
    max-width: none
}

.reader--stretch:not(.reader--fit-width):not(.reader--fit-height) .reader__page {
    width: max(100%, var(--page-native-width, 0px))
}

.reader--fit-height:not(.reader--fit-width) .reader__page {
    width: calc(var(--page-fit-height, 100vh) * var(--page-ratio, 1))
}

.reader--fit-height.reader--fit-width .reader__page {
    width: min(100%, calc(var(--page-fit-height, 100vh) * var(--page-ratio, 1)))
}

.reader__page .reader-img {
    background: #1a1d25;
    width: 100%;
    height: auto;
    display: block
}

.reader__zoom {
    z-index: 85;
    border-radius: var(--radius-pill);
    background: #14161cd1;
    border: 1px solid #ffffff0f;
    align-items: center;
    gap: 2px;
    padding: 4px;
    display: flex;
    position: fixed;
    bottom: 10px;
    right: 10px;
    box-shadow: 0 16px 40px -16px #000c
}

.reader__zoom-btn {
    width: 30px;
    height: 30px;
    color: var(--c-text-2);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    background: 0 0;
    border: 0;
    border-radius: 50%;
    flex: none;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    line-height: 1;
    display: flex
}

.reader__zoom-btn:hover {
    color: var(--c-text-1);
    background: #ffffff1f
}

.reader__zoom-btn:disabled {
    opacity: .3;
    pointer-events: none
}

.reader__zoom-val {
    text-align: center;
    min-width: 42px;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-text-1)
}

.reader__page-num {
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
    color: #fff;
    border-radius: var(--radius-pill);
    background: #0b0c1099;
    padding: 3px 8px;
    position: absolute;
    bottom: 8px;
    right: 10px
}

.reader__end {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: min(100%, 560px);
    margin: 0 auto;
    padding: 40px 24px;
    display: flex
}

.reader__end-title {
    text-align: center;
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--text-xl);
    color: var(--c-text-1)
}

.reader__end-sub {
    text-align: center;
    font-size: var(--text-base);
    color: var(--c-text-4);
    margin-top: -10px
}

.reader__end-nav {
    gap: 12px;
    display: flex
}

.reader__end-btn {
    border-radius: var(--radius-lg);
    background: var(--c-surface-2);
    min-width: 0;
    color: var(--c-text-1);
    cursor: pointer;
    text-align: left;
    transition: background var(--ease), transform var(--ease);
    flex: 1 1 0;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    display: flex
}

.reader__end-btn:hover:not(:disabled) {
    background: var(--c-surface-3);
    transform: translateY(-1px)
}

.reader__end-btn:disabled {
    opacity: .4;
    cursor: not-allowed
}

.reader__end-btn svg {
    color: var(--c-accent);
    flex: none
}

.reader__end-btn--next {
    text-align: right;
    flex-direction: row-reverse
}

.reader__end-btn-text {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.reader__end-btn--next .reader__end-btn-text {
    align-items: flex-end
}

.reader__end-btn-kicker {
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-text-5)
}

.reader__end-btn-ch {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--text-md);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.reader__end-links {
    justify-content: center;
    gap: 10px;
    display: flex
}

.reader__end-link {
    border-radius: var(--radius-pill);
    background: var(--c-surface-2);
    color: var(--c-text-2);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    transition: background var(--ease), color var(--ease);
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    text-decoration: none;
    display: inline-flex
}

.reader__end-link:hover {
    background: var(--c-surface-3);
    color: var(--c-text-1)
}

.reader__end-link svg {
    color: var(--c-accent)
}

.reader__flip {
    transform: rotate(180deg)
}

.reader__dim {
    z-index: 70;
    pointer-events: none;
    opacity: var(--reader-dim, 0);
    background: #000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.reader__rail {
    z-index: 85;
    border-radius: var(--radius-md);
    background: #14161cd1;
    border: 1px solid #ffffff0f;
    flex-direction: column;
    gap: 2px;
    padding: 5px;
    display: flex;
    position: fixed;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    box-shadow: 0 16px 40px -16px #000c
}

.reader__rail .icon-btn {
    border-radius: var(--radius-sm);
    width: 34px;
    height: 34px;
    color: var(--c-text-3);
    transition: background var(--ease), color var(--ease)
}

.reader__rail .icon-btn svg {
    width: 18px;
    height: 18px
}

.reader__rail .icon-btn:hover {
    color: var(--c-text-1);
    background: #ffffff14
}

.reader__rail .icon-btn:disabled {
    opacity: .3;
    pointer-events: none
}

@keyframes modal-in {
    0% {
        opacity: 0;
        transform: translateY(8px)scale(.98)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.reader-modal {
    z-index: 200;
    justify-content: center;
    align-items: center;
    padding: 24px;
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.reader-modal.is-open {
    display: flex;
}

.reader-modal__backdrop {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #06070abd;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.reader-modal__panel {
    z-index: 1;
    background: var(--c-surface-2);
    border-radius: var(--radius-2xl, var(--radius-xl));
    width: 100%;
    max-width: 480px;
    max-height: 70vh;
    box-shadow: var(--shadow-card);
    flex-direction: column;
    animation: .18s ease-out modal-in;
    display: none;
    position: relative;
    overflow: visible
}

.reader-modal__panel.is-open {
    display: flex;
}

.reader-modal__head {
    border-bottom: 1px solid var(--c-divider);
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 10px;
    display: flex
}

.reader-modal__title {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--text-lg);
    color: var(--c-text-1)
}

.reader-chapters__tabs {
    gap: 16px;
    display: flex
}

.reader-chapters__tab {
    cursor: pointer;
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--text-lg);
    color: var(--c-text-5);
    transition: color var(--ease);
    background: 0 0;
    border: 0;
    padding: 0
}

.reader-chapters__tab:hover {
    color: var(--c-text-3)
}

.reader-chapters__tab.is-active {
    color: var(--c-text-1)
}

.reader-settings__tabs {
    background: var(--c-surface-2);
    border-radius: var(--radius-sm);
    gap: 3px;
    padding: 3px;
    display: inline-flex
}

.reader-settings__tab {
    border-radius: var(--radius-sm);
    cursor: pointer;
    height: 32px;
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--text-md);
    color: var(--c-text-4);
    transition: background var(--ease), color var(--ease);
    background: 0 0;
    border: 0;
    padding: 0 16px
}

.reader-settings__tab:hover {
    color: var(--c-text-1)
}

.reader-settings__tab.is-active {
    background: var(--c-accent-soft);
    color: var(--c-accent)
}

.reader-settings__body {
    flex: auto;
    min-height: 0;
    padding: 6px 0 10px;
    overflow-y: auto
}

.reader-settings__pane {
    display: none;
}

.reader-settings__pane.is-active {
    display: block;
}

.reader-settings__sub-control {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.is-hidden {
    display: none !important;
}

.reader-settings__group {
    flex-direction: column;
    gap: 12px;
    padding: 10px 20px;
    display: flex;
}

.reader-settings__group+.reader-settings__group {
    border-top: 1px solid var(--c-divider)
}

.reader-settings__group--switch {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px
}

.reader-settings__group-head {
    justify-content: space-between;
    align-items: center;
    display: flex
}

.reader-settings__group-label {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--c-text-5)
}

.reader-settings__value {
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    color: var(--c-accent)
}

.reader-range {
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(var(--c-accent), var(--c-accent)) no-repeat, var(--c-surface-3);
    background-size: var(--range-fill, 0%) 100%, 100% 100%;
    cursor: pointer;
    border-radius: 999px;
    width: 100%;
    height: 6px
}

.reader-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border: 3px solid var(--c-accent);
    cursor: pointer;
    width: 18px;
    height: 18px;
    transition: transform var(--ease);
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px #00000073
}

.reader-range::-webkit-slider-thumb:hover {
    transform: scale(1.12)
}

.reader-range::-webkit-slider-thumb:active {
    transform: scale(.95)
}

.reader-range::-moz-range-track {
    background: var(--c-surface-3);
    border-radius: 999px;
    height: 6px
}

.reader-range::-moz-range-progress {
    background: var(--c-accent);
    border-radius: 999px;
    height: 6px
}

.reader-range::-moz-range-thumb {
    border: 3px solid var(--c-accent);
    cursor: pointer;
    background: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    box-shadow: 0 2px 6px #00000073
}

.reader-choice {
    gap: 8px;
    display: flex
}

.reader-choice__btn {
    border-radius: var(--radius-sm);
    background: var(--c-surface-1);
    height: 40px;
    color: var(--c-text-3);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    flex-direction: row;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    display: flex
}

.reader-choice__btn svg {
    flex: none
}

.reader-choice__btn:hover {
    background: var(--c-surface-3);
    color: var(--c-text-1)
}

.reader-choice__btn.is-on {
    background: var(--c-accent-soft);
    color: var(--c-accent)
}

.reader-choice__btn--icon {
    flex: 1 1 0;
    padding: 0
}

.reader-choice--stack .reader-choice__btn {
    flex-direction: column;
    gap: 8px;
    height: auto;
    padding: 14px 8px
}

.reader-choice--stack .reader-choice__label {
    font-size: var(--text-sm);
    display: block
}

.reader-stepper {
    align-items: center;
    gap: 8px;
    display: flex
}

.reader-stepper__control {
    border-radius: var(--radius-sm);
    background: var(--c-surface-1);
    flex: 1;
    align-items: center;
    height: 40px;
    display: flex;
    overflow: hidden
}

.reader-stepper__btn {
    width: 40px;
    height: 40px;
    color: var(--c-text-1);
    font-size: 20px;
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: background var(--ease);
    background: 0 0;
    border: 0;
    flex: none
}

.reader-stepper__btn:hover {
    background: var(--c-surface-3)
}

.reader-stepper__btn:disabled {
    opacity: .35;
    pointer-events: none
}

.reader-stepper__value {
    text-align: center;
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    color: var(--c-text-1);
    flex: 1
}

.reader-stepper__reset {
    border-radius: var(--radius-sm);
    flex: none;
    height: 40px
}

.reader-check {
    border: 1px solid var(--c-text-5);
    border-radius: var(--radius-sm);
    background: var(--c-surface-2);
    color: #0000;
    cursor: pointer;
    width: 30px;
    height: 30px;
    transition: background var(--ease), border-color var(--ease), color var(--ease);
    flex: none;
    justify-content: center;
    align-items: center;
    display: flex
}

.reader-check.is-on {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff
}

.reader-toggle {
    border-radius: var(--radius-sm);
    background: var(--c-surface-1);
    width: 100%;
    height: 40px;
    color: var(--c-text-3);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    display: flex
}

.reader-toggle:hover {
    background: var(--c-surface-3);
    color: var(--c-text-1)
}

.reader-toggle:disabled {
    opacity: .4;
    cursor: not-allowed
}

.reader-toggle:disabled:hover {
    background: var(--c-surface-1);
    color: var(--c-text-3)
}

.reader-toggle__check {
    border: 1px solid var(--c-text-5);
    background: var(--c-surface-2);
    color: #0000;
    width: 16px;
    height: 16px;
    transition: background var(--ease), border-color var(--ease), color var(--ease);
    border-radius: 4px;
    flex: none;
    justify-content: center;
    align-items: center;
    display: flex
}

.reader-toggle.is-on {
    background: var(--c-accent-soft);
    color: var(--c-accent)
}

.reader-toggle.is-on .reader-toggle__check {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff
}

.reader-shortcuts__body {
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    display: flex
}

.reader-shortcuts__row {
    border-radius: var(--radius-md);
    transition: background var(--ease);
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    display: flex
}

.reader-shortcuts__row:hover {
    background: var(--c-surface-3)
}

.reader-shortcuts__action {
    min-width: 0;
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    color: var(--c-text-2);
    flex: 1
}

.reader-shortcuts__keys {
    flex: none;
    align-items: center;
    gap: 6px;
    display: flex
}

.reader-shortcuts__or {
    font-size: var(--text-2xs);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-text-5)
}

.reader-shortcuts__key {
    min-width: 26px;
    height: 26px;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    color: var(--c-text-1);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-bottom-width: 2px;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    padding: 0 8px;
    line-height: 1;
    display: inline-flex;
    box-shadow: 0 1px #0000002e
}

.reader-chapters__toolbar {
    border-bottom: 1px solid var(--c-divider);
    flex-direction: column;
    gap: 8px;
    padding: 0 16px 14px;
    display: flex
}

.reader-chapters__search {
    width: 100%
}

.reader-chapters__filters {
    gap: 8px;
    display: flex
}

.reader-chapters__filters .dropdown {
    flex: 1 1 0;
    min-width: 0
}

.reader-chapters__filters .dropdown .select {
    width: 100%
}

.reader-chapters__filters .select {
    background: var(--c-surface-3);
    flex: 1 1 0;
    min-width: 0
}

.reader-chapters__filters .select__value {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    overflow: hidden
}

.reader-chapters__search .input {
    background: var(--c-surface-3);
    font-size: 16px
}

.reader-chapters__sort {
    display: flex
}

.reader-chapters__sort .segment {
    background: var(--c-surface-3);
    flex: 1
}

.reader-chapters__sort .segment__btn {
    flex: 1;
    justify-content: center
}

.reader-chapters__list {
    flex: 1;
    min-height: 0;
    padding: 8px;
    overflow-y: auto
}

.reader-chapters__list.is-fetching {
    opacity: .5;
    pointer-events: none;
    transition: opacity var(--ease, 0.2s ease)
}

.reader-chapters__list.is-fetching:has(.reader-chapters__skeleton) {
    opacity: 1;
}

.reader-chapters__pager {
    border-top: 1px solid var(--c-divider);
    justify-content: center;
    padding: 10px 12px;
    display: flex
}

.reader-chapters__pager .npager {
    margin-top: 0
}

.reader-chapters__pager .npager__num,
.reader-chapters__pager .npager__nav {
    font-feature-settings: normal;
    font-family: inherit
}

.reader-chapters__empty {
    text-align: center;
    color: var(--c-text-5);
    padding: 24px
}

.reader-chapters__item {
    text-align: left;
    border-radius: var(--radius-sm);
    width: 100%;
    color: var(--c-text-2);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ease);
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    display: flex
}

.reader-chapters__item:hover {
    background: var(--c-surface-3)
}

.reader-chapters__item.is-current {
    background: var(--c-accent-soft);
    color: var(--c-accent)
}

.reader-chapters__flag {
    font-size: var(--text-md);
    flex: none;
    line-height: 1
}

.reader-chapters__num {
    font-weight: var(--fw-bold);
    font-size: var(--text-base);
    flex: none
}

.reader-chapters__name {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    font-size: var(--text-base);
    color: var(--c-text-4);
    flex: 1;
    overflow: hidden
}

.reader-chapters__meta {
    flex: none;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    display: flex
}

.reader-chapters__badge {
    width: 16px;
    height: 16px;
    color: var(--c-success);
    background: var(--c-success-soft);
    border-radius: 50%;
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.reader-chapters__skeleton {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    width: 100%;
    pointer-events: none;
    cursor: default;
    animation: skeleton-shimmer 1.4s ease-in-out infinite
}

.reader-chapters__skeleton .skeleton-line {
    background: var(--c-surface-3);
    border-radius: 4px;
    display: inline-block
}

.reader-chapters__skel-flag {
    width: 20px;
    height: 16px;
    flex: none
}

.reader-chapters__skel-title {
    height: 14px;
    width: 60%
}

.reader-chapters__skeleton:nth-child(2n) .reader-chapters__skel-title {
    width: 45%
}

.reader-chapters__skeleton:nth-child(3n) .reader-chapters__skel-title {
    width: 75%
}

.reader-chapters__skel-date {
    width: 45px;
    height: 12px;
    margin-left: auto;
    flex: none
}

@keyframes skeleton-shimmer {
    0% {
        opacity: .55;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .55;
    }
}

.reader-chapters__date {
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: var(--c-text-5);
    white-space: nowrap;
    flex: none
}

@media (max-width:1024px) {
    .reader:not(.reader--fit-width):not(.reader--fit-height) .reader__page {
        max-width: 100%
    }

    .reader--stretch:not(.reader--fit-width):not(.reader--fit-height) .reader__page {
        width: 100%
    }

    .reader__rail {
        gap: 6px;
        padding: 6px;
        right: 12px
    }

    .reader__topbar {
        top: 10px;
        right: 12px
    }

    .reader__pill {
        flex: 1;
        max-width: none
    }

    .reader-choice__label {
        display: none
    }

    .reader-choice__btn {
        padding: 0
    }

    .reader__fullscreen {
        display: none
    }
}

.profile-banner__stat-value,
.reading-ring__pct,
.npager__num,
.npager__nav,
.reader__end-btn-ch,
.manga-card__type {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1
}

.reset-page {
    max-width: 440px
}

.reset-card {
    background: var(--c-surface-1);
    border-radius: var(--radius-xl);
    padding: 28px 26px
}

.reset-card__title {
    font-size: var(--text-2xl);
    font-weight: var(--fw-bold);
    color: var(--c-text-1);
    margin: 0 0 6px
}

.reset-card__text {
    font-size: var(--text-base);
    color: var(--c-text-4);
    margin: 0 0 18px
}

.reset-card__form {
    gap: var(--space-4);
    flex-direction: column;
    display: flex
}

.reset-card__submit {
    margin-top: 4px
}

.reset-card__alert {
    border-radius: var(--radius-md);
    color: #e7989a;
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    background: #d4474a1f;
    border: 1px solid #d4474a66;
    padding: 10px 12px
}

.contact-page {
    max-width: 680px
}

.prefs-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 40px 20px 80px
}

.prefs-page__head {
    margin-bottom: 28px
}

.prefs-page__title {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--h2, 26px);
    letter-spacing: -.5px;
    color: var(--c-text-1);
    margin: 0;
    line-height: 1.1
}

.prefs-page__sub {
    font-size: var(--text-base);
    color: var(--c-text-4);
    margin: 8px 0 0
}

.prefs-page__note {
    color: var(--c-text-4);
    padding: 24px 0
}

.prefs-page__groups {
    flex-direction: column;
    gap: 16px;
    display: flex
}

.prefs-page .filter-rows {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 3px 10px;
    display: grid
}

.prefs-group {
    background: var(--c-surface-1);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-xl);
    padding: 18px 20px 16px
}

.prefs-group__head {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 14px;
    display: flex
}

.prefs-group__id {
    align-items: center;
    gap: 12px;
    min-width: 0;
    display: flex
}

.prefs-group__icon {
    border-radius: var(--radius-md);
    background: var(--c-accent-soft);
    width: 36px;
    height: 36px;
    color: var(--c-accent);
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.prefs-group--block .prefs-group__icon {
    background: var(--c-danger-soft);
    color: var(--c-danger)
}

.prefs-group__heading {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.prefs-group__title {
    font-size: var(--text-md);
    font-weight: var(--fw-bold);
    color: var(--c-text-1);
    line-height: 1.2
}

.prefs-group__desc {
    font-size: var(--text-sm);
    color: var(--c-text-4);
    line-height: 1.45
}

.prefs-page .filter-block--block .filter-row:hover {
    background: var(--c-danger-soft);
    color: var(--c-danger)
}

.prefs-page .filter-block--block .filter-row:hover .filter-row__box {
    border-color: var(--c-danger)
}

.prefs-page .filter-block--block .filter-row--blocked {
    color: var(--c-danger)
}

.filter-row__box--block {
    background: var(--c-danger);
    border-color: var(--c-danger);
    color: var(--c-on-accent)
}

@media (max-width:560px) {
    .prefs-page .filter-rows {
        grid-template-columns: 1fr
    }
}

.contact-page__head {
    margin-bottom: 24px
}

.contact-page__eyebrow {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--c-text-5);
    margin-bottom: 8px
}

.contact-page__title {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--h2, 30px);
    letter-spacing: -.6px;
    color: var(--c-text-1);
    margin: 0;
    line-height: 1
}

.contact-page__sub {
    font-size: var(--text-base);
    color: var(--c-text-4);
    margin: 10px 0 0;
    line-height: 1.6
}

.contact-page__panel {
    background: var(--c-surface-1);
    border-radius: var(--radius-xl);
    padding: 24px
}

.contact-page__form {
    flex-direction: column;
    gap: 18px;
    display: flex
}

.contact-page__form .field {
    position: relative
}

.contact-page__count {
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
    color: var(--c-text-5);
    position: absolute;
    top: 0;
    right: 2px
}

.contact-page__alert {
    border-radius: var(--radius-md);
    color: #e7989a;
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    background: #d4474a1f;
    border: 1px solid #d4474a59;
    padding: 11px 14px
}

.contact-page__done {
    border-radius: var(--radius-lg);
    background: var(--c-accent-softer);
    color: var(--c-text-2);
    font-size: var(--text-md);
    font-weight: var(--fw-medium);
    padding: 18px 16px
}

.modal-field__label-hint {
    font-size: var(--text-2xs);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-text-5)
}

.modal__card--wide {
    max-width: 450px
}

.modal__textarea {
    resize: vertical;
    height: auto;
    min-height: 84px;
    padding: 10px 13px;
    line-height: 1.5
}

.modal__done {
    border-radius: var(--radius-md);
    background: var(--c-accent-softer);
    color: var(--c-text-2);
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    margin: 0;
    padding: 14px 16px
}

.update-banner {
    z-index: 300;
    border-radius: var(--radius-pill);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-subtle);
    max-width: calc(100vw - 24px);
    box-shadow: var(--shadow-pop);
    align-items: center;
    gap: 14px;
    padding: 9px 10px 9px 16px;
    animation: .18s ds-fade;
    display: flex;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%)
}

.update-banner__text {
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    color: var(--c-text-2);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.update-banner__btn {
    border-radius: var(--radius-pill);
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    border: 0;
    padding: 6px 15px
}

.update-banner__btn:hover {
    background: var(--c-accent-strong)
}

.modal .select {
    justify-content: space-between;
    width: 100%
}

.modal .select__value {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    overflow: hidden
}

.share-block {
    margin: var(--space-4) 0
}

.social-share {
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    display: flex
}

.social-share__header {
    align-items: baseline;
    gap: var(--space-1);
    color: var(--c-text-2);
    font-size: var(--text-sm);
    display: inline-flex
}

.social-share__label {
    color: var(--c-text-4);
    font-weight: var(--fw-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .5px
}

.social-share__total {
    color: var(--c-text-4);
    font-size: var(--text-xs)
}

.social-share__total:before {
    content: "· "
}

.social-share__list {
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.social-share__item {
    margin: 0;
    padding: 0;
    position: relative
}

.social-share__btn {
    width: var(--control-md);
    height: var(--control-md);
    background: var(--c-surface-3);
    border-radius: var(--radius-md);
    color: var(--c-text-2);
    cursor: pointer;
    border: 0;
    justify-content: center;
    align-items: center;
    transition: background .12s, color .12s;
    display: inline-flex
}

.social-share__btn:hover {
    background: var(--share-bg, var(--c-surface-hover));
    color: var(--share-c, var(--c-text-1))
}

.social-share__btn.is-copied {
    color: var(--c-accent)
}

.social-share__btn--facebook {
    --share-c: #1877f2;
    --share-bg: #1877f224
}

.social-share__btn--twitter {
    --share-c: var(--c-text-1);
    --share-bg: var(--c-surface-hover)
}

.social-share__btn--messenger {
    --share-c: #0084ff;
    --share-bg: #0084ff24
}

.social-share__btn--reddit {
    --share-c: #ff4500;
    --share-bg: #ff450024
}

.social-share__btn--whatsapp {
    --share-c: #25d366;
    --share-bg: #25d36624
}

.social-share__btn--telegram {
    --share-c: #229ed9;
    --share-bg: #229ed924
}

.social-share__btn--copy {
    --share-c: var(--c-accent);
    --share-bg: var(--c-surface-hover)
}

.social-share__badge {
    background: var(--c-surface-2);
    color: var(--c-text-1);
    font-size: var(--text-2xs);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    pointer-events: none;
    padding: 2px 6px;
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translate(-50%)
}

.comments {
    margin-top: 52px
}

.comments__head {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    display: flex
}

.comments__title {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--c-text-1);
    margin: 0
}

.comments__tabs {
    align-items: center;
    gap: var(--space-1);
    border-radius: var(--radius-lg);
    background: var(--c-surface-2);
    padding: 4px;
    display: inline-flex
}

.comments__tab {
    border-radius: var(--radius-sm);
    cursor: pointer;
    height: 28px;
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--text-sm);
    color: var(--c-text-4);
    transition: background var(--ease), color var(--ease);
    background: 0 0;
    border: 0;
    align-items: center;
    padding: 0 11px;
    line-height: 1;
    display: inline-flex
}

.comments__tab:hover {
    color: var(--c-text-1);
    background: var(--c-surface-3)
}

.comments__tab.is-active {
    color: var(--c-accent-strong);
    background: var(--c-accent-soft)
}

.comments__sort {
    height: var(--control-md)
}

.comments__empty {
    text-align: center;
    color: var(--c-text-5);
    font-size: var(--text-base);
    background: var(--c-surface-1);
    border-radius: var(--radius-xl);
    padding: 40px 18px
}

.composer {
    align-items: flex-start;
    gap: 12px;
    display: flex
}

.composer__avatar {
    margin-top: 2px
}

.composer__box {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-surface-2);
    min-width: 0;
    transition: border-color var(--ease), box-shadow var(--ease);
    flex: auto;
    overflow: hidden
}

.composer--compact .composer__box {
    background: var(--c-surface-1)
}

.composer__box:focus-within {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-softer)
}

.composer__input {
    resize: vertical;
    width: 100%;
    min-height: 66px;
    color: var(--c-text-1);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    background: 0 0;
    border: 0;
    outline: none;
    padding: 12px 14px;
    line-height: 1.55;
    display: block
}

.composer--compact .composer__input {
    min-height: 48px
}

.composer__input::placeholder {
    color: var(--c-text-6)
}

.composer__bar {
    border-top: 1px solid var(--c-border);
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    display: flex
}

.composer__tools {
    align-items: center;
    gap: 2px;
    display: inline-flex
}

.composer__actions {
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.composer__fmt {
    border-radius: var(--radius-sm);
    width: 30px;
    height: 30px;
    color: var(--c-text-4);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.composer__fmt:hover {
    background: var(--c-surface-3);
    color: var(--c-text-2)
}

.composer__fmt-bold {
    font-weight: var(--fw-bold);
    font-size: var(--text-md);
    line-height: 1
}

.comments__list {
    flex-direction: column;
    gap: 22px;
    margin-top: 20px;
    display: flex
}

.comments__load-more {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface-2);
    width: 100%;
    color: var(--c-text-2);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    margin-top: 20px;
    padding: 11px;
    display: block
}

.comments__load-more:hover {
    background: var(--c-surface-3);
    color: var(--c-text-1)
}

.comment-node {
    --rail-x: 17px;
    --avatar-mid: 18px;
    --rail-top: 52px;
    --children-gap: 11px;
    --child-gap: 18px;
    min-width: 0
}

.comment-node__row {
    align-items: flex-start;
    gap: 12px;
    display: flex
}

.comment-node__gutter {
    flex-direction: column;
    flex: none;
    align-items: center;
    gap: 6px;
    display: flex
}

.comment-node__main {
    flex: auto;
    min-width: 0
}

.avatar {
    border-radius: var(--radius-pill);
    color: #fff;
    font-weight: var(--fw-bold);
    -webkit-user-select: none;
    user-select: none;
    flex: none;
    justify-content: center;
    align-items: center;
    line-height: 1;
    display: inline-flex
}

.comment__avatar {
    width: 36px;
    height: 36px;
    font-size: 14px
}

.comment-node__collapse {
    z-index: 1;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface-2);
    width: 20px;
    height: 20px;
    color: var(--c-text-4);
    cursor: pointer;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
    justify-content: center;
    align-items: center;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    position: relative
}

.comment-node__collapse:hover {
    color: var(--c-accent);
    border-color: var(--c-accent)
}

.comment__header {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    line-height: 1;
    display: flex
}

.comment__author {
    font-size: var(--text-base);
    font-weight: var(--fw-bold);
    color: var(--c-text-1)
}

.comment__rep {
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
    color: var(--c-text-4);
    background: var(--c-surface-3);
    border-radius: var(--radius-pill);
    padding: 2px 6px
}

.comment__role {
    letter-spacing: .6px
}

.comment__flair {
    font-size: var(--text-sm)
}

.comment__dot {
    color: var(--c-text-6)
}

.comment__age {
    font-size: var(--text-sm);
    color: var(--c-text-4)
}

.comment__edited {
    font-size: var(--text-xs);
    color: var(--c-text-5)
}

.comment__body {
    font-size: var(--text-base);
    color: var(--c-text-2);
    margin-top: 6px;
    line-height: 1.55
}

.comment__spoiler {
    text-align: left;
    border-radius: var(--radius-xs);
    background: var(--c-text-5);
    color: var(--c-text-5);
    font-size: var(--text-base);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: color var(--ease), background var(--ease);
    margin-top: 6px;
    padding: 0 4px;
    line-height: 1.55;
    display: inline-block
}

.comment__spoiler:hover {
    background: var(--c-text-4);
    color: var(--c-text-4)
}

.comment__spoiler.is-revealed {
    color: var(--c-text-2);
    cursor: default;
    -webkit-user-select: text;
    user-select: text;
    background: 0 0;
    padding: 0
}

.comment__image {
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-border);
    max-width: min(100%, 420px);
    margin-top: 10px
}

.comment__actions {
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-top: 5px;
    display: flex
}

.comment__vote {
    align-items: center;
    gap: 15px;
    display: inline-flex
}

.comment__vote-btn {
    height: 28px;
    color: var(--c-text-4);
    cursor: pointer;
    transition: color var(--ease);
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 6px;
    padding: 0;
    display: inline-flex
}

.comment__vote-btn:hover {
    color: var(--c-text-1)
}

.comment__vote-count {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-text-3)
}

.comment__vote-btn.is-up {
    color: var(--c-accent)
}

.comment__vote-btn.is-up .comment__vote-count {
    color: var(--c-accent-strong)
}

.comment__vote-btn.is-down,
.comment__vote-btn.is-down .comment__vote-count {
    color: var(--c-danger)
}

.comment__action {
    height: 28px;
    color: var(--c-text-4);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: color var(--ease), opacity var(--ease);
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 5px;
    padding: 0;
    display: inline-flex
}

.comment__action:hover {
    color: var(--c-text-1)
}

.comment__action-icon {
    opacity: .85
}

.comment__more {
    height: 28px;
    color: var(--c-text-4);
    cursor: pointer;
    transition: color var(--ease), opacity var(--ease);
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex
}

.comment__more:hover {
    color: var(--c-text-1)
}

@media (hover:hover) {

    .comment__action,
    .comment__more {
        opacity: 0
    }

    .comment-node__row:hover .comment__action,
    .comment-node__row:hover .comment__more,
    .comment-node__row:focus-within .comment__action,
    .comment-node__row:focus-within .comment__more {
        opacity: 1
    }
}

.comment-node:has(>.comment-node__children)>.comment-node__row {
    position: relative
}

.comment-node:has(>.comment-node__children)>.comment-node__row:after {
    content: "";
    left: var(--rail-x);
    top: var(--rail-top);
    bottom: calc(-1 * var(--children-gap));
    background: var(--c-border);
    pointer-events: none;
    width: 2px;
    position: absolute
}

.comment-node__children {
    margin-top: var(--children-gap);
    padding-left: var(--pad);
    --pad: 34px;
    position: relative
}

.comment-node__thread {
    cursor: pointer;
    z-index: 1;
    background: 0 0;
    border: 0;
    width: 24px;
    padding: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0
}

.comment-node__child-list {
    gap: var(--child-gap);
    flex-direction: column;
    min-width: 0;
    display: flex
}

.comment-node__child-list>.comment-node,
.comment-node__more {
    position: relative
}

.comment-node__child-list>.comment-node:before,
.comment-node__more:before {
    content: "";
    pointer-events: none;
    top: 0;
    left: calc(var(--rail-x) - var(--pad));
    width: calc(var(--pad) - var(--rail-x));
    height: var(--avatar-mid);
    border-left: 2px solid var(--c-border);
    border-bottom: 2px solid var(--c-border);
    border-bottom-left-radius: calc(var(--pad) - var(--rail-x));
    position: absolute
}

.comment-node__child-list>.comment-node:after {
    content: "";
    top: 0;
    bottom: calc(-1 * var(--child-gap));
    left: calc(var(--rail-x) - var(--pad));
    background: var(--c-border);
    pointer-events: none;
    width: 2px;
    position: absolute
}

.comment-node__child-list>.comment-node:last-child:after {
    display: none
}

.comment-node__show {
    border-radius: var(--radius-pill);
    background: var(--c-accent-soft);
    height: 28px;
    color: var(--c-accent);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background var(--ease);
    border: 0;
    align-items: center;
    margin-top: 10px;
    margin-left: 48px;
    padding: 0 12px;
    display: inline-flex
}

.comment-node__show:hover {
    background: #10a3ea42
}

.comment-node__more {
    border-radius: var(--radius-pill);
    background: var(--c-surface-2);
    height: 28px;
    color: var(--c-text-3);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    border: 0;
    align-self: flex-start;
    align-items: center;
    padding: 0 12px;
    display: inline-flex
}

.comment-node__more:hover {
    background: var(--c-surface-3);
    color: var(--c-text-1)
}

@media (max-width:600px) {
    .comments__head {
        gap: 10px
    }

    .comment__avatar {
        width: 30px;
        height: 30px;
        font-size: 12px
    }

    .comment-node {
        --rail-x: 14px;
        --avatar-mid: 15px;
        --rail-top: 44px;
        --children-gap: 7px;
        --child-gap: 14px
    }

    .comment-node__row {
        gap: 9px
    }

    .comment-node__children {
        --pad: 26px
    }

    .comment-node__thread {
        width: 16px
    }

    .comment-node__show {
        margin-left: 39px
    }

    .comment__actions {
        gap: 9px
    }
}