/* Generated by scripts/build_frontend_bundles.js (styles). Do not edit. */
/* source: public/css/variables.css */
/* Fic aliases; Core owns every shared colour and interface metric. */
:root {
    --accent: var(--brand);
    --accent-2: var(--brand-hover);
    --accent-glow: transparent;
    --accent-dim: var(--brand-soft);
    --font-reader: Georgia, 'Times New Roman', serif;
    --reader-sepia-bg: var(--katy-pale);
    --reader-sepia-text: var(--katy-ink);
    --header-bg: var(--surface);
    --sp-3: var(--space-3);
    --sp-4: var(--space-4);
    --fic-on-accent: var(--on-accent);
    --fic-muted-readable: var(--text-3);
}

/* source: public/css/base.css */
/* ── Global Reset & Base Styles ───────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    font-size: var(--fs-base);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

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

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

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

.is-hidden {
    display: none !important;
}

/* ── Header & Navigation ────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--header-bg);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-bottom: 1px solid var(--border);
    transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.logo {
    display: flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    gap: 8px;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    filter: none;
}

.logo-text {
    font-size: 19px;
    font-weight: 800;
    color: var(--brand);
    letter-spacing: -0.02em;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.nav-link {
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-2);
    transition: all var(--duration);
}

.nav-link:hover, .nav-link.active {
    background: var(--accent-dim);
    color: var(--accent);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

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

.link-accent {
    color: var(--accent);
    font-weight: 600;
}

.user-name {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-dim);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--success) 20%, transparent);
}

.user-area {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-avatar-header {
    width: 32px;
    height: 32px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: var(--white);
    background-color: var(--accent-solid);
    flex-shrink: 0;
    user-select: none;
    text-shadow: none;
    overflow: hidden;
}

.user-avatar-header img, .profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.avatar-gradient-0 { background: linear-gradient(135deg, var(--brand-solid), var(--brand-solid)) !important; }
.avatar-gradient-1 { background: linear-gradient(135deg, var(--brand-solid), var(--brand-solid)) !important; }
.avatar-gradient-2 { background: linear-gradient(135deg, var(--success-solid), var(--success-solid)) !important; }
.avatar-gradient-3 { background: linear-gradient(135deg, var(--brand-solid), var(--brand-solid)) !important; }
.avatar-gradient-4 { background: linear-gradient(135deg, var(--brand-solid), var(--brand-solid)) !important; }
.avatar-gradient-5 { background: linear-gradient(135deg, var(--success-solid), var(--success-solid)) !important; }
.avatar-gradient-6 { background: linear-gradient(135deg, var(--brand-solid), var(--brand-solid)) !important; }

.user-name {
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--text-2);
    cursor: pointer;
    transition: color var(--duration);
}
.user-name:hover {
    color: var(--accent);
    text-decoration: underline;
}

.logout-btn {
    font-size: var(--fs-xs) !important;
    padding: 4px 10px !important;
    opacity: 0.8;
}
.logout-btn:hover {
    opacity: 1;
    color: var(--danger) !important;
    background: color-mix(in srgb, var(--danger) 12%, transparent) !important;
}

/* ── Layout Containers ────────────────────────────────────────── */
.page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px 80px;
}

.page:has(.home-layout) {
    max-width: 1440px;
}

.page-narrow {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 24px 80px;
}

.page-title {
    font-size: var(--fs-2xl);
    font-weight: 900;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}

.page-subtitle {
    color: var(--text-2);
    font-size: var(--fs-base);
    margin-bottom: 32px;
}

/* ── Global Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border-radius: var(--radius-md);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--surface-2);
}

/* ── Global UI Icons ──────────────────────────────────────────── */
.ui-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

.btn-icon {
    width: 16px !important;
    height: 16px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.meta-icon {
    width: 14px !important;
    height: 14px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    color: var(--text-3);
}

.cover-icon {
    width: 36px !important;
    height: 36px !important;
    color: color-mix(in srgb, var(--white) 80%, transparent);
}

.cover-icon-large {
    width: 64px !important;
    height: 64px !important;
    color: color-mix(in srgb, var(--white) 85%, transparent);
}

.empty-state-icon {
    width: 48px !important;
    height: 48px !important;
    color: var(--text-3);
    opacity: 0.5;
}

/* ── Animations ───────────────────────────────────────────────── */
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.page {
    animation: fadeIn 0.22s ease;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .header-inner { padding: 0 16px; gap: 16px; }
    .header-nav { display: none; }
    .page { padding: 20px 16px 60px; }
    .page-narrow { padding: 20px 16px 60px; }
}

/* source: public/css/components.css */
/* ── Theme Toggle Button ────────────────────────────────────────── */
.top-icon-btn {
    background: color-mix(in srgb, var(--accent-solid) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    color: inherit;
    padding: 6px 10px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    transition: background 0.25s, border-color 0.25s;
}

.top-icon-btn:hover {
    background: color-mix(in srgb, var(--accent-solid) 22%, transparent);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}


.emoji-icon {
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.2em;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* ── Rank Badges ────────────────────────────────────────────────── */
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 20px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-2);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: var(--fs-xs);
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.rank-badge.rank-doubtful {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border-color: color-mix(in srgb, var(--danger) 28%, transparent);
}

.rank-badge.rank-confident {
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    border-color: color-mix(in srgb, var(--brand) 28%, transparent);
}

.rank-badge.rank-stable {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 12%, transparent);
    border-color: color-mix(in srgb, var(--success) 28%, transparent);
}

.rank-badge.rank-reliable {
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    border-color: color-mix(in srgb, var(--brand) 28%, transparent);
}

.rank-badge.rank-trusted {
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 14%, transparent);
    border-color: color-mix(in srgb, var(--brand) 32%, transparent);
}

.rank-badge.rank-elite {
    color: var(--katy);
    background: color-mix(in srgb, var(--katy) 16%, transparent);
    border-color: color-mix(in srgb, var(--katy) 38%, transparent);
}

.rank-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-size, 44px);
    gap: 8px;
    cursor: pointer;
}

.btn-primary {
    background: var(--accent-solid);
    border: none;
    color: var(--white);
    padding: 8px 20px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: all var(--duration);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    color: var(--text);
    padding: 8px 20px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: all var(--duration);
}

.btn-secondary:hover {
    background: var(--surface-3);
    border-color: var(--accent);
    color: var(--accent);
}

.btn-ghost {
    background: transparent;
    border: none;
    color: var(--text-2);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: all var(--duration);
}

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

.btn-danger {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent);
    color: var(--danger);
    padding: 8px 20px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: all var(--duration);
}

.btn-danger:hover { background: color-mix(in srgb, var(--danger) 18%, transparent); }

/* ── Forms & Inputs ─────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 20px; }

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

.form-label {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text-2);
}

.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-base);
    transition: border-color var(--duration);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.form-select { appearance: none; cursor: pointer; }
.form-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

.form-hint { font-size: var(--fs-xs); color: var(--text-3); }

/* ── Tabs ───────────────────────────────────────────────────────── */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 28px;
}

.tab-btn {
    padding: 10px 18px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration);
    margin-bottom: -1px;
}

.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Empty State ────────────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 24px;
    text-align: center;
}

.empty-state-icon { font-size: 48px; opacity: 0.4; }
.empty-state-title { font-size: var(--fs-lg); font-weight: 700; }
.empty-state-text { color: var(--text-2); max-width: 320px; }

.access-blocked-state { min-height: 50vh; }

.adult-confirm-copy {
    color: var(--text-2);
    line-height: 1.6;
}

.adult-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}

/* ── Modals ─────────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--black) 70%, transparent);
    backdrop-filter:none;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.15s ease;
}

.modal-box {
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px;
    position: relative;
    animation: slideUp 0.2s var(--ease);
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration);
}

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

.modal-title {
    font-size: var(--fs-xl);
    font-weight: 800;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

@media (max-width: 640px) {
    .modal-box { padding: 24px 20px; }
}

.mobile-bottom-nav { display: none; }

@media (max-width: 640px) {
    body { padding-bottom: 64px; }
    .mobile-bottom-nav {
        position: fixed;
        z-index: 90;
        inset: auto 0 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        min-height: 58px;
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid var(--border);
        background: color-mix(in srgb, var(--surface) 94%, transparent);
        backdrop-filter:none;
    }
    .mobile-bottom-nav a,
    .mobile-bottom-nav button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: 0;
        background: transparent;
        color: var(--text-2);
        font-size: 10px;
        text-decoration: none;
    }
    .mobile-bottom-nav a:hover,
    .mobile-bottom-nav button:hover { color: var(--accent); }
}

/* ── Color Picker ───────────────────────────────────────────────── */
.color-picker-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.color-swatch {
    width: var(--control-size, 44px);
    height: var(--control-size, 44px);
    flex: 0 0 var(--control-size, 44px);
    border-radius: 50%;
    border: 2px solid var(--control-border);
    cursor: pointer;
    transition: all var(--duration);
}

[hidden]:not([hidden="until-found"]) {
    display: none !important;
}

.color-swatch.selected { outline: 2px solid var(--text); outline-offset: 2px; }
.color-swatch:hover { border-color: var(--text-2); }
.color-swatch:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

/* ── Editor Toolbar ─────────────────────────────────────────────── */
.tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer;
    transition: all var(--duration);
    padding: 0;
}

.tb-btn:hover {
    background: var(--border);
    color: var(--text);
}

.tb-btn.active {
    background: var(--accent-solid);
    color: var(--white);
    border-color: var(--accent);
}

.tb-btn .btn-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer;
    transition: all var(--duration);
}

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

.btn-icon-only .btn-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── WYSIWYG Chapter Editor ─────────────────────────────────────── */
.chapter-editor {
    cursor: text;
    resize: none;
    font-family: var(--font-serif, 'Merriweather', Georgia, serif);
    font-size: 15px;
    line-height: 1.8;
    padding: 16px;
}

/* Placeholder via data-placeholder attribute */
.chapter-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--text-3);
    pointer-events: none;
}

/* Inline formatting inside the editor */
.chapter-editor strong, .chapter-editor b { font-weight: 700; }
.chapter-editor em, .chapter-editor i { font-style: italic; }
.chapter-editor del, .chapter-editor s, .chapter-editor strike { text-decoration: line-through; }
.chapter-editor blockquote {
    border-left: 3px solid var(--accent);
    margin: 8px 0;
    padding: 6px 14px;
    color: var(--text-2);
    font-style: italic;
    background: color-mix(in srgb, var(--accent-solid) 6%, transparent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ── Editor Context Menu (right-click formatting) ───────────────── */
.msg-context-menu {
    position: fixed;
    z-index: 9999;
    min-width: 160px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    padding: 4px 0;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

.msg-context-menu.is-hidden { display: none; }

.msg-fmt-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 6px 8px;
    gap: 2px;
}

.msg-fmt-btn {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px 4px;
    cursor: pointer;
    color: var(--text-2);
    font-size: 13px;
    font-family: inherit;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration), color var(--duration);
    min-width: 32px;
}

.msg-fmt-btn:hover,
.msg-fmt-btn:active {
    background: var(--surface-3);
    color: var(--text);
}

.msg-ctx-sep {
    border: none;
    border-top: 1px solid var(--border);
    margin: 3px 0;
}

.msg-ctx-item {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    padding: 9px 16px;
    text-align: left;
    font-size: var(--fs-sm);
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
    transition: background var(--duration);
    white-space: nowrap;
}

.msg-ctx-item:hover,
.msg-ctx-item:active {
    background: var(--surface-3);
}

/* ── Star Rating ────────────────────────────────────────────────── */
.star-rating {
    display: flex;
    align-items: center;
    gap: 2px;
}

.star-rating .star {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font-size: 22px;
    color: var(--text-3);
    cursor: pointer;
    transition: color 0.15s, transform 0.1s;
    line-height: 1;
    user-select: none;
}

.star-rating .star.filled,
.star-rating .star.hovered {
    color: var(--katy);
}

.star-rating .rating-star-icon {
    width: 22px;
    height: 22px;
}

.star-rating .star.filled .rating-star-icon,
.star-rating .star.hovered .rating-star-icon { fill: currentColor; }

.star-rating .star:hover {
    transform: scale(1.2);
}

.star-rating-label {
    font-size: var(--fs-sm);
    color: var(--text-2);
    margin-left: 6px;
    white-space: nowrap;
}

/* on fanfic page, the meta row with stars */
.fanfic-rating-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 4px;
    flex-wrap: wrap;
}

/* Small readonly stars shown in cards */
.stars-mini {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 13px;
    color: var(--katy);
    vertical-align: middle;
}

.stars-mini .star-empty { color: var(--text-3); }

/* ── Work-Follow Button ─────────────────────────────────────────── */
.btn-work-follow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border-2);
    background: var(--surface);
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-work-follow:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

.btn-work-follow.active {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Download Dropdown ──────────────────────────────────────────── */
.download-wrap {
    position: relative;
    display: inline-block;
}

.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border-2);
    background: var(--surface);
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-download:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

.download-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 200;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.15s, transform 0.15s;
}

.download-dropdown.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.download-dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: var(--fs-sm);
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s;
}

.download-dropdown a:hover {
    background: var(--surface-3);
    color: var(--accent);
}
.chapter-author-note {
    margin: 1.25rem 0;
    padding: 0.9rem 1rem;
    border-left: 3px solid var(--accent);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--accent-solid) 8%, transparent);
    color: var(--text-2);
}

.chapter-author-note p {
    margin: 0.35rem 0 0;
    white-space: pre-wrap;
}
.global-search-btn { display: inline-flex; align-items: center; gap: 7px; }
.global-search-btn kbd { color: var(--text-3); font-size: 10px; }

.search-palette-backdrop {
    position: fixed;
    z-index: 120;
    inset: 0;
    display: grid;
    place-items: start center;
    padding: min(14vh, 120px) 16px 16px;
    background: color-mix(in srgb, var(--black) 62%, transparent);
}
.search-palette-backdrop[hidden] { display: none; }
.search-palette {
    width: min(680px, 100%);
    max-height: 72vh;
    overflow: hidden;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.search-palette-header,
.search-palette-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.search-palette-header { justify-content: space-between; }
.search-palette-header h2 { font-size: var(--fs-lg); }
.search-palette-input-wrap input { flex: 1; border: 0; background: transparent; color: var(--text); font: inherit; outline: 0; }
.search-palette-input-wrap kbd { color: var(--text-3); font-size: var(--fs-xs); }
.search-palette-results { max-height: 52vh; overflow: auto; padding: 12px; color: var(--text-3); }
.search-palette-group + .search-palette-group { margin-top: 14px; }
.search-palette-group h3 { margin: 4px 8px 6px; color: var(--text-3); font-size: var(--fs-xs); text-transform: uppercase; }
.search-palette-result {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}
.search-palette-result:hover,
.search-palette-result:focus-visible { background: var(--accent-dim); }
.search-palette-result > span { color: var(--text-3); }

@media (max-width: 640px) {
    .global-search-btn kbd { display: none; }
    .search-palette-backdrop { padding-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
.icon-filled { fill: currentColor; }
.chapter-controls { display: flex; align-items: center; gap: 8px; margin-left: 16px; }
.chapter-controls button:disabled { opacity: 0.3; pointer-events: none; }
.fanfic-detail-pairing { margin: 12px 0; color: var(--text-2); font-size: 15px; }
.work-back-button { margin-bottom: 20px; }
.work-author-link { color: var(--accent); font-weight: 500; cursor: pointer; }
.work-stats-row { flex-wrap: wrap; gap: 8px; }
.work-badge-group { display: inline-flex; gap: 4px; }
.work-tags { margin-bottom: 16px; }
.chapter-empty-copy { padding: 16px 0; }
.series-modal-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.editor-quote-glyph { font-size: 11px; font-style: italic; }
.promoted-works { margin: 0 0 28px; padding: 18px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent-solid) 7%, var(--surface)); }
.promoted-works-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.promoted-works-heading h2 { margin: 0; font-size: var(--fs-lg); }
.promoted-works-heading span, .organic-feed-label { color: var(--text-3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.promoted-works-grid { margin: 0; }
.organic-feed-label { margin: 8px 0 12px; }
.katy-utility-copy, .katy-product-section p { color: var(--text-2); }
.katy-tip-presets, .katy-theme-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.katy-owner-products { display: grid; gap: 16px; }
.katy-product-section { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.katy-product-section h3 { margin-top: 0; }
.work-theme-aurora { --work-theme-accent: var(--brand); }
.work-theme-midnight { --work-theme-accent: var(--brand); }
.work-theme-paper { --work-theme-accent: var(--katy); }
.fanfic-card[class*="work-theme-"], .page[class*="work-theme-"] .fanfic-hero, .reader-shell[class*="work-theme-"] .reader-controls { border-color: var(--work-theme-accent); box-shadow: var(--shadow-md); }

/* source: public/css/cards.css */
/* ── Fanfic Grid & Cards ────────────────────────────────────────── */
.fanfic-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fanfic-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.22s var(--ease);
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 16px;
    position: relative;
    border-left: 6px solid var(--accent);
}

/* Direction borders */
.fanfic-card.dir-border-gen { border-left-color: var(--success); }
.fanfic-card.dir-border-het { border-left-color: var(--brand); }
.fanfic-card.dir-border-slash { border-left-color: var(--katy); }
.fanfic-card.dir-border-femslash { border-left-color: var(--brand); }
.fanfic-card.dir-border-mixed { border-left-color: var(--brand); }
.fanfic-card.dir-border-other { border-left-color: var(--success); }
.fanfic-card.dir-border-article { border-left-color: var(--neutral-5); }

.fanfic-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-glow);
    box-shadow: var(--shadow-lg);
}

.fanfic-card-cover {
    width: 140px;
    height: 190px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    position: relative;
    overflow: hidden;
}

.fanfic-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.fanfic-card-title {
    font-size: var(--fs-lg);
    font-weight: 800;
    line-height: 1.3;
    color: var(--text);
}

.fanfic-card:hover .fanfic-card-title {
    color: var(--accent);
}

.fanfic-card-badges {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.fic-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Direction Badge Backgrounds */
.fic-badge.dir-gen { background: var(--success-solid); }
.fic-badge.dir-het { background: var(--brand-solid); }
.fic-badge.dir-slash { background: var(--katy-solid); }
.fic-badge.dir-femslash { background: var(--brand-solid); }
.fic-badge.dir-mixed { background: var(--brand-solid); }
.fic-badge.dir-other { background: var(--success-solid); }
.fic-badge.dir-article { background: var(--neutral-5); }

/* Rating Badge Backgrounds */
.fic-badge.rating-g { background: var(--success-solid); }
.fic-badge.rating-pg13 { background: var(--katy-solid); }
.fic-badge.rating-r { background: var(--brand-solid); }
.fic-badge.rating-nc17 { background: var(--brand-solid); }
.fic-badge.rating-nc21 { background: var(--brand-solid); }

.fic-badge.badge-likes {
    background: color-mix(in srgb, var(--katy) 10%, transparent);
    color: var(--katy);
    border: 1px solid color-mix(in srgb, var(--katy) 25%, transparent);
}

.fic-badge.badge-hot {
    background: color-mix(in srgb, var(--katy) 15%, transparent);
    color: var(--katy);
    border: 1px solid color-mix(in srgb, var(--katy) 30%, transparent);
}

.fanfic-card-meta-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--text-2);
}

