@import "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap";

:root {
    --bg: #181a1c;
    --bg-rgb: 24 26 28;
    --bg-2: #1c1f22;
    --bg-2-rgb: 28 31 34;
    --surface: #202326;
    --surface-rgb: 32 35 38;
    --surface-2: #282c30;
    --surface-2-rgb: 40 44 48;
    --surface-3: #30343a;
    --surface-3-rgb: 48 52 58;
    --reader-bg: #0c0c0c;
    --border: transparent;
    --border-2: transparent;
    --text-emphasis: #f5f5f5;
    --text-emphasis-rgb: 245 245 245;
    --text: #d4d4d4;
    --text-rgb: 212 212 212;
    --text-2: #a0a0a0;
    --text-2-rgb: 160 160 160;
    --text-3: #707070;
    --text-3-rgb: 112 112 112;
    --text-4: #4a4a4a;
    --text-4-rgb: 74 74 74;
    --accent: #8765eb;
    --accent-rgb: 135 101 235;
    --accent-2: #6f4dd3;
    --accent-2-rgb: 111 77 211;
    --accent-ink: #1a1133;
    --success: #22c55e;
    --success-rgb: 34 197 94;
    --warning: #eab308;
    --warning-rgb: 234 179 8;
    --danger: #ef4444;
    --danger-rgb: 239 68 68;
    --info: #0ea5e9;
    --info-rgb: 14 165 233;
    --radius-sm: 4px;
    --radius: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px #0006;
    --shadow-md: 0 8px 24px -8px #00000080;
    --shadow-lg: 0 20px 60px -20px #0009;
    --shadow-pop: 0 16px 40px -14px #0000008c;
    --shadow-card: none;
    --shadow-poster: 0 10px 22px -14px #000000b3;
    --container: 1400px;
    --gutter: 28px;
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --f-sans: "Geist", system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --f-mono: "Geist Mono", ui-monospace, "Menlo", "Monaco", monospace;
    --ctrl-xs: 24px;
    --ctrl-sm: 28px;
    --ctrl-md: 36px;
    --ctrl-lg: 40px;
    --text-2xs: .625rem;
    --text-xs: .6875rem;
    --text-sm: .75rem;
    --text-md: .8125rem;
    --text-base: .875rem;
    --text-lg: .9375rem;
    --text-xl: 1rem;
    --text-2xl: 1.25rem;
    --text-3xl: 1.5rem
}

:root[data-theme=light] {
    --bg: #fcfcfc;
    --bg-rgb: 252 252 252;
    --bg-2: #f6f7f9;
    --bg-2-rgb: 246 247 249;
    --surface: #f0f1f2;
    --surface-rgb: 240 241 242;
    --surface-2: #dfe3e8;
    --surface-2-rgb: 223 227 232;
    --surface-3: #cdd2d8;
    --surface-3-rgb: 205 210 216;
    --reader-bg: #fcfcfc;
    --border: transparent;
    --border-2: transparent;
    --text-emphasis: #0f172a;
    --text-emphasis-rgb: 15 23 42;
    --text: #1f2937;
    --text-rgb: 31 41 55;
    --text-2: #475569;
    --text-2-rgb: 71 85 105;
    --text-3: #64748b;
    --text-3-rgb: 100 116 139;
    --text-4: #94a3b8;
    --text-4-rgb: 148 163 184;
    --accent: #8765eb;
    --accent-rgb: 135 101 235;
    --accent-2: #6f4dd3;
    --accent-2-rgb: 111 77 211;
    --accent-ink: #fff;
    --shadow-sm: 0 1px 2px #0f172a0f;
    --shadow-md: 0 8px 24px -8px #0f172a1f;
    --shadow-lg: 0 20px 60px -20px #0f172a2e;
    --shadow-pop: 0 16px 40px -14px #0f172a29;
    --shadow-card: none;
    --shadow-poster: 0 6px 14px -8px #0000002e
}

* {
    box-sizing: border-box
}

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

html {
    height: 100%
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--f-sans);
    font-size: var(--text-base);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    font-feature-settings: "ss01", "cv11";
    flex-direction: column;
    min-height: 100%;
    line-height: 1.5;
    display: flex
}

svg {
    stroke-linecap: round;
    stroke-linejoin: round
}

a,
button,
[role=button],
input,
select,
textarea,
label,
summary {
    touch-action: manipulation
}

#app-root {
    flex-direction: column;
    flex: auto;
    min-height: 100vh;
    display: flex
}

#app-root>main {
    flex: auto;
    width: 100%
}

* {
    scrollbar-width: auto;
    scrollbar-color: rgb(var(--text-rgb) / .18) transparent
}

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

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

::-webkit-scrollbar-thumb {
    background: rgb(var(--text-rgb) / .15);
    background-clip: padding-box;
    border: 2px solid #0000;
    border-radius: 999px
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--text-rgb) / .28);
    background-clip: padding-box
}

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

.mono {
    font-family: var(--f-mono);
    font-feature-settings: "zero", "ss01"
}

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

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

.text-sm {
    font-size: var(--text-sm)
}

.text-md {
    font-size: var(--text-md)
}

.text-base {
    font-size: var(--text-base)
}

.text-lg {
    font-size: var(--text-lg)
}

.text-xl {
    font-size: var(--text-xl)
}

.text-2xl {
    font-size: var(--text-2xl)
}

.text-3xl {
    font-size: var(--text-3xl)
}

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

button {
    cursor: pointer;
    font-family: inherit
}

.topnav {
    z-index: 40;
    isolation: isolate;
    position: sticky;
    top: 0
}

.topnav:before {
    content: "";
    z-index: -1;
    background: rgb(var(--bg-2-rgb) / .92);
    -webkit-backdrop-filter: blur(14px);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.topnav__inner {
    max-width: var(--container);
    padding: 0 var(--gutter);
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    height: 64px;
    margin: 0 auto;
    display: grid
}

.logo {
    flex-shrink: 0;
    width: 7rem;
    height: 2rem;
    display: block;
    position: relative
}

.logo svg {
    width: 100%;
    height: 100%;
    transition: fill .2s ease-in-out, filter .2s ease-in-out;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.logo svg:first-child {
    fill: var(--text)
}

.logo svg:last-child {
    fill: var(--accent);
    animation: 1.2s ease-in-out infinite logo-glow
}

@keyframes logo-glow {
    0% {
        fill: rgb(var(--accent-rgb) / .9)
    }

    50% {
        fill: color-mix(in srgb, rgb(var(--accent-rgb)), white 30%)
    }

    to {
        fill: rgb(var(--accent-rgb) / .9)
    }
}

.logo:hover svg:last-child {
    animation: .35s linear forwards logo-glow-burst
}

@keyframes logo-glow-burst {
    0% {
        fill: rgb(var(--accent-rgb) / .2);
        filter: drop-shadow(0 0 0 rgb(var(--accent-rgb) / 0))
    }

    20% {
        fill: color-mix(in srgb, rgb(var(--accent-rgb)), white 30%);
        filter: drop-shadow(0 0 10px rgb(var(--accent-rgb))) drop-shadow(0 0 20px rgb(var(--accent-rgb)))
    }

    40% {
        fill: rgb(var(--accent-rgb) / .2);
        filter: drop-shadow(0 0 5px rgb(var(--accent-rgb) / .5))
    }

    60% {
        fill: color-mix(in srgb, rgb(var(--accent-rgb)), white 50%);
        filter: drop-shadow(0 0 15px rgb(var(--accent-rgb))) drop-shadow(0 0 30px rgb(var(--accent-rgb)))
    }

    80% {
        fill: color-mix(in srgb, rgb(var(--accent-rgb)), white 70%);
        filter: drop-shadow(0 0 15px rgb(var(--accent-rgb))) drop-shadow(0 0 30px rgb(var(--accent-rgb)))
    }

    to {
        fill: var(--accent);
        filter: none
    }
}

.logo--footer {
    width: 7.5rem;
    height: 2.5rem
}

.search {
    display: contents
}

.search__form {
    background: var(--surface);
    border-radius: var(--radius);
    width: 100%;
    min-width: 360px;
    max-width: 500px;
    height: var(--ctrl-lg);
    border: 0;
    justify-self: center;
    align-items: center;
    padding: 0 10px 0 38px;
    transition: background .15s, box-shadow .15s;
    display: flex;
    position: relative
}

.search__form:hover {
    background: rgb(var(--text-rgb) / .08)
}

.search__form:focus-within {
    background: var(--surface-2);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .22)
}

.search__icon {
    color: var(--text-3);
    position: absolute;
    left: 12px
}

.search input {
    color: var(--text);
    font: inherit;
    background: 0 0;
    border: 0;
    outline: none;
    flex: 1
}

.search__close,
.icon-btn.search-toggle {
    display: none
}

.search kbd {
    background: rgb(var(--bg-rgb) / .6);
    font-family: var(--f-sans);
    font-size: var(--text-xs);
    color: var(--text-3);
    border-radius: 4px;
    padding: 2px 6px
}

.search__browse {
    background: rgb(var(--bg-rgb) / .6);
    font-size: var(--text-xs);
    letter-spacing: .04em;
    color: var(--text-2);
    white-space: nowrap;
    border-radius: 4px;
    padding: 4px 10px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s
}

.search__browse:hover {
    background: rgb(var(--accent-rgb) / .16);
    color: var(--accent)
}

.topnav__right {
    justify-self: end;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    display: flex
}

.icon-btn {
    width: var(--ctrl-lg);
    height: var(--ctrl-lg);
    color: var(--text-2);
    border-radius: var(--radius);
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    transition: background .15s, color .15s;
    display: inline-flex
}

.icon-btn:hover {
    background: var(--surface);
    color: var(--text)
}

.login-btn {
    height: var(--ctrl-lg);
    border-radius: var(--radius);
    background: var(--text);
    color: var(--bg);
    font-weight: 600;
    font-size: var(--text-md);
    letter-spacing: .01em;
    border: 0;
    padding: 0 18px
}

.login-btn:hover {
    opacity: .9
}

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

.notifbell {
    position: relative
}

.notifbell__dot {
    background: var(--accent);
    pointer-events: none;
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 2px var(--bg-2);
    border-radius: 50%;
    position: absolute;
    top: 8px;
    right: 8px
}

.notifbell__badge {
    background: var(--accent);
    color: #fff;
    min-width: 16px;
    height: 16px;
    font-size: var(--text-2xs);
    text-align: center;
    pointer-events: none;
    box-shadow: 0 0 0 2px var(--bg-2);
    border-radius: 999px;
    padding: 0 4px;
    font-weight: 600;
    line-height: 16px;
    position: absolute;
    top: 2px;
    right: 2px
}

.notifpop {
    z-index: 50;
    background: var(--surface);
    border-radius: var(--radius);
    flex-direction: column;
    gap: 6px;
    width: 380px;
    max-width: calc(100vw - 24px);
    padding: 6px;
    animation: .14s ease-out both menu-in;
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    box-shadow: 0 18px 40px -12px #00000073, 0 2px 6px #00000040
}

:root[data-theme=light] .notifpop {
    box-shadow: 0 18px 40px -12px #0000002e, 0 2px 6px #00000014
}

.notifpop__head {
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    display: flex
}

.notifpop__head-text {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.notifpop__title {
    font-size: var(--text-2xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-4);
    margin: 0;
    font-weight: 600
}

.notifpop__head-sub {
    font-size: var(--text-xs);
    color: var(--text-3)
}

.notifpop__mark {
    border-radius: var(--radius-sm);
    height: 28px;
    color: var(--text-3);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    font-weight: 500;
    transition: color .12s, background .12s;
    display: inline-flex
}

.notifpop__mark:hover {
    color: var(--accent);
    background: var(--surface-2)
}

.notifpop__mark:disabled {
    opacity: .4;
    cursor: not-allowed
}

.notifpop__tabs {
    gap: 4px;
    padding: 0 4px;
    display: flex
}

.notifpop__tab {
    border-radius: var(--radius-sm);
    color: var(--text-3);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    background: 0 0;
    border: 0;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-weight: 500;
    transition: color .12s, background .12s;
    display: inline-flex
}

.notifpop__tab:hover {
    color: var(--text);
    background: var(--surface-2)
}

.notifpop__tab.is-on {
    color: var(--accent);
    background: rgb(var(--accent-rgb) / .14)
}

.notifpop__count {
    font-size: var(--text-2xs);
    font-variant-numeric: tabular-nums;
    background: rgb(var(--accent-rgb) / .25);
    color: var(--accent);
    border-radius: 999px;
    padding: 1px 6px;
    font-weight: 700
}

.notifpop__tab.is-on .notifpop__count {
    background: var(--accent);
    color: var(--accent-ink)
}

.notifpop__list {
    max-height: 420px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto
}

.notifpop__item {
    border-radius: var(--radius-sm);
    cursor: pointer;
    grid-template-columns: 32px 1fr auto;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    transition: background .12s;
    display: grid;
    position: relative
}

.notifpop__item:hover {
    background: var(--surface-2)
}

.notifpop__icon {
    background: var(--surface-2);
    width: 32px;
    height: 32px;
    color: var(--text-2);
    border-radius: 50%;
    flex-shrink: 0;
    place-items: center;
    display: grid
}

.notifpop__item.is-unread .notifpop__icon {
    background: rgb(var(--accent-rgb) / .16)
}

.notifpop__icon--chapter {
    color: var(--accent)
}

.notifpop__icon--group {
    color: #79c089
}

.notifpop__icon--reply {
    color: #64a3e8
}

.notifpop__icon--like {
    color: var(--danger)
}

.notifpop__icon--mod {
    color: #d68fc1
}

.notifpop__body {
    min-width: 0
}

.notifpop__text {
    font-size: var(--text-md);
    color: var(--text);
    line-height: 1.4
}

.notifpop__text strong,
.notifpop__text b {
    color: var(--text);
    font-weight: 600
}

.notifpop__text a {
    color: inherit;
    text-decoration: none;
    transition: color .15s
}

.notifpop__text a:hover,
.notifpop__text a:hover b,
.notifpop__text a:hover strong {
    color: var(--accent)
}

.notifpop__time {
    font-size: var(--text-xs);
    color: var(--text-4);
    margin-top: 4px
}

.notifpop__poster {
    border-radius: 4px;
    flex-shrink: 0;
    width: 44px;
    height: 60px;
    overflow: hidden
}

.notifpop__poster .poster {
    width: 100%;
    height: 100%
}

.notifpop__empty {
    text-align: center;
    color: var(--text-3);
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 12px;
    display: flex
}

.notifpop__empty svg {
    color: var(--text-4);
    margin-bottom: 4px
}

.notifpop__empty-title {
    font-size: var(--text-md);
    color: var(--text-2);
    font-weight: 600
}

.notifpop__empty-sub {
    font-size: var(--text-sm);
    color: var(--text-3)
}

.notifpop__all {
    font-size: var(--text-sm);
    color: var(--text-2);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 10px;
    font-weight: 500;
    text-decoration: none;
    transition: background .12s, color .12s;
    display: flex
}

.notifpop__all:hover {
    background: var(--surface-3);
    color: var(--accent)
}

.usermenu {
    position: relative
}

.usermenu__btn {
    width: var(--ctrl-lg);
    height: var(--ctrl-lg);
    border-radius: var(--radius);
    cursor: pointer;
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    transition: background .15s;
    display: inline-flex
}

.usermenu__btn:hover,
.usermenu__btn.is-on {
    background: var(--surface)
}

.usermenu__avatar {
    width: 28px;
    height: 28px;
    font-size: var(--text-sm);
    color: #ffffffeb;
    border-radius: 50%;
    place-items: center;
    font-weight: 600;
    display: grid;
    overflow: hidden
}

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

.usermenu__avatar--lg {
    width: 40px;
    height: 40px;
    font-size: var(--text-xl)
}

.is-fetching {
    opacity: .5;
    pointer-events: none;
    transition: opacity .15s
}

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

.panel__foot .view-more {
    margin-top: 10px
}

.usermenu__pop {
    z-index: 50;
    background: var(--surface);
    border-radius: var(--radius);
    flex-direction: column;
    gap: 6px;
    min-width: 240px;
    padding: 6px;
    animation: .14s ease-out both menu-in;
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    box-shadow: 0 18px 40px -12px #00000073, 0 2px 6px #00000040
}

:root[data-theme=light] .usermenu__pop {
    box-shadow: 0 18px 40px -12px #0000002e, 0 2px 6px #00000014
}

.usermenu__head {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    align-items: center;
    gap: 10px;
    padding: 10px;
    display: flex
}

.usermenu__id {
    min-width: 0
}

.usermenu__name {
    font-size: var(--text-md);
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden
}

.usermenu__handle {
    font-size: var(--text-xs);
    color: var(--text-3);
    margin-top: 2px
}

.usermenu__sep {
    display: none
}

.usermenu__list {
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.usermenu__item {
    border-radius: var(--radius-sm);
    width: 100%;
    color: var(--text-2);
    font: inherit;
    font-size: var(--text-md);
    text-align: left;
    cursor: pointer;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    text-decoration: none;
    transition: background .12s, color .12s;
    display: flex
}

.usermenu__item:hover {
    background: var(--surface-2);
    color: var(--text)
}

.usermenu__item svg {
    color: var(--text-3);
    flex-shrink: 0
}

.usermenu__item:hover svg {
    color: var(--text)
}

.usermenu__item--signout {
    color: var(--text-2);
    background: var(--surface-2);
    border-radius: var(--radius-sm)
}

.usermenu__item--signout:hover {
    color: var(--danger);
    background: rgb(var(--danger-rgb) / .12)
}

.usermenu__item--signout:hover svg {
    color: var(--danger)
}

.hero {
    position: relative;
    overflow: hidden
}

.hero__bg {
    filter: blur(40px)saturate(1.1);
    opacity: .7;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: scale(1.1)
}

.hero__stripes {
    background-image: repeating-linear-gradient(115deg, #0000 0 18px, #ffffff06 18px 19px);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.hero__shade {
    background: linear-gradient(180deg, rgb(var(--bg-rgb) / .55) 0%, rgb(var(--bg-rgb) / .8) 60%, var(--bg) 100%);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.hero__inner {
    max-width: var(--container);
    padding: 40px var(--gutter) 48px;
    grid-template-columns: 200px 1fr;
    align-items: center;
    gap: 32px;
    margin: 0 auto;
    display: grid;
    position: relative
}

.hero__poster {
    width: 200px
}

.hero__poster .poster {
    aspect-ratio: 200/280
}

.hero__text {
    max-width: 620px
}

.hero__eyebrow {
    color: var(--accent);
    font-size: var(--text-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    display: inline-flex
}

.hero__pulse {
    background: var(--accent);
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / .3);
    border-radius: 50%;
    animation: 1.8s ease-out infinite pulse
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / .4)
    }

    to {
        box-shadow: 0 0 0 10px #0000
    }
}

.hero__title {
    letter-spacing: -.02em;
    text-wrap: pretty;
    margin: 0 0 14px;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.05
}

.hero__meta {
    color: var(--text-2);
    font-size: var(--text-md);
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 14px;
    display: flex
}

.hero__dot {
    color: var(--text-4)
}

.hero__blurb {
    color: var(--text-2);
    max-width: 56ch;
    font-size: var(--text-lg);
    text-wrap: pretty;
    margin: 0 0 22px
}

.hero__actions {
    gap: 10px;
    margin-bottom: 18px;
    display: flex
}

.btn {
    height: var(--ctrl-lg);
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    font-size: var(--text-md);
    letter-spacing: .01em;
    border: 0;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    transition: background .15s, border-color .15s, color .15s;
    display: inline-flex
}

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

.btn--primary:hover {
    background: var(--accent-2)
}

.btn--ghost {
    color: var(--text);
    border-color: var(--border-2);
    background: 0 0
}

.btn--ghost:hover {
    background: var(--surface)
}

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

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

.input {
    width: 100%;
    height: var(--ctrl-md);
    background: var(--surface);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    font-size: var(--text-md);
    border: 0;
    outline: none;
    padding: 0 12px;
    transition: background .12s, box-shadow .12s
}

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

.input:focus {
    background: var(--surface);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .22)
}

input::-moz-placeholder {
    color: rgb(var(--text-rgb) / .12);
    opacity: 1
}

textarea::-moz-placeholder {
    color: rgb(var(--text-rgb) / .12);
    opacity: 1
}

input::placeholder,
textarea::placeholder {
    color: rgb(var(--text-rgb) / .12);
    opacity: 1
}

.reportdlg .input,
.histdlg .input,
.minidlg .input,
.auth__card .input,
.recdialog .input,
.ucoll-dlg .input,
.upload-dialog .input,
.settings-dialog .input,
.upanel .input,
.input--alt {
    background: var(--surface-2)
}

.reportdlg .input:hover,
.histdlg .input:hover,
.minidlg .input:hover,
.auth__card .input:hover,
.recdialog .input:hover,
.ucoll-dlg .input:hover,
.upload-dialog .input:hover,
.settings-dialog .input:hover,
.upanel .input:hover,
.input--alt:hover {
    background: var(--surface-3)
}

.reportdlg .input:focus,
.histdlg .input:focus,
.minidlg .input:focus,
.auth__card .input:focus,
.recdialog .input:focus,
.ucoll-dlg .input:focus,
.upload-dialog .input:focus,
.settings-dialog .input:focus,
.upanel .input:focus,
.input--alt:focus {
    background: var(--surface-2)
}

.input--area {
    resize: vertical;
    height: auto;
    min-height: 96px;
    padding: 8px 12px;
    line-height: 1.5
}

.input--select {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 36px
}

.hero__genres {
    font-size: var(--text-xs);
    letter-spacing: .14em;
    flex-wrap: wrap;
    gap: 8px;
    display: flex
}

.hero__genre {
    color: var(--text-3);
    background: rgb(var(--surface-rgb) / .6);
    border-radius: 999px;
    padding: 3px 10px
}

.layout {
    max-width: var(--container);
    padding: 36px var(--gutter) 80px;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 44px;
    margin: 0 auto;
    display: grid
}

.layout--top {
    padding-top: 32px
}

.layout--single {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 32px
}

.main-col {
    flex-direction: column;
    min-width: 0;
    display: flex
}

.main-col>* {
    margin-top: 48px
}

.main-col>:first-child {
    margin-top: 0
}

.main-col>.section--minimized,
.main-col>.section--minimized+* {
    margin-top: 20px
}

.main-col>.section--minimized+.section--minimized {
    margin-top: 12px
}

.side-col {
    flex-direction: column;
    gap: 36px;
    display: flex
}

.section {
    min-width: 0
}

.rail-minimized {
    background: var(--surface);
    border: 0;
    border-radius: 8px;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    display: flex
}

.rail-minimized__title {
    font-size: var(--text-sm);
    color: var(--text-2);
    font-weight: 600
}

.rail-minimized__btn {
    font-family: inherit;
    font-size: var(--text-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 6px;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-weight: 600;
    display: inline-flex
}

.rail-minimized__btn:hover {
    background: rgb(var(--text-rgb) / .06);
    color: var(--text)
}

.section__header {
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 18px;
    display: flex
}

.section__kicker {
    font-family: var(--f-mono);
    font-size: var(--text-xs);
    letter-spacing: .16em;
    color: var(--text-4);
    text-transform: uppercase;
    margin-bottom: 6px
}

.section__title {
    font-size: var(--text-2xl);
    letter-spacing: -.01em;
    margin: 0;
    font-weight: 600
}

.section__controls {
    align-items: center;
    gap: 12px;
    display: flex
}

.nav-btns {
    gap: 4px;
    display: flex
}

.nav-btn {
    background: var(--surface);
    width: 34px;
    height: 34px;
    color: var(--text-2);
    border-radius: var(--radius-sm);
    border: 0;
    justify-content: center;
    align-items: center;
    transition: background .15s, color .15s;
    display: inline-flex
}

.nav-btn:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text)
}

.nav-btn:disabled {
    opacity: .35;
    cursor: default
}

.filter-group {
    background: var(--surface);
    border-radius: var(--radius-sm);
    height: 34px;
    padding: 3px;
    display: inline-flex
}

.filter-btn {
    color: var(--text-3);
    font-size: var(--text-md);
    background: 0 0;
    border: 0;
    border-radius: 4px;
    align-items: center;
    padding: 0 14px;
    font-weight: 500;
    transition: color .15s, background .15s;
    display: inline-flex
}

.filter-btn:hover {
    color: var(--text)
}

.filter-btn.is-active {
    color: var(--text);
    background: var(--surface-2)
}

.header-pager {
    gap: 4px;
    margin-left: 4px;
    display: inline-flex
}

.header-pager__btn {
    background: var(--surface);
    width: 30px;
    height: 30px;
    color: var(--text-2);
    border-radius: var(--radius-sm);
    border: 0;
    justify-content: center;
    align-items: center;
    transition: background .15s, color .15s, opacity .15s;
    display: inline-flex
}

.header-pager__btn:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text)
}

.header-pager__btn:disabled {
    opacity: .35;
    cursor: default
}

.rail-wrap {
    position: relative
}

.rail {
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--cards-per-view) - 1) * 14px) / var(--cards-per-view));
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 14px;
    padding-bottom: 4px;
    display: grid;
    overflow-x: auto
}

.rail::-webkit-scrollbar {
    display: none
}

.rail__item {
    scroll-snap-align: start;
    min-width: 0
}

.rail__fade {
    display: none
}

.card {
    color: var(--text);
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding-bottom: 6px;
    display: flex
}

.card__poster-wrap {
    position: relative;
    overflow: visible
}

.card__rank-slot {
    padding-left: 0;
    position: relative
}

.card__rank {
    z-index: 3;
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    min-width: 22px;
    height: 22px;
    font-family: var(--f-sans);
    font-size: var(--text-sm);
    letter-spacing: .02em;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    background: #000000a6;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    padding: 0 7px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    position: absolute;
    top: 8px;
    left: 8px
}

.card__rank:before {
    content: "#";
    opacity: .55;
    margin-right: 1px;
    font-weight: 500
}

.card__rank--double {
    padding: 0 8px
}

.pager {
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    display: flex
}

.pager__btn {
    height: var(--ctrl-md);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-md);
    border: 0;
    align-items: center;
    gap: 6px;
    padding: 0 18px;
    font-weight: 500;
    transition: background .15s, opacity .15s, color .15s;
    display: inline-flex
}

.pager__btn:hover:not(:disabled) {
    background: var(--surface-2)
}

.pager__btn:disabled {
    opacity: .35;
    cursor: default;
    color: var(--text-3)
}

.pager__info {
    color: var(--text-3);
    font-size: var(--text-md);
    padding: 0 14px
}

.pager__num {
    color: var(--text);
    font-weight: 600
}

.nav-menu {
    position: relative
}

.nav-btn--kebab.is-active {
    background: var(--surface-2);
    color: var(--text)
}

.nav-menu__pop {
    z-index: 50;
    background: var(--surface);
    border-radius: var(--radius);
    min-width: 180px;
    padding: 6px;
    animation: .12s ease-out both menu-in;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    box-shadow: 0 18px 40px -12px #00000073, 0 2px 6px #00000040
}

:root[data-theme=light] .nav-menu__pop {
    box-shadow: 0 18px 40px -12px #0000002e, 0 2px 6px #00000014
}

@keyframes menu-in {
    0% {
        opacity: 0;
        transform: translateY(-4px)scale(.98)
    }

    to {
        opacity: 1;
        transform: translateY(0)scale(1)
    }
}

.nav-menu__label {
    font-size: var(--text-xs);
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 8px 10px 4px;
    font-weight: 600
}

.nav-menu__item {
    width: 100%;
    color: var(--text-2);
    font-size: var(--text-md);
    text-align: left;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 6px;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-weight: 500;
    transition: background .12s, color .12s;
    display: flex
}

.nav-menu__item:hover {
    background: rgb(var(--text-rgb) / .06);
    color: var(--text)
}

.nav-menu__item.is-active {
    color: var(--text)
}

.nav-menu__sep {
    background: rgb(var(--text-rgb) / .08);
    height: 1px;
    margin: 4px 0
}

.nav-menu__check {
    width: 14px;
    height: 14px;
    color: var(--accent);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.search-pop {
    z-index: 60;
    background: var(--surface);
    border-radius: var(--radius);
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    animation: .14s ease-out both menu-in;
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    box-shadow: 0 18px 40px -12px #00000073, 0 2px 6px #00000040
}

:root[data-theme=light] .search-pop {
    box-shadow: 0 18px 40px -12px #0000002e, 0 2px 6px #00000014
}

.search-pop__section {
    flex-direction: column;
    gap: 2px;
    display: flex
}

.search-pop__label {
    font-size: var(--text-2xs);
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: .12em;
    justify-content: space-between;
    align-items: center;
    padding: 4px 10px;
    font-weight: 600;
    display: flex
}

.search-pop__clear {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--text-sm);
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0
}

.search-pop__clear:hover {
    color: var(--text)
}

.search-pop__list {
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.search-pop__item {
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: var(--text-base);
    align-items: stretch;
    transition: background .12s, color .12s;
    display: flex
}

.search-pop__item:hover,
.search-pop__item.is-focused {
    background: var(--surface-2);
    color: var(--text)
}

.search-pop__item--history {
    justify-content: space-between
}

.search-pop__item--history .search-pop__item-title {
    flex: 1
}

.search-pop__item-link {
    color: inherit;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 10px;
    text-decoration: none;
    display: flex
}

.search-pop__item-link:hover {
    color: inherit
}

.search-pop__remove {
    width: 22px;
    height: 22px;
    color: var(--text-4);
    font-size: var(--text-xl);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 4px;
    flex-shrink: 0;
    align-self: center;
    place-items: center;
    margin-right: 6px;
    line-height: 1;
    transition: background .12s, color .12s;
    display: inline-grid
}

.search-pop__remove:hover {
    color: var(--text);
    background: var(--bg-2)
}

.search-pop__item-meta {
    font-size: var(--text-sm);
    color: var(--text-3);
    flex: none;
    margin-left: auto
}

.search-pop__empty {
    text-align: center;
    padding: 22px 16px 24px
}

.search-pop__empty-title {
    font-size: var(--text-base);
    color: var(--text);
    margin-bottom: 4px;
    font-weight: 500
}

.search-pop__empty-sub {
    font-size: var(--text-sm);
    color: var(--text-3)
}

.search-pop__item-sub {
    align-items: center;
    gap: 6px;
    display: inline-flex
}

.search-pop__sep {
    color: var(--text-4)
}

.search-pop__type {
    font-size: var(--text-sm);
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-3);
    background: 0 0;
    border-radius: 0;
    padding: 0;
    font-weight: 500;
    display: inline
}

.search-pop__item-icon {
    width: 16px;
    height: 16px;
    color: var(--text-3);
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.search-pop__item--result {
    gap: 12px;
    padding: 8px 10px
}

.search-pop__thumb {
    border-radius: 4px;
    flex: none;
    width: 40px;
    height: 40px;
    overflow: hidden
}

.search-pop__thumb .poster {
    border-radius: 4px;
    width: 40px;
    aspect-ratio: 1 !important
}

.search-pop__item-body {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    display: flex
}

.search-pop__item-title {
    font-size: var(--text-base);
    color: var(--text);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500;
    overflow: hidden
}

.search-pop__item-sub {
    font-size: var(--text-sm);
    color: var(--text-3);
    margin-top: 1px
}

.search-pop__item-hit {
    background: rgb(var(--accent-rgb) / .2);
    color: var(--text);
    border-radius: 2px;
    padding: 0 2px
}

.search-pop__genres {
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 10px 12px;
    display: flex
}

.search-pop__chip {
    font-size: var(--text-sm);
    background: var(--surface);
    color: var(--text-2);
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    padding: 5px 10px;
    transition: background .12s, color .12s
}

.search-pop__chip:hover {
    background: rgb(var(--text-rgb) / .08);
    color: var(--text)
}

.search-pop__empty {
    text-align: center;
    color: var(--text-3);
    font-size: var(--text-md);
    padding: 22px 16px
}

.search-pop__hint {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text-3);
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    display: flex
}

.search-pop__hint kbd {
    background: var(--surface-3);
    font-family: var(--f-mono);
    font-size: var(--text-xs);
    color: var(--text-2);
    border-radius: 3px;
    padding: 2px 6px
}

.search-pop__more {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: var(--text-md);
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-decoration: none;
    transition: background .15s, color .15s;
    display: flex
}

.search-pop__more:hover {
    background: var(--surface-3);
    color: var(--text)
}

.search-pop__more strong {
    color: var(--text);
    font-weight: 600
}

.search-pop__more svg {
    color: var(--text-3);
    flex-shrink: 0;
    transition: color .15s, transform .15s
}

.search-pop__more:hover svg {
    color: var(--accent);
    transform: translate(2px)
}

.card__body {
    text-align: center;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 0 2px;
    display: flex
}

.card__title {
    font-size: var(--text-base);
    letter-spacing: -.005em;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 4px;
    font-weight: 600;
    line-height: 1.3;
    transition: color .15s;
    display: -webkit-box;
    overflow: hidden
}

@media (hover:hover) {
    .card:hover .card__title {
        color: var(--accent)
    }
}

.card__meta {
    font-size: var(--text-sm);
    color: var(--text-3);
    white-space: nowrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 0 2px;
    display: flex
}

.card__ch {
    color: var(--text-2);
    align-items: center;
    gap: 4px;
    font-weight: 500;
    display: inline-flex
}

.card__meta-icon {
    color: var(--text-3);
    flex-shrink: 0
}

.card__dot {
    color: var(--text-4)
}

.card__time {
    font-family: var(--f-mono);
    font-size: var(--text-xs)
}

.poster {
    aspect-ratio: 200/280;
    border-radius: var(--radius);
    background: linear-gradient(110deg, var(--surface) 0%, var(--surface-2) 40%, var(--surface) 60%, var(--surface) 100%);
    box-shadow: var(--shadow-poster);
    isolation: isolate;
    background-size: 250% 100%;
    transition: transform .2s;
    animation: 1.6s linear infinite poster-shimmer;
    position: relative;
    overflow: hidden
}

@keyframes poster-shimmer {
    0% {
        background-position: 100% 0
    }

    to {
        background-position: -150% 0
    }
}

.poster svg,
.poster img {
    object-fit: cover;
    background: var(--surface);
    width: 100%;
    height: 100%;
    display: block
}

.poster img[src]:not([src=""]) {
    z-index: 1;
    position: relative
}

.poster:has(img[src]:not([src=""])) {
    background: var(--surface);
    animation: none
}

.poster.is-blurred img {
    filter: blur(14px)
}

.card__action {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    background: #0009;
    border: 0;
    border-radius: 50%;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    transition: opacity .15s, background .15s, transform .15s;
    display: grid;
    position: absolute;
    top: 6px;
    right: 6px
}

.card__action:focus-visible {
    opacity: 1
}

@media (hover:hover) {
    .card:hover .card__action {
        opacity: 1
    }

    .card__action:hover {
        background: var(--accent);
        transform: scale(1.05)
    }
}

@media (hover:none) {
    .card__action {
        opacity: 1
    }
}

.card__action svg {
    width: 14px;
    height: 14px
}

.card__action.is-on {
    background: var(--accent)
}

.card__menu {
    z-index: 3;
    position: absolute;
    top: 6px;
    right: 6px
}

.card__menu .card__action--menu {
    position: static
}

.card__menu.is-open .card__action--menu {
    opacity: 1;
    background: var(--accent)
}

.card__menu-pop {
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto
}

.card__progress {
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 1px 3px #0006);
    place-items: center;
    width: 36px;
    height: 36px;
    display: inline-grid;
    position: absolute;
    bottom: 6px;
    right: 6px
}

.card__progress svg {
    width: 100%;
    height: 100%;
    display: block
}

