/* ==========================================================================
   Knov — graphite theme
   One palette for the whole site, taken from the title rating window:
   black page, graphite surfaces, brushed-graphite primary actions.
   Red is reserved for likes only.
   Loaded last on every page, so it can align older page styles.
   ========================================================================== */

:root {
    --g-ink: #050506;          /* page */
    --g-surface: #141519;      /* panels, header */
    --g-surface-2: #1a1b1f;    /* cards, windows */
    --g-raised: #23252b;       /* buttons, chips, inputs on cards */
    --g-hover: #2c2f37;
    --g-line: #2f3138;
    --g-line-strong: #4a4d56;
    --g-text: #e6e7eb;
    --g-muted: #a2a6b0;
    --g-dim: #6b6e7a;
    --g-action: linear-gradient(135deg, #4a4e58 0%, #5a5f6b 55%, #696f7c 100%);
    --g-action-hover: linear-gradient(135deg, #555a65 0%, #656a77 55%, #757b88 100%);
    --g-action-line: #8b909d;
    --g-focus: #c8ccd4;
    --g-like: #ff424d;
    --g-radius-s: 8px;
    --g-radius-m: 12px;
    --g-radius-l: 16px;
    --g-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* legacy variables used by older stylesheets */
    --accent-blue: #555a66;
    --accent-blue-hover: #5f6470;
    --accent-color: #c8ccd4;

    color-scheme: dark;
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The reader (body.theme-light / body.theme-dark) keeps its own page colors and book font */
body:not(.theme-light):not(.theme-dark) {
    background-color: var(--g-ink);
    color: var(--g-text);
    font-family: var(--g-font);
}

/* One UI typeface everywhere (chapter text keeps the reader's own font) */
button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.main-header, .main-nav, .logo, .footer-logo, .footer-col h4,
.section-title-accent, .card h3, .pop-title, .update-info a,
.novel-info, .novel-info h1, .tab-link, .similar-title, .category-info h3 {
    font-family: var(--g-font);
}

h1, h2, h3 { letter-spacing: -0.01em; }
h1 { font-weight: 800; }
h2 { font-weight: 700; }

::selection { background: #4a4e58; color: #fff; }

a { color: inherit; }

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

/* Scrollbars */
* { scrollbar-color: #3a3d45 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #33363e; border-radius: 10px; border: 2px solid var(--g-ink); }
::-webkit-scrollbar-thumb:hover { background: #4a4d56; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Header (same on every page) ---------- */
.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(20, 21, 25, 0.88);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--g-line);
    padding: 10px clamp(16px, 3vw, 40px);
    min-height: 60px;
    box-sizing: border-box;
    flex-wrap: nowrap;
    gap: clamp(12px, 2vw, 28px);
}

.logo {
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.main-nav { gap: clamp(14px, 1.8vw, 26px); flex-wrap: nowrap; }

.main-nav a {
    color: var(--g-muted) !important;     /* overrides old inline colors on single links */
    font-weight: 600;
    font-size: 0.92rem;
    padding: 6px 0;
    white-space: nowrap;
}

.main-nav a:hover,
.main-nav a.active-nav,
.main-nav a[aria-current="page"] {
    color: #fff !important;
}

.main-nav a.active-nav::after,
.main-nav a[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--g-focus);
}

.search-container {
    flex: 1 1 220px;
    min-width: 140px;
    max-width: 360px;
}

.main-nav, .logo-wrapper { flex-shrink: 0; }

/* Mid-size screens: one row, nothing pushed off-screen */
@media (max-width: 1100px) and (min-width: 769px) {
    .main-nav { gap: 14px; }
    .main-nav a { font-size: 0.86rem; }
    .main-header .profile-link { display: none; }
}

.search-input-wrapper {
    background: var(--g-surface-2);
    border: 1px solid var(--g-line);
    border-radius: 10px;
}

.search-input-wrapper:focus-within {
    border-color: var(--g-line-strong);
    box-shadow: 0 0 0 3px rgba(200, 204, 212, 0.08);
}

#search-results,
#mobile-search-results,
.search-results {
    background: var(--g-surface-2) !important;
    border: 1px solid var(--g-line) !important;
    border-radius: var(--g-radius-m) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6) !important;
}

/* Login / Register in the header */
.main-header a[href="/auth/login"],
.main-header a[href="/auth/register"] {
    color: var(--g-text) !important;
    border: 1px solid var(--g-line-strong) !important;
    background: var(--g-raised) !important;
    border-radius: 9px !important;
    padding: 7px 14px !important;
    font-weight: 600;
    font-size: 0.88rem;
    margin-right: 0 !important;
    text-decoration: none;
}

.main-header a[href="/auth/register"] {
    background: var(--g-action) !important;
    border-color: var(--g-action-line) !important;
    color: #fff !important;
}

.main-header .user-profile { gap: 12px; }

.burger-menu,
#notification-panel {
    background: var(--g-surface-2) !important;
    border: 1px solid var(--g-line) !important;
    border-radius: var(--g-radius-m) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6) !important;
}

/* ---------- Buttons ---------- */
/* Primary: the brushed graphite of the rating window's selected score */
.read-btn,
.btn-primary,
.btn-submit,
.submit-btn,
.publish-btn,
.save-btn,
.auth-btn,
.patreon-btn,
.create-topic-btn,
.not-found-btn,
.unlock-with-credits-btn,
.locked-patreon-btn,
.category-select-btn,
.view-more-btn,
.um-confirm,
.filter-action-primary,
.comment-form button[type="submit"],
.reply-form button[type="submit"] {
    background: var(--g-action) !important;
    border: 1px solid var(--g-action-line) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 18px rgba(0, 0, 0, 0.35) !important;
    text-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.read-btn:hover,
.btn-primary:hover,
.btn-submit:hover,
.submit-btn:hover,
.publish-btn:hover,
.save-btn:hover,
.auth-btn:hover,
.patreon-btn:hover,
.create-topic-btn:hover,
.not-found-btn:hover,
.unlock-with-credits-btn:hover,
.locked-patreon-btn:hover,
.category-select-btn:hover,
.view-more-btn:hover,
.um-confirm:hover,
.filter-action-primary:hover,
.comment-form button[type="submit"]:hover,
.reply-form button[type="submit"]:hover {
    background: var(--g-action-hover) !important;
    border-color: #a0a5b1 !important;
}

.read-btn:active,
.btn-primary:active,
.submit-btn:active { transform: translateY(1px); }

.read-btn.disabled,
.read-btn[aria-disabled="true"],
button:disabled {
    background: var(--g-raised) !important;
    border-color: var(--g-line) !important;
    color: var(--g-dim) !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* Secondary: raised graphite */
.btn,
.btn-secondary,
.btn-cancel,
.um-cancel,
.pagination-btn,
.filter-button,
.force-refresh-btn,
.reply-btn,
.profile-btn,
.action-btn:not(.read-btn),
.expand-comments-btn,
.show-more-comments-btn,
.message-action-btn,
.discord-copy-btn,
.subscription-detail-btn {
    background: var(--g-raised);
    border: 1px solid var(--g-line-strong);
    color: var(--g-text);
    border-radius: 9px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn:hover,
.btn-secondary:hover,
.btn-cancel:hover,
.um-cancel:hover,
.pagination-btn:hover,
.filter-button:hover,
.force-refresh-btn:hover,
.reply-btn:hover,
.profile-btn:hover,
.action-btn:not(.read-btn):hover,
.expand-comments-btn:hover,
.show-more-comments-btn:hover,
.message-action-btn:hover,
.discord-copy-btn:hover,
.subscription-detail-btn:hover {
    background: var(--g-hover);
    border-color: #6a6e79;
    color: #fff;
}

.pagination-btn.active,
.pagination-btn[aria-current="page"] {
    background: var(--g-action) !important;
    border-color: var(--g-action-line) !important;
    color: #fff !important;
}

/* Inline SVG icons (replace emoji and text glyphs) */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex-shrink: 0;
}
.back-link { display: inline-flex; align-items: center; gap: 6px; }
.close-modal, .filter-close, .activity-close, .reward-notification-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.chat-empty-icon { font-size: 3rem; line-height: 1; color: var(--g-dim); opacity: 1; }
.new-messages-indicator { display: inline-flex; align-items: center; gap: 6px; }
.island-setting-btn .icon { width: 1.1em; height: 1.1em; }
#profile-like-count .icon, .comment-heart-icon .icon { vertical-align: -0.15em; }

/* Chat: same black page and graphite panels as the rest of the site */
.chat-container { background: var(--g-ink) !important; }
.chat-wrapper { background: var(--g-surface); border-color: var(--g-line); }
.chat-input-area {
    background: var(--g-surface) !important;
    border-top-color: var(--g-line) !important;
}
.chat-input-wrapper {
    background: var(--g-surface-2) !important;
    border-color: var(--g-line) !important;
}
.chat-input-wrapper:focus-within {
    border-color: var(--g-line-strong) !important;
    box-shadow: none !important;
}

/* Mobile bottom bar: the site icon sits without a frame */
.mobile-nav-item.home-btn,
.mobile-nav-item.home-btn:hover,
.mobile-nav-item.home-btn.active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none;
}
.mobile-nav-item.home-btn img { border: none !important; box-shadow: none !important; }

/* Novel page: the ⋮ menu is a bare glyph, its menu items are plain rows */
.admin-btn,
.admin-btn:hover,
.admin-btn:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--g-muted);
}
.admin-btn:hover { color: #fff; }

.admin-dropdown-item,
.admin-dropdown-form .admin-dropdown-item,
.admin-dropdown-form button[type="submit"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--g-text) !important;
    font-weight: 500;
    border-radius: 0 !important;
}
.admin-dropdown-item:hover { background: var(--g-hover) !important; }