.fanfic-card-meta-item {
    line-height: 1.5;
}

.fanfic-card-meta-item strong {
    color: var(--text-3);
    margin-right: 4px;
}

.fanfic-card-meta-item span.link-profile {
    color: var(--accent);
    cursor: pointer;
    font-weight: 600;
}

.fanfic-card-meta-item span.link-profile:hover {
    text-decoration: underline;
}

.pairing-highlight {
    background: color-mix(in srgb, var(--katy) 16%, transparent);
    color: var(--katy);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}


.tag-pill-sm {
    font-size: 11px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text-2);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    display: inline-block;
    margin-right: 2px;
    margin-bottom: 2px;
}

button.tag-pill-sm,
.card-filter-link {
    border: 0;
    cursor: pointer;
    font: inherit;
}

.card-filter-link { background: transparent; color: var(--accent); padding: 0; }
.fanfic-card-progress { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; margin-top: 6px; }
.fanfic-card-progress progress,
.work-progress { accent-color: var(--accent); width: 100%; height: 8px; }
.fanfic-card-review {
    margin: 10px 0 0;
    padding: 9px 12px;
    border-left: 3px solid var(--accent);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: var(--fs-xs);
    line-height: 1.5;
    max-height: 5.5em;
    overflow: hidden;
}

.card-separator {
    border-top: 1px dashed var(--border-2);
    margin: 8px 0;
    width: 100%;
    opacity: 0.8;
}

.fanfic-card-summary {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.6;
    max-height: 6.4em; /* 4 lines: line-height 1.6 * 4 */
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
}

.status-ongoing  { background: color-mix(in srgb, var(--success) 12%, transparent);  color: var(--success); }
.status-complete { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--accent); }
.status-hiatus   { background: color-mix(in srgb, var(--neutral-5) 12%, transparent); color: var(--neutral-5); }

.fanfic-card-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    font-size: 12px;
    color: var(--text-3);
    flex-wrap: wrap;
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.meta-date {
    margin-left: auto;
}

/* Rating Chips */
.rating-general  { color: var(--success); }
.rating-teen     { color: var(--brand); }
.rating-mature   { color: var(--katy); }
.rating-explicit { color: var(--danger); }

@media (max-width: 640px) {
    .fanfic-cover-large { width: 140px; height: 190px; font-size: 48px; }
}

/* source: public/css/reader.css */
/* ── Fanfic Detail View ────────────────────────────────────────── */
.fanfic-hero {
    display: flex;
    gap: 32px;
    margin-bottom: 40px;
    align-items: flex-start;
}

.fanfic-cover-large {
    width: 180px;
    height: 240px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    box-shadow: var(--shadow-lg);
}

.fanfic-info { flex: 1; min-width: 0; }

.fanfic-title {
    overflow-wrap: anywhere;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin-bottom: 8px;
}

.fanfic-author {
    font-size: var(--fs-base);
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 16px;
}

.fanfic-stats-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.fanfic-summary {
    overflow-wrap: anywhere;
    font-size: var(--fs-base);
    color: var(--text-2);
    line-height: 1.7;
    margin-bottom: 20px;
    white-space: pre-wrap;
}

.fanfic-action-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .fanfic-hero { flex-direction: column; }
}

/* Work landing: reading leads, disclosures hold secondary controls. */
.page.work-detail { max-width: 980px; margin-inline: auto; }
.work-detail .work-back-button { margin-bottom: 16px; }
.work-detail .fanfic-hero { margin-bottom: 28px; gap: 28px; }
.work-detail .fanfic-author { margin-bottom: 14px; }
.work-classification { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; }
.work-classification .fandom-badge { font-size: 13px; }
.work-detail .work-stats-row { align-items: center; gap: 8px 16px; margin-bottom: 20px; color: var(--text-3); font-size: 12px; }
.work-detail .work-stats-row .meta-chip { font-size: inherit; font-weight: 500; }
.work-detail .fanfic-summary { max-width: 68ch; margin-bottom: 12px; font-size: 15px; line-height: 1.7; }
.work-detail .work-tags { margin-bottom: 8px; }
.work-detail .fanfic-rating-row { gap: 12px; margin: 0 0 12px; }
.work-rating-average { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.work-rating-average > .meta-icon { color: var(--accent); }
.work-rating-average .star-rating-label { margin: 0; color: var(--text-2); font-size: 12px; }
.work-rating-picker, .work-more { position: relative; }
.work-rating-picker > summary { display: flex; align-items: center; min-height: 44px; padding: 6px; color: var(--accent); font-size: 12px; cursor: pointer; }
.work-rating-picker > summary, .work-more > summary { list-style: none; }
.work-rating-picker > summary::-webkit-details-marker, .work-more > summary::-webkit-details-marker { display: none; }
.work-rating-options, .work-more-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    padding: 12px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    box-shadow: var(--shadow-lg);
}
.work-rating-options { width: 254px; max-width: calc(100vw - 28px); }
.work-rating-caption { display: block; margin: 0 4px 4px; color: var(--text-2); font-size: 12px; }
.work-rating-picker .star-rating .star.filled { color: var(--accent); }
.work-reading-action { max-width: 520px; margin-bottom: 8px; }
.work-read-button { width: 100%; min-height: 48px; text-decoration: none; }
.work-detail .fanfic-action-row { align-items: center; gap: 6px; max-width: 520px; }
.work-detail .fanfic-action-row > button { flex: 1; min-height: 44px; padding: 10px 12px; font-size: 13px; white-space: nowrap; }
.work-detail .fanfic-action-row > .work-like { flex: 0 1 auto; }
.work-like { gap: 6px; }
.work-like.active { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-dim); }
.work-more > summary { width: 44px; height: 44px; padding: 10px; justify-content: center; cursor: pointer; }
.work-more > summary > [aria-hidden] { font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: 1px; }
.work-more[open] > summary { border-color: var(--accent); }
.work-more-menu { width: 280px; max-width: calc(100vw - 28px); padding: 6px; }
.work-more-menu > button, .work-more-menu .btn-download {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-2);
    text-align: left;
    white-space: normal;
    font-size: 13px;
}
.work-more-menu > button:hover, .work-more-menu .btn-download:hover { background: var(--surface-3); color: var(--text); }
.work-more-menu .download-wrap { display: block; }
.work-more-menu .download-dropdown { position: static; min-width: 0; margin-top: 4px; box-shadow: none; }
.work-author-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border); }
.work-author-actions .btn-ghost { font-size: 12px; }
.work-detail #work-action-feedback:empty { display: none; }
.work-detail #work-action-feedback { margin-top: 10px; color: var(--text-2); font-size: 13px; }
.work-chapters { padding-top: 22px; border-top: 1px solid var(--border); }
.work-detail .work-chapters .section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.work-section-count { color: var(--text-3); font-size: 13px; font-weight: 500; }
.work-detail .chapter-list { margin-bottom: 28px; }
.work-detail .work-discussion-tabs { margin-top: 0; }
.work-detail .work-collections { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.work-collection-editor > summary { min-height: 44px; padding-block: 10px; color: var(--text-2); font-size: 13px; cursor: pointer; }
.work-detail .work-collection-add > :is(select, input) { min-width: 0; max-width: 100%; }

@media (max-width: 640px) {
    .work-detail .fanfic-cover-large { width: 108px; height: 144px; }
    .work-detail .fanfic-hero { gap: 16px; }
    .work-detail .fanfic-info { width: 100%; }
    .work-like-label { display: none; }
    .work-detail .fanfic-action-row > button { padding-inline: 10px; font-size: 12px; }
}

@media (max-width: 360px) {
    .work-detail .fanfic-action-row > :is(#btn-bookmark, #btn-share-public) .btn-icon { display: none; }
    .work-detail .fanfic-action-row > button { padding-inline: 8px; }
}

/* ── Chapter List ───────────────────────────────────────────────── */
.section-title {
    font-size: var(--fs-xl);
    font-weight: 800;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.chapter-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 40px;
}

.chapter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all var(--duration);
}

.chapter-row:hover {
    background: var(--surface-2);
    border-color: var(--accent-dim);
    transform: translateX(4px);
}

.chapter-num {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--accent);
    width: 32px;
    flex-shrink: 0;
}

.chapter-title-text { flex: 1; font-weight: 600; }

.chapter-wc {
    font-size: var(--fs-xs);
    color: var(--text-3);
    flex-shrink: 0;
}

.chapter-row.is-read {
    border-left: 3px solid var(--accent);
    opacity: 0.85;
}

.chapter-read-status {
    font-size: var(--fs-xs);
    color: var(--accent);
    margin-left: auto;
    margin-right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.work-breadcrumbs { margin-bottom: 16px; }
.series-chip { border: 0; background: transparent; color: var(--accent); cursor: pointer; }
.work-progress-label { white-space: nowrap; }
.work-progress { max-width: 140px; }

.work-discussion-tabs { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 32px 0 20px; border-bottom: 1px solid var(--border); }
.work-discussion-tab {
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    overflow-wrap: anywhere;
    white-space: normal;
    padding: 10px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}
.work-discussion-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 640px) {
    .fanfic-info,
    .fanfic-author,
    .fanfic-action-row { min-width: 0; max-width: 100%; }
    .fanfic-info :is(.link-profile, .fandom-badge, .btn-work-follow),
    .fanfic-action-row > :is(button, a) {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

.chapter-row-link {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 12px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.chapter-row-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (max-width: 420px) {
    .chapter-row-link { flex-wrap: wrap; gap: 8px; }
}
.work-comments-note,
.empty-inline { color: var(--text-3); font-size: var(--fs-sm); }
.review-card { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.review-card + .review-card { margin-top: 10px; }
.review-card header { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: var(--fs-xs); }
.review-card time { margin-left: auto; }
.review-card .link-profile { border: 0; background: transparent; color: var(--accent); cursor: pointer; }
.review-card p { margin-top: 10px; color: var(--text-2); white-space: pre-wrap; }

/* ── Reader ────────────────────────────────────────────────────── */
.reader-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    padding: 12px 20px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-lg);
    gap: 12px;
    flex-wrap: wrap;
    /* Always dark panel — lock text colors regardless of reader theme below */
    color: var(--text);
}

.reader-title-info { min-width: 0; flex: 1; }

.reader-fanfic-name {
    font-size: var(--fs-sm);
    color: var(--text-2);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reader-chapter-title {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reader-meta-row {
    display: flex;
    gap: 12px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.reader-meta-item {
    font-size: var(--fs-xs);
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.reader-nav {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.reader-font-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.reader-theme-selector {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.theme-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-weight: 700;
    font-size: var(--fs-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration);
}

.theme-btn-dark { background: var(--neutral-2); color: var(--neutral-7); border-color: color-mix(in srgb, var(--white) 15%, transparent); }
.theme-btn-light { background: var(--white); color: var(--neutral-0); border-color: color-mix(in srgb, var(--black) 15%, transparent); }
.theme-btn-sepia { background: var(--neutral-8); color: var(--danger); border-color: color-mix(in srgb, var(--black) 10%, transparent); }
.theme-btn.active { border-color: var(--accent); box-shadow: var(--shadow-md); }

/* Theme backgrounds and font overrides inside page-narrow */
.reader-theme-dark {
    /* Warm charcoal — book-reading night standard (Kindle / Litres dark) */
    background: var(--neutral-2) !important;
    color: var(--neutral-7) !important;
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-lg);
    border: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    transition: background-color var(--duration), color var(--duration);
}

.reader-theme-dark .reader-content {
    /* Warm cream — easier on eyes for long reading sessions */
    color: var(--neutral-7) !important;
}

.reader-theme-dark .reader-fanfic-name {
    color: var(--neutral-6) !important;
}

.reader-theme-dark .reader-chapter-title {
    color: var(--neutral-7) !important;
}

.reader-theme-dark .reader-meta-item {
    color: var(--neutral-5) !important;
}

.reader-theme-light {
    background: var(--white) !important;
    color: var(--neutral-0) !important;
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--neutral-8);
    transition: background-color var(--duration), color var(--duration);
}

.reader-theme-light .reader-content {
    color: var(--neutral-0) !important;
}

.reader-theme-light .reader-fanfic-name,
.reader-theme-light .reader-chapter-title,
.reader-theme-light .reader-meta-item {
    color: var(--neutral-2) !important;
}

.reader-theme-light .reader-meta-item .meta-icon {
    color: var(--neutral-4) !important;
}

.reader-theme-sepia {
    background: var(--neutral-8) !important;
    color: var(--danger) !important;
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--neutral-8);
    transition: background-color var(--duration), color var(--duration);
}

.reader-theme-sepia .reader-content {
    color: var(--danger) !important;
}

.reader-theme-sepia .reader-fanfic-name,
.reader-theme-sepia .reader-chapter-title,
.reader-theme-sepia .reader-meta-item {
    color: var(--danger) !important;
}

.reader-theme-sepia .reader-meta-item .meta-icon {
    color: var(--danger) !important;
}

.font-size-btn {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration);
}

.font-size-btn:hover { border-color: var(--accent); color: var(--accent); }

.reader-content {
    font-family: var(--font-reader);
    font-size: 18px;
    line-height: 1.9;
    color: var(--neutral-8);
    max-width: 700px;
    margin: 0 auto;
}

.reader-content p {
    margin-bottom: 1.5em;
    text-indent: 2em;
}

.reader-content p:first-child { text-indent: 0; }

:is(.reader-content, .chapter-editor) p.chapter-heading {
    margin: 1.7em 0 .65em;
    font-size: 1.18em;
    font-weight: 700;
    line-height: 1.4;
    text-indent: 0;
    overflow-wrap: anywhere;
}

:is(.reader-content, .chapter-editor) p.chapter-list-bullet,
:is(.reader-content, .chapter-editor) p.chapter-list-numbered {
    position: relative;
    min-width: 0;
    margin-bottom: .55em;
    padding-inline-start: 1.65em;
    text-indent: 0;
    overflow-wrap: anywhere;
}

:is(.reader-content, .chapter-editor) p.chapter-list-bullet::before,
:is(.reader-content, .chapter-editor) p.chapter-list-numbered::before {
    position: absolute;
    inset-inline-start: 0;
    width: 1.35em;
    color: color-mix(in srgb, currentColor 78%, transparent);
    text-align: right;
}

:is(.reader-content, .chapter-editor) p.chapter-list-bullet::before { content: '•'; }
:is(.reader-content, .chapter-editor) p.chapter-list-numbered { counter-increment: chapter-list-item; }
:is(.reader-content, .chapter-editor) :not(.chapter-list-numbered) + p.chapter-list-numbered,
:is(.reader-content, .chapter-editor) p.chapter-list-numbered:first-child { counter-reset: chapter-list-item; }
:is(.reader-content, .chapter-editor) p.chapter-list-numbered::before { content: counter(chapter-list-item) '.'; }

:is(.reader-content, .chapter-editor) u {
    text-decoration-color: color-mix(in srgb, currentColor 70%, transparent);
    text-underline-offset: .13em;
}

.reader-progress-track {
    position: fixed;
    z-index: 80;
    inset: 0 0 auto;
    height: 3px;
    background: transparent;
}

.reader-progress-value {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--accent-solid);
    transform: scaleX(0);
    transform-origin: left;
}

.reader-shell { max-width: 1180px; margin: 0 auto; }

.reader-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--text-3);
    font-size: var(--fs-sm);
    overflow-x: auto;
}

