:root {
    --bg: #0d1020;
    --bg-2: #131832;
    --panel: rgba(255, 255, 255, 0.08);
    --panel-solid: #171d38;
    --panel-strong: #202849;
    --text: #f7f8ff;
    --muted: #aeb6d6;
    --line: rgba(255, 255, 255, 0.13);
    --accent: #8f7cff;
    --accent-2: #00d5ff;
    --danger: #ff5f75;
    --success: #5ee6a8;
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --header-h: 90px;
    --footer-h: 58px;
    --home-bg-image: none;
}


html[data-theme="light"] {
    --bg: #f4f6ff;
    --bg-2: #e9edfb;
    --panel: rgba(255, 255, 255, 0.78);
    --panel-solid: #ffffff;
    --panel-strong: #e5eaf8;
    --text: #12162a;
    --muted: #5d6685;
    --line: rgba(24, 31, 55, 0.14);
    --accent: #6f63ff;
    --accent-2: #00a8d8;
    --danger: #d43d55;
    --success: #008c5a;
    --shadow: 0 24px 70px rgba(36, 44, 78, 0.18);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 16% 2%, rgba(143, 124, 255, 0.32), transparent 30rem),
        radial-gradient(circle at 85% 8%, rgba(0, 213, 255, 0.18), transparent 25rem),
        linear-gradient(135deg, var(--bg), #080a13 70%);
}

html[data-theme="light"] body {
    background:
        radial-gradient(circle at 16% 2%, rgba(111, 99, 255, 0.18), transparent 30rem),
        radial-gradient(circle at 85% 8%, rgba(0, 168, 216, 0.14), transparent 25rem),
        linear-gradient(135deg, #f7f8ff, #e9edfb 70%);
}

body.home-page {
    height: 100vh;
    overflow: hidden;
    position: relative;
}

body.home-page::before,
body.home-page::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body.home-page::before {
    background:
        linear-gradient(180deg, rgba(8, 10, 19, 0.50), rgba(8, 10, 19, 0.68)),
        linear-gradient(115deg, rgba(255,255,255,0.05) 0 7%, transparent 7% 15%, rgba(255,255,255,0.035) 15% 23%, transparent 23% 34%, rgba(255,255,255,0.03) 34% 42%, transparent 42% 100%),
        var(--home-bg-image),
        radial-gradient(circle at 18% 24%, rgba(255, 181, 216, 0.18), transparent 18rem),
        radial-gradient(circle at 82% 22%, rgba(0, 213, 255, 0.16), transparent 21rem),
        radial-gradient(circle at 52% 88%, rgba(143, 124, 255, 0.18), transparent 22rem),
        linear-gradient(135deg, #101429, #0a0c16 72%);
    background-size: cover, auto, cover, auto, auto, auto, auto;
    background-position: center;
    opacity: 0.88;
}

body.home-page::after {
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,0.028) 0 2px, transparent 2px 26px),
        radial-gradient(circle at 12% 80%, rgba(255,255,255,0.16) 0 2px, transparent 3px),
        radial-gradient(circle at 77% 68%, rgba(255,255,255,0.14) 0 2px, transparent 3px),
        radial-gradient(circle at 68% 18%, rgba(255,255,255,0.14) 0 1.5px, transparent 2.5px),
        linear-gradient(to bottom, transparent, rgba(8,10,19,0.22));
    mix-blend-mode: screen;
    opacity: 0.35;
}

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

img {
    max-width: 100%;
    display: block;
}

button,
.button {
    border: 0;
    border-radius: 999px;
    padding: 0.85rem 1.15rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #080a13;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 14px 34px rgba(0, 213, 255, 0.16);
    transition: transform 0.18s ease, filter 0.18s ease;
}

button:hover,
.button:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

button.danger {
    background: rgba(255, 95, 117, 0.14);
    color: #ffc4cc;
    box-shadow: none;
}

.button.ghost {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    border: 1px solid var(--line);
    box-shadow: none;
}

.button.primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #090b16;
}

.button.wide {
    display: block;
    text-align: center;
    width: 100%;
}

input,
textarea,
select {
    width: 100%;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 0.95rem 1rem;
    font: inherit;
    outline: none;
}

input:focus,
textarea:focus,
select:focus {
    border-color: rgba(0, 213, 255, 0.75);
    box-shadow: 0 0 0 4px rgba(0, 213, 255, 0.11);
}

select option {
    background: #151a32;
    color: var(--text);
}

html[data-theme="light"] select option {
    background: #ffffff;
    color: #12162a;
}

label {
    color: #dce2ff;
    font-size: 0.93rem;
    font-weight: 700;
}

code {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.12rem 0.35rem;
    color: #dce2ff;
}

.site-header {
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0 5vw;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    backdrop-filter: blur(18px);
    position: sticky;
    top: 0;
    z-index: 30;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #070914;
    font-size: 1rem;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: auto;
}

.main-nav a {
    color: var(--muted);
    padding: 0.75rem 0.95rem;
    border-radius: 999px;
    font-weight: 700;
}

.main-nav a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
}

.profile-menu {
    position: relative;
}

.profile-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem 0.55rem 0.55rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    border: 1px solid var(--line);
    box-shadow: none;
}

.avatar-fallback,
.avatar-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.avatar-fallback {
    display: inline-grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(143, 124, 255, 0.95), rgba(0, 213, 255, 0.88));
    color: #080a13;
    font-size: 0.84rem;
    font-weight: 900;
}

.avatar-img {
    object-fit: cover;
}

.profile-name {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chevron {
    color: var(--muted);
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 0.85rem);
    right: 0;
    display: none;
    min-width: 250px;
    padding: 0.55rem;
    border-radius: 18px;
    background: color-mix(in srgb, var(--panel-solid) 96%, transparent);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.profile-menu.open .profile-dropdown {
    display: block;
}

.profile-dropdown a,
.dropdown-note {
    display: block;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    color: var(--muted);
    font-weight: 700;
}

.profile-dropdown a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
}

.profile-dropdown hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 0.4rem 0;
}

.dropdown-note {
    font-size: 0.82rem;
    font-weight: 500;
}

.theme-toggle-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    box-shadow: none;
    font-weight: 800;
}

.theme-toggle-row:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: none;
}

html[data-theme="light"] .theme-toggle-row:hover {
    background: rgba(18, 23, 44, 0.06);
}

.theme-switch {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid var(--line);
    flex: 0 0 auto;
}

html[data-theme="light"] .theme-switch {
    background: rgba(18, 23, 44, 0.10);
}

.theme-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    transition: transform 0.18s ease;
}

.theme-toggle-row.is-light .theme-switch-thumb {
    transform: translateX(20px);
}

.site-footer {
    min-height: var(--footer-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 5vw;
    border-top: 1px solid var(--line);
    color: var(--muted);
    background: color-mix(in srgb, var(--bg) 72%, transparent);
}

.footer-copy {
    font-weight: 700;
}

.feedback-link {
    padding: 0.65rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    font-weight: 800;
}

.page-shell {
    width: min(1180px, 90vw);
    margin: 0 auto;
    padding: 3rem 0;
}

.home-page .page-shell {
    min-height: calc(100vh - var(--header-h) - var(--footer-h));
    padding: 0;
    display: grid;
    place-items: center;
}

.home-hero {
    width: min(940px, 100%);
    text-align: center;
    transform: translateY(-1.5rem);
    padding: 2rem 1.8rem;
    border-radius: 36px;
    background: linear-gradient(180deg, rgba(14, 18, 35, 0.78), rgba(14, 18, 35, 0.48));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.06), transparent 38%),
        linear-gradient(20deg, transparent 58%, rgba(0,213,255,0.08));
    pointer-events: none;
}

.home-hero > * {
    position: relative;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.76rem;
    color: #bfc8ff;
    font-weight: 900;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 0.85rem;
    font-size: clamp(1.9rem, 3.8vw, 3.7rem);
    line-height: 1.02;
    letter-spacing: -0.055em;
}

h2 {
    letter-spacing: -0.04em;
}

.hero-copy p {
    max-width: 660px;
    margin: 0 auto 1.6rem;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.65;
}

.search-shell {
    position: relative;
    width: min(760px, 100%);
    margin: 0 auto;
}

.hero-search {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 0.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: var(--shadow);
}

.hero-search input {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0.95rem 1.15rem;
    font-size: 0.96rem;
}

.hero-search button {
    flex: 0 0 auto;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.4rem;
    flex-wrap: wrap;
}

.recent-strip {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.recent-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    max-width: 210px;
    padding: 0.5rem 0.75rem 0.5rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--muted);
    border: 1px solid var(--line);
}

.recent-pill img,
.recent-pill span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-grid;
    place-items: center;
    background: var(--panel-strong);
    color: var(--text);
}

.recent-pill strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

.flash-stack {
    position: fixed;
    top: calc(var(--header-h) + 0.75rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: grid;
    gap: 0.55rem;
    width: min(560px, 92vw);
    pointer-events: none;
}

.flash {
    padding: 0.9rem 1rem;
    border-radius: 999px;
    text-align: center;
    font-weight: 900;
    box-shadow: var(--shadow);
    opacity: 1;
    animation: flash-in 0.22s ease-out both;
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.flash-error {
    background: rgba(255, 95, 117, 0.97);
    color: #21050a;
}

.flash-success {
    background: rgba(94, 230, 168, 0.97);
    color: #04170d;
}

.flash-message,
.flash-info {
    background: rgba(220, 226, 255, 0.97);
    color: #080a13;
}

.flash.fade-out {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
}

@keyframes flash-in {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.content-header {
    margin-bottom: 1.5rem;
}

.split-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1.5rem;
}

.content-header h1 {
    font-size: clamp(1.7rem, 3vw, 2.7rem);
    margin-bottom: 0.35rem;
}

.content-header p,
.result-note,
.muted {
    color: var(--muted);
}

.inline-search {
    display: flex;
    width: min(430px, 100%);
    gap: 0.5rem;
    padding: 0.35rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.inline-search input {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.inline-search button {
    flex: 0 0 auto;
}

.az-tabs {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 1.3rem;
}

.az-tabs a {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid transparent;
    font-weight: 850;
}

.az-tabs a:first-child {
    width: auto;
    padding: 0 0.85rem;
}

.az-tabs a.active,
.az-tabs a:hover {
    color: var(--text);
    border-color: rgba(143, 124, 255, 0.45);
    background: rgba(143, 124, 255, 0.18);
}

.manga-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
    gap: 1rem;
}

.manga-card {
    display: grid;
    grid-template-rows: 290px 1fr;
    min-height: 470px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--line);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22);
}

.cover-link {
    overflow: hidden;
}

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

.placeholder-cover {
    display: grid;
    place-items: center;
    min-height: 100%;
    background:
        radial-gradient(circle at 30% 25%, rgba(0, 213, 255, 0.3), transparent 35%),
        linear-gradient(135deg, #1c2346, #2d2148);
    font-size: 4rem;
    font-weight: 950;
    color: rgba(255, 255, 255, 0.86);
}

.manga-card-body {
    padding: 1rem;
}

.manga-card-topline,
.manga-card-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.manga-card h3 {
    margin: 0.65rem 0 0.45rem;
    font-size: 1.2rem;
    letter-spacing: -0.04em;
}

.manga-card p {
    color: var(--muted);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.manga-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-top: 0.8rem;
}

.manga-delete-form {
    margin: 0;
}

.manga-delete-button {
    min-height: 34px;
    padding: 0 0.75rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, #ff5a3d 42%, var(--line));
    color: #ff7a63;
    background: color-mix(in srgb, #ff5a3d 10%, transparent);
    font-size: 0.78rem;
    font-weight: 900;
}

.manga-delete-button:hover {
    color: #ffffff;
    background: #ff5a3d;
}

.empty-state,
.simple-card,
.auth-card,
.comments-panel,
.detail-cover-card,
.full-height-card {
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--line);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22);
}

.empty-state,
.simple-card,
.auth-card {
    max-width: 680px;
    margin: 0 auto;
    padding: 2rem;
}

.auth-card {
    max-width: 420px;
}

.auth-card h1 {
    margin-bottom: 1rem;
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.05;
}

.auth-card .stack-form {
    margin-top: 0;
}

.compact-auth-card {
    padding-top: 1.4rem;
}

.auth-card .stack-form label {
    font-size: 0.88rem;
}

.auth-switch {
    margin: 0.85rem 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 0.92rem;
}

.auth-switch a {
    color: var(--text);
    font-weight: 850;
}

.stack-form {
    display: grid;
    gap: 0.8rem;
    margin-top: 1.2rem;
}

.stack-form button {
    margin-top: 0.4rem;
}

.detail-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.4rem;
    align-items: start;
}

.detail-cover-card {
    padding: 1rem;
    position: sticky;
    top: calc(var(--header-h) + 1rem);
}

.detail-cover {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 22px;
    margin-bottom: 1rem;
}

.detail-cover.placeholder-cover {
    min-height: auto;
    aspect-ratio: 3 / 4;
    border-radius: 22px;
    margin-bottom: 1rem;
}

.stat-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
    margin-top: 1rem;
}

.stat-list div {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 0.75rem;
    text-align: center;
}

.stat-list span {
    display: block;
    color: var(--muted);
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.detail-main {
    min-width: 0;
}

.detail-title-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.detail-title-row h1 {
    font-size: clamp(1.9rem, 3.6vw, 3.1rem);
    margin-bottom: 0.55rem;
}

.badge {
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    background: rgba(143, 124, 255, 0.18);
    color: #dce2ff;
    font-weight: 900;
    border: 1px solid rgba(143, 124, 255, 0.35);
}

.description-large {
    color: #dbe1ff;
    font-size: 1.08rem;
    line-height: 1.75;
}

.metadata-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.4rem 0;
}

.metadata-grid div {
    padding: 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line);
}

.metadata-grid dt {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 900;
}

.metadata-grid dd {
    margin: 0.3rem 0 0;
    color: var(--text);
}

.comments-panel {
    padding: 1.2rem;
}

.panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.panel-heading h2 {
    margin-bottom: 0;
}

.panel-heading span,
.panel-heading a {
    color: var(--muted);
    font-weight: 800;
}

.comment-form {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.comment-form button {
    justify-self: start;
}

.comment-list {
    display: grid;
    gap: 0.75rem;
}

.comment-card {
    padding: 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line);
}

.comment-head {
    display: flex;
    justify-content: space-between;
    color: #dce2ff;
    margin-bottom: 0.45rem;
}

.comment-card p {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.6;
}

.reader-shell {
    width: min(980px, 100%);
    margin: 0 auto;
}

.reader-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.reader-toolbar h1 {
    font-size: clamp(1.45rem, 3.2vw, 2.3rem);
    margin-bottom: 0;
}

.back-link {
    color: var(--muted);
    font-weight: 850;
}

.reader-progress-card,
.reader-note {
    padding: 0.9rem 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--line);
    color: var(--muted);
}

.reader-progress-card {
    display: grid;
    gap: 0.2rem;
    min-width: 220px;
}

.reader-progress-card strong {
    color: var(--text);
}

.reader-note {
    margin-bottom: 1rem;
}

.page-stack {
    display: grid;
    gap: 1rem;
}

.reader-page {
    margin: 0;
    padding: 1rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--line);
}

.reader-page img {
    width: 100%;
    border-radius: 18px;
    object-fit: contain;
    background: #050711;
}

.reader-page figcaption {
    text-align: center;
    color: var(--muted);
    margin-top: 0.75rem;
}

.pdf-frame-wrap {
    height: 78vh;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.08);
}

.pdf-frame-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}


html[data-theme="light"] .empty-state,
html[data-theme="light"] .simple-card,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .comments-panel,
html[data-theme="light"] .detail-cover-card,
html[data-theme="light"] .full-height-card {
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow);
}

.full-height-card {
    padding: 1.2rem;
}

