@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #0a0a0a;
    color: #ffffff;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

header {
    background: rgba(15, 15, 15, 0.9);
    backdrop-filter: blur(10px);
    padding: 1rem 0;
    border-bottom: 1px solid rgba(231, 76, 60, 0.2);
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.6rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.logo span {
    color: #e74c3c;
    text-shadow: 0 0 15px rgba(231, 76, 60, 0.5);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 15px;
}

.nav-links a {
    color: #eee;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s;
}

.nav-links a:hover {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
}

.search-bar input {
    padding: 0.6rem 1.2rem;
    border-radius: 12px;
    border: 1px solid #222;
    background: #151515;
    color: #fff;
    outline: none;
    transition: 0.3s;
}

.search-bar input:focus {
    border-color: #e74c3c;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.2);
}

.hero {
    text-align: center;
    padding: 80px 0;
    background: radial-gradient(circle at center, rgba(231, 76, 60, 0.1) 0%, transparent 70%);
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    letter-spacing: -2px;
}

.hero p {
    color: #888;
    font-size: 1.2rem;
}

.comic-grid {
    padding: 40px 0;
}

.comic-grid h2 {
    margin-bottom: 30px;
    font-size: 1.8rem;
    font-weight: 800;
    border-left: 5px solid #e74c3c;
    padding-left: 15px;
}

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

.comic-card {
    background: #151515;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid #222;
    text-decoration: none;
}

.comic-card:hover {
    transform: translateY(-10px);
    border-color: #e74c3c;
    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
}

.comic-cover {
    position: relative;
    display: block;
    height: 320px;
    overflow: hidden;
    background: #101010;
}

.comic-cover > img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: 0.3s;
}

.comic-cover.has-banner {
    height: 230px;
    background: linear-gradient(135deg, #251713, #101010);
}

.comic-cover .comic-banner {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comic-cover.has-banner::after {
    position: absolute;
    inset: 0;
    content: '';
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.35));
    pointer-events: none;
}

.comic-like-count { z-index: 2; }

.comic-cover .comic-poster {
    position: absolute;
    z-index: 1;
    bottom: 14px;
    left: 16px;
    width: 78px;
    height: 108px;
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 9px;
    object-fit: cover;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.comic-card:hover .comic-cover img {
    filter: brightness(1.1);
}

.comic-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 28px;
    width: 100%;
    min-height: 300px;
    margin: 16px 0 30px;
    padding: 36px;
    overflow: hidden;
    border: 1px solid #282828;
    border-radius: 22px;
    background-color: #161616;
    background-position: center;
    background-size: cover;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.comic-hero::before {
    position: absolute;
    inset: 0;
    content: '';
    background: linear-gradient(90deg, rgba(8, 8, 8, 0.96), rgba(8, 8, 8, 0.72) 48%, rgba(8, 8, 8, 0.22));
}

.comic-hero-poster,
.comic-hero-info {
    position: relative;
    z-index: 1;
}

.comic-hero-poster {
    flex: 0 0 160px;
    width: 160px;
    height: 220px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 14px;
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.6);
}

.comic-hero-info { max-width: 700px; }
.comic-hero-info h1 { margin: 8px 0 10px; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; }
.comic-hero-info p { max-width: 620px; color: #ddd; }
.comic-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; color: #ddd; }
.comic-hero-meta > span { padding: 6px 11px; border: 1px solid rgba(255,255,255,0.16); border-radius: 20px; background: rgba(10,10,10,0.5); font-size: 0.82rem; }
.comic-hero-meta .account-badges { padding: 0; border: 0; background: transparent; font-size: inherit; }
.comic-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }

.comic-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 9px 16px;
    border: 1px solid rgba(231, 76, 60, .5);
    border-radius: 12px;
    background: rgba(15, 15, 15, .75);
    color: #fff;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.comic-like-btn:hover, .comic-like-btn.liked { background: rgba(231, 76, 60, .2); border-color: #e74c3c; }
.comic-like-btn strong { color: #ff887c; }

.comic-edit-panel {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 28px;
    border: 1px solid #292929;
    border-radius: 14px;
    background: #141414;
    overflow: hidden;
}

.comic-edit-panel > summary {
    padding: 14px 18px;
    color: #eee;
    font-weight: 700;
    cursor: pointer;
}

.comic-edit-panel[open] > summary { border-bottom: 1px solid #292929; color: #ff887c; }
.comic-edit-panel form { padding: 18px; }
.comic-edit-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.comic-edit-fields label { display: grid; gap: 7px; color: #aaa; font-size: .85rem; }
.comic-edit-fields input, .comic-edit-fields textarea, .comic-edit-fields select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #333;
    border-radius: 9px;
    background: #0b0b0b;
    color: #fff;
    font: inherit;
}
.comic-edit-fields textarea { resize: vertical; }
.comic-edit-wide { grid-column: 1 / -1; }
.comic-edit-panel .comic-delete-form { padding: 15px 18px; border-top: 1px solid #292929; }
.comic-delete-button { padding: 9px 14px; border: 1px solid #83403d; border-radius: 9px; background: #321e20; color: #ffb4aa; font: inherit; cursor: pointer; }
.comic-delete-button:hover { background: #54282b; }

.comic-hero-genre {
    display: inline-flex;
    padding: 6px 11px;
    border: 1px solid rgba(231, 76, 60, .5);
    border-radius: 20px;
    background: rgba(231, 76, 60, .16);
    color: #ff8073;
    font-size: .78rem;
    text-transform: uppercase;
}

.comic-info {
    padding: 20px;
}

.comic-banner-upload {
    padding: 0 16px 14px;
}

.comic-banner-upload-label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    overflow: hidden;
    border: 1px dashed #454545;
    border-radius: 9px;
    background: #101010;
    color: #aaa;
    font-size: .78rem;
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
}

.comic-banner-upload-label:hover {
    border-color: #e74c3c;
    background: rgba(231, 76, 60, .08);
    color: #fff;
}

.comic-banner-upload-label input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.comic-info h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: #fff;
}

.comic-info p {
    font-size: 0.85rem;
    color: #666;
}

.comic-info .comic-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 7px 0 12px;
    color: #888;
    font-size: 0.82rem;
    line-height: 1.45;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    background: #e74c3c;
    color: white;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background: #ff5e4d;
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
}

footer {
    text-align: center;
    padding: 40px 0;
    margin-top: 60px;
    border-top: 1px solid #222;
    color: #444;
}

/* Выпадающее меню */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #151515;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    z-index: 1;
    border-radius: 8px;
    border: 1px solid #222;
    top: 100%;
    left: 0;
}

.dropdown-content a {
    color: #eee;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.85rem;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #222;
    color: #e74c3c;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    color: #e74c3c;
}

/* Макет в стиле ВК */
.main-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 30px;
    margin-top: 20px;
}