.reader-crumb-link,
.reader-filter-link,
.reader-toc-link {
    border: 0;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
}

.reader-layout {
    display: grid;
    grid-template-columns: minmax(190px, 240px) minmax(0, 760px);
    justify-content: center;
    gap: 24px;
    align-items: start;
}

.reader-toc {
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 104px);
    overflow: auto;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.reader-toc-heading { margin-bottom: 10px; font-weight: 800; }
.reader-toc select { width: 100%; margin-bottom: 12px; }
.reader-toc-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.reader-toc-link { width: 100%; padding: 7px 8px; text-align: left; color: var(--text-2); border-radius: var(--radius-sm); }
.reader-toc-link:hover,
.reader-toc-link.active { color: var(--accent); background: var(--accent-dim); }

.reader-context-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.reader-context-links .reader-filter-link:first-child { font-weight: 700; }

.reader-help-wrap { position: relative; }
.reader-help {
    position: absolute;
    z-index: 20;
    right: 0;
    top: calc(100% + 8px);
    display: grid;
    gap: 7px;
    width: 220px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    box-shadow: var(--shadow-lg);
    color: var(--text-2);
    font-size: var(--fs-xs);
}
.reader-help[hidden] { display: none; }
.reader-help kbd { padding: 2px 5px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface-3); }

@media (max-width: 900px) {
    .reader-layout { grid-template-columns: 1fr; }
    .reader-toc { position: static; max-height: 220px; }
    .reader-toc-list { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .reader-progress-value,
    .reader-controls,
    .reader-toc-link { transition: none; }
}
.reader-bottom-navigation { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 40px; }
.reader-finished-copy { padding: 8px 0; color: var(--text-3); font-size: 13px; }
.reader-discussion { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border); }
.reader-discussion-title { margin-bottom: 20px; }
.reader-comment-list { margin-bottom: 24px; }
.reader-comment-submit { align-self: flex-end; }

/* source: public/css/comments.css */
/* ── Comments ───────────────────────────────────────────────────── */
.comment-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }

.comment-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
}

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

.comment-author {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--accent);
}

.comment-rank-badge {
    min-height: 18px;
    padding: 1px 6px;
    font-size: 10px;
}

.comment-date { font-size: var(--fs-xs); color: var(--text-3); margin-left: auto; }
.comment-text { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6; overflow-wrap: anywhere; }

.comment-form { display: flex; flex-direction: column; gap: 10px; }

.comment-textarea {
    width: 100%;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-sm);
    resize: vertical;
    min-height: 80px;
    transition: border-color var(--duration);
}

.comment-textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--accent); }

/* ── Comment Reply Threading ─────────────────────────────────────── */
.comment-card-wrapper {
    margin-bottom: 16px;
}

.comment-card-wrapper .comment-card-wrapper {
    margin-top: 12px;
    margin-bottom: 0;
}

.comment-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.btn-comment-reply {
    min-height: var(--control-size, 44px);
    background: transparent;
    border: none;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: all var(--duration);
}

.btn-comment-reply:hover {
    background: var(--surface-2);
    color: var(--accent);
}

.reply-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.reply-textarea {
    width: 100%;
    min-height: 60px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 8px;
    font-size: 13px;
    resize: vertical;
    outline: none;
}

.reply-textarea:focus {
    border-color: var(--accent);
}
.reply-textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.reply-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Comment Pagination ─────────────────────────────────────────── */
.btn-load-more-comments {
    display: flex;
    width: fit-content;
    min-height: var(--control-size, 44px);
    align-items: center;
    gap: 6px;
    margin: 16px auto 0;
    padding: 8px 20px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration);
}

.btn-load-more-comments:hover:not(:disabled) {
    background: var(--surface-2);
    border-color: var(--accent);
    color: var(--accent);
}

.btn-load-more-comments:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.comment-depth-1 { margin-left: 16px; padding-left: 12px; border-left: 2px solid var(--border-2); }
.comment-depth-2 { margin-left: 32px; padding-left: 12px; border-left: 2px solid var(--border-2); }
.comment-depth-3 { margin-left: 48px; padding-left: 12px; border-left: 2px solid var(--border-2); }
.comment-depth-4 { margin-left: 64px; padding-left: 12px; border-left: 2px solid var(--border-2); }

@media (max-width: 620px) {
    .comment-depth-1 { margin-left: 8px; padding-left: 8px; }
    .comment-depth-2 { margin-left: 16px; padding-left: 8px; }
    .comment-depth-3 { margin-left: 24px; padding-left: 8px; }
    .comment-depth-4 { margin-left: 32px; padding-left: 8px; }
}

/* source: public/css/profile.css */
/* ── Profile identity and cover ─────────────────────────────────── */
.profile-page {
    --profile-section-gap: clamp(24px, 4vw, 40px);
}

.profile-header {
    position: relative;
    display: block;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface);
}

.profile-header:not([data-profile-cover]),
.profile-header[data-profile-cover="none"] {
    background-image:
        linear-gradient(90deg,
            color-mix(in srgb, var(--bg) 90%, transparent),
            color-mix(in srgb, var(--bg) 75%, transparent)),
        var(--scene-profile);
    background-position: center, center 45%;
    background-size: cover;
}

.profile-hero-main {
    min-height: 188px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 52px);
    padding: clamp(24px, 4vw, 34px);
}

.profile-identity-cluster {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 30px);
}

.profile-avatar-wrap {
    --katomu-avatar-size: 104px;
    width: var(--katomu-avatar-size);
    height: var(--katomu-avatar-size);
    flex: 0 0 var(--katomu-avatar-size);
}

.profile-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid color-mix(in srgb, var(--profile-custom-accent, var(--accent)) 62%, white);
    border-radius: var(--radius-full);
    background: var(--accent-dim);
}

.profile-avatar.has-image {
    border-color: color-mix(in srgb, var(--white) 20%, transparent);
}

.avatar-letter {
    color: var(--white);
    font-size: 34px;
    font-weight: 800;
    text-shadow: none;
}

.profile-info-block {
    min-width: 0;
    flex: 1 1 auto;
}

.profile-name-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.profile-nickname {
    max-width: min(100%, 560px);
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 850;
    line-height: 1.08;
    letter-spacing: -0.035em;
    white-space: normal;
}

.profile-meta-secondary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 10px;
    color: var(--text-3);
    font-size: 13px;
}

.profile-username {
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
}

.profile-header[data-profile-cover]:not([data-profile-cover="none"]) .profile-username,
.profile-header[data-profile-cover]:not([data-profile-cover="none"]) .profile-meta-secondary,
.profile-header[data-profile-cover]:not([data-profile-cover="none"]) .profile-rank-row .rank-badge {
    color: var(--text);
}

.profile-rank-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.profile-rank-icon {
    width: 15px;
    height: 15px;
    color: var(--profile-custom-accent, var(--accent));
}

.profile-rank-row .rank-badge {
    color: var(--text-2);
    font-weight: 700;
}

.profile-bio {
    max-width: 64ch;
    margin: 14px 0 0;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.55;
}

.profile-owner-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.profile-owner-action {
    min-height: var(--control-size, 44px);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.profile-logout-action {
    border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--border));
    color: var(--danger);
}

.profile-stats-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 clamp(18px, 3vw, 28px) clamp(18px, 3vw, 26px);
    padding-top: 18px;
    border-top: 1px solid color-mix(in srgb, var(--border-2) 72%, transparent);
}

.profile-stat-box {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-2) 86%, transparent);
}

.profile-stat-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--profile-custom-accent, var(--accent));
}

.profile-stat-copy,
.profile-stat-val,
.profile-stat-lbl {
    display: block;
}

.profile-stat-val {
    overflow: hidden;
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    text-overflow: ellipsis;
}

.profile-stat-lbl {
    margin-top: 3px;
    color: var(--text-3);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.link-profile {
    cursor: pointer;
    transition: color var(--duration);
}

.link-profile:hover {
    color: var(--accent) !important;
    text-decoration: underline;
}

/* ── Notifications ──────────────────────────────────────────────── */
.notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--brand-solid);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: var(--shadow-md);
    transition: transform var(--duration);
}

.notification-item {
    display: flex;
    gap: 16px;
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    align-items: flex-start;
    transition: transform var(--duration), background var(--duration);
}

.notification-item.unread {
    background: var(--accent-dim);
    border-left: 3px solid var(--accent);
}

.notification-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    flex-shrink: 0;
}

.notification-item.unread .notification-icon {
    background: var(--accent-solid);
    color: var(--white);
}

.notification-content-box {
    flex-grow: 1;
}

.notification-text {
    font-size: var(--fs-sm);
    color: var(--text);
    line-height: 1.5;
}

.notification-time {
    font-size: var(--fs-xs);
    color: var(--text-3);
    margin-top: 4px;
}

.nav-notifications {
    display: inline-flex !important;
    align-items: center;
    position: relative;
    margin-right: 16px;
    padding: 6px 10px;
}

.nav-notifications.is-hidden {
    display: none !important;
}

.nav-notifications span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}
.fic-katy-badge { gap: 5px; width: auto; min-width: 52px; padding-inline: 9px; color: var(--accent); font-variant-numeric: tabular-nums; }
.fic-katy-badge .meta-icon { width: 17px; height: 17px; }

/* ── Profile sections and owner workspace ───────────────────────── */
.profile-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.profile-section-heading h2 {
    margin: 3px 0 0;
    color: var(--text);
    font-size: clamp(21px, 3vw, 28px);
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.profile-section-heading p {
    max-width: 680px;
    margin: 7px 0 0;
    color: var(--text-3);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.profile-section-kicker {
    color: var(--profile-custom-accent, var(--accent));
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.profile-owner-dashboard {
    margin-top: var(--profile-section-gap);
    padding: clamp(18px, 3vw, 24px);
    border: 1px solid var(--border);
    border-radius: var(--fic-panel-radius, var(--radius-lg));
    background: var(--surface);
}

.profile-owner-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.72fr);
    gap: 14px;
}

.profile-owner-shortcuts {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.profile-owner-shortcut {
    min-width: 0;
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.profile-owner-shortcut:hover,
.profile-owner-shortcut:focus-visible {
    border-color: color-mix(in srgb, var(--profile-custom-accent, var(--accent)) 56%, var(--border));
    background: var(--surface-3);
}

.profile-owner-shortcut.is-primary {
    border-color: color-mix(in srgb, var(--profile-custom-accent, var(--accent)) 42%, var(--border));
    background: color-mix(in srgb, var(--profile-custom-accent, var(--accent-solid)) 12%, var(--surface-2));
}

.profile-owner-shortcut .meta-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--profile-custom-accent, var(--accent));
}

.profile-owner-shortcut strong,
.profile-owner-shortcut small {
    display: block;
}

.profile-owner-shortcut strong {
    font-size: 13px;
}

.profile-owner-shortcut small {
    margin-top: 3px;
    color: var(--text-3);
    font-size: 11px;
    line-height: 1.3;
}

.profile-panel-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--profile-custom-accent, var(--accent));
}

.fic-katy-panel {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon copy" "actions actions";
    align-content: center;
    gap: 8px 10px;
    margin: 0;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--profile-custom-accent, var(--accent)) 24%, var(--border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--profile-custom-accent, var(--accent-solid)) 7%, var(--surface-2));
}

.fic-katy-panel > .profile-panel-icon { grid-area: icon; }
.fic-katy-copy { grid-area: copy; min-width: 0; }
.fic-katy-panel h2 { margin: 0 0 4px; color: var(--text); font-size: var(--fs-base); }
.fic-katy-hint { margin: 0; color: var(--text-3); font-size: 11px; line-height: 1.35; }
.fic-katy-panel-actions { grid-area: actions; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 7px; }
.fic-katy-panel-actions .btn-secondary { min-height: 38px; padding: 7px 13px; text-decoration: none; }
.fic-katy-panel-value { color: var(--profile-custom-accent, var(--accent)); font-size: 22px; font-variant-numeric: tabular-nums; }

.profile-content-section,
.profile-private-area {
    margin-top: var(--profile-section-gap);
}

.profile-library-heading {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.profile-series-section {
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.profile-subsection-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.profile-subsection-heading h3 {
    margin: 0;
    font-size: var(--fs-base);
}

.profile-subsection-heading > span {
    color: var(--text-3);
    font-size: var(--fs-xs);
}

.profile-series-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-series-list .series-link {
    min-height: 38px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    text-decoration: none;
}

.profile-series-list .series-link span {
    color: var(--profile-custom-accent, var(--accent));
    font-variant-numeric: tabular-nums;
}

.profile-history-grid,
.profile-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.profile-settings-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    margin-top: 14px;
}

.fic-reputation-history {
    min-width: 0;
    margin: 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--fic-panel-radius, var(--radius-lg));
    background: var(--surface);
}

.fic-reputation-history-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.fic-reputation-history-heading h2 { margin: 0 0 5px; font-size: var(--fs-base); }
.fic-reputation-history-heading p,
.fic-reputation-history-status { margin: 0; color: var(--text-3); font-size: var(--fs-sm); }
.fic-reputation-history-status { margin-top: 14px; }
.fic-reputation-history-status.is-error { color: var(--danger); }
.fic-reputation-history-list { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.fic-reputation-history-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-2); }
.fic-reputation-history-main { display: flex; min-width: 0; flex-direction: column; gap: 3px; color: var(--text-2); font-size: var(--fs-sm); }
.fic-reputation-history-time { color: var(--text-3); font-size: var(--fs-xs); }
.fic-reputation-history-delta { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.fic-reputation-history-delta.is-positive { color: var(--accent); }
.fic-reputation-history-delta.is-negative { color: var(--danger); }
.fic-profile-customization-editor {
    min-width: 0;
    margin: 0;
    padding: 20px;
    border-radius: var(--fic-panel-radius, var(--radius-lg));
    background: var(--surface);
}
.fic-profile-customization-editor h2 { margin: 0; font-size: var(--fs-lg); }
.fic-customization-copy { margin: 8px 0 18px; color: var(--text-3); font-size: var(--fs-sm); }
.profile-customization-editor-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.fic-customization-status { color: var(--text-3); font-size: var(--fs-sm); }

.profile-account-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--fic-panel-radius, var(--radius-lg));
    background: var(--surface);
}

.profile-account-heading {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.profile-account-heading h2 {
    margin: 0;
    font-size: var(--fs-lg);
}

.profile-account-heading p {
    margin: 6px 0 0;
    color: var(--text-3);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.profile-account-link {
    width: 100%;
    min-height: var(--control-size, 44px);
    text-decoration: none;
}

.profile-danger-zone {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--danger) 26%, var(--border));
}

.profile-danger-zone > span {
    color: var(--danger);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.profile-danger-zone [data-katomu-account-erasure] {
    margin-top: 10px;
}

.profile-danger-zone .katomu-erasure-open {
    width: 100%;
}

.follow-card { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; }
.follow-card-avatar { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-dim); color: var(--accent); font-size: 16px; font-weight: 700; }
.follow-card-name { color: var(--text); font-size: 15px; font-weight: 600; }
.follow-card-caption { color: var(--text-3); font-size: 12px; }
.personal-list-spacing { margin-top: 20px; }
.personal-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin-top: 24px; }
.personal-stat-card { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); text-align: center; }
.personal-stat-value { color: var(--accent); font-size: 32px; font-weight: 800; line-height: 1; }
.personal-stat-label { margin-top: 8px; color: var(--text-3); font-size: 13px; font-weight: 500; }
.personal-comment-card { margin-bottom: 16px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.personal-comment-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.personal-comment-author { color: var(--accent); font-weight: 600; cursor: pointer; }
.personal-comment-date { color: var(--text-3); font-size: 12px; }
.personal-comment-text { color: var(--text-2); font-size: 14px; line-height: 1.5; }
.personal-comment-work { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-2); color: var(--text-3); font-size: 12px; }
.personal-comment-work-link { color: var(--text); font-weight: 500; text-decoration: none; }