.form-section-title {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-section-title h2 {
    margin-bottom: 0;
}

.form-section-title span {
    color: var(--muted);
    font-weight: 700;
}

.form-grid {
    display: grid;
    gap: 0.9rem;
}

.form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field {
    display: grid;
    gap: 0.4rem;
}

.wide-field {
    grid-column: 1 / -1;
}

.upload-box {
    display: grid;
    gap: 0.45rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px dashed rgba(255, 255, 255, 0.24);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
}

.upload-box p {
    color: var(--muted);
    margin-bottom: 0;
}

.upload-mode-tabs {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.upload-mode-tabs label,
.checkbox-field {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--line);
}

.upload-mode-tabs input,
.checkbox-field input {
    width: auto;
}

.responsive-table {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

th {
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

td a {
    color: #dce2ff;
    font-weight: 850;
}

.table-actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.table-actions button {
    padding: 0.55rem 0.8rem;
    box-shadow: none;
}

.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 900px) {
    body.home-page {
        overflow: auto;
        height: auto;
    }

    .site-header {
        padding: 0 1rem;
    }

    .main-nav {
        display: none;
    }

    .profile-name {
        display: none;
    }

    .page-shell,
    .home-page .page-shell {
        width: min(94vw, 1180px);
        padding: 2rem 0;
        display: block;
        min-height: auto;
    }

    .home-hero {
        transform: none;
    }

    .hero-search,
    .inline-search {
        border-radius: 24px;
        flex-direction: column;
        align-items: stretch;
    }

    .split-header,
    .detail-title-row,
    .reader-toolbar,
    .panel-heading,
    .form-section-title {
        display: grid;
    }

    .detail-layout {
        grid-template-columns: 1fr;
    }

    .detail-cover-card {
        position: static;
    }

    .metadata-grid,
    .form-grid.two {
        grid-template-columns: 1fr;
    }

    .manga-card {
        grid-template-rows: 260px 1fr;
    }

    h1 {
        letter-spacing: -0.055em;
    }

    .site-footer {
        display: grid;
        padding: 1rem;
    }

    .home-hero {
        padding: 1.5rem 1rem;
    }
}


.hero-search-shell {
    margin-top: 0.4rem;
}

.inline-search-shell {
    margin: 0;
    width: min(430px, 100%);
}

.search-suggestions {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    right: 0;
    padding: 0.45rem;
    border-radius: 24px;
    background: rgba(17, 23, 43, 0.98);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    z-index: 20;
    text-align: left;
}

.search-suggestions[hidden] {
    display: none !important;
}

.suggestion-item {
    display: grid;
    gap: 0.18rem;
    padding: 0.85rem 1rem;
    border-radius: 18px;
    color: var(--text);
}

.suggestion-item:hover,
.suggestion-item.active {
    background: rgba(255, 255, 255, 0.08);
}

.suggestion-item strong {
    font-size: 0.98rem;
}

.suggestion-item span {
    color: var(--muted);
    font-size: 0.86rem;
}



/* === Final sleek anime portal polish === */
:root {
    --glass: rgba(255, 255, 255, 0.08);
    --glass-strong: rgba(255, 255, 255, 0.13);
    --field-bg: rgba(255, 255, 255, 0.085);
    --hero-panel: linear-gradient(180deg, rgba(17, 22, 43, 0.84), rgba(11, 15, 29, 0.66));
    --hero-border: rgba(255, 255, 255, 0.12);
}

html[data-theme="light"] {
    --bg: #f7f9ff;
    --bg-2: #edf3ff;
    --panel: rgba(255, 255, 255, 0.82);
    --panel-solid: #ffffff;
    --panel-strong: #eef4ff;
    --text: #11172d;
    --muted: #66708d;
    --line: rgba(36, 49, 86, 0.13);
    --accent: #7469ff;
    --accent-2: #00a9df;
    --danger: #d43d55;
    --success: #008c5a;
    --shadow: 0 24px 70px rgba(43, 55, 97, 0.16);
    --glass: rgba(255, 255, 255, 0.76);
    --glass-strong: rgba(255, 255, 255, 0.94);
    --field-bg: rgba(255, 255, 255, 0.90);
    --hero-panel: linear-gradient(145deg, rgba(255,255,255,0.94), rgba(241,247,255,0.86));
    --hero-border: rgba(74, 93, 145, 0.13);
}

body {
    background:
        radial-gradient(circle at 12% 4%, rgba(143, 124, 255, 0.30), transparent 28rem),
        radial-gradient(circle at 86% 8%, rgba(0, 213, 255, 0.16), transparent 26rem),
        linear-gradient(135deg, #0d1020, #080a13 72%);
}

html[data-theme="light"] body {
    background:
        radial-gradient(circle at 11% 4%, rgba(116, 105, 255, 0.17), transparent 25rem),
        radial-gradient(circle at 88% 10%, rgba(0, 169, 223, 0.13), transparent 27rem),
        radial-gradient(circle at 50% 92%, rgba(255, 181, 216, 0.18), transparent 28rem),
        linear-gradient(135deg, #fbfcff, #edf3ff 72%);
}

body.home-page::before {
    background:
        linear-gradient(180deg, rgba(8, 10, 19, 0.26), rgba(8, 10, 19, 0.54)),
        linear-gradient(115deg, rgba(255,255,255,0.055) 0 8%, transparent 8% 18%, rgba(255,255,255,0.035) 18% 29%, transparent 29% 100%),
        var(--home-bg-image),
        radial-gradient(circle at 18% 20%, rgba(255, 181, 216, 0.15), transparent 18rem),
        radial-gradient(circle at 82% 22%, rgba(0, 213, 255, 0.18), transparent 21rem),
        radial-gradient(circle at 52% 88%, rgba(143, 124, 255, 0.18), transparent 22rem),
        linear-gradient(135deg, #101429, #0a0c16 72%);
    opacity: 1;
}

html[data-theme="light"] body.home-page::before {
    background:
        linear-gradient(180deg, rgba(247, 250, 255, 0.70), rgba(236, 243, 255, 0.88)),
        linear-gradient(115deg, rgba(116,105,255,0.055) 0 8%, transparent 8% 18%, rgba(0,169,223,0.055) 18% 30%, transparent 30% 100%),
        var(--home-bg-image),
        radial-gradient(circle at 18% 20%, rgba(255, 181, 216, 0.26), transparent 18rem),
        radial-gradient(circle at 82% 22%, rgba(0, 169, 223, 0.18), transparent 21rem),
        radial-gradient(circle at 52% 88%, rgba(116, 105, 255, 0.15), transparent 22rem),
        linear-gradient(135deg, #fbfcff, #eaf2ff 72%);
}

html[data-theme="light"] body.home-page::after {
    background:
        repeating-linear-gradient(135deg, rgba(52, 74, 122, 0.045) 0 2px, transparent 2px 28px),
        radial-gradient(circle at 12% 80%, rgba(116,105,255,0.16) 0 2px, transparent 3px),
        radial-gradient(circle at 77% 68%, rgba(0,169,223,0.15) 0 2px, transparent 3px),
        linear-gradient(to bottom, transparent, rgba(255,255,255,0.24));
    mix-blend-mode: multiply;
    opacity: 0.42;
}

.site-header {
    background: rgba(8, 10, 19, 0.74);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}

html[data-theme="light"] .site-header {
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 30px rgba(43, 55, 97, 0.10);
}

.site-footer {
    background: rgba(8, 10, 19, 0.42);
}

html[data-theme="light"] .site-footer {
    background: rgba(255, 255, 255, 0.62);
}

.profile-button,
.feedback-link,
.button.ghost,
.main-nav a:hover {
    background: var(--glass);
    border: 1px solid var(--line);
}

.profile-dropdown {
    background: var(--panel-solid);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

html[data-theme="light"] .profile-dropdown {
    background: rgba(255,255,255,0.97);
}

.profile-dropdown a:hover,
.theme-toggle-row:hover,
.dropdown-submit:hover {
    background: var(--panel-strong);
}

.theme-switch {
    background: rgba(255,255,255,0.14);
}

html[data-theme="light"] .theme-switch {
    background: #e4ebf8;
}

.dropdown-role {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    background: var(--glass);
    border: 1px solid var(--line);
    margin: 0.25rem 0;
}

.dropdown-role span {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dropdown-role strong {
    color: var(--text);
    font-size: 0.9rem;
}

.dropdown-stars strong {
    color: #ffd866;
}

.dropdown-stars small {
    color: var(--muted);
    font-weight: 800;
}

.dropdown-form {
    margin: 0;
}

.dropdown-submit {
    display: block;
    width: 100%;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
    text-align: left;
    font-weight: 700;
}

.dropdown-submit:hover {
    color: var(--text);
    transform: none;
}

.home-hero {
    width: min(820px, 92vw);
    padding: clamp(2rem, 4vw, 3.2rem);
    border-radius: 34px;
    background: var(--hero-panel);
    border: 1px solid var(--hero-border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(20px);
}

.home-hero h1 {
    margin-bottom: 1.55rem;
    color: var(--text);
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.36);
}

html[data-theme="light"] .home-hero h1 {
    text-shadow: none;
}

.hero-copy p {
    display: none;
}

.hero-search,
.inline-search {
    background: var(--field-bg);
    border: 1px solid var(--line);
    box-shadow: 0 20px 55px rgba(0,0,0,0.18);
}

html[data-theme="light"] .hero-search,
html[data-theme="light"] .inline-search {
    box-shadow: 0 18px 46px rgba(43, 55, 97, 0.12);
}

input,
textarea,
select {
    background: var(--field-bg);
    color: var(--text);
}

.hero-search input,
.inline-search input {
    background: transparent;
}

label {
    color: var(--text);
    opacity: 0.88;
}

code {
    background: var(--panel-strong);
    color: var(--text);
}

.empty-state,
.simple-card,
.auth-card,
.comments-panel,
.detail-cover-card,
.full-height-card,
.manga-card {
    background: var(--glass);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

html[data-theme="light"] .empty-state,
html[data-theme="light"] .simple-card,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .comments-panel,
html[data-theme="light"] .detail-cover-card,
html[data-theme="light"] .full-height-card,
html[data-theme="light"] .manga-card {
    background: rgba(255,255,255,0.86);
}

.content-header p,
.muted,
.result-note,
.manga-card p,
.description-large,
.comment-card p,
.metadata-grid dt,
.stat-list span {
    color: var(--muted);
}

.manga-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
}

.upload-box,
.metadata-grid div,
.stat-list div,
.comment-card,
.reader-progress-card,
.reader-note,
.reader-page {
    background: color-mix(in srgb, var(--panel-strong) 62%, transparent);
    border: 1px solid var(--line);
}

.badge {
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.search-suggestions {
    background: var(--panel-solid);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.suggestion-item:hover,
.suggestion-item.active {
    background: var(--panel-strong);
}

.comment-head strong {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
}

.comment-head small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.flash-error {
    background: rgba(255, 95, 117, 0.98);
    color: #25050a;
}

.flash-success {
    background: rgba(94, 230, 168, 0.98);
    color: #04170d;
}

@media (max-width: 900px) {
    .home-hero {
        width: min(94vw, 820px);
        padding: 1.5rem;
    }

    .home-hero h1 {
        margin-bottom: 1.1rem;
    }
}



/* === Header height update === */
:root {
    --header-h: 90px;
}

.brand {
    font-size: 1.08rem;
}

.brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    font-size: 1rem;
}

.profile-button {
    gap: 0.75rem;
    padding: 0.55rem 0.7rem 0.55rem 0.55rem;
}

.avatar-fallback,
.avatar-img {
    width: 42px;
    height: 42px;
}

.avatar-fallback {
    font-size: 0.84rem;
}

.profile-dropdown {
    top: calc(100% + 0.85rem);
    min-width: 250px;
}


/* === Compact 80 percent UI + cleaner comment/rating controls === */
html {
    font-size: 80%;
}

:root {
    --header-h: 72px;
}

body {
    overflow-x: hidden;
}

.site-header {
    padding: 0 4vw;
}

.brand {
    font-size: 0.98rem;
}

.brand-mark {
    width: 37px;
    height: 37px;
    border-radius: 13px;
    font-size: 0.86rem;
}

.profile-button {
    gap: 0.58rem;
    padding: 0.42rem 0.56rem 0.42rem 0.42rem;
}

.avatar-fallback,
.avatar-img {
    width: 34px;
    height: 34px;
}

.avatar-fallback {
    font-size: 0.72rem;
}

.profile-dropdown {
    top: calc(100% + 0.65rem);
    min-width: 220px;
}

.page-shell {
    width: min(1080px, 90vw);
    padding: 2rem 0;
}

h1 {
    font-size: clamp(1.75rem, 3vw, 3.15rem);
}

.home-hero {
    width: min(760px, 92vw);
    padding: clamp(1.7rem, 3.2vw, 2.5rem);
}

.home-hero h1 {
    font-size: clamp(2.3rem, 5.5vw, 4rem);
}

.hero-search input {
    padding: 0.85rem 1rem;
}

button,
.button {
    padding: 0.76rem 1rem;
}

.detail-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1rem;
    width: min(1040px, 100%);
    margin: 0 auto;
}

.detail-cover-card {
    padding: 0.8rem;
}

.detail-cover {
    border-radius: 18px;
    margin-bottom: 0.8rem;
}

.stat-list {
    gap: 0.45rem;
    margin-top: 0.8rem;
}

.stat-list div,
.metadata-grid div {
    padding: 0.7rem;
    border-radius: 14px;
}

.metadata-grid {
    gap: 0.6rem;
    margin: 1rem 0;
}

.detail-title-row h1 {
    font-size: clamp(1.75rem, 3.2vw, 2.85rem);
}

.description-large {
    font-size: 0.98rem;
    line-height: 1.6;
    margin-bottom: 0.9rem;
}

.comments-panel {
    padding: 0.9rem;
    border-radius: 20px;
}

.panel-heading {
    margin-bottom: 0.75rem;
}

.compact-comment-form {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}

.compact-comment-form input[type="text"] {
    min-height: 42px;
    border-radius: 999px;
}

.compact-comment-form button {
    min-height: 42px;
    padding-inline: 1.2rem;
}

.star-rating {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 0.15rem;
    white-space: nowrap;
}

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

.star-rating label {
    color: color-mix(in srgb, var(--muted) 70%, transparent);
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
    transition: color 0.15s ease, transform 0.15s ease;
}

.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
    color: #ffd866;
}

.star-rating label:hover {
    transform: translateY(-1px) scale(1.05);
}

.comment-list {
    gap: 0.55rem;
}

.comment-card {
    padding: 0.75rem 0.85rem;
}

.reader-toolbar {
    margin-bottom: 0.7rem;
}

.reader-progress-card {
    padding: 0.75rem 0.9rem;
}

.reader-page {
    padding: 0.75rem;
}

.auth-card,
.simple-card {
    padding: 1.6rem;
}

.full-height-card {
    padding: 1rem;
}

@media (max-width: 900px) {
    html {
        font-size: 88%;
    }

    :root {
        --header-h: 72px;
    }

    .detail-layout {
        grid-template-columns: 1fr;
    }

    .compact-comment-form {
        grid-template-columns: 1fr;
    }
}


/* === Consistent bottom footer + account badge update === */
html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

:root {
    --footer-h: 48px;
}

.page-shell {
    flex: 1 0 auto;
}

.site-footer {
    height: var(--footer-h);
    min-height: var(--footer-h);
    flex: 0 0 var(--footer-h);
    margin-top: auto;
    padding: 0 5vw;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--line);
}

.footer-copy {
    font-size: 0.82rem;
}

.feedback-link {
    padding: 0.48rem 0.85rem;
    font-size: 0.82rem;
}

.dropdown-role {
    margin: 0.35rem 0;
}

.dropdown-crown {
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 216, 102, 0.16), rgba(143, 124, 255, 0.12));
}

.dropdown-crown strong,
.profile-crown {
    color: #ffd866;
}

.star-band {
    display: inline-flex;
    align-items: center;
    gap: 0.08rem;
}

.star-band .star {
    color: rgba(255, 216, 102, 0.28);
    font-size: 0.95rem;
    line-height: 1;
}

.star-band .star.filled {
    color: #ffd866;
    text-shadow: 0 0 10px rgba(255, 216, 102, 0.30);
}

.star-band small {
    margin-left: 0.4rem;
    color: var(--muted);
    font-weight: 850;
}

@media (max-width: 900px) {
    .site-footer {
        height: auto;
        min-height: var(--footer-h);
        padding: 0.75rem 1rem;
    }
}


/* === Discovery pages + compact detail cleanup === */
.discovery-tabs {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: -0.4rem 0 1.15rem;
    flex-wrap: wrap;
}

.discovery-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    color: var(--muted);
    background: var(--glass);
    border: 1px solid var(--line);
    font-weight: 900;
}

.discovery-tabs a.active,
.discovery-tabs a:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.suggestion-item {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
}

.suggestion-thumb {
    width: 44px;
    height: 58px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--panel-strong);
    border: 1px solid var(--line);
    flex: 0 0 auto;
}

.suggestion-thumb-fallback {
    display: inline-grid;
    place-items: center;
    height: 44px;
    border-radius: 50%;
    color: var(--text);
    font-weight: 950;
}

.suggestion-copy {
    display: grid;
    min-width: 0;
    gap: 0.18rem;
}

.suggestion-copy strong,
.suggestion-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compact-detail-layout .detail-title-row {
    display: block;
    margin-bottom: 0.75rem;
}

.compact-detail-layout .detail-title-row h1 {
    margin-bottom: 0;
}

.compact-stats {
    grid-template-columns: 1fr;
}

.compact-metadata-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
}

.compact-comments-panel {
    margin-top: 0.8rem;
}

.manga-card-topline {
    display: none;
}

.manga-card-body h3 {
    margin-top: 0;
}

@media (max-width: 900px) {
    .compact-metadata-grid {
        grid-template-columns: 1fr;
    }
}

/* === Private upload workspace === */
h1,
h2,
h3 {
    letter-spacing: 0;
}

body.upload-home-page {
    height: auto;
    min-height: 100vh;
    overflow: auto;
}

.upload-home-page .page-shell {
    width: min(1180px, 92vw);
    min-height: calc(100vh - var(--header-h) - var(--footer-h));
    padding: 2rem 0;
    display: grid;
    align-items: center;
}

.upload-workbench {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: 1rem;
    align-items: stretch;
}

.upload-panel,
.library-panel,
.private-status-panel,
.quota-inline-offer,
.register-offer {
    background: color-mix(in srgb, var(--panel-solid) 78%, transparent);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.upload-panel,
.library-panel {
    border-radius: 24px;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.upload-heading {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.upload-heading h1 {
    margin-bottom: 0;
    font-size: clamp(2rem, 4vw, 3.4rem);
}

.upload-heading p {
    max-width: 620px;
    margin-bottom: 0;
    color: var(--muted);
}

.trial-meter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
    border-radius: 14px;
    color: var(--text);
    background: color-mix(in srgb, #5ee6a8 14%, var(--panel-strong));
    border: 1px solid color-mix(in srgb, #5ee6a8 38%, var(--line));
}

.trial-meter span {
    color: var(--muted);
    font-weight: 800;
}

.trial-meter.compact {
    min-width: min(280px, 100%);
    margin: 0;
}

.drop-upload-form {
    display: grid;
    gap: 1rem;
}

.drop-zone {
    min-height: 180px;
    display: grid;
    place-items: center;
    gap: 0.35rem;
    padding: 1.2rem;
    text-align: center;
    cursor: pointer;
    border-radius: 20px;
    border: 2px dashed color-mix(in srgb, #5ee6a8 52%, var(--line));
    background:
        linear-gradient(135deg, color-mix(in srgb, #5ee6a8 12%, transparent), transparent 48%),
        color-mix(in srgb, var(--panel-strong) 68%, transparent);
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.drop-zone:hover,
.drop-zone.is-dragging {
    transform: translateY(-1px);
    border-color: #5ee6a8;
    background:
        linear-gradient(135deg, color-mix(in srgb, #5ee6a8 18%, transparent), color-mix(in srgb, #ff8fab 9%, transparent)),
        color-mix(in srgb, var(--panel-strong) 82%, transparent);
}

.drop-zone input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.drop-zone span {
    font-size: 1.25rem;
    font-weight: 950;
}

.drop-zone strong {
    max-width: 100%;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compact-upload-grid {
    gap: 0.75rem;
}

.drop-upload-form button[type="submit"] {
    justify-self: start;
    min-width: 180px;
}

.quota-inline-offer {
    display: grid;
    gap: 0.7rem;
    padding: 1rem;
    border-radius: 18px;
    background: color-mix(in srgb, #ff8fab 16%, var(--panel-solid));
}

.quota-inline-offer h2,
.quota-inline-offer p {
    margin-bottom: 0;
}

.library-panel {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.library-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.library-panel-head h2 {
    margin-bottom: 0;
}

.library-list {
    display: grid;
    gap: 0.7rem;
}

.library-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel-strong) 66%, transparent);
}

.library-row:hover {
    border-color: color-mix(in srgb, #5ee6a8 46%, var(--line));
}

.library-row img,
.library-row-cover {
    width: 52px;
    height: 72px;
    border-radius: 10px;
    object-fit: cover;
}

.library-row-cover {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #23324a, #2c1f3c);
    font-weight: 950;
}

.library-row span {
    min-width: 0;
    display: grid;
    gap: 0.2rem;
}

.library-row strong,
.library-row small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library-row small,
.empty-library-note p {
    color: var(--muted);
}

.empty-library-note {
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel-strong) 52%, transparent);
}

.status-pill {
    display: inline-flex;
    width: fit-content;
    margin-top: 0.8rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    color: var(--text);
    background: color-mix(in srgb, #5ee6a8 18%, transparent);
    border: 1px solid color-mix(in srgb, #5ee6a8 34%, var(--line));
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.private-status-panel {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border-radius: 20px;
}

.private-status-panel h2,
.private-status-panel p {
    margin-bottom: 0;
}

.private-status-panel p {
    color: var(--muted);
}

.register-offer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(3, 5, 12, 0.68);
    backdrop-filter: blur(8px);
}

.register-offer {
    position: relative;
    width: min(440px, 100%);
    display: grid;
    gap: 0.75rem;
    padding: 1.4rem;
    border-radius: 24px;
}

.register-offer h2,
.register-offer p {
    margin-bottom: 0;
}

.register-offer p {
    color: var(--muted);
}

.modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--panel-strong) 80%, transparent);
    box-shadow: none;
}

.offer-actions {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
}

@media (max-width: 980px) {
    .upload-workbench {
        grid-template-columns: 1fr;
    }

    .upload-home-page .page-shell {
        align-items: start;
    }
}

@media (max-width: 640px) {
    .library-panel-head,
    .private-status-panel,
    .trial-meter {
        display: grid;
    }

    .drop-upload-form button[type="submit"],
    .offer-actions .button {
        width: 100%;
    }
}

/* === Simple upload home === */
.home-landing {
    width: min(780px, 100%);
    margin: 0 auto;
    display: grid;
    justify-items: center;
    gap: 1rem;
    text-align: center;
}

.instant-upload-form {
    width: min(520px, 100%);
}

.home-drop-zone {
    width: 100%;
    min-height: clamp(240px, 38vh, 360px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 28px;
    border-width: 2px;
    background:
        linear-gradient(145deg, color-mix(in srgb, #5ee6a8 16%, transparent), color-mix(in srgb, #ff8fab 10%, transparent)),
        color-mix(in srgb, var(--panel-solid) 72%, transparent);
}

.home-drop-zone span {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
}

.home-drop-zone strong {
    font-size: 1rem;
}

.home-drop-zone small {
    color: var(--muted);
    font-weight: 800;
}

.home-drop-zone.is-uploading {
    pointer-events: none;
    border-style: solid;
    border-color: #5ee6a8;
}

.home-actions {
    display: flex;
    justify-content: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.home-trial-meter {
    width: min(520px, 100%);
}

.home-quota-offer {
    width: min(520px, 100%);
    text-align: left;
}

.guest-library-gate {
    width: min(420px, 100%);
    margin: 0 auto;
    display: grid;
    justify-items: center;
    gap: 0.9rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    text-align: center;
}

.guest-library-gate p {
    margin-bottom: 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.4;
}

.guest-library-gate .offer-actions {
    justify-content: center;
}

@media (max-width: 640px) {
    .home-landing {
        justify-items: stretch;
    }

    .home-actions {
        justify-items: center;
    }

    .home-drop-zone {
        min-height: 230px;
    }
}

/* === High contrast sidebar shell === */
:root,
html[data-theme="light"] {
    --bg: #151617;
    --bg-2: #1b1c1e;
    --sidebar-bg: #2b2b2c;
    --sidebar-line: rgba(255, 255, 255, 0.08);
    --panel: rgba(255, 255, 255, 0.06);
    --panel-solid: #1c1d1f;
    --panel-strong: #26272a;
    --text: #f6f4ef;
    --muted: #b8b5ad;
    --line: rgba(255, 255, 255, 0.12);
    --accent: #ff5a3d;
    --accent-2: #ff8a3d;
    --danger: #ff5f75;
    --success: #ff8a3d;
    --shadow: none;
    --header-h: 0px;
    --footer-h: 0px;
}

html,
html[data-theme="light"] {
    background: #151617;
}

body,
html[data-theme="light"] body {
    min-height: 100vh;
    background: #151617;
    color: var(--text);
}

body.home-page {
    height: auto;
    min-height: 100vh;
    overflow: auto;
}

body.home-page::before,
body.home-page::after {
    display: none;
}

.app-frame {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    background: #151617;
}

.site-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 1rem;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-line);
    overflow-y: auto;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 210px;
    color: var(--text);
}

.sidebar-logo {
    width: 200px;
    height: 200px;
    display: block;
    object-fit: contain;
    object-position: center;
}

.sidebar-logo-light {
    display: none;
}

.sidebar-logo-dark {
    display: block;
}

html[data-theme="light"] .sidebar-logo-light {
    display: block;
}

html[data-theme="light"] .sidebar-logo-dark {
    display: none;
}

.sidebar-nav {
    display: grid;
    gap: 1.35rem;
}

.sidebar-section {
    display: grid;
    gap: 0.25rem;
}

.sidebar-label {
    margin: 0.4rem 0 0.2rem;
    padding: 0 0.55rem;
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 950;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 34px;
    padding: 0.48rem 0.58rem;
    border-radius: 5px;
    color: #f6f4ef;
    font-weight: 750;
}

.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-link.active {
    background: var(--accent);
    color: #ffffff;
}

.sidebar-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1.5px solid currentColor;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 950;
    line-height: 1;
}

.sidebar-bottom {
    display: grid;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid var(--sidebar-line);
}

.sidebar-theme {
    width: 100%;
    justify-content: flex-start;
    padding: 0.25rem;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    box-shadow: none;
}

.sidebar-theme:hover {
    transform: none;
    color: #ffffff;
}

.sidebar-theme .theme-switch {
    position: relative;
    width: 76px;
    height: 36px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.sidebar-theme .theme-icon {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    min-width: 0;
    color: rgba(246, 244, 239, 0.58);
    font-size: 1rem;
    font-weight: 950;
    line-height: 1;
    transition: color 160ms ease;
}

.sidebar-theme .theme-switch-thumb {
    position: absolute;
    z-index: 1;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 5px 12px rgba(255, 90, 61, 0.28);
    transform: translateX(40px);
    transition: transform 180ms ease;
}

.sidebar-theme.is-light .theme-switch-thumb {
    transform: translateX(0);
}

.sidebar-theme.is-light .theme-icon-sun,
.sidebar-theme:not(.is-light) .theme-icon-moon {
    color: #ffffff;
}

.sidebar-account {
    width: 100%;
    border: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.25rem;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    text-align: left;
    box-shadow: none;
    cursor: pointer;
}

.settings-cog {
    width: 42px;
    height: 42px;
    margin-left: -0.65rem;
    display: grid;
    place-items: center;
    color: var(--accent);
    font-size: 2.15rem;
    line-height: 1;
    text-shadow: 0 0 12px rgba(255, 90, 61, 0.32);
    transition: transform 160ms ease, color 160ms ease, text-shadow 160ms ease;
}

.sidebar-account:hover {
    transform: none;
    color: #ffffff;
    background: transparent;
}

.sidebar-account:hover .settings-cog {
    color: #ff795f;
    text-shadow: 0 0 14px rgba(255, 121, 95, 0.42);
    transform: rotate(24deg);
}

.sidebar-account span:last-child {
    display: grid;
    min-width: 0;
    padding-left: 0.55rem;
}

.sidebar-account strong,
.sidebar-account small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-account small {
    color: var(--muted);
}

.sidebar-logout button {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    box-shadow: none;
}

.content-frame {
    min-width: 0;
    min-height: 100vh;
    position: relative;
}

.top-actions {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.header-theme {
    width: auto;
    min-height: 39px;
    justify-content: center;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    box-shadow: none;
    flex: 0 0 auto;
}

.header-theme:hover {
    transform: none;
    background: transparent;
}

.header-theme .theme-switch {
    position: relative;
    width: 83px;
    height: 39px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    border-radius: 999px;
    background: #2f3032;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.header-theme .theme-icon {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    min-width: 0;
    color: rgba(246, 244, 239, 0.58);
    font-size: 1.1rem;
    font-weight: 950;
    line-height: 1;
    transition: color 160ms ease;
}

.header-theme .theme-switch-thumb {
    position: absolute;
    z-index: 1;
    top: 3px;
    left: 3px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 5px 12px rgba(255, 90, 61, 0.28);
    transform: translateX(45px);
    transition: transform 180ms ease;
}

.header-theme.is-light .theme-switch-thumb {
    transform: translateX(0);
}

.header-theme.is-light .theme-icon-sun,
.header-theme:not(.is-light) .theme-icon-moon {
    color: #ffffff;
}

.theme-toggle-row.is-cooling-down {
    cursor: wait;
    opacity: 0.68;
}

.theme-toggle-row.is-cooling-down .theme-switch-thumb {
    transition-duration: 0ms;
}

.top-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.45rem 0.8rem;
    border-radius: 8px;
    color: #ffffff;
    font-weight: 850;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.top-action.primary {
    background: var(--accent);
    border-color: var(--accent);
}

.top-action.ghost {
    background: #3a3a3c;
}

.top-user {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0.45rem 0.8rem;
    border-radius: 8px;
    background: #242527;
    color: #ffffff;
    font-weight: 850;
}

.page-shell,
.home-page .page-shell,
.upload-home-page .page-shell {
    width: min(1120px, calc(100vw - 300px));
    min-height: 100vh;
    margin: 0 auto;
    padding: clamp(1.6rem, 4vw, 3.5rem) 0;
    display: grid;
    align-items: center;
}

.flash-stack {
    top: 1rem;
    left: calc(240px + (100vw - 240px) / 2);
}

button,
.button,
.button.primary {
    background: var(--accent);
    color: #ffffff;
    box-shadow: none;
}

.button.ghost {
    background: #3a3a3c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

input,
textarea,
select {
    background: #242527;
    border-color: rgba(255, 255, 255, 0.12);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(255, 90, 61, 0.16);
}

.home-landing {
    width: min(560px, 100%);
    gap: 1.1rem;
}

.home-trial-meter,
.instant-upload-form {
    width: 100%;
}

.trial-meter {
    margin-bottom: 0;
    border-radius: 6px;
    background: #242527;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.home-drop-zone {
    min-height: clamp(270px, 38vh, 350px);
    border-radius: 24px;
    border: 2px dashed var(--accent);
    background:
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 18px),
        linear-gradient(135deg, rgba(255, 90, 61, 0.10), rgba(31, 32, 35, 0.92));
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

.home-drop-zone:hover,
.home-drop-zone.is-dragging {
    border-color: #ff8a3d;
    box-shadow:
        0 0 0 5px rgba(255, 90, 61, 0.18),
        0 0 38px rgba(255, 90, 61, 0.42),
        0 0 92px rgba(255, 138, 61, 0.20);
    transform: translateY(-2px);
    background:
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 18px),
        linear-gradient(135deg, rgba(255, 90, 61, 0.16), rgba(31, 32, 35, 0.96));
}

.home-drop-zone span {
    color: #ffffff;
}

.home-drop-zone strong {
    color: #d4d1ca;
}

.home-drop-zone small {
    color: rgba(246, 244, 239, 0.62);
    font-size: 0.82rem;
    font-weight: 800;
    text-align: center;
}

.home-actions {
    margin-top: 0.2rem;
}

.empty-state,
.simple-card,
.auth-card,
.comments-panel,
.detail-cover-card,
.full-height-card,
.manga-card,
.private-status-panel,
.quota-inline-offer,
.register-offer {
    border-radius: 8px;
    background: #1c1d1f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
    backdrop-filter: none;
}

.manga-card {
    border-radius: 8px;
}

.status-pill {
    background: rgba(255, 90, 61, 0.14);
    border-color: rgba(255, 90, 61, 0.4);
}

.register-offer-backdrop {
    background: rgba(8, 8, 9, 0.82);
}

.account-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: grid;
    place-items: center;
    padding: 1.4rem;
    background: rgba(8, 8, 9, 0.58);
    backdrop-filter: blur(8px);
}

.account-menu-backdrop[hidden] {
    display: none !important;
}

body.account-menu-open .app-frame {
    filter: blur(2px);
}

.account-menu {
    position: relative;
    width: min(768px, 96vw);
    height: min(540px, 82vh);
    display: grid;
    grid-template-columns: 184px minmax(0, 1fr);
    overflow: hidden;
    border-radius: 10px;
    background: #1b1b1c;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
}

.account-menu-close {
    position: absolute;
    top: 0.7rem;
    right: 0.75rem;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: #111112;
    color: #ffffff;
    box-shadow: none;
    font-size: 1.35rem;
    line-height: 1;
}

.account-menu-close:hover {
    background: #242426;
    color: #ffffff;
    filter: none;
    transform: none;
}

.account-menu-tabs {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    padding: 1.4rem 0.75rem;
    background: #1f1f20;
    border-right: 1px solid rgba(255, 255, 255, 0.10);
}

.account-menu-tabs h2 {
    margin: 0 0 0.55rem;
    padding: 0 0.45rem;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 850;
}

.account-tab {
    width: 100%;
    min-height: 34px;
    justify-content: start;
    padding: 0.48rem 0.55rem;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    box-shadow: none;
    text-align: left;
    font-weight: 800;
}

.account-tab:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.08);
}

.account-tab.active {
    background: #333334;
    color: #ffffff;
}

.account-menu-content {
    min-width: 0;
    overflow-y: auto;
    padding: clamp(1.3rem, 3vw, 2rem);
}

.account-panel {
    display: grid;
    gap: 1rem;
}

.account-panel[hidden] {
    display: none !important;
}

.account-panel h3 {
    margin-bottom: 0;
    font-size: 1.35rem;
}

.compact-modal-form {
    max-width: 620px;
}

.modal-placeholder-card {
    display: grid;
    gap: 0.35rem;
    max-width: 680px;
    padding: 1rem;
    border-radius: 8px;
    background: #242426;
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.modal-placeholder-card p {
    margin-bottom: 0;
    color: var(--muted);
}

.modal-signout-form {
    max-width: 220px;
}

.modal-signout-form button {
    width: 100%;
    background: #3a3a3c;
    color: #ffffff;
    box-shadow: none;
}

@media (max-width: 900px) {
    body {
        overflow-x: hidden;
    }

    .app-frame {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .site-sidebar {
        position: static;
        height: auto;
        width: 100%;
        min-width: 0;
        max-width: 100vw;
        overflow: visible;
        padding: 0.8rem;
    }

    .sidebar-nav {
        display: flex;
        overflow-x: auto;
        min-width: 0;
        max-width: 100%;
        gap: 0.8rem;
        padding-bottom: 0.2rem;
    }

    .sidebar-section {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
    }

    .sidebar-label,
    .sidebar-bottom {
        display: none;
    }

    .sidebar-link {
        white-space: nowrap;
    }

    .page-shell,
    .home-page .page-shell,
    .upload-home-page .page-shell {
        width: min(92vw, 760px);
        min-height: auto;
        padding: 4.3rem 0 2rem;
    }

    .flash-stack {
        left: 50%;
    }

    .top-actions {
        position: absolute;
        top: 0.8rem;
        right: 0.8rem;
    }

    .account-menu {
        grid-template-columns: 1fr;
        height: min(560px, 86vh);
    }

    .account-menu-tabs {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

    .account-menu-tabs h2 {
        display: none;
    }
}

/* === Working light mode for sidebar shell === */
html[data-theme="light"] {
    --bg: #f5f5f2;
    --bg-2: #ecebe6;
    --sidebar-bg: #f0efeb;
    --sidebar-line: rgba(20, 20, 20, 0.12);
    --panel: rgba(255, 255, 255, 0.78);
    --panel-solid: #ffffff;
    --panel-strong: #e7e5df;
    --text: #171717;
    --muted: #66635d;
    --line: rgba(20, 20, 20, 0.14);
    --accent: #ff5a3d;
    --accent-2: #ff8a3d;
    --danger: #c9364d;
    --success: #ff5a3d;
}

html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] .app-frame {
    background: #f5f5f2;
    color: var(--text);
}

html[data-theme="light"] .site-sidebar {
    background: var(--sidebar-bg);
    border-right-color: var(--sidebar-line);
}

html[data-theme="light"] .sidebar-brand,
html[data-theme="light"] .sidebar-label,
html[data-theme="light"] .sidebar-link,
html[data-theme="light"] .sidebar-account,
html[data-theme="light"] .sidebar-theme,
html[data-theme="light"] .sidebar-logout button {
    color: var(--text);
}

html[data-theme="light"] .sidebar-link:hover,
html[data-theme="light"] .sidebar-account:hover {
    background: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .sidebar-link.active {
    color: #ffffff;
    background: var(--accent);
}

html[data-theme="light"] .sidebar-theme,
html[data-theme="light"] .sidebar-account,
html[data-theme="light"] .sidebar-logout button,
html[data-theme="light"] .top-user {
    background: #ffffff;
    border: 1px solid rgba(20, 20, 20, 0.10);
}

html[data-theme="light"] .top-action.ghost,
html[data-theme="light"] .button.ghost {
    background: #ffffff;
    color: var(--text);
    border-color: rgba(20, 20, 20, 0.14);
}

html[data-theme="light"] .top-action.primary,
html[data-theme="light"] button,
html[data-theme="light"] .button,
html[data-theme="light"] .button.primary {
    background: var(--accent);
    color: #ffffff;
}

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background: #ffffff;
    color: var(--text);
    border-color: rgba(20, 20, 20, 0.14);
}

html[data-theme="light"] .home-drop-zone {
    border-color: var(--accent);
    background:
        repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.035) 0 2px, transparent 2px 18px),
        linear-gradient(135deg, rgba(255, 90, 61, 0.12), rgba(255, 255, 255, 0.92));
}

html[data-theme="light"] .home-drop-zone:hover,
html[data-theme="light"] .home-drop-zone.is-dragging {
    border-color: #ff5a3d;
    box-shadow:
        0 0 0 5px rgba(255, 90, 61, 0.16),
        0 0 34px rgba(255, 90, 61, 0.30),
        0 0 80px rgba(255, 138, 61, 0.18);
    background:
        repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.045) 0 2px, transparent 2px 18px),
        linear-gradient(135deg, rgba(255, 90, 61, 0.18), rgba(255, 255, 255, 0.96));
}

html[data-theme="light"] .home-drop-zone span {
    color: #1d1d1f;
}

html[data-theme="light"] .home-drop-zone strong {
    color: #67635d;
}

html[data-theme="light"] .home-drop-zone small {
    color: #7a756e;
}

html[data-theme="light"] .empty-state,
html[data-theme="light"] .simple-card,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .comments-panel,
html[data-theme="light"] .detail-cover-card,
html[data-theme="light"] .full-height-card,
html[data-theme="light"] .manga-card,
html[data-theme="light"] .private-status-panel,
html[data-theme="light"] .quota-inline-offer,
html[data-theme="light"] .register-offer,
html[data-theme="light"] .modal-placeholder-card {
    background: #ffffff;
    color: var(--text);
    border-color: rgba(20, 20, 20, 0.12);
}

html[data-theme="light"] .account-menu-backdrop {
    background: rgba(245, 245, 242, 0.62);
}

html[data-theme="light"] .account-menu {
    background: #f6f5f1;
    color: var(--text);
    border-color: rgba(20, 20, 20, 0.18);
}

html[data-theme="light"] .account-menu-tabs {
    background: #ecebe6;
    border-right-color: rgba(20, 20, 20, 0.12);
}

html[data-theme="light"] .account-tab {
    color: var(--text);
}

html[data-theme="light"] .account-tab:hover,
html[data-theme="light"] .account-tab.active {
    background: #ffffff;
    color: var(--text);
}

html[data-theme="light"] .account-menu-close {
    border-color: rgba(20, 20, 20, 0.14);
    background: #ffffff;
    color: #111112;
}

html[data-theme="light"] .account-menu-close:hover {
    background: #f0f0ee;
    color: #000000;
}

html[data-theme="light"] .sidebar-bottom {
    background: transparent;
    border-top-color: var(--sidebar-line);
    box-shadow: none;
}

html[data-theme="light"] .sidebar-theme,
html[data-theme="light"] .sidebar-account {
    background: transparent;
    border: 0;
}

html[data-theme="light"] .sidebar-theme:hover,
html[data-theme="light"] .sidebar-account:hover {
    background: transparent;
    color: #111111;
}

html[data-theme="light"] .sidebar-theme .theme-switch {
    background: rgba(20, 20, 20, 0.08);
    border-color: rgba(20, 20, 20, 0.12);
    box-shadow: inset 0 1px 3px rgba(20, 20, 20, 0.08);
}

html[data-theme="light"] .sidebar-theme .theme-icon {
    color: rgba(23, 23, 23, 0.52);
}

html[data-theme="light"] .sidebar-theme.is-light .theme-icon-sun,
html[data-theme="light"] .sidebar-theme:not(.is-light) .theme-icon-moon {
    color: #ffffff;
}

html[data-theme="light"] .settings-cog {
    color: var(--accent);
    text-shadow: 0 0 10px rgba(255, 90, 61, 0.18);
}

html[data-theme="light"] .header-theme {
    background: transparent;
    border: 0;
    color: var(--text);
}

html[data-theme="light"] .header-theme:hover {
    background: transparent;
}

html[data-theme="light"] .header-theme .theme-switch {
    background: #ffffff;
    border-color: rgba(20, 20, 20, 0.12);
    box-shadow: inset 0 1px 3px rgba(20, 20, 20, 0.08);
}

html[data-theme="light"] .header-theme .theme-icon {
    color: rgba(23, 23, 23, 0.52);
}

html[data-theme="light"] .header-theme.is-light .theme-icon-sun,
html[data-theme="light"] .header-theme:not(.is-light) .theme-icon-moon {
    color: #ffffff;
}

/* === Upload/reader entitlement polish === */
.detail-download {
    margin-top: 0.55rem;
}

.detail-export-menu {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.55rem;
}

.detail-export-menu select {
    width: 100%;
    min-height: 42px;
    border-radius: 8px;
    border: 1px solid var(--line);
    padding: 0 0.75rem;
    color: var(--text);
    background: color-mix(in srgb, var(--panel-solid) 92%, transparent);
    font-weight: 800;
}

.detail-export-menu .detail-download {
    width: auto;
    min-height: 42px;
    margin-top: 0;
    padding: 0 0.95rem;
    white-space: nowrap;
}

.manga-detail-slim .detail-cover-card {
    align-self: start;
}

.manga-detail-slim .detail-cover {
    margin-bottom: 0.75rem;
}

.manga-detail-slim .detail-main {
    align-self: start;
}

.manga-detail-slim .detail-title-row {
    margin-bottom: 0.75rem;
}

.manga-detail-slim .detail-title-row h1 {
    margin: 0;
}

.manga-detail-slim .translation-status-panel {
    max-width: 720px;
}

.translation-status-panel {
    display: grid;
    gap: 0.85rem;
}

.translation-status-panel h2,
.translation-status-panel p {
    margin-bottom: 0;
}

.translation-progress {
    width: 100%;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 18%, transparent);
}

.translation-progress span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), #5ee6a8);
    transition: width 0.25s ease;
}

.translation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.translation-actions .button {
    min-height: 42px;
}

.translation-actions [disabled] {
    cursor: wait;
    opacity: 0.72;
}

.reader-toolbar {
    align-items: center;
    flex-wrap: wrap;
}

.reader-download {
    min-height: 42px;
    white-space: nowrap;
}

.result-viewer-shell {
    width: min(1180px, 96vw);
    margin: 0 auto;
    user-select: none;
}

.result-viewer-toolbar {
    margin-bottom: 1.4rem;
}

.result-viewer-stage {
    position: relative;
    height: calc(100vh - 160px);
    min-height: 360px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.protected-page-frame {
    position: relative;
    width: min(860px, 82vw);
    height: 100%;
    margin: 0;
    display: grid;
    justify-items: center;
    align-items: center;
    overflow: hidden;
    touch-action: none;
    cursor: zoom-in;
}

.protected-page-frame.is-zoomed {
    cursor: zoom-in;
}

.protected-page-frame.is-pannable {
    cursor: grab;
}

.protected-page-frame.is-panning {
    cursor: grabbing;
}

.protected-page-frame.download-guarded::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    background: rgba(255, 255, 255, 0.001);
    pointer-events: auto;
}

.protected-page-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: var(--shadow);
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
    transform-origin: 50% 50%;
    transition: transform 0.08s ease-out;
    will-change: transform;
}

.protected-page-frame.is-panning .protected-page-image {
    transition: none;
}

.protected-page-frame figcaption {
    display: none;
}

.result-viewer-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc((100% - min(860px, 82vw)) / 2 + 5vw);
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--text) 60%, transparent);
    font-size: clamp(2rem, 6vw, 5rem);
    display: grid;
    place-items: center;
    opacity: 0.18;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.result-viewer-zone:hover {
    opacity: 0.7;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.result-viewer-zone:disabled {
    opacity: 0;
    pointer-events: none;
}

.result-viewer-zone-left {
    left: 0;
}

.result-viewer-zone-right {
    right: 0;
}

.reader-page {
    position: relative;
    overflow: hidden;
}

.reader-page.watermarked::after {
    content: attr(data-watermark);
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: min(72%, 620px);
    min-height: 5rem;
    display: grid;
    place-items: center;
    padding: 1rem;
    border: 2px solid rgba(255, 90, 61, 0.22);
    color: rgba(255, 90, 61, 0.34);
    font-size: clamp(1.35rem, 5vw, 4rem);
    font-weight: 950;
    text-align: center;
    text-transform: uppercase;
    transform: translate(-50%, -50%) rotate(-16deg);
    pointer-events: none;
    mix-blend-mode: multiply;
}

html:not([data-theme="light"]) .reader-page.watermarked::after {
    color: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.16);
    mix-blend-mode: normal;
}

.theme-flash-burst {
    --flash-center-x: calc(240px + (100vw - 240px) / 2);
    position: fixed;
    inset: 0;
    z-index: 220;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(circle at var(--flash-center-x) 50%, rgba(255, 255, 255, 0.98) 0 8%, rgba(255, 225, 113, 0.86) 13%, rgba(255, 90, 61, 0.24) 30%, transparent 58%);
    animation: flash-burst-fade 900ms cubic-bezier(.2, .8, .2, 1) both;
}

.theme-flash-burst::before {
    content: "FLASH";
    position: absolute;
    left: var(--flash-center-x);
    top: 50%;
    color: #171717;
    font-size: clamp(2.5rem, 12vw, 9rem);
    font-weight: 950;
    text-shadow:
        0 3px 0 #ffffff,
        0 12px 30px rgba(255, 90, 61, 0.42);
    transform: translate(-50%, -50%) rotate(-8deg) scale(0.8);
    animation: flash-word-pop 760ms cubic-bezier(.16, 1, .3, 1) both;
}

.theme-flash-burst span {
    position: absolute;
    left: var(--flash-center-x);
    top: 50%;
    width: 10rem;
    height: 0.45rem;
    border-radius: 999px;
    background: #ff5a3d;
    transform-origin: 0 50%;
    transform: rotate(calc(var(--ray-index) * 45deg)) translateX(3rem) scaleX(0);
    animation: flash-ray 680ms cubic-bezier(.2, .8, .2, 1) both;
}

.theme-flash-burst.theme-flash-video,
.theme-flash-burst.theme-flash-cutout {
    display: grid;
    place-items: center;
    background: transparent;
    animation: flash-burst-fade 1050ms cubic-bezier(.2, .8, .2, 1) both;
}

.theme-flash-burst.theme-flash-video::before,
.theme-flash-burst.theme-flash-cutout::before {
    content: none;
}

.theme-flash-burst.theme-flash-video span,
.theme-flash-burst.theme-flash-cutout span {
    display: none;
}

.theme-flash-character-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: max-content;
    max-width: calc(100vw - 2rem);
}

