/* KoK: shared visual language for every page. */
:root {
    --site-bg: #0b0c12;
    --site-bg-soft: #101119;
    --site-surface: #14151d;
    --site-surface-raised: #1a1b25;
    --site-surface-hover: #22232e;
    --site-border: rgba(231, 226, 239, .09);
    --site-border-strong: rgba(231, 226, 239, .15);
    --site-text: #f0eef4;
    --site-muted: #a1a3b0;
    --site-dim: #777b89;
    --site-shadow: 0 22px 60px rgba(0, 0, 0, .28);
}

html { scroll-behavior: smooth; }
body {
    color: var(--site-text);
    background-color: var(--site-bg);
    background-image:
        radial-gradient(ellipse at 12% -8%, rgba(139, 50, 79, .16), transparent 34rem),
        radial-gradient(ellipse at 92% 12%, rgba(82, 65, 125, .12), transparent 38rem),
        linear-gradient(180deg, #0b0c12, #0e0f16 58%, #0b0c12);
    line-height: 1.62;
}
body.catalog-page,
body.vk-feed-page,
body.messenger-page {
    background-color: var(--site-bg);
    background-image:
        radial-gradient(ellipse at 12% -8%, rgba(139, 50, 79, .16), transparent 34rem),
        radial-gradient(ellipse at 92% 12%, rgba(82, 65, 125, .12), transparent 38rem),
        linear-gradient(180deg, #0b0c12, #0e0f16 58%, #0b0c12);
}
::selection { color: #fff; background: rgba(var(--accent-rgb), .72); }
button, input, select, textarea { font-family: inherit; }
a { text-decoration-thickness: .07em; text-underline-offset: .18em; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent-highlight);
    outline-offset: 3px;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea {
    color-scheme: dark;
}

/* A restrained frosted rail keeps the KoK navigation recognizable on every route. */
.sidebar {
    background: linear-gradient(180deg, rgba(18, 18, 25, .98), rgba(13, 14, 20, .98));
    border-right-color: var(--site-border);
    box-shadow: 14px 0 44px rgba(0, 0, 0, .17);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
.sidebar-brand {
    margin: 2px 0 18px;
    letter-spacing: -.075em;
}
.sidebar-brand::after {
    display: block;
    margin-top: 1px;
    color: var(--site-dim);
    content: "КОМИКСЫ · ИСТОРИИ · АВТОРЫ";
    font-size: .53rem;
    font-weight: 700;
    letter-spacing: .15em;
}
.sidebar-menu { gap: 4px; }
.sidebar-menu a {
    position: relative;
    min-height: 43px;
    border: 1px solid transparent;
    color: #c2c3cd;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.sidebar-menu a:hover {
    border-color: var(--site-border);
    background: rgba(255, 255, 255, .045);
    color: #fff;
}
.sidebar-menu a.active {
    border-color: rgba(var(--accent-rgb), .2);
    background: linear-gradient(105deg, rgba(var(--accent-rgb), .2), rgba(var(--accent-rgb), .07));
    box-shadow: inset 0 1px rgba(255, 255, 255, .035);
    color: #ffd1da;
}
.sidebar-menu a.active::before {
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: -1px;
    width: 3px;
    border-radius: 4px;
    background: var(--accent-highlight);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), .55);
    content: "";
}
.sidebar-menu .sidebar-upload a {
    margin-top: 3px;
    border-color: rgba(var(--accent-rgb), .28);
    background: linear-gradient(115deg, rgba(var(--accent-rgb), .2), rgba(111, 53, 83, .13));
    color: #ffd1da;
}
.sidebar-menu .unread-badge {
    box-shadow: 0 0 0 3px rgba(14, 14, 20, .9);
}
.sidebar-user {
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
}

/* Shared panels and controls. Keep route-specific layouts, just give them one finish. */
.community-container .community-panel,
.community-container .community-section,
.settings-card,
.settings-preview-panel,
.admin-card,
.admin-section,
.feed-composer,
.story-composer,
.stories-shelf,
.notifications-empty,
.collection-card {
    border-color: var(--site-border);
    background-color: var(--site-surface);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .13);
}
.community-container .community-panel,
.community-container .community-section,
.settings-card,
.settings-preview-panel,
.admin-section { border-radius: 18px; }
.community-container .community-panel h1,
.community-container .community-panel h2,
.settings-card h2,
.settings-preview-panel h2,
.admin-section h2 { color: #f2eff5; letter-spacing: -.025em; }
.community-quick-links a,
.profile-section-nav a,
.catalog-sort-link,
.chapter-pill,
.profile-pagination a {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.community-quick-links a {
    padding: 8px 12px;
    border: 1px solid var(--site-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, .025);
    color: #e5c5ce;
    text-decoration: none;
}
.community-quick-links a:hover {
    border-color: rgba(var(--accent-rgb), .4);
    background: rgba(var(--accent-rgb), .1);
}
.community-container input:not([type="checkbox"]):not([type="radio"]),
.community-container textarea,
.community-container select,
.settings-card textarea,
.settings-password,
.settings-username,
.settings-select,
.admin-broadcast-form input[type="text"],
.admin-broadcast-form textarea {
    border-color: var(--site-border-strong);
    border-radius: 11px;
    background-color: #101118;
}
.community-container input:focus,
.community-container textarea:focus,
.community-container select:focus,
.settings-card textarea:focus,
.settings-password:focus,
.settings-username:focus,
.settings-select:focus {
    border-color: var(--accent-highlight);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .13);
}
.btn, .auth-btn, .settings-save, .feed-submit {
    border: 1px solid rgba(var(--accent-rgb), .42);
    border-radius: 12px;
    background: linear-gradient(125deg, #c44360, #96364f);
    box-shadow: 0 8px 22px rgba(var(--accent-rgb), .16);
    color: #fff;
    font-weight: 700;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn:hover, .auth-btn:hover, .settings-save:hover, .feed-submit:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 11px 28px rgba(var(--accent-rgb), .22);
}
.btn-secondary {
    border-color: var(--site-border-strong);
    background: var(--site-surface-raised);
    box-shadow: none;
    color: #e1dfe7;
}
.btn-secondary:hover { background: var(--site-surface-hover); }
button:disabled, .btn[aria-disabled="true"] { transform: none; filter: none; }

/* Home/catalog: a fuller editorial hero, then quiet, useful comic cards. */
.catalog-page .catalog-container {
    width: min(100%, 1200px);
    max-width: 1200px;
    margin: 24px auto 80px;
    padding-inline: clamp(14px, 2.2vw, 30px);
}
.catalog-page .new-comics-section { margin-bottom: clamp(26px, 4vw, 46px); }
.catalog-page .new-comics-heading { margin-bottom: 16px; }
.catalog-page .new-comics-heading > div:first-child > span {
    display: block;
    margin-bottom: 5px;
    color: var(--accent-highlight);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .17em;
}
.catalog-page .new-comics-heading h2 {
    color: #f7f2f5;
    font-size: clamp(1.35rem, 2.3vw, 1.8rem);
    letter-spacing: -.045em;
}
.catalog-page .new-comics-heading p {
    display: block;
    margin-top: 3px;
    color: var(--site-muted);
    font-size: .88rem;
}
.catalog-page .new-comics-controls button {
    width: 36px;
    height: 36px;
    border-color: var(--site-border-strong);
    border-radius: 50%;
    background: rgba(18, 19, 27, .84);
    transition: background-color .18s ease, transform .18s ease;
}
.catalog-page .new-comics-controls button:hover { transform: translateY(-1px); background: #29232d; }
.catalog-page .new-comics-carousel {
    border-color: rgba(255, 255, 255, .13);
    border-radius: 22px;
    background: #14141c;
    box-shadow: var(--site-shadow);
}
.catalog-page .new-comics-slides { height: clamp(285px, 31vw, 365px); }
.catalog-page .new-comic-slide { transition: opacity .35s ease; }
.catalog-page .new-comic-shade {
    background: linear-gradient(90deg, rgba(9, 10, 16, .96) 0%, rgba(9, 10, 16, .83) 47%, rgba(9, 10, 16, .18) 100%);
}
.catalog-page .new-comic-backdrop { filter: saturate(.72) brightness(.84); }
.catalog-page .new-comic-content { gap: clamp(20px, 3vw, 36px); padding: 28px 30px 42px; }
.catalog-page .new-comic-cover {
    width: clamp(112px, 14vw, 150px);
    height: clamp(158px, 19vw, 212px);
    border-color: rgba(255, 255, 255, .56);
    border-radius: 12px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .4);
}
.catalog-page .new-comic-title { font-size: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: -.045em; }
.catalog-page .new-comic-description { max-width: 510px; color: #d0cbd4; font-size: .9rem; }
.catalog-page .new-comic-cta {
    padding: 9px 14px;
    border: 1px solid rgba(var(--accent-rgb), .42);
    border-radius: 999px;
    background: linear-gradient(120deg, rgba(var(--accent-rgb), .42), rgba(94, 47, 72, .5));
    color: #fff;
    font-weight: 700;
    transition: transform .18s ease, background-color .18s ease;
}
.catalog-page .new-comic-slide:hover .new-comic-cta { transform: translateY(-1px); background-color: rgba(var(--accent-rgb), .44); }
.catalog-page .catalog-publish-button {
    border-color: rgba(var(--accent-rgb), .34);
    border-radius: 14px;
    background: linear-gradient(110deg, rgba(var(--accent-rgb), .16), rgba(255, 255, 255, .025));
    color: #ffd0d9;
    transition: border-color .18s ease, transform .18s ease, background-color .18s ease;
}
.catalog-page .catalog-publish-button:hover { transform: translateY(-1px); border-color: var(--accent-highlight); }
.catalog-page .community-catalog-filters,
.catalog-page .community-filters {
    padding: 13px 15px;
    border: 1px solid var(--site-border);
    border-radius: 16px;
    background: rgba(20, 21, 29, .84);
}
.catalog-page .community-catalog-filters > label { flex: 1 1 145px; min-width: 0; color: #c5c2ce; }
.catalog-page .community-catalog-filters select {
    width: 100%;
    max-width: none;
    min-height: 42px;
    border-color: var(--site-border-strong);
    border-radius: 10px;
    background: #101118;
}
.catalog-page .community-catalog-filters > a {
    align-self: flex-end;
    padding: 9px 6px;
    color: #d1a9b5;
    font-size: .83rem;
    text-decoration: none;
}
.catalog-page .community-catalog-filters > a:hover { color: #ffd0d9; }
.catalog-page .catalog-sort { border-color: var(--site-border); background: #11121a; }
.catalog-page .catalog-sort-link { padding: 7px 11px; }
.catalog-page .catalog-sort-link.is-active { background: rgba(var(--accent-rgb), .24); color: #ffd0d9; }
.catalog-page .catalog-comics-grid { gap: 18px; }
.catalog-page .comic-card {
    border-color: var(--site-border);
    border-radius: 17px;
    background: linear-gradient(160deg, #191a23, #12131a 72%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .13);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.catalog-page .comic-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--accent-rgb), .5);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
}
.catalog-page .comic-cover,
.catalog-page .comic-cover.has-banner { background: #171720; }
.catalog-page .comic-info { padding: 16px; }
.catalog-page .comic-info h3 { font-size: 1rem; letter-spacing: -.015em; }
.catalog-page .comic-card-footer { border-color: var(--site-border); }
.catalog-page footer { border-color: var(--site-border); color: var(--site-dim); }
.comic-age-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 3px 8px;
    border: 1px solid var(--site-border-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, .055);
    color: #d8d5de;
    font-size: .68rem;
    font-weight: 750;
    line-height: 1.25;
}
.comic-age-badge.is-adult {
    border-color: rgba(224, 90, 113, .48);
    background: rgba(189, 60, 86, .17);
    color: #ffc2cc;
}

/* Page headings and cards retain their own content hierarchy while sharing spacing. */
.feed-page-title, .settings-heading h1, .publish-head h1, .admin-heading h1,
.notifications-heading h1, .stories-heading h1, .tag-page-heading h1,
.profile-page h1, .android-page h1 {
    color: #f5f1f6;
    letter-spacing: -.045em;
}
.vk-feed-page .feed-page { width: min(100%, 1240px); margin-inline: auto; }
.feed-intro {
    border-color: var(--site-border);
    border-radius: 22px;
    box-shadow: var(--site-shadow);
}
.feed-composer, .feed-topics-card, .feed-navigation-card, .feed-discover-card {
    border-color: var(--site-border);
    border-radius: 17px;
}
.profile-post-item {
    border-color: var(--site-border);
    border-radius: 19px;
    background: linear-gradient(150deg, #191a23, #12131a);
}
.notifications-wrap, .stories-page, .settings-page, .publish-page, .admin-wrap,
.reader-container, .community-container {
    width: min(calc(100% - 28px), 1180px);
    margin-inline: auto;
}
.notifications-wrap, .stories-page, .settings-page, .publish-page, .admin-wrap,
.community-container { padding-top: clamp(22px, 4vw, 42px); }
.community-container { padding-bottom: max(130px, 8vh); }
.notifications-top, .stories-heading, .settings-heading, .publish-head, .admin-heading { margin-bottom: 25px; }
.notification-item {
    border-color: var(--site-border);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(25, 26, 35, .94), rgba(18, 19, 26, .94));
    transition: border-color .18s ease, transform .18s ease, background-color .18s ease;
}
.notification-item:hover { transform: translateY(-1px); border-color: rgba(var(--accent-rgb), .35); }
.notification-item.unread { border-color: rgba(var(--accent-rgb), .32); }
.stories-shelf, .story-composer { border-radius: 20px; }
.story-rail { border-color: var(--site-border); background: linear-gradient(120deg, #171821, #17141c); }
.profile-section-nav, .profile-collection-disclosure, .profile-post-item {
    border-color: var(--site-border);
}
.admin-card, .admin-section { background: linear-gradient(150deg, #191a23, #13141a); }
.admin-card strong { color: #ffd0d9; }
.android-page .profile-header {
    border-color: rgba(var(--accent-rgb), .26);
    border-radius: 26px;
    background:
        radial-gradient(ellipse at 90% 5%, rgba(132, 83, 152, .24), transparent 45%),
        linear-gradient(145deg, #211b28, #14151d 70%);
    box-shadow: var(--site-shadow);
}
.android-page main > .main-layout { max-width: 1040px; margin: 30px auto 90px; }
.android-page .content-area > h2 { margin: 30px 0 10px; }
.android-page .content-area > ul,
.android-page .content-area > ol {
    margin: 0;
    padding: 18px 24px 18px 42px !important;
    border: 1px solid var(--site-border);
    border-radius: 17px;
    background: rgba(20, 21, 29, .88);
}

/* Auth screens share one compact, accessible card instead of duplicated inline CSS. */
.auth-form {
    position: relative;
    isolation: isolate;
    width: min(440px, calc(100% - 32px));
    max-width: 440px;
    margin: clamp(34px, 9vh, 100px) auto 48px;
    padding: clamp(24px, 5vw, 38px);
    overflow: hidden;
    border: 1px solid rgba(var(--accent-rgb), .26);
    border-radius: 25px;
    background:
        radial-gradient(ellipse at 100% 0, rgba(119, 74, 139, .17), transparent 42%),
        linear-gradient(150deg, #1b1b24, #13141b 70%);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .4);
}
.auth-form::before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 18%;
    left: 18%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-highlight), transparent);
    content: "";
    opacity: .75;
}
.auth-form h1, .auth-form h2 {
    margin-bottom: 22px;
    color: #fff;
    font-size: 1.65rem;
    letter-spacing: -.04em;
    text-align: center;
}
.auth-form h1::before, .auth-form h2::before {
    display: block;
    margin-bottom: 8px;
    color: var(--accent-highlight);
    content: "KoK";
    font-size: 2.15rem;
    font-weight: 900;
    letter-spacing: -.09em;
    line-height: 1.1;
    text-shadow: 0 0 28px rgba(var(--accent-rgb), .3);
}
.auth-form .form-group { margin-bottom: 17px; }
.auth-form .form-group label { display: block; margin-bottom: 7px; color: #d7d3dd; font-size: .86rem; font-weight: 600; }
.auth-form .form-group input {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid var(--site-border-strong);
    border-radius: 12px;
    background: rgba(9, 10, 15, .65);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.auth-form .form-group input:focus { border-color: var(--accent-highlight); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .13); outline: 0; }
.auth-btn { width: 100%; min-height: 46px; cursor: pointer; }
.auth-link {
    display: block;
    margin-top: 15px;
    color: #b5b2bf;
    text-align: center;
    text-decoration: none;
    transition: color .18s ease;
}
.auth-link:hover { color: #ffd0d9; }
.auth-link-home { margin-top: 9px; font-size: .82rem; }
.birthdate-intro { margin: -8px 0 20px; color: #c2bfcb; text-align: center; }
.birthdate-privacy { margin: 10px 0 6px; color: #aaa7b3; font-size: .8rem; line-height: 1.5; }
.birthdate-self-report { margin: 0 0 17px; color: #83808b; font-size: .75rem; }
.auth-logout-button {
    display: block;
    width: 100%;
    margin-top: 15px;
    border: 0;
    background: transparent;
    color: #aaa7b3;
    font-size: .85rem;
    cursor: pointer;
}
.auth-logout-button:hover { color: #ffd0d9; }
.auth-flashes {
    margin-bottom: 18px;
    padding: 11px 14px;
    border: 1px solid rgba(var(--accent-rgb), .35);
    border-radius: 12px;
    background: rgba(var(--accent-rgb), .1);
    color: var(--accent-highlight);
    font-size: .88rem;
    text-align: center;
}

/* Reading remains calm and image-first; the controls stay legible above the artwork. */
.reader-container { padding-top: 22px; padding-bottom: 110px; }
.reader-controls {
    border-color: var(--site-border-strong);
    background: rgba(17, 18, 25, .94);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .26);
}
.reader-mode-panel, .chapter-strip, .comment-box {
    border-color: var(--site-border);
    border-radius: 17px;
    background: linear-gradient(145deg, #191a23, #12131a);
}
.comic-page {
    border-radius: 8px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .42);
}
.chapter-pill { border-color: var(--site-border-strong); background: #171821; }
.chapter-pill:hover { border-color: rgba(var(--accent-rgb), .45); color: #ffd0d9; }

footer { color: var(--site-muted); }

@media (min-width: 769px) {
    .catalog-page .catalog-container,
    .vk-feed-page .feed-page,
    .reader-container,
    .community-container,
    .settings-page,
    .publish-page,
    .admin-wrap,
    .notifications-wrap,
    .stories-page {
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 768px) {
    .sidebar {
        border-top-color: var(--site-border-strong);
        background: rgba(15, 16, 23, .98);
        box-shadow: 0 -10px 32px rgba(0, 0, 0, .28);
        backdrop-filter: none;
    }
    .sidebar-menu { gap: 2px; }
    .sidebar-menu a { border-radius: 12px; }
    .sidebar-menu a.active::before {
        top: auto;
        bottom: 3px;
        right: auto;
        left: 50%;
        width: 18px;
        height: 3px;
        transform: translateX(-50%);
    }
    .catalog-page .catalog-container { width: 100%; padding-inline: 13px; }
    .catalog-page .new-comics-slides { height: 290px; }
    .catalog-page .new-comic-content { gap: 15px; padding: 19px 16px 38px; }
    .catalog-page .new-comic-cover { width: 90px; height: 128px; }
    .catalog-page .new-comic-title { font-size: clamp(1.2rem, 5vw, 1.7rem); }
    .catalog-page .new-comic-description { font-size: .78rem; }
    .notifications-wrap, .stories-page, .settings-page, .publish-page, .admin-wrap,
    .reader-container, .community-container { width: min(calc(100% - 20px), 1180px); }
    .reader-container .comic-page { border-radius: 0; box-shadow: none; }
}
@media (max-width: 430px) {
    .catalog-page .new-comics-heading p { max-width: 29ch; font-size: .78rem; }
    .catalog-page .new-comics-slides { height: 270px; }
    .catalog-page .new-comic-content { gap: 12px; padding: 15px 12px 34px; }
    .catalog-page .new-comic-cover { width: 76px; height: 108px; border-radius: 8px; }
    .catalog-page .new-comic-meta { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}