@media (max-width: 900px) {
    .profile-hero-main {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .profile-owner-actions {
        justify-content: flex-start;
    }

    .profile-owner-dashboard-grid,
    .profile-history-grid,
    .profile-settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .profile-page {
        --profile-section-gap: 24px;
    }

    .profile-header {
        border-radius: 0;
    }

    .profile-hero-main {
        min-height: 0;
        align-items: stretch;
        padding: 24px 18px 18px;
    }

    .profile-identity-cluster {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .profile-avatar-wrap {
        --katomu-avatar-size: 92px;
    }

    .profile-name-badges,
    .profile-meta-secondary {
        justify-content: center;
    }

    .profile-nickname {
        max-width: calc(100vw - 72px);
        font-size: clamp(26px, 9vw, 34px);
    }

    .profile-bio {
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }

    .profile-owner-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .profile-owner-actions:has(> :only-child) {
        grid-template-columns: 1fr;
    }

    .profile-owner-action {
        min-width: 0;
        width: 100%;
        padding-inline: 10px;
    }

    .profile-stats-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 0 12px 12px;
        padding-top: 12px;
    }

    .profile-stat-box {
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        padding: 9px 5px;
        text-align: center;
    }

    .profile-stat-icon {
        width: 16px;
        height: 16px;
    }

    .profile-stat-val {
        font-size: 15px;
    }

    .profile-owner-dashboard,
    .fic-reputation-history,
    .fic-profile-customization-editor,
    .profile-account-panel {
        padding: 16px;
    }

    .profile-section-heading,
    .fic-reputation-history-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-owner-shortcuts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-owner-shortcut {
        min-height: 82px;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .profile-customization-editor-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 380px) {
    .profile-owner-shortcuts {
        grid-template-columns: 1fr;
    }

    .profile-owner-shortcut {
        min-height: 66px;
        align-items: center;
        flex-direction: row;
    }

    .profile-stat-lbl {
        font-size: 9px;
        letter-spacing: 0.04em;
    }
}

/* source: public/css/sidebar.css */
/* ── Home Page 3-Column Layout & Sidebars ───────────────────────── */
.home-layout {
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    gap: 24px;
    align-items: start;
    margin-top: 24px;
}

.home-left-sidebar {
    position: sticky;
    top: 84px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    min-height: calc(100vh - 120px);
}

.mobile-personal-close,
.mobile-personal-backdrop { display: none; }

.home-main {
    min-height: calc(100vh - 120px);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
}

.home-right-sidebar {
    position: sticky;
    top: 84px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (max-width: 1200px) {
    .home-layout {
        grid-template-columns: 260px 1fr;
        gap: 20px;
    }
    .home-left-sidebar {
        border: 1px solid var(--border);
        padding: 20px;
        position: sticky;
        top: 84px;
        min-height: calc(100vh - 120px);
    }
    .home-main {
        padding: 24px;
    }
    .home-right-sidebar {
        position: static;
        grid-column: span 2;
        border: 1px solid var(--border);
        padding: 20px;
        margin-top: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .home-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .home-left-sidebar {
        position: fixed;
        z-index: 111;
        inset: 0 auto 0 0;
        width: min(86vw, 340px);
        min-height: 100vh;
        padding: 56px 20px 24px;
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform var(--duration) var(--ease);
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    }
    .home-left-sidebar.mobile-open { transform: translateX(0); }
    .mobile-personal-close { display: inline-flex; position: absolute; top: 14px; right: 14px; }
    .mobile-personal-backdrop {
        position: fixed;
        z-index: 110;
        inset: 0;
        display: block;
        width: 100%;
        border: 0;
        background: color-mix(in srgb, var(--black) 55%, transparent);
    }
    .mobile-personal-backdrop[hidden] { display: none; }
    .home-main {
        padding: 16px;
    }
    .home-right-sidebar {
        grid-column: span 1;
        position: static;
        min-height: auto;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
}

/* Nested sidebar box overrides */
.home-left-sidebar .sidebar-box,
.home-right-sidebar .sidebar-box {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

.home-right-sidebar .sidebar-box {
    border-bottom: 1px solid var(--border-2) !important;
    padding-bottom: 20px !important;
}

.home-right-sidebar .sidebar-box:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* Middle column nested cards contrast styling */
.home-main .hero-search-filter-box {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-md) !important;
}

.home-main .fanfic-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
}

/* ── Personal Menu (Left Column) ────────────────────────────────── */
.personal-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.personal-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-2);
    transition: all var(--duration) var(--ease);
}

.personal-link:hover {
    background: var(--accent-dim);
    color: var(--accent);
    transform: translateX(4px);
}

.personal-divider {
    height: 1px;
    background: var(--border-2);
    margin: 12px 0;
}

.personal-subtitle {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
    margin-bottom: 6px;
    padding-left: 12px;
}

/* ── Generic Sidebar Box & Item (e.g. Recently Updated) ─────────── */
.sidebar-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 24px;
}

.sidebar-box-title {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.sidebar-item {
    display: flex;
    flex-direction: column;
    min-height: var(--control-size, 44px);
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-2);
    cursor: pointer;
    transition: all var(--duration);
}

.sidebar-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-item:hover .sidebar-item-title {
    color: var(--accent);
}

.sidebar-item-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    transition: color var(--duration);
    max-height: 2.8em; /* 2 lines: line-height 1.4 * 2 */
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-item-author {
    font-size: var(--fs-xs);
    color: var(--text-3);
    font-weight: 500;
}

.sidebar-item-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
}

/* ── Widgets (Right Column) ─────────────────────────────────────── */
.author-of-the-day-card, .random-fanfic-item {
    background: var(--surface-2);
    border-radius: var(--radius-md);
    padding: 12px;
    border: 1px solid var(--border);
    transition: all var(--duration) var(--ease);
}

.random-fanfic-item:hover {
    border-color: var(--accent-glow);
    background: var(--surface-3);
}

.discussion-item {
    padding: 10px;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    transition: transform var(--duration), border-color var(--duration);
}

.discussion-item:hover {
    transform: translateX(2px);
    border-color: var(--accent);
}
.guest-panel-copy { margin-bottom: 12px; color: var(--text-3); font-size: 12px; line-height: 1.4; }
.login-prompt-btn { display: inline-block; padding: 6px 12px; border-radius: var(--radius-sm); font-size: 12px; text-align: center; text-decoration: none; }
.trending-value { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); }
.sidebar-empty-copy { color: var(--text-3); font-size: 12px; }
.author-of-the-day-card { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.author-day-avatar { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-dim); color: var(--accent); font-size: 13px; font-weight: 700; }
.author-day-name { cursor: pointer; color: var(--text); font-size: 13px; font-weight: 600; }
.author-day-caption { color: var(--text-3); font-size: 11px; }
.home-filter-box { margin-bottom: 24px; }
.sidebar-box-title-accent { color: var(--accent); }

/* source: public/css/catalog.css */
/* ── Hero Search Section ────────────────────────────────────────── */
.hero {
    text-align: center;
    padding: 80px 24px 60px;
    position: relative;
    z-index: 10;
}

.hero-title {
    font-size: clamp(36px, 6vw, 64px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--text);
}

.hero-sub {
    font-size: var(--fs-lg);
    color: var(--text-2);
    max-width: 520px;
    margin: 0 auto 36px;
    line-height: 1.6;
}

/* ── Hero Search & Filter Box ───────────────────────────────────── */
.hero-search-filter-box {
    width: 100%;
    margin-bottom: 24px;
    background: color-mix(in srgb, var(--neutral-1) 60%, transparent);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border: 1px solid color-mix(in srgb, var(--white) 8%, transparent);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: 0 20px 40px color-mix(in srgb, var(--black) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--white) 5%, transparent);
}


.search-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.search-row .search-icon {
    position: absolute;
    left: 16px;
    color: var(--text-3);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-search-input {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-md);
    padding: 14px 16px 14px 48px;
    font-size: var(--fs-base);
    color: var(--text);
    outline: none;
    transition: all var(--duration) var(--ease);
}

.hero-search-input:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    background: var(--surface);
}

.btn-reset {
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    color: var(--text-2);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    flex-shrink: 0;
}

.btn-reset:hover {
    background: var(--surface-3);
    border-color: var(--accent);
    color: var(--accent);
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 12px;
    text-align: left;
}

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

.filter-label {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
    padding-left: 4px;
}

.hero-search-filter-box .filter-select {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 8px 12px;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    appearance: none;
    background-image: url('/shared/assets/icons/chevron-down.svg?v=0ee491f08435');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    padding-right: 28px;
}

.hero-search-filter-box .filter-select:focus {
    border-color: var(--accent);
    background-color: var(--surface);
    box-shadow: var(--shadow-md);
    outline: none;
}

/* ── Filters Row (Generic) ──────────────────────────────────────── */
.filters-row {
    display: flex;
    gap: 10px;
    margin-bottom: 28px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-select {
    background: var(--surface);
    border: 1px solid var(--border-2);
    color: var(--text);
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    transition: border-color var(--duration);
}

.filter-select:focus { outline: none; border-color: var(--accent); }

/* ── Searchable Tag Picker ──────────────────────────────────────── */
.tag-picker-wrapper {
    position: relative;
    width: 100%;
}

.tag-picker-input {
    background-image: none !important; /* Remove dropdown arrow since it is a text input */
    padding-right: 12px !important;
}

.tag-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    max-width: calc(100vw - 48px);
    margin-top: 4px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--surface-3);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    z-index: 100;
    box-shadow: var(--shadow-md);
}


.tag-picker-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--border);
    cursor: default;
    transition: background 0.15s ease;
}

.tag-picker-item:hover {
    background: var(--surface-2);
}

.tag-picker-item:last-child {
    border-bottom: none;
}

.tag-picker-name {
    color: var(--text);
    font-weight: 600;
}

.tag-picker-count {
    font-size: var(--fs-xs);
    color: var(--text-3);
    font-weight: 500;
}

.tag-picker-no-results {
    padding: 12px;
    font-size: var(--fs-sm);
    color: var(--text-3);
    text-align: center;
}

.tag-picker-actions {
    display: flex;
    gap: 6px;
}

.tag-action-btn {
    border: none;
    border-radius: var(--radius-sm);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-lg);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tag-include-btn {
    background: color-mix(in srgb, var(--success) 15%, transparent);
    color: var(--success);
}

.tag-include-btn:hover {
    background: var(--success-solid);
    color: var(--white);
}

.tag-exclude-btn {
    background: color-mix(in srgb, var(--danger) 15%, transparent);
    color: var(--danger);
}

.tag-exclude-btn:hover {
    background: var(--brand-solid);
    color: var(--white);
}

/* Selected tag pills container */
.selected-tags-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    justify-content: center;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: 700;
    animation: fadeIn 0.15s ease;
    cursor: default;
}

.tag-pill-include {
    background: color-mix(in srgb, var(--success) 15%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--success) 35%, transparent);
    color: var(--success);
}

.tag-pill-exclude {
    background: color-mix(in srgb, var(--danger) 15%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--danger) 35%, transparent);
    color: var(--danger);
    text-decoration: line-through;
}

.tag-pill-remove {
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.tag-pill-remove:hover {
    opacity: 1;
}

.tag-picker-category-header {
    background: var(--surface-2);
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    user-select: none;
    position: sticky;
    top: 0;
    z-index: 5;
}


/* ── Catalog Page Layout ────────────────────────────────────────── */
.catalog-search-wrap {
    position: relative;
    margin-bottom: 32px;
    width: 100%;
}

.catalog-search-input {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 16px 12px 44px;
    font-size: var(--fs-base);
    color: var(--text);
    outline: none;
    transition: all var(--duration);
}

.catalog-search-input:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
}

.catalog-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    pointer-events: none;
    display: flex;
    align-items: center;
}

.catalog-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: start;
}

.catalog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 84px;
}

.sidebar-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.sidebar-title {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
    margin-bottom: 16px;
}

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

.sidebar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    color: var(--text-2);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    transition: all var(--duration);
}

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

.sidebar-link.active {
    background: var(--accent-dim);
    color: var(--accent);
    font-weight: 600;
}

.sidebar-count {
    font-size: var(--fs-xs);
    background: var(--surface-3);
    color: var(--text-3);
    padding: 2px 6px;
    border-radius: var(--radius-md);
}

.sidebar-link.active .sidebar-count {
    background: var(--accent-solid);
    color: var(--white);
}

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

.tag-cloud-pill {
    font-size: var(--fs-xs);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    padding: 6px 10px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--duration);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tag-cloud-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.tag-cloud-pill.active {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

.tag-cloud-count {
    font-size: 10px;
    opacity: 0.6;
}

@media (max-width: 768px) {
    .catalog-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .catalog-sidebar {
        position: static;
    }
}

.catalog-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 24px;
}

.tag-cloud-choice { display: inline-flex; align-items: center; }
.tag-cloud-choice .tag-cloud-pill { border-radius: var(--radius-full) 0 0 var(--radius-full); }
.tag-cloud-exclude {
    align-self: stretch;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-left: 0;
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
    background: var(--surface-2);
    color: var(--text-3);
    cursor: pointer;
}
.tag-cloud-exclude.active { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

.fic-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px 0;
    color: var(--text-3);
    font-size: var(--fs-sm);
}
.fic-scroll-sentinel { width: 1px; height: 1px; }
.catalog-empty-state { grid-column: 1 / -1; }

/* source: public/css/auth.css */
/* ============================================================
   Auth & Registration
   ============================================================ */

/* --- Auth forms --- */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
    margin: 0 auto;
}

.auth-field-label {
    margin-bottom: -5px;
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.auth-form input[type="text"],
.auth-form input[type="password"],
.auth-form input[type="number"] {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-base);
    transition: border-color var(--duration);
}

.auth-form input:focus {
    border-color: var(--brand);
}

.auth-form input:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.auth-form input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-btn {
    padding: 13px;
    border-radius: var(--radius-sm);
    background: var(--accent-solid);
    color: var(--on-accent);
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-size: var(--fs-lg);
    margin-top: 8px;
    min-height: 44px;
    transition: opacity var(--duration);
}

.auth-btn:hover {
    opacity: 0.9;
}

.auth-btn:focus-visible,
.auth-switch:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

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

.auth-switch {
    min-width: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
    text-align: center;
    margin-top: 12px;
    color: var(--c-basic);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--fs-sm);
    transition: opacity var(--duration);
}

button.auth-switch {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    line-height: 1.4;
}

.auth-switch.is-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.auth-switch:hover {
    text-decoration: underline;
}

.field-error {
    color: var(--danger);
    font-size: var(--fs-xs);
    font-weight: 600;
    min-height: 0;
}

.agreement-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
    font-size: var(--fs-sm);
    color: var(--text-2);
}

.agreement-link {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    background: none;
    border: none;
    color: var(--c-basic);
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    text-decoration: underline;
    padding: 0;
}

.auth-section-title {
    overflow-wrap: anywhere;
    hyphens: auto;
    text-align: center;
    margin-bottom: 20px;
}

.password-toggle {
    color: var(--brand);
    font-size: var(--fs-sm);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    margin-bottom: 10px;
}

.password-toggle input[type="checkbox"],
.agreement-row input[type="checkbox"] {
    display: inline-block;
    appearance: auto;
    -webkit-appearance: auto;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--c-basic);
    cursor: pointer;
}

.auth-error-msg {
    color: var(--danger);
    font-size: var(--fs-sm);
    margin-bottom: 10px;
    text-align: center;
}

/* --- Registration fields --- */
.gender-age-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gender-toggle-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label-top {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-2);
}

.gender-toggle-row {
    position: relative;
    display: flex;
    gap: 8px;
}

.gender-toggle-row input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    clip-path: inset(50%);
}