.theme-flash-burst.theme-flash-cutout .theme-flash-character-stage {
    transform: translateX(44%);
}

.theme-flash-burst.theme-flash-video .theme-flash-character-stage {
    transform: translateX(18%);
}

.theme-flash-burst.theme-flash-video video,
.theme-flash-burst.theme-flash-video canvas,
.theme-flash-burst.theme-flash-cutout img {
    width: auto;
    max-width: calc(100vw - 2rem);
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
}

.theme-flash-burst.theme-flash-video canvas {
    mix-blend-mode: multiply;
}

.theme-flash-burst.theme-flash-video video,
.theme-flash-burst.theme-flash-video canvas {
    height: clamp(420px, 78vh, 760px);
    max-height: calc(100vh - 2rem);
}

.theme-flash-burst.theme-flash-video .theme-flash-source-video {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    width: auto;
    height: clamp(420px, 78vh, 760px);
    max-height: calc(100vh - 2rem);
    opacity: 1;
    transform: translate(-50%, -50%);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.theme-flash-burst.theme-flash-video .theme-flash-character-stage.is-keyed-video-ready .theme-flash-source-video {
    opacity: 0;
}

.theme-flash-burst.theme-flash-cutout img {
    height: clamp(397px, 73.5vh, 718px);
    max-height: none;
}

.theme-flash-effect {
    --flash-effect-x: 44%;
    --flash-effect-y: 21.3459%;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: normal;
}

.theme-flash-effect::before,
.theme-flash-effect::after {
    content: none;
}

.theme-flash-effect::before {
    display: none;
}

.theme-flash-effect::after {
    display: none;
}

.theme-flash-effect i {
    position: absolute;
    left: var(--flash-effect-x);
    top: var(--flash-effect-y);
    z-index: 3;
    display: block;
    width: min(42%, 300px);
    height: clamp(8px, 1.25vh, 13px);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(255, 224, 80, 0.96), rgba(255, 90, 61, 0.78), rgba(255, 90, 61, 0));
    box-shadow:
        0 0 12px rgba(255, 255, 255, 0.78),
        0 0 26px rgba(255, 90, 61, 0.58);
    font-style: normal;
    transform-origin: 0 50%;
    animation: character-flash-ray 860ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes flash-burst-fade {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    70% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.02);
    }
}