/* Tabs: light underline instead of a colored one */
.tab-link,
.tab-btn,
.chapter-tab-btn,
.leaderboard-tab-btn {
    color: var(--g-muted);
    font-weight: 600;
}

.tab-link:hover,
.tab-btn:hover,
.chapter-tab-btn:hover,
.leaderboard-tab-btn:hover { color: #fff; }

.tab-link.active {
    color: #fff;
    border-bottom-color: var(--g-focus) !important;
}

.tab-btn.active,
.chapter-tab-btn.active,
.leaderboard-tab-btn.active {
    background: var(--g-raised) !important;
    border-color: var(--g-line-strong) !important;
    color: #fff !important;
}

.tabs { border-bottom-color: var(--g-line) !important; }

/* Chips / tags */
.tag, .novel-tag, .tags a, .tag-list a, .filter-chip span, .genre-tag {
    background: var(--g-raised);
    border: 1px solid var(--g-line);
    color: var(--g-text);
}

.tag:hover, .novel-tag:hover, .tags a:hover, .tag-list a:hover, .genre-tag:hover {
    border-color: var(--g-line-strong);
    background: var(--g-hover);
}

/* Inputs outside of windows */
body:not(.theme-light) input:not([type=checkbox]):not([type=radio]):not([type=range]):not(#global-search-input):not(#mobile-search-input),
body:not(.theme-light) textarea,
body:not(.theme-light) select {
    background-color: var(--g-surface-2);
    border-color: var(--g-line);
    color: var(--g-text);
}

input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
textarea:focus,
select:focus {
    border-color: var(--g-line-strong);
    outline: none;
    box-shadow: 0 0 0 3px rgba(200, 204, 212, 0.08);
}

input[type=checkbox], input[type=radio], input[type=range], progress { accent-color: #9299a6; }

/* Badges that used to be red/blue/gold */
.badge, .new-chapter-badge, .notification-count, .unread-count, .count-badge, .filter-count {
    background: var(--g-action) !important;
    border: 1px solid var(--g-action-line);
    color: #fff !important;
}

/* ---------- Ratings: graphite stars ---------- */
.star.avg-full { color: #8b909d; }
.star.user-full, .star.hover-full { color: #e3e5ea; }
.star.avg-half {
    background: linear-gradient(90deg, #8b909d 50%, #3a3d45 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.star.user-half, .star.hover-half {
    background: linear-gradient(90deg, #e3e5ea 50%, #3a3d45 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- Likes: the only red on the site ---------- */
#like-btn.liked,
.dynamic-like-btn.liked,
.like-comment-btn.liked,
.like-reply-btn.liked,
.chapter-likes.liked,
.comment-heart-icon.liked,
.liked .comment-heart-icon,
.like-btn.liked,
.liked svg {
    color: var(--g-like) !important;
}

/* ---------- Cards & covers ---------- */
.content-section,
.similar-section,
.novel-header,
.footer {
    border-color: var(--g-line);
}

.content-section {
    background: var(--g-surface);
    border: 1px solid var(--g-line);
    border-radius: var(--g-radius-l);
}

.card {
    background: transparent;
    color: var(--g-text);
}

.card img,
.similar-card img,
.novel-cover img,
.bookmark-cover,
.pop-img,
.update-cover-art {
    background: var(--g-raised);
    border-radius: 10px;
}

.card h3 {
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--g-text);
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
}

/* Fandom label pulled out of "[Fandom] Title" */
.card-fandom {
    display: block;
    margin-top: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--g-dim);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.similar-card .card-fandom { margin-top: 0; }

.card:hover h3,
.similar-card:hover .similar-title { color: #fff; }

/* Covers lift slightly on hover (desktop pointers only) */
@media (hover: hover) {
    .card img, .similar-card img { transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .card:hover img, .similar-card:hover img {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
    }
}

/* Carousel arrows: always discoverable on desktop, not only on hover */
.carousel-arrow {
    background: rgba(26, 27, 31, 0.92);
    border: 1px solid var(--g-line-strong);
    color: var(--g-text);
    opacity: 0.75;
    pointer-events: auto;
}
.carousel-arrow:hover {
    background: var(--g-hover);
    border-color: #6a6e79;
    opacity: 1;
}

/* Edge fade on horizontal lists that have no arrows */
.similar-scroll {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
    padding-right: 48px;
}

/* Sections are visible right away; no blank screen while waiting for the scroll observer */
.fade-in-section {
    opacity: 1;
    transform: none;
}

/* ---------- Catalog ---------- */
.category-grid {
    grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 14vw, 190px), 1fr));
    gap: 18px;
}

.category-card {
    background: var(--g-surface-2) !important;
    border: 1px solid var(--g-line);
    box-shadow: none !important;
}

.category-card:hover {
    border-color: var(--g-line-strong);
    transform: translateY(-3px);
}

.category-info {
    background: var(--g-surface-2) !important;
    text-align: left;
    padding: 12px 14px;
}

.category-info h3 { font-size: 1rem; }

.work-count {
    color: var(--g-dim) !important;
    font-size: 0.8rem;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ---------- Novel page ---------- */
.novel-info h1 {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.read-btn.expanded {
    min-height: 46px;
    font-size: 1rem;
}

/* ---------- Footer ---------- */
.footer, .site-footer, footer {
    background: var(--g-surface);
    border-top: 1px solid var(--g-line);
}

.footer-col a { color: var(--g-muted); }
.footer-col a:hover { color: #fff; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .main-header {
        position: sticky;
        flex-wrap: wrap;
        padding: 10px 16px;
        min-height: 0;
    }

    .content-section {
        border-radius: var(--g-radius-m);
        padding-left: 14px;
        padding-right: 14px;
    }

    .card h3 { font-size: 0.8rem; }
    .card-fandom { font-size: 0.68rem; }

    .category-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }

    .read-btn.expanded { min-height: 48px; }

    /* Comfortable touch targets */
    .tab-link, .pagination-btn, .btn, .btn-secondary, .reply-btn { min-height: 40px; }

    .similar-scroll {
        -webkit-mask-image: none;
        mask-image: none;
        padding-right: 0;
    }
}

@media (max-width: 400px) {
    .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile bottom navigation and side menu */
.mobile-nav, .mobile-bottom-nav, .mobile-side-menu, .mobile-menu {
    background: rgba(20, 21, 25, 0.96) !important;
    border-color: var(--g-line) !important;
}

.mobile-nav a, .mobile-bottom-nav a, .mobile-menu-item {
    color: var(--g-muted) !important;
}

.mobile-nav a.active, .mobile-bottom-nav a.active, .mobile-menu-item.active,
.mobile-nav a:hover, .mobile-menu-item:hover {
    color: #fff !important;
}

.mobile-menu-item svg { color: currentColor !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}