.gender-toggle-row input[type="radio"]:focus-visible + .reg-gender-label {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.reg-gender-label {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    min-height: 44px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    cursor: pointer;
    font-size: var(--fs-lg);
    transition: all var(--duration);
}

/* Custom active/checked states for registration gender buttons */
.gender-toggle-row input[id="reg_gender_m"]:checked + .reg-gender-label {
    border-color: var(--brand) !important;
    background: color-mix(in srgb, var(--brand) 12%, transparent) !important;
    color: var(--brand) !important;
}

.gender-toggle-row input[id="reg_gender_f"]:checked + .reg-gender-label {
    border-color: var(--brand) !important;
    background: color-mix(in srgb, var(--brand) 12%, transparent) !important;
    color: var(--brand) !important;
}

/* Gender icon coloring */
.lucide-mars,
[data-icon="mars"],
label[for="reg_gender_m"] svg {
    color: var(--brand) !important;
}

.lucide-venus,
[data-icon="venus"],
label[for="reg_gender_f"] svg {
    color: var(--brand) !important;
}

.registration-age-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.age-stepper {
    position: relative;
    display: flex;
    align-items: stretch;
}

.auth-form .age-stepper .age-field-input {
    min-width: 0;
    padding-right: 97px;
    -moz-appearance: textfield;
    appearance: textfield;
}

.auth-form .age-stepper .age-field-input::-webkit-outer-spin-button,
.auth-form .age-stepper .age-field-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.age-stepper-controls {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 89px;
    display: grid;
    grid-template-columns: repeat(2, minmax(44px, 1fr));
    overflow: hidden;
    border-left: 1px solid var(--border-2);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--surface-3);
}

.age-stepper-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    transition: background var(--duration), color var(--duration);
}

.age-stepper-btn::before {
    content: "";
    width: 0;
    height: 0;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.age-stepper-up::before {
    border-bottom: 5px solid currentColor;
}

.age-stepper-down {
    border-left: 1px solid var(--border);
}

.age-stepper-down::before {
    border-top: 5px solid currentColor;
}

.age-stepper-btn:hover,
.age-stepper-btn:focus-visible {
    background: color-mix(in srgb, var(--brand) 18%, transparent);
    color: var(--brand);
}

.age-stepper-btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.age-stepper-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


.registration-error-row {
    display: flex;
    gap: 10px;
    margin-top: -8px;
    margin-bottom: 8px;
}

.registration-error-cell {
    flex: 1;
    margin-bottom: 0;
}

.registration-warning {
    font-size: 12px;
    color: var(--text-3);
    text-align: center;
    margin-top: 15px;
    line-height: 1.4;
}

.warning-label {
    color: var(--danger);
    font-weight: 700;
}

.is-hidden {
    display: none !important;
}

/* --- Inline Auth Page Card --- */
.auth-card {
    max-width: 460px;
    margin: 40px auto;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    box-shadow: var(--shadow-lg), 0 8px 32px color-mix(in srgb, var(--black) 20%, transparent);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.auth-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), 0 12px 48px color-mix(in srgb, var(--brand) 8%, transparent);
}
@media (max-width: 420px) {
    .auth-card { margin: 20px auto; padding: 28px 20px; }
}
/* Phase 8 CSP-safe layout helpers for authentication views. */
.agreement-copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 60vh;
    overflow-y: auto;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.6;
}

.agreement-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.agreement-action { padding: 8px 16px; border-radius: var(--radius-md); font-weight: 500; }
.auth-page-spacing { padding-top: 40px; padding-bottom: 40px; }
.auth-switch-recovery { margin-top: 10px; }
.auth-switch-back { margin-top: 16px; }
.auth-help-copy { margin-bottom: 12px; color: var(--text-2); font-size: 12px; line-height: 1.4; }

/* source: public/css/editor.css */
/* KatomuFic authoring surfaces; all layout is CSP-safe. */
.visually-hidden {
    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: 820px) and (max-height: 480px) and (orientation: landscape) {
    body.fic-editor-open #modal-content > .chapter-editor-actions {
        flex-wrap: nowrap;
        padding-block: 6px;
    }
    body.fic-editor-open #modal-content > .chapter-editor-actions .chapter-delete-button {
        flex: 0 1 auto;
        order: 0;
        width: auto;
        margin-right: auto;
        white-space: nowrap;
    }
    body.fic-editor-open #modal-content > .chapter-editor-actions :is(#modal-cancel, #ch-submit) {
        flex: 0 1 auto;
    }
}

.modal-box:has(.work-editor-layout) { max-width: 1080px; }
.modal-box:has(.bulk-editor) { max-width: 820px; }
.work-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 28px; }
.work-editor-form { min-width: 0; }
.work-card-preview { position: sticky; top: 0; align-self: start; }
.work-card-preview h3 { margin: 0 0 12px; color: var(--text-2); font-size: 14px; }
.work-card-preview .fanfic-card { cursor: default; }
.editor-field-spacing { margin-top: 12px; }
.cover-editor-row { display: flex; align-items: center; gap: 16px; }
.cover-preview-box { display: flex; align-items: center; justify-content: center; width: 70px; height: 100px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-3) center / cover no-repeat; color: var(--text-3); font-size: 24px; }
.cover-editor-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cover-upload-button { padding: 6px 12px; font-size: 12px; }
.cover-delete-button { display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 0; color: var(--danger); font-size: 11px; }
.editor-draft-toggle { display: flex; align-items: center; gap: 8px; margin: 16px 0; cursor: pointer; user-select: none; }
.editor-draft-toggle input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.editor-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; }

.fic-editor-help-wrap { position: relative; display: inline-flex; align-items: center; }
.fic-editor-help-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; margin-left: 5px; padding: 0;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent); font-size: 10px; font-weight: 800; line-height: 1;
    cursor: pointer; vertical-align: middle;
    transition: background .2s, border-color .2s, transform .15s;
}
.fic-editor-help-btn:hover {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    border-color: color-mix(in srgb, var(--accent) 65%, transparent);
    transform: scale(1.15);
}
.fic-editor-help-tooltip {
    display: none; position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) scale(.9); width: min(320px, calc(100vw - 32px));
    padding: 10px 13px; border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface-2); color: var(--text-2); font-size: 12px; line-height: 1.55;
    box-shadow: var(--shadow-md); z-index: 500; pointer-events: none; opacity: 0;
    transition: opacity .18s, transform .18s;
}
.fic-editor-help-tooltip::after,
.fic-editor-help-tooltip::before {
    content: ''; position: absolute; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent;
}
.fic-editor-help-tooltip::after { top: 100%; border-top-color: var(--border); }
.fic-editor-help-tooltip::before { top: calc(100% - 1px); border-top-color: var(--surface-2); z-index: 1; }
.fic-editor-help-btn[aria-expanded="true"] + .fic-editor-help-tooltip {
    display: block; opacity: 1; transform: translateX(-50%) scale(1); pointer-events: auto;
}
.fic-editor-help-tooltip.tip-left { left: 0; transform: scale(.9); }
.fic-editor-help-btn[aria-expanded="true"] + .fic-editor-help-tooltip.tip-left { transform: scale(1); }
.fic-editor-help-tooltip.tip-left::after,
.fic-editor-help-tooltip.tip-left::before { left: 14px; }
.fic-editor-help-tooltip.tip-right { left: auto; right: 0; transform: scale(.9); }
.fic-editor-help-btn[aria-expanded="true"] + .fic-editor-help-tooltip.tip-right { transform: scale(1); }
.fic-editor-help-tooltip.tip-right::after,
.fic-editor-help-tooltip.tip-right::before { left: auto; right: 14px; transform: none; }
.fic-editor-help-row { display: block; }
.fic-editor-help-row + .fic-editor-help-row { margin-top: 5px; }
.fic-editor-help-row strong { color: var(--text); }

.fic-editor-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.fic-editor-chips:empty { display: none; }
.fic-editor-chip {
    display: inline-flex; align-items: center; gap: 5px; min-width: 0;
    padding: 4px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface-2); color: var(--text); font-size: 12px;
}
.fic-editor-chip button { border: 0; background: transparent; color: var(--text-2); cursor: pointer; }
.fic-editor-suggestions {
    display: flex; flex-direction: column; max-height: 180px; overflow: auto;
    margin-top: 5px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.fic-editor-suggestions[hidden] { display: none; }
.fic-editor-suggestion { padding: 7px 9px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.fic-editor-suggestion:hover,
.fic-editor-suggestion[aria-selected="true"] { background: var(--surface-3); }
.fic-editor-team-message { margin: 7px 0 0; color: var(--text-2); font-size: 12px; }
.fic-editor-team-retry,
.fic-editor-add-coauthor { margin-top: 7px; }
.fic-editor-team-retry[hidden] { display: none; }

.authoring-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 18px;
}
.authoring-steps span {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-3);
    font-size: 12px;
}
.authoring-steps b {
    display: inline-grid;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text-2);
}
.authoring-steps .is-current { border-color: var(--accent); color: var(--text); }
.authoring-steps .is-current b { background: var(--accent-solid); color: var(--on-accent); }
.authoring-steps .is-complete { color: var(--text-2); }
.authoring-steps .is-complete b { background: var(--success); color: var(--white); }
.authoring-save-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 13px;
}

.publication-workflow {
    margin: 10px 0 22px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}
.publication-workflow-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.publication-workflow-content h2 { margin: 0 0 5px; font-size: 18px; }
.publication-workflow-content p { margin: 0; color: var(--text-2); font-size: 13px; }
.publication-workflow.publication-pending { border-color: var(--accent); }
.publication-workflow.publication-changes_requested,
.publication-workflow.publication-rejected { border-color: var(--danger); }
.publication-review-note {
    margin-top: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--text);
    font-size: 13px;
}
.publication-card-badge.publication-pending { border-color: var(--accent); color: var(--accent); }
.publication-card-badge.publication-changes_requested,
.publication-card-badge.publication-rejected { border-color: var(--danger); color: var(--danger); }

.publish-acknowledgement { display: flex; gap: 8px; margin-top: 18px; color: var(--text); }

.chapter-editor-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.chapter-editor-shell.has-revisions { grid-template-columns: minmax(0, 1fr) 230px; }
.chapter-editor-main { min-width: 0; width: 100%; max-width: 720px; justify-self: center; }
.editor-status-row,
.editor-content-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.editor-content-heading { align-items: flex-end; gap: 12px; }
.editor-content-caption { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.editor-format-hint { color: var(--text-2); font-size: 12px; }
#editor-save-status { color: var(--text-2); font-size: 12px; }
.editor-view-actions,
.editor-toolbar { display: flex; flex-wrap: wrap; min-width: 0; gap: 6px; }
.editor-view-actions .btn-ghost { min-height: 44px; padding: 7px 10px; font-size: 12px; }
.editor-toolbar { width: 100%; align-items: center; }
.editor-toolbar .tb-btn { flex: 0 0 auto; width: 44px; height: 44px; }
.editor-style-select {
    flex: 0 1 166px;
    min-width: 140px;
    max-width: 100%;
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 12px;
}
.editor-style-select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.editor-toolbar :is(.tb-btn, .editor-style-select):disabled { cursor: default; opacity: 0.52; }
.editor-content-heading .form-label { margin: 0; }
.chapter-editor { box-sizing: border-box; width: 100%; min-height: 340px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
.chapter-editor:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.editor-metrics { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; color: var(--text-2); font-size: 12px; }
.editor-reader-preview { min-height: 340px; border-color: var(--accent-dim); background: var(--bg); cursor: default; }
.editor-publication-hint { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text-2); font-size: 12px; line-height: 1.55; }
.chapter-editor-actions .chapter-delete-button { margin-right: auto; padding-left: 0; color: var(--danger); }
.revision-sidebar { min-width: 0; padding-left: 18px; border-left: 1px solid var(--border); }
.revision-sidebar h3 { margin: 0 0 8px; font-size: 14px; }
.revision-refresh { padding: 4px 0; font-size: 11px; }
.revision-list { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; color: var(--text-3); font-size: 12px; }
.revision-item { padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2); font: inherit; text-align: left; cursor: pointer; }
.revision-item:hover,
.revision-item:focus-visible { border-color: var(--accent); color: var(--text); }
.modal-box.editor-fullscreen { position: fixed; inset: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); width: auto; max-width: none; max-height: none; border-radius: var(--radius-lg); }
.modal-box.editor-fullscreen .chapter-editor { min-height: calc(100vh - 460px); }

@media (min-width: 821px) {
    body.fic-editor-open .modal-box:has(.chapter-editor-shell) {
        width: min(1000px, calc(100vw - 40px));
        max-width: 1000px;
    }
}

.bulk-import-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--text-3); font-size: 12px; }
.bulk-import-row > span { overflow-wrap: anywhere; min-width: 0; }
#editor-import-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    flex: 0 0 100%;
    gap: 10px;
    min-width: 0;
    width: 100%;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    text-align: left;
}
#editor-import-preview[hidden] { display: none; }
#editor-import-preview > :is(span, label, select, article) { grid-column: 1 / -1; }
#editor-import-summary { color: var(--text-2); font-size: 13px; overflow-wrap: anywhere; }
#editor-import-preview label { color: var(--text-2); font-size: 12px; }
#editor-import-content {
    max-height: min(300px, 40dvh);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    font-size: 15px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}
#editor-import-content > :first-child { margin-top: 0; }
#editor-import-content > :last-child { margin-bottom: 0; }
#editor-import-apply { min-height: 44px; justify-self: start; }
#editor-import-cancel { min-height: 44px; justify-self: end; }
@media (max-width: 360px) {
    #editor-import-preview { grid-template-columns: minmax(0, 1fr); }
    #editor-import-cancel { justify-self: start; }
}
.bulk-manuscript { min-height: 280px; }
.bulk-preview { max-height: 220px; overflow-y: auto; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.bulk-preview h3 { margin: 0 0 8px; font-size: 14px; }
.bulk-preview ol { margin: 0; padding-left: 24px; color: var(--text-2); font-size: 13px; }
.chapter-row[draggable="true"] { cursor: grab; }
.chapter-row.is-dragging { opacity: 0.45; transform: scale(0.99); }

@media (max-width: 820px) {
    .work-editor-layout,
    .chapter-editor-shell.has-revisions { grid-template-columns: 1fr; }
    .work-card-preview { position: static; }
    .revision-sidebar { padding: 18px 0 0; border: 0; border-top: 1px solid var(--border); }
    .authoring-steps { grid-template-columns: 1fr; }
    body.fic-editor-open .authoring-steps {
        flex: 0 0 auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-bottom: 8px;
    }
    body.fic-editor-open .authoring-steps span {
        justify-content: center;
        padding: 5px 4px;
        font-size: 10px;
        text-align: center;
    }
    body.fic-editor-open .authoring-steps b { width: 18px; height: 18px; }
    .publication-workflow-content { align-items: stretch; flex-direction: column; }
    body.fic-editor-open .modal-box { overflow: hidden; }
    body.fic-editor-open #modal-content {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
    }
    body.fic-editor-open #modal-content > .modal-title { flex: 0 0 auto; }
    body.fic-editor-open #modal-content > .chapter-editor-shell {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-inline: 2px;
        scroll-padding-block: 8px 16px;
    }
    body.fic-editor-open .editor-content-heading {
        position: sticky;
        z-index: 9;
        top: 0;
        margin-inline: -4px;
        padding: 6px 4px;
        border-bottom: 1px solid var(--border);
        background: color-mix(in srgb, var(--surface) 96%, transparent);
        backdrop-filter:none;
    }
    body.fic-editor-open #modal-content > .chapter-editor-actions {
        position: relative;
        inset: auto;
        flex: 0 0 auto;
    }
}