@keyframes character-flash-ray {
    0% {
        opacity: 0.95;
        transform: rotate(calc(var(--ray-index) * 45deg)) translateX(14.4919rem) scaleX(0.42);
    }
    28% {
        opacity: 1;
        transform: rotate(calc(var(--ray-index) * 45deg)) translateX(17.9309rem) scaleX(0.9);
    }
    100% {
        opacity: 0;
        transform: rotate(calc(var(--ray-index) * 45deg)) translateX(26.208rem) scaleX(0.08);
    }
}

@keyframes flash-word-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-14deg) scale(0.55);
    }
    26% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(6deg) scale(1.08);
    }
    74% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(-8deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-3deg) scale(1.2);
    }
}

@keyframes flash-ray {
    0% {
        opacity: 0;
        transform: rotate(calc(var(--ray-index) * 45deg)) translateX(2rem) scaleX(0);
    }
    35% {
        opacity: 0.92;
        transform: rotate(calc(var(--ray-index) * 45deg)) translateX(4rem) scaleX(1);
    }
    100% {
        opacity: 0;
        transform: rotate(calc(var(--ray-index) * 45deg)) translateX(14rem) scaleX(0.18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-flash-burst {
        display: none;
    }
}

/* === Reader desktop placement and compact card actions === */
.reader-page-body .content-frame {
    grid-column: 2;
    grid-row: 1;
}

.manga-card-heading {
    position: relative;
}

.manga-card-action-menu {
    position: relative;
    flex: 0 0 auto;
}

.manga-card-action-menu.is-open .manga-edit-button,
html[data-theme="light"] .manga-card-action-menu.is-open .manga-edit-button {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    opacity: 1;
}

.manga-card-action-popover {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 25;
    width: max-content;
    min-width: 138px;
    display: grid;
    gap: 0.18rem;
    padding: 0.32rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: color-mix(in srgb, var(--panel-solid) 97%, transparent);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    transform-origin: top right;
    animation: ui-dialog-in var(--ui-motion-fast) var(--ui-motion-ease) both;
}

.manga-card-action-popover[hidden] {
    display: none !important;
}

.manga-card-action-popover .manga-delete-form {
    width: 100%;
    margin: 0;
    justify-self: stretch;
}

.manga-card-action-popover .manga-card-action-item,
html[data-theme="light"] .manga-card-action-popover .manga-card-action-item {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.45rem 0.58rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    box-shadow: none;
    font-size: 0.76rem;
    font-weight: 850;
    text-align: left;
}

.manga-card-action-popover .manga-card-action-item:hover,
html[data-theme="light"] .manga-card-action-popover .manga-card-action-item:hover {
    background: color-mix(in srgb, var(--text) 8%, transparent);
    color: var(--text);
    filter: none;
    transform: none;
}

.manga-card-action-popover .manga-card-action-item.is-danger,
html[data-theme="light"] .manga-card-action-popover .manga-card-action-item.is-danger {
    color: var(--danger);
}

.manga-card-action-popover .manga-card-action-item.is-danger:hover,
html[data-theme="light"] .manga-card-action-popover .manga-card-action-item.is-danger:hover {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
}

/* === Mobile login and registration layout === */
@media (max-width: 760px) {
    .auth-dialog-backdrop {
        padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
        overflow: hidden;
    }

    .auth-dialog {
        width: min(460px, calc(100vw - 1rem));
        height: min(680px, calc(100vh - 1rem));
        height: min(680px, calc(100dvh - 1rem));
        min-height: 0;
        grid-template-columns: 1fr;
        grid-template-rows: clamp(105px, 20dvh, 145px) minmax(0, 1fr);
        border-radius: 13px;
    }

    .auth-dialog-image {
        min-height: 0;
    }

    .auth-dialog-image img {
        object-position: center 30%;
    }

    .auth-dialog-content {
        min-height: 0;
        padding: 1rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .auth-dialog-tabs {
        position: sticky;
        top: 0;
        z-index: 2;
        margin: 0 0 0.9rem;
    }

    .auth-dialog-panel {
        gap: 0.38rem;
    }

    .auth-dialog-panel h2 {
        font-size: clamp(1.35rem, 7vw, 1.65rem);
    }

    .auth-dialog-panel > p {
        margin-bottom: 0.55rem;
        font-size: 0.86rem;
        line-height: 1.4;
    }

    .auth-dialog-form {
        gap: 0.34rem;
    }

    .auth-dialog-form input,
    .auth-dialog-form button[type="submit"] {
        min-height: 44px;
    }
}

@media (max-width: 760px) and (max-height: 620px) {
    .auth-dialog {
        grid-template-rows: minmax(0, 1fr);
    }

    .auth-dialog-image {
        display: none;
    }

    .auth-dialog-tabs {
        margin-right: 2.5rem;
    }
}

/* === Reading continuity and gallery-style manga presentation === */
.continue-reading-card {
    position: relative;
    width: min(560px, 100%);
    min-width: 0;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.8rem 0.65rem 0.65rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    border-radius: 12px;
    background:
        linear-gradient(115deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent 48%),
        color-mix(in srgb, var(--panel-solid) 94%, #131722);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
    text-align: left;
}

.continue-reading-card::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 72%, white), transparent);
    opacity: 0.72;
}

.continue-reading-card:hover {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28), 0 0 30px color-mix(in srgb, var(--accent) 10%, transparent);
    transform: translateY(-2px);
}