.sidebar {
    position: sticky;
    top: 30px;
    height: fit-content;
}

.sidebar-menu {
    list-style: none;
}

.sidebar-menu li {
    margin-bottom: 5px;
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    color: #eee;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s;
    font-size: 0.95rem;
}

.sidebar-menu a:hover {
    background: rgba(255, 255, 255, 0.05);
}

.sidebar-menu a.active {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    font-weight: 600;
}

.sidebar-icon {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

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

.profile-header {
    width: 100%;
    min-width: 0;
    --profile-accent: #e74c3c;
    --profile-banner: linear-gradient(135deg, #632b32, #251b24 50%, #15171e);
    background: #16171d;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 20px 45px rgba(0,0,0,.25);
}
.profile-theme-ocean { --profile-accent: #53afea; --profile-banner: linear-gradient(125deg, #15455c, #1b3148 55%, #111d32); }
.profile-theme-violet { --profile-accent: #bd8dea; --profile-banner: linear-gradient(125deg, #56336d, #2a214c 55%, #191b30); }
.profile-theme-forest { --profile-accent: #68cfa2; --profile-banner: linear-gradient(125deg, #215340, #1e3738 55%, #152127); }
.profile-header .banner { height: 250px; position: relative; background: var(--profile-banner) center/cover; }
.profile-header .banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(14,15,20,.65)); pointer-events: none; }
.profile-header .profile-avatar { background: var(--profile-accent); border-color: #16171d; box-shadow: 0 9px 25px rgba(0,0,0,.35); }
.profile-header .profile-stat { background: rgba(20,21,27,.85); border-color: rgba(255,255,255,.12); }
.profile-stat-number { color: var(--profile-accent); font-weight: 800; }
.profile-bio { color: #c3c7d1; margin-top: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-header .profile-customize-link, .profile-header .profile-follow-btn { background: var(--profile-accent); color: #101317; }
.profile-feedback { margin: 16px 0; padding: 12px 15px; border: 1px solid rgba(83,175,234,.35); border-radius: 12px; background: rgba(83,175,234,.09); color: #d6e7fb; }
.profile-collections { margin: 0 0 38px; }
.collections-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.collections-heading h2 { font-size: 1.35rem; }
.collections-heading p { margin-top: 4px; color: #858b98; font-size: .85rem; }
.collection-create { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(160px, 1.4fr) auto; align-items: end; gap: 10px; margin-bottom: 16px; padding: 14px; border: 1px solid #30333b; border-radius: 14px; background: #17191e; }
.collection-create label { display: grid; gap: 5px; color: #9fa6b3; font-size: .77rem; }
.collection-create input, .collection-add select { min-width: 0; padding: 10px 11px; border: 1px solid #393e48; border-radius: 9px; background: #101216; color: #f4f5f7; font: inherit; }
.collection-create .btn { white-space: nowrap; }
.collection-list { display: grid; gap: 13px; }
.collection-card { min-width: 0; padding: 16px; border: 1px solid #30333b; border-radius: 15px; background: linear-gradient(145deg, #1b1d23, #15161a); }
.collection-card-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.collection-card-heading > div { min-width: 0; flex: 1; }
.collection-card-heading h3 { color: #f4f5f7; font-size: 1rem; overflow-wrap: anywhere; }
.collection-card-heading p { margin-top: 4px; color: #9298a4; font-size: .82rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.collection-count { color: #99a2b1; font-size: .75rem; white-space: nowrap; }
.collection-management { display: flex; align-items: center; gap: 5px; flex: 0 0 auto !important; }
.collection-management > form button, .collection-edit summary { min-height: 30px; padding: 5px 8px; border: 1px solid #373c47; border-radius: 8px; background: #20242c; color: #d7deeb; font: inherit; font-size: .76rem; cursor: pointer; }
.collection-management > form button:disabled { opacity: .35; cursor: default; }
.collection-edit { position: relative; }
.collection-edit > form { position: absolute; z-index: 5; top: 36px; right: 0; display: grid; gap: 7px; width: min(280px, 80vw); padding: 10px; border: 1px solid #3a3d46; border-radius: 10px; background: #17191e; box-shadow: 0 12px 25px rgba(0,0,0,.45); }
.collection-edit input { width: 100%; min-width: 0; padding: 8px; border: 1px solid #393e48; border-radius: 7px; background: #101216; color: #f4f5f7; font: inherit; font-size: .78rem; }
.collection-edit > form button { padding: 7px; border: 1px solid #3d4f68; border-radius: 7px; background: #202d40; color: #dceaff; cursor: pointer; }
.collection-remove { width: 30px; height: 30px; border: 1px solid #483438; border-radius: 9px; background: #281d20; color: #ffc1b9; font-size: 1.2rem; cursor: pointer; }
.collection-comics { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.collection-comic { min-width: 0; position: relative; overflow: hidden; border: 1px solid #30343d; border-radius: 10px; background: #111318; }
.collection-comic-link { display: flex; height: 100%; flex-direction: column; color: #e8eaf0; text-decoration: none; }
.collection-comic-link img { width: 100%; height: 130px; object-fit: cover; background: #242630; }
.collection-comic-link span { padding: 8px; font-size: .78rem; overflow-wrap: anywhere; }
.collection-item-actions { display: flex; gap: 4px; padding: 0 7px 7px; }
.collection-item-actions button { width: 27px; height: 26px; border: 1px solid #373c47; border-radius: 7px; background: #20242c; color: #d7deeb; cursor: pointer; }
.collection-item-actions button:disabled { opacity: .35; cursor: default; }
.collection-empty { margin: 5px 0; color: #8b929f; font-size: .85rem; }
.collection-add { display: flex; gap: 8px; margin-top: 13px; }
.collection-add select { flex: 1; }
.collection-add button { padding: 9px 12px; border: 1px solid #3d4f68; border-radius: 9px; background: #202d40; color: #dceaff; cursor: pointer; }
.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; }

.profile-info-row {
    display: flex;
    align-items: flex-end;
    gap: 25px;
    padding: 0 40px;
    margin: -50px 0 30px;
    min-width: 0;
}

.profile-avatar {
    width: 150px;
    height: 150px;
    flex: 0 0 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 5px solid #0a0a0a;
    border-radius: 50%;
    background: #e74c3c;
}

.profile-identity {
    flex: 1 1 auto;
    min-width: 0;
    padding-bottom: 15px;
}

.profile-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    font-size: 2.5rem;
    overflow-wrap: anywhere;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 15px;
}

.profile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    max-width: 100%;
    margin-bottom: 40px;
}

.profile-stat {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    flex: 1 1 140px;
    padding: 10px 20px;
    border: 1px solid #222;
    border-radius: 10px;
    background: #151515;
}

/* Мессенджер */
.messenger-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    height: calc(100vh - 60px);
    max-height: 780px;
    min-height: 0;
    background: #151515;
    border-radius: 12px;
    border: 1px solid #222;
    overflow: hidden;
}

.chats-sidebar {
    border-right: 1px solid #222;
    display: flex;
    flex-direction: column;
    background: #111;
}

.sidebar-header {
    padding: 18px 16px;
    border-bottom: 1px solid #262626;
}
.sidebar-header h2 { font-size: 1.14rem; margin: 0 0 14px; color: #f3f3f3; }

.search-input {
    width: 100%;
    padding: 10px 15px;
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 10px;
    color: white;
    font-size: 0.9rem;
}

.chats-list {
    flex-grow: 1;
    overflow-y: auto;
}

.chat-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    text-decoration: none;
    color: white;
    transition: background 0.2s;
    border-bottom: 1px solid #1a1a1a;
}

.chat-item:hover { background: #202025; }
.chat-item.active { background: rgba(0, 119, 255, 0.16); box-shadow: inset 3px 0 #4b9dff; }
.chat-item[hidden] { display: none; }
.chat-item-copy { flex: 1; min-width: 0; }
.chat-item-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-preview { display: flex; gap: 4px; align-items: baseline; color: #9aa3b3; font-size: .8rem; white-space: nowrap; overflow: hidden; }
.chat-item-preview-author { flex-shrink: 0; font-weight: 600; color: #b1c8ec; }
.chat-item-preview-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-unread-count { flex: 0 0 auto; min-width: 20px; padding: 2px 6px; border-radius: 12px; background: #317bd5; font-size: .72rem; font-weight: 700; text-align: center; }
.chat-unread-count[hidden] { display: none; }
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.chat-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e74c3c;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    font-weight: bold;
    color: white;
}

.online-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #2ecc71;
    border: 2px solid #111;
    border-radius: 50%;
}

.chat-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    position: relative;
    background: #0a0a0a;
}

.chat-header {
    flex: 0 0 auto;
    min-height: 70px;
    padding: 10px 20px;
    background: #18191d;
    border-bottom: 1px solid #2b2c31;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.chat-header-person { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; text-decoration: none; color: #f4f5f7; }
.chat-header-person .chat-avatar { width: 42px; height: 42px; background: #447bc2; }
.chat-header-person .chat-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.chat-header-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.chat-header-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-header-name small { font-size: .75rem; color: #8b929f; }
.chat-back { color: #a7b9d3; font-size: 1.5rem; text-decoration: none; }
.sound-toggle { flex-shrink: 0; padding: 8px 10px; border: 1px solid #353b46; border-radius: 9px; background: #232833; color: #d8e5f7; font: inherit; font-size: .75rem; cursor: pointer; }
.sound-toggle:hover { background: #30405b; }

.messages-area {
    flex: 1 1 auto;
    min-height: 0;
    padding: 24px 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: radial-gradient(circle at 20% 0%, #17202d, #111319 65%);
}
.msg {
    max-width: min(78%, 560px);
    padding: 10px 14px 7px;
    border-radius: 16px;
    font-size: .92rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    box-shadow: 0 2px 9px rgba(0,0,0,.14);
}
.msg-text { white-space: pre-wrap; }
.msg-time { display: block; margin-top: 4px; text-align: right; font-size: .68rem; opacity: .65; }
.msg.sent { align-self: flex-end; background: #317bd5; color: #fff; border-bottom-right-radius: 4px; }
.msg.received { align-self: flex-start; background: #282e38; color: #f1f2f5; border-bottom-left-radius: 4px; }
.chat-composer { flex: 0 0 auto; background: #18191d; border-top: 1px solid #2b2c31; padding: 12px 20px 10px; }
.chat-footer { display: flex; align-items: flex-end; gap: 12px; }
.message-input { min-width: 0; width: 100%; flex: 1; min-height: 42px; max-height: 130px; resize: none; overflow-y: auto; background: #242832; border: 1px solid #394253; color: #fff; padding: 10px 14px; border-radius: 14px; outline: none; font: inherit; font-size: .9rem; line-height: 1.4; }
.message-input:focus { border-color: #5598eb; box-shadow: 0 0 0 2px rgba(85,152,235,.16); }
.send-btn { flex: 0 0 42px; height: 42px; border: 0; border-radius: 12px; background: #317bd5; color: #fff; cursor: pointer; font-size: 1.2rem; }
.send-btn:hover { background: #4392ef; }
.send-btn:disabled { opacity: .5; cursor: wait; }
.chat-input-hint { display: block; margin: 5px 54px 0 0; text-align: right; color: #757f8e; font-size: .68rem; }
.chat-error { color: #ff988d; font-size: .8rem; margin: 0 0 5px; }
.chat-error:empty { display: none; }
.chat-empty-state { margin: auto; text-align: center; color: #959cab; padding: 25px; }
.chat-empty-state span { display: block; color: #508ad5; font-size: 3rem; }
.chat-empty-state strong { display: block; margin-top: 12px; color: #e6ebf1; font-size: 1.2rem; }
.chat-empty-state p { margin-top: 7px; font-size: .9rem; }
.chat-container { height: min(680px, calc(100dvh - 170px)); min-height: 320px; display: flex; flex-direction: column; position: relative; overflow: hidden; background: #151515; border: 1px solid #292e36; border-radius: 15px; }

.new-messages-jump {
    position: absolute;
    left: 50%;
    bottom: 90px;
    transform: translateX(-50%);
    z-index: 5;
    padding: 8px 16px;
    border: 1px solid #317bd5;
    border-radius: 20px;
    background: #317bd5;
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

.new-messages-jump[hidden] {
    display: none;
}

/* Новые личные сообщения на любой странице */
.global-message-notifications {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 200;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 10px;
    max-width: min(360px, calc(100vw - 30px));
    pointer-events: none;
}
.global-messages-link, .global-message-toast { pointer-events: auto; }
.global-messages-link {
    padding: 10px 16px;
    border-radius: 24px;
    background: #317bd5;
    color: #fff;
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.global-messages-link[hidden], .global-nav-unread[hidden], [data-message-unread-badge][hidden] { display: none; }
.global-messages-toasts { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.global-message-toast {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border: 1px solid #425b80;
    border-radius: 12px;
    background: #222c3d;
    color: #f4f6fb;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(0,0,0,.5);
}
.global-message-toast span { font-size: .83rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-nav-unread { display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 10px; background: #317bd5; color: #fff; font-size: .7rem; }
.global-notification-center { position: fixed; right: 20px; bottom: 92px; z-index: 199; width: min(360px, calc(100vw - 30px)); pointer-events: none; }
.global-notification-toasts { display: flex; flex-direction: column; gap: 8px; }
.global-notification-toast { display: flex; flex-direction: column; gap: 3px; padding: 12px 15px; border: 1px solid #3e628c; border-radius: 13px; background: linear-gradient(145deg, #202d40, #171c25); color: #f3f6fc; text-decoration: none; box-shadow: 0 10px 28px rgba(0,0,0,.45); pointer-events: auto; animation: notificationToastIn .22s ease-out; }
.global-notification-toast small { color: #8dbbfa; font-size: .7rem; }
.global-notification-toast strong { font-size: .9rem; }
.global-notification-toast span { color: #c1c9d5; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes notificationToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.site-announcement { position: fixed; top: 70px; right: 20px; z-index: 2100; display: flex; align-items: flex-start; gap: 14px; width: min(460px, calc(100vw - 30px)); padding: 17px 18px; border: 1px solid #c6837c; border-radius: 16px; background: linear-gradient(135deg, #38252a, #1c202a); color: #fff; box-shadow: 0 14px 35px rgba(0,0,0,.5); }
.site-announcement[hidden] { display: none; }
.site-announcement-body { min-width: 0; }
.site-announcement-body span { display: block; margin-bottom: 6px; color: #ffb6a9; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.site-announcement-body strong { display: block; font-size: 1.02rem; }
.site-announcement-body p { margin-top: 6px; color: #ddd7d9; font-size: .88rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.site-announcement button { margin-left: auto; border: 0; background: transparent; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
@media (max-width: 600px) { .site-announcement { top: 12px; right: 15px; } }

/* Адаптивность */
/* ===== НОВЫЕ УТИЛИТЫ ===== */
.card {
    background: #151515;
    border-radius: 12px;
    border: 1px solid #222;
}

.card-hover:hover {
    border-color: rgba(231, 76, 60, 0.3);
}

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
}

.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-15 { gap: 15px; }
.gap-20 { gap: 20px; }

.text-sm { font-size: 0.85rem; }
.text-xs { font-size: 0.75rem; }
.text-muted { color: #555; }
.text-muted-light { color: #888; }

.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }

.p-15 { padding: 15px; }
.p-20 { padding: 20px; }

/* ===== СТИЛИ ЛЕНТЫ ===== */
.feed-page { max-width: 860px; margin: 32px auto 80px; }
.feed-intro { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 30px; margin-bottom: 22px; border: 1px solid #3b2d32; border-radius: 22px; background: radial-gradient(circle at 85% 15%, rgba(231,76,60,.18), transparent 44%), linear-gradient(135deg, #201b23, #141519); }
.feed-intro h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.2; }
.feed-intro p { color: #adb0bc; margin-top: 7px; }
.feed-eyebrow { display: block; margin-bottom: 7px; color: #f18b7e; text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; font-weight: 700; }
.feed-composer { margin-bottom: 24px; padding: 20px 22px; border: 1px solid #34353a; border-radius: 19px; background: #1a1b20; box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.feed-composer-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.feed-composer-heading strong, .feed-composer-heading small { display: block; }
.feed-composer-heading small { color: #9ba1ae; margin-top: 3px; font-size: .78rem; }
.feed-composer textarea { width: 100%; min-height: 108px; padding: 14px 16px; resize: vertical; color: #fff; background: #101216; border: 1px solid #393d46; border-radius: 13px; font: inherit; line-height: 1.5; }
.feed-composer textarea:focus { outline: none; border-color: #e78b80; box-shadow: 0 0 0 3px rgba(231,76,60,.12); }
.feed-composer-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.feed-tool { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 12px; border: 1px solid #393d46; border-radius: 9px; background: #252831; color: #e2e5ec; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600; }
.feed-tool:hover { background: #343843; border-color: #e78b80; }
.feed-type-label { display: inline-flex; align-items: center; gap: 7px; color: #9ba1ae; font-size: .79rem; }
.feed-type-label select { background: #252831; color: #eee; border: 1px solid #393d46; border-radius: 9px; padding: 9px; font: inherit; }
.feed-char-count { color: #858b98; font-size: .76rem; margin-left: auto; }
.feed-submit { border: 0; cursor: pointer; font: inherit; }
.feed-composer-hint { display: block; margin-top: 9px; color: #858b98; }
.feed-composer-error { color: #ff9a8d; margin-top: 9px; font-size: .82rem; }
.feed-composer-error:empty { display: none; }
.feed-image-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.feed-image-preview[hidden] { display: none; }
.feed-image-preview img { width: 95px; height: 95px; object-fit: cover; border-radius: 9px; border: 1px solid #454954; }
.feed-flashes { padding: 13px 18px; margin-bottom: 16px; border: 1px solid #7d4c45; background: #2b1d20; border-radius: 12px; color: #ffada3; }
.feed-flashes p + p { margin-top: 5px; }
.feed-guest-prompt { padding: 16px 20px; margin-bottom: 20px; border: 1px solid #383a45; background: #1c1d22; border-radius: 12px; color: #c4c7d0; }
.feed-guest-prompt a { color: #ff9a8d; }
.feed-filters { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 15px; margin-bottom: 8px; }
.feed-filters a { flex: 0 0 auto; padding: 8px 13px; border: 1px solid #363940; border-radius: 20px; background: #202228; color: #c4c8d0; text-decoration: none; font-size: .82rem; }
.feed-filters a:hover, .feed-filters a.active { background: #e74c3c; border-color: #e74c3c; color: #fff; }
.post-card {
    background: #151515;
    border-radius: 16px;
    border: 1px solid #222;
    margin-bottom: 20px;
    overflow: hidden;
    transition: border-color 0.3s;
}

.post-card:hover {
    border-color: rgba(231, 76, 60, 0.2);
}

.post-header {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.post-header > div:nth-of-type(1) { flex: 1; min-width: 0; }
.post-delete-form { margin-left: auto; flex: 0 0 auto; }
.post-delete-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #9298a3; cursor: pointer; font-size: .95rem; }
.post-delete-button:hover { background: rgba(231,76,60,.12); border-color: rgba(231,76,60,.4); color: #ff9588; }

.post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e74c3c;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

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

.post-avatar span {
    font-weight: 900;
    color: white;
    font-size: 1.1rem;
}

.post-author-name {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}

.post-author-name:hover {
    color: #e74c3c;
}

.verified-badge {
    color: #3498db;
    font-size: 0.8rem;
}

/* Метки аккаунтов: администратор и синяя галочка */
.account-badges {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-left: 5px;
    vertical-align: middle;
}

.badge-verified { color: #3498db; font-weight: 800; }

.badge-admin,
.badge-official {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
}

.badge-admin {
    border: 1px solid rgba(231, 76, 60, 0.55);
    background: rgba(231, 76, 60, 0.16);
    color: #ff8b7d;
}

.badge-official {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    padding: 0;
    border-radius: 50%;
    background: #1689ff;
    color: white;
    font-size: 0.7rem;
    line-height: 1;
}

.badge-admin-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    background: rgba(231, 76, 60, 0.3);
    color: #ffb1a6;
    font-size: 0.6rem;
}

.profile-title .badge-admin { font-size: 0.8rem; padding: 4px 12px; }
.profile-title .badge-official { width: 20px; height: 20px; font-size: 0.8rem; padding: 0; }

.post-time {
    font-size: 0.75rem;
    color: #9299a5;
}
.post-subline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.post-type-badge { padding: 2px 9px; border-radius: 16px; background: #362526; color: #ff9a8d; font-size: .69rem; font-weight: 700; }
.post-type-progress { background: #223247; color: #91c5ff; }
.post-type-art { background: #382544; color: #e0adf7; }
.post-type-question { background: #253b35; color: #a1e6bd; }

.post-content {
    padding: 0 16px 16px;
    color: #eee;
    line-height: 1.5;
    font-size: 0.95rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.post-image {
    width: 100%;
    display: block;
    border-top: 1px solid #222;
    cursor: pointer;
    transition: filter 0.3s;
}

.post-image:hover {
    filter: brightness(1.05);
}
.post-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 0 16px 16px; }
.post-gallery .post-image { width: 100%; height: 250px; object-fit: cover; border: 0; border-radius: 9px; }
.post-gallery.image-count-1 { grid-template-columns: 1fr; }
.post-gallery.image-count-1 .post-image { height: auto; max-height: 620px; object-fit: contain; background: #101010; }
.post-gallery.image-count-3 .post-image:first-child { grid-row: span 2; height: 100%; }
.post-action-btn:disabled { cursor: default; opacity: .62; }
.post-action-btn:disabled:hover { background: none; }
@media (max-width: 640px) {
    .feed-page { margin-top: 15px; padding: 0 10px; }
    .feed-intro { padding: 20px; align-items: flex-start; flex-direction: column; }
    .feed-composer { padding: 15px; }
    .feed-type-label { order: 2; }
    .feed-submit { margin-left: auto; }
    .post-gallery { padding: 0 10px 10px; }
    .post-gallery .post-image { height: 165px; }
}

.post-actions {
    padding: 10px 16px;
    display: flex;
    gap: 25px;
    border-top: 1px solid #222;
}

.post-action-btn {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #888;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
}

.post-action-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.post-action-btn.liked {
    color: #e74c3c;
}

.post-action-btn.commented {
    color: #3498db;
}

.post-action-btn .icon {
    font-size: 1.2rem;
    line-height: 1;
}

/* Комментарии к постам */
.comments-section {
    border-top: 1px solid #222;
    padding: 12px 16px;
    background: #111;
    display: none;
}

.comments-section.open {
    display: block;
}

.comment-item {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e74c3c;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

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

.comment-avatar span {
    font-weight: 700;
    color: white;
    font-size: 0.8rem;
}

.comment-body {
    background: #1a1a1a;
    padding: 8px 12px;
    border-radius: 12px;
    flex: 1;
}

.comment-body .comment-author {
    color: #e74c3c;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.8rem;
}

.comment-body .comment-text {
    color: #ddd;
    font-size: 0.85rem;
    margin-top: 2px;
}

.comment-body .comment-time {
    font-size: 0.65rem;
    color: #555;
    margin-top: 4px;
}

.comment-like-button {
    border: 1px solid #333;
    border-radius: 16px;
    background: #222;
    color: #aaa;
    padding: 4px 9px;
    margin-top: 7px;
    cursor: pointer;
    font-size: .78rem;
}

.comment-like-button.liked { color: #ff6b7b; border-color: #7b3038; }

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

.comment-form input {
    flex: 1;
    background: #0a0a0a;
    border: 1px solid #333;
    color: white;
    padding: 10px 14px;
    border-radius: 20px;
    outline: none;
    font-size: 0.85rem;
}

.comment-form input:focus {
    border-color: #e74c3c;
}

.comment-form button {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s;
}

.comment-form button:hover {
    background: #ff5e4d;
}

.comments-loading {
    text-align: center;
    color: #555;
    padding: 10px;
    font-size: 0.85rem;
}

/* Lightbox */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.95);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}

.lightbox-overlay.open {
    display: flex;
}

.lightbox-overlay img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 8px;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
    background: none;
    border: none;
}

.lightbox-close:hover {
    opacity: 1;
}

/* Уведомления (Toast) */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background: #151515;
    border: 1px solid #333;
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 0.9rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    animation: toastIn 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 250px;
}

.toast.success { border-left: 4px solid #2ecc71; }
.toast.error { border-left: 4px solid #e74c3c; }
.toast.info { border-left: 4px solid #3498db; }

@keyframes toastIn {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(50px); }
}

/* Маска скелетона для загрузки */
@keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}

.skeleton {
    background: linear-gradient(90deg, #151515 25%, #1a1a1a 50%, #151515 75%);
    background-size: 400px 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}

.skeleton-card {
    height: 200px;
    margin-bottom: 20px;
    border-radius: 16px;
}

/* Стили для репостов */
.repost-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #2ecc71;
    margin-bottom: 8px;
}

.comic-link-preview {
    background: #0a0a0a;
    border-radius: 12px;
    border: 1px solid #222;
    padding: 12px;
    margin: 0 16px 16px;
    display: flex;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.3s;
}

.comic-link-preview:hover {
    border-color: #e74c3c;
}

.comic-link-preview img {
    width: 60px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

.comic-link-preview .comic-link-info h4 {
    color: #e74c3c;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.comic-link-preview .comic-link-info p {
    color: #666;
    font-size: 0.8rem;
}

/* Индикатор новых постов */
.new-posts-indicator {
    text-align: center;
    padding: 12px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 12px;
    color: #e74c3c;
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 20px;
    transition: background 0.3s;
}

.new-posts-indicator:hover {
    background: rgba(231, 76, 60, 0.2);
}

/* Анимация для новых постов */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.post-card.new {
    animation: fadeInUp 0.5s ease;
}

/* Режимы чтения комикса */
.reader-reading-area { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 1000px; margin: 24px 0; }
.reader-mode-panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(900px, 100%); padding: 13px 16px; border-radius: 13px; border: 1px solid #34343b; background: #1b1c22; font-weight: 700; }
.reader-mode-switch { display: flex; gap: 5px; padding: 4px; border-radius: 11px; background: #111218; }
.reader-mode-switch button { padding: 8px 12px; border: 0; border-radius: 8px; background: none; color: #9ca3b1; font: inherit; font-size: .82rem; cursor: pointer; }
.reader-mode-switch button[aria-pressed="true"] { color: #fff; background: #e74c3c; }
.reader-controls { width: min(900px, 100%); justify-content: center; }
.reader-controls button:disabled { opacity: .4; cursor: not-allowed; }
.single-page-reader { width: min(900px, 100%); display: flex; justify-content: center; scroll-margin-top: 95px; }
.continuous-reader { display: flex; flex-direction: column; gap: 6px; width: min(900px, 100%); }
.continuous-reader[hidden], .single-page-reader[hidden] { display: none; }
.continuous-page { margin: 0; scroll-margin-top: 85px; background: #111; }
.continuous-page img { display: block; width: 100%; height: auto; }
.continuous-page figcaption { padding: 8px; color: #8e94a1; text-align: center; font-size: .76rem; }
.reader-empty { color: #999; padding: 35px 0; }
@media (max-width: 640px) { .reader-mode-panel { align-items: flex-start; flex-direction: column; } .reader-mode-switch { width: 100%; } .reader-mode-switch button { flex: 1; } .reader-controls { width: 100%; gap: 8px; padding: 8px 10px; font-size: .8rem; } .reader-controls .btn { padding: 8px; } }

@media (max-width: 768px) {
    .main-layout {
        grid-template-columns: 1fr;
        margin-top: 10px;
        padding-bottom: 80px;
    }

    .sidebar {
        position: fixed;
        bottom: 0;
        top: auto;
        left: 0;
        width: 100%;
        background: rgba(21, 21, 21, 0.95);
        backdrop-filter: blur(10px);
        border-top: 1px solid #222;
        z-index: 2000;
        padding: 10px 0;
    }

    .sidebar-menu {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .sidebar-menu li {
        margin-bottom: 0;
    }

    .sidebar-menu a {
        flex-direction: column;
        gap: 4px;
        font-size: 0.65rem;
        padding: 5px;
        background: none !important;
    }

    .sidebar-icon {
        font-size: 1.5rem;
    }

    .logo, .search-bar, hr, li[style*="uppercase"] {
        display: none !important;
    }

    .profile-info-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding: 0 20px;
        margin-bottom: 20px;
    }

    .profile-avatar {
        width: 112px;
        height: 112px;
        flex-basis: 112px;
        border-width: 4px;
    }

    .profile-avatar > span {
        font-size: 3rem !important;
    }

    .profile-identity {
        padding-bottom: 0;
    }

    .profile-title {
        font-size: 2rem;
    }

    .profile-actions {
        padding-bottom: 0;
    }

    .profile-stats {
        gap: 8px;
        padding: 0 10px;
        margin-bottom: 25px;
    }

    .profile-stat {
        flex-basis: 120px;
        padding: 9px 12px;
        font-size: 0.9rem;
    }

    .hero h1 {
        font-size: 2.2rem;
        letter-spacing: -1px;
    }

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

    .comic-cover > img:not(.comic-poster) {
        height: 230px;
    }

    .comic-hero {
        min-height: 0;
        gap: 16px;
        padding: 24px 18px;
        border-radius: 16px;
    }

    .comic-hero-poster {
        flex-basis: 96px;
        width: 96px;
        height: 138px;
        border-radius: 10px;
    }

    .comic-hero-info h1 { font-size: 1.8rem; }
    .comic-hero-info p { font-size: 0.85rem; }


    .content-area {
        padding: 0 10px;
    }

    .messenger-container {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: clamp(170px, 22dvh, 190px) minmax(0, 1fr);
        height: calc(100dvh - 170px);
        min-height: 380px;
        max-height: none;
    }

    .chats-sidebar {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid #222;
    }
    .sidebar-header { padding: 8px 12px; }
    .sidebar-header h2 { font-size: 1rem; margin-bottom: 6px; }
    .sidebar-header .search-input { padding: 7px 10px; }

    .chats-list {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .chat-item {
        min-width: 118px;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding: 6px;
        text-align: center;
    }

    .chat-item-copy { width: 100%; }
    .chat-item-preview { justify-content: center; font-size: .68rem; width: 100%; }
    .chat-item-preview-author { max-width: 45px; overflow: hidden; text-overflow: ellipsis; }
    .chat-unread-count { position: absolute; top: 5px; right: 5px; }

    .chat-container {
        height: calc(100dvh - 190px);
        min-height: 360px;
    }

    .chat-footer .message-input {
        min-width: 0;
    }

    .msg { max-width: 85%; }
    .messages-area { padding: 14px; }
    .chat-composer { padding: 9px 10px; }
    .chat-input-hint { display: none; }
    .sound-toggle { font-size: .7rem; }

    .comic-page {
        width: 100%;
        border-radius: 0;
    }

    .comic-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .comic-hero-meta { gap: 6px; margin: 10px 0; }
    .comic-hero-meta > span { padding: 4px 8px; font-size: 0.72rem; }
    .comic-edit-fields { grid-template-columns: minmax(0, 1fr); }
    .comic-edit-wide { grid-column: auto; }

    .reader-controls {
        width: 100%;
        top: 12px;
        bottom: auto;
    }
}

@media (max-width: 768px) {
    .hero h1 { font-size: 2.5rem; }
    .nav-links { display: none; }
    .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .collection-create { grid-template-columns: minmax(0, 1fr); }
    .collection-create .btn { width: 100%; }
    .collection-comics { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); }
    .global-notification-center { right: 12px; bottom: 88px; }
    .global-message-notifications { right: 12px; bottom: 12px; }
}
@media (max-width: 430px) {
    .collection-card { padding: 12px; }
    .collection-card-heading { align-items: flex-start; flex-wrap: wrap; }
    .collection-card-heading > div { flex-basis: 65%; }
    .collection-count { order: 2; }
    .collection-comics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .collection-comic-link img { height: 110px; }
    .collection-add { flex-direction: column; }
    .global-notification-center { bottom: 88px; }
}
.unread-badge[hidden] { display: none; }
.notification-item .notification-type { align-self: flex-start; }

/* Профиль автора */
.profile-page { --profile-glow: rgba(231, 76, 60, .2); }
.profile-header {
    position: relative;
    margin-top: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    background: linear-gradient(145deg, #1b1d25, #111217 72%);
    box-shadow: 0 24px 70px rgba(0,0,0,.35), 0 0 45px var(--profile-glow);
}
.profile-header.profile-theme-ocean { --profile-glow: rgba(83,175,234,.17); }
.profile-header.profile-theme-violet { --profile-glow: rgba(189,141,234,.17); }
.profile-header.profile-theme-forest { --profile-glow: rgba(104,207,162,.17); }
.profile-header .banner { height: clamp(190px, 25vw, 290px); }
.profile-header .banner::after { background: linear-gradient(180deg, rgba(8,10,16,.04), rgba(8,10,16,.12) 38%, #15171d 100%); }
.profile-info-row {
    position: relative;
    z-index: 1;
    align-items: flex-end;
    gap: 24px;
    padding: 0 34px;
    margin: -68px 0 24px;
}
.profile-header .profile-avatar {
    position: relative;
    width: 144px;
    height: 144px;
    flex-basis: 144px;
    border: 5px solid #171920;
    outline: 2px solid color-mix(in srgb, var(--profile-accent), transparent 25%);
    background: linear-gradient(135deg, var(--profile-accent), #282b36);
    box-shadow: 0 12px 34px rgba(0,0,0,.5);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-identity { padding-bottom: 10px; }
.profile-kicker { display: inline-block; margin-bottom: 5px; color: var(--profile-accent); font-size: .67rem; font-weight: 800; letter-spacing: .18em; }
.profile-title { gap: 9px; font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1.12; }
.profile-presence { display: inline-flex; align-items: center; gap: 8px; margin-top: 9px; color: #959baa; font-size: .8rem; }
.profile-presence.is-online { color: #91e6b4; }
.presence-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #707684; }
.is-online .presence-dot { background: #48d586; box-shadow: 0 0 0 4px rgba(72,213,134,.12), 0 0 15px rgba(72,213,134,.5); }
.profile-bio { max-width: 650px; margin-top: 12px; color: #b8bdc9; font-size: .94rem; line-height: 1.65; }
.profile-actions { gap: 9px; padding-bottom: 12px; }
.profile-actions .btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.07); color: #f6f7fa; text-decoration: none; font-weight: 700; transition: transform .2s, background .2s, box-shadow .2s; }
.profile-actions .btn:hover { transform: translateY(-2px); background: rgba(255,255,255,.12); }
.profile-actions form { margin: 0; }
.profile-header .profile-actions .profile-customize-link,
.profile-header .profile-actions .profile-follow-btn { border: 0; background: var(--profile-accent); color: #101317; box-shadow: 0 8px 22px var(--profile-glow); }
.profile-header .profile-actions .profile-follow-btn.is-following { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.08); color: #f6f7fa; box-shadow: none; }
.profile-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: none; padding: 0 28px 26px; margin: 0; }
.profile-header .profile-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 14px 16px; border: 1px solid rgba(255,255,255,.075); border-radius: 14px; background: rgba(255,255,255,.035); transition: border-color .2s, background .2s; }
.profile-header .profile-stat:hover { border-color: color-mix(in srgb, var(--profile-accent), transparent 65%); background: rgba(255,255,255,.06); }
.profile-stat-number { font-size: 1.35rem; line-height: 1.3; }
.profile-stat-label { color: #8f95a3; font-size: .74rem; }
.profile-feedback { border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.16); }
.profile-collections { margin: 30px 0 12px; }
.collections-heading { margin-bottom: 16px; }
.collections-heading h2 { font-size: 1.45rem; letter-spacing: -.03em; }
.collections-heading p { font-size: .88rem; }
.collection-create { padding: 16px; border-color: rgba(255,255,255,.08); border-radius: 16px; background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); }
.collection-create input:focus, .collection-add select:focus, .collection-edit input:focus { outline: 2px solid color-mix(in srgb, var(--profile-accent, #e74c3c), transparent 35%); outline-offset: 1px; }
.collection-card { padding: 18px; border-color: rgba(255,255,255,.08); border-radius: 17px; background: linear-gradient(145deg, #1b1d25, #14151a); box-shadow: 0 12px 28px rgba(0,0,0,.12); transition: border-color .2s, transform .2s; }
.collection-card:hover { border-color: rgba(255,255,255,.14); transform: translateY(-2px); }
.collection-card-heading h3 { font-size: 1.05rem; }
.collection-comic { border-color: rgba(255,255,255,.08); border-radius: 12px; transition: transform .2s, border-color .2s; }
.collection-comic:hover { transform: translateY(-3px); border-color: var(--profile-accent, #e74c3c); }
.collection-comic-link img { transition: transform .35s; }
.collection-comic:hover .collection-comic-link img { transform: scale(1.04); }
.profile-page .comic-grid { padding: 24px 0 52px; }
.profile-page .comic-grid h2 { margin-bottom: 20px; border-left-color: var(--profile-accent, #e74c3c); font-size: 1.55rem; }
.profile-page .grid { gap: 20px; }
.profile-page .comic-card { position: relative; border-color: rgba(255,255,255,.08); border-radius: 17px; background: #17191f; box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.profile-page .comic-card:hover { border-color: var(--profile-accent, #e74c3c); box-shadow: 0 18px 36px rgba(0,0,0,.32), 0 0 22px var(--profile-glow); }
.profile-page .comic-card .comic-info { padding: 14px 16px 17px; }
.profile-page .comic-card .comic-info h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-page .comic-card > form:first-of-type button { border: 1px solid rgba(255,255,255,.2); border-radius: 9px; cursor: pointer; }
.profile-page .comic-banner-upload-label { border-radius: 9px; }
.profile-page .collection-empty { padding: 16px; border: 1px dashed rgba(255,255,255,.12); border-radius: 13px; background: rgba(255,255,255,.02); }
@media (max-width: 900px) {
    .profile-info-row { gap: 18px; padding: 0 24px; }
    .profile-header .profile-avatar { width: 124px; height: 124px; flex-basis: 124px; }
    .profile-stats { padding-right: 20px; padding-left: 20px; }
}
@media (max-width: 768px) {
    .profile-header { border-radius: 20px; }
    .profile-info-row { align-items: flex-start; gap: 12px; padding: 0 20px; margin-top: -52px; }
    .profile-header .profile-avatar { width: 106px; height: 106px; flex-basis: 106px; }
    .profile-identity { padding-bottom: 0; }
    .profile-kicker { font-size: .6rem; }
    .profile-title { font-size: 1.8rem; }
    .profile-actions { padding: 0 20px; }
    .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 20px 20px; margin: 4px 0 0; }
    .profile-header .profile-stat { padding: 11px 13px; }
    .profile-stat-number { font-size: 1.2rem; }
    .profile-collections { margin-top: 24px; }
    .profile-page .comic-grid { padding-top: 18px; }
}
@media (max-width: 480px) {
    .profile-header .banner { height: 180px; }
    .profile-info-row { margin-top: -42px; padding: 0 15px; }
    .profile-header .profile-avatar { width: 84px; height: 84px; flex-basis: 84px; border-width: 4px; }
    .profile-avatar > span { font-size: 2.3rem !important; }
    .profile-title { font-size: 1.5rem; }
    .profile-bio { font-size: .85rem; }
    .profile-actions { padding: 0 15px; }
    .profile-actions .btn { min-height: 39px; padding: 0 12px; font-size: .82rem; }
    .profile-stats { padding: 0 15px 16px; gap: 7px; }
    .profile-header .profile-stat { padding: 9px 10px; }
    .profile-stat-label { font-size: .68rem; }
    .collections-heading h2 { font-size: 1.2rem; }
    .collection-card { padding: 13px; }
    .profile-page .comic-grid h2 { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
    .profile-actions .btn, .collection-card, .collection-comic, .collection-comic-link img, .profile-page .comic-card { transition: none; }
}

/* Вход и регистрация через Google */
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: #a7a7ae; font-size: .82rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: #48484c; }
.auth-google-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 16px; border: 1px solid #dadce0; border-radius: 8px; background: #fff; color: #202124; font-size: .9rem; font-weight: 600; text-decoration: none; transition: background .2s, box-shadow .2s; }
.auth-google-btn:hover { background: #f6f8fc; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.auth-google-btn:focus-visible { outline: 3px solid #e74c3c; outline-offset: 3px; }
.auth-google-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 22px; font-family: Arial, sans-serif; font-size: 1.35rem; font-weight: 800; line-height: 1; background: conic-gradient(#4285f4 0 35%, #34a853 35% 52%, #fbbc05 52% 72%, #ea4335 72% 89%, #4285f4 89%); background-clip: text; -webkit-background-clip: text; color: transparent; }
.auth-google-unavailable { margin: 18px 0 0; color: #aeb3bc; font-size: .81rem; text-align: center; }
@media (prefers-reduced-motion: reduce) { .auth-google-btn { transition: none; } }

/* Смайлики и стикеры в сообщениях */
.chat-footer { gap: 8px; }
.chat-tools { display: flex; align-items: center; gap: 4px; height: 42px; flex: 0 0 auto; }
.chat-picker-wrap { position: relative; }
.chat-tool-button { display: grid; place-items: center; width: 35px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: #acbdd4; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.chat-tool-button:hover, .chat-tool-button[aria-expanded="true"] { background: #303a49; color: #fff; }
.sticker-tool-button { font-size: 1.45rem; }
.chat-picker { position: absolute; z-index: 10; bottom: calc(100% + 12px); left: 0; width: min(310px, calc(100vw - 54px)); max-height: min(360px, 45dvh); overflow-y: auto; padding: 12px; border: 1px solid #3d4c63; border-radius: 17px; background: #202633; box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.chat-picker[hidden] { display: none; }
.emoji-picker { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.emoji-choice { display: grid; place-items: center; min-height: 42px; border: 0; border-radius: 10px; background: transparent; color: #fff; font-size: 1.45rem; cursor: pointer; }
.emoji-choice:hover { background: #37475d; }
.sticker-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.sticker-choice { min-width: 0; padding: 5px; border: 1px solid transparent; border-radius: 12px; background: #293448; color: #e7edf6; cursor: pointer; }
.sticker-choice:hover { border-color: #5d9bec; background: #34455e; }
.sticker-choice:disabled { opacity: .55; cursor: wait; }
.sticker-choice img { display: block; width: 100%; height: 68px; object-fit: contain; }
.sticker-choice span { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }
.chat-tool-button:focus-visible, .emoji-choice:focus-visible, .sticker-choice:focus-visible { outline: 2px solid #75adfa; outline-offset: 2px; }
.msg.sent.msg-sticker, .msg.received.msg-sticker { padding: 1px 3px 2px; border-radius: 0; background: transparent; box-shadow: none; }
.msg-sticker-image { display: block; width: min(156px, 50vw); height: 156px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.3)); }
.msg-sticker .msg-time { margin-top: 0; padding: 0 5px; color: #c4d0df; opacity: .85; }
@media (max-width: 480px) {
    .chat-tool-button { width: 31px; }
    .chat-tools { gap: 1px; }
    .chat-footer { gap: 5px; }
    .chat-picker { padding: 8px; }
    .msg-sticker-image { width: 125px; height: 125px; }
}