/* source: public/css/editor-document.css */
/* Document workspace: chapter outline, controls, then the manuscript. */
.fic-document-pane {
    display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: start;
    gap: 24px; width: 100%; min-width: 0; color: var(--text);
}
.fic-document-outline {
    position: sticky; top: calc(var(--fic-header-height, 0px) + var(--fic-safe-top, 0px) + 16px);
    max-height: calc(100dvh - var(--fic-header-height, 0px) - var(--fic-safe-top, 0px) - 32px);
    overflow-y: auto; padding: 16px; border: 1px solid var(--border);
    border-radius: var(--radius-md); background: var(--surface);
}
.fic-document-outline h2 { margin: 0 0 16px; font-size: 14px; }
.fic-document-chapters { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.fic-document-chapters > button { width: 100%; min-height: 44px; font-size: 12px; }
.fic-document-chapters select { display: none; }
#chapter-workspace-list { display: grid; gap: 4px; margin-top: 14px; }
.fic-document-chapter-link {
    display: flex; align-items: baseline; gap: 10px; width: 100%; min-width: 0; min-height: 44px;
    padding: 10px 8px; border: 1px solid transparent; border-radius: var(--radius-sm);
    background: transparent; color: var(--text-2); text-align: left; font: inherit;
    font-size: 13px; overflow-wrap: anywhere;
}
.fic-document-chapter-link:hover { background: var(--surface-2); }
.fic-document-chapter-link[aria-current="true"] { background: var(--accent-dim); border-color: var(--border-2); color: var(--accent); }
.fic-document-chapter-number { flex: 0 0 18px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.fic-document-outline-hint { margin-top: 18px; color: var(--text-3); font-size: 11px; line-height: 1.6; }
.fic-document-main { min-width: 0; padding: 0 20px 24px; background: var(--surface-2); border-radius: var(--radius-md); }
.fic-document-controls {
    position: sticky; top: calc(var(--fic-workspace-sticky-top, 0px) + var(--fic-safe-top, 0px));
    z-index: 12; margin: 0 -20px 24px; border: 1px solid var(--border-2);
    border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-md);
}
.fic-document-topline, .fic-document-file-actions, .fic-document-save, .fic-document-toolbar, .fic-toolbar-group {
    display: flex; align-items: center; flex-wrap: wrap; min-width: 0; gap: 4px;
}
.fic-document-topline { justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.fic-document-file-actions > button { min-height: 36px; padding: 6px 10px; font-size: 12px; }
.fic-document-save { gap: 12px; margin-left: auto; }
.fic-document-save #editor-save-status { max-width: 260px; font-size: 11px; }
.fic-document-save #ch-submit { min-height: 38px; padding: 6px 16px; font-size: 12px; }
.fic-document-toolbar { gap: 8px; padding: 6px 10px; }
.fic-toolbar-group { gap: 2px; flex-wrap: nowrap; }
.fic-toolbar-group + .fic-toolbar-group { padding-left: 8px; border-left: 1px solid var(--border); }
.fic-document-toolbar .tb-btn { flex: 0 0 40px; width: 40px; height: 40px; background: transparent; border-color: transparent; }
.fic-document-toolbar .tb-btn:hover { background: var(--surface-3); }
.fic-document-toolbar .tb-btn[aria-pressed="true"] { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.fic-document-toolbar .tb-btn:disabled { opacity: .45; cursor: default; }
.fic-document-toolbar .editor-style-select { width: 170px; min-width: 0; height: 40px; }
.fic-document-toolbar-hint { margin-left: auto; padding: 0 6px; color: var(--text-3); font-size: 11px; }
.fic-document-file-actions [aria-pressed="true"] { background: var(--accent-dim); color: var(--accent); }
.fic-document-paper {
    width: min(100%, 820px); min-width: 0; margin-inline: auto; padding: clamp(24px, 4vw, 60px);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}
.fic-document-heading { margin-bottom: 24px; }
.fic-document-heading .form-label { margin-bottom: 6px; color: var(--text-3); font-size: 11px; }
.fic-document-heading .form-input {
    width: 100%; padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--border);
    border-radius: 0; background: transparent; font-size: clamp(24px, 2vw, 30px); font-weight: 700;
}
.fic-document-heading .form-input::placeholder { color: var(--text-3); font-weight: 500; }
.fic-document-content {
    width: 100%; max-width: none; min-height: min(70vh, 760px); height: auto; overflow: visible;
    padding: 0; border: 0; background: transparent; font-family: var(--font-reader, Georgia, serif);
    font-size: 18px; line-height: 1.85;
}
.fic-document-content:empty::before { content: attr(data-placeholder); color: var(--text-3); pointer-events: none; }
.fic-document-content p { margin: 0 0 1em; }
.fic-document-content:focus-visible { outline: none; }
.fic-document-paper:focus-within { border-color: var(--border-2); }
.fic-document-main .editor-metrics { max-width: 820px; margin: 12px auto 22px; font-size: 11px; }
.fic-document-save-hint { margin-left: auto; }
.fic-document-notice {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; padding: 12px 16px;
    border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-2); font-size: 12px;
}
.fic-document-notice span { flex: 1 1 260px; }
.fic-document-notice button { min-height: 40px; font-size: 12px; }
.fic-document-notice[hidden], .fic-document-main [hidden] { display: none; }
.fic-document-main #editor-import-preview { margin: 0 0 20px; width: 100%; }
.fic-document-details { max-width: 820px; margin: 12px auto; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.fic-document-details summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.fic-document-details label { display: block; margin-block: 12px 6px; font-size: 13px; }
.fic-document-details textarea { width: 100%; }
.fic-document-details input { width: min(100%, 330px); }
.fic-document-actions { display: flex; justify-content: flex-end; max-width: 820px; margin: 12px auto 0; }
.fic-document-actions > button { min-height: 44px; }
.fic-document-pane .revision-list { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 12px; }
.fic-document-pane .revision-item { min-height: 44px; }
.fic-document-pane.fic-document-focus-mode {
    position: fixed; inset: 0; z-index: 1500; display: block; width: 100%; height: 100dvh; overflow-y: auto;
    overscroll-behavior: contain; padding: max(12px, env(safe-area-inset-top)) 20px 32px; background: var(--bg);
}
.fic-document-focus-mode .fic-document-outline { display: none; }
.fic-document-focus-mode .fic-document-main { max-width: 1040px; margin-inline: auto; }
.fic-document-focus-mode .fic-document-controls { top: 0; }
@media (max-width: 1100px) {
    .fic-document-pane { grid-template-columns: 180px minmax(0, 1fr); gap: 16px; }
    .fic-document-outline { padding: 12px; }
    .fic-document-toolbar-hint { display: none; }
}
@media (max-width: 900px) {
    .fic-document-pane { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .fic-document-outline { position: static; padding: 0; max-height: none; overflow: visible; background: transparent; border: 0; }
    .fic-document-outline h2, #chapter-workspace-list, .fic-document-outline-hint { display: none; }
    .fic-document-chapters { flex-wrap: nowrap; }
    .fic-document-chapters select { display: block; flex: 1 1 0; width: 0; min-width: 0; min-height: 44px; }
    .fic-document-chapters > button { width: auto; flex: 0 0 auto; }
    .fic-document-main { padding-inline: 12px; }
    .fic-document-controls { margin-inline: -12px; }
}
@media (max-width: 600px) {
    .fic-document-main { padding: 0 0 16px; background: transparent; }
    .fic-document-controls { margin: 0 0 14px; }
    .fic-document-topline { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 6px; gap: 4px; }
    .fic-document-file-actions { gap: 0; }
    .fic-document-file-actions > button { min-height: 44px; padding: 5px 4px; font-size: 11px; }
    .fic-document-save { display: contents; }
    .fic-document-save #editor-save-status { grid-row: 2; grid-column: 1 / -1; max-width: none; }
    .fic-document-save #ch-submit { grid-row: 1; grid-column: 2; min-height: 44px; padding-inline: 10px; }
    .fic-document-toolbar { gap: 4px; padding: 4px; }
    .fic-document-toolbar .tb-btn { width: 44px; height: 44px; flex-basis: 44px; }
    .fic-document-toolbar .editor-style-select { height: 44px; width: 180px; }
    .fic-toolbar-group + .fic-toolbar-group { padding-left: 4px; }
    .fic-document-paper { padding: 22px 18px; }
    .fic-document-content { min-height: 55vh; font-size: 17px; }
    .fic-document-save-hint { margin-left: 0; }
    .fic-document-pane.fic-document-focus-mode { padding-inline: 8px; }
}
@media (max-width: 900px) and (max-height: 500px) {
    .fic-document-controls { position: static; }
}

/* source: public/css/community.css */
/* Collections and prompts: community-driven discovery surfaces. */
.community-page { display: grid; gap: 20px; }
.community-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.community-header h1 { margin: 0 0 8px; }
.community-header p { margin: 0; color: var(--text-2); }
.community-header-actions,
.collection-item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.community-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.community-card,
.community-detail,
.community-form,
.collection-work-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 16px;
}
.community-card { display: grid; gap: 10px; }
.community-card p,
.community-detail p { white-space: pre-wrap; overflow-wrap: anywhere; }
.community-card-link {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    border: 0;
    padding: 0;
    color: var(--text);
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.community-card-link:hover strong,
.community-card-link:focus-visible strong { color: var(--accent); }
.community-card-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--text-2); }
.community-form { display: grid; gap: 12px; }
.community-form label { display: grid; gap: 6px; }
.community-form input:not([type='checkbox']),
.community-form textarea,
.community-form select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
    color: var(--text);
    background: var(--bg);
}
.community-form textarea { min-height: 120px; resize: vertical; }
.community-filter-form {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: end;
}
.community-filter-form label:has(input[type='checkbox']) { display: flex; align-items: center; }
.collection-work-wrap { display: grid; gap: 10px; }
.collection-work-wrap .fanfic-card { height: 100%; }
.collection-work-wrap blockquote { margin: 0; color: var(--text-2); }
.community-more { width: 100%; margin-top: 8px; }
.work-collections { margin: 22px 0; }
.work-collection-links,
.work-collection-add { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.work-collection-add { margin-top: 12px; }
.work-collection-add select,
.work-collection-add input {
    flex: 1 1 180px;
    min-width: 0;
    max-width: 100%;
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    color: var(--text);
    background: var(--surface);
}
.sidebar-item[data-open-prompt],
.sidebar-item[data-open-collection] {
    width: 100%;
    margin: 0;
    padding: 0 0 12px;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.sidebar-item[data-open-prompt]:last-child,
.sidebar-item[data-open-collection]:last-child { padding-bottom: 0; }

@media (max-width: 640px) {
    .community-header { flex-direction: column; }
    .community-header-actions { width: 100%; }
    .community-header-actions > * { flex: 1; }
    .community-grid { grid-template-columns: 1fr; }
}

/* source: public/css/author-feedback.css */
/* KatomuFic author feedback, beta workflow, and paragraph reactions. */
.feedback-dashboard .personal-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.feedback-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.feedback-panel,
.feedback-table-wrap,
.feedback-invite-card,
.beta-review-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: 16px;
}

.feedback-panel h2,
.beta-review-panel h3 {
    margin: 0 0 14px;
    font-size: 1rem;
}

.feedback-chart-row {
    display: grid;
    grid-template-columns: 96px 1fr 36px;
    gap: 10px;
    align-items: center;
    margin: 8px 0;
    font-size: .82rem;
}

.feedback-chart-row progress {
    width: 100%;
    accent-color: var(--accent);
}

.rating-distribution,
.feedback-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rating-distribution > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    background: var(--accent-dim);
    padding: 7px 11px;
}

.feedback-table-wrap {
    overflow-x: auto;
}

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

.feedback-table th,
.feedback-table td {
    border-bottom: 1px solid var(--border);
    padding: 10px;
    text-align: left;
}

.table-link {
    color: var(--accent);
}

.feedback-invite-card,
.feedback-member-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 12px;
}

.feedback-invite-card p {
    margin: 4px 0 0;
    color: var(--text-2);
}

.feedback-team-list {
    margin-bottom: 18px;
}

.feedback-invite-form {
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.beta-review-banner {
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
    border-radius: var(--radius-md);
    background: var(--accent-dim);
    margin: 18px 0;
    padding: 12px 14px;
}

.paragraph-feedback-target {
    border-radius: var(--radius-sm);
    transition: background-color .2s ease, box-shadow .2s ease;
}

.paragraph-reaction-control {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -8px 0 16px;
    opacity: .38;
    transition: opacity .2s ease;
}

.paragraph-feedback-target:hover + .paragraph-reaction-control,
.paragraph-reaction-control:hover,
.paragraph-reaction-control:focus-within {
    opacity: 1;
}

.paragraph-reaction,
.paragraph-beta-note {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    padding: 3px 8px;
    font: inherit;
    font-size: .75rem;
    cursor: pointer;
}

.paragraph-reaction.active {
    border-color: var(--accent);
    background: var(--accent-dim);
    color: var(--accent);
}

.paragraph-reaction:disabled {
    cursor: default;
}

.reaction-heat-1 { box-shadow: inset 4px 0 color-mix(in srgb, var(--accent) 25%, transparent); }
.reaction-heat-2 { box-shadow: inset 5px 0 color-mix(in srgb, var(--accent) 45%, transparent); }
.reaction-heat-3 { box-shadow: inset 6px 0 color-mix(in srgb, var(--accent) 70%, transparent); }
.reaction-heat-4 { box-shadow: inset 7px 0 var(--accent); }

.beta-review-panel {
    margin: 20px 0;
}

.beta-note-card {
    border-left: 3px solid var(--accent);
    padding: 8px 12px;
    margin: 10px 0;
}

.beta-note-card p {
    margin: 0 0 6px;
    white-space: pre-wrap;
}

.beta-note-card small {
    color: var(--text-2);
}

.beta-note-card.resolved {
    opacity: .62;
    border-left-color: var(--text-2);
}

.author-heatmap-editor p {
    padding-inline-start: 10px;
}

@media (hover: none), (max-width: 700px) {
    .paragraph-reaction-control {
        opacity: 1;
    }

    .feedback-invite-card,
    .feedback-member-row {
        align-items: stretch;
        flex-direction: column;
    }
}

/* source: public/css/imports.css */
.page-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.author-import-modal { max-width: 700px; }
#author-import-separator-wrap[hidden] { display: none !important; }
.author-import-modal h2 {
    margin: 0 48px 14px 0;
    overflow-wrap: anywhere;
    font-size: clamp(1.25rem, 2.4vw, 1.65rem);
    line-height: 1.2;
}
.import-section { margin-top: 18px; padding: 18px 0 0; border-top: 1px solid var(--border); }
.import-section h3 { margin: 0 0 8px; }
.import-section p { color: var(--text-2); }
.import-section details { margin-block: 12px; color: var(--text-2); font-size: 13px; }
.import-section details summary { cursor: pointer; padding-block: 8px; }
.import-section pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    line-height: 1.6;
}
.import-job { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.import-job-failed { border-color: var(--danger); }
.import-job-completed { border-color: var(--success); }
.import-provenance span { display: block; overflow-wrap: anywhere; color: var(--text-3); font-size: 11px; }
@media (max-width: 640px) {
    .page-title-row, .import-job { align-items: stretch; flex-direction: column; }
}

/* source: public/css/experience-v2.css */
/* KATOMUFIC SCOPE — KatomuFic 2.0 cross-surface experience layer. */

:root {
    --fic-tg-safe-top: 0px;
    --fic-tg-safe-right: 0px;
    --fic-tg-safe-bottom: 0px;
    --fic-tg-safe-left: 0px;
    --fic-safe-top: max(env(safe-area-inset-top, 0px), var(--fic-tg-safe-top));
    --fic-safe-right: max(env(safe-area-inset-right, 0px), var(--fic-tg-safe-right));
    --fic-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--fic-tg-safe-bottom));
    --fic-safe-left: max(env(safe-area-inset-left, 0px), var(--fic-tg-safe-left));
    --fic-app-height: var(--fic-tg-viewport-height, 100dvh);
    --fic-shell-max: 1280px;
    --fic-reading-max: 720px;
    --fic-edge: clamp(16px, 3vw, 32px);
    --fic-header-height: 64px;
    --fic-mobile-nav-height: 66px;
    --fic-control-height: 44px;
    --fic-chip-radius: var(--radius-sm);
    --fic-panel-radius: var(--radius-md);
}

.fic-telegram-mini-app body {
    min-height: var(--fic-app-height);
}

.fic-telegram-mini-app .site-header {
    padding-top: var(--fic-safe-top);
}

.fic-tma-auth-pending body {
    cursor: progress;
}

.fic-tma-error-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--sp-4);
    padding: max(24px, var(--fic-safe-top)) max(24px, var(--fic-safe-right))
        max(24px, var(--fic-safe-bottom)) max(24px, var(--fic-safe-left));
    color: var(--text, var(--neutral-9));
    text-align: center;
    background: var(--bg, var(--neutral-0));
}

.fic-tma-error-screen p {
    max-width: 32rem;
    color: var(--text-2, var(--neutral-7));
}

html {
    min-width: 0;
    scroll-padding-top: calc(var(--fic-header-height) + 16px);
}

body {
    min-height: 100vh;
    min-height: var(--fic-app-height);
}

#app {
    min-height: 100vh;
    min-height: var(--fic-app-height);
}

button,
input,
select,
textarea,
a {
    -webkit-tap-highlight-color: transparent;
}

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

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

.site-header {
    padding-top: var(--fic-safe-top);
}

.header-inner {
    width: min(100%, var(--fic-shell-max));
    max-width: none;
    min-height: var(--fic-header-height);
    height: auto;
    padding-right: max(var(--fic-edge), var(--fic-safe-right));
    padding-left: max(var(--fic-edge), var(--fic-safe-left));
    gap: clamp(14px, 2.5vw, 30px);
}

.header-nav {
    min-width: 0;
    gap: 2px;
}

.header-chat-link {
    flex: 0 0 auto;
}

.nav-link {
    min-height: var(--control-size, 44px);
    display: inline-flex;
    align-items: center;
    padding-inline: 12px;
    white-space: nowrap;
}

.nav-link.active,
.nav-link[aria-current="page"] {
    background: var(--accent-dim);
    color: var(--accent);
}

.header-right {
    gap: 8px;
}

.global-search-btn kbd,
.guest-hint {
    display: none;
}

.page,
.page-narrow {
    width: min(100%, var(--fic-shell-max));
    max-width: none;
    padding: clamp(24px, 4vw, 44px) var(--fic-edge) 96px;
    padding-right: max(var(--fic-edge), var(--fic-safe-right));
    padding-left: max(var(--fic-edge), var(--fic-safe-left));
}