.card__progress__text {
    font-family: var(--f-mono);
    color: #fff;
    letter-spacing: .02em;
    place-items: center;
    font-size: 9px;
    font-weight: 600;
    display: grid;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.poster__shade {
    pointer-events: none;
    background: linear-gradient(#0000 55%, #00000059);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

@media (hover:hover) {
    .card:not(.card--compact):hover .poster {
        transform: translateY(-2px)
    }
}

.poster__chapter {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-family: var(--f-mono);
    font-size: var(--text-xs);
    letter-spacing: .04em;
    background: #0000008c;
    border: 1px solid #ffffff14;
    border-radius: 3px;
    padding: 3px 7px;
    position: absolute;
    bottom: 8px;
    left: 8px
}

.grid-updates {
    grid-template-columns: repeat(5, 1fr);
    gap: 26px 14px;
    display: grid
}

.section__footer {
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
    display: flex
}

.page-indicator {
    gap: 6px;
    display: flex
}

.dot {
    background: var(--surface);
    border-radius: 2px;
    width: 22px;
    height: 3px;
    transition: background .2s
}

.dot.is-active {
    background: var(--accent)
}

.see-all {
    font-size: var(--text-md);
    color: var(--text-2);
    font-weight: 500
}

.see-all:hover {
    color: var(--accent)
}

.panel {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden
}

.panel--bare {
    box-shadow: none;
    background: 0 0;
    border-radius: 0;
    overflow: visible
}

.panel__tabs-inline {
    letter-spacing: -.01em;
    align-items: baseline;
    gap: 10px;
    padding: 0 0 16px;
    font-size: 1.125rem;
    font-weight: 700;
    display: flex
}

.panel__tab-inline {
    color: var(--text-4);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0;
    font-weight: 700;
    transition: color .15s
}

.panel__tab-inline:hover {
    color: var(--text-2)
}

.panel__tab-inline.is-active {
    color: var(--text)
}

.panel__tab-sep {
    color: var(--text-4);
    font-weight: 400
}

.panel--bare .panel__body {
    padding: 0
}

.view-more {
    background: var(--surface);
    width: 100%;
    color: var(--text-2);
    border-radius: var(--radius);
    font-size: var(--text-md);
    letter-spacing: .005em;
    cursor: pointer;
    border: 0;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 12px 16px;
    font-family: inherit;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
    display: inline-flex
}

.view-more:hover {
    background: var(--surface-2);
    color: var(--text)
}

.view-more svg {
    transition: transform .15s
}

.view-more:hover svg {
    transform: translate(2px)
}

.side-list {
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.side-item {
    border-radius: var(--radius);
    cursor: pointer;
    grid-template-columns: 64px 1fr;
    align-items: stretch;
    gap: 14px;
    margin: 0 -10px;
    padding: 10px;
    transition: background .15s;
    display: grid
}

.side-item:hover {
    background: rgb(var(--text-rgb) / .025)
}

.side-item__poster {
    flex-shrink: 0;
    width: 64px;
    display: block
}

.side-item__poster .poster {
    border-radius: 4px;
    width: 64px;
    aspect-ratio: 5/7 !important
}

.side-item__body {
    min-width: 0;
    color: inherit;
    flex-direction: column;
    gap: 4px;
    padding: 2px 0;
    text-decoration: none;
    display: flex
}

.side-item__meta {
    margin-top: auto
}

.side-item__kicker {
    font-family: var(--f-sans);
    font-size: var(--text-2xs);
    letter-spacing: .14em;
    color: var(--text-4);
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1
}

.side-item__title {
    font-size: var(--text-base);
    letter-spacing: -.005em;
    color: var(--text);
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    font-weight: 600;
    line-height: 1.25;
    transition: color .15s;
    display: -webkit-box;
    overflow: hidden
}

.side-item:hover .side-item__title {
    color: var(--accent)
}

.side-item__meta {
    font-size: var(--text-sm);
    color: var(--text-3);
    align-items: baseline;
    gap: 10px;
    line-height: 1;
    display: flex
}

.side-item__ch {
    color: var(--text-2);
    font-weight: 500
}

.side-item__time {
    color: var(--text-3)
}

.pwa-banner {
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    padding: 12px 14px;
    text-decoration: none;
    transition: background .15s;
    display: flex
}

.pwa-banner:hover {
    background: var(--surface-2)
}

.pwa-banner__icon {
    background: rgb(var(--accent-rgb) / .22);
    width: 36px;
    height: 36px;
    color: var(--accent);
    border-radius: 8px;
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.pwa-banner__body {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.25;
    display: flex
}

.pwa-banner__title {
    font-size: var(--text-base);
    color: var(--text);
    font-weight: 600
}

.pwa-banner__sub {
    font-size: var(--text-sm);
    color: var(--text-3);
    margin-top: 2px
}

.pwa-banner__arrow {
    color: var(--text-3);
    transition: transform .15s, color .15s
}

.pwa-banner:hover .pwa-banner__arrow {
    color: var(--text);
    transform: translate(2px)
}

.comments {
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.comment {
    -moz-column-gap: 12px;
    grid-template: "thumb title" "thumb body" "thumb foot" /30px 1fr;
    gap: 8px 12px;
    display: grid;
    position: relative
}

.comment__poster {
    grid-area: thumb;
    align-self: start;
    width: 30px;
    display: block
}

.comment__poster .poster {
    border-radius: 6px;
    width: 30px
}

.comment__title {
    font-size: var(--text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-2);
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgb(var(--text-rgb) / .05);
    border-radius: 4px;
    grid-area: title;
    align-self: center;
    padding: 4px 8px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: color .15s, background .15s;
    display: block;
    overflow: hidden
}

.comment__title:hover {
    color: var(--text);
    background: rgb(var(--text-rgb) / .1)
}

.comment__content {
    font-size: var(--text-base);
    color: var(--text);
    -webkit-line-clamp: 3;
    text-wrap: pretty;
    -webkit-box-orient: vertical;
    grid-area: body;
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    overflow: hidden
}

.comment__foot {
    font-size: var(--text-sm);
    grid-area: foot;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    display: flex
}

.comment__user {
    color: var(--accent);
    font-weight: 500;
    font-size: var(--text-md);
    text-decoration: none
}

.comment__user:hover {
    text-decoration: underline
}

.comment__time {
    color: var(--text-3);
    font-size: var(--text-sm)
}

@media (max-width:1180px) {
    .layout {
        grid-template-columns: 1fr;
        gap: 36px
    }

    .side-col {
        position: static
    }
}

@media (max-width:960px) {
    .topnav__inner {
        gap: 12px
    }

    .search__form {
        min-width: 0
    }

    .layout {
        padding: 28px var(--gutter) 56px;
        gap: 32px
    }

    .main-col>* {
        margin-top: 36px
    }

    .main-col>:first-child {
        margin-top: 0
    }

    .main-col>.section--minimized,
    .main-col>.section--minimized+* {
        margin-top: 18px
    }

    .main-col>.section--minimized+.section--minimized {
        margin-top: 10px
    }

    .side-col {
        gap: 28px
    }

    .grid-updates {
        grid-template-columns: repeat(4, 1fr)
    }

    .rail {
        grid-auto-columns: calc(25% - 10.5px) !important
    }

    .footer__inner {
        padding: 48px var(--gutter) 28px
    }
}

@media (max-width:760px) {
    .hero__inner {
        padding: 28px var(--gutter);
        grid-template-columns: 140px 1fr;
        gap: 20px
    }

    .hero__poster {
        width: 140px
    }

    .grid-updates {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px 12px
    }

    .rail {
        gap: 12px;
        grid-auto-columns: calc(33.3333% - 8px) !important
    }

    .search kbd,
    .search__browse,
    .logo__tld {
        display: none
    }

    .section__header {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px
    }

    .section__controls {
        margin-left: auto
    }

    .section__title {
        font-size: var(--text-xl)
    }

    .announce {
        margin-bottom: 18px
    }
}

@media (max-width:600px) {
    :root {
        --gutter: 16px
    }

    .topnav__inner {
        gap: 8px;
        height: 56px
    }

    .topnav__right {
        gap: 4px
    }

    .icon-btn {
        width: var(--ctrl-md);
        height: var(--ctrl-md)
    }

    .notifpop {
        top: calc(56px + var(--space-xs));
        left: var(--space-sm);
        right: var(--space-sm);
        width: auto;
        max-width: none;
        max-height: calc(100vh - 56px - var(--space-xs) * 2);
        position: fixed;
        overflow-y: auto
    }

    .icon-btn.search-toggle {
        justify-self: end;
        display: inline-flex
    }

    .search__form,
    .search.is-mobile-open .icon-btn.search-toggle {
        display: none
    }

    .search.is-mobile-open {
        z-index: 50;
        animation: .15s ease-out both searchFadeIn;
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0
    }

    .search__backdrop {
        z-index: 39;
        -webkit-backdrop-filter: blur(4px);
        background: #00000073;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0
    }

    .search.is-mobile-open .search__form {
        z-index: 40;
        top: calc(56px + var(--space-xs));
        left: var(--space-sm);
        right: var(--space-sm);
        width: calc(100% - var(--space-sm) * 2);
        min-width: 0;
        max-width: none;
        height: var(--ctrl-lg);
        border-radius: var(--radius);
        background: var(--surface);
        border: 0;
        align-items: center;
        gap: 4px;
        margin: 0;
        padding: 0 6px 0 8px;
        display: flex;
        position: absolute;
        box-shadow: 0 18px 40px -12px #00000073, 0 2px 6px #00000040
    }

    .search__close {
        width: 30px;
        height: 30px;
        color: var(--text-3);
        border-radius: var(--radius-sm);
        cursor: pointer;
        background: 0 0;
        border: 0;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        display: inline-flex
    }

    .search__close:hover {
        color: var(--text);
        background: var(--surface-2)
    }

    .search.is-mobile-open .search__icon {
        color: var(--text-3);
        flex-shrink: 0;
        position: static;
        left: auto
    }

    .search.is-mobile-open .search__form input {
        font-size: var(--text-base);
        flex: 1;
        min-width: 0;
        height: 100%;
        padding: 0 2px
    }

    .search.is-mobile-open .search__form kbd,
    .search.is-mobile-open .search__form .search__browse {
        display: none
    }

    .search.is-mobile-open .search-pop {
        border-radius: var(--radius);
        max-height: calc(100vh - 80px);
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        box-shadow: 0 18px 40px -16px #0000008c
    }

    @keyframes searchFadeIn {
        0% {
            opacity: 0
        }

        to {
            opacity: 1
        }
    }

    .login-btn {
        height: var(--ctrl-md);
        font-size: var(--text-sm);
        padding: 0 12px
    }

    .layout {
        padding: 20px var(--gutter) 48px;
        gap: 28px
    }

    .main-col>* {
        margin-top: 32px
    }

    .main-col>:first-child {
        margin-top: 0
    }

    .main-col>.section--minimized,
    .main-col>.section--minimized+* {
        margin-top: 16px
    }

    .main-col>.section--minimized+.section--minimized {
        margin-top: 8px
    }

    .side-col {
        gap: 24px
    }

    .footer {
        margin-top: 56px
    }

    .footer__inner {
        padding: 40px var(--gutter) 24px;
        gap: 28px
    }
}

@media (max-width:480px) {
    .grid-updates {
        grid-template-columns: repeat(2, 1fr)
    }

    .rail {
        grid-auto-columns: calc(50% - 6px) !important
    }

    .hero__inner {
        grid-template-columns: 1fr
    }

    .hero__poster {
        width: 120px
    }

    .logo__name {
        font-size: var(--text-md)
    }

    .section__title {
        font-size: var(--text-lg)
    }
}

@media (max-width:380px) {
    :root {
        --gutter: 12px
    }

    .rail {
        gap: 10px;
        grid-auto-columns: calc(50% - 5px) !important
    }
}

.settings {
    position: relative
}

.icon-btn--active {
    background: var(--surface);
    color: var(--text)
}

.settings-dialog {
    z-index: 200;
    -webkit-backdrop-filter: blur(6px);
    background: #000000a6;
    place-items: center;
    padding: 24px;
    animation: .14s ease-out dialog-fade;
    display: grid;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

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

@keyframes dialog-pop {
    0% {
        opacity: 0;
        transform: translateY(8px)scale(.97)
    }
}

.settings-dialog__panel {
    background: var(--surface);
    border-radius: var(--radius-lg);
    flex-direction: column;
    width: min(460px, 100%);
    animation: .2s cubic-bezier(.2, .9, .3, 1.15) both dialog-pop;
    display: flex;
    overflow: hidden;
    box-shadow: 0 40px 80px -20px #0009, 0 4px 12px #0000004d
}

:root[data-theme=light] .settings-dialog__panel {
    box-shadow: 0 40px 80px -20px #0003, 0 4px 12px #00000014
}

.settings-dialog__head {
    border-bottom: 1px solid var(--surface-2);
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px 12px;
    display: flex
}

.settings-dialog__title {
    font-size: var(--text-lg);
    letter-spacing: -.01em;
    color: var(--text);
    margin: 0;
    font-weight: 600
}

.settings-dialog__sub {
    font-size: var(--text-2xs);
    letter-spacing: .08em;
    color: var(--text-4);
    margin: 2px 0 0
}

.settings-dialog__close {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition: background .15s, color .15s;
    display: inline-flex
}

.settings-dialog__close:hover {
    background: var(--bg-2);
    color: var(--text)
}

.settings-dialog__head-left {
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    display: flex
}

.settings-dialog__back {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin-top: -2px;
    transition: background .15s, color .15s;
    display: inline-flex
}

.settings-dialog__back:hover {
    background: var(--bg-2);
    color: var(--text)
}

.settings-advanced-row {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    width: 100%;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    padding: 10px 12px;
    transition: background .15s, border-color .15s;
    display: flex
}

.settings-advanced-row:hover {
    background: rgb(var(--accent-rgb) / .08);
    border-color: rgb(var(--accent-rgb) / .4)
}

.settings-advanced-row__text {
    text-align: left;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.settings-advanced-row__title {
    font-size: var(--text-md);
    font-weight: 600
}

.settings-advanced-row__sub {
    font-size: var(--text-xs);
    color: var(--text-3)
}

.settings-advanced-row>svg {
    color: var(--text-3);
    flex-shrink: 0
}

.settings-sec__hint-clear {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-3);
    font: inherit;
    font-size: var(--text-2xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 999px;
    padding: 3px 10px;
    transition: background .15s, color .15s, border-color .15s
}

.settings-sec__hint-clear:hover {
    background: rgb(var(--danger-rgb, 239 68 68) / .12);
    color: var(--danger, #ef4444);
    border-color: rgb(var(--danger-rgb, 239 68 68) / .4)
}

.settings-loading {
    font-size: var(--text-xs);
    color: var(--text-4);
    letter-spacing: .05em;
    padding: 8px 4px
}

.settings-chip.settings-chip--block.is-on {
    background: rgb(var(--danger-rgb, 239 68 68) / .14);
    color: var(--danger, #ef4444);
    border-color: rgb(var(--danger-rgb, 239 68 68) / .4)
}

.settings-chip.settings-chip--block.is-on .settings-chip__check {
    background: var(--danger, #ef4444);
    color: #fff
}

.settings-dialog__body {
    flex-direction: column;
    gap: 16px;
    padding: 14px 18px 16px;
    display: flex;
    overflow-y: auto
}

.settings-sec {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.settings-sec__head {
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    display: flex
}

.settings-sec__label {
    font-size: var(--text-xs);
    letter-spacing: .14em;
    color: var(--text-3)
}

.settings-sec__hint {
    font-size: var(--text-2xs);
    letter-spacing: .08em;
    color: var(--text-4)
}

.settings-chips {
    flex-wrap: wrap;
    gap: 6px;
    display: flex
}

.settings-chip {
    font-size: var(--text-md);
    color: var(--text-2);
    background: var(--surface-2);
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 7px 12px 7px 10px;
    font-weight: 500;
    transition: background .15s, color .15s;
    display: inline-flex
}

.settings-chip:hover {
    color: var(--text);
    background: rgb(var(--text-rgb) / .08)
}

.settings-chip__check {
    color: #0000;
    width: 14px;
    height: 14px;
    box-shadow: inset 0 0 0 1.5px var(--text-4);
    background: 0 0;
    border-radius: 50%;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition: background .15s, color .15s, box-shadow .15s;
    display: inline-flex
}

.settings-chip.is-on {
    background: rgb(var(--accent-rgb) / .14);
    color: var(--text);
    border-color: var(--accent)
}

.settings-chip.is-on .settings-chip__check {
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: none
}

.settings-dialog__foot {
    background: var(--bg);
    border-top: 1px solid var(--border);
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    display: flex
}

.settings-dialog__foot-actions {
    gap: 8px;
    display: inline-flex
}

.settings-dialog__reset,
.settings-dialog__cancel,
.settings-dialog__save {
    -webkit-appearance: none;
    appearance: none;
    font-size: var(--text-md);
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    padding: 8px 14px;
    font-weight: 500;
    transition: background .15s, color .15s
}

.settings-dialog__reset {
    color: var(--text-3);
    background: 0 0
}

.settings-dialog__reset:hover {
    color: var(--text);
    background: var(--bg-2)
}

.settings-dialog__cancel {
    background: var(--bg-2);
    color: var(--text-2)
}

.settings-dialog__cancel:hover {
    color: var(--text)
}

.settings-dialog__save {
    background: var(--accent);
    color: var(--accent-ink)
}

.settings-dialog__save:hover {
    filter: brightness(1.05)
}

@media (max-width:560px) {
    .settings-dialog {
        padding: 0
    }

    .settings-dialog__panel {
        border-radius: 0;
        width: 100%;
        max-height: 100%
    }
}

.settings-seg {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    display: grid
}

.settings-seg__btn {
    font-size: var(--text-md);
    color: var(--text-2);
    background: var(--surface-2);
    border-radius: var(--radius-md);
    cursor: pointer;
    border: 0;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    font-weight: 500;
    transition: background .15s, color .15s, box-shadow .15s;
    display: inline-flex
}

.settings-seg__btn:hover {
    color: var(--text);
    background: rgb(var(--text-rgb) / .07)
}

.settings-seg__btn.is-on {
    color: var(--text);
    background: rgb(var(--accent-rgb) / .14)
}

.settings-seg__btn.is-on svg {
    color: var(--accent)
}

.settings-radio {
    flex-direction: column;
    gap: 6px;
    display: flex
}

.settings-radio__row {
    background: var(--surface-2);
    border-radius: var(--radius-md);
    cursor: pointer;
    border: 0;
    grid-template-columns: 16px 1fr;
    align-items: start;
    gap: 10px;
    padding: 10px 12px;
    transition: background .12s, box-shadow .15s;
    display: grid
}

.settings-radio__row:hover {
    background: var(--surface-3)
}

.settings-radio__row input {
    opacity: 0;
    pointer-events: none;
    position: absolute
}

.settings-radio__dot {
    width: 14px;
    height: 14px;
    box-shadow: inset 0 0 0 1.5px var(--text-4);
    border-radius: 50%;
    margin-top: 3px;
    transition: box-shadow .15s;
    position: relative
}

.settings-radio__row.is-on {
    background: rgb(var(--accent-rgb) / .14)
}

.settings-radio__row.is-on .settings-radio__dot {
    box-shadow: inset 0 0 0 1.5px var(--accent)
}

.settings-radio__row.is-on .settings-radio__dot:after {
    content: "";
    background: var(--accent);
    border-radius: 50%;
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px
}

.settings-radio__text {
    flex-direction: column;
    gap: 1px;
    line-height: 1.3;
    display: flex
}

.settings-radio__title {
    font-size: var(--text-md);
    color: var(--text);
    align-items: center;
    gap: 8px;
    font-weight: 500;
    display: inline-flex
}

.settings-radio__badge {
    font-size: var(--text-2xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgb(var(--accent-rgb) / .16);
    border-radius: 999px;
    padding: 2px 8px;
    font-weight: 500
}

.settings-radio__sub {
    font-size: var(--text-sm);
    color: var(--text-3)
}

.browse {
    position: relative
}

.browse-pop {
    z-index: 60;
    background: var(--surface);
    border-radius: var(--radius);
    flex-direction: column;
    gap: 6px;
    min-width: 240px;
    padding: 6px;
    animation: .14s ease-out both menu-in;
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    box-shadow: 0 18px 40px -12px #00000073, 0 2px 6px #00000040
}

:root[data-theme=light] .browse-pop {
    box-shadow: 0 18px 40px -12px #0000002e, 0 2px 6px #00000014
}

.browse-pop__head {
    font-size: var(--text-2xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-4);
    padding: 4px 10px;
    font-weight: 600
}

.browse-pop__list {
    flex-direction: column;
    gap: 2px;
    display: flex
}

.browse-pop__row {
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: var(--text-md);
    white-space: nowrap;
    grid-template-columns: 18px 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    text-decoration: none;
    transition: background .12s, color .12s;
    display: grid;
    position: relative
}

.browse-pop__row:hover {
    background: var(--surface-2);
    color: var(--text)
}

.browse-pop__row-icon {
    color: var(--text-3);
    place-items: center;
    transition: color .12s;
    display: grid
}

.browse-pop__row:hover .browse-pop__row-icon {
    color: var(--text)
}

.browse-pop__row-label {
    font-weight: 500
}

.browse-pop__all {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text-2);
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background .12s, color .12s;
    display: flex
}

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

.browse-pop__all .browse-pop__chev {
    color: var(--text-3);
    font-size: 1.125rem;
    line-height: 1;
    transition: transform .15s, color .12s
}

.browse-pop__all:hover .browse-pop__chev {
    color: var(--text);
    transform: translate(2px)
}

.auth {
    z-index: 200;
    place-items: center;
    padding: 24px;
    animation: .16s ease-out auth-in;
    display: grid;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto
}

@keyframes auth-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.auth__backdrop {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #000000a6;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.auth__card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 420px;
    max-height: calc(100dvh - 32px);
    padding: 32px 32px 28px;
    animation: .2s cubic-bezier(.2, .9, .3, 1.15) both auth-card-in;
    display: flex;
    position: relative;
    overflow-y: auto;
    box-shadow: 0 40px 80px -20px #0009, 0 4px 12px #0000004d
}

@media (max-width:480px) {
    .auth {
        padding: 12px
    }

    .auth__card {
        max-height: calc(100dvh - 16px);
        padding: 24px 20px 20px
    }
}

@keyframes auth-card-in {
    0% {
        opacity: 0;
        transform: translateY(8px)scale(.97)
    }

    to {
        opacity: 1;
        transform: translateY(0)scale(1)
    }
}

.auth__close {
    width: 32px;
    height: 32px;
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    place-items: center;
    font-size: 1.375rem;
    transition: background .15s, color .15s;
    display: grid;
    position: absolute;
    top: 12px;
    right: 12px
}

.auth__close:hover {
    background: var(--bg-2);
    color: var(--text)
}

.auth__brand {
    color: var(--text-2);
    font-size: var(--text-xs);
    letter-spacing: .14em;
    align-items: center;
    gap: 8px;
    display: flex
}

.auth__brand .logo__mark {
    color: var(--accent);
    display: inline-flex
}

.auth__title {
    color: var(--text);
    letter-spacing: -.01em;
    margin: 4px 0 0;
    font-size: 1.375rem;
    font-weight: 600
}

.auth__sub {
    font-size: var(--text-base);
    color: var(--text-3);
    text-wrap: pretty;
    margin: 0 0 4px;
    line-height: 1.5
}

.auth__socials {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.auth__social {
    height: var(--ctrl-lg);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--text-base);
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    font-weight: 500;
    transition: background .15s;
    display: inline-flex
}

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

.auth__or {
    color: var(--text-4);
    font-size: var(--text-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    align-items: center;
    gap: 12px;
    display: flex
}

.auth__or:before,
.auth__or:after {
    content: "";
    background: rgb(var(--text-rgb) / .08);
    flex: 1;
    height: 1px
}

.auth__form {
    flex-direction: column;
    gap: 12px;
    display: flex
}

.auth__field {
    flex-direction: column;
    gap: 5px;
    display: flex
}

.auth__field>span {
    font-size: var(--text-sm);
    color: var(--text-2);
    letter-spacing: .01em;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    display: flex
}

.auth__field input {
    height: var(--ctrl-lg);
    line-height: var(--ctrl-lg);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--text-base);
    border: 0;
    border-radius: 8px;
    outline: none;
    padding: 0 14px;
    font-family: inherit;
    transition: background .15s, box-shadow .15s
}

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

.auth__field input:focus {
    background: var(--surface-2);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .22)
}

.auth__error {
    font-size: var(--text-sm);
    color: var(--danger);
    align-items: center;
    gap: 6px;
    margin: 0;
    display: flex
}

.auth__alert,
.form__alert {
    background: rgb(var(--danger-rgb) / .14);
    border-radius: var(--radius-sm);
    color: var(--danger);
    font-size: var(--text-sm);
    border: 0;
    margin: 0 0 4px;
    padding: 10px 32px 10px 12px;
    line-height: 1.4;
    position: relative
}

.form__alert-text {
    display: block
}

.form__alert-list {
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding-left: 18px;
    display: flex
}

.form__alert-list li {
    list-style: outside
}

.form__alert-close {
    width: 22px;
    height: 22px;
    color: inherit;
    opacity: .7;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    line-height: 1;
    transition: opacity .15s, background-color .15s;
    display: inline-flex;
    position: absolute;
    top: 4px;
    right: 4px
}

.form__alert-close:hover {
    opacity: 1;
    background: rgb(var(--danger-rgb) / .12)
}

.form__alert--success {
    background: rgb(var(--success-rgb, 34 197 94) / .14);
    color: rgb(var(--success-rgb, 34 197 94))
}

.form__alert--success .form__alert-close:hover {
    background: rgb(var(--success-rgb, 34 197 94) / .16)
}

.auth__error:before {
    content: "!";
    background: var(--danger);
    color: #fff;
    width: 14px;
    height: 14px;
    font-size: var(--text-2xs);
    border-radius: 999px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    display: inline-flex
}

.auth__field.is-invalid input,
.auth__check-wrap.is-invalid .auth__check {
    border-color: var(--danger)
}

.auth__field.is-invalid input {
    box-shadow: 0 0 0 1px var(--danger)
}

.auth__field.is-invalid input:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgb(var(--danger-rgb) / .18)
}

.auth__check-wrap {
    flex-direction: column;
    gap: 5px;
    display: flex
}

.auth__check {
    font-size: var(--text-sm);
    color: var(--text-3);
    align-items: flex-start;
    gap: 8px;
    line-height: 1.45;
    display: flex
}

.auth__check input {
    accent-color: var(--accent);
    margin-top: 2px
}

.auth__check a {
    color: var(--text-2);
    text-decoration: none;
    transition: color .15s, opacity .15s
}

.auth__check a:hover {
    color: var(--text)
}

.auth__submit {
    height: var(--ctrl-lg);
    background: var(--accent);
    color: var(--accent-ink);
    font-size: var(--text-base);
    letter-spacing: .01em;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    margin-top: 4px;
    padding: 0 14px;
    font-weight: 600;
    transition: filter .15s, transform 50ms
}

.auth__submit:hover {
    filter: brightness(1.05)
}

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

.auth__foot {
    text-align: center;
    color: var(--text-3);
    font-size: var(--text-md);
    margin-top: 4px
}

.auth__foot p {
    margin: 0
}

.auth__link {
    color: var(--accent);
    font: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0;
    font-weight: 500;
    text-decoration: none;
    transition: color .15s, opacity .15s
}

.auth__link:hover {
    opacity: .85
}

.auth__link--sub {
    font-size: var(--text-sm);
    color: var(--text-3);
    font-weight: 400
}

.auth__link--sub:hover {
    color: var(--text-2)
}

.announce {
    margin-bottom: 28px;
    position: relative
}

.announce__head {
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    display: flex
}

.announce__title {
    font-size: var(--text-xs);
    letter-spacing: .16em;
    color: var(--text-3);
    flex: none;
    margin: 0;
    font-weight: 600
}

.announce__date {
    font-size: var(--text-xs);
    letter-spacing: .06em;
    color: var(--text-4);
    margin-left: auto
}

.announce__icon {
    width: 22px;
    height: 22px;
    color: var(--accent);
    background: rgb(var(--accent-rgb) / .16);
    border-radius: 5px;
    place-items: center;
    display: grid
}

.announce__beacon {
    background: var(--accent);
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .22);
    border-radius: 50%;
    flex: none;
    animation: 2.2s ease-in-out infinite announcePulse
}

@keyframes announcePulse {

    0%,
    to {
        box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .22)
    }

    50% {
        box-shadow: 0 0 0 7px rgb(var(--accent-rgb) / .06)
    }
}

.announce__list {
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.announce__item {
    font-size: var(--text-base);
    color: var(--text-2);
    text-wrap: pretty;
    padding-left: 18px;
    line-height: 1.55;
    position: relative
}

.announce__item:before {
    content: "";
    background: var(--accent);
    border-radius: 50%;
    width: 5px;
    height: 5px;
    position: absolute;
    top: .68em;
    left: 4px
}

.announce__text {
    color: var(--text)
}

.announce__link {
    color: var(--accent);
    font-weight: 500;
    text-decoration: none
}

.announce__link:hover {
    text-decoration: underline
}

.announce--accent {
    background: var(--surface);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    padding: 18px 22px 20px
}

.announce--ticker {
    background: linear-gradient(180deg, rgb(var(--accent-rgb) / .1) 0%, var(--bg-2) 60%);
    box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .3);
    border-radius: 8px;
    padding: 18px 22px 20px
}

.announce--ticker .announce__title {
    color: var(--accent)
}

.announce--megaphone {
    background: var(--bg-2);
    border-radius: 8px;
    padding: 18px 22px 20px;
    position: relative;
    overflow: hidden
}

.announce--megaphone:before {
    content: "";
    background: rgb(var(--accent-rgb) / .1);
    pointer-events: none;
    border-radius: 50%;
    width: 160px;
    height: 160px;
    position: absolute;
    top: -30px;
    right: -30px
}

.announce--megaphone .announce__head,
.announce--megaphone .announce__list {
    z-index: 1;
    position: relative
}

.announce--paper {
    color: #232933;
    background: #f8f1e3;
    border-radius: 2px;
    padding: 22px 28px 26px;
    transform: rotate(-.35deg);
    box-shadow: 0 1px #0000000f, 0 14px 28px -18px #00000073, inset 0 0 0 1px #0000000a
}

.announce--paper:before {
    content: "";
    background: var(--accent);
    border-radius: 2px;
    width: 46px;
    height: 14px;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 2px 4px #00000040
}

.announce--paper .announce__title,
.announce--paper .announce__date {
    color: #4f5661
}

.announce--paper .announce__text {
    color: #151b24
}

.announce--paper .announce__num {
    color: #6b727e
}

.announce--ribbon {
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 6px;
    padding: 16px 22px 18px;
    position: relative
}

.announce--ribbon:after {
    content: "";
    pointer-events: none;
    border: 1px dashed #0000003d;
    border-radius: 4px;
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    right: 4px
}

.announce--ribbon .announce__title,
.announce--ribbon .announce__date,
.announce--ribbon .announce__num {
    color: #0000008c
}

.announce--ribbon .announce__text {
    color: #050911;
    font-weight: 500
}

.announce--ribbon .announce__head {
    margin-bottom: 10px
}

.list-main {
    max-width: var(--container);
    padding: 40px var(--gutter) 0;
    margin: 0 auto
}

.list-wrap {
    min-width: 0
}

.filter-top {
    align-items: stretch;
    gap: 10px;
    margin-bottom: 14px;
    display: flex
}

.filter-search {
    background: var(--surface);
    border-radius: var(--radius);
    height: var(--ctrl-lg);
    border: 0;
    flex: auto;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    transition: background .15s, box-shadow .15s;
    display: flex
}

.filter-search:focus-within {
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .22)
}

.filter-search svg {
    color: var(--text-3);
    flex-shrink: 0
}

.filter-search input {
    height: 100%;
    color: var(--text);
    font-size: var(--text-base);
    background: 0 0;
    border: 0;
    outline: 0;
    flex: 1;
    font-family: inherit
}

.filter-adv-toggle {
    font-family: var(--f-mono);
    font-size: var(--text-sm);
    letter-spacing: .06em;
    white-space: nowrap;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    font-weight: 600;
    display: inline-flex
}

.filter-adv-toggle.is-on {
    color: var(--accent);
    border-color: rgb(var(--accent-rgb) / .45)
}

.filter-grid {
    background: 0 0;
    border-radius: 0;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 16px;
    padding: 0;
    display: grid
}

.fdrop {
    min-width: 0;
    position: relative
}

.fdrop__label {
    font-size: var(--text-2xs);
    letter-spacing: .08em;
    color: var(--text-3);
    margin-bottom: 4px;
    font-weight: 600;
    display: block
}

.fdrop__btn {
    width: 100%;
    height: var(--ctrl-md);
    background: var(--surface);
    border-radius: var(--radius);
    color: var(--text);
    font-size: var(--text-base);
    text-align: left;
    cursor: pointer;
    border: 0;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    font-family: inherit;
    transition: background .15s, box-shadow .15s;
    display: flex
}

.fdrop__btn:hover {
    background: var(--surface-3, var(--surface-2))
}

.fdrop.is-open .fdrop__btn {
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .22)
}

.fdrop__value {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.fdrop__caret {
    color: var(--text-3);
    flex-shrink: 0;
    transition: transform .18s
}

.fdrop.is-open .fdrop__caret {
    color: var(--accent);
    transform: rotate(180deg)
}

.fdrop__pop {
    background: var(--surface);
    border-radius: var(--radius);
    z-index: 40;
    max-height: 480px;
    padding: 6px;
    animation: .14s ease-out both menu-in;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    box-shadow: 0 18px 40px -12px #00000073, 0 2px 6px #00000040
}

:root[data-theme=light] .fdrop__pop {
    box-shadow: 0 18px 40px -12px #0000002e, 0 2px 6px #00000014
}

.fdrop__pop--multi {
    padding: 0;
    overflow: hidden
}

.fdrop__list {
    max-height: 420px;
    margin: 0;
    padding: 6px;
    list-style: none;
    overflow-y: auto
}

.fdrop__item {
    width: 100%;
    color: var(--text-2);
    font: inherit;
    font-size: var(--text-md);
    text-align: left;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 6px;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    transition: background .12s, color .12s;
    display: flex
}

.fdrop__item:hover {
    background: rgb(var(--text-rgb) / .05);
    color: var(--text)
}

.fdrop__item.is-active {
    color: var(--accent)
}

.fdrop__empty {
    text-align: center;
    color: var(--text-3);
    font-size: var(--text-md);
    padding: 14px
}

.fdrop__check {
    width: 14px;
    height: 14px;
    color: var(--accent);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.fdrop__check--box {
    border: 1.5px solid rgb(var(--text-rgb) / .22);
    width: 15px;
    height: 15px;
    color: var(--accent);
    border-radius: 3px
}

.fdrop__item.is-active .fdrop__check--box {
    border-color: var(--accent);
    background: rgb(var(--accent-rgb) / .12)
}

.fdrop__check--radio {
    border: 1.5px solid rgb(var(--text-rgb) / .22);
    border-radius: 50%;
    width: 15px;
    height: 15px;
    position: relative
}

.fdrop__item.is-active .fdrop__check--radio {
    border-color: var(--accent)
}

.fdrop__item.is-active .fdrop__check--radio:after {
    content: "";
    background: var(--accent);
    border-radius: 50%;
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px
}

.fdrop__search {
    border-bottom: 1px solid rgb(var(--text-rgb) / .06);
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    display: flex
}

.fdrop__search svg {
    color: var(--text-3)
}

.fdrop__search input {
    color: var(--text);
    font-size: var(--text-md);
    background: 0 0;
    border: 0;
    outline: 0;
    flex: 1;
    font-family: inherit
}

.fdrop__num {
    background: var(--surface);
    border-radius: var(--radius);
    width: 100%;
    height: 34px;
    color: var(--text);
    font-size: var(--text-base);
    -moz-appearance: textfield;
    border: 0;
    outline: 0;
    padding: 0 12px;
    font-family: inherit;
    transition: background .15s, box-shadow .15s
}

.fdrop__num::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.fdrop__num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.fdrop__num:focus {
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .22)
}

.fdrop__num--full {
    width: 100%
}

.fdrop__range {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    display: grid
}

.fdrop__range-sep {
    color: var(--text-4);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.filter-action {
    height: var(--ctrl-md);
    font-family: var(--f-mono);
    font-size: var(--text-xs);
    letter-spacing: .06em;
    align-self: end;
    padding: 0 14px;
    font-weight: 600
}

.list-toolbar {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding: 8px 2px 16px;
    display: flex
}

.list-count {
    font-size: var(--text-sm);
    color: var(--text-3)
}

.list-count strong {
    color: var(--text);
    font-weight: 600;
    font-size: var(--text-md)
}

.view-toggle {
    background: var(--surface);
    border-radius: var(--radius-sm);
    gap: 2px;
    padding: 3px;
    display: inline-flex
}

.view-toggle__btn {
    width: 32px;
    height: 28px;
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    transition: color .15s, background .15s;
    display: inline-flex
}

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

.view-toggle__btn.is-active {
    background: var(--surface-2);
    color: var(--text)
}

.list-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 20px;
    display: grid
}

.list-grid--cards {
    grid-template-columns: repeat(7, 1fr);
    gap: 22px 14px
}

.lrow {
    border-radius: var(--radius);
    color: inherit;
    background: 0 0;
    border: 1px solid #0000;
    grid-template-columns: minmax(80px, 120px) 1fr;
    gap: 18px;
    min-width: 0;
    text-decoration: none;
    transition: background .15s, border-color .15s;
    display: grid
}

.lrow:hover {
    background: 0 0;
    border-color: #0000
}

@media (hover:hover) {
    .lrow:hover .lrow__title {
        color: var(--accent)
    }
}

.lrow__poster {
    aspect-ratio: 2/3;
    border-radius: var(--radius-sm);
    width: 100%;
    position: relative;
    overflow: hidden
}

.lrow .card__menu.is-open .card__action,
.lrow .card__action.is-on {
    opacity: 1
}

.lrow .card__action:focus-visible {
    opacity: 1
}

@media (hover:hover) {
    .lrow:hover .card__action {
        opacity: 1
    }
}

.lrow__body {
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    display: flex
}

.lrow__title {
    font-size: var(--text-lg);
    color: var(--text);
    letter-spacing: -.005em;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin: 0;
    font-weight: 600;
    display: -webkit-box;
    overflow: hidden
}

.lrow:hover .lrow__title {
    color: var(--accent)
}

.lrow__meta {
    font-size: var(--text-xs);
    color: var(--text-3);
    letter-spacing: .04em;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    display: flex
}

.lrow__num {
    color: var(--text-4);
    font-weight: 600
}

.lrow__rank {
    color: var(--accent);
    font-weight: 700
}

.lrow__type {
    color: var(--text-2);
    font-weight: 600
}

.lrow__dot {
    background: var(--text-4);
    border-radius: 50%;
    width: 2px;
    height: 2px;
    display: inline-block
}

.lrow__status {
    color: var(--text-2);
    font-weight: 600
}

.lrow__follows,
.lrow__rating {
    color: var(--text-3);
    align-items: center;
    gap: 4px;
    display: inline-flex
}

.lrow__rating svg,
.lrow__follows svg {
    color: var(--text-3)
}

.lrow__desc {
    color: var(--text-2);
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    margin: 5px 0 0;
    font-size: .86rem;
    line-height: 1.55;
    display: -webkit-box;
    overflow: hidden
}

.lrow__foot {
    font-size: var(--text-xs);
    color: var(--text-4);
    letter-spacing: .04em;
    margin-top: 2px
}

.list-empty {
    text-align: center;
    color: var(--text-3);
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 64px 20px;
    display: flex
}

.list-empty p {
    font-size: var(--text-base);
    margin: 0
}

@media (max-width:1200px) {
    .filter-grid {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media (max-width:960px) {
    .filter-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .list-grid {
        grid-template-columns: 1fr
    }
}

@media (max-width:640px) {
    .filter-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .filter-top {
        flex-direction: column
    }

    .filter-adv-toggle {
        justify-content: center
    }

    .filter-search {
        height: 44px;
        padding: 0 12px
    }

    .filter-search input {
        font-size: 16px
    }

    .filter-grid .fdrop.is-open:before,
    .uview__head-tools .fdrop.is-open:before {
        content: "";
        -webkit-backdrop-filter: blur(3px);
        z-index: 60;
        background: #00000080;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0
    }

    .filter-grid .fdrop.is-open .fdrop__pop,
    .uview__head-tools .fdrop.is-open .fdrop__pop {
        top: 50%;
        left: var(--space-sm);
        right: var(--space-sm);
        z-index: 61;
        width: auto;
        max-width: none;
        max-height: 75vh;
        animation: .14s ease-out both dialog-fade;
        position: fixed;
        transform: translateY(-50%);
        box-shadow: 0 24px 56px -18px #0009
    }

    .fdrop.is-open .fdrop__pop {
        max-width: calc(100vw - var(--space-sm) * 2);
        max-height: min(75vh, 480px);
        overflow-x: hidden
    }
}

.footer {
    background: var(--bg-2);
    margin-top: 80px
}

.footer__inner {
    max-width: var(--container);
    padding: 64px var(--gutter) 36px;
    color: var(--text-2);
    grid-template-columns: 2fr 1fr 1fr 1.1fr;
    gap: 56px;
    margin: 0 auto;
    display: grid
}

.footer__brand {
    flex-direction: column;
    gap: 18px;
    max-width: 440px;
    display: flex
}

.footer__tag {
    font-size: var(--text-base);
    color: var(--text-2);
    text-wrap: pretty;
    margin: 0;
    line-height: 1.55
}

.footer__baseline {
    background: var(--bg)
}

.footer__baseline-inner {
    max-width: var(--container);
    padding: 20px var(--gutter);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin: 0 auto;
    display: flex
}

.footer__made {
    font-size: var(--text-sm);
    color: var(--text-3);
    letter-spacing: .005em;
    align-items: center;
    gap: 5px;
    margin: 0;
    display: inline-flex
}

.footer__made-amp {
    color: var(--text-4);
    margin: 0 1px
}

.footer__icon {
    display: inline-block
}

.footer__icon--heart {
    color: #ff645f
}

.footer__icon--bot {
    color: var(--text-2)
}

.footer__copy {
    font-size: var(--text-sm);
    color: var(--text-3);
    font-family: var(--f-mono);
    letter-spacing: .02em;
    margin: 0
}

.footer__cols {
    display: contents
}

.footer__col {
    font-size: var(--text-base);
    flex-direction: column;
    gap: 10px;
    display: flex
}

.footer__heading {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text-3);
    margin: 0 0 6px;
    font-weight: 600
}

.footer__col a {
    color: var(--text-2);
    line-height: 1.3;
    text-decoration: none;
    transition: color .15s
}

.footer__col a:hover {
    color: var(--text)
}

@media (max-width:980px) {
    .footer__inner {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 40px
    }

    .footer__brand {
        grid-column: 1/-1;
        max-width: none
    }
}

@media (max-width:620px) {
    .footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 32px
    }
}

.npager {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 28px 0 12px;
    display: flex
}

.npager__num,
.npager__nav {
    min-width: var(--ctrl-md);
    height: var(--ctrl-md);
    color: var(--text-2);
    font-size: var(--text-md);
    cursor: pointer;
    background: 0 0;
    border: 1px solid #0000;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    font-family: inherit;
    font-weight: 500;
    transition: background .15s, color .15s, border-color .15s;
    display: inline-flex
}

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

.npager__num.is-active {
    background: var(--surface-2);
    color: var(--text);
    font-weight: 600
}

.npager__nav:disabled {
    color: var(--text-4);
    cursor: not-allowed
}

.npager__dots {
    min-width: 24px;
    height: 34px;
    color: var(--text-4);
    font-size: var(--text-md);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.fdrop--tags.is-open .fdrop__btn {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .18)
}

.fdrop__pop--tags {
    flex-direction: column;
    width: min(500px, 94vw);
    max-height: min(540px, 70vh);
    padding: 0;
    display: flex;
    overflow: hidden
}

.tagpop__chips {
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    display: flex
}

.tagpop__chips--inline {
    background: 0 0;
    border-bottom: 0;
    padding: 6px 10px 2px
}

.tagchip {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 9px;
    transition: background .12s, border-color .12s, color .12s;
    display: inline-flex
}

.tagchip__name {
    line-height: 1
}

.tagchip svg {
    background: rgb(var(--text-rgb) / .06);
    border-radius: 999px;
    padding: 2px
}

.tagchip:hover svg {
    background: rgb(var(--text-rgb) / .14)
}

.tagchip--inc {
    border-color: var(--accent);
    color: var(--accent);
    background: rgb(var(--accent-rgb) / .08)
}

.tagchip--exc {
    border-color: var(--danger);
    color: var(--danger);
    background: rgb(var(--danger-rgb, 220 38 38) / .08);
    text-decoration: line-through
}

.tagpop__clear-all {
    color: var(--text-3);
    font: inherit;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 4px;
    margin-left: auto;
    padding: 4px 6px
}

.tagpop__clear-all:hover {
    color: var(--danger);
    background: rgb(var(--text-rgb) / .05)
}

.tagpop__hint-sm {
    font-size: var(--text-xs);
    letter-spacing: .06em;
    color: var(--text-4);
    text-align: center;
    border-top: 1px dashed var(--border);
    grid-column: 1/-1;
    margin: 8px 4px 0;
    padding: 8px
}

.tagpop__heading-sub {
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-left: 6px;
    font-size: .5625rem
}

.tagpop__empty {
    text-align: center;
    color: var(--text-4);
    font-size: var(--text-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 20px 16px
}

.tagpop__suggest--float {
    background: var(--surface);
    border: 1px solid var(--border);
    z-index: 20;
    border-radius: 0 0 8px 8px;
    max-height: 280px;
    margin: 0;
    padding: 4px;
    list-style: none;
    position: absolute;
    top: calc(100% - 1px);
    left: 10px;
    right: 10px;
    overflow: auto;
    box-shadow: 0 12px 28px #0000002e
}

.tagpop__suggest-empty {
    text-align: center;
    color: var(--text-4);
    font-size: var(--text-xs);
    letter-spacing: .06em;
    padding: 12px
}

.fdrop__search--combo {
    position: relative
}

.fdrop__search-row {
    align-items: stretch;
    gap: 0;
    display: flex
}

.fdrop__search-row .fdrop__search {
    border-right: 0;
    flex: 1
}

.fdrop__search-row--inline {
    flex-direction: column;
    gap: 4px;
    padding: 0 0 8px
}

.fdrop__search-row-top {
    justify-content: space-between;
    align-items: center;
    display: flex
}

.fdrop__search-row--inline .fdrop__search {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    margin: 0 10px;
    padding: 8px 10px
}

.fdrop__pop--tags .fdrop__search-row--inline .fdrop__search {
    background: var(--surface-2)
}

.fdrop__search-row--inline .tagpop__suggest--float {
    border-radius: 8px;
    top: calc(100% + 4px);
    bottom: auto;
    left: 0;
    right: 0
}

.tagpop__clear-tags {
    border: 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-3);
    font: inherit;
    font-size: var(--text-2xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    background: 0 0;
    flex-shrink: 0;
    padding: 0 14px
}

.tagpop__clear-tags:hover {
    color: var(--danger);
    background: rgb(var(--text-rgb) / .04)
}

.fdrop__search-clear {
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    padding: 4px;
    display: inline-flex
}

.fdrop__search-clear:hover {
    color: var(--text);
    background: rgb(var(--text-rgb) / .06)
}

.tagpop__suggest {
    border-bottom: 1px solid var(--border);
    max-height: 240px;
    margin: 0;
    padding: 4px;
    list-style: none;
    overflow: auto
}

.tagpop__suggest>li+li {
    margin-top: 2px
}

.tagpop__suggest--empty {
    text-align: center;
    color: var(--text-4);
    font-size: var(--text-xs);
    letter-spacing: .06em;
    border-bottom: 1px solid var(--border);
    padding: 14px 16px
}

.tagpop__suggest-item {
    cursor: pointer;
    text-align: left;
    width: 100%;
    color: var(--text);
    font: inherit;
    font-size: var(--text-md);
    background: 0 0;
    border: 0;
    border-radius: 5px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    transition: background .12s;
    display: flex
}

.tagpop__suggest-item:hover,
.tagpop__suggest-item.is-top {
    background: rgb(var(--text-rgb) / .05)
}

.tagpop__suggest-state {
    background: var(--border);
    border-radius: 50%;
    flex: 0 0 8px;
    width: 8px;
    height: 8px
}

.tagpop__suggest-state--inc {
    background: var(--accent)
}

.tagpop__suggest-state--exc {
    background: var(--danger)
}

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

.tagpop__suggest-kbd {
    font-size: var(--text-2xs);
    color: var(--text-3);
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 3px;
    padding: 1px 5px
}

.fdrop__pop--tags .fdrop__search {
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    padding: 10px 12px
}

.fdrop__clear {
    color: var(--text-3);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    letter-spacing: .02em;
    background: 0 0;
    border: 0;
    border-radius: 4px;
    padding: 3px 8px;
    font-weight: 500
}

.fdrop__clear:hover {
    color: var(--text);
    background: rgb(var(--text-rgb) / .06)
}

.tagpop__hint {
    font-size: var(--text-2xs);
    letter-spacing: .08em;
    color: var(--text-4);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    padding: 8px 14px
}

.fdrop__toolbar {
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    align-items: center;
    gap: 12px;
    padding: 6px 16px 4px;
    display: flex
}

.fdrop__toolbar-hint {
    font-size: var(--text-2xs);
    letter-spacing: .1em;
    color: var(--text-4);
    text-transform: uppercase;
    margin-left: auto
}

.fdrop__scroll {
    flex: 1;
    padding: 4px 6px 6px;
    overflow-y: auto
}

.fdrop__scroll::-webkit-scrollbar {
    width: 8px
}

.fdrop__scroll::-webkit-scrollbar-thumb {
    background: rgb(var(--text-rgb) / .1);
    border-radius: 4px
}

.tagpop__sec {
    padding: 0
}

.tagpop__heading {
    font-size: var(--text-2xs);
    letter-spacing: .14em;
    color: var(--text-4);
    text-transform: uppercase;
    margin: 4px 0 6px;
    padding: 0 10px;
    font-weight: 600
}

.tagpop__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.tagpop__item {
    cursor: pointer;
    text-align: left;
    width: 100%;
    min-width: 0;
    color: var(--text-2);
    font: inherit;
    font-size: var(--text-md);
    background: 0 0;
    border: 0;
    border-radius: 5px;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    transition: background .12s, color .12s;
    display: flex
}

.tagpop__item:hover {
    background: rgb(var(--text-rgb) / .05);
    color: var(--text)
}

.tagpop__check {
    border: 1.5px solid rgb(var(--text-rgb) / .22);
    width: 14px;
    height: 14px;
    color: var(--accent-ink);
    background: 0 0;
    border-radius: 3px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition: background .12s, border-color .12s, color .12s;
    display: inline-flex
}

.tagpop__name {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.tagpop__item--inc {
    color: var(--text)
}

.tagpop__item--inc .tagpop__check {
    background: var(--accent);
    border-color: var(--accent)
}

.tagpop__item--exc {
    color: var(--danger)
}

.tagpop__item--exc .tagpop__check {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff
}

.fdrop__foot {
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    display: flex
}

.fdrop__foot-label {
    font-size: var(--text-xs);
    color: var(--text-3);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 500
}

.fdrop__seg {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    gap: 2px;
    padding: 2px;
    display: inline-flex
}

.fdrop__seg-btn {
    color: var(--text-3);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 4px;
    padding: 5px 12px;
    font-weight: 500;
    transition: background .12s, color .12s
}

.fdrop__seg-btn:hover {
    color: var(--text)
}

.fdrop__seg-btn.is-on {
    background: var(--surface-2);
    color: var(--text);
    box-shadow: 0 0 0 1px var(--border-2)
}

@media (max-width:720px) {
    .fdrop__pop--tags {
        width: 94vw;
        left: auto;
        right: 0
    }

    .tagpop__list {
        grid-template-columns: repeat(3, 1fr)
    }
}

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

@media (max-width:380px) {
    .tagpop__list {
        grid-template-columns: 1fr
    }
}

.user-main {
    max-width: var(--container);
    padding: 24px var(--gutter) 64px;
    margin: 0 auto
}

.user-wrap {
    flex-direction: column;
    gap: 28px;
    display: flex
}

.uprofile {
    border-radius: var(--radius-lg);
    background: var(--surface);
    position: relative
}

.uprofile__body {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 22px 24px;
    display: grid
}

.uprofile__avatar {
    border-radius: 50%;
    place-items: center;
    width: 84px;
    height: 84px;
    display: grid;
    position: relative;
    overflow: hidden
}

.uprofile__avatar img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.uprofile__avatar-initial {
    color: #ffffffeb;
    letter-spacing: .02em;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1
}

.uprofile__identity {
    min-width: 0;
    padding-bottom: 4px
}

.uprofile__name {
    letter-spacing: -.01em;
    color: var(--text);
    margin: 0 0 2px;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.15
}

.uprofile__handle {
    font-size: var(--text-md);
    color: var(--text-3);
    letter-spacing: .04em
}

.uprofile__stats {
    gap: 28px;
    padding-bottom: 6px;
    display: flex
}

.uprofile__stat-num {
    font-size: var(--text-2xl);
    color: var(--text);
    letter-spacing: -.01em;
    font-weight: 600;
    line-height: 1
}

.uprofile__stat-label {
    font-size: var(--text-2xs);
    color: var(--text-3);
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-top: 6px;
    font-weight: 500
}

.user-shell {
    grid-template-columns: 240px 1fr;
    align-items: start;
    gap: 36px;
    display: grid
}

.umenu {
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
    display: flex
}

aside.umenu>.umenu__trigger {
    display: none
}

.umenu__list {
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.umenu__item {
    border-radius: var(--radius-sm);
    width: 100%;
    color: var(--text-2);
    font: inherit;
    font-size: var(--text-lg);
    cursor: pointer;
    text-align: left;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    transition: background .12s, color .12s;
    display: flex
}

.umenu__item:hover {
    background: var(--surface);
    color: var(--text)
}

.umenu__item.is-active {
    background: var(--surface-2);
    color: var(--text)
}

.umenu__item.is-active .umenu__icon {
    color: var(--accent)
}

.umenu__icon {
    width: 18px;
    height: 18px;
    color: var(--text-3);
    flex: none;
    place-items: center;
    display: grid
}

.umenu__text {
    flex: 1
}

.umenu__badge {
    background: var(--accent);
    min-width: 20px;
    height: 20px;
    color: var(--accent-ink);
    font-size: var(--text-xs);
    font-weight: 600;
    font-family: var(--f-mono);
    border-radius: 999px;
    place-items: center;
    padding: 0 6px;
    display: inline-grid
}

.umenu__foot {
    border-top: 1px solid rgba(var(--text-rgb), .06);
    margin-top: 16px;
    padding-top: 14px
}

.umenu__signout {
    color: var(--text-3);
    font-size: var(--text-base);
    border-radius: var(--radius-sm);
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    text-decoration: none;
    transition: background .12s, color .12s;
    display: flex
}

.umenu__signout:hover {
    background: var(--surface);
    color: var(--text)
}

.user-content {
    min-width: 0
}

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

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

.uview__head--row {
    flex-flow: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px
}

.uview__pager {
    justify-content: center;
    margin-top: 4px;
    display: flex
}

.uview__loading {
    text-align: center;
    color: var(--text-3);
    padding: 24px 0
}

.uview__empty {
    text-align: center;
    color: var(--text-2);
    font-size: var(--text-base);
    flex-direction: column;
    gap: 4px;
    padding: 32px 0;
    display: flex
}

.uview__empty-hint {
    color: var(--text-3);
    font-size: var(--text-sm)
}

.uview__title {
    font-size: var(--text-2xl);
    letter-spacing: -.01em;
    color: var(--text);
    margin: 0;
    font-weight: 600;
    line-height: 1.2
}

.uview__sub {
    color: var(--text-3);
    font-size: var(--text-base);
    margin: 0
}

.uview__head-tools {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    display: flex
}

.uview__folders-row {
    align-items: center;
    gap: 12px;
    min-width: 0;
    display: flex
}

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

.usettings__section {
    background: var(--surface);
    border-radius: var(--radius);
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px 14px;
    display: flex
}

.usettings__section-title {
    font-size: var(--text-base);
    color: var(--text);
    margin: 0;
    font-weight: 600
}

.usettings__section-sub {
    color: var(--text-3);
    font-size: var(--text-sm);
    margin: 0 0 6px
}

.usettings__row {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    transition: background .12s;
    display: flex
}

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

.usettings__row.is-disabled {
    opacity: .6;
    cursor: progress
}

.usettings__row-body {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.usettings__row-title {
    font-size: var(--text-md);
    color: var(--text);
    font-weight: 500
}

.usettings__row-hint {
    font-size: var(--text-sm);
    color: var(--text-3);
    line-height: 1.4
}

.usettings__switch {
    flex-shrink: 0;
    width: 36px;
    height: 20px;
    position: relative
}

.usettings__switch input {
    opacity: 0;
    cursor: pointer;
    margin: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.usettings__switch-track {
    background: rgb(var(--text-rgb) / .18);
    border-radius: 999px;
    transition: background .15s;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.usettings__switch-thumb {
    background: var(--text);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    transition: transform .15s, background .15s;
    position: absolute;
    top: 2px;
    left: 2px
}

.usettings__row.is-on .usettings__switch-track {
    background: var(--accent)
}

.usettings__row.is-on .usettings__switch-thumb {
    background: var(--accent-ink);
    transform: translate(16px)
}

.uview__folders-row .useg--icon {
    flex-shrink: 0
}

.uview__bar {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    display: flex
}

.upanel {
    background: var(--surface);
    border-radius: var(--radius-md);
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    display: flex
}

.upanel__head {
    flex-direction: column;
    gap: 4px;
    display: flex
}

.upanel__title {
    font-size: var(--text-lg);
    color: var(--text);
    margin: 0;
    font-weight: 600
}

.upanel__sub {
    color: var(--text-3);
    font-size: var(--text-sm);
    margin: 0;
    line-height: 1.5
}

.upanel__form {
    flex-direction: column;
    gap: 14px;
    display: flex
}

.upanel__row {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.upanel__label {
    font-size: var(--text-sm);
    color: var(--text-2);
    font-weight: 500
}

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

.upanel__choices {
    flex-wrap: wrap;
    gap: 8px;
    display: flex
}

.upanel__choice {
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: var(--text-sm);
    cursor: pointer;
    border: 0;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    transition: background .12s, color .12s;
    display: inline-flex
}

.upanel__choice input {
    opacity: 0;
    pointer-events: none;
    position: absolute
}

.upanel__choice:hover {
    color: var(--text);
    background: var(--surface-3)
}

.upanel__choice.is-on {
    color: var(--accent);
    background: rgb(var(--accent-rgb, 80 130 230) / .14)
}

.upanel__hint {
    font-size: var(--text-xs);
    color: var(--text-3);
    margin: 0;
    line-height: 1.45
}

.upanel__hint--mode {
    margin-top: -6px
}

.upanel__actions {
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
    display: flex
}

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

.upanel__drop {
    border: 1.5px dashed rgb(var(--text-rgb) / .18);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    transition: border-color .12s, background .12s;
    display: flex;
    position: relative
}

.upanel__drop:hover {
    border-color: var(--accent)
}

.upanel__drop.is-drag {
    border-color: var(--accent);
    background: rgb(var(--accent-rgb, 80 130 230) / .08)
}

.upanel__drop.has-file {
    border-style: solid;
    border-color: rgb(var(--accent-rgb, 80 130 230) / .4);
    background: rgb(var(--accent-rgb, 80 130 230) / .05)
}

.upanel__drop input[type=file] {
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.upanel__drop-body {
    flex: 1;
    align-items: center;
    gap: 12px;
    min-width: 0;
    display: flex
}

.upanel__drop-icon {
    background: rgb(var(--text-rgb) / .06);
    width: 36px;
    height: 36px;
    color: var(--text-2);
    border-radius: 50%;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.upanel__drop.has-file .upanel__drop-icon {
    background: rgb(var(--accent-rgb, 80 130 230) / .15);
    color: var(--accent)
}

.upanel__drop-text {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.upanel__drop-text strong {
    color: var(--text);
    font-weight: 500;
    font-size: var(--text-md);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.upanel__drop-meta {
    font-size: var(--text-xs);
    color: var(--text-3)
}

.upanel__drop-clear {
    z-index: 1;
    width: 24px;
    height: 24px;
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 6px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
    position: relative
}

.upanel__drop-clear:hover {
    color: var(--danger);
    background: var(--bg-2)
}

.useg--scroll {
    scrollbar-width: none;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto
}

.useg--scroll::-webkit-scrollbar {
    display: none
}

.useg--scroll .useg__btn {
    flex-shrink: 0
}

.ubtn {
    min-height: var(--ctrl-md);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--text-md);
    cursor: pointer;
    color: var(--text);
    white-space: nowrap;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    font-weight: 500;
    transition: background .12s, color .12s;
    display: inline-flex
}

.ubtn--sm {
    min-height: var(--ctrl-sm);
    font-size: var(--text-sm);
    padding: 0 10px
}

.ubtn--primary {
    background: var(--accent);
    color: var(--accent-ink)
}

.ubtn--primary:hover {
    background: var(--accent-2)
}

.ubtn--soft {
    background: var(--surface);
    color: var(--text-2)
}

.ubtn--soft:hover {
    background: var(--surface-2);
    color: var(--text)
}

.ubtn--ghost {
    color: var(--text-2);
    background: 0 0
}

.ubtn--ghost:hover {
    background: var(--surface);
    color: var(--text)
}

.ubtn--danger {
    background: var(--danger);
    color: #fff
}

.ubtn--danger:hover {
    background: rgb(var(--danger-rgb) / .85)
}

.useg {
    background: var(--surface);
    border-radius: var(--radius-sm);
    gap: 2px;
    padding: 3px;
    display: inline-flex
}

.useg__btn {
    min-height: var(--ctrl-sm);
    color: var(--text-3);
    font: inherit;
    font-size: var(--text-md);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 5px;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    font-weight: 500;
    transition: background .12s, color .12s;
    display: inline-flex
}

.useg__btn:hover {
    color: var(--text)
}

.useg__btn.is-on {
    background: var(--surface-2);
    color: var(--text)
}

.useg--icon .useg__btn {
    padding: 0 9px
}

.useg--wide {
    flex-wrap: wrap;
    padding: 4px;
    display: flex
}

.useg__count {
    font-size: var(--text-xs);
    color: var(--text-4);
    background: var(--bg);
    border-radius: 999px;
    padding: 1px 6px
}

.useg__btn.is-on .useg__count {
    color: var(--text-2);
    background: var(--bg-2)
}

.fdrop__pop--menu {
    min-width: 180px;
    left: auto;
    right: 0
}

.fdrop .fdrop__pop--menu {
    min-width: max(100%, 180px)
}

.fdrop__pop--menu .fdrop__item>span:not(.fdrop__item-check) {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: auto;
    min-width: 0;
    overflow: hidden
}

.fdrop__menu-label {
    font-size: var(--text-2xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
    font-family: var(--f-mono);
    padding: 6px 10px 4px
}

.fdrop__item--danger {
    color: var(--text-3)
}

.fdrop__item--danger:hover {
    color: var(--danger);
    background: var(--surface-2)
}

.fdrop__item--danger:hover .fdrop__item-check {
    color: var(--danger)
}

.fdrop__item-check {
    width: 14px;
    height: 14px;
    color: var(--text-3);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.fdrop__sep {
    background: rgb(var(--text-rgb) / .08);
    height: 1px;
    margin: 4px 6px
}

.fdrop__row {
    border-radius: 5px;
    align-items: center;
    transition: background .12s;
    display: flex
}

.fdrop__row:hover {
    background: var(--surface-2)
}

.fdrop__row.is-active .fdrop__row-pick {
    color: var(--text)
}

.fdrop__row.is-active .fdrop__item-check {
    color: var(--accent)
}

.fdrop__row-pick {
    min-width: 0;
    color: var(--text-2);
    font: inherit;
    font-size: var(--text-md);
    text-align: left;
    cursor: pointer;
    background: 0 0;
    border: 0;
    flex: 1;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    display: flex
}

.fdrop__row:hover .fdrop__row-pick {
    color: var(--text)
}

.fdrop__row-label {
    min-width: 0;
    color: var(--text-2);
    font-size: var(--text-md);
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    padding: 8px 10px;
    overflow: hidden
}

.fdrop__row-actions {
    align-items: center;
    gap: 2px;
    padding-right: 6px;
    display: flex
}

.fdrop__icon-btn {
    width: 24px;
    height: 24px;
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    transition: background .12s, color .12s;
    display: inline-flex
}

.fdrop__icon-btn:hover {
    background: var(--bg-2);
    color: var(--text)
}

.fdrop__icon-btn--save:hover {
    color: var(--accent)
}

.fdrop__icon-btn--danger:hover {
    color: var(--danger)
}

.fdrop__edit {
    align-items: center;
    gap: 4px;
    padding: 4px 6px 4px 10px;
    display: flex
}

.fdrop__edit-input {
    min-width: 0;
    height: var(--ctrl-sm);
    background: var(--bg-2);
    border: 1px solid var(--accent);
    color: var(--text);
    font: inherit;
    font-size: var(--text-md);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .18);
    border-radius: 4px;
    outline: none;
    flex: 1;
    padding: 0 8px
}

.fdrop__item--create {
    color: var(--text-3)
}

.fdrop__item--create:hover {
    color: var(--accent)
}

.fdrop__item--create .fdrop__item-check {
    color: inherit
}

.usearch {
    background: var(--surface);
    border-radius: var(--radius-sm);
    color: var(--text-3);
    align-items: center;
    gap: 8px;
    min-width: 220px;
    padding: 7px 12px;
    display: flex
}

.usearch input {
    color: var(--text);
    font: inherit;
    font-size: var(--text-md);
    background: 0 0;
    border: 0;
    outline: none;
    flex: 1
}

.uform {
    background: var(--surface);
    border-radius: var(--radius);
    flex-direction: column;
    gap: 0;
    padding: 28px;
    display: flex
}

.uform__section {
    grid-template-columns: 240px 1fr;
    gap: 32px;
    padding: 8px 0;
    display: grid
}

.uform__section-title {
    font-size: var(--text-lg);
    color: var(--text);
    margin-bottom: 4px;
    font-weight: 600
}

.uform__section-sub {
    color: var(--text-3);
    font-size: var(--text-md);
    line-height: 1.45
}

.uform__section-body {
    min-width: 0
}

.uform__grid-2 {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    display: grid
}

.uform__divider {
    background: rgba(var(--text-rgb), .06);
    height: 1px;
    margin: 24px 0
}

.uform__actions {
    border-top: 1px solid rgba(var(--text-rgb), .06);
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    display: flex
}

.uform__saved {
    color: var(--text-3);
    font-size: var(--text-md);
    opacity: 0;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    transition: opacity .2s, transform .2s;
    display: inline-flex;
    transform: translateY(2px)
}

.uform__saved.is-on {
    opacity: 1;
    color: var(--accent);
    transform: translateY(0)
}

.uform__hint {
    color: var(--text-3);
    font-size: var(--text-sm);
    margin-top: 6px
}

.uavatar-row {
    align-items: center;
    gap: 20px;
    display: flex
}

.uavatar-row__avatar {
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 80px;
    height: 80px;
    display: grid
}

.uavatar-row__avatar span {
    color: #ffffffeb;
    font-size: 1.8rem;
    font-weight: 600
}

.uavatar-row__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    display: flex
}

.uavatar-row__actions>.ubtn {
    margin-right: 6px
}

.uavatar-edit {
    cursor: pointer;
    isolation: isolate;
    background: 0 0;
    border: 0;
    border-radius: 50%;
    place-items: center;
    width: 80px;
    height: 80px;
    padding: 0;
    display: grid;
    position: relative
}

.uavatar-edit__inner {
    border-radius: 50%;
    place-items: center;
    width: 100%;
    height: 100%;
    display: grid;
    overflow: hidden
}

.uavatar-edit__inner span {
    color: #ffffffeb;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1
}

.uavatar-edit__overlay {
    color: #fff;
    opacity: 0;
    background: #00000080;
    border-radius: 50%;
    place-items: center;
    gap: 4px;
    transition: opacity .15s;
    display: grid;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.uavatar-edit:hover .uavatar-edit__overlay {
    opacity: 1
}

.uavatar-edit:focus-visible .uavatar-edit__overlay {
    opacity: 1
}

.uavatar-edit__hint {
    font-size: var(--text-2xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-family: var(--f-mono)
}

.uavd {
    z-index: 60;
    -webkit-backdrop-filter: blur(6px);
    background: #000000a6;
    place-items: center;
    padding: 24px;
    display: grid;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.uavd__panel {
    background: var(--surface);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 360px;
    padding: 22px;
    animation: .2s cubic-bezier(.2, .9, .3, 1.15) both dialog-pop;
    box-shadow: 0 40px 80px -20px #0009, 0 4px 12px #0000004d
}

:root[data-theme=light] .uavd__panel {
    box-shadow: 0 40px 80px -20px #0003, 0 4px 12px #00000014
}

.uavd__head {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    display: flex
}

.uavd__avatar {
    border-radius: 50%;
    place-items: center;
    width: 96px;
    height: 96px;
    display: grid;
    overflow: hidden
}

.uavd__avatar span {
    color: #ffffffeb;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1
}

.uavd__title {
    font-size: var(--text-xl);
    color: var(--text);
    margin: 0;
    font-weight: 600
}

.uavd__sub {
    font-size: var(--text-sm);
    color: var(--text-3);
    margin: 0
}

.uavd__actions {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.uavd__actions .ubtn {
    justify-content: center;
    width: 100%
}

.uavd__file {
    display: none
}

.ufield {
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    display: flex
}

.ufield--full {
    grid-column: 1/-1
}

.ufield__label {
    font-family: var(--f-mono);
    font-size: var(--text-xs);
    color: var(--text-3);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 500
}

.ufield__wrap {
    align-items: center;
    display: flex;
    position: relative
}

.ufield__prefix {
    color: var(--text-3);
    font-size: var(--text-md);
    pointer-events: none;
    align-items: center;
    display: inline-flex;
    position: absolute;
    left: 12px
}

.ufield__prefix--icon {
    color: var(--text-3)
}

.ufield__input {
    width: 100%;
    height: var(--ctrl-md);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    font-size: var(--text-md);
    border: 0;
    outline: none;
    padding: 0 12px;
    transition: background .12s, box-shadow .12s
}

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

.ufield__input:focus {
    background: var(--surface-2);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .22)
}

.ufield__input--prefixed {
    padding-left: 30px
}

.ufield__input--area {
    resize: vertical;
    height: auto;
    min-height: 64px;
    padding: 8px 12px;
    line-height: 1.5
}

.ufield__hint {
    color: var(--text-3);
    font-size: var(--text-sm);
    align-items: center;
    gap: 4px;
    display: inline-flex
}

.grow-list {
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.grow {
    background: var(--surface);
    border-radius: var(--radius-sm);
    grid-template-columns: 56px 1fr auto;
    grid-template-areas: "logo body actions";
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    transition: background .12s;
    display: grid
}

.grow__logo {
    grid-area: logo
}

.grow__body {
    grid-area: body
}

.grow__actions {
    grid-area: actions
}

.grow:hover {
    background: var(--surface-2)
}

.grow__logo {
    border-radius: var(--radius-sm);
    color: #ffffffeb;
    width: 56px;
    height: 56px;
    font-weight: 600;
    font-size: var(--text-xl);
    letter-spacing: .04em;
    place-items: center;
    text-decoration: none;
    display: grid;
    overflow: hidden
}

.grow__logo img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.grow__body {
    min-width: 0
}

.grow__top {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    display: flex
}

.grow__name {
    color: var(--text);
    font-weight: 500;
    font-size: var(--text-lg);
    text-decoration: none
}

.grow__name:hover {
    color: var(--accent)
}

.grow__handle {
    font-size: var(--text-sm);
    color: var(--text-3)
}

.grow__meta {
    font-size: var(--text-sm);
    color: var(--text-3);
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    display: flex
}

.grow__dot {
    background: var(--text-4);
    border-radius: 50%;
    flex: none;
    width: 2px;
    height: 2px
}

.grow__actions {
    align-items: center;
    gap: 6px;
    display: flex
}

.ugrid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    display: grid
}

.card--compact {
    padding-bottom: 0
}

.card--compact .card__poster-wrap {
    border-radius: var(--radius-sm);
    transition: transform .15s;
    overflow: hidden
}

@media (hover:hover) {
    .card--compact:hover .card__poster-wrap {
        transform: translateY(-2px)
    }
}

.card--compact .card__body {
    text-align: left;
    gap: 4px;
    padding: 0
}

.card--compact .card__title {
    margin-top: 0;
    font-weight: 500
}

.card--compact .card__meta {
    font-size: var(--text-sm);
    gap: 8px;
    padding: 0
}

.ulist {
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.ulrow {
    background: var(--surface);
    border-radius: var(--radius-sm);
    grid-template-columns: 52px 1fr auto;
    grid-template-areas: "poster body actions";
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    transition: background .12s;
    display: grid
}

.ulrow__poster {
    grid-area: poster
}

.ulrow__body {
    grid-area: body;
    min-width: 0
}

.ulrow__actions {
    grid-area: actions
}

.ulrow:hover {
    background: var(--surface-2)
}

.ulrow__poster {
    width: 52px;
    height: 72px;
    box-shadow: var(--shadow-poster);
    border-radius: 4px;
    display: block;
    overflow: hidden
}

.ulrow__title {
    color: var(--text);
    font-weight: 500;
    font-size: var(--text-lg);
    text-decoration: none
}

.ulrow__title:hover {
    color: var(--accent)
}

.ulrow__meta {
    font-size: var(--text-sm);
    color: var(--text-3);
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    display: flex
}

.ulrow__dot {
    background: var(--text-4);
    border-radius: 50%;
    width: 2px;
    height: 2px
}

.ulrow__status {
    font-size: var(--text-2xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    font-family: var(--f-mono);
    color: var(--text-2);
    align-items: center;
    display: inline-flex
}

.ulrow__progress {
    align-items: center;
    gap: 4px;
    display: inline-flex
}

.ulrow__progress svg {
    color: var(--text-3)
}

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

.ulrow__folder {
    background: var(--bg-2);
    color: var(--text-2);
    font-size: var(--text-md);
    white-space: nowrap;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-weight: 500;
    display: inline-flex
}

.ulrow__folder svg {
    color: var(--text-3)
}

.ulrow:hover .ulrow__folder {
    background: var(--bg)
}

.ulrow__rating {
    position: relative
}

.ulrow__rating-btn {
    background: var(--bg-2);
    color: var(--text-2);
    font-size: var(--text-md);
    cursor: pointer;
    white-space: nowrap;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-weight: 500;
    line-height: 1;
    display: inline-flex
}

.ulrow__rating-btn:hover {
    background: var(--bg);
    color: var(--text)
}

.ulrow__rating-btn.is-rated {
    color: var(--accent)
}

.ulrow__rating-btn:disabled {
    opacity: .6;
    cursor: progress
}

@media (max-width:600px) {
    .ulrow {
        grid-template-columns: 52px 1fr;
        grid-template-areas: "poster body" "actions actions";
        align-items: start
    }

    .ulrow__actions {
        flex-wrap: wrap;
        justify-content: flex-end
    }

    .grow {
        grid-template-columns: 56px 1fr;
        grid-template-areas: "logo body" "actions actions";
        align-items: start
    }

    .grow__actions {
        flex-wrap: wrap;
        justify-content: flex-end
    }
}

.utabs {
    border-bottom: 1px solid rgba(var(--text-rgb), .08);
    gap: 0;
    display: flex
}

.utab {
    color: var(--text-3);
    font: inherit;
    font-size: var(--text-lg);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-bottom: 2px solid #0000;
    align-items: center;
    gap: 8px;
    margin-bottom: -1px;
    padding: 12px 18px;
    font-weight: 500;
    transition: color .12s, border-color .12s;
    display: inline-flex
}

.utab:hover {
    color: var(--text)
}

.utab.is-on {
    color: var(--text);
    border-bottom-color: var(--accent)
}

.utab__count {
    font-size: var(--text-xs);
    color: var(--text-4);
    background: var(--surface);
    border-radius: 999px;
    padding: 2px 8px
}

.utab.is-on .utab__count {
    color: var(--text-2);
    background: var(--surface-2)
}

.feed-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    display: grid
}

.fcard {
    background: var(--surface);
    border-radius: var(--radius);
    grid-template-columns: 96px 1fr;
    gap: 14px;
    padding: 14px;
    transition: background .12s;
    display: grid
}

.fcard:hover {
    background: var(--surface-2)
}

.fcard__poster {
    border-radius: var(--radius-sm);
    width: 96px;
    height: 136px;
    box-shadow: var(--shadow-poster);
    display: block;
    overflow: hidden
}

.fcard__body {
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    display: flex
}

.fcard__top {
    font-size: var(--text-xs);
    letter-spacing: .08em;
    justify-content: space-between;
    align-items: center;
    display: flex
}

.fcard__badge {
    background: var(--bg-2);
    color: var(--text-2);
    text-transform: uppercase;
    border-radius: 999px;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    display: inline-flex
}

.fcard__time {
    color: var(--text-3);
    text-transform: uppercase
}

.fcard__title {
    color: var(--text);
    font-weight: 500;
    font-size: var(--text-lg);
    line-height: 1.3;
    text-decoration: none
}

.fcard__title:hover {
    color: var(--accent)
}

.fcard__chapter {
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    display: flex
}

.fcard__ch {
    font-size: var(--text-sm);
    color: var(--accent);
    flex: none
}

.fcard__ch-title {
    color: var(--text-2);
    font-size: var(--text-md);
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    overflow: hidden
}

.fcard__foot {
    font-size: var(--text-sm);
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 6px;
    display: flex
}

.fcard__group {
    color: var(--text-3)
}

.fcard__group a {
    color: var(--text-2);
    text-decoration: none
}

.fcard__group a:hover {
    color: var(--accent)
}

.flist {
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.frow {
    background: var(--surface);
    border-radius: var(--radius-sm);
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    transition: background .12s;
    display: grid
}

.frow:hover {
    background: var(--surface-2)
}

.frow__poster {
    width: 40px;
    height: 56px;
    box-shadow: var(--shadow-poster);
    border-radius: 4px;
    display: block;
    overflow: hidden
}

.frow__body {
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    display: flex
}

.frow__title {
    color: var(--text);
    font-weight: 500;
    font-size: var(--text-base);
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
    text-decoration: none;
    overflow: hidden
}

.frow__title:hover {
    color: var(--accent)
}

.frow__chapter {
    min-width: 0;
    font-size: var(--text-md);
    align-items: baseline;
    gap: 8px;
    display: flex
}

.frow__ch {
    color: var(--accent);
    flex: none;
    font-weight: 500
}

.frow__ch-title {
    color: var(--text-3);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.frow__meta {
    text-align: right;
    font-size: var(--text-sm);
    color: var(--text-3);
    white-space: nowrap;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    display: flex
}

.frow__group {
    color: var(--text-2)
}

.frow__time {
    color: var(--text-3)
}

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

    .frow__meta {
        text-align: left;
        flex-direction: row;
        grid-column: 2/-1;
        align-items: center;
        gap: 8px
    }
}

.nlist {
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.nrow {
    background: var(--surface);
    border-radius: var(--radius-sm);
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    transition: background .12s;
    display: grid;
    position: relative
}

.nrow:hover {
    background: var(--surface-2)
}

.nrow.is-clickable {
    cursor: pointer
}

.nrow.is-unread {
    padding-left: 19px
}

.nrow.is-unread:before {
    content: "";
    background: var(--accent);
    border-radius: 2px;
    width: 3px;
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0
}

.nrow__icon {
    background: var(--surface-2);
    width: 36px;
    height: 36px;
    color: var(--text-2);
    border-radius: 50%;
    flex: none;
    place-items: center;
    transition: background .12s;
    display: grid
}

.nrow.is-unread .nrow__icon {
    background: rgb(var(--accent-rgb) / .16)
}

.nrow__icon--chapter {
    color: var(--accent)
}

.nrow__icon--group {
    color: #a3c28a
}

.nrow__icon--reply {
    color: #7aa7d1
}

.nrow__icon--like {
    color: var(--danger)
}

.nrow__icon--mod {
    color: #d99c56
}

.nrow__body {
    min-width: 0
}

.nrow__text {
    color: var(--text-2);
    font-size: var(--text-base);
    line-height: 1.45
}

.nrow.is-unread .nrow__text {
    color: var(--text)
}

.nrow__text b {
    color: var(--text);
    font-weight: 600
}

.nrow__text a {
    color: inherit;
    text-decoration: none;
    transition: color .15s
}

.nrow__text a b,
.nrow__text a:hover {
    color: var(--accent)
}

.nrow__text a:hover b {
    color: var(--accent);
    text-underline-offset: 2px;
    text-decoration: underline;
    text-decoration-thickness: 1.5px
}

.nrow__title {
    color: var(--text);
    font-weight: 500;
    text-decoration: none
}

.nrow__title:hover {
    color: var(--accent)
}

.nrow__meta {
    font-size: var(--text-sm);
    color: var(--text-3);
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    display: flex
}

.nrow__dot {
    background: var(--text-4);
    border-radius: 50%;
    width: 2px;
    height: 2px
}

.nrow__poster {
    width: 36px;
    height: 50px;
    box-shadow: var(--shadow-poster);
    border-radius: 3px;
    display: block;
    overflow: hidden
}

.nrow__actions {
    align-items: center;
    gap: 4px;
    display: flex
}

.nrow__unread {
    background: var(--accent);
    border-radius: 50%;
    width: 8px;
    height: 8px
}

.uempty {
    text-align: center;
    background: var(--surface);
    border-radius: var(--radius);
    color: var(--text-3);
    padding: 48px 16px
}

.uempty__icon {
    background: var(--bg-2);
    width: 56px;
    height: 56px;
    color: var(--text-3);
    border-radius: 50%;
    place-items: center;
    margin-bottom: 14px;
    display: inline-grid
}

.uempty__title {
    font-size: var(--text-xl);
    color: var(--text);
    margin-bottom: 4px;
    font-weight: 600
}

.uempty__sub {
    font-size: var(--text-base)
}

.clist {
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.crow {
    background: var(--surface);
    border-radius: var(--radius-sm);
    grid-template-columns: 40px 1fr auto;
    grid-template-areas: "poster body actions";
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    transition: background .12s;
    display: grid
}

.crow__poster {
    grid-area: poster
}

.crow__body {
    grid-area: body
}

.crow__actions {
    grid-area: actions
}

.crow:hover {
    background: var(--surface-2)
}

.crow__poster {
    border-radius: 4px;
    width: 40px;
    height: 56px;
    display: block;
    overflow: hidden
}

.crow__body {
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    display: flex
}

.crow__head {
    font-size: var(--text-md);
    color: var(--text-3);
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    display: flex
}

.crow__title {
    color: var(--text);
    font-weight: 600;
    text-decoration: none
}

.crow__title:hover {
    color: var(--accent)
}

.crow__sep {
    color: var(--text-4)
}

.crow__ch {
    color: var(--accent);
    font-weight: 500
}

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

.crow__meta {
    font-size: var(--text-sm);
    color: var(--text-3);
    align-items: center;
    gap: 8px;
    display: flex
}

.crow__stat {
    align-items: center;
    gap: 4px;
    display: inline-flex
}

.crow__stat svg {
    color: var(--text-4)
}

.crow__actions {
    opacity: 0;
    align-items: center;
    gap: 2px;
    transition: opacity .12s;
    display: flex
}

.crow:hover .crow__actions,
.crow:focus-within .crow__actions {
    opacity: 1
}

@media (max-width:600px) {
    .crow {
        grid-template-columns: 40px 1fr;
        grid-template-areas: "poster body" "actions actions"
    }

    .crow__actions {
        opacity: 1;
        justify-content: flex-end
    }
}

.hgrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    display: grid
}

.hitem {
    background: var(--surface);
    border-radius: var(--radius-sm);
    color: inherit;
    grid-template-columns: 56px 1fr 36px;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    text-decoration: none;
    transition: background .12s;
    display: grid;
    position: relative
}

.hitem:hover {
    background: var(--surface-2)
}

.hitem__poster {
    border-radius: 4px;
    flex-shrink: 0;
    width: 56px;
    height: 78px;
    overflow: hidden
}

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

.hitem__remove {
    width: 22px;
    height: 22px;
    color: var(--text-3);
    cursor: pointer;
    opacity: 0;
    background: 0 0;
    border: 0;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    padding: 0;
    transition: background .12s, color .12s, opacity .12s;
    display: inline-flex;
    position: absolute;
    top: 6px;
    right: 6px
}

.hitem:hover .hitem__remove {
    opacity: 1
}

.hitem__remove:focus-visible {
    opacity: 1
}

.hitem__remove:hover {
    color: var(--danger);
    background: var(--bg-2)
}

.hitem__body {
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    display: flex
}

.hitem__title {
    font-size: var(--text-lg);
    color: var(--text);
    -webkit-line-clamp: 2;
    word-break: break-word;
    -webkit-box-orient: vertical;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    overflow: hidden
}

.hitem:hover .hitem__title {
    color: var(--accent)
}

.hitem__meta {
    font-size: var(--text-sm);
    color: var(--text-3);
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    display: flex
}

.hitem__sep {
    color: var(--text-4)
}

.hitem__ch,
.hitem__time {
    font-weight: 400;
    font-size: inherit;
    font-family: inherit
}

.hitem__ch {
    color: var(--text-2);
    align-items: center;
    gap: 4px;
    display: inline-flex
}

.hitem__ch svg {
    color: var(--text-3);
    flex-shrink: 0
}

.hitem__time {
    color: var(--text-3)
}

.hring {
    opacity: .85;
    flex-shrink: 0;
    display: block
}

.hring__track {
    stroke: rgb(var(--text-rgb) / .1)
}

.hring__bar {
    stroke: var(--text-2);
    transition: stroke-dashoffset .3s
}

.hring__label {
    font-family: var(--f-mono);
    fill: var(--text-3);
    font-size: 9px;
    font-weight: 500
}

.hring__pct {
    fill: var(--text-4);
    font-size: 7px
}

.hring.is-finished .hring__bar {
    stroke: var(--text-3)
}

.hring__check {
    stroke: var(--text-2)
}

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

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

    .umenu {
        padding-top: 0
    }

    aside.umenu>.umenu__trigger {
        background: var(--surface);
        border-radius: var(--radius-sm);
        width: 100%;
        color: var(--text);
        font: inherit;
        font-size: var(--text-lg);
        cursor: pointer;
        border: 0;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        transition: background .12s;
        display: flex
    }

    .umenu__trigger:hover {
        background: var(--surface-2)
    }

    .umenu__trigger .umenu__icon {
        color: var(--accent)
    }

    .umenu__trigger-caret {
        color: var(--text-3);
        margin-left: auto;
        transition: transform .15s;
        display: inline-flex;
        transform: rotate(90deg)
    }

    .umenu.is-open .umenu__trigger-caret {
        transform: rotate(-90deg)
    }

    .umenu__list {
        background: var(--surface);
        border-radius: var(--radius-sm);
        border: 0;
        margin-top: 6px;
        padding: 6px;
        display: none
    }

    .umenu.is-open .umenu__list {
        flex-direction: column;
        gap: 2px;
        display: flex
    }

    .umenu__badge {
        display: none
    }

    .uprofile__body {
        grid-template-columns: auto 1fr
    }

    .uprofile__stats {
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex-wrap: nowrap;
        grid-column: 1/-1;
        padding-top: 6px;
        overflow-x: auto
    }

    .uprofile__stats::-webkit-scrollbar {
        display: none
    }

    .uprofile__stat {
        flex: none
    }

    .uform__section {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .uform__grid-2 {
        grid-template-columns: 1fr
    }
}

@media (max-width:560px) {
    .uprofile__avatar {
        width: 88px;
        height: 88px
    }

    .uprofile__avatar-initial {
        font-size: 2.4rem
    }

    .uprofile__name {
        font-size: 1.6rem
    }

    .uprofile__stats {
        gap: 18px
    }

    .feed-grid {
        grid-template-columns: 1fr
    }
}

@media (max-width:360px) {
    .uprofile__stats {
        gap: 12px
    }

    .uprofile__stat-num {
        font-size: var(--text-xl)
    }

    .uprofile__stat-label {
        font-size: var(--text-2xs);
        letter-spacing: .08em
    }
}

.genres-main {
    max-width: var(--container);
    padding: 40px var(--gutter) 64px;
    margin: 0 auto
}

.gpage {
    flex-direction: column;
    gap: 32px;
    display: flex
}

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

.gpage__crumbs {
    font-size: var(--text-2xs);
    letter-spacing: .14em;
    color: var(--text-3);
    text-transform: uppercase;
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.gpage__crumb {
    color: var(--text-3);
    text-decoration: none
}

.gpage__crumb:hover,
.gpage__crumb.is-current {
    color: var(--text)
}

.gpage__crumb-sep {
    color: var(--text-4)
}

.gpage__title {
    letter-spacing: -.01em;
    color: var(--text);
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600
}

.gpage__sub {
    color: var(--text-3);
    font-size: var(--text-base);
    max-width: 640px;
    margin: 0
}

.gsec {
    flex-direction: column;
    gap: 12px;
    display: flex
}

.gsec__head {
    align-items: baseline;
    gap: 10px;
    display: flex
}

.gsec__title {
    font-size: var(--text-2xl);
    letter-spacing: -.005em;
    color: var(--text);
    margin: 0;
    font-weight: 600
}

.gsec__count {
    font-size: var(--text-xs);
    color: var(--text-4);
    background: var(--surface);
    border-radius: 999px;
    padding: 2px 8px
}

.ggrid {
    background: var(--surface);
    border-radius: var(--radius-sm);
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    overflow: hidden
}

.ggrid>li+li {
    border-top: 1px solid rgb(var(--text-rgb) / .06)
}

.gitem {
    color: inherit;
    grid-template-columns: 160px 1fr 90px;
    align-items: center;
    gap: 20px;
    padding: 12px 18px;
    text-decoration: none;
    transition: background .12s;
    display: grid
}

.gitem:hover {
    background: var(--surface-2)
}

.gitem__label {
    font-size: var(--text-base);
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    overflow: hidden
}

.gitem__bar {
    background: rgb(var(--text-rgb) / .08);
    border-radius: 999px;
    height: 8px;
    display: block;
    overflow: hidden
}

.gitem__fill {
    background: linear-gradient(90deg, rgb(var(--accent-rgb) / .3) 0%, var(--accent) 100%);
    border-radius: inherit;
    height: 100%;
    transition: width .3s;
    display: block
}

.gitem__count {
    font-size: var(--text-base);
    color: var(--text);
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600
}

@media (max-width:700px) {
    .ggrid {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        overflow-x: auto
    }

    .ggrid>li {
        width: max-content;
        min-width: 100%
    }

    .gitem {
        grid-template-columns: 160px 220px 80px;
        gap: 12px;
        padding: 10px 14px
    }
}

.gpage__sub-link {
    color: var(--accent);
    text-decoration: none
}

.gpage__sub-link:hover {
    text-decoration: underline
}

.gpage__tools {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    display: flex
}

.gpage__tools .usearch {
    flex: 240px;
    min-width: 200px
}

.gpage__tools .useg {
    flex-shrink: 0
}

.glist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.gcard {
    background: var(--surface);
    border-radius: var(--radius-md);
    border: 0;
    grid-template-columns: 56px 1fr auto;
    gap: 14px;
    padding: 16px;
    transition: background .12s;
    display: grid
}

.gcard:hover {
    background: var(--surface-2)
}

.gcard__actions {
    align-self: start;
    align-items: center;
    gap: 6px;
    display: inline-flex
}

.gcard__edit {
    border-radius: var(--radius-sm);
    width: 28px;
    height: 28px;
    color: var(--text-3);
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: inline-flex
}

.gcard__edit:hover {
    background: var(--bg-2);
    color: var(--text)
}

.gcard__logo {
    color: #fff;
    width: 56px;
    height: 56px;
    font-weight: 700;
    font-size: var(--text-lg);
    letter-spacing: .02em;
    border-radius: 12px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: inline-flex;
    overflow: hidden
}

.gcard__logo img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

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

.gcard__name {
    font-size: var(--text-lg);
    color: var(--text-emphasis);
    letter-spacing: -.005em;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    text-decoration: none;
    overflow: hidden
}

.gcard__name:hover {
    color: var(--accent)
}

.gcard__handle {
    color: var(--text-3);
    font-size: var(--text-sm)
}

.gcard__meta {
    color: var(--text-3);
    font-size: var(--text-xs);
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    display: flex
}

.gcard__meta strong {
    color: var(--text-emphasis);
    margin-right: 2px;
    font-weight: 600
}

.gcard__sep {
    color: var(--text-4)
}

.gcard__bio {
    color: var(--text-2);
    font-size: var(--text-sm);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 6px 0 0;
    line-height: 1.5;
    display: -webkit-box;
    overflow: hidden
}

@media (max-width:720px) {
    .glist {
        grid-template-columns: 1fr
    }

    .gcard {
        grid-template-columns: 48px 1fr;
        gap: 12px;
        padding: 14px
    }

    .gcard__logo {
        width: 48px;
        height: 48px;
        font-size: var(--text-md);
        border-radius: 10px
    }

    .gcard__name {
        font-size: var(--text-md)
    }
}

.manga-main {
    max-width: var(--container);
    padding: 0 var(--gutter) 64px;
    margin: 0 auto
}

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

.mpage__warn {
    color: var(--text);
    background: #eab3081a;
    border: 1px solid #eab30866;
    border-radius: 10px;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 14px;
    display: flex
}

.mpage__warn-icon {
    color: #eab308;
    flex: none;
    justify-content: center;
    align-items: center;
    margin-top: 1px;
    display: inline-flex
}

.mpage__warn-body {
    color: var(--text-2);
    min-width: 0
}

.mpage__hero {
    padding: 24px 0 28px;
    position: relative
}

.mpage__hero-inner {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
    display: grid
}

.mpage__poster {
    flex-direction: column;
    gap: 14px;
    width: 220px;
    display: flex
}

.mpage__poster .poster {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 6px 24px -10px #0006;
    aspect-ratio: 200/280 !important
}

.mpage__poster-actions {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.mpage__poster-actions>.btn,
.mpage__poster-actions>.mpage__follow,
.mpage__poster-actions>.mpage__follow>.btn {
    justify-content: center;
    width: 100%
}

.mpage__rate-stack {
    justify-content: center;
    padding: 4px 0;
    display: flex
}

.mpage__poster-aux {
    flex-direction: column;
    gap: 0;
    margin-top: 12px;
    display: flex
}

.mpage__action-link {
    cursor: pointer;
    color: var(--text-3);
    font-family: inherit;
    font-size: var(--text-sm);
    text-align: left;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 4px;
    text-decoration: none;
    transition: color .12s;
    display: flex
}

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

.mpage__action-link svg {
    color: inherit;
    flex-shrink: 0
}

.mpage__head {
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    display: flex
}

.mpage__crumbs {
    font-size: var(--text-2xs);
    letter-spacing: .14em;
    color: var(--text-3);
    text-transform: uppercase;
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.mpage__crumb {
    color: inherit;
    text-decoration: none
}

.mpage__crumb:hover,
.mpage__crumb.is-current {
    color: var(--text)
}

.mpage__crumb-sep {
    color: var(--text-4)
}

.mpage__stat--rank {
    color: inherit;
    text-decoration: none;
    transition: color .12s
}

.mpage__stat--rank svg {
    color: var(--accent);
    flex-shrink: 0
}

.mpage__stat--rank:hover {
    color: var(--accent)
}

.mpage__title {
    letter-spacing: -.02em;
    color: var(--text-emphasis);
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15
}

.mpage__alts {
    margin: 2px 0 4px
}

.mpage__alts-toggle {
    text-align: left;
    cursor: pointer;
    width: 100%;
    color: var(--text-3);
    font-size: var(--text-sm);
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 6px;
    padding: 0;
    font-family: inherit;
    display: flex
}

.mpage__alts-toggle:hover {
    color: var(--accent)
}

.mpage__alts-summary {
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 0 auto;
    min-width: 0;
    max-width: min(100%, 400px);
    overflow: hidden
}

.mpage__alts-toggle svg {
    color: var(--text-3);
    flex-shrink: 0
}

.mpage__alts-toggle>svg:last-child {
    transition: transform .2s;
    transform: rotate(90deg)
}

.mpage__alts-toggle.is-open>svg:last-child {
    transform: rotate(-90deg)
}

.mpage__alts-list {
    color: var(--text-2);
    font-size: var(--text-sm);
    flex-direction: column;
    margin: 6px 0 0;
    padding: 0;
    line-height: 1.5;
    list-style: none;
    display: flex
}

.mpage__alts-list li {
    padding: 2px 0
}

.mpage__badges {
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 4px;
    display: flex
}

.mpage__badge {
    font-size: var(--text-xs);
    letter-spacing: .04em;
    background: var(--surface-2);
    color: var(--text-2);
    border: 0;
    border-radius: 4px;
    align-items: center;
    padding: 3px 6px;
    font-weight: 600;
    display: inline-flex
}

.mpage__badge--rating-safe {
    color: #22a06b;
    background: #22a06b29
}

.mpage__badge--rating-suggestive {
    color: #d97706;
    background: #d9770629
}

.mpage__badge--rating-erotica {
    color: #ec4899;
    background: #ec489929
}

.mpage__badge--rating-pornographic {
    color: var(--danger);
    background: rgb(var(--danger-rgb) / .16)
}

.mpage__badge--status:before {
    content: "";
    background: currentColor;
    border-radius: 50%;
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    margin-right: 6px
}

.mpage__badge--status-releasing:before {
    background: var(--success)
}

.mpage__badge--status-finished:before {
    background: var(--info)
}

.mpage__badge--status-on_hiatus:before {
    background: var(--warning)
}

.mpage__badge--status-discontinued:before {
    background: var(--danger)
}

.mpage__badge--status-not_yet_released:before {
    background: var(--text-4)
}

.mpage__badge--rank {
    color: var(--accent);
    background: rgb(var(--accent-rgb) / .14);
    gap: 4px;
    text-decoration: none
}

.mpage__badge--rank:hover {
    background: rgb(var(--accent-rgb) / .22)
}

.mpage__badge--rank svg {
    color: currentColor;
    flex-shrink: 0
}

.mpage__title-row {
    align-items: center;
    gap: 10px;
    min-width: 0;
    display: flex
}

.mpage__title-row .mpage__title {
    overflow-wrap: anywhere;
    min-width: 0;
    margin: 0
}

.mpage__rank {
    flex-shrink: 0
}

.mpage__details {
    flex-direction: column;
    gap: 12px;
    margin: 18px 0 0;
    padding: 0;
    display: flex
}

.mpage__detail {
    flex-direction: column;
    gap: 4px;
    margin: 0;
    display: flex
}

.mpage__detail-label {
    font-size: var(--text-2xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 0
}

.mpage__detail-items {
    color: var(--text-2);
    font-size: var(--text-sm);
    margin: 0
}

.mpage__chips {
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.mpage__chip {
    background: var(--surface);
    color: var(--text-2);
    font-size: var(--text-xs);
    border: 0;
    border-radius: 999px;
    align-items: center;
    padding: 4px 12px;
    text-decoration: none;
    transition: background .12s, color .12s;
    display: inline-flex
}

.mpage__chip:hover {
    background: var(--surface-2);
    color: var(--text)
}

.mpage__tags-more {
    color: var(--text-3);
    font-size: var(--text-xs);
    line-height: inherit;
    border: 1px dashed rgb(var(--text-rgb) / .2);
    cursor: pointer;
    background: 0 0;
    border-radius: 999px;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    font-family: inherit;
    font-weight: 600;
    transition: color .12s, border-color .12s, background .12s;
    display: inline-flex
}

.mpage__tags-more:hover {
    color: var(--accent);
    border-color: var(--accent);
    border-style: solid
}

.mpage__tags-more svg {
    color: currentColor
}

.mpage__chip--tracker {
    gap: 6px;
    padding-left: 4px
}

.mpage__tracker-icon {
    object-fit: contain;
    background: rgb(var(--text-rgb) / .06);
    border-radius: 3px;
    flex-shrink: 0;
    width: 14px;
    height: 14px
}

.mpage__byline {
    color: var(--text-2);
    font-size: var(--text-base);
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    display: inline-flex
}

.mpage__byline a {
    color: var(--text);
    font-weight: 500;
    text-decoration: none
}

.mpage__byline a:hover {
    color: var(--accent);
    text-decoration: underline
}

.mpage__byline-label {
    font-size: var(--text-2xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3)
}

.mpage__byline-sep {
    color: var(--text-4)
}

.mpage__byline strong {
    color: var(--text);
    font-weight: 700;
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums
}

.mpage__status {
    background: var(--surface-2);
    color: var(--text-2);
    font-size: var(--text-sm);
    border-radius: 999px;
    padding: 1px 8px
}

.mpage__cta {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 4px 0;
    display: none
}

.mpage__read {
    height: 44px;
    font-size: var(--text-base);
    flex-shrink: 0;
    padding: 0 22px;
    font-weight: 600
}

.mpage__read svg {
    flex-shrink: 0
}

.mpage__cta-aux {
    align-items: center;
    gap: 4px;
    margin-left: auto;
    display: inline-flex
}

.mpage__cta-icon {
    border-radius: var(--radius);
    width: 38px;
    height: 38px;
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: color .12s, background .12s;
    display: inline-flex
}

.mpage__cta-icon:hover {
    color: var(--text);
    background: var(--surface)
}

.mpage__cta-icon svg {
    color: inherit;
    flex-shrink: 0
}

.mpage__follow-btn.is-on {
    background: rgb(var(--accent-rgb) / .12);
    color: var(--accent);
    border-color: rgb(var(--accent-rgb) / .25)
}

.mpage__follow-btn.is-on:hover {
    background: rgb(var(--accent-rgb) / .2);
    color: var(--accent);
    border-color: rgb(var(--accent-rgb) / .4)
}

.mpage__rate {
    align-items: center;
    display: inline-flex;
    position: relative
}

.mpage__rate-trigger {
    border-radius: var(--radius);
    width: 38px;
    height: 38px;
    color: var(--text-3);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-sm);
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 0;
    transition: color .12s, background .12s;
    display: none
}

.mpage__rate-trigger:hover {
    color: var(--text);
    background: var(--surface)
}

.mpage__rate-trigger.is-rated {
    color: var(--accent);
    background: rgb(var(--accent-rgb) / .1)
}

.mpage__rate-strip {
    display: inline-flex
}

.mpage__more {
    display: inline-flex;
    position: relative
}

.mpage__more-pop {
    z-index: 5;
    background: var(--surface);
    border-radius: var(--radius);
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    padding: 6px;
    animation: .14s ease-out both menu-in;
    display: flex;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    box-shadow: 0 18px 40px -12px #00000073, 0 2px 6px #00000040
}

:root[data-theme=light] .mpage__more-pop {
    box-shadow: 0 18px 40px -12px #0000002e, 0 2px 6px #00000014
}

.mpage__more-item {
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-family: inherit;
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    text-decoration: none;
    transition: background .12s, color .12s;
    display: flex
}

.mpage__more-item:hover {
    background: var(--surface-2);
    color: var(--text)
}

.mpage__more-item svg {
    color: var(--text-3);
    flex-shrink: 0
}

.mpage__details-shell {
    width: 100%
}

.mpage__details-shell-toggle {
    display: none
}

.mpage__details-shell-body {
    display: block
}

@media (min-width:721px) {
    .mpage__details-shell-body {
        height: auto !important;
        overflow: visible !important
    }
}

.mpage__sec {
    flex-direction: column;
    gap: 14px;
    display: flex
}

.mpage__sec-head {
    align-items: baseline;
    gap: 10px;
    display: flex
}

.mpage__sec-head--row {
    justify-content: space-between
}

.mpage__sec-titlewrap {
    align-items: baseline;
    gap: 10px;
    display: inline-flex
}

.mpage__upload {
    flex-shrink: 0;
    align-self: center
}

.mpage__sec-title {
    font-size: var(--text-2xl);
    letter-spacing: -.005em;
    color: var(--text-emphasis);
    margin: 0;
    font-weight: 600
}

.mpage__sec-count {
    font-size: var(--text-xs);
    color: var(--text-4);
    background: var(--surface);
    border-radius: 999px;
    padding: 2px 8px
}

.mpage__desc {
    color: var(--text-2);
    font-size: var(--text-base);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin: 0;
    line-height: 1.6;
    transition: height .25s;
    display: -webkit-box;
    overflow: hidden
}

.mpage__desc.is-expanded {
    -webkit-line-clamp: unset;
    display: block
}

.mpage__desc a {
    color: var(--accent);
    text-decoration: none;
    transition: color .15s, opacity .15s
}

.mpage__desc a:hover {
    opacity: .85;
    text-decoration: underline
}

.mpage__desc--measure {
    -webkit-line-clamp: unset !important;
    height: auto !important;
    display: block !important
}

.mpage__desc-toggle {
    cursor: pointer;
    color: var(--text-3);
    font-size: var(--text-sm);
    text-align: left;
    background: 0 0;
    border: 0;
    margin: 2px 0 0;
    padding: 0;
    font-family: inherit;
    display: block
}

.mpage__desc-toggle:hover {
    color: var(--accent)
}

.mchap-toolbar {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    display: flex
}

.mchap-toolbar__left {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
    display: flex
}

.mchap-toolbar>.mpage__group {
    margin-left: auto
}

.mchap-toolbar__sort {
    flex-shrink: 0
}

.mchap-toolbar__sort .useg__btn {
    min-height: 30px
}

@media (max-width:640px) {
    .mchap-toolbar {
        flex-wrap: wrap;
        gap: 8px
    }

    .mchap-toolbar>.mchap-search {
        flex: 1 0 100%;
        width: auto
    }

    .mchap-toolbar>.mpage__group {
        flex: 1 0 100%;
        min-width: 0;
        margin-left: 0
    }

    .mchap-toolbar>.mpage__group .ubtn {
        justify-content: space-between;
        width: 100%;
        min-width: 0
    }

    .mchap-toolbar>.mpage__group .ubtn>span {
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
        flex: auto;
        min-width: 0;
        overflow: hidden
    }

    .mchap-toolbar>.mchap-toolbar__sort {
        flex: 1 0 100%;
        display: flex
    }

    .mchap-toolbar>.mchap-toolbar__sort .useg__btn {
        flex: 1 1 0;
        justify-content: center
    }
}

.mchap-search {
    background: var(--surface);
    border-radius: var(--radius-sm);
    width: 240px;
    min-width: 0;
    height: var(--ctrl-md);
    border: 0;
    flex: none;
    align-items: center;
    padding: 0 12px 0 36px;
    transition: background .12s, box-shadow .12s;
    display: flex;
    position: relative
}

.mchap-search:hover {
    background: var(--surface-2)
}

.mchap-search:focus-within {
    background: var(--surface-2);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .22)
}

.mchap-search>svg {
    color: var(--text-3);
    position: absolute;
    left: 12px
}

.mchap-search input {
    color: var(--text);
    font: inherit;
    font-size: var(--text-md);
    background: 0 0;
    border: 0;
    outline: 0;
    flex: 1;
    min-width: 0
}

.mchap-search__clear {
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 4px;
    padding: 4px;
    display: inline-flex
}

.mchap-search__clear:hover {
    background: var(--bg-2);
    color: var(--text)
}

.mpage__group .ubtn {
    gap: 6px
}

.mpage__group.is-open .ubtn {
    background: var(--surface-2);
    border-color: var(--accent)
}

.mchap-list {
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.mchap-item {
    background: var(--surface);
    border-radius: var(--radius-sm);
    border: 0;
    align-items: stretch;
    transition: background .12s;
    display: flex;
    overflow: hidden
}

.mchap-item:hover {
    background: var(--surface-2)
}

.mchap-item.is-bookmarked {
    background: rgb(var(--accent-rgb) / .08)
}

.mchap-bookmark {
    width: 36px;
    color: var(--text-4);
    cursor: pointer;
    background: 0 0;
    border: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition: color .12s, background .12s;
    display: inline-flex
}

.mchap-bookmark:hover {
    color: var(--accent);
    background: rgb(var(--text-rgb) / .04)
}

.mchap-bookmark.is-on {
    color: var(--accent)
}

.mchap-bookmark.is-on svg {
    fill: currentColor
}

.mchap-row {
    color: inherit;
    flex: 1;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 11px 4px 11px 14px;
    text-decoration: none;
    display: grid
}

.mchap-row__primary {
    min-width: 0;
    color: inherit;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
    display: flex
}

.mchap-row__ch {
    color: var(--accent);
    font-weight: 600;
    font-size: var(--text-md);
    flex-shrink: 0
}

.mchap-row__vol {
    color: var(--text-3);
    font-weight: 500;
    font-size: var(--text-md);
    flex-shrink: 0
}

.mchap-row__title {
    font-size: var(--text-base);
    color: var(--text-2);
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden
}

.mchap-row__secondary {
    font-size: var(--text-md);
    color: var(--text-3);
    white-space: nowrap;
    align-items: baseline;
    gap: 8px;
    display: inline-flex
}

.mchap-row__group {
    color: var(--text-2);
    align-items: center;
    gap: 5px;
    font-weight: 500;
    text-decoration: none;
    transition: color .12s;
    display: inline-flex
}

.mchap-row__group:hover {
    color: var(--accent)
}

.mchap-row__group svg {
    color: var(--text-3);
    flex-shrink: 0
}

.mchap-row__group.is-official,
.mchap-row__group.is-official svg {
    color: var(--accent)
}

.mchap-row__official {
    color: var(--accent);
    font-size: var(--text-sm);
    letter-spacing: .04em;
    font-weight: 600
}

.mchap-row__uploader {
    color: var(--text-3);
    align-items: center;
    gap: 5px;
    text-decoration: none;
    transition: color .12s;
    display: inline-flex
}

.mchap-row__uploader:hover {
    color: var(--accent)
}

.mchap-row__uploader svg {
    color: var(--text-4);
    flex-shrink: 0
}

.mchap-row__user {
    color: var(--text-2)
}

.mchap-row__time,
.mchap-row__likes {
    font-size: var(--text-sm);
    color: var(--text-3)
}

.mchap-row__likes {
    align-items: center;
    gap: 4px;
    display: inline-flex
}

.mchap-row__likes svg {
    color: var(--text-3)
}

.mchap-row__sep {
    color: var(--text-4)
}

.mchap-foot {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    display: flex
}

.mchap-foot .npager {
    padding: 10px 0
}

.mchap-foot__hint {
    font-size: var(--text-sm);
    color: var(--text-3)
}

.mrec-form {
    max-width: 480px;
    position: relative
}

.mrec-form__field {
    height: var(--ctrl-md);
    background: var(--surface);
    border-radius: var(--radius-sm);
    border: 0;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    transition: border-color .12s, box-shadow .12s;
    display: flex
}

.mrec-form__field:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .18)
}

.mrec-form__field svg {
    color: var(--accent);
    flex-shrink: 0
}

.mrec-form__input {
    color: var(--text);
    font: inherit;
    font-size: var(--text-md);
    background: 0 0;
    border: 0;
    outline: 0;
    flex: 1
}

.mrec-form__pop {
    z-index: 30;
    background: var(--surface);
    border-radius: var(--radius-sm);
    margin: 0;
    padding: 4px;
    list-style: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    box-shadow: 0 12px 32px -12px #00000073
}

:root[data-theme=light] .mrec-form__pop {
    box-shadow: 0 12px 32px -12px #0000002e, 0 0 0 1px #0000000f
}

.mrec-form__pop--empty {
    text-align: center;
    color: var(--text-3);
    font-size: var(--text-md);
    padding: 14px
}

.mrec-form__pop-item {
    text-align: left;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 5px;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    transition: background .12s;
    display: flex
}

.mrec-form__pop-item:hover {
    background: var(--surface-2)
}

.mrec-form__pop-thumb {
    border-radius: 3px;
    flex-shrink: 0;
    width: 32px;
    height: 44px;
    display: block;
    overflow: hidden
}

.mrec-form__pop-body {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.mrec-form__pop-title {
    color: var(--text);
    font-weight: 500;
    font-size: var(--text-md);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.mrec-form__pop-sub {
    color: var(--text-4);
    font-size: var(--text-2xs);
    letter-spacing: .06em
}

.cm-widget__title-row {
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.cm-widget__lock {
    border-radius: var(--radius-sm);
    cursor: pointer;
    width: 28px;
    height: 28px;
    color: var(--text-2);
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    transition: background .15s, color .15s;
    display: inline-flex
}

.cm-widget__lock:hover {
    background: var(--surface-2);
    color: var(--text)
}

.cm-widget__lock.is-on {
    color: var(--accent-ink);
    background: var(--accent)
}

.cm-widget__locked {
    background: var(--surface);
    border-radius: var(--radius-sm);
    color: var(--text-3);
    font-size: var(--text-sm);
    border: 0;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    display: flex
}

.cm-widget__announcement {
    background: rgb(var(--accent-rgb) / .1);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: var(--text-sm);
    border: 0;
    margin-bottom: 12px;
    padding: 10px 14px 10px 36px;
    line-height: 1.5;
    position: relative
}

.cm-widget__announcement:before {
    content: "";
    width: 14px;
    height: 14px;
    color: var(--accent);
    background: currentColor;
    position: absolute;
    top: 13px;
    left: 12px;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") 50%/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") 50%/contain no-repeat
}

.cm-widget__announcement>:first-child {
    margin-top: 0
}

.cm-widget__announcement>:last-child {
    margin-bottom: 0
}

.cm-widget__announcement a {
    color: var(--accent);
    text-underline-offset: 2px;
    text-decoration: underline
}

.mpage__sec-count {
    font-size: var(--text-sm);
    color: var(--text-3);
    font-weight: 500
}

.mpage__recs {
    margin-top: 32px
}

.mcomments-form {
    --mcform-avatar: 2.2rem;
    grid-template-columns: var(--mcform-avatar) 1fr;
    background: 0 0;
    border: 0;
    border-radius: 0;
    align-items: flex-start;
    gap: 8px;
    padding: 0;
    display: grid
}

.mcomments-form__avatar {
    width: var(--mcform-avatar);
    height: var(--mcform-avatar);
    color: #fff;
    font-weight: 700;
    font-size: var(--text-sm);
    border-radius: 999px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

@media (max-width:768px) {
    .mcomments-form {
        --mcform-avatar: 2rem
    }
}

.mcomments-form__body {
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    display: flex
}

.mcomments-form__input {
    resize: vertical;
    min-height: 72px
}

.mcomments-form__bar {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    display: flex
}

.mcomments-form__toolbar {
    flex-wrap: wrap;
    flex: auto;
    align-items: center;
    gap: 4px;
    display: flex
}

.mcomments-form__submit {
    flex-shrink: 0
}

.mcomments-form__tool {
    cursor: pointer;
    min-width: 28px;
    height: 28px;
    color: var(--text-2);
    font-size: var(--text-sm);
    background: 0 0;
    border: 1px solid #0000;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    padding: 0 6px;
    font-family: inherit;
    display: inline-flex
}

.mcomments-form__tool:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text);
    border-color: rgb(var(--text-rgb) / .08)
}

.mcomments-form__tool:disabled {
    opacity: .4;
    cursor: not-allowed
}

.mcomments-form__tool--mode.is-on {
    color: var(--accent)
}

.mcomments-form__preview {
    background: var(--surface);
    border-radius: var(--radius-sm);
    min-height: 60px;
    color: var(--text);
    word-break: break-word;
    border: 0;
    padding: 10px 12px;
    line-height: 1.5
}

.mcomments-form__preview-empty {
    color: var(--text-4);
    font-style: italic
}

.rich-quote {
    border-left: 3px solid rgb(var(--accent-rgb) / .5);
    background: rgb(var(--text-rgb) / .04);
    color: var(--text-2);
    border-radius: 0 4px 4px 0;
    margin: 4px 0;
    padding: 4px 10px
}

.rich-spoiler {
    background: var(--text);
    color: var(--text);
    cursor: pointer;
    border-radius: 3px;
    padding: 0 4px;
    transition: background .12s, color .12s
}

.rich-spoiler:hover {
    background: rgb(var(--text-rgb) / .15);
    color: var(--text)
}

.rich-img {
    border-radius: var(--radius-sm);
    max-width: 240px;
    max-height: 240px;
    margin: 6px 0;
    display: block
}

.mcomments-empty {
    text-align: center;
    color: var(--text-3);
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: 32px 16px
}

.cm-widget {
    --cm-connection-color: rgb(var(--text-rgb) / .1);
    flex-direction: column;
    gap: 14px;
    display: flex
}

.cm-widget__head {
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    display: flex
}

.cm-widget__head .cm-widget__sort {
    flex-shrink: 0;
    margin-left: auto
}

.cm-widget__title {
    font-size: var(--text-base);
    color: var(--text-2);
    margin: 0;
    font-weight: 500
}

.cm-widget .cm-empty {
    text-align: center;
    color: var(--text-3);
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: 24px 16px
}

.cm-widget .cm-items {
    margin: 0;
    padding: 0;
    list-style: none
}

.cm-back {
    margin: 0
}

.cm-back__btn {
    color: var(--text-3);
    cursor: pointer;
    font-size: var(--text-sm);
    background: 0 0;
    border: 0;
    padding: 4px 0;
    font-family: inherit
}

.cm-back__btn:hover {
    color: var(--accent)
}

.cm-item {
    --cm-avatar-width: 2.2rem;
    padding-bottom: 1rem;
    transition: background .2s;
    position: relative
}

.cm-item--collapsed {
    padding-bottom: .5rem
}

.cm-item__replies>.cm-item--has-replies {
    padding-bottom: 0
}

.cm-item--highlight>.cm-item__main .cm-item__content {
    border: 1px dashed rgb(var(--accent-rgb) / .6);
    border-radius: 6px;
    padding: 8px 10px
}

.cm-item--collapsed>.cm-item__main .cm-item__content,
.cm-item--collapsed>.cm-item__main .cm-item__ctrls,
.cm-item--collapsed>.cm-item__deep,
.cm-item--collapsed>.cm-item__replies,
.cm-item--collapsed.cm-item--has-replies>.cm-item__main:before {
    display: none
}

.cm-item__main {
    align-items: flex-start;
    display: flex;
    position: relative
}

.cm-item--has-replies>.cm-item__main {
    padding-bottom: 1rem
}

.cm-item--has-replies>.cm-item__main:before {
    content: "";
    background: var(--cm-connection-color);
    width: 1px;
    left: calc(var(--cm-avatar-width) * .5);
    top: calc(var(--cm-avatar-width) + .5rem);
    position: absolute;
    bottom: 0
}

.cm-item__avatar {
    width: var(--cm-avatar-width);
    height: var(--cm-avatar-width);
    min-width: var(--cm-avatar-width);
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: .5rem;
    text-decoration: none;
    display: block;
    overflow: hidden
}

.cm-item__avatar>svg,
.cm-item__avatar>img,
.cm-item__avatar>span {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.cm-item__avatar>.cm-item__avatar-initial,
.cm-item__avatar-initial {
    color: #fff;
    width: 100%;
    height: 100%;
    font-weight: 700;
    font-size: var(--text-sm);
    justify-content: center;
    align-items: center;
    display: flex
}

.cm-item__avatar-initial--guest {
    background: var(--surface-2);
    color: var(--text-3)
}

.cm-item__avatar-initial--guest svg {
    width: 55%;
    height: 55%
}

.cm-item__detail {
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    min-width: 0;
    display: flex
}

.cm-item__header {
    align-items: flex-start;
    gap: 8px;
    padding-right: 2rem;
    display: flex;
    position: relative
}

.cm-item__header-main {
    flex-direction: column;
    flex: 1;
    gap: 1px;
    min-width: 0;
    display: flex
}

.cm-item__user {
    font-weight: 700;
    font-size: var(--text-base);
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: .3rem;
    line-height: 1.2;
    display: inline-flex
}

.cm-item__badge {
    font-size: var(--text-2xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgb(var(--accent-rgb) / .12);
    border-radius: 4px;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    font-weight: 600;
    display: inline-flex
}

.cm-item__badge--pinned svg {
    color: currentColor
}

.cm-item__mod {
    color: var(--success, #2bb673);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.cm-item__user a {
    color: var(--text);
    text-decoration: none
}

.cm-item__user a:hover {
    color: var(--accent)
}

.cm-item__user a.is-banned,
.comment__user.is-banned {
    text-decoration: line-through
}

.cm-item__time {
    color: var(--text-3);
    font-size: var(--text-xs);
    line-height: 1.2
}

.cm-item__collapser {
    cursor: pointer;
    color: var(--text-3);
    opacity: .35;
    -webkit-user-select: none;
    user-select: none;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    transition: all .2s;
    display: flex;
    position: absolute;
    top: 0;
    right: .5rem
}

.cm-item__collapser:hover {
    color: var(--accent);
    opacity: 1
}

.cm-item__main:hover .cm-item__collapser {
    opacity: 1
}

.cm-item__collapser i {
    font-style: normal;
    font-size: var(--text-lg);
    line-height: 1
}

.cm-item__content {
    color: var(--text-2);
    overflow-wrap: anywhere;
    margin: .3rem 0
}

.content-rendered b,
.content-rendered strong {
    font-weight: 600
}

.content-rendered a {
    color: var(--accent);
    text-decoration: underline;
    -webkit-text-decoration-color: rgb(var(--accent-rgb) / .45);
    text-decoration-color: rgb(var(--accent-rgb) / .45);
    text-underline-offset: 2px;
    word-break: break-word;
    text-decoration-thickness: 1px;
    transition: color .15s, text-decoration-color .15s
}

.content-rendered a:hover {
    color: var(--accent-2);
    text-decoration-color: currentColor
}

.content-rendered a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px
}

.content-rendered .spoil,
.content-rendered .rich-spoiler {
    cursor: pointer;
    filter: blur(3px);
    transition: filter .3s
}

.content-rendered .spoil.is-revealed,
.content-rendered .rich-spoiler.is-revealed {
    filter: none;
    cursor: default
}

.content-rendered blockquote {
    color: var(--text-3);
    margin: .5rem 0 .5rem 1.5rem;
    padding: 0 .5rem;
    font-style: italic;
    display: inline-block;
    position: relative
}

.content-rendered blockquote:before,
.content-rendered blockquote:after {
    color: var(--text-3);
    opacity: .4;
    font-family: Georgia, Times New Roman, serif;
    font-size: 1.4em;
    font-style: normal;
    line-height: 1;
    position: absolute
}

.content-rendered blockquote:before {
    content: "“";
    top: -.3rem;
    right: 100%
}

.content-rendered blockquote:after {
    content: "”";
    bottom: -.3rem;
    left: 100%
}

.content-rendered .rich-img,
.content-rendered img {
    border-radius: var(--radius-sm);
    max-width: min(100%, 240px);
    max-height: 240px;
    margin: 6px 0;
    display: block
}

.cm-item__ctrls {
    font-size: var(--text-sm);
    flex-wrap: wrap;
    align-items: center;
    display: flex
}

.cm-item__ctrl {
    color: var(--text-3);
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    background: 0 0;
    border: 0;
    align-items: center;
    margin-right: 1.5rem;
    padding: 0;
    display: inline-flex
}

.cm-item__ctrl:hover {
    color: var(--text)
}

.cm-item__ctrl--active {
    color: var(--accent)
}

.cm-item__ctrl--dislike.cm-item__ctrl--active {
    color: var(--danger)
}

.cm-item__ctrl span {
    margin-left: .25rem
}

.cm-item__menu {
    align-items: center;
    margin-right: 1.5rem;
    display: inline-flex
}

.cm-item__menu:last-child,
.cm-item__ctrl--menu {
    margin-right: 0
}

.cm-item__menu-back {
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-3);
    font-size: var(--text-2xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-bottom: 4px;
    padding: 8px 10px;
    font-family: inherit;
    font-weight: 600;
    transition: background .12s, color .12s;
    display: flex
}

.cm-item__menu-back:hover {
    color: var(--text);
    background: rgb(var(--text-rgb) / .06)
}

.cm-item__menu-back svg {
    color: currentColor;
    flex-shrink: 0
}

.cm-item__replies {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative
}

.cm-item__replies>.cm-item {
    padding-left: var(--cm-avatar-width);
    position: relative
}

.cm-item__replies>.cm-item:before {
    content: "";
    border-bottom: 1px solid var(--cm-connection-color);
    border-bottom-left-radius: calc(var(--cm-avatar-width) * .5);
    width: calc(var(--cm-avatar-width) * .5 - .5rem);
    height: calc(var(--cm-avatar-width) * .5);
    left: calc(var(--cm-avatar-width) * .5);
    position: absolute;
    top: 0
}

.cm-item__replies>.cm-item:after {
    content: "";
    background: var(--cm-connection-color);
    width: 1px;
    left: calc(var(--cm-avatar-width) * .5);
    position: absolute;
    top: 0;
    bottom: 0
}

.cm-item__replies>.cm-item:last-child:before {
    border-left: 1px solid var(--cm-connection-color)
}

.cm-item__replies>.cm-item:last-child:after {
    display: none
}

.cm-item--editor .cm-item__main {
    align-items: flex-start
}

.cm-editor {
    flex-direction: column;
    gap: 8px;
    width: 100%;
    display: flex
}

.cm-editor__input {
    resize: vertical;
    width: 100%;
    min-height: 60px
}

.cm-editor__bar {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    display: flex
}

.cm-editor__toolbar {
    flex-wrap: wrap;
    flex: auto;
    align-items: center;
    gap: 4px;
    display: flex
}

.cm-editor__actions {
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    display: flex
}

.cm-editor__tool {
    cursor: pointer;
    min-width: 28px;
    height: 28px;
    color: var(--text-2);
    font-size: var(--text-sm);
    background: 0 0;
    border: 1px solid #0000;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    padding: 0 6px;
    font-family: inherit;
    display: inline-flex
}

.cm-editor__tool:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text);
    border-color: rgb(var(--text-rgb) / .08)
}

.cm-editor__tool:disabled {
    opacity: .4;
    cursor: not-allowed
}

.cm-editor__tool.is-on {
    color: var(--accent)
}

.cm-editor__preview {
    background: var(--surface);
    border-radius: var(--radius-sm);
    min-height: 60px;
    color: var(--text);
    word-break: break-word;
    border: 0;
    padding: 10px 12px;
    line-height: 1.5
}

.cm-editor__preview-empty {
    color: var(--text-4);
    font-style: italic
}

.cm-editor__error {
    background: rgb(var(--danger-rgb, 223 79 79) / .08);
    border: 1px solid rgb(var(--danger-rgb, 223 79 79) / .25);
    border-left: 3px solid var(--danger, #df4f4f);
    border-radius: var(--radius-sm);
    color: var(--danger, #df4f4f);
    font-size: var(--text-sm);
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0 0;
    padding: 8px 12px;
    line-height: 1.4;
    display: flex
}

.cm-editor__error-close {
    width: 22px;
    height: 22px;
    color: inherit;
    cursor: pointer;
    opacity: .7;
    background: 0 0;
    border: 0;
    border-radius: 4px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: -2px -4px -2px 0;
    display: inline-flex
}

.cm-editor__error-close:hover {
    opacity: 1;
    background: rgb(var(--danger-rgb, 223 79 79) / .12)
}

.cm-item__more,
.cm-item__deep {
    padding-left: var(--cm-avatar-width);
    padding-top: calc(var(--cm-avatar-width) * .5 - .5rem);
    cursor: pointer;
    padding-bottom: 1rem;
    list-style: none;
    display: block;
    position: relative
}

.cm-item__more {
    padding-top: 0
}

.cm-item__more:before,
.cm-item__deep:before {
    content: "";
    border-left: 1px solid var(--cm-connection-color);
    border-bottom: 1px solid var(--cm-connection-color);
    border-bottom-left-radius: calc(var(--cm-avatar-width) * .5);
    width: calc(var(--cm-avatar-width) * .5 - .5rem);
    height: calc(var(--cm-avatar-width) * .5);
    left: calc(var(--cm-avatar-width) * .5);
    position: absolute;
    top: 0
}

.cm-item__more:before {
    height: 10px
}

.cm-item__more-link {
    color: var(--text-3);
    font-size: var(--text-sm);
    align-items: center;
    gap: 6px;
    text-decoration: none;
    display: inline-flex
}

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

.cm-spinner {
    animation: .8s linear infinite cm-spin
}

@keyframes cm-spin {
    to {
        transform: rotate(360deg)
    }
}

.cm-widget .cm-foot {
    justify-content: center;
    margin-top: 1rem;
    display: flex
}

.cm-foot__btn {
    justify-content: center;
    width: 100%
}

.toast-viewport {
    z-index: 300;
    pointer-events: none;
    flex-direction: column;
    gap: 8px;
    display: flex;
    position: fixed;
    bottom: 16px;
    right: 16px
}

.toast {
    pointer-events: auto;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    min-width: 220px;
    max-width: 360px;
    color: var(--text);
    font-size: var(--text-sm);
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    animation: .16s ease-out toast-in;
    display: flex;
    box-shadow: 0 18px 40px -12px #00000073, 0 2px 6px #00000040
}

:root[data-theme=light] .toast {
    box-shadow: 0 18px 40px -12px #0000002e, 0 2px 6px #00000014
}

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

.toast__close {
    width: 22px;
    height: 22px;
    color: inherit;
    opacity: .6;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    flex: none;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    line-height: 1;
    transition: opacity .15s, background-color .15s;
    display: inline-flex
}

.toast__close:hover {
    opacity: 1;
    background: rgb(var(--text-rgb) / .08)
}

.toast--success {
    border-left: 3px solid var(--accent)
}

.toast--error {
    border-left: 3px solid var(--danger);
    color: var(--danger)
}

@keyframes toast-in {
    0% {
        opacity: 0;
        transform: translate(8px)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@media (max-width:768px) {
    .cm-item {
        --cm-avatar-width: 2rem
    }
}

@media (max-width:480px) {
    .cm-item__ctrl--reply span {
        display: none
    }
}

.mpage__main {
    flex-direction: column;
    gap: 32px;
    min-width: 0;
    display: flex
}

.mpage__main>.cm-widget,
.mpage__body>.mpage__recs {
    margin-top: 0
}

@media (max-width:960px) {
    .mpage__body {
        grid-template-columns: 1fr;
        gap: 24px
    }
}

.mrec-list {
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.mrec-item {
    border-radius: var(--radius);
    grid-template-columns: 64px 1fr;
    align-items: stretch;
    gap: 14px;
    margin: 0 -10px;
    padding: 10px;
    transition: background .15s;
    display: grid
}

.mrec-item:hover {
    background: rgb(var(--text-rgb) / .025)
}

.mrec-item__poster {
    flex-shrink: 0;
    width: 64px;
    text-decoration: none;
    display: block
}

.mrec-item__poster .poster {
    border-radius: 4px;
    width: 64px;
    aspect-ratio: 5/7 !important
}

.mrec-item__body {
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 2px 0;
    display: flex
}

.mrec-item__title {
    font-size: var(--text-base);
    letter-spacing: -.005em;
    color: var(--text);
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: color .15s;
    display: -webkit-box;
    overflow: hidden
}

.mrec-item:hover .mrec-item__title {
    color: var(--accent)
}

.mrec-item__votes {
    align-items: center;
    gap: 4px;
    margin-top: auto;
    display: inline-flex
}

.mrec-vote {
    width: 26px;
    height: 26px;
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    transition: background .12s, color .12s;
    display: inline-flex
}

.mrec-vote svg {
    width: 18px;
    height: 18px
}

.mrec-vote:hover {
    background: var(--surface-2);
    color: var(--text)
}

.mrec-vote.is-on--up {
    color: var(--accent)
}

.mrec-vote.is-on--down {
    color: var(--danger)
}

.mrec-score {
    text-align: center;
    min-width: 22px;
    font-size: var(--text-xs);
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    font-weight: 600
}

.mrec-score--up {
    color: var(--accent)
}

.mrec-score--down {
    color: var(--danger)
}

.mrec-item__remove {
    width: 22px;
    height: 22px;
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    display: inline-flex
}

.mrec-item__remove:hover {
    color: var(--danger);
    background: rgb(var(--danger-rgb) / .08)
}

.mpage__recs-add-btn {
    justify-content: center;
    width: 100%;
    margin-top: 4px
}

.mrec-item__by:hover {
    color: var(--accent)
}

@media (max-width:1100px) {
    .mpage__hero-inner {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: 24px
    }

    .mpage__poster {
        width: 200px
    }
}

@media (max-width:960px) {
    .mpage__hero-inner {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 20px
    }

    .mpage__poster {
        width: 180px
    }
}

@media (max-width:720px) {
    .mpage__hero-inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "poster" "crumbs" "title" "alts" "badges" "byline" "cta" "desc" "details";
        row-gap: 8px
    }

    .mpage__poster {
        grid-area: poster;
        width: 160px;
        margin: 0 auto
    }

    .mpage__poster-actions {
        display: none
    }

    .mpage__head {
        display: contents
    }

    .mpage__crumbs {
        grid-area: crumbs;
        justify-content: center
    }

    .mpage__title-row {
        grid-area: title;
        justify-content: center
    }

    .mpage__alts {
        grid-area: alts;
        margin: 0
    }

    .mpage__badges {
        grid-area: badges;
        justify-content: center;
        margin: 0
    }

    .mpage__byline {
        grid-area: byline;
        justify-content: center
    }

    .mpage__cta {
        grid-area: cta;
        margin: 8px 0 0;
        display: flex
    }

    .mpage__desc-wrap {
        grid-area: desc;
        margin-top: 4px
    }

    .mpage__details-shell {
        grid-area: details;
        margin: 4px 0 0
    }

    .mpage__details-shell-toggle {
        background: var(--surface);
        border-radius: var(--radius-sm);
        cursor: pointer;
        width: 100%;
        color: var(--text);
        font-family: inherit;
        font-size: var(--text-sm);
        border: 0;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        font-weight: 500;
        display: flex
    }

    .mpage__details-shell-toggle:hover {
        background: var(--surface-2)
    }

    .mpage__details-shell-toggle svg {
        color: var(--text-3);
        transition: transform .15s;
        transform: rotate(90deg)
    }

    .mpage__details-shell.is-open .mpage__details-shell-toggle svg {
        transform: rotate(-90deg)
    }

    .mpage__details-shell.is-open .mpage__details-shell-body {
        padding-top: 10px
    }

    .mpage__title {
        text-align: center;
        font-size: 1.4rem;
        line-height: 1.2
    }

    .mpage__title-row .mpage__title {
        word-break: break-word
    }

    .mpage__badge--desk-only {
        display: none
    }

    .mpage__byline {
        font-size: var(--text-sm);
        flex-wrap: wrap;
        row-gap: 4px
    }

    .mpage__cta {
        flex-wrap: wrap;
        gap: 8px
    }

    .mpage__read {
        height: 48px;
        font-size: var(--text-md);
        flex: 1 0 100%;
        justify-content: center;
        padding: 0 18px;
        font-weight: 700
    }

    .mpage__read svg {
        width: 18px;
        height: 18px
    }

    .mpage__cta-aux {
        flex: 1 0 100%;
        gap: 6px;
        margin-left: 0
    }

    .mpage__cta-aux .mpage__follow {
        flex: auto;
        min-width: 0
    }

    .mpage__cta-aux .mpage__follow-btn {
        justify-content: space-between;
        width: 100%;
        height: 38px
    }

    .mpage__cta-aux .mpage__follow-btn>span {
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
        flex: auto;
        min-width: 0;
        overflow: hidden
    }

    .mpage__rate {
        flex: none
    }

    .mpage__rate-trigger {
        display: inline-flex
    }

    .mpage__rate-strip {
        z-index: 5;
        background: var(--surface);
        border-radius: var(--radius-sm);
        padding: 6px 8px;
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        box-shadow: 0 18px 40px -12px #00000073, 0 2px 6px #00000040
    }

    .mpage__rate.is-open .mpage__rate-strip {
        display: inline-flex
    }

    .mchap-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 10px 12px
    }

    .mchap-row__secondary {
        font-size: var(--text-sm);
        flex-wrap: wrap
    }
}

.mpage__meta {
    flex-direction: column;
    gap: 14px;
    display: flex
}

.mpage__body {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 32px;
    display: grid
}

.mpage__recs {
    flex-direction: column;
    gap: 14px;
    display: flex
}

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

.mpage__recs-head .nav-btns {
    margin-left: auto
}

.mpage__recs-add {
    background: var(--surface);
    border-radius: var(--radius-sm);
    width: 34px;
    height: 34px;
    color: var(--text-2);
    cursor: pointer;
    border: 0;
    justify-content: center;
    align-items: center;
    transition: background .15s, color .15s;
    display: inline-flex
}

.mpage__recs-add:hover {
    background: var(--surface-2);
    color: var(--text)
}

.mpage__meta-title {
    font-size: var(--text-2xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 0;
    font-weight: 600
}

.mpage__stats {
    font-size: var(--text-sm);
    color: var(--text-3);
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    display: inline-flex
}

.mpage__stat {
    align-items: baseline;
    gap: 6px;
    display: inline-flex
}

.mpage__stat strong {
    color: var(--text);
    font-weight: 600;
    font-size: var(--text-base);
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums
}

.mpage__stat-sub {
    color: var(--text-3)
}

.mpage__stat-sep {
    color: var(--text-4)
}

.mmeta {
    flex-wrap: wrap;
    gap: 14px 18px;
    margin: 0;
    display: flex
}

.mmeta__row {
    background: 0 0;
    flex-direction: column;
    flex: none;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    display: flex
}

.mmeta__label {
    font-size: var(--text-2xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 0;
    font-weight: 500
}

.mmeta__value,
.mmeta__chip {
    background: var(--surface);
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
    color: var(--text);
    word-break: break-word;
    align-items: center;
    max-width: 100%;
    margin: 0;
    padding: 5px 10px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: background .12s, color .12s;
    display: inline-flex
}

.mmeta__chip:hover {
    background: rgb(var(--accent-rgb) / .18);
    color: var(--accent)
}

.mmeta__chip--tracker {
    gap: 6px;
    padding: 3px 10px 3px 4px
}

.mmeta__tracker-icon {
    color: #fff;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--f-mono);
    border-radius: 3px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.mmeta__value--list {
    background: 0 0;
    padding: 0;
    display: block
}

.mmeta__sub {
    color: var(--text-3);
    font-size: var(--text-sm);
    margin-left: 4px
}

.mmeta__link {
    color: var(--text);
    border-bottom: 1px dashed #0000;
    text-decoration: none
}

.mmeta__link:hover {
    border-bottom-color: var(--accent);
    color: var(--accent)
}

.mmeta__chips {
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.mmeta__alts {
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.mmeta__alt {
    font-size: var(--text-md);
    color: var(--text-2);
    padding: 6px 0;
    line-height: 1.4
}

.mmeta__alt+.mmeta__alt {
    border-top: 1px dashed rgb(var(--text-rgb) / .12)
}

.mmeta__alt:first-child {
    padding-top: 0
}

.mmeta__alt:last-child {
    padding-bottom: 0
}

.mpage__chapters {
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    display: flex
}

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

.mpage__rate {
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-left: 0;
    display: flex
}

.mpage__rate-value {
    font-size: var(--text-sm);
    color: var(--text-3);
    letter-spacing: .04em
}

.mpage__rate-clear {
    width: 22px;
    height: 22px;
    color: var(--text-4);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    transition: color .12s, background .12s;
    display: inline-flex
}

.mpage__rate-clear:hover {
    color: var(--danger);
    background: var(--bg-2)
}

.mstars {
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    display: inline-flex
}

.mstars__btn {
    cursor: pointer;
    width: 32px;
    height: 32px;
    color: var(--text-4);
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    transition: color .12s, transform .12s;
    display: inline-flex
}

.mstars__btn svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4px;
    stroke-linejoin: round;
    width: 100%;
    height: 100%
}

.mstars__btn:hover {
    color: var(--text-3);
    transform: scale(1.05)
}

.mstars__btn.is-on {
    color: var(--accent)
}

.mstars__btn.is-on svg {
    fill: currentColor;
    stroke: none
}

.upload-dialog {
    z-index: 100;
    -webkit-backdrop-filter: blur(6px);
    background: #000000a6;
    place-items: start center;
    padding: 80px 24px 24px;
    display: grid;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto
}

.upload-dialog__panel {
    background: var(--surface);
    border-radius: var(--radius-lg);
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    animation: .2s cubic-bezier(.2, .9, .3, 1.15) both dialog-pop;
    display: flex;
    box-shadow: 0 40px 80px -20px #0009, 0 4px 12px #0000004d
}

:root[data-theme=light] .upload-dialog__panel {
    box-shadow: 0 40px 80px -20px #0003, 0 4px 12px #00000014
}

.upload-dialog__head {
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px 14px;
    display: flex
}

.upload-dialog__title {
    font-size: var(--text-xl);
    color: var(--text);
    margin: 0;
    font-weight: 600
}

.upload-dialog__sub {
    font-size: var(--text-sm);
    color: var(--text-3);
    margin: 4px 0 0
}

.upload-dialog__close {
    width: var(--ctrl-sm);
    height: var(--ctrl-sm);
    color: var(--text-3);
    cursor: pointer;
    border-radius: var(--radius-sm);
    background: 0 0;
    border: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition: background .12s, color .12s;
    display: inline-flex
}

.upload-dialog__close:hover {
    background: var(--bg-2);
    color: var(--text)
}

.upload-dialog__search {
    height: var(--ctrl-md);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 0;
    align-items: center;
    gap: 10px;
    margin: 14px 18px 4px;
    padding: 0 12px;
    transition: background .12s, box-shadow .12s;
    display: flex
}

.upload-dialog__search:focus-within {
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .22)
}

.upload-dialog__search svg {
    color: var(--text-3);
    flex-shrink: 0
}

.upload-dialog__search input {
    color: var(--text);
    font: inherit;
    font-size: var(--text-md);
    background: 0 0;
    border: 0;
    outline: 0;
    flex: 1
}

.upload-dialog__search-clear {
    width: 22px;
    height: 22px;
    color: var(--text-4);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.upload-dialog__search-clear:hover {
    background: var(--bg-2);
    color: var(--text)
}

.upload-dialog__results {
    max-height: 320px;
    padding: 4px 8px 8px;
    overflow-y: auto
}

.upload-dialog__empty {
    text-align: center;
    color: var(--text-3);
    font-size: var(--text-md);
    padding: 24px 12px
}

.upload-dialog__list {
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.upload-dialog__item {
    border-radius: var(--radius-sm);
    color: inherit;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    text-decoration: none;
    transition: background .12s;
    display: flex
}

.upload-dialog__item:hover {
    background: var(--surface-2)
}

.upload-dialog__thumb {
    border-radius: 4px;
    flex-shrink: 0;
    width: 32px;
    height: 44px;
    overflow: hidden
}

.upload-dialog__body {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.upload-dialog__name {
    color: var(--text);
    font-weight: 500;
    font-size: var(--text-md);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.upload-dialog__sub-line {
    color: var(--text-4);
    font-size: var(--text-2xs);
    letter-spacing: .06em
}

.upload-dialog__foot {
    padding: 10px 18px 16px
}

.upload-dialog__create {
    background: var(--accent);
    width: 100%;
    min-height: 36px;
    color: var(--accent-ink);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--text-md);
    cursor: pointer;
    border: 0;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    font-weight: 600;
    transition: background .12s;
    display: inline-flex
}

.upload-dialog__create:hover {
    background: var(--accent-2)
}

.upage-main {
    max-width: 760px;
    padding: 32px var(--gutter) 64px;
    margin: 0 auto
}

.colform-main {
    max-width: var(--container);
    padding: 32px var(--gutter) 64px;
    margin: 0 auto
}

.colform {
    flex-direction: column;
    gap: 22px;
    display: flex
}

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

.colform__crumbs {
    font-size: var(--text-2xs);
    letter-spacing: .14em;
    color: var(--text-3);
    text-transform: uppercase
}

.colform__crumb {
    color: var(--text-3);
    text-decoration: none
}

.colform__crumb:hover,
.colform__crumb.is-current {
    color: var(--text)
}

.colform__crumb-sep {
    color: var(--text-4);
    margin: 0 6px
}

.colform__title {
    font-size: var(--text-2xl);
    letter-spacing: -.01em;
    color: var(--text);
    margin: 0;
    font-weight: 700
}

.colform__sub {
    color: var(--text-3);
    font-size: var(--text-base);
    margin: 0
}

.colform__req {
    color: var(--accent)
}

.colform__grid {
    grid-template-columns: 1fr;
    gap: 18px;
    display: grid
}

@media (min-width:920px) {
    .colform__grid {
        grid-template-columns: minmax(320px, 380px) 1fr;
        align-items: start
    }
}

.colform__col {
    background: var(--surface);
    border-radius: var(--radius-md);
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    display: flex
}

.colform__section-title {
    font-size: var(--text-lg);
    color: var(--text);
    margin: 0;
    font-weight: 600
}

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

.colform__field.is-invalid .input,
.colform__field.is-invalid .input--area {
    box-shadow: inset 0 0 0 1px var(--danger)
}

.colform__field.is-invalid .input:focus,
.colform__field.is-invalid .input--area:focus {
    box-shadow: inset 0 0 0 1px var(--danger), 0 0 0 3px rgb(var(--danger-rgb) / .18)
}

.colform__error {
    font-size: var(--text-sm);
    color: var(--danger);
    align-items: center;
    gap: 6px;
    margin: 0;
    display: flex
}

.colform__error:before {
    content: "!";
    background: var(--danger);
    color: #fff;
    width: 14px;
    height: 14px;
    font-size: var(--text-2xs);
    border-radius: 999px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    display: inline-flex
}

.colform__label {
    font-size: var(--text-md);
    color: var(--text-2);
    font-weight: 500
}

.colform__hint {
    font-size: var(--text-sm);
    color: var(--text-3);
    align-self: flex-end
}

.colform__hint--warn {
    color: var(--warning, var(--accent));
    align-self: stretch
}

.colform__count {
    color: var(--text-4);
    font-size: var(--text-sm);
    margin-left: 6px
}

.colform__visi {
    gap: 18px;
    display: inline-flex
}

.colform__radio {
    cursor: pointer;
    color: var(--text-2);
    font-size: var(--text-md);
    align-items: center;
    gap: 6px;
    display: inline-flex
}

.colform__radio input {
    accent-color: var(--accent)
}

.colform__actions {
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
    display: flex
}

.colform__items-head {
    flex-direction: column;
    gap: 2px;
    display: flex
}

.colform__items-head .colform__hint {
    align-self: auto
}

.colform__search {
    height: var(--ctrl-md);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    transition: background .12s, box-shadow .12s;
    display: flex
}

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

.colform__search:focus-within {
    background: var(--surface-2);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .22)
}

.colform__search svg {
    color: var(--text-3);
    flex-shrink: 0
}

.colform__search input {
    color: var(--text);
    font: inherit;
    font-size: var(--text-md);
    background: 0 0;
    border: 0;
    outline: none;
    flex: 1
}

.colform__search-clear {
    color: var(--text-3);
    font-size: var(--text-lg);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    width: 22px;
    height: 22px;
    line-height: 1
}

.colform__search-clear:hover {
    color: var(--text);
    background: var(--surface-3)
}

.colform__suggest {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.colform__suggest-item {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    text-align: left;
    cursor: pointer;
    width: 100%;
    font: inherit;
    color: var(--text);
    border: 0;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    transition: background .12s;
    display: flex
}

.colform__suggest-item:hover {
    background: var(--surface-3)
}

.colform__suggest-item .poster {
    width: 32px;
    box-shadow: none;
    border-radius: 4px;
    flex-shrink: 0
}

.colform__item .poster {
    width: 44px;
    box-shadow: none;
    border-radius: 4px
}

.colform__suggest-add {
    background: rgb(var(--accent-rgb) / .18);
    width: 22px;
    height: 22px;
    color: var(--accent);
    border-radius: 999px;
    flex-shrink: 0;
    place-items: center;
    font-weight: 700;
    display: inline-grid
}

.colform__suggest-body {
    flex-direction: column;
    flex: 1;
    gap: 2px;
    min-width: 0;
    display: flex
}

.colform__suggest-title {
    font-size: var(--text-md);
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    overflow: hidden
}

.colform__suggest-sub {
    font-size: var(--text-sm);
    color: var(--text-3)
}

.colform__empty {
    color: var(--text-3);
    font-size: var(--text-md);
    text-align: center;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 14px 12px
}

.colform__empty--items {
    padding: 30px 12px
}

.colform__items {
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.colform__item {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    cursor: grab;
    grid-template-columns: 24px 28px 44px 1fr 28px;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    transition: background .12s, opacity .12s;
    display: grid
}

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

.colform__item.is-dragging {
    opacity: .55;
    cursor: grabbing
}

.colform__item-grip {
    color: var(--text-3);
    place-items: center;
    display: inline-grid
}

.colform__item-pos {
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    text-align: center;
    font-size: var(--text-sm)
}

.colform__item-body {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.colform__item-title {
    font-size: var(--text-md);
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    overflow: hidden
}

.colform__item-sub {
    font-size: var(--text-sm);
    color: var(--text-3)
}

.colform__item-remove {
    width: 26px;
    height: 26px;
    color: var(--text-3);
    font-size: var(--text-lg);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    place-items: center;
    line-height: 1;
    display: inline-grid
}

.colform__item-remove:hover {
    color: var(--danger);
    background: rgb(var(--danger-rgb) / .12)
}

@media (min-width:720px) {
    .colform__items {
        grid-template-columns: 1fr 1fr
    }
}

.upage {
    flex-direction: column;
    gap: 24px;
    display: flex
}

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

.upage__crumbs {
    font-size: var(--text-2xs);
    letter-spacing: .14em;
    color: var(--text-3);
    text-transform: uppercase;
    line-height: 1.5;
    display: block
}

.upage__crumb {
    color: var(--text-3);
    text-decoration: none
}

.upage__crumb:hover,
.upage__crumb.is-current {
    color: var(--text)
}

.upage__crumb-sep {
    color: var(--text-4);
    margin: 0 8px
}

.upage__title {
    letter-spacing: -.01em;
    color: var(--text);
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700
}

.upage__sub {
    font-size: var(--text-base);
    color: var(--text-3);
    margin: 0
}

.upage__req {
    color: var(--accent);
    margin: 0 1px
}

.upage__link {
    color: var(--accent);
    text-decoration: none
}

.upage__link:hover {
    text-decoration: underline
}

.upage__target {
    background: var(--surface);
    border-radius: var(--radius);
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    display: flex
}

.upage__target-poster {
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    width: 56px;
    display: block;
    overflow: hidden
}

.upage__target-info {
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    display: flex
}

.upage__target-label {
    font-size: var(--text-2xs);
    letter-spacing: .14em;
    color: var(--text-3);
    text-transform: uppercase
}

.upage__target-title {
    font-size: var(--text-lg);
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    text-decoration: none;
    overflow: hidden
}

.upage__target-title:hover {
    color: var(--accent)
}

.upage__target-meta {
    font-size: var(--text-sm);
    color: var(--text-3);
    align-items: center;
    gap: 8px;
    display: flex
}

.upage__target-sep {
    color: var(--text-4)
}

.upage__form {
    background: var(--surface);
    border-radius: var(--radius);
    flex-direction: column;
    gap: 18px;
    padding: 22px 22px 24px;
    display: flex;
    position: relative
}

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

.upage__row--split {
    flex-direction: row;
    gap: 16px
}

.upage__row--split>* {
    flex: 1;
    min-width: 0
}

.upage-field {
    flex-direction: column;
    gap: 6px;
    display: flex
}

.upage-field__label {
    font-size: var(--text-md);
    color: var(--text);
    font-weight: 500
}

.upage-field__input {
    width: 100%;
    height: var(--ctrl-md);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    font-size: var(--text-md);
    border: 0;
    outline: none;
    padding: 0 12px;
    transition: background .12s, box-shadow .12s
}

.upage-field__input:hover {
    background: var(--surface-3)
}

.upage-field__input:focus {
    background: var(--surface-2);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .22)
}

.upage-field__hint {
    font-size: var(--text-sm);
    color: var(--text-3)
}

.upage-field__error {
    font-size: var(--text-sm);
    color: var(--danger);
    align-items: center;
    gap: 6px;
    margin: 0;
    display: flex
}

.upage-field__error:before {
    content: "!";
    background: var(--danger);
    color: #fff;
    width: 14px;
    height: 14px;
    font-size: var(--text-2xs);
    border-radius: 999px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    display: inline-flex
}

.upage-field.is-invalid .input,
.upage-field.is-invalid .input--area,
.cpage-row.is-invalid .input {
    box-shadow: inset 0 0 0 1px var(--danger)
}

.upage-field.is-invalid .input:focus,
.upage-field.is-invalid .input--area:focus,
.cpage-row.is-invalid .input:focus {
    box-shadow: inset 0 0 0 1px var(--danger), 0 0 0 3px rgb(var(--danger-rgb) / .18)
}

.cpage-row__error {
    font-size: var(--text-sm);
    color: var(--danger);
    grid-column: 1/-1;
    align-items: center;
    gap: 6px;
    margin: 0;
    display: flex
}

.cpage-row__error:before {
    content: "!";
    background: var(--danger);
    color: #fff;
    width: 14px;
    height: 14px;
    font-size: var(--text-2xs);
    border-radius: 999px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    display: inline-flex
}

.cgp-logo {
    grid-template-columns: 120px 1fr;
    align-items: stretch;
    gap: 18px;
    display: grid
}

.cgp-logo__preview {
    border-radius: var(--radius-md);
    color: #fff;
    width: 120px;
    height: 120px;
    font-weight: 700;
    font-size: var(--text-3xl);
    letter-spacing: .02em;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    overflow: hidden
}

.cgp-logo__preview img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.cgp-logo__initials {
    line-height: 1
}

.cgp-logo__drop {
    margin: 0
}

.cgp-logo__clear {
    margin-top: 8px
}

.cgp-logo__actions {
    flex-wrap: wrap;
    align-self: center;
    align-items: center;
    gap: 8px;
    display: flex
}

@media (max-width:540px) {
    .cgp-logo {
        grid-template-columns: 1fr
    }

    .cgp-logo__preview {
        width: 96px;
        height: 96px;
        font-size: var(--text-2xl)
    }
}

.cgp-logo--poster {
    grid-template-columns: 140px 1fr
}

.cgp-logo--poster .cgp-logo__preview {
    background: var(--bg-2);
    width: 140px;
    height: 196px;
    color: var(--text-3);
    font-size: var(--text-md);
    font-weight: 500
}

@media (max-width:540px) {
    .cgp-logo--poster {
        grid-template-columns: 1fr
    }

    .cgp-logo--poster .cgp-logo__preview {
        width: 120px;
        height: 168px;
        font-size: var(--text-sm)
    }
}

.cgp-handle {
    height: var(--ctrl-md);
    background: var(--surface-2);
    border-radius: var(--radius);
    border: 0;
    align-items: stretch;
    gap: 0;
    transition: border-color .15s, box-shadow .15s;
    display: flex;
    overflow: hidden
}

.cgp-handle:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .18)
}

.cgp-handle__prefix {
    color: var(--text-3);
    background: var(--surface);
    border-right: 1px solid rgb(var(--text-rgb) / .08);
    font-size: var(--text-base);
    align-items: center;
    padding: 0 10px;
    display: inline-flex
}

.cgp-handle__input {
    background: 0 0;
    border: 0;
    border-radius: 0;
    flex: 1;
    height: 100%;
    padding: 0 12px
}

.cgp-handle__input:focus {
    box-shadow: none
}

.cgp-toggle {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 0;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    transition: background .12s;
    display: flex
}

.cgp-toggle:hover {
    background: var(--surface-3)
}

.cgp-toggle__input {
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 2px 0 0
}

.cgp-toggle__body {
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    display: flex
}

.cgp-toggle__title {
    color: var(--text);
    font-weight: 500;
    font-size: var(--text-base)
}

.cgp-toggle__hint {
    color: var(--text-3);
    font-size: var(--text-sm);
    line-height: 1.5
}

.cgp-member-add {
    align-items: stretch;
    gap: 10px;
    display: flex
}

.cgp-member-add__field {
    flex: auto;
    min-width: 0
}

.cgp-member-add .ubtn {
    flex-shrink: 0
}

.cgp-members {
    background: var(--surface);
    border-radius: var(--radius-sm);
    border: 0;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.cgp-member {
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    display: flex
}

.cgp-member+.cgp-member {
    border-top: 1px solid rgb(var(--text-rgb) / .06)
}

.cgp-member__handle {
    color: var(--text);
    font-weight: 500;
    font-family: var(--f-mono);
    font-size: var(--text-sm);
    margin-right: auto;
    text-decoration: none
}

.cgp-member__handle:hover {
    color: var(--accent)
}

.cgp-member__role {
    font-size: var(--text-2xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgb(var(--accent-rgb) / .12);
    font-family: var(--f-mono);
    border-radius: 999px;
    padding: 2px 8px
}

.cgp-member__menu {
    flex-shrink: 0;
    position: relative
}

.cgp-member__menu-trigger {
    width: 28px;
    height: 28px;
    color: var(--text-3);
    font-size: var(--text-lg);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    line-height: 1;
    transition: background .12s, color .12s;
    display: inline-flex
}

.cgp-member__menu-trigger:hover,
.cgp-member__menu.is-open .cgp-member__menu-trigger {
    background: var(--surface-2);
    color: var(--text)
}

.cgp-member__menu-pop {
    min-width: 180px;
    top: calc(100% + 4px);
    left: auto;
    right: 0
}

@media (max-width:540px) {
    .cgp-member-add {
        flex-direction: column
    }
}

.upage-group {
    position: relative
}

.upage-group__field {
    height: var(--ctrl-md);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 0;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    transition: background .12s, box-shadow .12s;
    display: flex
}

.upage-group__field:hover {
    background: var(--surface-3)
}

.upage-group__field:focus-within {
    background: var(--surface-2);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .18)
}

.upage-group__field svg {
    color: var(--text-3);
    flex-shrink: 0
}

.upage-group__field input {
    color: var(--text);
    font: inherit;
    font-size: var(--text-md);
    background: 0 0;
    border: 0;
    outline: 0;
    flex: 1
}

.upage-group--picked {
    min-height: var(--ctrl-md);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 0;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 0 8px 0 12px;
    display: flex
}

.upage-group__name {
    font-size: var(--text-md);
    color: var(--text);
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.upage-group__name svg {
    color: var(--text-3)
}

.upage-group__handle {
    color: var(--text-3);
    margin-left: 4px
}

.upage-group__clear {
    width: var(--ctrl-sm);
    height: var(--ctrl-sm);
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.upage-group__clear:hover {
    background: var(--bg-2);
    color: var(--danger)
}

.upage-group__pop {
    z-index: 30;
    background: var(--surface);
    border-radius: var(--radius);
    max-height: 280px;
    margin: 0;
    padding: 6px;
    list-style: none;
    animation: .14s ease-out both menu-in;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    overflow-y: auto;
    box-shadow: 0 18px 40px -12px #00000073, 0 2px 6px #00000040
}

:root[data-theme=light] .upage-group__pop {
    box-shadow: 0 18px 40px -12px #0000002e, 0 2px 6px #00000014
}

.upage-group__pop--empty {
    text-align: center;
    color: var(--text-3);
    font-size: var(--text-md);
    padding: 14px
}

.upage-group__item {
    text-align: left;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 5px;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    transition: background .12s;
    display: flex
}

.upage-group__item:hover {
    background: var(--surface)
}

.upage-group__item-body {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.upage-group__item-name {
    font-size: var(--text-md);
    color: var(--text);
    font-weight: 500
}

.upage-group__item-sub {
    font-size: var(--text-2xs);
    color: var(--text-4);
    letter-spacing: .06em
}

.upage-drop {
    background: var(--surface-2);
    border: 1.5px dashed rgb(var(--text-rgb) / .15);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    transition: border-color .15s, background .15s;
    display: flex
}

.upage-drop:hover,
.upage-drop.is-dragging {
    border-color: var(--accent);
    background: rgb(var(--accent-rgb) / .06)
}

.upage-drop__input {
    display: none
}

.upage-drop__icon {
    background: rgb(var(--accent-rgb) / .12);
    width: 48px;
    height: 48px;
    color: var(--accent);
    border-radius: 50%;
    place-items: center;
    margin-bottom: 4px;
    display: grid
}

.upage-drop__title {
    font-size: var(--text-base);
    color: var(--text);
    font-weight: 600
}

.upage-drop__sub {
    font-size: var(--text-sm);
    color: var(--text-3)
}

.upage-drop--has-file {
    cursor: default;
    border-style: solid;
    border-color: rgb(var(--text-rgb) / .1);
    background: var(--surface-2);
    padding: 12px 14px
}

.upage-drop--has-file:hover {
    border-color: rgb(var(--text-rgb) / .1);
    background: var(--surface-2)
}

.upage-drop__file {
    align-items: center;
    gap: 12px;
    width: 100%;
    display: flex
}

.upage-drop__file-icon {
    border-radius: var(--radius-sm);
    background: var(--surface);
    width: 36px;
    height: 36px;
    color: var(--accent);
    flex-shrink: 0;
    place-items: center;
    display: grid
}

.upage-drop__file-body {
    flex-direction: column;
    flex: 1;
    gap: 2px;
    min-width: 0;
    display: flex
}

.upage-drop__file-name {
    font-size: var(--text-md);
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    overflow: hidden
}

.upage-drop__file-size {
    font-size: var(--text-sm);
    color: var(--text-3)
}

.upage-drop__remove {
    width: var(--ctrl-sm);
    height: var(--ctrl-sm);
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 4px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.upage-drop__remove:hover {
    background: var(--bg-2);
    color: var(--danger)
}

.upage-toggle {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 0;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    transition: background .12s;
    display: flex
}

.upage-toggle:hover {
    background: rgb(var(--text-rgb) / .07)
}

.upage-toggle.is-on {
    background: rgb(var(--accent-rgb) / .14)
}

.upage-toggle__input {
    opacity: 0;
    pointer-events: none;
    position: absolute
}

.upage-toggle__box {
    background: var(--surface);
    border: 1.5px solid rgb(var(--text-rgb) / .22);
    color: #0000;
    border-radius: 4px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    transition: background .12s, border-color .12s, color .12s;
    display: inline-flex
}

.upage-toggle.is-on .upage-toggle__box {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink)
}

.upage-toggle__body {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.upage-toggle__title {
    font-size: var(--text-md);
    color: var(--text);
    font-weight: 500
}

.upage-toggle__sub {
    font-size: var(--text-sm);
    color: var(--text-3)
}

.upage__actions {
    border-top: 1px solid rgb(var(--text-rgb) / .06);
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding-top: 16px;
    display: flex
}

.upage__actions .ubtn {
    text-decoration: none
}

.upage__progress {
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
    display: flex
}

.upage__progress-bar {
    background: rgb(var(--text-rgb) / .08);
    border-radius: 999px;
    width: 100%;
    height: 8px;
    position: relative;
    overflow: hidden
}

.upage__progress-fill {
    background: var(--accent);
    border-radius: 999px;
    transition: width .15s;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto
}

.upage__progress-meta {
    font-size: var(--text-sm);
    color: var(--text-2);
    justify-content: space-between;
    display: flex
}

.upage__progress-meta .mono {
    color: var(--text-3)
}

.upage__toast {
    background: rgb(var(--accent-rgb) / .15);
    color: var(--accent);
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-weight: 500;
    display: inline-flex;
    position: absolute;
    bottom: 14px;
    left: 22px
}

.cpage__form {
    gap: 28px
}

.cpage-sec {
    background: var(--surface);
    border-radius: var(--radius-md);
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    display: flex
}

.cpage-sec__head {
    flex-direction: column;
    gap: 2px;
    display: flex
}

.cpage-sec__title {
    font-size: var(--text-lg);
    color: var(--text);
    margin: 0;
    font-weight: 600
}

.cpage-sec__sub {
    font-size: var(--text-sm);
    color: var(--text-3);
    margin: 0
}

.cpage-sec__body {
    flex-direction: column;
    gap: 14px;
    padding-top: 4px;
    display: flex
}

.cpage-sec__body>p {
    color: var(--text-2);
    font-size: var(--text-base);
    margin: 0;
    line-height: 1.55
}

.cpage-sec__body>p strong {
    color: var(--text);
    font-weight: 500
}

.cpage-chips {
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.cpage-chip {
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--text-sm);
    border: 0;
    border-radius: 999px;
    align-items: center;
    padding: 6px 12px;
    font-weight: 500;
    transition: background .12s, color .12s;
    display: inline-flex
}

.cpage-chip--accent {
    background: rgb(var(--accent-rgb) / .14);
    color: var(--accent)
}

.cred-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.cred-tile {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    color: var(--text);
    border: 0;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-decoration: none;
    transition: background .15s, transform .15s;
    display: inline-flex
}

a.cred-tile:hover {
    background: var(--surface);
    border-color: rgb(var(--text-rgb) / .16);
    transform: translateY(-1px)
}

.cred-tile__avatar {
    width: 32px;
    height: 32px;
    font-size: var(--text-sm);
    color: #fff;
    background: var(--avatar-bg, var(--accent));
    border-radius: 50%;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    display: inline-flex
}

.cred-tile__body {
    flex-direction: column;
    min-width: 0;
    display: flex
}

.cred-tile__name {
    font-size: var(--text-sm);
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    overflow: hidden
}

.cred-tile__role {
    font-size: var(--text-xs);
    color: var(--text-3);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.cpage-steps {
    counter-reset: cpage-step;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.cpage-steps li {
    background: var(--surface-2);
    border: 1px solid rgb(var(--text-rgb) / .06);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: var(--text-base);
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    line-height: 1.55;
    display: flex
}

.cpage-steps li:before {
    counter-increment: cpage-step;
    content: counter(cpage-step);
    background: rgb(var(--accent-rgb) / .15);
    width: 24px;
    height: 24px;
    color: var(--accent);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    border-radius: 999px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    display: inline-flex
}

.cpage-steps strong {
    color: var(--text);
    font-weight: 500
}

.cpage-pwa-install {
    flex-direction: column;
    gap: 10px;
    display: flex
}

.cpage-pwa-install__btn {
    text-align: left;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    width: 100%;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    border: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 14px;
    transition: background .15s;
    display: flex
}

.cpage-pwa-install__btn:hover {
    background: var(--surface-3)
}

.cpage-pwa-install__title {
    font-weight: 600;
    font-size: var(--text-base)
}

.cpage-pwa-install__sub {
    font-size: var(--text-sm);
    color: var(--text-3);
    font-weight: 400
}

.cpage-pwa-install__or {
    color: var(--text-4);
    font-size: var(--text-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    align-items: center;
    gap: 12px;
    display: flex
}

.cpage-pwa-install__or:before,
.cpage-pwa-install__or:after {
    content: "";
    background: rgb(var(--text-rgb) / .08);
    flex: 1;
    height: 1px
}

.cpage-pwa-ios {
    flex-direction: column;
    gap: 12px;
    display: flex
}

.cpage-pwa-ios__shot {
    max-width: 100%;
    max-height: 420px;
    margin: 0 auto;
    display: block
}

.cpage-sec__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    display: grid
}

.cpage-sec__grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

@media (max-width:720px) {

    .cpage-sec__grid,
    .cpage-sec__grid--3 {
        grid-template-columns: 1fr
    }
}

.cpage-dd {
    position: relative
}

.cpage-dd__trigger {
    cursor: pointer;
    text-align: left;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    display: flex
}

.cpage-dd__trigger>svg {
    color: var(--text-3);
    flex-shrink: 0;
    transition: transform .12s;
    transform: rotate(90deg)
}

.cpage-dd.is-open .cpage-dd__trigger>svg {
    transform: rotate(-90deg)
}

.cpage-dd__placeholder {
    color: var(--text-4)
}

.cpage-dd__pop {
    width: 100%
}

.cpage-chips {
    min-height: var(--ctrl-md);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    transition: background .12s, box-shadow .12s;
    display: flex;
    position: relative
}

.cpage-chips__suggest {
    flex-direction: column;
    gap: 2px;
    max-height: 240px;
    display: flex;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    overflow-y: auto
}

.cpage-chips:focus-within {
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .22)
}

.cpage-chips__chip {
    background: var(--surface-3);
    color: var(--text);
    font-size: var(--text-sm);
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 10px;
    display: inline-flex
}

.cpage-chips__remove {
    width: 18px;
    height: 18px;
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.cpage-chips__remove:hover {
    background: var(--bg-2);
    color: var(--text)
}

.cpage-chips__input {
    min-width: 100px;
    color: var(--text);
    font: inherit;
    font-size: var(--text-md);
    height: calc(var(--ctrl-md) - 8px);
    background: 0 0;
    border: 0;
    outline: none;
    flex: 1;
    padding: 0
}

.cpage-genres {
    flex-wrap: wrap;
    gap: 8px;
    display: flex
}

.cpage-genre {
    background: var(--surface-2);
    color: var(--text-2);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    border: 1px solid #0000;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    transition: background .12s, color .12s, border-color .12s;
    display: inline-flex
}

.cpage-genre:hover {
    color: var(--text);
    background: rgb(var(--text-rgb) / .07)
}

.cpage-genre.is-on {
    color: var(--accent);
    background: rgb(var(--accent-rgb) / .12);
    border-color: rgb(var(--accent-rgb) / .4);
    padding-left: 10px
}

.cpage-genre__check {
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.cpage-rows {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.cpage-row {
    align-items: center;
    gap: 8px;
    display: grid
}

.cpage-row--alt {
    grid-template-columns: 1fr auto
}

.cpage-row--tracker {
    grid-template-columns: 140px 1fr auto
}

.cpage-row--source {
    grid-template-columns: 160px 1fr auto
}

.cpage-row__lang,
.cpage-row__title,
.cpage-row__src-label {
    min-width: 0
}

.cpage-row__remove {
    width: var(--ctrl-md);
    height: var(--ctrl-md);
    color: var(--text-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    transition: background .12s, color .12s;
    display: inline-flex
}

.cpage-row__remove:hover {
    background: var(--bg-2);
    color: var(--danger)
}

.cpage-rows__add {
    border: 1px dashed rgb(var(--text-rgb) / .18);
    color: var(--text-3);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    background: 0 0;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    transition: color .12s, border-color .12s, background .12s;
    display: inline-flex
}

.cpage-rows__add:hover {
    color: var(--accent);
    border-color: rgb(var(--accent-rgb) / .5);
    background: rgb(var(--accent-rgb) / .06)
}

@media (max-width:540px) {

    .cpage-row--tracker,
    .cpage-row--source {
        grid-template-columns: 1fr auto
    }

    .cpage-row--tracker .cpage-row__lang,
    .cpage-row--source .cpage-row__src-label {
        grid-column: 1/-1
    }
}

.cpage-cover {
    width: 100%;
    max-width: 200px
}

.cpage-cover.upage-drop {
    aspect-ratio: 2/3
}

.cpage-cover--has-file {
    background: 0 0;
    border: 0;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    max-width: none;
    padding: 0;
    display: flex
}

.cpage-cover__preview {
    aspect-ratio: 2/3;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 0;
    flex-shrink: 0;
    width: 200px;
    overflow: hidden
}

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

.cpage-cover__body {
    flex-direction: column;
    flex: 1;
    gap: 6px;
    min-width: 0;
    display: flex
}

.cpage-cover__name {
    font-size: var(--text-sm);
    color: var(--text);
    word-break: break-word
}

.cpage-cover__size {
    font-size: var(--text-xs);
    color: var(--text-3)
}

.cpage-cover__replace {
    background: var(--surface-2);
    border: 1px dashed rgb(var(--text-rgb) / .22);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--text-sm);
    cursor: pointer;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 14px;
    font-weight: 500;
    transition: border-color .12s, color .12s, background .12s;
    display: inline-flex
}

.cpage-cover__replace:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgb(var(--accent-rgb) / .08)
}

.cpage-cover__replace .upage-drop__input {
    opacity: 0;
    pointer-events: none;
    position: absolute
}

@media (max-width:600px) {
    .upage__row--split {
        flex-direction: column
    }
}

.urow__head {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    display: flex
}

.urow__chap {
    font-size: var(--text-md);
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
    display: flex
}

.urow__vol {
    color: var(--text-3);
    font-weight: 500
}

.urow__ch {
    color: var(--accent);
    flex-shrink: 0;
    font-weight: 600
}

.urow__ch-title {
    color: var(--text-2);
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden
}

.urow__meta {
    font-size: var(--text-sm);
    color: var(--text-3);
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    display: flex
}

.urow__group {
    color: var(--text-2);
    align-items: center;
    gap: 4px;
    font-weight: 500;
    display: inline-flex
}

.urow__group svg,
.urow__sep {
    color: var(--text-4)
}

.urow__status {
    font-size: var(--text-2xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    font-family: var(--f-mono);
    border-radius: 999px;
    align-items: center;
    padding: 2px 8px;
    display: inline-flex
}

.urow__status--visible {
    color: #76c28a;
    background: #76c28a26
}

.urow__status--pending {
    color: #d99c56;
    background: #d99c5626
}

.urow__status--rejected {
    background: rgb(var(--danger-rgb) / .15);
    color: var(--danger)
}

.urow__errors {
    background: rgb(var(--danger-rgb) / .08);
    border-radius: var(--radius-sm);
    color: var(--danger);
    font-size: var(--text-sm);
    margin: 6px 0 0;
    padding: 8px 12px 8px 28px;
    line-height: 1.5;
    list-style: outside
}

.urow__errors li+li {
    margin-top: 2px
}

.recdialog {
    z-index: 100;
    -webkit-backdrop-filter: blur(6px);
    background: #000000a6;
    place-items: start center;
    padding: 80px 24px 24px;
    display: grid;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto
}

.recdialog__panel {
    background: var(--surface);
    border-radius: var(--radius-lg);
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    animation: .2s cubic-bezier(.2, .9, .3, 1.15) both dialog-pop;
    display: flex;
    box-shadow: 0 40px 80px -20px #0009, 0 4px 12px #0000004d
}

:root[data-theme=light] .recdialog__panel {
    box-shadow: 0 40px 80px -20px #0003, 0 4px 12px #00000014
}

.recdialog__head {
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px 14px;
    display: flex
}

.recdialog__title {
    font-size: var(--text-xl);
    color: var(--text);
    margin: 0;
    font-weight: 600
}

.recdialog__sub {
    font-size: var(--text-sm);
    color: var(--text-3);
    margin: 4px 0 0
}

.recdialog__close {
    width: var(--ctrl-sm);
    height: var(--ctrl-sm);
    color: var(--text-3);
    cursor: pointer;
    border-radius: var(--radius-sm);
    background: 0 0;
    border: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition: background .12s, color .12s;
    display: inline-flex
}

.recdialog__close:hover {
    background: var(--bg-2);
    color: var(--text)
}

.recdialog__body {
    padding: 14px 18px 8px
}

.recdialog__search {
    height: var(--ctrl-md);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 0;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    transition: background .12s, box-shadow .12s;
    display: flex
}

.recdialog__search:focus-within {
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .22)
}

.recdialog__search svg {
    color: var(--text-3);
    flex-shrink: 0
}

.recdialog__search input {
    color: var(--text);
    font: inherit;
    font-size: var(--text-md);
    background: 0 0;
    border: 0;
    outline: 0;
    flex: 1
}

.recdialog__search-clear {
    width: 22px;
    height: 22px;
    color: var(--text-4);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.recdialog__search-clear:hover {
    background: var(--bg-2);
    color: var(--text)
}

.recdialog__empty {
    text-align: center;
    color: var(--text-3);
    font-size: var(--text-md);
    padding: 28px 12px
}

.recdialog__list {
    flex-direction: column;
    gap: 1px;
    max-height: 280px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    overflow-y: auto
}

.recdialog__item {
    border-radius: var(--radius-sm);
    text-align: left;
    cursor: pointer;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    transition: background .12s;
    display: flex
}

.recdialog__item:hover {
    background: var(--surface-2)
}

.recdialog__thumb {
    border-radius: 4px;
    flex-shrink: 0;
    width: 32px;
    height: 44px;
    overflow: hidden
}

.recdialog__item-body {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.recdialog__name {
    color: var(--text);
    font-weight: 500;
    font-size: var(--text-md);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.recdialog__sub-line {
    color: var(--text-4);
    font-size: var(--text-2xs);
    letter-spacing: .06em
}

.recdialog__picked {
    background: rgb(var(--accent-rgb) / .08);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 10px 12px;
    display: flex
}

.recdialog__picked-thumb {
    border-radius: 4px;
    flex-shrink: 0;
    width: 36px;
    height: 50px;
    overflow: hidden
}

.recdialog__picked-body {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.recdialog__picked-name {
    color: var(--text);
    font-weight: 600;
    font-size: var(--text-md)
}

.recdialog__picked-sub {
    color: var(--text-3);
    font-size: var(--text-2xs);
    letter-spacing: .06em
}

.recdialog__picked-check {
    width: var(--ctrl-sm);
    height: var(--ctrl-sm);
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 50%;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    display: inline-flex
}

.recdialog__foot {
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px 16px;
    display: flex
}

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

.reportdlg {
    z-index: 100;
    -webkit-backdrop-filter: blur(6px);
    background: #000000a6;
    place-items: start center;
    padding: 80px 24px 24px;
    animation: .14s ease-out dialog-fade;
    display: grid;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto
}

.reportdlg__panel {
    background: var(--surface);
    border-radius: var(--radius-lg);
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    animation: .2s cubic-bezier(.2, .9, .3, 1.15) both dialog-pop;
    display: flex;
    box-shadow: 0 40px 80px -20px #0009, 0 4px 12px #0000004d
}

:root[data-theme=light] .reportdlg__panel {
    box-shadow: 0 40px 80px -20px #0003, 0 4px 12px #00000014
}

.reportdlg__head {
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px 14px;
    display: flex
}

.reportdlg__title {
    font-size: var(--text-xl);
    color: var(--text);
    margin: 0;
    font-weight: 600
}

.reportdlg__sub {
    font-size: var(--text-sm);
    color: var(--text-3);
    margin: 4px 0 0
}

.histdlg {
    z-index: 100;
    -webkit-backdrop-filter: blur(6px);
    background: #000000a6;
    place-items: start center;
    padding: 80px 24px 24px;
    animation: .14s ease-out dialog-fade;
    display: grid;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto
}

.histdlg__panel {
    background: var(--surface);
    border-radius: var(--radius-lg);
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 120px);
    animation: .2s cubic-bezier(.2, .9, .3, 1.15) both dialog-pop;
    display: flex;
    box-shadow: 0 40px 80px -20px #0009, 0 4px 12px #0000004d
}

:root[data-theme=light] .histdlg__panel {
    box-shadow: 0 40px 80px -20px #0003, 0 4px 12px #00000014
}

.histdlg__head {
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px 14px;
    display: flex
}

.histdlg__title {
    font-size: var(--text-xl);
    color: var(--text);
    margin: 0;
    font-weight: 600
}

.histdlg__sub {
    font-size: var(--text-sm);
    color: var(--text-3);
    margin: 4px 0 0
}

.histdlg__close {
    border-radius: var(--radius-sm);
    width: 32px;
    height: 32px;
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.histdlg__close:hover {
    background: var(--bg-2);
    color: var(--text)
}

.histdlg__body {
    overscroll-behavior: contain;
    flex: auto;
    min-height: 0;
    padding: 8px 0 16px;
    overflow-y: auto
}

.histdlg__loading,
.histdlg__empty {
    text-align: center;
    color: var(--text-3);
    padding: 28px 20px
}

.histdlg__empty-title {
    font-size: var(--text-md);
    color: var(--text);
    font-weight: 500
}

.histdlg__empty-sub {
    font-size: var(--text-sm);
    margin-top: 4px
}

.histdlg__list {
    margin: 0;
    padding: 0;
    list-style: none
}

.histdlg__more {
    justify-content: center;
    padding: 12px 20px;
    display: flex
}

.histrow__head {
    cursor: pointer;
    text-align: left;
    width: 100%;
    font: inherit;
    color: var(--text);
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    transition: background .12s;
    display: flex
}

.histrow__head:hover {
    background: rgb(var(--text-rgb) / .03)
}

.histrow.is-open .histrow__head {
    background: rgb(var(--text-rgb) / .04)
}

.histrow__avatar {
    background: var(--surface-2);
    border-radius: 999px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    display: inline-flex;
    overflow: hidden
}

.histrow__avatar img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.histrow__avatar-fallback {
    color: var(--text-3);
    font-weight: 600;
    font-size: var(--text-sm)
}

.histrow__meta {
    flex: auto;
    min-width: 0
}

.histrow__line1 {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    display: flex
}

.histrow__user {
    color: var(--text);
    font-weight: 500;
    text-decoration: none
}

.histrow__user:hover {
    color: var(--accent)
}

.histrow__user--gone {
    color: var(--text-4);
    font-style: italic
}

.histrow__source {
    color: var(--text-3);
    font-size: var(--text-sm)
}

.histrow__summary {
    color: var(--text-2);
    font-size: var(--text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
    overflow: hidden
}

.histrow.is-open .histrow__summary {
    white-space: normal
}

.histrow__time {
    color: var(--text-4);
    font-size: var(--text-xs);
    flex-shrink: 0
}

.histrow__restore {
    border-radius: var(--radius);
    width: 32px;
    height: 32px;
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition: color .12s, background .12s;
    display: inline-flex
}

.histrow__restore:hover {
    color: var(--accent);
    background: rgb(var(--accent-rgb) / .08)
}

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

.histrow__chev {
    color: var(--text-4);
    flex-shrink: 0;
    transition: transform .15s;
    display: inline-flex;
    transform: rotate(90deg)
}

.histrow.is-open .histrow__chev {
    transform: rotate(-90deg)
}

.histrow__body {
    height: 0;
    overflow: hidden
}

.histrow__body-inner {
    padding: 4px 20px 16px
}

.histrow__loading,
.histrow__nodiff {
    color: var(--text-3);
    font-size: var(--text-sm)
}

.histdiff {
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    display: flex
}

.histdiff__row {
    align-items: flex-start;
    gap: 12px;
    display: flex
}

.histdiff__row--scalar {
    flex-direction: column;
    gap: 4px
}

.histdiff__label {
    width: 110px;
    font-size: var(--text-2xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
    flex: none;
    margin: 0;
    padding-top: 4px
}

.histdiff__row--scalar .histdiff__label {
    width: auto;
    padding-top: 0
}

.histdiff__chips {
    flex-wrap: wrap;
    flex: auto;
    gap: 6px;
    margin: 0;
    display: flex
}

.histdiff__chip {
    font-size: var(--text-xs);
    border: 1px solid #0000;
    border-radius: 999px;
    padding: 2px 10px;
    font-weight: 500
}

.histdiff__chip--added {
    color: #22a06b;
    background: #22a06b14;
    border-color: #22a06b4d
}

.histdiff__chip--removed {
    color: var(--danger);
    border-color: rgb(var(--danger-rgb) / .3);
    background: rgb(var(--danger-rgb) / .08);
    text-decoration: line-through
}

.histdiff__scalar {
    font-size: var(--text-sm);
    color: var(--text-2);
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    display: flex
}

.histdiff__before {
    color: var(--text-3);
    word-break: break-word;
    text-decoration: line-through
}

.histdiff__arrow {
    color: var(--text-4);
    flex-shrink: 0
}

.histdiff__after {
    color: var(--text);
    word-break: break-word;
    font-weight: 500
}

@media (max-width:720px) {
    .histdlg {
        place-items: stretch stretch;
        padding: 0
    }

    .histdlg__panel {
        border-radius: 0;
        max-width: 100%;
        height: 100dvh;
        max-height: 100vh
    }

    .histdlg__head {
        padding: 14px 16px 10px
    }

    .histdlg__title {
        font-size: var(--text-lg)
    }

    .histdlg__sub {
        font-size: var(--text-xs)
    }

    .histrow__head {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 14px
    }

    .histrow__avatar {
        flex-shrink: 0
    }

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

    .histrow__line1 {
        flex-wrap: wrap;
        gap: 4px
    }

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

    .histrow__summary {
        font-size: var(--text-xs);
        white-space: normal
    }

    .histrow__restore {
        width: 28px;
        height: 28px
    }

    .histrow__chev {
        display: none
    }

    .histrow__body-inner {
        padding: 4px 14px 14px
    }

    .histdiff__row {
        flex-direction: column;
        gap: 4px
    }

    .histdiff__label {
        width: auto;
        padding-top: 0
    }

    .histdiff__chips {
        width: 100%
    }

    .histdiff__scalar {
        font-size: var(--text-xs)
    }

    .histdiff__before,
    .histdiff__after {
        word-break: break-all
    }
}

.minidlg {
    z-index: 200;
    -webkit-backdrop-filter: blur(6px);
    background: #000000a6;
    justify-content: center;
    align-items: center;
    padding: 16px;
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.minidlg__panel {
    background: var(--surface);
    border-radius: var(--radius-lg);
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 360px;
    padding: 16px;
    animation: .2s cubic-bezier(.2, .9, .3, 1.15) both dialog-pop;
    display: flex;
    box-shadow: 0 40px 80px -20px #0009, 0 4px 12px #0000004d
}

:root[data-theme=light] .minidlg__panel {
    box-shadow: 0 40px 80px -20px #0003, 0 4px 12px #00000014
}

.minidlg__title {
    font-size: var(--text-base);
    color: var(--text);
    margin: 0;
    font-weight: 600
}

.minidlg__message {
    font-size: var(--text-md);
    color: var(--text-2);
    margin: 0;
    line-height: 1.5
}

.minidlg__message>*+* {
    margin-top: 6px
}

.minidlg__message ul,
.minidlg__message ol {
    margin: 0;
    padding-left: 18px
}

.minidlg__message li+li {
    margin-top: 2px
}

.minidlg__message p {
    margin: 0
}

.minidlg__message code {
    background: rgb(var(--text-rgb) / .06);
    font-family: var(--f-mono);
    border-radius: 3px;
    padding: 0 4px;
    font-size: .9em
}

.minidlg__hints {
    font-size: var(--text-xs);
    color: var(--text-3);
    margin: 0;
    padding-left: 18px;
    line-height: 1.5
}

.minidlg__hints li+li {
    margin-top: 2px
}

.minidlg__input {
    width: 100%
}

.minidlg__actions {
    justify-content: flex-end;
    gap: 8px;
    display: flex
}

.reportdlg__close {
    width: 28px;
    height: 28px;
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.reportdlg__close:hover {
    background: var(--bg-2);
    color: var(--text)
}

.reportdlg__body {
    flex-direction: column;
    gap: 14px;
    padding: 14px 18px 8px;
    display: flex
}

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

.reportdlg__label {
    font-family: var(--f-sans);
    font-size: var(--text-sm);
    color: var(--text-2);
    font-weight: 500
}

.reportdlg__reason {
    position: relative
}

.reportdlg__reason-trigger {
    cursor: pointer;
    text-align: left;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    display: flex
}

.reportdlg__reason-trigger>svg {
    color: var(--text-3);
    flex-shrink: 0;
    transform: rotate(90deg)
}

.reportdlg.is-open .reportdlg__reason-trigger>svg,
.reportdlg__reason.is-open .reportdlg__reason-trigger>svg {
    transform: rotate(-90deg)
}

.reportdlg__reason-pop {
    width: 100%
}

.reportdlg__hint {
    font-size: var(--text-2xs);
    color: var(--text-4);
    align-self: flex-end
}

.reportdlg__foot {
    border-top: 1px solid rgb(var(--text-rgb) / .06);
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px 16px;
    display: flex
}

@media (max-width:1180px) {
    .list-grid--cards {
        grid-template-columns: repeat(5, 1fr)
    }
}

@media (max-width:960px) {
    .list-grid--cards {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px 12px
    }
}

@media (max-width:720px) {
    .list-grid--cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px 10px
    }
}

@media (max-width:480px) {
    .list-grid--cards {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:720px) {
    .list-grid {
        gap: 18px 16px
    }

    .lrow {
        gap: 14px
    }

    .lrow__desc {
        -webkit-line-clamp: 3;
        font-size: var(--text-md)
    }
}

@media (max-width:480px) {
    .list-grid {
        gap: 14px
    }

    .lrow {
        gap: 12px
    }

    .lrow__desc {
        -webkit-line-clamp: 2
    }
}

@media (max-width:760px) {
    .gpage {
        gap: 24px
    }

    .gpage__title {
        font-size: 1.4rem
    }

    .gsec__title {
        font-size: var(--text-xl)
    }

    .genres-main {
        padding: 28px var(--gutter) 56px
    }
}

@media (max-width:520px) {
    .gitem {
        grid-template-columns: 90px 1fr 44px;
        gap: 10px;
        padding: 10px 12px
    }

    .gitem__label {
        font-size: var(--text-md)
    }
}

@media (max-width:600px) {
    .mpage__hero {
        padding-top: 16px
    }

    .mpage__sec-title {
        font-size: var(--text-xl)
    }

    .manga-main {
        padding: 0 var(--gutter) 48px
    }
}

@media (max-width:380px) {
    .uprofile__name {
        font-size: 1.4rem
    }
}

@media (max-width:540px) {
    .upage__target {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
    }

    .upage__target-poster {
        width: 100px
    }

    .upage__target-meta {
        flex-wrap: wrap;
        row-gap: 4px
    }

    .upage__form {
        padding: 18px
    }

    .upage__actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px
    }

    .upage__actions .ubtn {
        justify-content: center
    }

    .cpage-sec {
        padding: 16px
    }

    .cpage-sec__title {
        font-size: var(--text-md)
    }
}

@media (max-width:420px) {
    .topnav__inner {
        gap: 6px
    }

    .logo__tld {
        display: none
    }
}

@media (max-width:360px) {

    .topnav__inner,
    .topnav__right {
        gap: 2px
    }

    .icon-btn {
        width: var(--ctrl-sm);
        height: var(--ctrl-sm)
    }

    .icon-btn svg {
        width: 16px;
        height: 16px
    }

    .logo {
        font-size: var(--text-md)
    }
}

@media (max-width:540px) {
    .list-toolbar {
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 12px;
        padding: 6px 0 12px
    }
}

.ucp-main {
    max-width: var(--container);
    padding: 32px var(--gutter) 64px;
    margin: 0 auto
}

.ucp {
    flex-direction: column;
    gap: 22px;
    display: flex
}

.ucp__head {
    flex-direction: column;
    gap: 10px;
    display: flex
}

.ucp__crumbs {
    font-size: var(--text-2xs);
    letter-spacing: .14em;
    color: var(--text-3);
    text-transform: uppercase;
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.ucp__crumb {
    color: var(--text-3);
    text-decoration: none
}

.ucp__crumb:hover,
.ucp__crumb.is-current {
    color: var(--text)
}

.ucp__crumb-sep {
    color: var(--text-4)
}

.ucp__head-row {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    display: flex
}

.ucp__filters {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.ucp__head-tools {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    display: inline-flex
}

.ucp__head-tools .ubtn {
    flex-shrink: 0
}

.ucp__title {
    letter-spacing: -.01em;
    color: var(--text-emphasis);
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600
}

.ucp__sub {
    color: var(--text-3);
    font-size: var(--text-base);
    max-width: 640px;
    margin: 4px 0 0
}

.ucp__sub-link {
    color: var(--accent);
    text-decoration: none
}

.ucp__sub-link:hover {
    text-decoration: underline
}

.ucp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.ucp-card {
    background: var(--surface);
    border-radius: var(--radius-sm);
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 16px 18px;
    transition: background .12s;
    display: flex
}

.ucp-card:hover {
    background: var(--surface-2)
}

.ucp-card__head {
    align-items: center;
    gap: 10px;
    display: flex
}

.ucp-card__avatar {
    color: #ffffffeb;
    width: 36px;
    height: 36px;
    font-weight: 600;
    font-size: var(--text-md);
    border-radius: 50%;
    flex-shrink: 0;
    place-items: center;
    display: grid;
    overflow: hidden
}

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

.ucp-card__user {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.ucp-card__owner {
    color: var(--text-emphasis);
    font-weight: 500;
    font-size: var(--text-md);
    text-decoration: none
}

.ucp-card__owner:hover {
    color: var(--accent)
}

.ucp-card__meta {
    font-size: var(--text-sm);
    color: var(--text-3);
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    display: flex
}

.ucp-card__visi {
    align-items: center;
    gap: 4px;
    display: inline-flex
}

.ucp-card__visi svg {
    color: var(--text-4)
}

.ucp-card__stat {
    align-items: center;
    gap: 4px;
    display: inline-flex
}

.ucp-card__stat svg {
    color: var(--text-4)
}

.ucp-card__dot {
    background: var(--text-4);
    border-radius: 50%;
    width: 2px;
    height: 2px
}

.ucp-card__name {
    color: var(--text-emphasis);
    font-weight: 600;
    font-size: var(--text-xl);
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    text-decoration: none;
    display: block;
    overflow: hidden
}

.ucp-card__name:hover {
    color: var(--accent)
}

.ucp-card__desc {
    font-size: var(--text-sm);
    color: var(--text-2);
    -webkit-line-clamp: 2;
    min-height: calc(var(--text-sm) * 1.5 * 2);
    -webkit-box-orient: vertical;
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    overflow: hidden
}

.ucp-card__items {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.ucp-card__item a {
    aspect-ratio: 2/3;
    border-radius: 4px;
    transition: transform .12s;
    display: block;
    overflow: hidden
}

.ucp-card__item a:hover {
    transform: translateY(-2px)
}

.ucp-card__item .poster {
    box-shadow: none
}

.ucp-card__view-all {
    font-size: var(--text-sm);
    color: var(--accent);
    align-self: flex-start;
    font-weight: 500;
    text-decoration: none
}

.ucp-card__view-all:hover {
    color: var(--accent-2)
}

@media (max-width:720px) {
    .ucp-grid {
        grid-template-columns: 1fr
    }

    .ucp__head-row {
        flex-direction: column;
        align-items: stretch
    }
}

.gp-main {
    max-width: var(--container);
    padding: 28px var(--gutter) 64px;
    margin: 0 auto
}

.gp {
    flex-direction: column;
    gap: 22px;
    display: flex
}

.gp__crumbs {
    font-size: var(--text-2xs);
    letter-spacing: .14em;
    color: var(--text-3);
    text-transform: uppercase;
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.gp__crumb {
    color: var(--text-3);
    text-decoration: none
}

.gp__crumb:hover,
.gp__crumb.is-current {
    color: var(--text)
}

.gp__crumb-sep {
    color: var(--text-4)
}

.gp__head {
    align-items: flex-start;
    gap: 22px;
    display: flex
}

.gp__logo {
    border-radius: var(--radius);
    color: #ffffffeb;
    letter-spacing: .04em;
    flex-shrink: 0;
    place-items: center;
    width: 96px;
    height: 96px;
    font-size: 1.6rem;
    font-weight: 600;
    display: grid;
    overflow: hidden
}

.gp__logo img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.gp__id {
    flex-direction: column;
    flex: 1;
    gap: 6px;
    min-width: 0;
    display: flex
}

.gp__name {
    letter-spacing: -.01em;
    color: var(--text-emphasis);
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700
}

.gp__handle {
    color: var(--text-3);
    font-size: var(--text-md)
}

.gp__meta {
    font-size: var(--text-sm);
    color: var(--text-3);
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    display: flex
}

.gp__meta-item strong {
    color: var(--text-emphasis);
    margin-right: 3px;
    font-weight: 600
}

.gp__meta-sep {
    color: var(--text-4)
}

.gp__bio {
    color: var(--text-2);
    font-size: var(--text-base);
    max-width: 720px;
    margin: 8px 0 0;
    line-height: 1.55
}

.gp__links {
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: flex
}

.gp__link {
    font-size: var(--text-sm);
    color: var(--text-3);
    align-items: center;
    gap: 6px;
    text-decoration: none;
    display: inline-flex
}

.gp__link:hover {
    color: var(--accent)
}

.gp__link svg {
    color: var(--text-4);
    flex-shrink: 0
}

.gp__link:hover svg {
    color: var(--accent)
}

.gp__actions {
    gap: 8px;
    margin-top: 10px;
    display: flex
}

.gp-empty {
    text-align: center;
    color: var(--text-3);
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: 48px 16px
}

.gp-chaps {
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.gp-chap {
    background: var(--surface);
    border-radius: var(--radius-sm);
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    transition: background .12s;
    display: grid
}

.gp-chap:hover {
    background: var(--surface-2)
}

.gp-chap__poster {
    aspect-ratio: 2/3;
    border-radius: 3px;
    width: 40px;
    display: block;
    overflow: hidden
}

.gp-chap__poster .poster {
    box-shadow: none
}

.gp-chap__body {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.gp-chap__title {
    color: var(--text-emphasis);
    font-weight: 500;
    font-size: var(--text-base);
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    overflow: hidden
}

.gp-chap__title:hover {
    color: var(--accent)
}

.gp-chap__meta {
    font-size: var(--text-sm);
    color: var(--text-3);
    letter-spacing: .04em;
    align-items: center;
    gap: 8px;
    display: flex
}

.gp-chap__ch {
    color: var(--accent)
}

.gp-chap__sep {
    color: var(--text-4)
}

.gp-chap__votes {
    align-items: center;
    gap: 4px;
    display: inline-flex
}

.gp-chap__votes svg {
    color: var(--text-3);
    flex-shrink: 0
}

.gp-members {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.gp-member {
    background: var(--surface);
    border-radius: var(--radius-sm);
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    transition: background .12s;
    display: flex
}

.gp-member:hover {
    background: var(--surface-2)
}

.gp-member__avatar {
    color: #fff;
    width: 36px;
    height: 36px;
    font-weight: 700;
    font-size: var(--text-sm);
    border-radius: 999px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: inline-flex
}

.gp-member__handle {
    color: var(--text);
    font-family: var(--f-mono);
    font-size: var(--text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    text-decoration: none;
    overflow: hidden
}

.gp-member__handle:hover {
    color: var(--accent)
}

.gp-member__role {
    background: var(--surface-2);
    color: var(--text-2);
    font-family: var(--f-mono);
    font-size: var(--text-xs);
    letter-spacing: .04em;
    border-radius: 999px;
    flex-shrink: 0;
    margin-left: auto;
    padding: 2px 8px
}

.gp-member__role--admin {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent)
}

.gp-member__role--owner {
    background: var(--accent);
    color: #fff
}

.gp-member--admin {
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent)
}

.gp-member--owner {
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 5%, var(--surface))
}

@media (max-width:600px) {
    .gp__head {
        gap: 16px
    }

    .gp__logo {
        width: 72px;
        height: 72px;
        font-size: 1.2rem
    }

    .gp__name {
        font-size: 1.3rem
    }
}

.pp-main {
    max-width: var(--container);
    padding: 28px var(--gutter) 64px;
    margin: 0 auto
}

.pp {
    flex-direction: column;
    gap: 22px;
    display: flex
}

.pp__crumbs {
    font-size: var(--text-2xs);
    letter-spacing: .14em;
    color: var(--text-3);
    text-transform: uppercase;
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.pp__crumb {
    color: var(--text-3);
    text-decoration: none
}

.pp__crumb:hover,
.pp__crumb.is-current {
    color: var(--text)
}

.pp__crumb-sep {
    color: var(--text-4)
}

.pp__head {
    align-items: flex-start;
    gap: 22px;
    display: flex
}

.pp__avatar {
    color: #ffffffeb;
    border-radius: 50%;
    flex-shrink: 0;
    place-items: center;
    width: 96px;
    height: 96px;
    font-size: 2.4rem;
    font-weight: 600;
    display: grid;
    overflow: hidden
}

.pp__avatar img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.pp__id {
    flex-direction: column;
    flex: 1;
    gap: 6px;
    min-width: 0;
    display: flex
}

.pp__name {
    letter-spacing: -.01em;
    color: var(--text-emphasis);
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700
}

.pp__handle {
    color: var(--text-3);
    font-size: var(--text-md);
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.pp__handle-sep {
    color: var(--text-4)
}

.pp__bio {
    color: var(--text-2);
    font-size: var(--text-base);
    max-width: 720px;
    margin: 6px 0 0;
    line-height: 1.55
}

.pp__socials {
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    display: flex
}

.pp__social {
    font-size: var(--text-sm);
    color: var(--text-3);
    align-items: center;
    gap: 6px;
    text-decoration: none;
    display: inline-flex
}

.pp__social:hover {
    color: var(--accent)
}

.pp__social svg {
    color: var(--text-4);
    flex-shrink: 0
}

.pp__social:hover svg {
    color: var(--accent)
}

.pp__stats {
    font-size: var(--text-sm);
    color: var(--text-3);
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    display: flex
}

.pp__stat strong {
    color: var(--text-emphasis);
    margin-right: 3px;
    font-weight: 600
}

.pp__stat-sep {
    color: var(--text-4)
}

@media (max-width:720px) {

    .pp .ucp-grid,
    .pp .clist {
        row-gap: 5px
    }
}

.pp-empty {
    text-align: center;
    color: var(--text-3);
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: 48px 16px
}

@media (max-width:600px) {
    .pp__head {
        gap: 16px
    }

    .pp__avatar {
        width: 72px;
        height: 72px;
        font-size: 1.8rem
    }

    .pp__name {
        font-size: 1.3rem
    }
}

.cdp-main {
    max-width: var(--container);
    padding: 28px var(--gutter) 64px;
    margin: 0 auto
}

.cdp {
    flex-direction: column;
    gap: 22px;
    display: flex
}

.cdp__crumbs {
    font-size: var(--text-2xs);
    letter-spacing: .14em;
    color: var(--text-3);
    text-transform: uppercase;
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.cdp__crumb {
    color: var(--text-3);
    text-decoration: none
}

.cdp__crumb:hover,
.cdp__crumb.is-current {
    color: var(--text)
}

.cdp__crumb-sep {
    color: var(--text-4)
}

.cdp__head {
    flex-direction: column;
    gap: 10px;
    display: flex
}

.cdp__owner {
    align-items: flex-start;
    gap: 10px;
    display: flex
}

.cdp__avatar {
    color: #ffffffeb;
    width: 40px;
    height: 40px;
    font-weight: 600;
    font-size: var(--text-md);
    border-radius: 50%;
    flex-shrink: 0;
    place-items: center;
    text-decoration: none;
    display: grid;
    overflow: hidden
}

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

.cdp__owner-info {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex
}

.cdp__owner-name {
    color: var(--text-emphasis);
    font-weight: 500;
    font-size: var(--text-md);
    text-decoration: none
}

.cdp__owner-name:hover {
    color: var(--accent)
}

.cdp__title {
    letter-spacing: -.02em;
    color: var(--text-emphasis);
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15
}

.cdp__desc {
    color: var(--text-2);
    font-size: var(--text-base);
    max-width: 720px;
    margin: 0;
    line-height: 1.55
}

.cdp__meta {
    font-size: var(--text-sm);
    color: var(--text-3);
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    display: flex
}

.cdp__meta-item {
    align-items: center;
    gap: 4px;
    display: inline-flex
}

.cdp__meta-item svg,
.cdp__meta-sep {
    color: var(--text-4)
}

.cdp__actions {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    display: flex
}

.cdp-vote {
    height: var(--ctrl-md);
    background: var(--surface);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font: inherit;
    font-size: var(--text-md);
    cursor: pointer;
    border: 0;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    transition: background .12s, color .12s;
    display: inline-flex
}

.cdp-vote:hover {
    color: var(--text);
    background: var(--surface-2)
}

.cdp-vote.is-on {
    color: var(--accent);
    background: rgb(var(--accent-rgb) / .14)
}

.cdp-vote.cdp-vote--down.is-on {
    color: var(--danger);
    background: rgb(var(--danger-rgb) / .14)
}

.cdp-empty {
    text-align: center;
    color: var(--text-3);
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: 48px 16px
}

@media (max-width:540px) {
    .cdp__title {
        font-size: 1.4rem
    }
}

.hcoll-section__more {
    font-size: var(--text-sm);
    margin: 0 0 6px;
    display: inline-block
}

.hcoll-card .card__poster-wrap {
    position: relative
}

.hcoll-card__owner {
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    font-size: var(--text-2xs);
    letter-spacing: .04em;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: #0000008c;
    border-radius: 999px;
    max-width: calc(100% - 16px);
    padding: 3px 8px;
    position: absolute;
    top: 8px;
    left: 8px;
    overflow: hidden
}

.ucoll-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.ucoll {
    background: var(--surface);
    border-radius: var(--radius-sm);
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    transition: background .12s;
    display: flex
}

.ucoll:hover {
    background: var(--surface-2)
}

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

.ucoll__stats {
    font-size: var(--text-sm);
    color: var(--text-3);
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    display: flex
}

.ucoll__stat {
    align-items: center;
    gap: 4px;
    display: inline-flex
}

.ucoll__visi svg {
    color: var(--text-4)
}

.ucoll__dot {
    background: var(--text-4);
    border-radius: 50%;
    width: 2px;
    height: 2px
}

.ucoll__actions {
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    display: flex
}

.ucoll__name {
    min-width: 0;
    color: var(--text-emphasis);
    font-weight: 600;
    font-size: var(--text-lg);
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    text-decoration: none;
    overflow: hidden
}

.ucoll__name:hover {
    color: var(--accent)
}

.ucoll__desc {
    font-size: var(--text-sm);
    color: var(--text-2);
    height: calc(var(--text-sm) * 1.5 * 2);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    overflow: hidden
}

.ucoll__items {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.ucoll__item a {
    aspect-ratio: 2/3;
    border-radius: 4px;
    transition: transform .12s;
    display: block;
    overflow: hidden
}

.ucoll__item .poster {
    box-shadow: none
}

.ucoll__item a:hover {
    transform: translateY(-2px)
}

.ucoll__items-empty {
    font-size: var(--text-sm);
    color: var(--text-4);
    padding: 8px 0 4px
}

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

.ucoll-empty {
    background: var(--surface);
    border-radius: var(--radius-sm);
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 16px;
    display: flex
}

.ucoll-empty__icon {
    background: rgb(var(--accent-rgb) / .12);
    width: 56px;
    height: 56px;
    color: var(--accent);
    border-radius: 50%;
    place-items: center;
    display: grid
}

.ucoll-empty__title {
    font-size: var(--text-lg);
    color: var(--text-emphasis);
    font-weight: 600
}

.ucoll-empty__sub {
    color: var(--text-3);
    max-width: 340px;
    margin: 0 0 6px
}

.ucoll-dlg {
    z-index: 100;
    -webkit-backdrop-filter: blur(6px);
    background: #000000a6;
    place-items: start center;
    padding: 80px 24px 24px;
    display: grid;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto
}

.ucoll-dlg__panel {
    background: var(--surface);
    border-radius: var(--radius-lg);
    flex-direction: column;
    width: 100%;
    max-width: 460px;
    animation: .2s cubic-bezier(.2, .9, .3, 1.15) both dialog-pop;
    display: flex;
    box-shadow: 0 40px 80px -20px #0009, 0 4px 12px #0000004d
}

:root[data-theme=light] .ucoll-dlg__panel {
    box-shadow: 0 40px 80px -20px #0003, 0 4px 12px #00000014
}

.ucoll-dlg__head {
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 14px;
    display: flex
}

.ucoll-dlg__title {
    font-size: var(--text-xl);
    color: var(--text-emphasis);
    margin: 0;
    font-weight: 600
}

.ucoll-dlg__close {
    width: 28px;
    height: 28px;
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.ucoll-dlg__close:hover {
    background: var(--bg-2);
    color: var(--text)
}

.ucoll-dlg__body {
    flex-direction: column;
    gap: 14px;
    padding: 14px 20px 6px;
    display: flex
}

.ucoll-dlg__field {
    border: 0;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    display: flex
}

.ucoll-dlg__label {
    font-size: var(--text-sm);
    color: var(--text-2);
    font-weight: 500
}

.ucoll-dlg__visi-row {
    align-items: center;
    gap: 18px;
    display: flex
}

.ucoll-dlg__radio {
    cursor: pointer;
    color: var(--text-2);
    font-size: var(--text-md);
    align-items: center;
    gap: 6px;
    display: inline-flex
}

.ucoll-dlg__radio input {
    accent-color: var(--accent)
}

.ucoll-dlg__check {
    cursor: pointer;
    align-items: flex-start;
    gap: 10px;
    display: flex
}

.ucoll-dlg__check input {
    accent-color: var(--accent);
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px
}

.ucoll-dlg__check-body {
    flex-direction: column;
    gap: 2px;
    display: flex
}

.ucoll-dlg__check-title {
    font-size: var(--text-md);
    color: var(--text);
    font-weight: 500
}

.ucoll-dlg__check-hint {
    font-size: var(--text-sm);
    color: var(--text-3);
    line-height: 1.4
}

.ucoll-dlg__foot {
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 16px;
    display: flex
}

.ucoll-dlg__count {
    color: var(--text-4);
    font-size: var(--text-xs);
    margin-left: 6px
}

.ucoll-dlg__search {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    height: var(--ctrl-md);
    border: 0;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    transition: background .12s, box-shadow .12s;
    display: flex;
    position: relative
}

.ucoll-dlg__search:focus-within {
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .22)
}

.ucoll-dlg__search>svg {
    color: var(--text-3);
    flex-shrink: 0
}

.ucoll-dlg__search input {
    height: 100%;
    color: var(--text);
    font: inherit;
    background: 0 0;
    border: 0;
    outline: 0;
    flex: 1
}

.ucoll-dlg__search-clear {
    width: 22px;
    height: 22px;
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.ucoll-dlg__search-clear:hover {
    color: var(--text);
    background: var(--bg-2)
}

.ucoll-dlg__suggest {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 0;
    flex-direction: column;
    gap: 2px;
    max-height: 240px;
    margin: 0;
    padding: 4px;
    list-style: none;
    display: flex;
    overflow-y: auto
}

.ucoll-dlg__suggest-item {
    cursor: pointer;
    text-align: left;
    width: 100%;
    color: inherit;
    font: inherit;
    background: 0 0;
    border: 0;
    border-radius: 4px;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    display: flex
}

.ucoll-dlg__suggest-item:hover {
    background: var(--bg-2)
}

.ucoll-dlg__suggest-thumb {
    aspect-ratio: 2/3;
    border-radius: 3px;
    flex-shrink: 0;
    width: 32px;
    display: block;
    overflow: hidden
}

.ucoll-dlg__suggest-thumb .poster {
    box-shadow: none
}

.ucoll-dlg__suggest-body {
    flex-direction: column;
    flex: 1;
    gap: 2px;
    min-width: 0;
    display: flex
}

.ucoll-dlg__suggest-title {
    color: var(--text);
    font-size: var(--text-md);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    overflow: hidden
}

.ucoll-dlg__suggest-sub {
    color: var(--text-3);
    font-size: var(--text-2xs);
    letter-spacing: .04em
}

.ucoll-dlg__suggest-add {
    width: 24px;
    height: 24px;
    color: var(--text-3);
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.ucoll-dlg__suggest-item:hover .ucoll-dlg__suggest-add {
    color: var(--accent)
}

.ucoll-dlg__items {
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    overflow-y: auto
}

.ucoll-dlg__item {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    transition: opacity .12s, background .12s;
    display: flex
}

.ucoll-dlg__item.is-dragging {
    opacity: .4
}

.ucoll-dlg__hint {
    font-size: var(--text-xs);
    color: var(--text-3);
    margin: 6px 2px 4px
}

.ucoll-dlg__item-grip {
    width: 18px;
    height: 26px;
    color: var(--text-3);
    cursor: grab;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.ucoll-dlg__item-grip:active {
    cursor: grabbing
}

.ucoll-dlg__item:hover .ucoll-dlg__item-grip {
    color: var(--text-2)
}

.ucoll-dlg__item-thumb {
    aspect-ratio: 2/3;
    border-radius: 3px;
    flex-shrink: 0;
    width: 32px;
    display: block;
    overflow: hidden
}

.ucoll-dlg__item-thumb .poster {
    box-shadow: none
}

.ucoll-dlg__item-body {
    flex-direction: column;
    flex: 1;
    gap: 2px;
    min-width: 0;
    display: flex
}

.ucoll-dlg__item-title {
    color: var(--text);
    font-size: var(--text-md);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    overflow: hidden
}

.ucoll-dlg__item-sub {
    color: var(--text-3);
    font-size: var(--text-2xs);
    letter-spacing: .04em
}

.ucoll-dlg__item-remove {
    width: 26px;
    height: 26px;
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 4px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.ucoll-dlg__item-remove:hover {
    color: var(--danger);
    background: var(--bg-2)
}

.ucoll-dlg__empty {
    font-size: var(--text-sm);
    color: var(--text-3);
    padding: 8px 4px
}

.error-main {
    max-width: var(--container);
    padding: 0 var(--gutter) 64px;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    margin: 0 auto;
    display: flex
}

.errpage {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    max-width: 520px;
    min-height: 60vh;
    margin-inline-start: auto;
    margin-inline-end: auto;
    padding: 40px 16px;
    display: flex
}

.errpage__code {
    letter-spacing: -.04em;
    color: var(--accent);
    text-shadow: 0 4px 24px rgb(var(--accent-rgb) / .2);
    font-size: clamp(72px, 16vw, 144px);
    font-weight: 700;
    line-height: 1
}

.errpage__title {
    font-size: var(--text-2xl);
    color: var(--text-emphasis);
    letter-spacing: -.01em;
    margin: 0;
    font-weight: 600
}

.errpage__msg {
    color: var(--text-2);
    font-size: var(--text-base);
    margin: 0;
    line-height: 1.55
}

.errpage__actions {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    display: flex
}

.errpage__hints {
    font-size: var(--text-sm);
    color: var(--text-3);
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    display: flex
}

.errpage__hint {
    color: var(--text-2);
    text-decoration: none
}

.errpage__hint:hover {
    color: var(--accent);
    text-decoration: underline
}

.errpage__hint-sep {
    color: var(--text-4)
}

.errpage__debug {
    text-align: left;
    border: 1px solid rgb(var(--text-rgb) / .08);
    border-radius: var(--radius);
    background: rgb(var(--text-rgb) / .03);
    width: 100%;
    max-width: 900px;
    margin-top: 32px;
    overflow: hidden
}

.errpage__debug-summary {
    cursor: pointer;
    font-size: var(--text-xs);
    color: var(--text-3);
    letter-spacing: .06em;
    text-transform: uppercase;
    -webkit-user-select: none;
    user-select: none;
    padding: 10px 14px
}

.errpage__debug-summary:hover {
    color: var(--text)
}

.errpage__debug-body {
    border-top: 1px solid rgb(var(--text-rgb) / .06);
    padding: 12px 14px 14px
}

.errpage__debug-loc {
    font-size: var(--text-xs);
    color: var(--text-2);
    margin: 0 0 10px
}

.errpage__debug-trace {
    font-size: var(--text-2xs);
    color: var(--text-3);
    background: rgb(var(--text-rgb) / .04);
    white-space: pre;
    border-radius: 6px;
    max-height: 360px;
    margin: 0;
    padding: 10px;
    overflow: auto
}

@media (max-width:540px) {
    .errpage {
        gap: 10px;
        padding: 24px 12px
    }
}

.rpage-body {
    overflow: hidden
}

.rpage {
    --rpage-zoom: 100%;
    --rpage-header-h: 52px;
    --rpage-bar-h: 56px;
    --rpage-cm-side-w: 0px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    right: var(--rpage-cm-side-w);
    background: var(--reader-bg);
    color: var(--text);
    transition: right .25s;
    position: fixed;
    overflow: hidden
}

@media (min-width:1024px) {
    .rpage--cm-side-open {
        --rpage-cm-side-w: 500px
    }

    .rpage--cm-side-open .rpage-cmpanel {
        box-shadow: none
    }

    .rpage--cm-side-open .rpage-cmpanel__backdrop {
        display: none
    }
}

.rpage--chrome-hidden .rpage-main {
    padding-top: 0
}

.rpage-header {
    top: 0;
    left: 0;
    right: calc(var(--rpage-cm-side-w, 0px) + var(--rpage-scrollbar-w, 0px));
    height: var(--rpage-header-h);
    background: var(--surface);
    z-index: 30;
    will-change: transform;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 0;
    padding: 0 14px;
    transition: transform .25s, right .25s;
    display: flex;
    position: fixed;
    overflow: hidden
}

.rpage--chrome-hidden .rpage-header {
    transform: translateY(-100%)
}

.rpage-header__hover-trigger {
    top: 0;
    left: 0;
    right: calc(var(--rpage-cm-side-w, 0px) + var(--rpage-scrollbar-w, 0px));
    height: var(--rpage-header-h);
    z-index: 29;
    pointer-events: none;
    position: fixed
}

@media (hover:hover) {
    .rpage--chrome-hidden .rpage-header__hover-trigger {
        pointer-events: auto
    }

    .rpage--chrome-hidden .rpage-header:hover {
        transform: translateY(0);
        box-shadow: 0 6px 24px -10px #00000080
    }

    .rpage--chrome-hidden:has(.rpage-header__hover-trigger:hover) .rpage-header {
        transform: translateY(0);
        box-shadow: 0 6px 24px -10px #00000080
    }
}

.rpage-header__left {
    flex: 0 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    display: inline-flex
}

.rpage-header__home {
    flex: none;
    text-decoration: none
}

.rpage-header__back {
    color: var(--text-2);
    flex: 0 auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    text-decoration: none;
    display: inline-flex
}

.rpage-header__back:hover {
    color: var(--accent)
}

.rpage-header__title {
    font-weight: 500;
    font-size: var(--text-base);
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: clamp(140px, 40vw, 480px);
    overflow: hidden
}

.rpage-header__meta {
    font-size: var(--text-base);
    color: var(--text-2);
    white-space: nowrap;
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.rpage-header__right {
    align-items: center;
    gap: 12px;
    display: inline-flex
}

.rpage-header__actions {
    align-items: center;
    gap: 6px;
    display: flex
}

.rpage-iconbtn {
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    background: 0 0;
    border: 1px solid #0000;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    transition: background .12s, color .12s, border-color .12s;
    display: inline-flex
}

.rpage-iconbtn:hover {
    background: var(--surface-2);
    color: var(--text)
}

.rpage-iconbtn.is-on {
    color: var(--accent);
    background: rgb(var(--accent-rgb) / .1)
}

.rpage-iconbtn--small {
    padding: 5px 6px
}

.rpage-main {
    padding-top: var(--rpage-header-h);
    background: var(--bg);
    flex-direction: column;
    transition: padding-top .25s;
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden
}

.rpage-main--long-strip {
    padding-bottom: calc(var(--rpage-bar-h) + 16px);
    scroll-padding-bottom: calc(var(--rpage-bar-h) + 16px);
    align-items: center;
    overflow: auto
}

.rpage--chrome-hidden .rpage-main--long-strip {
    padding-bottom: 0
}

@media (max-width:1023px) {
    .rpage-body.rpage-body {
        overflow: visible
    }

    .rpage--long-strip {
        display: block;
        position: static
    }

    .rpage--long-strip .rpage-bottombar,
    .rpage--long-strip .rpage-progress {
        position: fixed
    }

    .rpage--long-strip .rpage-main--long-strip {
        position: static;
        overflow: visible
    }
}

.rpage-main__inner {
    gap: var(--rpage-strip-gap, .4rem);
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex
}

.rpage-main--long-strip .rpage-page {
    width: 100%;
    max-width: min(var(--rpage-page-w, 100%), var(--rpage-max-w, 100%))
}

.rpage-main--long-strip .rpage-page__img {
    width: auto;
    max-width: 100%;
    margin: 0 auto
}

.rpage--stretch .rpage-main--long-strip .rpage-page {
    max-width: var(--rpage-max-w, 100%)
}

.rpage--stretch .rpage-main--long-strip .rpage-page__img {
    width: 100%
}

.rpage-swiper {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0
}

.rpage-swiper .swiper-wrapper {
    height: 100%
}

.rpage-slide {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex
}

.rpage-view {
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: flex
}

.rpage-view--pages {
    max-width: var(--rpage-max-w, 100%);
    gap: 0;
    margin-inline-start: auto;
    margin-inline-end: auto
}

.rpage-view--pages .rpage-page {
    flex: 0 auto;
    width: auto;
    max-width: 100%;
    height: 100%
}

.rpage-zoom-container {
    flex: 0 auto;
    justify-content: center;
    align-items: center;
    height: 100%;
    display: flex
}

.rpage-view--solo .rpage-zoom-container {
    max-width: 100%
}

.rpage-view--spread .rpage-zoom-container {
    flex: 50%;
    max-width: 50%
}

.rpage-view--spread .rpage-zoom-container:first-child {
    justify-content: flex-end
}

.rpage-view--spread .rpage-zoom-container:last-child,
.rpage--rtl .rpage-view--spread .rpage-zoom-container:first-child {
    justify-content: flex-start
}

.rpage--rtl .rpage-view--spread .rpage-zoom-container:last-child {
    justify-content: flex-end
}

.rpage-zoom-container .rpage-page {
    max-width: 100%;
    height: 100%
}

.rpage--rtl .rpage-view--spread {
    flex-direction: row-reverse
}

.rpage-strip-comments {
    width: 100%;
    margin: 32px auto 0;
    padding: 0 16px
}

.rpage-chap-ending {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    display: flex
}

.rpage-chap-ending .cm-widget {
    width: 100%;
    padding-bottom: 2rem
}

.rpage-chap-ending__head {
    background: var(--surface);
    border-radius: var(--radius-md);
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    display: flex
}

.rpage-chap-ending__home {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    width: 40px;
    height: 40px;
    color: var(--text-2);
    flex-shrink: 0;
    place-items: center;
    text-decoration: none;
    transition: background .15s, color .15s;
    display: inline-grid
}

.rpage-chap-ending__home:hover {
    background: var(--surface-3);
    color: var(--accent)
}

.rpage-chap-ending__info {
    flex-direction: column;
    flex: 1;
    gap: 2px;
    min-width: 0;
    display: flex
}

.rpage-chap-ending__title {
    font-size: var(--text-md);
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    text-decoration: none;
    overflow: hidden
}

.rpage-chap-ending__title:hover {
    color: var(--accent)
}

.rpage-chap-ending__meta {
    font-size: var(--text-xs);
    color: var(--text-3);
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    display: flex
}

.rpage-chap-ending__meta strong {
    color: var(--text);
    font-weight: 500
}

.rpage-chap-ending__sep {
    color: var(--text-4)
}

.rpage-chap-ending__like {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    height: 40px;
    color: var(--text-2);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    border: 0;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    font-weight: 500;
    transition: background .15s, color .15s;
    display: inline-flex
}

.rpage-chap-ending__like:hover:not(:disabled) {
    background: var(--surface-3);
    color: var(--text)
}

.rpage-chap-ending__like:disabled {
    opacity: .6;
    cursor: not-allowed
}

.rpage-chap-ending__like.is-on {
    color: var(--accent);
    background: rgb(var(--accent-rgb) / .14)
}

.rpage-chap-ending__like-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600
}

.rpage-chap-ending__nav {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    display: grid
}

.rpage-chap-ending__nav-btn {
    background: var(--surface);
    border-radius: var(--radius-md);
    height: 44px;
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    border: 0;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    font-weight: 500;
    transition: background .15s, color .15s;
    display: inline-flex
}

.rpage-chap-ending__nav-btn:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--accent)
}

.rpage-chap-ending__nav-btn:disabled {
    opacity: .4;
    cursor: not-allowed
}

@media (max-width:540px) {
    .rpage-chap-ending__like {
        padding: 0 10px
    }

    .rpage-chap-ending__like-count {
        display: none
    }
}

.like {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    width: 100%;
    display: flex
}

.like__left {
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    display: inline-flex
}

.like__right {
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.like__btn {
    background: var(--surface-2);
    height: 38px;
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    font-weight: 500;
    transition: background .15s, color .15s;
    display: inline-flex
}

.like__btn:hover {
    background: rgb(var(--text-rgb) / .07)
}

.like__btn.is-on {
    color: var(--accent);
    background: rgb(var(--accent-rgb) / .14)
}

.like__count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: var(--text-base)
}

.like__attr {
    color: var(--text-3);
    font-size: var(--text-sm)
}

.like__attr strong {
    color: var(--text);
    font-weight: 500
}

.like__nav {
    background: var(--surface-2);
    height: 38px;
    color: var(--text-2);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    font-weight: 500;
    transition: background .15s, color .15s;
    display: inline-flex
}

.like__nav:hover:not(:disabled) {
    background: rgb(var(--text-rgb) / .07);
    color: var(--text)
}

.like__nav:disabled {
    opacity: .4;
    cursor: not-allowed
}

@media (max-width:720px) {
    .like {
        flex-direction: column;
        align-items: stretch
    }

    .like__left {
        justify-content: center;
        width: 100%
    }

    .like__right {
        justify-content: space-between;
        width: 100%
    }

    .like__nav {
        flex: none
    }
}

.rpage-chaplike {
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    border: 0;
    border-radius: 16px;
    align-items: center;
    gap: 16px;
    padding: 14px 22px 14px 16px;
    transition: background .2s, border-color .2s, box-shadow .2s, transform .14s;
    display: inline-flex
}

.rpage-chaplike:hover {
    background: var(--surface);
    border-color: rgb(var(--text-rgb) / .18);
    transform: translateY(-1px);
    box-shadow: 0 10px 28px -16px #00000073
}

.rpage-chaplike:active {
    transform: translateY(0)scale(.98)
}

.rpage-chaplike__icon {
    background: rgb(var(--text-rgb) / .06);
    width: 44px;
    height: 44px;
    color: var(--text-2);
    border-radius: 50%;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition: background .25s, color .25s, transform .25s;
    display: inline-flex
}

.rpage-chaplike__body {
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
    display: flex
}

.rpage-chaplike__count {
    font-size: var(--text-xl);
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    color: var(--text-emphasis);
    font-weight: 700
}

.rpage-chaplike__caption {
    font-size: var(--text-xs);
    letter-spacing: .02em;
    color: var(--text-3)
}

.rpage-chaplike.is-on {
    border-color: rgb(var(--accent-rgb) / .4);
    background: linear-gradient(135deg, rgb(var(--accent-rgb) / .16) 0%, rgb(var(--accent-rgb) / .05) 100%);
    box-shadow: 0 14px 40px -18px rgb(var(--accent-rgb) / .55)
}

.rpage-chaplike.is-on .rpage-chaplike__icon {
    background: var(--accent);
    color: var(--accent-ink);
    transform: scale(1.06)rotate(-4deg)
}

.rpage-chaplike.is-on .rpage-chaplike__count {
    color: var(--accent)
}

.rpage-chaplike.is-on .rpage-chaplike__caption {
    color: var(--accent);
    font-weight: 500
}

.rpage-view--comments {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 24px 16px 32px;
    overflow-y: auto
}

.rpage-page {
    flex: none;
    display: block;
    position: relative
}

.rpage-page__img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block
}

.rpage-page__svg {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex
}

.rpage-page__counter {
    color: var(--text-3);
    font-size: var(--text-sm)
}

.rpage-page--empty {
    background: rgb(var(--text-rgb) / .04)
}

.rpage-page.is-errored {
    background-color: rgb(var(--text-rgb) / .06)
}

.rpage-page:has(.rpage-page__loader) {
    background-color: rgb(var(--text-rgb) / .06)
}

.rpage-page__loader {
    pointer-events: none;
    z-index: 2;
    justify-content: center;
    align-items: flex-start;
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.rpage-page__loader-inner {
    background: rgb(var(--text-rgb) / .08);
    border-radius: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    display: flex;
    position: sticky;
    top: 50vh;
    transform: translateY(-50%)
}

.rpage-page__spinner {
    border: 3px solid rgb(var(--text-rgb) / .32);
    border-top-color: var(--accent);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    animation: .8s linear infinite rpage-page-spin
}

@keyframes rpage-page-spin {
    to {
        transform: rotate(360deg)
    }
}

.rpage-page.is-errored .rpage-page__spinner {
    border-color: rgb(var(--danger-rgb, 239 68 68) / .4);
    border-top-color: var(--danger, #ef4444);
    animation: none
}

.rpage-main--long-strip .rpage-page,
.rpage-main--long-strip .rpage-page__img,
.rpage-main--long-strip .rpage-page__svg {
    height: auto
}

.rpage--greyscale .rpage-page {
    filter: grayscale()
}

.rpage--dim .rpage-page {
    filter: brightness(var(--rpage-dim, .7))
}

.rpage--greyscale.rpage--dim .rpage-page {
    filter: grayscale(1) brightness(var(--rpage-dim, .7))
}

.rpage-nav {
    color: #fff;
    cursor: pointer;
    opacity: 0;
    background: #0006;
    border: 0;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 64px;
    transition: opacity .15s;
    display: inline-flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.rpage-main:hover .rpage-nav {
    opacity: .85
}

.rpage-nav:hover {
    opacity: 1
}

.rpage-nav:disabled {
    cursor: not-allowed;
    opacity: .2 !important
}

.rpage-nav--left {
    left: 12px
}

.rpage-nav--right {
    right: 12px
}

.rpage-bottombar {
    pointer-events: none;
    z-index: 30;
    will-change: transform;
    background: 0 0;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    transition: transform .25s;
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.rpage--chrome-hidden .rpage-bottombar {
    transform: translateY(calc(100% + 10px))
}

.rpage-bottombar__controls {
    pointer-events: auto;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    display: inline-flex
}

.rpage-bottombar__actions {
    align-items: center;
    gap: 6px;
    display: inline-flex
}

.rpage-bottombar__settings {
    background: var(--surface-2);
    border: 0;
    flex-shrink: 0;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0
}

.rpage-bottombar__settings:hover {
    background: var(--surface-3);
    color: var(--text)
}

.rpage-bottombar__settings.is-on,
.rpage-bottombar__settings.is-on:hover {
    color: var(--accent-contrast, #fff);
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 6px 16px -8px rgb(var(--accent-rgb) / .55)
}

.rpage-chapnav {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 0;
    justify-self: center;
    align-items: stretch;
    min-width: 0;
    max-width: 100%;
    height: 36px;
    display: inline-flex
}

.rpage-chapnav__btn {
    width: 34px;
    color: var(--text-2);
    cursor: pointer;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: 0 0;
    border: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition: background .12s, color .12s;
    display: inline-flex
}

.rpage-chapnav__btn--next {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0
}

.rpage-chapnav__btn:hover:not(:disabled) {
    background: var(--surface-3);
    color: var(--text)
}

.rpage-chapnav__btn:disabled {
    color: var(--text-4);
    cursor: not-allowed;
    background: 0 0
}

.rpage-chapnav__center {
    height: 100%;
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0 14px;
    font-weight: 500;
    transition: background .12s, color .12s;
    display: inline-flex
}

.rpage-chapnav__center:hover {
    background: var(--surface-3)
}

.rpage-chapnav__center.is-on,
.rpage-chapnav__center.is-on:hover {
    color: var(--accent-contrast, #fff);
    background: var(--accent);
    border-left-color: var(--accent);
    border-right-color: var(--accent)
}

.rpage-chapnav__current {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: clamp(120px, 30vw, 260px);
    overflow: hidden
}

.rpage-cmpanel {
    background: var(--bg);
    border: 0;
    border-left: 1px solid rgb(var(--text-rgb) / .1);
    z-index: 60;
    flex-direction: column;
    width: 500px;
    max-width: 100vw;
    transition: transform .25s;
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    transform: translate(100%)
}

.rpage-cmpanel.is-open {
    transform: translate(0);
    box-shadow: -20px 0 50px -16px #0000008c, -2px 0 6px #00000040
}

:root[data-theme=light] .rpage-cmpanel.is-open {
    box-shadow: -20px 0 50px -16px #0003, -2px 0 6px #00000014
}

.rpage-cmpanel__head {
    border-bottom: 1px solid rgb(var(--text-rgb) / .06);
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 18px;
    display: flex
}

.rpage-cmpanel__title {
    font-size: var(--text-base);
    color: var(--text);
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    margin: 0;
    font-weight: 600;
    overflow: hidden
}

.rpage-cmpanel__chapnav {
    background: var(--surface);
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    display: flex
}

.rpage-cmpanel__chapnav .rpage-dd {
    flex: 1;
    min-width: 0
}

.rpage-cmpanel__chapnav .rpage-dd__trigger {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    width: 100%;
    height: 32px;
    font-size: var(--text-sm);
    border: 0;
    justify-content: space-between;
    padding: 0 10px
}

.rpage-cmpanel__chapnav .rpage-dd__trigger:hover {
    background: rgb(var(--accent-rgb) / .1)
}

.rpage-cmpanel__chapnav .rpage-dd.is-open .rpage-dd__trigger {
    background: rgb(var(--accent-rgb) / .14);
    color: var(--accent)
}

.rpage-cmpanel__chapnav .rpage-dd__value {
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    flex: 1;
    min-width: 0;
    max-width: none;
    overflow: hidden
}

.rpage-cmpanel__chapnav .rpage-dd__pop {
    min-width: max(100%, 220px);
    max-height: 320px;
    top: calc(100% + 4px);
    bottom: auto
}

.rpage-cmpanel__chapnav .rpage-chapnav__btn {
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    width: 32px;
    height: 32px
}

.rpage-cmpanel__close {
    -webkit-appearance: none;
    appearance: none;
    color: var(--text-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: 0 0;
    border: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    margin-left: 4px;
    transition: background .15s, color .15s;
    display: inline-flex
}

.rpage-cmpanel__close:hover {
    background: var(--surface-2);
    color: var(--text)
}

.rpage-cmpanel__like-row {
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    display: flex
}

.rpage-cmpanel__like {
    -webkit-appearance: none;
    appearance: none;
    background: var(--surface-2);
    color: var(--text-2);
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    transition: background .15s, color .15s, transform .1s;
    display: inline-flex
}

.rpage-cmpanel__like:hover {
    background: rgb(var(--accent-rgb) / .12);
    color: var(--accent)
}

.rpage-cmpanel__like:active {
    transform: scale(.97)
}

.rpage-cmpanel__like.is-on {
    background: rgb(var(--accent-rgb) / .16);
    color: var(--accent)
}

.rpage-cmpanel__like:disabled {
    opacity: .6;
    cursor: default
}

.rpage-cmpanel__like-attribution {
    font-size: var(--text-xs);
    color: var(--text-3);
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    overflow: hidden
}

.rpage-cmpanel__like-attribution strong {
    color: var(--text);
    font-weight: 600
}

.rpage-cmpanel__follow {
    flex-shrink: 0;
    margin-left: auto
}

.rpage-cmpanel__follow .fdrop {
    position: relative
}

.rpage-cmpanel__follow .btn {
    height: var(--ctrl-md);
    font-size: var(--text-sm);
    padding: 0 14px
}

.rpage-cmpanel__body {
    flex: 1;
    min-height: 0;
    padding: 10px 18px 18px;
    overflow-y: auto
}

.rpage-cmpanel__body .cm-widget__title {
    font-size: var(--text-lg)
}

.rpage-cmpanel__backdrop {
    z-index: 55
}

@media (max-width:720px) {
    .rpage-cmpanel {
        width: 100vw
    }

    .rpage-cmpanel__head,
    .rpage-cmpanel__sort,
    .rpage-cmpanel__editor,
    .rpage-cmpanel__list {
        padding-left: 12px;
        padding-right: 12px
    }

    .rpage-cmpanel__sort {
        margin-left: 12px;
        margin-right: 12px
    }
}

.rpage-chappanel {
    z-index: 50;
    pointer-events: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0
}

.rpage-chappanel__panel {
    background: var(--surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    pointer-events: auto;
    flex-direction: column;
    width: 100%;
    max-width: 380px;
    max-height: min(72vh, 540px);
    margin: 0 auto;
    transition: transform .25s;
    display: flex;
    position: relative;
    transform: translateY(110%);
    box-shadow: 0 -20px 50px -16px #0000008c, 0 -2px 6px #00000040
}

:root[data-theme=light] .rpage-chappanel__panel {
    box-shadow: 0 -20px 50px -16px #0003, 0 -2px 6px #00000014
}

.rpage-chappanel.is-open .rpage-chappanel__panel {
    transform: translateY(0)
}

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

.rpage-chappanel__title {
    font-size: var(--text-md);
    color: var(--text);
    letter-spacing: -.005em;
    margin: 0;
    font-weight: 600
}

.rpage-chappanel__group,
.rpage-chappanel__filter {
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    display: grid
}

.rpage-chappanel__group {
    padding-top: 0
}

.rpage-chappanel__filter {
    padding-bottom: 8px
}

.rpage-chappanel__group-label,
.rpage-chappanel__filter-label {
    font-size: var(--text-2xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3)
}

.rpage-chappanel .rpage-dd {
    width: 100%
}

.rpage-chappanel .rpage-dd__trigger {
    width: 100%;
    height: var(--ctrl-md);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    justify-content: space-between
}

.rpage-chappanel .rpage-dd__pop {
    min-width: 100%;
    max-height: 250px;
    top: calc(100% + 6px);
    bottom: auto;
    left: 0;
    right: auto
}

.rpage-chappanel__search {
    height: var(--ctrl-md);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 0;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    transition: background .12s, box-shadow .12s;
    display: flex
}

.rpage-chappanel__search:focus-within {
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .22)
}

.rpage-chappanel__search svg {
    color: var(--text-3);
    flex-shrink: 0
}

.rpage-chappanel__search input {
    min-width: 0;
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
    background: 0 0;
    border: 0;
    outline: 0;
    flex: 1
}

.rpage-chappanel__body {
    border-top: 1px solid rgb(var(--text-rgb) / .06);
    height: 220px;
    padding: 4px 10px 10px;
    overflow-y: auto
}

.rpage-chappanel__list {
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.rpage-chappanel__item {
    width: 100%;
    color: var(--text-2);
    font: inherit;
    text-align: left;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 6px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 14px;
    transition: background .12s, color .12s;
    display: flex;
    position: relative
}

.rpage-chappanel__item:before {
    content: "";
    background: var(--accent);
    border-radius: 2px;
    width: 2px;
    height: 0;
    transition: height .15s;
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%)
}

.rpage-chappanel__item:hover {
    background: var(--surface-2);
    color: var(--text)
}

.rpage-chappanel__item.is-active {
    color: var(--accent);
    background: rgb(var(--accent-rgb) / .08);
    font-weight: 500
}

.rpage-chappanel__item.is-active:before {
    height: 16px
}

.rpage-chappanel__num {
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    min-width: 50px;
    font-weight: 500
}

.rpage-chappanel__vol {
    font-size: var(--text-2xs);
    letter-spacing: .06em;
    color: var(--text-3);
    background: rgb(var(--text-rgb) / .05);
    font-variant-numeric: tabular-nums;
    border-radius: 999px;
    padding: 2px 7px
}

.rpage-chappanel__item.is-active .rpage-chappanel__vol {
    background: rgb(var(--accent-rgb) / .14);
    color: var(--accent)
}

.rpage-chappanel__flag {
    font-size: var(--text-2xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    font-family: var(--f-mono);
    margin-left: auto
}

.rpage-chappanel__empty {
    text-align: center;
    color: var(--text-3);
    font-size: var(--text-sm);
    padding: 28px 12px
}

.rpage-zoom {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 0;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 12px;
    display: inline-flex
}

.rpage-zoom__range {
    -webkit-appearance: none;
    appearance: none;
    background: rgb(var(--text-rgb) / .14);
    cursor: pointer;
    border-radius: 999px;
    outline: 0;
    width: 110px;
    height: 4px
}

.rpage-zoom__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: var(--accent);
    border: 2px solid var(--surface-2);
    cursor: pointer;
    border-radius: 50%;
    width: 14px;
    height: 14px
}

.rpage-zoom__range::-moz-range-thumb {
    background: var(--accent);
    border: 2px solid var(--surface-2);
    cursor: pointer;
    border-radius: 50%;
    width: 14px;
    height: 14px
}

.rpage-zoom__value {
    text-align: right;
    min-width: 42px;
    font-size: var(--text-xs);
    color: var(--text-2);
    font-variant-numeric: tabular-nums
}

.rpage-dd {
    min-width: 0;
    position: relative
}

.rpage-dd__trigger {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    height: 36px;
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    border: 0;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 0 10px;
    display: inline-flex
}

.rpage-dd__trigger:hover {
    border-color: rgb(var(--text-rgb) / .18)
}

.rpage-dd__label {
    font-size: var(--text-2xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-3)
}

.rpage-dd__value {
    font-size: var(--text-sm);
    color: var(--text);
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: clamp(120px, 28vw, 320px);
    overflow: hidden
}

.rpage-dd__pop {
    flex-direction: column;
    min-width: max(100%, 240px);
    max-height: 240px;
    display: flex;
    top: auto;
    bottom: calc(100% + 6px);
    left: 0;
    right: auto
}

.rpage-chapnav .fdrop.is-open .fdrop__pop,
.rpage-cmpanel__chapnav .fdrop.is-open .fdrop__pop {
    max-height: 240px
}

.rpage-dd__pop--center {
    left: 50%;
    transform: translate(-50%)
}

.rpage-dd__pop--right {
    left: auto;
    right: 0
}

.rpage-dd__list {
    flex: 1;
    min-height: 0;
    overflow-y: auto
}

.rpage-dd__header {
    background: rgb(var(--text-rgb) / .05);
    border-radius: 6px;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0 0 6px;
    padding: 8px 10px;
    display: flex
}

.rpage-dd__header-label {
    font-family: var(--f-mono);
    font-size: var(--text-2xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
    flex-shrink: 0
}

.rpage-dd__header-value {
    font-size: var(--text-sm);
    color: var(--text);
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    font-weight: 500;
    overflow: hidden
}

.rpage-dd__search {
    background: var(--surface);
    border-radius: 6px;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    padding: 6px 8px;
    display: flex
}

.rpage-dd__search input {
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
    background: 0 0;
    border: 0;
    outline: 0;
    flex: 1
}

.rpage-dd__opt {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
    overflow: hidden
}

.rpage-progress {
    z-index: 40;
    counter-reset: span-counter;
    background: 0 0;
    display: flex;
    position: absolute
}

.rpage-progress--top,
.rpage-progress--bottom {
    flex-direction: row;
    height: 1.5rem;
    left: 0;
    right: 0
}

.rpage-progress--top {
    top: var(--rpage-header-h);
    align-items: flex-start;
    transition: top .25s
}

.rpage-progress--bottom {
    align-items: flex-end;
    bottom: 0
}

.rpage--chrome-hidden .rpage-progress--top {
    top: 0
}

.rpage-progress--left,
.rpage-progress--right {
    top: var(--rpage-header-h);
    flex-direction: column;
    width: 1.5rem;
    transition: top .25s;
    bottom: 0
}

.rpage-progress--left {
    align-items: flex-start;
    left: 0
}

.rpage-progress--right {
    align-items: flex-end;
    right: 0
}

.rpage--chrome-hidden .rpage-progress--left,
.rpage--chrome-hidden .rpage-progress--right {
    top: 0
}

.rpage-progress__seg {
    background: rgb(var(--text-rgb) / .18);
    cursor: pointer;
    counter-increment: span-counter;
    border: 0;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    padding: 0;
    transition: background .12s, height .18s, width .18s;
    position: relative
}

.rpage-progress--top .rpage-progress__seg,
.rpage-progress--bottom .rpage-progress__seg {
    border-right: 1px solid var(--bg);
    height: 3px
}

.rpage-progress--left .rpage-progress__seg,
.rpage-progress--right .rpage-progress__seg {
    border-bottom: 1px solid var(--bg);
    width: 3px
}

.rpage-progress__seg:last-child {
    border: 0
}

.rpage-progress__seg.is-visited {
    background: rgb(var(--accent-rgb) / .55)
}

.rpage-progress__seg.is-active {
    background: var(--accent)
}

.rpage-progress--top:hover .rpage-progress__seg,
.rpage-progress--bottom:hover .rpage-progress__seg {
    height: 1.5rem
}

.rpage-progress--left:hover .rpage-progress__seg,
.rpage-progress--right:hover .rpage-progress__seg {
    width: 1.5rem
}

.rpage-progress__seg:hover {
    background: var(--accent)
}

.rpage-progress__seg:before {
    content: counter(span-counter);
    background: var(--text-2);
    color: var(--bg);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    border-radius: .25rem;
    padding: 0 .3rem;
    font-size: .8rem;
    line-height: 1.4;
    transition: all .2s;
    position: absolute
}

.rpage-progress--top .rpage-progress__seg:before,
.rpage-progress--bottom .rpage-progress__seg:before {
    top: 0;
    left: 50%;
    transform: translate(-50%)
}

.rpage-progress--top .rpage-progress__seg:hover:before,
.rpage-progress--bottom .rpage-progress__seg:hover:before {
    opacity: 1;
    top: 100%
}

.rpage-progress--left .rpage-progress__seg:before,
.rpage-progress--right .rpage-progress__seg:before {
    top: 50%;
    left: 0;
    transform: translateY(-50%)
}

.rpage-progress--left .rpage-progress__seg:hover:before,
.rpage-progress--right .rpage-progress__seg:hover:before {
    opacity: 1;
    left: 100%
}

.rpage-settings {
    z-index: 50;
    pointer-events: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0
}

.rpage-settings__panel {
    background: var(--surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    pointer-events: auto;
    max-width: 450px;
    max-height: min(70vh, 560px);
    flex-direction: column;
    max-height: min(70dvh, 560px);
    margin: 0 auto;
    transition: transform .25s;
    display: flex;
    position: relative;
    transform: translateY(110%);
    box-shadow: 0 -20px 50px -16px #0000008c, 0 -2px 6px #00000040
}

.rpage-settings.is-open .rpage-settings__panel {
    transform: translateY(0)
}

.rpage-settings__head {
    justify-content: space-between;
    align-items: center;
    padding: 8px 8px 8px 16px;
    display: flex
}

.rpage-settings__tabs {
    gap: 4px;
    display: inline-flex
}

.rpage-settings__tab {
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--text-sm);
    color: var(--text-2);
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 8px 14px
}

.rpage-settings__tab.is-active {
    background: var(--surface-2);
    color: var(--text)
}

.rpage-settings__close {
    border-radius: var(--radius-sm);
    width: 32px;
    height: 32px;
    color: var(--text-3);
    cursor: pointer;
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.rpage-settings__close:hover {
    background: var(--surface-2);
    color: var(--text)
}

.rpage-settings__body {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    flex: auto;
    gap: 18px;
    min-height: 0;
    padding: 14px 16px 18px;
    display: flex;
    overflow-y: auto
}

.rpage-settings__group {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.rpage-disp {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    display: grid
}

.rpage-disp__card {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    border: 0;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    transition: color .12s, border-color .12s, background .12s;
    display: inline-flex
}

.rpage-disp__card:hover {
    color: var(--text);
    border-color: rgb(var(--text-rgb) / .18)
}

.rpage-disp__card.is-on {
    color: var(--accent);
    border-color: rgb(var(--accent-rgb) / .55);
    background: rgb(var(--accent-rgb) / .1)
}

.rpage-disp__diagram {
    justify-content: center;
    align-items: center;
    gap: 2px;
    height: 26px;
    display: flex
}

.rpage-disp__diagram--long-strip {
    flex-direction: column;
    gap: 0
}

.rpage-disp__sheet {
    background: rgb(var(--text-rgb) / .18);
    border-radius: 2px;
    width: 10px;
    height: 16px;
    display: block
}

.rpage-disp__card.is-on .rpage-disp__sheet {
    background: var(--accent)
}

.rpage-disp__strip {
    background: rgb(var(--text-rgb) / .18);
    width: 12px;
    height: 24px;
    color: var(--text-3);
    border-radius: 3px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 2px;
    padding: 3px 0;
    display: flex;
    position: relative
}

.rpage-disp__strip-line {
    background: rgb(var(--text-rgb) / .35);
    width: 70%;
    height: 1px;
    display: block
}

.rpage-disp__card.is-on .rpage-disp__strip {
    background: var(--accent);
    color: var(--accent-ink)
}

.rpage-disp__card.is-on .rpage-disp__strip-line {
    background: #ffffff80
}

.rpage-disp__label {
    font-size: var(--text-sm)
}

.rpage-dir2 {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    display: grid
}

.rpage-dir2__btn {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
    border: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    transition: color .12s, border-color .12s, background .12s;
    display: inline-flex
}

.rpage-dir2__btn:hover {
    color: var(--text);
    border-color: rgb(var(--text-rgb) / .18)
}

.rpage-dir2__btn.is-on {
    color: var(--accent);
    border-color: rgb(var(--accent-rgb) / .5);
    background: rgb(var(--accent-rgb) / .12)
}

.rpage-dir2__arrow {
    justify-content: center;
    align-items: center;
    line-height: 1;
    display: inline-flex
}

.rpage-pb {
    flex-wrap: nowrap;
    gap: 6px;
    display: flex
}

.rpage-pb__btn {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    min-width: 0;
    height: 40px;
    color: var(--text-3);
    cursor: pointer;
    border: 0;
    flex: 1 1 0;
    justify-content: center;
    align-items: center;
    transition: color .12s, background .12s;
    display: inline-flex
}

.rpage-pb__btn:hover {
    color: var(--text);
    border-color: rgb(var(--text-rgb) / .2)
}

.rpage-pb__btn.is-on {
    color: var(--accent);
    border-color: rgb(var(--accent-rgb) / .5);
    background: rgb(var(--accent-rgb) / .12)
}

.rpage-slider__row {
    align-items: center;
    gap: 12px;
    padding: 6px;
    display: flex
}

.rpage-slider__row input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    background: rgb(var(--text-rgb) / .12);
    cursor: pointer;
    border-radius: 999px;
    outline: 0;
    flex: 1;
    height: 4px
}

.rpage-slider__row input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: var(--accent);
    border: 2px solid var(--surface);
    cursor: pointer;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    box-shadow: 0 1px 4px #0000004d
}

.rpage-slider__row input[type=range]::-moz-range-thumb {
    background: var(--accent);
    border: 2px solid var(--surface);
    cursor: pointer;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    box-shadow: 0 1px 4px #0000004d
}

.rpage-slider__val {
    font-size: var(--text-xs);
    color: var(--text-2);
    text-align: right;
    min-width: 38px
}

.rpage-slider.is-disabled {
    opacity: .45
}

.rpage-slider.is-disabled input[type=range],
.rpage-slider input[type=range]:disabled {
    cursor: not-allowed
}

.rpage-numinput {
    align-items: stretch;
    gap: 8px;
    display: flex
}

.rpage-numinput__group {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 0;
    flex: 1;
    grid-template-columns: 36px 1fr 36px;
    align-items: stretch;
    height: 36px;
    transition: background .12s, box-shadow .12s;
    display: grid;
    overflow: hidden
}

.rpage-numinput__group:hover {
    background: var(--surface-3)
}

.rpage-numinput__group:focus-within {
    background: var(--surface-2);
    box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .22)
}

.rpage-numinput__btn {
    color: var(--text-2);
    cursor: pointer;
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    transition: background .12s, color .12s;
    display: inline-flex
}

.rpage-numinput__btn:hover {
    background: var(--surface-3);
    color: var(--text)
}

.rpage-numinput__btn:disabled {
    color: var(--text-4);
    cursor: not-allowed;
    background: 0 0
}

.rpage-numinput__field {
    width: 100%;
    min-width: 0;
    height: 100%;
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
    text-align: center;
    -webkit-appearance: textfield;
    appearance: textfield;
    background: 0 0;
    border: 0;
    outline: 0;
    padding: 0 6px
}

.rpage-numinput__field::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.rpage-numinput__field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.rpage-numinput__reset {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    min-width: 96px;
    height: 36px;
    color: var(--text-2);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    border: 0;
    padding: 0 22px;
    font-weight: 500;
    transition: color .12s, border-color .12s, background .12s
}

.rpage-numinput__reset:hover {
    color: var(--text);
    border-color: rgb(var(--text-rgb) / .24)
}

.rpage-numinput__reset:disabled {
    color: var(--text-4);
    cursor: not-allowed
}

.rpage-settings__hint {
    font-size: var(--text-xs);
    color: var(--text-3);
    margin: 4px 0 0;
    line-height: 1.5
}

.rpage-settings__title {
    font-size: var(--text-2xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 0
}

.rpage-settings__opts {
    flex-wrap: nowrap;
    gap: 6px;
    display: flex
}

.rpage-settings__opts>.rpage-opt {
    text-align: center;
    flex: 1 1 0;
    justify-content: center;
    min-width: 0
}

.rpage-settings__body--image .rpage-settings__group {
    border-bottom: 1px solid rgb(var(--text-rgb) / .05);
    gap: 4px;
    padding: 4px 0 12px
}

.rpage-settings__body--image .rpage-settings__group:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.rpage-settings__body--image .rpage-settings__opts {
    flex-flow: column;
    align-items: stretch;
    gap: 2px
}

.rpage-settings__body--image .rpage-opt {
    border-radius: var(--radius-sm);
    background: 0 0;
    border: 0;
    justify-content: flex-start;
    width: 100%;
    padding: 8px 10px
}

.rpage-settings__body--image .rpage-opt:hover {
    background: var(--surface-2);
    border-color: #0000
}

.rpage-settings__body--image .rpage-opt.is-on {
    background: rgb(var(--accent-rgb) / .1);
    border-color: #0000
}

.rpage-settings__body--shortcuts .rpage-settings__group {
    border-bottom: 1px solid rgb(var(--text-rgb) / .05);
    gap: 6px;
    padding: 4px 0 12px
}

.rpage-settings__body--shortcuts .rpage-settings__group:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.rpage-keys {
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.rpage-keys__row {
    border-radius: var(--radius-sm);
    align-items: center;
    gap: 12px;
    padding: 6px 4px;
    display: flex
}

.rpage-keys__row:hover {
    background: var(--surface-2)
}

.rpage-keys__chips {
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    min-width: 96px;
    display: inline-flex
}

.rpage-keys__chips-group {
    align-items: center;
    gap: 4px;
    display: inline-flex
}

.rpage-keys__key {
    background: var(--surface-2);
    border: 1px solid var(--border);
    min-width: 26px;
    height: 24px;
    color: var(--text);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: var(--text-2xs);
    letter-spacing: .02em;
    box-shadow: 0 1px 0 rgb(var(--text-rgb) / .06);
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    padding: 0 8px;
    font-weight: 600;
    display: inline-flex
}

.rpage-keys__or {
    font-size: var(--text-2xs);
    color: var(--text-4);
    text-transform: lowercase;
    letter-spacing: .05em
}

.rpage-keys__desc {
    font-size: var(--text-sm);
    color: var(--text-2);
    flex: 1
}

.rpage-opt {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: var(--text-sm);
    cursor: pointer;
    border: 0;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    transition: background .12s, color .12s;
    display: inline-flex
}

.rpage-opt:hover {
    color: var(--text);
    border-color: rgb(var(--text-rgb) / .16)
}

.rpage-opt input {
    display: none
}

.rpage-opt.is-on {
    color: var(--accent);
    border-color: rgb(var(--accent-rgb) / .5);
    background: rgb(var(--accent-rgb) / .12)
}

.rpage-opt__dot {
    border: 2px solid;
    border-radius: 50%;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    position: relative
}

.rpage-opt.is-on .rpage-opt__dot:after {
    content: "";
    background: currentColor;
    border-radius: 50%;
    position: absolute;
    top: 1.5px;
    bottom: 1.5px;
    left: 1.5px;
    right: 1.5px
}

.rpage-opt__check {
    width: 14px;
    height: 14px;
    color: var(--text-3);
    border: 1.5px solid;
    border-radius: 3px;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.rpage-opt.is-on .rpage-opt__check {
    color: var(--accent)
}

.rpage-settings__backdrop {
    z-index: 45;
    background: #00000059;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.rpage-hint {
    z-index: 80;
    justify-content: center;
    align-items: center;
    padding: 16px;
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.rpage-hint__backdrop {
    background: #0000008c;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.rpage-hint__card {
    background: var(--surface);
    width: 100%;
    max-width: 380px;
    color: var(--text);
    border-radius: var(--radius-md);
    border: 1px solid rgb(var(--text-rgb) / .1);
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    display: flex;
    position: relative;
    box-shadow: 0 24px 56px -18px #0009
}

.rpage-hint__title {
    font-size: var(--text-md);
    margin: 0;
    font-weight: 600
}

.rpage-hint__body {
    color: var(--text-2);
    font-size: var(--text-sm);
    margin: 0;
    line-height: 1.55
}

.rpage-hint__body kbd {
    background: var(--surface-2);
    border: 1px solid rgb(var(--text-rgb) / .1);
    font-family: var(--font-mono);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: .85em;
    display: inline-block
}

.rpage-hint__check {
    font-size: var(--text-sm);
    color: var(--text-2);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.rpage-hint__actions {
    justify-content: flex-end;
    margin-top: 4px;
    display: flex
}

.rpage-empty {
    color: var(--text-2);
    font-size: var(--text-md);
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.rpage-empty a {
    color: var(--accent);
    text-decoration: none
}

@media (max-width:720px) {
    .rpage-bottombar {
        gap: 6px;
        padding: 6px 8px
    }

    .rpage-bottombar__controls {
        gap: 6px
    }

    .rpage-bottombar__settings span {
        display: none
    }

    .rpage-iconbtn {
        padding: 6px 8px
    }

    .rpage-dd__value {
        max-width: clamp(80px, 22vw, 200px)
    }

    .rpage-zoom,
    .rpage-bottombar__hide-mobile,
    .rpage-settings__group--desktop-only {
        display: none
    }

    .rpage-chapnav__btn {
        width: 30px
    }

    .rpage-chapnav__center {
        padding: 0 10px
    }

    .rpage-chapnav__current {
        max-width: clamp(80px, 28vw, 200px)
    }
}

.rail-swiper {
    width: 100%;
    padding-bottom: 4px;
    overflow: hidden
}

.rail-swiper .swiper-wrapper {
    margin: 0 -7px
}

.rail-swiper .swiper-slide {
    width: calc((100% - (var(--cards-per-view, 5) - 1) * 14px) / var(--cards-per-view, 5));
    flex-shrink: 0;
    height: auto;
    margin: 0 7px
}

.rail-swiper .swiper-slide>.card,
.rail-swiper .swiper-slide>.card__rank-slot {
    width: 100%
}

@media (max-width:960px) {
    .rail-swiper .swiper-slide {
        width: calc(25% - 10.5px)
    }
}

@media (max-width:720px) {
    .rail-swiper .swiper-slide {
        width: calc(33.3333% - 9.33333px)
    }
}

@media (max-width:500px) {
    .rail-swiper .swiper-slide {
        width: calc(50% - 7px)
    }
}