.continue-reading-preview {
    width: 64px;
    height: 78px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, rgba(255, 255, 255, 0.16));
    border-radius: 7px;
    background: linear-gradient(145deg, #292b32, #111319);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.36);
}

.continue-reading-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.continue-reading-placeholder {
    color: color-mix(in srgb, var(--accent) 76%, white);
    font-size: 1.6rem;
    font-weight: 950;
}

.continue-reading-copy {
    min-width: 0;
    display: grid;
    gap: 0.14rem;
}

.continue-reading-copy small {
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.continue-reading-copy strong {
    overflow: hidden;
    color: var(--text);
    font-size: 0.96rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.continue-reading-copy > span:not(.continue-reading-track) {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.continue-reading-track {
    width: min(230px, 100%);
    height: 4px;
    margin-top: 0.25rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 80%, transparent);
}

.continue-reading-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), #ff9a50);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent);
}

.continue-reading-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.continue-reading-action b {
    color: var(--accent);
    font-size: 1.05rem;
}

html[data-theme="light"] .continue-reading-card {
    background:
        linear-gradient(115deg, rgba(255, 90, 61, 0.11), transparent 50%),
        linear-gradient(145deg, #fffdf9, #eeece7);
    box-shadow: 0 13px 32px rgba(61, 50, 42, 0.13);
}

html[data-theme="light"] .continue-reading-preview {
    background: linear-gradient(145deg, #dad6cf, #f8f5ef);
    box-shadow: 0 7px 16px rgba(61, 50, 42, 0.17);
}

.manga-card.manga-card-title-first {
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 42%),
        color-mix(in srgb, var(--panel-solid) 95%, #171a21);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.manga-card.manga-card-title-first:hover {
    border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24), 0 0 28px color-mix(in srgb, var(--accent) 8%, transparent);
    transform: translateY(-3px);
}

.library-preview {
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    background:
        radial-gradient(circle at 20% 4%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 45%),
        linear-gradient(145deg, #282b33, #101218 72%);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.07), 0 10px 24px rgba(0, 0, 0, 0.24);
}

.library-preview .manga-cover {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 4px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
}

html[data-theme="light"] .manga-card.manga-card-title-first {
    background:
        linear-gradient(145deg, rgba(255, 90, 61, 0.055), transparent 42%),
        linear-gradient(160deg, #fffefa, #eeece6);
    box-shadow: 0 11px 26px rgba(55, 47, 39, 0.11);
}

html[data-theme="light"] .library-preview {
    background:
        radial-gradient(circle at 20% 4%, rgba(255, 90, 61, 0.14), transparent 44%),
        linear-gradient(145deg, #d7d2ca, #f0eee9 72%);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.84), 0 9px 20px rgba(55, 47, 39, 0.14);
}

html[data-theme="light"] .library-preview .manga-cover {
    border-color: rgba(35, 31, 27, 0.2);
    box-shadow: 0 8px 20px rgba(55, 47, 39, 0.2);
}

.manga-detail-single {
    width: min(760px, 100%);
}

.manga-detail-single .detail-cover-card {
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 38%),
        color-mix(in srgb, var(--panel-solid) 96%, #171a21);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.24);
}

.detail-preview-frame {
    height: min(72vh, 760px);
    height: min(72dvh, 760px);
    padding: clamp(7px, 1.4vw, 12px);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
    background:
        radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 15px),
        linear-gradient(145deg, #292c35, #101218 72%);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 14px 34px rgba(0, 0, 0, 0.28);
}

.detail-preview-frame .detail-cover {
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 5px;
    background: #f7f4ed;
    box-shadow: 0 13px 32px rgba(0, 0, 0, 0.42), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

html[data-theme="light"] .manga-detail-single .detail-cover-card {
    background:
        linear-gradient(145deg, rgba(255, 90, 61, 0.055), transparent 40%),
        linear-gradient(160deg, #fffefa, #eeece6);
    box-shadow: 0 18px 48px rgba(55, 47, 39, 0.14);
}

html[data-theme="light"] .detail-preview-frame {
    background:
        radial-gradient(circle at 18% 8%, rgba(255, 90, 61, 0.14), transparent 42%),
        repeating-linear-gradient(135deg, rgba(36, 31, 27, 0.026) 0 1px, transparent 1px 15px),
        linear-gradient(145deg, #d5d1ca, #efede8 72%);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.9), 0 13px 30px rgba(55, 47, 39, 0.14);
}

html[data-theme="light"] .detail-preview-frame .detail-cover {
    border-color: rgba(35, 31, 27, 0.2);
    box-shadow: 0 12px 28px rgba(55, 47, 39, 0.24), 0 0 0 1px rgba(255, 90, 61, 0.13);
}

.reader-page-body .content-frame,
.reader-page-body .page-shell,
.reader-page-body .reader-viewer-stage,
.reader-page-body .result-viewer-stage {
    background:
        radial-gradient(circle at 50% -12%, rgba(255, 90, 61, 0.2), transparent 42%),
        radial-gradient(circle at 7% 82%, rgba(123, 97, 255, 0.1), transparent 35%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 19px),
        linear-gradient(145deg, #191b23, #0e1016 72%);
}

html[data-theme="light"] .reader-page-body .content-frame,
html[data-theme="light"] .reader-page-body .page-shell,
html[data-theme="light"] .reader-page-body .reader-viewer-stage,
html[data-theme="light"] .reader-page-body .result-viewer-stage {
    background:
        radial-gradient(circle at 50% -12%, rgba(255, 90, 61, 0.17), transparent 42%),
        radial-gradient(circle at 7% 82%, rgba(111, 99, 255, 0.09), transparent 35%),
        repeating-linear-gradient(135deg, rgba(40, 34, 29, 0.025) 0 1px, transparent 1px 19px),
        linear-gradient(145deg, #e3e0da, #cfcfcf 72%);
}

.reader-page-body .reader-current-page,
.reader-page-body .protected-page-frame {
    width: 100%;
    max-width: none;
    background: transparent;
}

.reader-page-body .reader-current-page img,
.reader-page-body .protected-page-image {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: #f7f4ed;
    box-shadow:
        0 24px 62px rgba(0, 0, 0, 0.52),
        0 0 0 1px rgba(255, 90, 61, 0.22),
        0 0 34px rgba(255, 90, 61, 0.1);
}

html[data-theme="light"] .reader-page-body .reader-current-page img,
html[data-theme="light"] .reader-page-body .protected-page-image {
    border-color: rgba(35, 31, 27, 0.24);
    box-shadow:
        0 22px 54px rgba(46, 40, 34, 0.3),
        0 0 0 1px rgba(255, 90, 61, 0.17),
        0 0 30px rgba(255, 90, 61, 0.1);
}

.reader-page-body .reader-page-zone:hover,
.reader-page-body .result-viewer-zone:hover {
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent);
}

.reader-page-body .reader-page-zone-right:hover,
.reader-page-body .result-viewer-zone-right:hover {
    background: linear-gradient(-90deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent);
}

.reader-page-body .reader-page-zone span,
.reader-page-body .result-viewer-zone span,
.reader-page-body .viewer-page-status {
    border-color: color-mix(in srgb, var(--accent) 38%, rgba(255, 255, 255, 0.16));
    background: color-mix(in srgb, #1d2028 88%, transparent);
    color: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
}

html[data-theme="light"] .reader-page-body .reader-page-zone span,
html[data-theme="light"] .reader-page-body .result-viewer-zone span,
html[data-theme="light"] .reader-page-body .viewer-page-status {
    background: color-mix(in srgb, #fffdf9 91%, transparent);
    color: #25211e;
    box-shadow: 0 7px 18px rgba(55, 47, 39, 0.15);
}

@media (max-width: 760px) {
    .continue-reading-card {
        grid-template-columns: 54px minmax(0, 1fr) auto;
        gap: 0.65rem;
        padding: 0.55rem;
    }

    .continue-reading-preview {
        width: 54px;
        height: 66px;
    }

    .continue-reading-action {
        font-size: 0;
    }

    .continue-reading-action b {
        font-size: 1.2rem;
    }

    .manga-detail-single {
        width: min(620px, 100%);
    }

    .detail-preview-frame {
        height: min(58vh, 560px);
        height: min(58dvh, 560px);
        padding: 6px;
    }

    .reader-page-body .reader-current-page img,
    .reader-page-body .protected-page-image {
        border-radius: 2px;
        box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 90, 61, 0.18);
    }
}

@media (max-width: 900px) {
    .theme-flash-burst {
        --flash-center-x: 50%;
    }
}

.flash-stack {
    left: calc(240px + (100vw - 240px) / 2);
}

@media (max-width: 900px) {
    .flash-stack {
        left: 50%;
    }
}

@media (max-width: 760px) {
    .result-viewer-shell {
        width: 100%;
    }

    .result-viewer-stage {
        height: calc(100vh - 150px);
        min-height: 320px;
    }

    .protected-page-frame {
        width: min(100%, 94vw);
    }

    .protected-page-image {
        max-height: 100%;
    }

    .result-viewer-zone {
        width: 22vw;
        font-size: 2.6rem;
    }
}

/* === Auth form sizing === */
.login-card,
.register-card {
    width: min(480px, 100%);
    max-width: 480px;
    padding: clamp(1.7rem, 3vw, 2.3rem);
}

.login-card .stack-form,
.register-card .stack-form {
    gap: 0.95rem;
}

/* === Compact library cards === */
.manga-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.85rem;
}

.manga-card {
    grid-template-rows: 290px auto;
    min-height: 0;
}

.manga-card-body {
    display: grid;
    gap: 0.62rem;
    padding: 0.75rem 0.8rem 0.82rem;
}

.manga-card-title-row {
    display: grid;
    gap: 0.48rem;
    min-width: 0;
}

.manga-card h3 {
    margin: 0;
    min-width: 0;
    font-size: 1rem;
    line-height: 1.1;
    letter-spacing: 0;
}

.manga-card h3 a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.manga-card p,
.manga-card-footer,
.status-pill {
    display: none;
}

.manga-rename-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.42rem;
    margin: 0;
}

.manga-rename-form input {
    width: 100%;
    min-height: 32px;
    border-radius: 7px;
    padding: 0 0.55rem;
    font-size: 0.78rem;
    font-weight: 800;
}

.manga-rename-form button,
.manga-open-button,
.manga-delete-button {
    min-height: 32px;
    border-radius: 7px;
    padding: 0 0.58rem;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.manga-rename-form button,
.manga-open-button {
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 13%, transparent);
}

.manga-rename-form button:hover,
.manga-open-button:hover {
    background: var(--accent);
    color: #fff;
}

.manga-card-meta {
    gap: 0.55rem;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
}

.manga-card-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.5rem;
}

.manga-open-button {
    display: inline-grid;
    place-items: center;
    justify-self: start;
    min-width: 58px;
}

.manga-delete-form {
    justify-self: end;
}

@media (max-width: 760px) {
    .manga-grid {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    }

    .manga-card {
        grid-template-rows: 260px auto;
    }
}
/* === Library edit toggle refinement === */
.manga-card-actions {
    grid-template-columns: auto auto 1fr;
}

.manga-edit-button {
    min-height: 32px;
    border-radius: 7px;
    padding: 0 0.58rem;
    border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.manga-edit-button:hover,
.manga-card.is-renaming .manga-edit-button {
    background: var(--accent);
    color: #fff;
}

.manga-rename-form[hidden] {
    display: none !important;
}

.manga-rename-form {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    margin-top: -0.08rem;
}

.manga-rename-cancel {
    border: 1px solid var(--line);
    color: var(--muted);
    background: transparent;
}

.manga-rename-cancel:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--panel-strong) 78%, transparent);
}
/* === Reader viewer refinement === */
.reader-shell {
    width: min(1120px, 100%);
}

.reader-toolbar {
    position: sticky;
    top: calc(var(--header-h) + 0.65rem);
    z-index: 8;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    padding: 0.72rem 0.78rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel-solid) 92%, transparent);
    border: 1px solid var(--line);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(12px);
}

.reader-toolbar > div:first-child {
    min-width: 0;
}

.reader-toolbar h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    letter-spacing: 0;
}

.reader-progress-card {
    min-width: 0;
    width: fit-content;
    padding: 0.55rem 0.72rem;
    border-radius: 8px;
    gap: 0.1rem;
    font-size: 0.78rem;
}

.reader-progress-card strong {
    font-size: 0.86rem;
}

.reader-download {
    min-height: 36px;
    padding-inline: 0.82rem;
    border-radius: 7px;
}

.reader-download-locked {
    cursor: pointer;
    opacity: 0.86;
}

.reader-note {
    width: fit-content;
    margin: 0 auto 0.9rem;
    padding: 0.62rem 0.85rem;
    border-radius: 8px;
    font-size: 0.86rem;
}

.page-stack {
    gap: 0.8rem;
    justify-items: center;
}

.reader-page {
    width: min(920px, 100%);
    padding: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #0e0f10;
}

.reader-page img {
    display: block;
    width: 100%;
    height: auto;
}

.reader-page figcaption {
    margin: 0;
    padding: 0.5rem 0.65rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 850;
    text-align: center;
}

@media (max-width: 760px) {
    .reader-toolbar {
        position: static;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .reader-progress-card,
    .reader-download {
        width: 100%;
    }
}
/* === One-page reader viewer === */
.reader-shell {
    width: 100%;
    max-width: none;
    margin: 0;
}

.reader-toolbar {
    position: relative;
    top: auto;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1160px, 100%);
    margin: -2.15rem 0 0.75rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.reader-back-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0.32rem 0.55rem;
    margin-left: max(-2.4rem, -4vw);
    border-radius: 7px;
    background: color-mix(in srgb, var(--panel-solid) 70%, transparent);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 900;
}

.reader-page-indicator {
    display: none;
}

.reader-progress-card,
.reader-download,
.reader-download-locked,
.page-stack {
    display: none !important;
}

.reader-viewer-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(72px, 1fr) minmax(0, min(920px, 76vh)) minmax(72px, 1fr);
    align-items: center;
    min-height: calc(100vh - 120px);
    width: 100%;
    overflow: hidden;
}