.page-narrow {
    width: min(100%, calc(var(--fic-reading-max) + (var(--fic-edge) * 2)));
}

.page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.page-heading-copy {
    min-width: 0;
}

.page-kicker {
    margin-bottom: 5px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.page-title {
    margin: 0;
    font-size: clamp(26px, 4vw, 40px);
    line-height: 1.1;
}

.page-subtitle {
    max-width: 680px;
    margin: 8px 0 0;
    line-height: 1.55;
}

/* Home — one primary flow, with personal actions in a drawer instead of a third column. */
.home-page {
    width: min(100%, var(--fic-shell-max));
}

.home-hero-v2 {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.5fr);
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
    padding: 24px;
    border: 0;
    border-bottom: 1px solid var(--border-2);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background:
        linear-gradient(100deg, var(--bg), var(--scene-shade)), var(--scene-roleplay) center 58% / cover;
}

.home-hero-v2::after {
    content: none;
}

.home-hero-title {
    max-width: 760px;
    width: fit-content;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.home-hero-copy {
    max-width: 620px;
    margin-top: 10px;
    color: var(--text-2);
    font-size: .875rem;
    line-height: 1.55;
}

.home-search-v2 {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 4px 10px;
    margin-top: 20px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.home-search-v2 .meta-icon {
    position: static;
    transform: none;
}

.home-search-v2 input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 4px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font: inherit;
}

.home-search-submit {
    position: static;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--accent-solid);
    color: var(--fic-on-accent);
}

.home-quick-actions {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    padding: 0 0 0 16px;
    border: 0;
    border-left: 1px solid var(--border-2);
    border-radius: 0;
    background: transparent;
    backdrop-filter:none;
}

.home-quick-action {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-2);
    text-align: left;
}

.home-quick-action:hover,
.home-quick-action:focus-visible {
    border-color: var(--border-2);
    background: var(--surface-2);
    color: var(--text);
}

.home-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin: 30px 0 16px;
}

.home-section-heading h2 {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    line-height: 1.2;
}

.home-left-sidebar {
    position: fixed;
    z-index: 210;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(360px, calc(100vw - 34px));
    max-height: var(--fic-app-height);
    overflow-y: auto;
    padding: calc(20px + var(--fic-safe-top)) max(18px, var(--fic-safe-right))
        calc(24px + var(--fic-safe-bottom)) max(18px, var(--fic-safe-left));
    border-right: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 180ms var(--ease), visibility 180ms;
}

.home-left-sidebar.mobile-open {
    transform: translateX(0);
    visibility: visible;
}

.mobile-personal-backdrop:not([hidden]) {
    position: fixed;
    z-index: 200;
    inset: 0;
    display: block;
    border: 0;
    background: color-mix(in srgb, var(--black) 56%, transparent);
    backdrop-filter:none;
}

.mobile-personal-close {
    display: inline-flex;
    margin: 0 0 14px auto;
}

/* Catalog — search first; filters and tags remain compact and deliberate. */
.catalog-page {
    width: min(100%, var(--fic-shell-max));
}

.catalog-command-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.catalog-search-wrap {
    margin: 0;
}

.catalog-search-input {
    min-height: 48px;
    border-radius: var(--radius-md);
    background: var(--surface);
}

.catalog-filter-toggle {
    min-height: 48px;
    gap: 8px;
}

.catalog-filter-panel {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.catalog-filter-panel .filter-select {
    width: 100%;
    min-height: var(--fic-control-height);
}

.catalog-reset-wrap {
    display: flex;
    align-items: center;
    justify-content: end;
}

.catalog-tags-panel {
    margin-bottom: 24px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.catalog-tags-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.catalog-tags-title {
    font-size: 13px;
    font-weight: 800;
}

.catalog-tag-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.catalog-tag-search {
    width: min(230px, 36vw);
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 12px;
}

.catalog-tag-mode {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}

.catalog-tag-mode button {
    min-height: 32px;
    padding: 5px 9px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-2);
    font-size: 11px;
    font-weight: 700;
}

.catalog-tag-mode button[aria-pressed="true"] {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--shadow-md);
}

.tags-cloud {
    gap: 6px;
}

.tag-cloud-choice {
    display: inline-flex;
    min-width: 0;
}

.tag-cloud-pill {
    position: relative;
    max-width: min(100%, 260px);
    min-height: 30px;
    flex: 0 0 auto;
    gap: 5px;
    padding: 4px 7px;
    border-radius: var(--fic-chip-radius);
    line-height: 1.15;
    white-space: nowrap;
}

.tag-cloud-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tag-cloud-pill[data-tag-state="include"] {
    border-color: color-mix(in srgb, var(--accent) 48%, transparent);
    background: var(--accent-dim);
    color: var(--accent);
}

.tag-cloud-pill[data-tag-state="exclude"] {
    border-color: color-mix(in srgb, var(--danger) 38%, transparent);
    background: color-mix(in srgb, var(--danger) 11%, transparent);
    color: var(--danger);
}

.tag-cloud-count {
    padding-left: 3px;
    border-left: 1px solid currentColor;
    font-variant-numeric: tabular-nums;
}

.tag-cloud-pill.tag-overflow:not(.tag-search-match),
.tag-cloud-pill.tag-filtered-out {
    display: none;
}

.catalog-tags-panel.tags-expanded .tag-cloud-pill.tag-overflow:not(.tag-filtered-out) {
    display: inline-flex;
}

.catalog-tags-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    color: var(--text-3);
    font-size: 11px;
}

.catalog-layout {
    display: block;
}

.catalog-content {
    min-width: 0;
}

/* Work cards — a reading recommendation, not a metadata questionnaire. */
.fanfic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.fanfic-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    grid-template-areas: "cover body";
    gap: 15px;
    padding: 14px;
    border-left-width: 3px;
    border-radius: var(--radius-md);
    cursor: default;
    contain: layout paint;
}

.fanfic-card:hover {
    transform: translateY(-1px);
}

.fanfic-card-cover {
    grid-area: cover;
    width: 82px;
    height: 116px;
    border-radius: var(--radius-md);
    background: var(--accent-solid) center / cover no-repeat;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 8%, transparent);
}

.fanfic-card-cover::after {
    content: "K";
    color: color-mix(in srgb, var(--white) 62%, transparent);
    font: 800 28px/1 var(--font-reader);
}

.fanfic-card-cover[data-cover-image]::after {
    content: none;
}

.fanfic-card-body {
    grid-area: body;
    gap: 7px;
}

.fanfic-card-title {
    font-size: 17px;
    line-height: 1.25;
}

.fanfic-card-title-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    width: fit-content;
    max-width: 100%;
}

.fanfic-card-title-link:hover {
    color: var(--accent);
}

.fanfic-card-badges {
    gap: 5px;
    margin: 0;
}

.fic-badge,
.status-badge,
.tag-pill-sm {
    border-radius: var(--radius-sm);
    line-height: 1.25;
}

.fic-badge:is(.dir-gen, .dir-het, .dir-slash, .dir-femslash, .dir-mixed, .dir-other, .rating-g, .rating-pg13, .rating-r) {
    color: var(--fic-on-accent);
}

.status-hiatus,
.fanfic-author > span:first-child,
.work-coauthors-label,
.empty-inline,
.chapter-wc {
    color: var(--fic-muted-readable);
}

.fanfic-card-author-row,
.fanfic-card-facts,
.fanfic-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--text-3);
    font-size: 12px;
}

.fanfic-card-author-row .link-profile {
    overflow: hidden;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-2);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fic-author-identity {
    --profile-custom-accent: var(--accent);
    --profile-custom-accent-soft: var(--accent-dim);
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.fic-author-identity > .link-profile {
    min-width: 0;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    max-width: min(100%, 22ch);
    overflow: hidden;
    flex: 0 1 auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--profile-custom-accent, var(--text-2));
    font: inherit;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fic-author-avatar {
    flex: 0 0 auto;
}

.user-avatar-header.katomu-avatar--enhanced {
    overflow: visible;
}

.header-right .top-icon-btn { min-width: 44px; min-height: 44px; }

.user-avatar-header.katomu-avatar--enhanced .katomu-avatar__face,
.user-avatar-header.katomu-avatar--enhanced .katomu-avatar__img {
    overflow: hidden;
    border-radius: 50%;
}

.fic-author-avatar-face {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--profile-custom-accent), var(--profile-custom-accent-end, var(--accent-2)));
    color: white;
    font-size: 10px;
    font-weight: 800;
}

.fic-author-badge {
    max-width: 104px;
    min-height: 20px;
    padding: 2px 6px;
    font-size: 9px;
}

.fanfic-author {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 640px) {
    .fanfic-author .fic-author-identity { min-width: 0; max-width: 100%; }
    .fanfic-author .fic-author-identity > .link-profile {
        max-width: 100%;
        overflow-wrap: anywhere;
        text-overflow: clip;
        white-space: normal;
    }
}

.fanfic-author > span:first-child,
.work-coauthors-label {
    color: var(--fic-muted-readable);
    font-size: 12px;
    font-weight: 700;
}

.review-card time {
    color: var(--fic-muted-readable);
}

.review-card header .fic-author-identity,
.comment-header .fic-author-identity {
    max-width: min(100%, 300px);
}

.fanfic-card-facts {
    flex-wrap: wrap;
}

.fanfic-card-facts > span,
.fanfic-card-facts > button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fanfic-card-facts > button { min-height: 32px; }

.fanfic-card-summary {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-2);
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.fanfic-card-tags {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    gap: 5px;
}

.fanfic-card-tags .tag-pill-sm {
    flex: 0 1 auto;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}

.fanfic-card-footer {
    margin-top: auto;
    padding-top: 2px;
    justify-content: space-between;
}

.fanfic-card-progress {
    grid-template-columns: auto minmax(44px, 1fr);
    margin: 0;
    font-size: 11px;
}

.fanfic-card-progress progress {
    height: 5px;
}

.publication-workflow {
    border-radius: var(--radius-md);
    background: var(--surface);
}

.publication-workflow-content {
    align-items: flex-start;
    flex-wrap: wrap;
}

.publication-workflow-content > div {
    min-width: 0;
    flex: 1 1 22rem;
}

.publication-workflow-content > button {
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
}

.publication-readiness {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.publication-readiness-item {
    min-width: 0;
}

.publication-readiness-item + .publication-readiness-item {
    padding-left: 16px;
    border-left: 1px solid var(--border);
}

.publication-readiness-item strong {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: .8125rem;
}

.publication-readiness-item strong span {
    color: var(--text-2);
    font-size: .6875rem;
    font-weight: 600;
}

.publication-readiness-item.is-ready strong span {
    color: var(--success);
}

.publication-readiness-item p {
    margin-top: 5px;
    color: var(--text-2);
    font-size: .8125rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.publication-readiness-item .btn-ghost {
    min-height: 44px;
    margin-top: 6px;
    padding-inline: 0;
    color: var(--accent);
}

/* Modal and editor states use the available visual viewport and safe areas. */
.modal-overlay {
    padding: max(12px, var(--fic-safe-top)) max(12px, var(--fic-safe-right))
        max(12px, var(--fic-safe-bottom)) max(12px, var(--fic-safe-left));
}

body.fic-modal-open {
    overflow: hidden;
}

body.fic-editor-open .modal-box {
    width: min(1180px, 100%);
    max-width: 1180px;
    max-height: min(94dvh, 980px);
}

/* Shared profile customization must remain legible over every shared cover. */
.profile-customization-badge,
.profile-custom-badge {
    width: fit-content;
    max-width: min(100%, 240px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-card[data-profile-cover]:not([data-profile-cover="none"]) .profile-nickname,
.profile-card[data-profile-cover]:not([data-profile-cover="none"]) .profile-username,
.profile-card[data-profile-cover]:not([data-profile-cover="none"]) .profile-meta-secondary,
.profile-card[data-profile-cover]:not([data-profile-cover="none"]) .profile-bio {
    text-shadow: none;
}

/* Community and personal IA — four stable mental spaces, not feature sprawl. */
.community-hero-v2,
.personal-hero-v2 {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(24px, 4vw, 46px);
    border: 1px solid var(--border);
    border-radius: var(--fic-panel-radius);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-solid) 13%, var(--surface)) 0%, var(--surface) 72%);
}

.community-hero-v2 h1,
.personal-hero-v2 h1 {
    margin: 6px 0 8px;
    font-size: clamp(28px, 5vw, 48px);
    letter-spacing: -0.035em;
}

.community-hero-v2 p,
.personal-hero-v2 p {
    max-width: 62ch;
    margin: 0;
    color: var(--text-2);
    line-height: 1.6;
}

.community-hub-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.community-hub-section,
.personal-preview-section {
    margin-top: clamp(28px, 5vw, 52px);
}

.community-owner-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.personal-hero-identity {
    margin-bottom: 12px;
}

.personal-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.personal-hub-tile {
    min-width: 0;
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    text-align: left;
}

.personal-hub-tile:hover,
.personal-hub-tile:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 54%, var(--border));
    background: var(--surface-2);
}

.personal-hub-tile .meta-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--accent);
}

.personal-hub-tile strong,
.personal-hub-tile small {
    display: block;
    overflow-wrap: anywhere;
}

.personal-hub-tile > span { min-width: 0; }

.personal-hub-tile small {
    margin-top: 3px;
    color: var(--text-3);
    line-height: 1.35;
}

.personal-section-v2 .page-title-row {
    align-items: end;
}

.search-author-identity {
    max-width: min(100%, 240px);
}

.search-author-identity .fic-author-name,
.search-author-identity .fic-author-badge {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-author-identity .fic-author-avatar-face {
    color: var(--white);
}

/* Reader — manuscript first. Phone chrome exists only on demand. */
body.fic-reader-view {
    --fic-reader-shell-bg: var(--neutral-2);
}

body.fic-reader-view[data-reader-theme="light"] {
    --fic-reader-shell-bg: var(--neutral-9);
}

body.fic-reader-view[data-reader-theme="sepia"] {
    --fic-reader-shell-bg: var(--katy);
}

body.fic-reader-view #main-content {
    min-height: var(--fic-app-height);
    background: var(--fic-reader-shell-bg);
}

.reader-shell {
    width: min(100%, var(--fic-shell-max));
    max-width: none;
    margin-inline: auto;
    padding: 18px var(--fic-edge) 60px;
    padding-right: max(var(--fic-edge), var(--fic-safe-right));
    padding-left: max(var(--fic-edge), var(--fic-safe-left));
}

.reader-mobile-chrome {
    display: none;
}

.reader-breadcrumbs {
    margin: 0 auto 16px;
}

.reader-layout {
    grid-template-columns: minmax(180px, 220px) minmax(0, var(--fic-reading-max));
    gap: clamp(18px, 3vw, 32px);
}

.reader-stage {
    width: 100%;
    min-width: 0;
    padding: clamp(24px, 4vw, 42px) clamp(24px, 5vw, 54px) 64px !important;
}

.reader-controls {
    margin: 0 0 34px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
}

.reader-context-links .tag-pill,
.reader-context-links .reader-filter-link {
    min-height: 28px;
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    font-size: 11px;
}

.work-tags,
.work-collection-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.work-tags .tag-pill,
.work-collection-links .tag-pill {
    min-height: 28px;
    gap: 4px;
    padding: 4px 7px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
}

.reader-content {
    width: min(100%, 68ch);
    max-width: none;
    line-height: 1.82;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

.reader-content p {
    margin-bottom: 1.35em;
}

.reader-bottom-navigation {
    width: min(100%, 68ch);
    margin-inline: auto;
}

.reader-discussion {
    width: min(100%, 68ch);
    margin: 46px auto 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, currentColor 4%, transparent);
}

.reader-discussion > summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 800;
    list-style: none;
}

.reader-discussion > summary::-webkit-details-marker {
    display: none;
}

.reader-discussion[open] > summary .meta-icon {
    transform: rotate(180deg);
}

.reader-discussion-body {
    padding: 4px 14px 16px;
    font-family: var(--font);
}

.reader-chrome-button {
    width: var(--control-size, 44px);
    height: var(--control-size, 44px);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    color: var(--text);
}

@media (max-width: 900px) {
    .reader-layout {
        display: block;
    }

    .reader-toc {
        display: none;
    }
}

