:root {
    --tg-accent:       #3390ec;
    --tg-accent-dark:  #2b7cd3;
    --tg-accent-soft:  #eaf3fe;

    --tg-out:          #eaf4ff;   /* own message bubble (blue tint) */
    --tg-out-2:        #dcecff;
    --tg-in:           #ffffff;   /* incoming bubble */

    --tg-page:         #ffffff;
    --tg-panel:        #ffffff;
    --tg-chat-bg:      #dbe4f1;   /* chat scroll background (deeper for contrast) */

    --tg-ink:          #16191d;
    --tg-ink-2:        #707a8a;
    --tg-ink-3:        #9aa3b2;
    --tg-line:         #e9edf3;
    --tg-line-soft:    #f1f4f8;

    --tg-badge:        #3390ec;
    --tg-green:        #2ca25f;
    --tg-red:          #e8536a;
    --tg-pin:          #d8a43a;

    --tg-radius:       14px;
    --tg-shadow-card:  0 1px 2px rgba(16,24,40,.04), 0 8px 30px rgba(16,24,40,.06);
    --tg-shadow-pop:   0 12px 34px rgba(16,24,40,.16);

    --tg-font: "Inter", "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

a.bk-btn {
    text-decoration: none;
}
.hidden {
    display: none!important;
}


.author-list {
    .author-card {
        .photo {
            img {
                width: 180px;
                height: 180px;
                object-fit: cover;
                border-radius: 50%;
            }
        }
    }
}




















body {
    background: #eaeef4;
}
button { font-family: inherit; }

.tg-app { min-height: 100vh; display: flex; flex-direction: column; background: #fff; }

.bk-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.bk-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 8px;
    background: #eef2f8; color: #4a5261;
}
.bk-tag.lang { background: #eaf3fe; color: var(--tg-accent-dark); }
.bk-tag.subj { background: #eaf7ee; color: #1c8a4a; }

.bk-main { flex: 1; }
.bk-wrap { max-width: 1140px; margin: 0 auto; padding: 30px 32px 60px; }

.bk-back {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: none; cursor: pointer;
    color: var(--tg-ink-2); font-size: 14px; font-weight: 600; font-family: inherit;
    padding: 6px 0; margin-bottom: 8px;
}
.bk-back:hover { color: var(--tg-accent); }

.bk-h1 { font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
.bk-sub { font-size: 15px; color: var(--tg-ink-2); margin: 0; }

.bk-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 14px; border-radius: 11px; font-size: 14px; font-weight: 700; cursor: pointer;
    font-family: inherit; border: 1px solid var(--tg-line); background: #fff; color: var(--tg-ink);
}
.bk-btn:hover { border-color: #cdd5e0; }
.bk-btn.primary { background: var(--tg-accent); border-color: var(--tg-accent); color: #fff; }
.bk-btn.primary:hover { background: var(--tg-accent-dark); }
.bk-btn.ghost { background: transparent; }
.bk-btn.lg { padding: 14px 20px; font-size: 15px; }
.bk-btn.block { width: 100%; flex: none; }
.bk-btn.danger { background: var(--tg-red); border-color: var(--tg-red); color: #fff; }

.bk-period-nav {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; gap: 10px;
    margin: 14px 0 10px;
}
.bk-period-nav span { text-align: center; font-size: 13.5px; font-weight: 700; color: var(--tg-ink-2); }
.bk-period-nav button {
    width: 38px; height: 34px; border: 1px solid var(--tg-line); border-radius: 9px;
    background: #fff; color: var(--tg-ink); cursor: pointer; font-size: 22px; line-height: 1;
}
.bk-period-nav button:hover:not(:disabled) { border-color: var(--tg-accent); color: var(--tg-accent); }
.bk-period-nav button:disabled { opacity: .35; cursor: default; }
.bk-period-page[hidden] { display: none !important; }