.reader-current-page {
    position: relative;
    grid-column: 2;
    align-self: center;
    justify-self: center;
    width: 100%;
    height: calc(100vh - 145px);
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    touch-action: none;
    cursor: zoom-in;
    border-radius: 8px;
    background: #0e0f10;
    border: 1px solid var(--line);
}

.reader-current-page img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    object-fit: contain;
    background: transparent;
    -webkit-user-drag: none;
    user-select: none;
    transform-origin: 50% 50%;
    transition: transform 0.08s ease-out;
    will-change: transform;
}

.reader-current-page.download-guarded::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    background: rgba(255, 255, 255, 0.001);
    pointer-events: auto;
}

.reader-current-page.download-guarded img {
    pointer-events: none;
}

.reader-current-page.download-guarded.watermarked::after {
    z-index: 5;
}

.reader-current-page.is-pannable {
    cursor: grab;
}

.reader-current-page.is-panning {
    cursor: grabbing;
}

.reader-current-page.is-panning img {
    transition: none;
}

.reader-current-page figcaption {
    display: none;
}

.reader-page-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc((100% - min(920px, 76vh)) / 2);
    min-width: 72px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    opacity: 1;
}

.reader-page-zone:hover {
    transform: none;
    filter: none;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.reader-page-zone:disabled {
    cursor: default;
    pointer-events: none;
}

.reader-page-zone-left {
    left: 0;
}

.reader-page-zone-right {
    right: 0;
}

@media (max-width: 900px) {
    .reader-toolbar {
        margin-top: 0;
    }

    .reader-back-link {
        margin-left: 0;
    }

    .reader-viewer-stage {
        grid-template-columns: 18vw minmax(0, 1fr) 18vw;
        min-height: calc(100vh - 190px);
    }

    .reader-page-zone {
        width: 18vw;
        min-width: 0;
    }

    .reader-current-page img {
        max-height: 100%;
    }

    .reader-current-page {
        height: calc(100vh - 210px);
    }
}
/* === Quiet detail/library cleanup === */
.manga-detail-single {
    width: min(340px, 100%);
    margin: 0 auto;
}

.manga-detail-single .detail-cover-card {
    position: static;
}

.detail-cover-title {
    margin: 0 0 0.72rem;
    font-size: clamp(1.28rem, 7vw, 2rem);
    line-height: 1.08;
    letter-spacing: 0;
    text-align: center;
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.button:disabled,
.button.is-disabled,
.detail-export-menu select:disabled,
.detail-export-menu button:disabled {
    cursor: wait;
    opacity: 0.56;
    transform: none;
    filter: none;
}

.detail-export-menu.is-disabled {
    pointer-events: none;
}

.detail-translation-panel {
    margin-top: 0.85rem;
    padding: 0.85rem;
    border-radius: 8px;
}

.detail-translation-panel.is-visible {
    background: color-mix(in srgb, var(--panel-strong) 74%, transparent);
    border: 1px solid var(--line);
    cursor: zoom-in;
}

.reader-current-page.is-zoomed {
    cursor: zoom-in;
}

.debug-log-form {
    margin-bottom: 1rem;
}

.debug-log-form .button {
    width: 100%;
}

.manga-card-actions.manga-card-actions-delete-only {
    display: flex;
    justify-content: flex-end;
    grid-template-columns: none;
}

.manga-card-actions-delete-only .manga-delete-form {
    margin-left: auto;
}
/* === Title-first cards and cover-driven detail navigation === */
.manga-card.manga-card-title-first {
    grid-template-rows: auto 290px auto;
}

.manga-card-title-first > .manga-card-title-row {
    padding: 0.78rem 0.8rem 0.62rem;
    text-align: center;
}

.manga-card-title-first > .manga-card-title-row h3 {
    margin: 0;
}

.manga-card-title-first > .manga-card-title-row h3 a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.manga-card-title-first .cover-link,
.detail-cover-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.detail-cover-link .detail-cover {
    transition: transform 0.16s ease, filter 0.16s ease;
}

.detail-cover-link:hover .detail-cover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.detail-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin-bottom: 0.75rem;
    padding: 0 0.9rem;
}

.manga-detail-single .detail-cover-card .button.primary.wide.is-disabled,
.manga-detail-single .detail-cover-card .detail-read-button {
    margin-top: 0.75rem;
}

@media (max-width: 760px) {
    .manga-card.manga-card-title-first {
        grid-template-rows: auto 260px auto;
    }
}

/* === Responsive phone and tablet shell === */
.mobile-tab-bar {
    display: none;
}

.viewer-page-status {
    position: absolute;
    left: 50%;
    bottom: 0.75rem;
    z-index: 8;
    min-width: 58px;
    padding: 0.38rem 0.62rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel-solid) 88%, transparent);
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 900;
    text-align: center;
    transform: translateX(-50%);
    backdrop-filter: blur(10px);
    pointer-events: none;
}

.reader-stream-status {
    position: absolute;
    left: 50%;
    bottom: 3.25rem;
    z-index: 8;
    max-width: min(88vw, 520px);
    padding: 0.46rem 0.78rem;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel-solid) 90%, transparent);
    color: var(--text);
    font-size: 0.74rem;
    font-weight: 800;
    text-align: center;
    transform: translateX(-50%);
    backdrop-filter: blur(10px);
    pointer-events: none;
}

.reader-page-zone span {
    position: absolute;
    top: 50%;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: color-mix(in srgb, var(--panel-solid) 84%, transparent);
    color: var(--text);
    font-size: 2rem;
    line-height: 1;
    opacity: 0.42;
    transform: translateY(-50%);
    backdrop-filter: blur(8px);
    pointer-events: none;
}

.reader-page-zone-left span {
    left: 0.8rem;
}

.reader-page-zone-right span {
    right: 0.8rem;
}

:where(a, button, input, textarea, select):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 72%, white);
    outline-offset: 3px;
}