@media (max-width: 1060px) {
    .header-nav {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .header-nav::-webkit-scrollbar {
        display: none;
    }

    .catalog-filter-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fanfic-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    :root { --fic-mobile-nav-height: max(76px, 4.75rem); }

    body {
        padding-bottom: calc(var(--fic-mobile-nav-height) + var(--fic-safe-bottom));
    }

    .site-header .header-nav,
    .site-header .global-search-btn,
    .site-header .guest-hint,
    .site-header #new-fanfic-btn,
    .site-header .user-name,
    .site-header .logout-btn,
    .site-header #fic-katy-badge {
        display: none !important;
    }

    .header-inner {
        min-height: 56px;
    }

    .header-chat-link {
        padding-inline: 8px;
    }

    .logo-text {
        font-size: 16px;
    }

    .mobile-bottom-nav {
        position: fixed;
        z-index: 90;
        inset: auto auto 0 0;
        box-sizing: border-box;
        width: 100vw;
        max-width: 100vw;
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        min-height: calc(var(--fic-mobile-nav-height) + var(--fic-safe-bottom));
        padding: 4px max(4px, var(--fic-safe-right)) var(--fic-safe-bottom)
            max(4px, var(--fic-safe-left));
        border-top: 1px solid var(--border);
        background: var(--surface);
        box-shadow: var(--shadow-md);
        backdrop-filter:none;
    }

    .mobile-bottom-nav > a,
    .mobile-bottom-nav > button {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        width: 100%;
        min-width: 0;
        min-height: 54px;
        padding: 4px 2px;
        border: 0;
        border-radius: var(--radius-md);
        appearance: none;
        background: transparent;
        color: var(--text-2);
        font: inherit;
        font-size: .6875rem;
        line-height: 1.15;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
    }

    .mobile-bottom-nav > :is(a, button).active,
    .mobile-bottom-nav > a[aria-current="page"] {
        color: var(--accent);
    }

    .mobile-bottom-nav > :is(a, button):focus-visible {
        outline: 2px solid color-mix(in srgb, var(--accent) 74%, white);
        outline-offset: -2px;
    }

    .mobile-bottom-nav > :is(a, button) > span:last-child {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .mobile-create-action {
        color: var(--text) !important;
    }

    .mobile-create-icon {
        width: 38px;
        height: 32px;
        display: grid;
        place-items: center;
        margin-top: -15px;
        border: 4px solid var(--bg);
        border-radius: var(--radius-md);
        background: var(--accent-solid);
        box-shadow: var(--shadow-md);
    }

    .mobile-create-icon .meta-icon {
        color: white;
    }

    .home-hero-v2 {
        grid-template-columns: 1fr;
    }

    .home-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 12px 0 0;
        border-left: 0;
        border-top: 1px solid var(--border-2);
    }

    .catalog-filter-panel:not(.is-open) {
        display: none;
    }

    .catalog-filter-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.fic-reader-view,
    body.fic-editor-open {
        padding-bottom: 0;
    }

    body.fic-reader-view > #app > .site-header,
    body.fic-reader-view .mobile-bottom-nav,
    body.fic-editor-open > #app > .site-header,
    body.fic-editor-open .mobile-bottom-nav {
        display: none !important;
    }

    body.fic-reader-view #main-content {
        background: var(--fic-reader-shell-bg);
    }

    .reader-progress-track {
        z-index: 330;
        top: var(--fic-safe-top);
    }

    .reader-shell {
        width: 100%;
        min-height: var(--fic-app-height);
        padding: 0;
    }

    .reader-breadcrumbs {
        display: none;
    }

    .reader-stage {
        min-height: var(--fic-app-height);
        margin: 0;
        padding: max(28px, calc(var(--fic-safe-top) + 18px))
            max(18px, calc(var(--fic-safe-right) + 16px))
            calc(82px + var(--fic-safe-bottom))
            max(18px, calc(var(--fic-safe-left) + 16px)) !important;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .reader-mobile-chrome {
        position: fixed;
        z-index: 320;
        top: max(8px, var(--fic-safe-top));
        right: max(10px, var(--fic-safe-right));
        left: max(10px, var(--fic-safe-left));
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: color-mix(in srgb, var(--surface) 90%, transparent);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px);
        transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 160ms;
        backdrop-filter:none;
    }

    .reader-mobile-chapter {
        min-width: 0;
        display: grid;
        flex: 1;
    }

    .reader-mobile-chapter .reader-fanfic-name {
        margin: 0 4px 2px;
        font-size: 10px;
    }

    .reader-mobile-chapter select {
        min-width: 0;
        width: 100%;
        padding: 2px 4px;
        border: 0;
        background: transparent;
        color: var(--text);
        font: 700 12px/1.25 var(--font);
    }

    .reader-mobile-chrome:focus-within,
    body.reader-chrome-visible .reader-mobile-chrome {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .reader-controls {
        position: fixed;
        z-index: 315;
        right: max(10px, var(--fic-safe-right));
        bottom: max(10px, var(--fic-safe-bottom));
        left: max(10px, var(--fic-safe-left));
        max-height: min(70dvh, calc(var(--fic-app-height) - var(--fic-safe-top) - var(--fic-safe-bottom) - 40px), 540px);
        overflow-y: auto;
        display: flex;
        align-items: stretch;
        margin: 0;
        padding: 16px;
        border-radius: var(--radius-lg);
        background: color-mix(in srgb, var(--surface) 95%, transparent);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(calc(100% + 24px));
        transition: opacity 170ms var(--ease), transform 170ms var(--ease), visibility 170ms;
        backdrop-filter:none;
    }

    body.reader-settings-visible .reader-controls {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .reader-controls .reader-title-info {
        flex-basis: 100%;
    }

    .reader-controls .reader-context-links,
    .reader-controls .reader-help-wrap {
        display: none;
    }

    .reader-font-controls,
    .reader-theme-selector,
    .reader-nav {
        flex: 1 1 auto;
    }

    .reader-content {
        width: min(100%, 66ch);
        font-size: clamp(17px, 4.7vw, 20px);
        line-height: 1.78;
    }

    .reader-content p {
        text-indent: 1.25em;
    }

    .reader-discussion,
    .reader-bottom-navigation {
        width: 100%;
    }

    body.fic-editor-open .modal-overlay {
        align-items: stretch;
        width: 100vw;
        min-width: 0;
        padding: 0;
    }

    body.fic-editor-open .modal-box {
        min-width: 0;
        max-width: none;
        height: var(--fic-app-height);
        max-height: var(--fic-app-height);
        min-height: var(--fic-app-height);
        padding: calc(12px + var(--fic-safe-top)) max(14px, var(--fic-safe-right))
            calc(12px + var(--fic-safe-bottom)) max(14px, var(--fic-safe-left));
        border: 0;
        border-radius: 0;
    }

    body.fic-editor-open .modal-title {
        position: sticky;
        z-index: 12;
        top: calc(-12px - var(--fic-safe-top));
        min-height: 52px;
        margin: 0 calc(0px - max(14px, var(--fic-safe-right))) 16px
            calc(0px - max(14px, var(--fic-safe-left)));
        padding: calc(14px + var(--fic-safe-top)) 56px 12px max(14px, var(--fic-safe-left));
        border-bottom: 1px solid var(--border);
        background: color-mix(in srgb, var(--surface) 96%, transparent);
        backdrop-filter:none;
    }

    body.fic-editor-open .modal-close {
        position: fixed;
        z-index: 14;
        top: max(10px, var(--fic-safe-top));
        right: max(12px, var(--fic-safe-right));
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    body.fic-editor-open .editor-toolbar .tb-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    body.fic-editor-open :is(input, select, textarea, [contenteditable="true"]) {
        font-size: 16px;
    }

    body.fic-editor-open .editor-form-actions {
        position: sticky;
        z-index: 10;
        bottom: calc(-12px - var(--fic-safe-bottom));
        flex-wrap: wrap;
        margin: 18px calc(0px - max(14px, var(--fic-safe-right))) 0
            calc(0px - max(14px, var(--fic-safe-left)));
        padding: 12px max(14px, var(--fic-safe-right))
            calc(12px + var(--fic-safe-bottom)) max(14px, var(--fic-safe-left));
        border-top: 1px solid var(--border);
        background: color-mix(in srgb, var(--surface) 96%, transparent);
        backdrop-filter:none;
    }

    body.fic-editor-open .chapter-editor-actions .chapter-delete-button {
        flex: 1 0 100%;
        order: 2;
        width: 100%;
        margin: 0;
        padding-inline: 12px;
        justify-content: center;
    }

    body.fic-editor-open .chapter-editor-actions :is(#modal-cancel, #ch-submit) {
        flex: 1 1 calc(50% - 5px);
    }

    .community-hero-v2,
    .personal-hero-v2 {
        align-items: stretch;
        flex-direction: column;
    }

    .community-hub-actions {
        justify-content: flex-start;
    }

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

@media (max-width: 820px) {
    .publication-workflow-content > div {
        flex: 0 1 auto;
        width: 100%;
    }
}

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

    .publication-readiness-item + .publication-readiness-item {
        padding: 10px 0 0;
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .page,
    .page-narrow {
        padding-top: 20px;
        padding-right: max(14px, var(--fic-safe-right));
        padding-left: max(14px, var(--fic-safe-left));
    }

    .page-heading {
        align-items: start;
        flex-direction: column;
    }

    .download-dropdown {
        right: auto;
        left: 0;
    }

    .download-wrap {
        min-width: 160px;
    }

    .home-hero-v2 {
        margin-inline: -4px;
        margin-bottom: 22px;
        padding: 18px 16px;
        border-radius: var(--radius-lg);
    }

    .home-hero-title {
        font-size: 1.5rem;
    }

    .home-hero-copy {
        margin-top: 12px;
        font-size: 15px;
        line-height: 1.45;
    }

    .home-search-v2 {
        margin-top: 18px;
    }

    .home-quick-actions {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
        gap: 6px;
        padding: 10px;
    }

    .home-quick-action {
        min-width: 0;
        min-height: 44px;
        padding: 7px 10px;
    }

    .home-quick-action > span:last-child {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .home-quick-action:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .home-quick-action small {
        display: none;
    }

    .catalog-command-bar {
        grid-template-columns: minmax(0, 1fr) 48px;
    }

    .catalog-filter-toggle .catalog-filter-toggle-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .catalog-filter-panel {
        grid-template-columns: 1fr;
    }

    .catalog-tags-header {
        align-items: stretch;
        flex-direction: column;
    }

    .community-hero-v2,
    .personal-hero-v2 {
        gap: 14px;
        padding: 18px 16px;
    }

    .community-hero-v2 h1,
    .personal-hero-v2 h1 {
        font-size: clamp(27px, 8vw, 34px);
    }

    .community-hero-v2 p,
    .personal-hero-v2 p {
        line-height: 1.45;
    }

    .community-hub-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .community-hub-actions > button {
        min-width: 0;
        padding-inline: 10px;
    }

    .personal-hub-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .personal-hub-tile {
        min-height: 60px;
        gap: 8px;
        padding: 10px;
        border-radius: var(--radius-md);
    }

    .personal-hub-tile small {
        display: none;
    }

    .catalog-tag-tools {
        justify-content: space-between;
    }

    .catalog-tag-search {
        min-width: 0;
        width: 100%;
        min-height: 44px;
    }

    .tag-cloud-pill {
        min-height: 44px;
        max-width: min(100%, 220px);
    }

    .catalog-tag-mode button,
    #catalog-tags-more,
    #catalog-reset {
        min-height: 44px;
    }

    :is(.home-search-v2 input, .catalog-search-input, .catalog-tag-search, .catalog-filter-panel .filter-select) {
        font-size: 16px;
    }

    .fanfic-card {
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .fanfic-card-cover {
        width: 68px;
        height: 98px;
    }

    .fanfic-card-title {
        font-size: 16px;
    }

    .fanfic-card-summary {
        -webkit-line-clamp: 2;
    }

    .fanfic-card-tags,
    .fanfic-card-progress {
        grid-column: 1 / -1;
    }

    body:not(.fic-editor-open) .modal-overlay {
        align-items: end;
        padding: 0;
    }

    body:not(.fic-editor-open) .modal-box {
        max-height: min(92dvh, calc(var(--fic-app-height) - max(44px, var(--fic-safe-top))), 860px);
        padding: 24px max(18px, var(--fic-safe-right)) calc(22px + var(--fic-safe-bottom))
            max(18px, var(--fic-safe-left));
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

}

@media (max-width: 420px) {
    .chapter-row {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px;
    }

    .chapter-num {
        width: 24px;
    }

    .chapter-title-text {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .chapter-wc {
        margin-left: auto;
    }

    .chapter-controls {
        flex-basis: 100%;
        justify-content: flex-end;
        gap: 6px;
        margin-left: 0;
    }
}

@media (max-width: 360px) {
    .home-hero-v2 {
        gap: 4px;
        padding: 12px;
    }

    .home-hero-title {
        font-size: 1.375rem;
    }

    .home-hero-copy {
        display: block;
    }

    .home-search-v2 {
        margin-top: 12px;
    }

    .home-quick-actions {
        gap: 4px;
        padding: 6px;
    }

    .catalog-command-bar {
        grid-template-columns: 1fr;
    }

    .catalog-filter-toggle {
        width: 100%;
        justify-content: center;
    }

    .catalog-filter-toggle .catalog-filter-toggle-label {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }

    .catalog-tag-tools,
    .catalog-tags-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .catalog-tag-mode {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    #catalog-tags-more {
        width: 100%;
    }

    .logo-text {
        display: none;
    }

    .header-inner {
        gap: 8px;
        padding-right: max(12px, var(--fic-safe-right));
        padding-left: max(12px, var(--fic-safe-left));
    }

    .fanfic-card {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
    }

    .fanfic-card-cover {
        width: 58px;
        height: 84px;
    }

    .fanfic-card-summary {
        display: none;
    }

}

@media (pointer: coarse) {
    :where(.btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .filter-select) {
        min-height: 44px;
    }

    .work-tags .tag-pill,
    .work-collection-links .tag-pill {
        min-height: 36px;
        padding-inline: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (forced-colors: active) {
    :where(.fanfic-card, .catalog-tags-panel, .catalog-filter-panel, .home-hero-v2) {
        border: 1px solid CanvasText;
    }

    .mobile-create-icon {
        border: 2px solid ButtonText;
    }
}

/* source: public/css/authoring-workspace.css */
/* KatomuFic page editor. Sticky controls remain below the site/Telegram chrome. */
body[data-fic-view="authoring"] {
    --fic-shell-max: 1560px;
    --fic-workspace-sticky-top: var(--fic-header-height);
}

.authoring-workspace {
    width: min(100%, 1560px);
    margin-inline: auto;
    padding: 16px max(20px, var(--fic-safe-right)) 100px max(20px, var(--fic-safe-left));
}

.authoring-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.authoring-heading h1 {
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.authoring-exit {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--text-2);
}

#authoring-draft-status, .authoring-draft-label {
    color: var(--text-3);
    font-size: var(--fs-sm);
}

.authoring-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.authoring-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 48px;
    padding: 10px 18px;
    border-bottom: 3px solid transparent;
    color: var(--text-2);
    font-weight: 600;
}

.authoring-tabs a[aria-current="page"] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

.authoring-pane { min-width: 0; }
.authoring-pane .work-editor-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
.authoring-pane .work-card-preview { top: calc(var(--fic-header-height) + var(--fic-safe-top) + 16px); }
.authoring-pane .modal-title, .authoring-pane .authoring-steps { display: none; }
.authoring-pane .form-input { width: 100%; }
.authoring-pane .fic-document-controls { top: calc(var(--fic-header-height) + var(--fic-safe-top) + 8px); }
.authoring-pane .fic-document-focus-mode .fic-document-controls { top: 0; }
.fic-keyboard-open .mobile-bottom-nav { display: none; }
.fic-keyboard-open .authoring-workspace { padding-bottom: max(20px, var(--fic-safe-bottom)); }
.fic-keyboard-open .modal-box { max-height: calc(var(--fic-visual-height, 100dvh) - 24px); }
.fic-low-power *, .fic-low-power *::before, .fic-low-power *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}
.fic-low-power .fic-document-paper, .fic-low-power .fic-document-toolbar { box-shadow: none; }

@media (max-width: 900px) {
    .authoring-pane .work-editor-layout { grid-template-columns: minmax(0, 1fr); }
    .authoring-pane .work-card-preview { position: static; }
    .authoring-draft-label { display: none; }
}

@media (max-width: 600px) {
    .authoring-workspace:has(.fic-document-pane) .authoring-heading { margin-bottom: 12px; }
    .authoring-workspace:has(.fic-document-pane) .authoring-exit { min-height: 32px; }
    .authoring-workspace:has(.fic-document-pane) #authoring-draft-status { display: none; }
    .authoring-workspace {
        padding: 12px max(12px, var(--fic-safe-right)) 100px max(12px, var(--fic-safe-left));
    }
    .authoring-tabs { gap: 0; margin-bottom: 16px; }
    .authoring-tabs a { padding-inline: 10px; font-size: 13px; }
    .authoring-pane input, .authoring-pane textarea, .authoring-pane select { font-size: 16px; }
}