@media (max-width: 1024px) {
    :root,
    html[data-theme="light"] {
        /* The mobile mark was visually constrained to ~52px tall. */
        --mobile-header-h: 172px;
        --mobile-nav-h: 68px;
    }

    html {
        scroll-padding-top: calc(var(--mobile-header-h) + 0.75rem);
    }

    body {
        min-width: 0;
        overflow-x: hidden;
        padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
    }

    .app-frame {
        display: block;
        width: 100%;
        max-width: 100vw;
        min-height: 100vh;
        overflow-x: clip;
    }

    .site-sidebar {
        position: fixed;
        inset: 0 0 auto 0;
        z-index: 70;
        width: 100%;
        height: calc(var(--mobile-header-h) + env(safe-area-inset-top));
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: env(safe-area-inset-top) 0.8rem 0;
        overflow: hidden;
        background: color-mix(in srgb, var(--sidebar-bg) 94%, transparent);
        border-right: 0;
        border-bottom: 1px solid var(--sidebar-line);
        backdrop-filter: blur(16px);
    }

    .sidebar-brand {
        width: 156px;
        min-height: 0;
        height: var(--mobile-header-h);
        justify-content: center;
    }

    .sidebar-logo {
        width: 156px;
        height: 156px;
        object-position: center;
    }

    .sidebar-nav,
    .sidebar-bottom {
        display: none;
    }

    .content-frame {
        min-height: calc(100vh - var(--mobile-header-h));
        padding-top: calc(var(--mobile-header-h) + env(safe-area-inset-top));
    }

    .page-shell,
    .home-page .page-shell,
    .upload-home-page .page-shell {
        width: min(760px, calc(100vw - 2rem));
        min-height: calc(100vh - var(--mobile-header-h) - var(--mobile-nav-h));
        margin: 0 auto;
        padding: 1.5rem 0 2rem;
        display: grid;
        align-items: center;
    }

    .top-actions {
        position: fixed;
        top: calc(env(safe-area-inset-top) + 10px);
        right: max(0.7rem, env(safe-area-inset-right));
        z-index: 80;
        gap: 0.4rem;
    }

    .top-action {
        min-height: 44px;
        padding: 0.5rem 0.72rem;
    }

    .header-theme {
        min-height: 44px;
    }

    .header-theme .theme-switch {
        width: 62px;
        height: 36px;
    }

    .header-theme .theme-switch-thumb {
        top: 3px;
        left: 3px;
        width: 28px;
        height: 28px;
        transform: translateX(27px);
    }

    .header-theme.is-light .theme-switch-thumb {
        transform: translateX(0);
    }

    .header-theme .theme-icon {
        font-size: 0.95rem;
    }

    .mobile-tab-bar {
        position: fixed;
        inset: auto 0 0;
        z-index: 90;
        height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 0.38rem max(0.55rem, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(0.55rem, env(safe-area-inset-left));
        background: color-mix(in srgb, var(--sidebar-bg) 96%, transparent);
        border-top: 1px solid var(--sidebar-line);
        backdrop-filter: blur(18px);
    }

    .mobile-tab {
        min-width: 0;
        min-height: 56px;
        display: grid;
        grid-template-rows: 26px auto;
        place-items: center;
        align-content: center;
        gap: 0.12rem;
        padding: 0.2rem;
        border: 0;
        border-radius: 7px;
        background: transparent;
        color: var(--muted);
        box-shadow: none;
        font-size: 0.72rem;
        font-weight: 850;
        line-height: 1;
    }

    .mobile-tab:hover {
        transform: none;
        filter: none;
    }

    html[data-theme="light"] button.mobile-tab,
    html[data-theme="light"] button.mobile-tab:hover {
        background: transparent;
        color: var(--muted);
        box-shadow: none;
    }

    .mobile-tab.active {
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 10%, transparent);
    }

    .mobile-tab-icon {
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        border: 1.5px solid currentColor;
        border-radius: 6px;
        font-size: 1rem;
        font-weight: 950;
        line-height: 1;
    }

    .mobile-settings-icon {
        border: 0;
        font-size: 1.55rem;
    }

    .content-header,
    .split-header,
    .listing-header {
        align-items: flex-start;
    }

    .manga-grid {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    }

    .account-menu-backdrop {
        padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
    }

    .account-menu {
        width: min(720px, 100%);
        height: min(680px, 88vh);
        height: min(680px, 88dvh);
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .account-menu-tabs {
        grid-auto-flow: column;
        grid-auto-columns: minmax(max-content, 1fr);
        padding: 0.75rem 3.2rem 0.75rem 0.75rem;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        scrollbar-width: none;
    }

    .account-menu-tabs::-webkit-scrollbar {
        display: none;
    }

    .account-menu-tabs h2 {
        display: none;
    }

    .account-tab {
        min-height: 44px;
        justify-content: center;
        padding-inline: 0.8rem;
        text-align: center;
        white-space: nowrap;
    }

    .account-menu-close {
        top: 0.85rem;
        right: 0.85rem;
        width: 40px;
        height: 40px;
    }

    .account-menu-content {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .flash-stack {
        top: calc(var(--mobile-header-h) + env(safe-area-inset-top) + 0.6rem);
        left: 50%;
        width: min(92vw, 460px);
    }

    body.reader-page-body {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        padding-bottom: 0;
    }

    .reader-page-body .content-frame {
        height: 100vh;
        height: 100dvh;
        padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
        overflow: hidden;
    }

    .reader-page-body .page-shell {
        width: 100%;
        min-height: 0;
        height: calc(100vh - var(--mobile-header-h) - var(--mobile-nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        height: calc(100dvh - var(--mobile-header-h) - var(--mobile-nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        display: block;
        padding: 0.55rem 0.75rem;
    }

    .reader-page-body .reader-shell,
    .reader-page-body .result-viewer-shell {
        width: 100%;
        height: 100%;
    }

    .reader-page-body .reader-toolbar,
    .reader-page-body .result-viewer-toolbar {
        width: 100%;
        min-height: 42px;
        margin: 0 0 0.5rem;
    }

    .result-viewer-toolbar h1 {
        margin: 0.12rem 0 0;
        max-width: min(70vw, 540px);
    }

    .reader-back-link,
    .result-viewer-toolbar .back-link {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        padding: 0.4rem 0.65rem;
        border: 1px solid var(--line);
        border-radius: 7px;
        background: color-mix(in srgb, var(--panel-solid) 72%, transparent);
        color: var(--text);
    }

    .reader-viewer-stage,
    .result-viewer-stage {
        width: 100%;
        height: calc(100% - 50px);
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr;
        place-items: center;
        overflow: hidden;
    }

    .reader-current-page,
    .protected-page-frame {
        grid-column: 1;
        width: 100%;
        height: 100%;
        border-radius: 6px;
    }

    .reader-page-zone,
    .result-viewer-zone {
        z-index: 6;
        width: 22%;
        min-width: 64px;
        height: 100%;
        opacity: 1;
    }

    .reader-page-zone span,
    .result-viewer-zone span {
        opacity: 0.72;
    }

    .viewer-page-status {
        bottom: 0.55rem;
    }

    .pdf-frame-wrap {
        height: calc(100% - 52px);
        border-radius: 6px;
    }
}

@media (max-width: 1024px) {
    body.upload-home-page {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        padding-bottom: 0;
        overscroll-behavior: none;
    }

    .upload-home-page .app-frame,
    .upload-home-page .content-frame {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .upload-home-page .page-shell {
        height: calc(100vh - var(--mobile-header-h) - var(--mobile-nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        height: calc(100dvh - var(--mobile-header-h) - var(--mobile-nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        min-height: 0;
        padding-block: 0.75rem;
        overflow: hidden;
    }
}

@media (max-width: 600px) {
    .sidebar-brand,
    .sidebar-logo {
        width: 156px;
    }

    .top-actions {
        gap: 0.28rem;
    }

    .top-action {
        min-height: 42px;
        padding-inline: 0.55rem;
        font-size: 0.78rem;
    }

    .header-theme .theme-switch {
        width: 54px;
        height: 34px;
    }

    .header-theme .theme-switch-thumb {
        width: 26px;
        height: 26px;
        transform: translateX(21px);
    }

    .header-theme.is-light .theme-switch-thumb {
        transform: translateX(0);
    }

    .header-theme .theme-icon {
        font-size: 0.82rem;
    }

    .page-shell,
    .home-page .page-shell,
    .upload-home-page .page-shell {
        width: calc(100vw - 1.25rem);
        padding-top: 1rem;
    }

    input,
    textarea,
    select {
        min-height: 44px;
        font-size: 16px;
    }

    button,
    .button {
        min-height: 44px;
    }

    .home-drop-zone {
        min-height: min(44vh, 300px);
        padding: 1.2rem;
        border-radius: 8px;
    }

    .home-drop-zone span {
        font-size: 1.55rem;
    }

    .content-header h1 {
        overflow-wrap: anywhere;
    }

    .split-header,
    .listing-header {
        display: grid;
        gap: 0.9rem;
    }

    .listing-header .button {
        width: 100%;
    }

    .manga-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .manga-card.manga-card-title-first {
        grid-template-rows: auto min(54vw, 240px) auto;
    }

    .manga-card-title-first > .manga-card-title-row {
        padding: 0.65rem 0.55rem 0.5rem;
    }

    .manga-card-body {
        padding: 0.58rem;
    }

    .manga-card-meta {
        display: grid;
        gap: 0.22rem;
    }

    .manga-delete-button {
        min-height: 40px;
    }

    .manga-detail-single {
        width: min(360px, 100%);
    }

    .detail-cover-card,
    .auth-card,
    .empty-state,
    .simple-card {
        padding: 1rem;
    }

    .detail-export-menu,
    .translation-actions,
    .offer-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .detail-export-menu .button,
    .translation-actions .button,
    .offer-actions .button {
        width: 100%;
    }

    .account-menu-backdrop {
        padding: 0;
    }

    .account-menu {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .account-menu-tabs {
        padding-top: max(0.75rem, env(safe-area-inset-top));
    }

    .account-menu-close {
        top: max(0.85rem, env(safe-area-inset-top));
        z-index: 4;
        background: color-mix(in srgb, var(--panel-solid) 92%, transparent);
    }

    .account-menu-tabs {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding-right: 3.65rem;
        overflow: hidden;
    }

    .account-tab {
        min-width: 0;
        padding-inline: 0.35rem;
        font-size: 0.72rem;
        line-height: 1.15;
        white-space: normal;
    }

    .account-menu-content {
        padding: 1rem max(1rem, env(safe-area-inset-right)) calc(1.25rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    }

    .reader-page-body .page-shell {
        width: 100%;
        padding: 0.4rem;
    }

    .reader-page-body .reader-toolbar,
    .reader-page-body .result-viewer-toolbar {
        min-height: 38px;
        margin-bottom: 0.35rem;
    }

    .result-viewer-toolbar h1 {
        max-width: 58vw;
        font-size: 0.92rem;
    }

    .reader-viewer-stage,
    .result-viewer-stage {
        height: calc(100% - 44px);
    }

    .reader-page-zone,
    .result-viewer-zone {
        width: 24%;
        min-width: 58px;
    }

    .reader-page-zone span,
    .result-viewer-zone span {
        width: 36px;
        height: 36px;
        font-size: 1.8rem;
    }

    .reader-page-zone-left span {
        left: 0.35rem;
    }

    .reader-page-zone-right span {
        right: 0.35rem;
    }

    .theme-flash-burst.theme-flash-video .theme-flash-character-stage,
    .theme-flash-burst.theme-flash-cutout .theme-flash-character-stage {
        transform: translateX(10%);
    }
}

@media (max-width: 390px) {
    .sidebar-brand,
    .sidebar-logo {
        width: 156px;
    }

    .top-action {
        padding-inline: 0.45rem;
        font-size: 0.72rem;
    }

    .manga-grid {
        grid-template-columns: 1fr;
    }

    .manga-card.manga-card-title-first {
        grid-template-rows: auto min(112vw, 430px) auto;
    }
}

@media (hover: none), (pointer: coarse) {
    button:hover,
    .button:hover,
    .detail-cover-link:hover .detail-cover {
        transform: none;
        filter: none;
    }

    .reader-page-zone span,
    .result-viewer-zone {
        opacity: 0.72;
    }
}

/* === Private library, immersive reader, and modal polish === */
.flash-stack {
    z-index: 300;
}

.manga-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.15rem;
}

.manga-card.manga-card-title-first {
    position: relative;
    grid-template-rows: auto minmax(280px, 42vh);
    min-height: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel-solid) 94%, transparent);
    transition: transform 180ms ease, border-color 180ms ease;
}

.manga-card-title-first > .manga-card-title-row {
    display: grid;
    gap: 0.55rem;
    padding: 1rem 1rem 0.3rem;
    text-align: left;
}

.manga-card-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 0;
    padding-inline: 1.35rem;
}

.manga-card-title-first > .manga-card-title-row h3 {
    min-width: 0;
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.manga-card-title-first > .manga-card-title-row h3 a {
    color: var(--text);
}

.manga-edit-button,
html[data-theme="light"] .manga-edit-button {
    flex: 0 0 auto;
    width: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
    font-size: 0.95rem;
    opacity: 0.72;
}

.manga-edit-button:hover,
.manga-card.is-renaming .manga-edit-button,
html[data-theme="light"] .manga-edit-button:hover {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    opacity: 1;
    transform: none;
}

.manga-rename-form {
    grid-template-columns: minmax(0, 1fr) auto auto;
    margin: 0;
}

.library-preview {
    position: relative;
    min-height: 0;
    margin: 0 0.85rem 0.85rem;
    overflow: hidden;
    border-radius: 6px;
    background: #101112;
}

.library-preview .manga-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.processing-cover {
    filter: blur(7px) saturate(0.75) brightness(0.62);
    transform: scale(1.06);
}

.library-processing-spinner {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 4;
    width: 46px;
    height: 46px;
    border: 4px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: library-spinner 760ms linear infinite;
}

@keyframes library-spinner {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.manga-card .manga-card-body {
    display: flex;
    justify-content: center;
    padding: 0.78rem 1rem 0.85rem;
}

.manga-page-count {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.015em;
}

.manga-page-count-corner {
    position: absolute;
    top: 1.08rem;
    left: 0.85rem;
    z-index: 5;
    line-height: 1.2;
}

.manga-delete-corner {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 5;
}

.manga-delete-corner .manga-delete-button,
html[data-theme="light"] .manga-delete-corner .manga-delete-button {
    width: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #ff5f5f;
    box-shadow: none;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
}

.manga-delete-corner .manga-delete-button:hover,
html[data-theme="light"] .manga-delete-corner .manga-delete-button:hover {
    background: rgba(255, 77, 77, 0.13);
    color: #ff3333;
    transform: none;
}

.manga-detail-single {
    width: min(430px, 100%);
}

.manga-detail-single .detail-cover-card {
    padding: clamp(1.05rem, 3vw, 1.45rem);
    border-radius: 14px;
}

.detail-heading {
    display: grid;
    justify-items: center;
    gap: 0.32rem;
    margin-bottom: 1rem;
}

.detail-cover-title {
    margin: 0;
    font-size: clamp(1.45rem, 5vw, 2.15rem);
    font-weight: 950;
    letter-spacing: -0.035em;
}

.detail-page-count,
.detail-processing-label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.detail-preview-frame {
    position: relative;
    display: block;
    width: 100%;
    height: min(58vh, 520px);
    overflow: hidden;
    border-radius: 9px;
    background: #0f1011;
}

.detail-preview-frame .detail-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-preview-frame .placeholder-cover {
    height: 100%;
}

.detail-processing-label {
    margin: 0.8rem 0 0;
    text-align: center;
}

.detail-export-menu {
    margin-top: 0.65rem;
}

.reader-sidebar-toggle {
    display: none;
}

body.reader-page-body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    padding: 0;
}

.reader-page-body .app-frame {
    height: 100%;
    min-height: 0;
    grid-template-columns: 240px minmax(0, 1fr);
    transition: grid-template-columns 180ms ease;
}

.reader-page-body.reader-sidebar-collapsed .app-frame {
    grid-template-columns: 0 minmax(0, 1fr);
}

.reader-page-body .site-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 145;
    width: 240px;
    height: 100vh;
    height: 100dvh;
    overflow: visible;
    transition: transform 180ms ease;
}

.reader-page-body.reader-sidebar-collapsed .site-sidebar {
    transform: translateX(-100%);
}

.reader-page-body .reader-sidebar-toggle,
html[data-theme="light"] .reader-page-body .reader-sidebar-toggle {
    position: absolute;
    top: 50%;
    right: -34px;
    z-index: 3;
    width: 34px;
    min-height: 58px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--sidebar-line);
    border-left: 0;
    border-radius: 0 9px 9px 0;
    background: var(--sidebar-bg);
    color: var(--text);
    box-shadow: none;
    font-size: 1.8rem;
    transform: translateY(-50%);
}

.reader-page-body .reader-sidebar-toggle:hover {
    color: var(--accent);
    filter: none;
    transform: translateY(-50%);
}

.reader-page-body .content-frame,
.reader-page-body .page-shell {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.reader-page-body .top-actions,
.reader-page-body .mobile-tab-bar {
    display: none !important;
}

.reader-page-body .reader-shell,
.reader-page-body .result-viewer-shell,
.reader-page-body .reader-viewer-stage,
.reader-page-body .result-viewer-stage {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    margin: 0;
}

.reader-page-body .reader-current-page,
.reader-page-body .protected-page-frame {
    height: 100%;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
}

.reader-page-body .reader-current-page {
    width: min(100%, 960px);
}

.reader-page-body .protected-page-frame {
    width: min(100%, 960px);
}

.reader-page-body .reader-page-zone,
.reader-page-body .result-viewer-zone {
    height: 100%;
}

.account-menu {
    width: min(576px, 94vw);
    height: min(405px, 78vh);
    grid-template-columns: 138px minmax(0, 1fr);
}

.account-menu-tabs {
    padding: 1rem 0.55rem;
}

.account-menu-content {
    padding: 1.15rem 1.35rem;
}

.account-menu .account-tab,
html[data-theme="light"] .account-menu .account-tab {
    background: transparent;
    color: var(--text);
}

.account-menu .account-tab:hover:not(.active),
html[data-theme="light"] .account-menu .account-tab:hover:not(.active) {
    background: color-mix(in srgb, var(--text) 8%, transparent);
    color: var(--text);
}

.account-menu .account-tab.active,
html[data-theme="light"] .account-menu .account-tab.active {
    background: var(--accent);
    color: #fff;
}

.auth-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 180;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(7, 8, 10, 0.66);
    backdrop-filter: blur(12px);
}

.auth-dialog-backdrop[hidden] {
    display: none !important;
}

body.auth-dialog-open {
    overflow: hidden;
}

body.auth-dialog-open .app-frame {
    filter: blur(3px);
}

.auth-dialog {
    position: relative;
    width: min(880px, 94vw);
    height: min(600px, 90vh);
    height: min(600px, 90dvh);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel-solid);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
}

.auth-dialog-close,
html[data-theme="light"] .auth-dialog-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 4;
    width: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel-solid) 82%, transparent);
    color: var(--text);
    box-shadow: none;
    font-size: 1.35rem;
}

.auth-dialog-image {
    min-width: 0;
    min-height: 0;
    background: #1b1715;
}

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

.auth-dialog-content {
    min-width: 0;
    overflow-y: auto;
    padding: clamp(1.4rem, 4vw, 2.25rem);
}

.auth-dialog-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
    margin: 0 2.5rem 1.25rem 0;
    padding: 0.25rem;
    border-radius: 9px;
    background: color-mix(in srgb, var(--panel-strong) 80%, transparent);
}

.auth-dialog-tabs button,
html[data-theme="light"] .auth-dialog-tabs button {
    min-height: 36px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
}

.auth-dialog-tabs button.active,
html[data-theme="light"] .auth-dialog-tabs button.active {
    background: var(--accent);
    color: #fff;
}

.auth-dialog-panel {
    display: grid;
    gap: 0.45rem;
}

.auth-dialog-panel[hidden] {
    display: none !important;
}

.auth-dialog-panel h2 {
    margin: 0;
    font-size: clamp(1.45rem, 3vw, 2rem);
    letter-spacing: -0.045em;
}

.auth-dialog-panel > p {
    margin: 0 0 0.8rem;
    color: var(--muted);
    line-height: 1.5;
}

.auth-eyebrow {
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.auth-dialog-form {
    gap: 0.42rem;
}

.auth-dialog-form label {
    margin-top: 0.18rem;
    font-size: 0.76rem;
}

.auth-dialog-form input {
    min-height: 40px;
}

.auth-dialog-form button[type="submit"] {
    margin-top: 0.55rem;
}

.theme-flash-burst.theme-flash-cutout .theme-flash-character-stage {
    transform: translateX(54%);
}

.theme-flash-burst.theme-flash-video .theme-flash-character-stage {
    transform: translateX(28%);
}

@media (max-width: 760px) {
    .manga-card.manga-card-title-first {
        grid-template-rows: auto min(58vw, 300px);
    }

    .account-menu {
        width: min(720px, 100%);
        height: min(680px, 88dvh);
        grid-template-columns: 1fr;
    }

    .auth-dialog {
        width: min(460px, 96vw);
        height: min(720px, 94dvh);
        grid-template-columns: 1fr;
        grid-template-rows: minmax(140px, 28%) minmax(0, 1fr);
    }

    .auth-dialog-content {
        padding: 1.15rem;
    }

    .auth-dialog-image img {
        object-position: center 32%;
    }

    .reader-page-body .app-frame,
    .reader-page-body.reader-sidebar-collapsed .app-frame {
        display: block;
    }

    .reader-page-body .site-sidebar {
        width: min(280px, 82vw);
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        padding: 1rem;
        border-right: 1px solid var(--sidebar-line);
        border-bottom: 0;
        background: var(--sidebar-bg);
    }

    .reader-page-body .site-sidebar .sidebar-brand {
        width: 100%;
        min-height: 150px;
    }

    .reader-page-body .site-sidebar .sidebar-logo {
        width: 150px;
        height: 150px;
    }

    .reader-page-body .site-sidebar .sidebar-nav,
    .reader-page-body .site-sidebar .sidebar-bottom {
        display: flex;
    }

    .reader-page-body .site-sidebar .sidebar-nav {
        flex-direction: column;
        overflow: visible;
    }

    .reader-page-body .site-sidebar .sidebar-section {
        display: grid;
    }

    .reader-page-body .reader-current-page,
    .reader-page-body .protected-page-frame {
        width: 100%;
    }

    .theme-flash-burst.theme-flash-video .theme-flash-character-stage,
    .theme-flash-burst.theme-flash-cutout .theme-flash-character-stage {
        transform: translateX(20%);
    }
}

@media (max-width: 600px) {
    .top-actions .top-action {
        display: none;
    }

    .home-drop-zone small {
        max-width: 100%;
        padding-inline: 0.45rem;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    body.upload-home-page {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        padding-bottom: 0;
    }

    .upload-home-page .content-frame {
        height: 100dvh;
        overflow: hidden;
    }

    .upload-home-page .page-shell {
        height: calc(100dvh - var(--mobile-header-h) - var(--mobile-nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        min-height: 0;
        padding-block: 0.5rem;
    }

    .upload-home-page .home-drop-zone {
        min-height: min(38dvh, 260px);
    }

    .manga-card-heading {
        padding-inline: 1rem;
    }
}

/* === Shared frontend motion system === */
:root {
    --ui-motion-fast: 120ms;
    --ui-motion-normal: 180ms;
    --ui-motion-slow: 230ms;
    --ui-motion-ease: cubic-bezier(0.22, 0.8, 0.28, 1);
    --ui-motion-exit: cubic-bezier(0.4, 0, 1, 1);
}

/* The JavaScript motion system owns cross-page navigation. Native automatic
   view transitions report skipped-transition errors on private and attachment
   responses, while the bounded leaving/entering animation works everywhere. */

html.js .site-sidebar,
html.js .top-actions,
html.js .mobile-tab-bar,
html.js .page-shell > * {
    animation: ui-page-in var(--ui-motion-normal) var(--ui-motion-ease) backwards;
}

html.js .top-actions,
html.js .mobile-tab-bar {
    animation-delay: 25ms;
}

html.ui-page-leaving .app-frame {
    opacity: 0;
    transform: translateY(-2px);
    transition:
        opacity var(--ui-motion-fast) var(--ui-motion-exit),
        transform var(--ui-motion-fast) var(--ui-motion-exit);
}

.app-frame,
body,
.page-shell,
.content-frame,
.site-sidebar,
.top-actions,
.mobile-tab-bar {
    transition:
        background-color var(--ui-motion-normal) var(--ui-motion-ease),
        border-color var(--ui-motion-normal) var(--ui-motion-ease),
        color var(--ui-motion-normal) var(--ui-motion-ease),
        filter var(--ui-motion-normal) var(--ui-motion-ease),
        opacity var(--ui-motion-fast) var(--ui-motion-ease);
}

button,
.button,
a,
input,
textarea,
select,
.manga-card,
.detail-cover-card,
.home-drop-zone,
.sidebar-link,
.mobile-tab,
.account-tab {
    transition:
        opacity var(--ui-motion-fast) var(--ui-motion-ease),
        transform var(--ui-motion-fast) var(--ui-motion-ease),
        background-color var(--ui-motion-normal) var(--ui-motion-ease),
        border-color var(--ui-motion-normal) var(--ui-motion-ease),
        color var(--ui-motion-normal) var(--ui-motion-ease),
        box-shadow var(--ui-motion-normal) var(--ui-motion-ease),
        filter var(--ui-motion-normal) var(--ui-motion-ease);
}

html.js .manga-grid > .manga-card {
    animation: ui-item-in var(--ui-motion-slow) var(--ui-motion-ease) backwards;
}

html.js .manga-grid > .manga-card:nth-child(2n) {
    animation-delay: 25ms;
}

html.js .manga-grid > .manga-card:nth-child(3n) {
    animation-delay: 50ms;
}

.ui-item-enter {
    animation: ui-item-in var(--ui-motion-slow) var(--ui-motion-ease) backwards !important;
}

.ui-item-leave {
    pointer-events: none;
    animation: ui-item-out var(--ui-motion-fast) var(--ui-motion-exit) both !important;
}

.ui-content-update {
    animation: ui-content-update var(--ui-motion-normal) var(--ui-motion-ease);
}

.profile-dropdown {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(0.985);
    transform-origin: top right;
    transition:
        visibility 0s linear var(--ui-motion-fast),
        opacity var(--ui-motion-fast) var(--ui-motion-exit),
        transform var(--ui-motion-normal) var(--ui-motion-ease);
}

.profile-menu.open .profile-dropdown {
    display: block;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.account-menu-backdrop:not([hidden]),
.auth-dialog-backdrop:not([hidden]),
.register-offer-backdrop:not([hidden]) {
    animation: ui-backdrop-in var(--ui-motion-normal) var(--ui-motion-ease) both;
}

.account-menu-backdrop:not([hidden]) .account-menu,
.auth-dialog-backdrop:not([hidden]) .auth-dialog,
.register-offer-backdrop:not([hidden]) .register-offer {
    animation: ui-dialog-in var(--ui-motion-slow) var(--ui-motion-ease) both;
}

.account-menu-backdrop.is-closing,
.auth-dialog-backdrop.is-closing,
.register-offer-backdrop.is-closing {
    animation: ui-backdrop-out var(--ui-motion-fast) var(--ui-motion-exit) both;
}

.account-menu-backdrop.is-closing .account-menu,
.auth-dialog-backdrop.is-closing .auth-dialog,
.register-offer-backdrop.is-closing .register-offer {
    animation: ui-dialog-out var(--ui-motion-fast) var(--ui-motion-exit) both;
}

.account-panel.active,
.auth-dialog-panel.active,
.translation-status-panel:not([hidden]),
.manga-rename-form:not([hidden]),
[data-translation-download]:not([hidden]),
[data-translation-view]:not([hidden]) {
    animation: ui-panel-in var(--ui-motion-normal) var(--ui-motion-ease) both;
}

.flash {
    transition:
        opacity var(--ui-motion-slow) var(--ui-motion-ease),
        transform var(--ui-motion-slow) var(--ui-motion-ease);
}

@keyframes ui-page-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ui-page-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes ui-item-in {
    from { opacity: 0; transform: translateY(7px) scale(0.992); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ui-item-out {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.985); }
}

@keyframes ui-content-update {
    from { opacity: 0.35; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ui-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ui-backdrop-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes ui-dialog-in {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ui-dialog-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(4px) scale(0.99); }
}

@keyframes ui-panel-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        transition-duration: 1ms !important;
    }
}

/* Keep the auth form usable when the mobile keyboard reduces the viewport. */
@media (max-width: 760px) {
    .auth-dialog-backdrop {
        padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
        overflow: hidden;
    }

    .auth-dialog {
        width: min(460px, calc(100vw - 1rem));
        height: min(680px, calc(100vh - 1rem));
        height: min(680px, calc(100dvh - 1rem));
        min-height: 0;
        grid-template-columns: 1fr;
        grid-template-rows: clamp(105px, 20dvh, 145px) minmax(0, 1fr);
        border-radius: 13px;
    }

    .auth-dialog-image {
        min-height: 0;
    }

    .auth-dialog-image img {
        object-position: center 30%;
    }

    .auth-dialog-content {
        min-height: 0;
        padding: 1rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .auth-dialog-tabs {
        position: sticky;
        top: 0;
        z-index: 2;
        margin: 0 0 0.9rem;
    }

    .auth-dialog-panel {
        gap: 0.38rem;
    }

    .auth-dialog-panel h2 {
        font-size: clamp(1.35rem, 7vw, 1.65rem);
    }

    .auth-dialog-panel > p {
        margin-bottom: 0.55rem;
        font-size: 0.86rem;
        line-height: 1.4;
    }

    .auth-dialog-form {
        gap: 0.34rem;
    }

    .auth-dialog-form input,
    .auth-dialog-form button[type="submit"] {
        min-height: 44px;
    }
}

@media (max-width: 760px) and (max-height: 620px) {
    .auth-dialog {
        grid-template-rows: minmax(0, 1fr);
    }

    .auth-dialog-image {
        display: none;
    }

    .auth-dialog-tabs {
        margin-right: 2.5rem;
    }
}

/* Final cascade for the gallery treatment above. */
.manga-card.manga-card-title-first {
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 42%),
        color-mix(in srgb, var(--panel-solid) 95%, #171a21);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.manga-card.manga-card-title-first:hover {
    border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24), 0 0 28px color-mix(in srgb, var(--accent) 8%, transparent);
    transform: translateY(-3px);
}

.library-preview {
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    background:
        radial-gradient(circle at 20% 4%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 45%),
        linear-gradient(145deg, #282b33, #101218 72%);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.07), 0 10px 24px rgba(0, 0, 0, 0.24);
}

.library-preview .manga-cover {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 4px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
}

html[data-theme="light"] .manga-card.manga-card-title-first {
    background:
        linear-gradient(145deg, rgba(255, 90, 61, 0.055), transparent 42%),
        linear-gradient(160deg, #fffefa, #eeece6);
    box-shadow: 0 11px 26px rgba(55, 47, 39, 0.11);
}

html[data-theme="light"] .library-preview {
    background:
        radial-gradient(circle at 20% 4%, rgba(255, 90, 61, 0.14), transparent 44%),
        linear-gradient(145deg, #d7d2ca, #f0eee9 72%);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.84), 0 9px 20px rgba(55, 47, 39, 0.14);
}

html[data-theme="light"] .library-preview .manga-cover {
    border-color: rgba(35, 31, 27, 0.2);
    box-shadow: 0 8px 20px rgba(55, 47, 39, 0.2);
}

.manga-detail-single {
    width: min(760px, 100%);
}

.manga-detail-single .detail-cover-card {
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 38%),
        color-mix(in srgb, var(--panel-solid) 96%, #171a21);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.24);
}

.detail-preview-frame {
    height: min(72vh, 760px);
    height: min(72dvh, 760px);
    padding: clamp(7px, 1.4vw, 12px);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
    background:
        radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 15px),
        linear-gradient(145deg, #292c35, #101218 72%);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 14px 34px rgba(0, 0, 0, 0.28);
}

.detail-preview-frame .detail-cover {
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 5px;
    background: #f7f4ed;
    box-shadow: 0 13px 32px rgba(0, 0, 0, 0.42), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

html[data-theme="light"] .manga-detail-single .detail-cover-card {
    background:
        linear-gradient(145deg, rgba(255, 90, 61, 0.055), transparent 40%),
        linear-gradient(160deg, #fffefa, #eeece6);
    box-shadow: 0 18px 48px rgba(55, 47, 39, 0.14);
}

html[data-theme="light"] .detail-preview-frame {
    background:
        radial-gradient(circle at 18% 8%, rgba(255, 90, 61, 0.14), transparent 42%),
        repeating-linear-gradient(135deg, rgba(36, 31, 27, 0.026) 0 1px, transparent 1px 15px),
        linear-gradient(145deg, #d5d1ca, #efede8 72%);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.9), 0 13px 30px rgba(55, 47, 39, 0.14);
}

html[data-theme="light"] .detail-preview-frame .detail-cover {
    border-color: rgba(35, 31, 27, 0.2);
    box-shadow: 0 12px 28px rgba(55, 47, 39, 0.24), 0 0 0 1px rgba(255, 90, 61, 0.13);
}

.reader-page-body .content-frame,
.reader-page-body .page-shell,
.reader-page-body .reader-viewer-stage,
.reader-page-body .result-viewer-stage {
    background:
        radial-gradient(circle at 50% -12%, rgba(255, 90, 61, 0.2), transparent 42%),
        radial-gradient(circle at 7% 82%, rgba(123, 97, 255, 0.1), transparent 35%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 19px),
        linear-gradient(145deg, #191b23, #0e1016 72%);
}

html[data-theme="light"] .reader-page-body .content-frame,
html[data-theme="light"] .reader-page-body .page-shell,
html[data-theme="light"] .reader-page-body .reader-viewer-stage,
html[data-theme="light"] .reader-page-body .result-viewer-stage {
    background:
        radial-gradient(circle at 50% -12%, rgba(255, 90, 61, 0.17), transparent 42%),
        radial-gradient(circle at 7% 82%, rgba(111, 99, 255, 0.09), transparent 35%),
        repeating-linear-gradient(135deg, rgba(40, 34, 29, 0.025) 0 1px, transparent 1px 19px),
        linear-gradient(145deg, #e3e0da, #cfcfcf 72%);
}

.reader-page-body .reader-current-page,
.reader-page-body .protected-page-frame {
    width: 100%;
    max-width: none;
    background: transparent;
}

.reader-page-body .reader-current-page img,
.reader-page-body .protected-page-image {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: #f7f4ed;
    box-shadow: 0 24px 62px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(255, 90, 61, 0.22), 0 0 34px rgba(255, 90, 61, 0.1);
}

html[data-theme="light"] .reader-page-body .reader-current-page img,
html[data-theme="light"] .reader-page-body .protected-page-image {
    border-color: rgba(35, 31, 27, 0.24);
    box-shadow: 0 22px 54px rgba(46, 40, 34, 0.3), 0 0 0 1px rgba(255, 90, 61, 0.17), 0 0 30px rgba(255, 90, 61, 0.1);
}

.reader-page-body .reader-page-zone,
.reader-page-body .result-viewer-zone,
html[data-theme="light"] .reader-page-body .reader-page-zone,
html[data-theme="light"] .reader-page-body .result-viewer-zone {
    background: transparent;
    box-shadow: none;
}

.reader-page-body .reader-page-zone:hover,
.reader-page-body .result-viewer-zone:hover {
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent);
}

.reader-page-body .reader-page-zone-right:hover,
.reader-page-body .result-viewer-zone-right:hover {
    background: linear-gradient(-90deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent);
}

.reader-page-body .result-viewer-zone span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, rgba(255, 255, 255, 0.16));
    border-radius: 50%;
    background: color-mix(in srgb, #1d2028 88%, transparent);
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(8px);
}

.reader-page-body .reader-page-zone span,
.reader-page-body .viewer-page-status {
    border-color: color-mix(in srgb, var(--accent) 38%, rgba(255, 255, 255, 0.16));
    background: color-mix(in srgb, #1d2028 88%, transparent);
    color: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
}

html[data-theme="light"] .reader-page-body .reader-page-zone span,
html[data-theme="light"] .reader-page-body .result-viewer-zone span,
html[data-theme="light"] .reader-page-body .viewer-page-status {
    background: color-mix(in srgb, #fffdf9 91%, transparent);
    color: #25211e;
    box-shadow: 0 7px 18px rgba(55, 47, 39, 0.15);
}

@media (max-width: 760px) {
    .continue-reading-card {
        grid-template-columns: 54px minmax(0, 1fr) auto;
        gap: 0.65rem;
        padding: 0.55rem;
    }

    .continue-reading-preview {
        width: 54px;
        height: 66px;
    }

    .continue-reading-action {
        font-size: 0;
    }

    .continue-reading-action b {
        font-size: 1.2rem;
    }

    .manga-detail-single {
        width: min(620px, 100%);
    }

    .detail-preview-frame {
        height: min(58vh, 560px);
        height: min(58dvh, 560px);
        padding: 6px;
    }

    .reader-page-body .reader-current-page img,
    .reader-page-body .protected-page-image {
        border-radius: 2px;
        box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 90, 61, 0.18);
    }

    .reader-page-body .result-viewer-zone span {
        width: 36px;
        height: 36px;
        font-size: 1.8rem;
    }
}
/* Admin-managed brand tokens. These remain variable-based so custom themes do not
   bypass the light/dark mode structure or component contrast rules. */
:root {
    --theme-button: var(--accent);
    --theme-button-text: #ffffff;
    --site-background-dark: none;
    --site-background-light: none;
}

body {
    background-image:
        linear-gradient(135deg, color-mix(in srgb, var(--bg) 90%, transparent), color-mix(in srgb, var(--bg-2) 94%, transparent)),
        var(--site-background-dark);
    background-size: cover;
    background-attachment: fixed;
}

html[data-theme="light"] body {
    background-image:
        linear-gradient(135deg, color-mix(in srgb, var(--bg) 88%, transparent), color-mix(in srgb, var(--bg-2) 92%, transparent)),
        var(--site-background-light);
}

.button.primary,
.top-action.primary,
button[type="submit"]:not(.ghost):not(.reader-control-button),
input[type="submit"] {
    background: var(--theme-button);
    color: var(--theme-button-text);
}

table,
.manga-card,
.simple-card,
.detail-cover-card,
.comments-panel,
.full-height-card {
    border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
}

body.home-page::before {
    background-image:
        linear-gradient(180deg, color-mix(in srgb, var(--bg) 54%, transparent), color-mix(in srgb, var(--bg) 70%, transparent)),
        var(--site-background-dark),
        var(--home-bg-image),
        radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 18rem),
        radial-gradient(circle at 82% 22%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 21rem),
        linear-gradient(135deg, var(--bg), var(--bg-2));
    background-size: cover;
    background-position: center;
}

html[data-theme="light"] body.home-page::before {
    background-image:
        linear-gradient(180deg, color-mix(in srgb, var(--bg) 28%, transparent), color-mix(in srgb, var(--bg) 46%, transparent)),
        var(--site-background-light),
        var(--home-bg-image),
        radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 18rem),
        radial-gradient(circle at 82% 22%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 21rem),
        linear-gradient(135deg, var(--bg), var(--bg-2));
}