.container {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 0 15px
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--color-border-muted);
    background: rgba(255, 255, 255, .8);
    backdrop-filter: saturate(180%) blur(10px)
    }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    gap: 12px
    }

.brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--color-fg-default);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -.02em
}

.brand-logo {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px
}

.brand:hover {
    text-decoration: none
}

.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-fg-default);
    cursor: pointer
}

.menu-toggle:hover {
    background: var(--color-canvas-subtle)
}

.menu-toggle svg {
    width: 24px;
    height: 24px;
    display: block;
    fill: currentColor
    }

.top-menu {
    display: none;
    position: absolute;
    right: 15px;
    top: 52px;
    min-width: 210px;
    padding: 8px;
    border: 1px solid var(--color-border-default);
    border-radius: 12px;
    background: #fff
    }

.top-menu.open {
    display: grid;
    gap: 4px
    }

.nav-link {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--color-fg-default);
    font-weight: 600
}

.nav-link:hover {
    background: var(--color-canvas-subtle);
    text-decoration: none
}

.nav-button {
    background: var(--color-accent-subtle);
    color: var(--color-accent-fg)
}

main.container {
    padding-top: 30px;
    padding-bottom: 30px
}

.site-footer {
    border-top: 1px solid var(--color-border-muted);
    color: var(--color-fg-muted);
    background: #fff
}

.footer-inner {
    padding-top: 25px;
    padding-bottom: 25px;
    font-size: 15px;
    text-align: center;
    text-box: trim-both cap alphabetic;
    }

.ht {
    margin: 0 0 0px;
    font-size: 32px;
    line-height: 1.12;
    letter-spacing: -.035em
}

.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;
}

.page-head h1,
.question-page h1 {
    font-family: 'Trebuchet MS', Arial, sans-serif;
    margin: 0;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.035em
}

.page-head p {
    margin: 0;
    color: var(--color-fg-muted)
}

.page-head {
    padding: 15px;
    margin-bottom: 10px;
    border: 1px solid var(--color-border-muted);
    border-radius: 14px;
    background: #fff
}

.question-list {
    display: grid;
    gap: 15px
    }

.home-inspiration {
    width: 100%;
    max-width: 810px;
    margin: 18px auto;
}

.home-inspiration-link {
    display: block;
    margin-top: 18px;
    color: var(--color-accent-fg);
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
}

.home-inspiration-link:hover {
    text-decoration: none;
}

.question-card,
.answer-card,
.panel-card,
.auth-card,
.profile-card,
.blank-state,
.category-card,
.action-card,
.context-box,
.add-card {
    font-family: 'Trebuchet MS', Arial, sans-serif;
    border: 1px solid var(--color-border-default); /*переопределено далее для .question-card*/
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-small)
}

.question-card {
    padding: 15px;
    border: none;
    }

.question-list > .question-card {
    padding-top: 0;
    padding-bottom: 0;
}

.home-question-list > .question-card {
    padding-left: 0;
    padding-right: 0;
}

.home-question-list {
    gap: 18px;
}

.question-card h2 {
    margin: 6px 0 8px;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.02em
}

.question-card h2 a,
.question-card p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 4
}

.question-card h2 a:hover {
    text-decoration: none;
}

.question-card p {
    margin: 0;
    color: var(--color-fg-muted);
    }

.question-meta,
.answer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    color: var(--color-fg-muted);
    }

.question-meta {
    font-size: 14px;
}

.answer-meta {
    font-size: 12px;
}

.question-meta a {
    font-weight: 600;
    }

.question-page > .question-meta {
    margin-bottom: 10px;
}

.question-page-hidden h1 {
    color: #d1242f;
}

.question-status-hidden {
    color: #d1242f;
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px
}

.question-card,
.question-page {
    min-width: 0;
    max-width: 100%;
}

.question-card > .tag-row,
.question-page > .tag-row {
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
    padding-bottom: 2px;
}

.tag-pill {
    display: inline-flex;
    padding: 4px 9px;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    background: var(--color-canvas-subtle);
    color: var(--color-fg-muted);
    font-size: 13px
}

.question-card > .tag-row .tag-pill,
.question-page > .tag-row .tag-pill {
    flex: 0 0 auto;
    max-width: min(260px, 70vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-pill:hover {
    border-color: #b6c2cf;
    text-decoration: none;
    background: #fff
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 16px
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    background: #fff;
    color: var(--color-fg-default);
    font-weight: 600
}

.page-link.active {
    background: var(--color-accent-emphasis);
    color: #fff;
    border-color: var(--color-accent-emphasis)
}

.page-link:hover {
    text-decoration: none;
    background: var(--color-canvas-subtle)
}

.category-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    }

.category-card {
    display: block;
    position: relative;
    padding: 15px;
    color: var(--color-fg-default)
}

.category-card:hover {
    text-decoration: none;
    border-color: #8c959f
}

.category-card strong {
    display: block;
    font-size: 17px
}

.category-card p {
    margin: 6px 0 0;
    color: var(--color-fg-muted)
}

.category-count {
    position: absolute;
    right: 14px;
    top: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 28px;
    border-radius: 999px;
    background: var(--color-canvas-subtle);
    color: var(--color-fg-muted);
    font-weight: 700
}

.question-page {
    padding: 0
}

.question-body {
    margin-top: 10px;
    font-size: 16px
    }

.question-body p,
.answer-text p {
    margin: 0 0 10px
}

.question-action {
    margin-top: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px
}

.question-action-separator {
    color: var(--color-fg-muted);
    font-size: 14px;
    line-height: 1
}

.compact-link {
    font-size: 14px;
    font-weight: 400
}

.answers-section {
    margin-top: 10px
}

.answers-section h2 {
    font-size: 20px;
    margin: 0 0 10px;
    font-weight: 400
}

.answer-card {
    padding: 15px;
    margin-bottom: 0;
    }

.answer-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px
}

.mini-avatar,
.profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #dbeafe, #f5d0fe);
    color: #1f2937;
    font-weight: 800;
    user-select: none;
    -webkit-user-select: none
}

.mini-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px
}

.mini-avatar:hover {
    text-decoration: none
}

.author-name {
    font-weight: 700;
    color: var(--color-fg-default)
}

.author-login,
.author-status,
.answer-date {
    font-size: 12px;
    color: var(--color-fg-muted)
}

.author-status-accent {
    color: #0969da;
    font-weight: 400
}

.answer-date {
    display: flex;
    width: 100%;
    margin-top: 8px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center
}

.answer-card .answer-date {
    font-size: 14px;
}

.answer-edit-link {
    color: var(--color-accent-fg);
    font-size: 14px
}

.profile-answer-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 2;
    line-height: 1.5;
    max-height: 3em
}

.profile-answer-excerpt p {
    display: inline;
    margin: 0
}

.profile-answer-list {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.profile-answer-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--color-border-default);
}

.profile-answer-row:last-child {
    border-bottom: 0;
}

.profile-answer-title {
    min-width: 0;
    overflow: hidden;
    color: var(--color-accent-fg);
    font: 400 16px/1.35 Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-answer-title:hover,
.profile-answer-title:focus-visible {
    color: var(--color-accent-fg);
    text-decoration: none;
}

.profile-answer-date {
    flex: 0 0 auto;
    color: var(--color-fg-muted);
    font: 400 14px/1 Arial, Helvetica, sans-serif;
    white-space: nowrap;
}

.profile-image-placeholder {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin: 0;
    color: #5f6f6a;
    font-size: 16px;
    font-weight: 400;
}

.profile-card {
    overflow: hidden
}

.profile-cover {
    position: relative;
    height: 132px;
    background: linear-gradient(135deg, #dbeafe, #f6f8fa 45%, #ffe4e6)
}

.profile-settings-link {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    max-width: calc(100% - 24px);
    padding: 6px 11px;
    border: 1px solid rgba(31, 35, 40, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 1px 2px rgba(31, 35, 40, .08);
    color: #3f4854;
    font: 400 14px/1.2 Arial, Helvetica, sans-serif;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease
}

.profile-settings-link:hover,
.profile-settings-link:focus-visible {
    border-color: rgba(9, 105, 218, .3);
    background: #fff;
    box-shadow: 0 2px 6px rgba(31, 35, 40, .12);
    color: #0969da;
    text-decoration: none
}

.profile-settings-link:focus-visible {
    outline: 2px solid rgba(9, 105, 218, .45);
    outline-offset: 2px
}

.profile-settings-link svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8
}

.profile-body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px 18px
}

.profile-avatar {
    width: 86px;
    height: 86px;
    margin-top: -43px;
    border: 4px solid #fff;
    font-size: 32px
}

.profile-body h1 {
    margin: 8px 0 0;
    font-size: 25px;
    line-height: 1.15
}

.profile-username,
.profile-description {
    color: var(--color-fg-muted)
}

.profile-description {
    margin: 10px 0;
    text-align: center;
    text-box: trim-both cap alphabetic;
}

.profile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 10px
}

.profile-stats .badge-soft {
    padding: 0;
    border: 0;
    background: transparent;
    color: #0969da;
    font-size: 15px;
    font-weight: 400;
    box-shadow: none;
}

.blank-state {
    padding: 20px;
    text-align: center;
    border: 0;
    background: transparent;
    box-shadow: none
}

.blank-state h1,
.blank-state h2 {
    margin: 0
}

.blank-state p {
    margin: 0;
    color: var(--color-fg-muted)
}

.not-found-action {
    margin-top: 18px;
}

.auth-card {
    max-width: 430px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none
}

.auth-card h1 {
    margin: 0 0 8px;
    color: #16231f;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 500;
}

.auth-note,
.auth-limited {
    margin: 0;
    color: #60746e;
}

.auth-note {
    margin-bottom: 18px;
    line-height: 1.45;
}

.auth-limited {
    font-size: 13px;
    text-align: center;
}

.auth-field {
    position: relative;
}

.auth-card .form-control {
    min-height: 44px;
    border: 0;
    border-bottom: 1px solid #d7dedb;
    border-radius: 0;
    background: #fff;
    padding-left: 0;
    padding-right: 0;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.auth-card .form-control:focus {
    border-bottom-color: #23b982;
    box-shadow: inset 0 -1px 0 #23b982;
    outline: none;
}

.auth-validation-bubble {
    position: absolute;
    left: 50%;
    bottom: 9px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    max-width: calc(100% - 28px);
    min-height: 24px;
    padding: 1px 10px 0;
    border-radius: 999px;
    background: rgba(225, 229, 234, .94);
    color: #4b5563;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
}

.auth-validation-bubble:empty {
    display: none;
}

.auth-card .btn-primary {
    min-height: 44px;
    justify-content: center;
    border-color: #232323;
    background: #232323;
    color: #fff;
    font-weight: 400;
}

.form-stack {
    display: grid;
    gap: 15px
}

.form-stack label {
    display: block;
    font-weight: 600
}

.form-stack .check-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-weight: 500;
    color: var(--color-fg-muted)
}

.check-row input {
    margin-top: 3px
}

.button-row,
.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center
}

.toolbar {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    margin-bottom: 14px;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch
}

.toolbar .btn {
    flex: 0 0 auto
}

.panel-actions,
.section-actions {
    margin-top: 15px
}

.inline-form {
    display: inline-flex;
    margin: 0
}

.small-link {
    font-weight: 700;
    font-size: 13px
}

.users-table .small-link {
    font-weight: 400
}

.admin-one-line {
    display: inline-block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: Arial, sans-serif;
    vertical-align: bottom
}

.images-table .image-date,
.images-table .image-size {
    font-family: Arial, sans-serif;
}

.danger-zone {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #ffcecb;
    border-radius: 10px;
    background: #ffebe9
}

.danger-zone p {
    margin: 0 0 10px;
    color: #82071e
}

.answer-danger-zone {
    margin-top: 0
}

.context-box {
    padding: 12px;
    margin-bottom: 14px;
    background: var(--color-canvas-subtle)
}

.panel-container {
    padding-top: 24px
}

.panel-card {
    padding: 15px
}

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

.panel-heading h1 {
    margin: 0;
    font-size: 22px;
    letter-spacing: -.02em
}

.link-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px
}

.action-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 15px;
    color: var(--color-fg-default);
    font-weight: 700;
    background: transparent;
    box-shadow: none
}

.action-card:hover {
    text-decoration: none;
    border-color: #8c959f;
    background: transparent
}

.action-count {
    font-family: sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef2f5;
    color: #1f7a4d;
    font-size: 15px;
    line-height: 1;
    font-weight: 400
}

.computed-status {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    background: var(--color-canvas-subtle)
}

.computed-status span {
    color: var(--color-fg-muted);
    font-size: 13px
}

.status-list {
    display: grid;
    gap: 10px;
    margin-bottom: 16px
}

.status-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--color-border-default);
    border-radius: 12px;
    background: var(--color-canvas-subtle)
}

.status-row .btn,
.status-row .badge {
    width: 100%;
    justify-content: center
}

.status-row .badge {
    border: 0;
    background: transparent
}

.add-card {
    padding: 14px;
    background: var(--color-canvas-subtle)
}

.add-card h2 {
    margin: 0;
    font-size: 18px
}

@media (min-width:640px) {
    .container {
        padding-left: 10px;
        padding-right: 10px
    }

    .menu-toggle {
        display: none
    }

    .top-menu {
        display: flex;
        position: static;
        min-width: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        align-items: center;
        gap: 6px
    }

    .nav-link {
        padding: 7px 10px
    }

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

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

    .status-row {
        grid-template-columns: minmax(220px, 1fr) 120px 92px;
        align-items: center
    }

    .top-menu.open {
        display: flex
    }

    .ht,
    .page-head h1,
    .question-page h1 {
        font-family: 'Trebuchet MS', Arial, sans-serif;
        font-size: 28px;
        font-weight: 500;
    }

    .question-card h2 a,
    .question-card p {
        -webkit-line-clamp: 2;
        line-clamp: 2
    }
}
.table-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    white-space: nowrap
}

.questions-table,
.categories-table,
.answers-table,
.unanswered-table,
.trash-answers-table,
.trash-questions-table {
    min-width: 860px
}

.questions-table .admin-one-line,
.categories-table .admin-one-line,
.answers-table .admin-one-line,
.unanswered-table .admin-one-line,
.trash-answers-table .admin-one-line,
.trash-questions-table .admin-one-line {
    max-width: 320px
}

.trash-answers-table .admin-one-line,
.answers-table .admin-one-line {
    max-width: 300px
}

.questions-table td,
.categories-table td,
.answers-table td,
.unanswered-table td,
.trash-answers-table td,
.trash-questions-table td {
    vertical-align: middle
}

.trash-questions-table td:nth-child(5) {
    white-space: nowrap
}

.panel-container .table-wrap {
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch
}

.panel-container .table-wrap::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0
}

.panel-container .table-wrap {
    cursor: grab;
    user-select: auto
}

.panel-container .table-wrap.is-dragging,
.panel-container .table-wrap.is-dragging * {
    cursor: grabbing;
    user-select: none
}

.welcome-line {
    margin: 0 0 10px;
    padding: 12px 15px;
    /*border: 1px solid var(--color-border-muted);*/
    border-radius: 14px;
    background: var(--color-canvas-subtle);
    color: var(--color-fg-default);
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
    }

.welcome-line a {
    color: var(--color-accent-fg);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.welcome-line a:hover {
    text-decoration: underline
}

.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px
}

.nav-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor
}

.profile-settings-login {
    display: inline-flex;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--color-canvas-subtle);
    color: var(--color-fg-muted);
    font-family: Arial, sans-serif;
    font-size: 14px
}

.profile-settings-actions {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0
}

.profile-settings-actions .btn {
    flex: 0 0 auto
}

.profile-avatar-settings {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--color-border-default);
    border-radius: 12px;
    background: var(--color-canvas-subtle);
}

.profile-avatar-settings-preview {
    display: flex;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    color: #1f2937;
    font-size: 24px;
    font-weight: 400;
}

.mini-avatar.has-avatar-image,
.profile-avatar.has-avatar-image,
.profile-avatar-settings-preview.has-avatar-image {
    background: #fff !important;
    overflow: hidden;
}

.mini-avatar.has-avatar-image img,
.profile-avatar.has-avatar-image img,
.profile-avatar-settings-preview.has-avatar-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-settings-control {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.profile-avatar-settings-control label {
    display: grid;
    gap: 6px;
}

.profile-avatar-settings-control .muted {
    margin: 0;
}

.profile-avatar-delete {
    align-self: center;
    white-space: nowrap;
}

.gradient-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    justify-items: center;
    gap: 8px;
    padding: 0px 10px 10px;
    border: 1px solid var(--color-border-default);
    border-radius: 12px;
    background: var(--color-canvas-subtle);
}

.gradient-picker legend {
    margin: 0 auto 2px;
    padding: 0 6px;
    text-align: center;
    font-weight: 700;
}

.gradient-option-visual {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 3px;
    gap: 0;
    border: 1px solid var(--color-border-muted);
    border-radius: 999px;
    background: #fff;
    box-sizing: border-box;
    cursor: pointer;
}

.gradient-option-visual input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.gradient-preview-large {
    display: block;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

.gradient-option-visual:has(input:checked) {
    border-color: var(--color-accent-emphasis);
    box-shadow: 0 0 0 2px var(--color-accent-muted);
}

.gradient-option-visual input:checked + .gradient-preview-large {
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.75), 0 0 0 1px rgba(0,0,0,.12);
}

.gradient-admin-preview {
    display: inline-block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    vertical-align: middle;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

.gradients-table {
    min-width: 760px;
    table-layout: fixed;
}

.gradients-table th,
.gradients-table td {
    padding: 8px;
    vertical-align: middle;
}

.gradients-table th:nth-child(1),
.gradients-table td:nth-child(1) {
    width: 58px;
}

.gradients-table th:nth-child(2),
.gradients-table td:nth-child(2) {
    width: 150px;
}

.gradients-table th:nth-child(4),
.gradients-table td:nth-child(4) {
    width: 92px;
}

.gradients-table th:nth-child(5),
.gradients-table td:nth-child(5) {
    width: 188px;
}

.gradients-table .form-control {
    min-height: 34px;
    padding: 6px 8px;
}

.gradient-css-input {
    min-width: 0;
}

.compact-input {
    max-width: 90px;
}

.admin-help {
    margin-bottom: 12px;
}

.gradient-add-card {
    margin-top: 16px;
}

.answer-link-builder {
    position: static;
    display: inline-flex;
    align-items: flex-start;
    width: fit-content;
    max-width: 100%;
}

.answer-link-button {
    min-height: 34px;
    padding: 6px 13px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #0757b8;
    font-weight: 700;
    box-shadow: none;
}

.answer-link-button:hover {
    border-color: #93c5fd;
    background: #dbeafe;
    color: #054da3;
}

.answer-link-popover {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 30;
    display: grid;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
    padding: 12px;
    border: 1px solid var(--color-border-muted);
    border-radius: 12px;
    background: var(--color-canvas-default);
    box-shadow: 0 16px 40px rgba(31,35,40,.16);
}

.answer-link-popover[hidden] {
    display: none;
}

.answer-link-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    place-items: center;
    width: auto;
    padding: 16px;
    border: 0;
    border-radius: 0;
    background: rgba(31, 35, 40, .28);
    box-shadow: none;
}

.answer-link-modal[hidden] {
    display: none;
}

.answer-link-dialog {
    display: grid;
    gap: 10px;
    width: min(320px, calc(100vw - 32px));
    padding: 12px;
    border: 1px solid var(--color-border-muted);
    border-radius: 12px;
    background: var(--color-canvas-default);
    box-shadow: 0 18px 42px rgba(31,35,40,.22);
}

.answer-link-builder-fields {
    display: grid;
    gap: 10px;
}

.answer-link-modal .answer-link-builder-fields {
    grid-template-columns: 1fr;
    gap: 8px;
}

.answer-link-modal .form-control {
    min-height: 34px;
    padding: 6px 8px;
}

.answer-link-modal .muted {
    margin: 0;
    font-size: 12px;
}

.answer-link-actions {
    justify-content: flex-end;
    gap: 8px;
    margin-top: 0;
}

.answer-link {
    color: var(--color-accent-fg);
    text-decoration: underline;
}

.answer-link:hover {
    text-decoration: underline;
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

@media (min-width: 640px) {
    .answer-link-popover {
        width: 420px;
    }

    .answer-link-builder-fields {
        grid-template-columns: 1fr 1fr;
    }

    .answer-link-modal .answer-link-builder-fields {
        grid-template-columns: 1fr;
    }
}

.answer-link-modal:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    padding: 16px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(31, 35, 40, .36) !important;
    box-shadow: none !important;
}

.answer-link-modal[hidden] {
    display: none !important;
}

.answer-link-modal .answer-link-dialog {
    width: min(320px, calc(100vw - 32px));
    max-width: 100%;
}

/* Editor.js answer editor */
.answer-editorjs {
    position: relative;
    z-index: 20;
    width: 100%;
    min-height: 220px;
    padding: 10px 0;
    border: 1px solid var(--color-border-default);
    border-radius: 12px;
    background: var(--color-canvas-default);
    overflow: visible;
}

.answer-editorjs .codex-editor {
    z-index: 1;
}

.answer-editorjs .codex-editor__redactor {
    padding-bottom: 56px !important;
}

.answer-editorjs .ce-block__content,
.answer-editorjs .ce-toolbar__content {
    max-width: calc(100% - 52px);
}

.answer-editorjs .ce-paragraph,
.answer-editorjs .ce-header,
.answer-editorjs .cdx-quote__text,
.answer-editorjs .cdx-quote__caption,
.answer-editorjs .cdx-list {
    color: var(--color-fg-default);
}

.answer-editorjs .ce-toolbar__plus,
.answer-editorjs .ce-toolbar__settings-btn,
.answer-editorjs .ce-inline-toolbar,
.answer-editorjs .ce-conversion-toolbar,
.answer-editorjs .ce-settings,
.answer-editorjs .ce-popover {
    color: var(--color-fg-default);
}

.answer-editorjs .image-tool__image-picture {
    border-radius: 12px;
    max-width: 100%;
}

.answer-text h2,
.answer-text h3,
.answer-text h4 {
    margin: 18px 0 10px;
    line-height: 1.25;
}

.answer-text ul,
.answer-text ol {
    margin: 10px 0 14px;
    padding-left: 24px;
}

.answer-text blockquote {
    position: relative;
    margin: 16px 0;
    padding: 14px 16px 14px 42px;
    border: 1px solid var(--color-border-default);
    border-left: 0;
    background: var(--color-canvas-subtle);
    border-radius: 12px;
    color: var(--color-fg-default);
}

.answer-text blockquote::before {
    content: "“";
    position: absolute;
    left: 14px;
    top: 4px;
    color: var(--color-accent-fg);
    font-size: 42px;
    line-height: 1;
    font-weight: 700;
}

.answer-text blockquote footer {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border-muted);
    color: var(--color-fg-muted);
    font-size: 13px;
}

.answer-image {
    margin: 14px 0;
    position: relative;
}

.answer-image-view {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    cursor: zoom-in;
}

.answer-image-view img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 14px;
    border: 1px solid var(--color-border-default);
    transition: filter .18s ease;
}

.answer-image-view:hover img,
.answer-image-view:focus-visible img {
    filter: brightness(.92);
}

.image-lightbox {
    position: fixed;
    inset: var(--Menu) 0 0;
    z-index: 30000;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    justify-content: stretch;
    padding: 0;
    background: rgba(5,10,18,.84);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.image-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}

.image-lightbox-stage {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: none;
    user-select: none;
    -webkit-overflow-scrolling: touch;
    cursor: default;
}

.image-lightbox img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - var(--Menu));
    width: auto;
    height: auto;
    border-radius: 0;
    box-shadow: none;
    transform-origin: center center;
    transition: transform .18s ease;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

.image-lightbox.is-zoomed .image-lightbox-stage {
    cursor: grab;
}

.image-lightbox.is-zoomed.is-dragging .image-lightbox-stage {
    cursor: grabbing;
}

.image-lightbox.is-dragging img {
    transition: none;
}

.image-lightbox-close {
    position: fixed;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--Menu);
    height: var(--Menu);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #232323;
    opacity: 1;
    cursor: pointer;
    transition: color .3s ease;
}

.image-lightbox-close svg {
    display: block;
    width: 24px;
    height: 24px;
}

.image-lightbox-close:hover {
    color: tomato;
}

.article-action-bar {
    position: fixed;
    left: 50%;
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    max-width: calc(100vw - 28px);
    min-height: 45px;
    padding: 5px 5px;
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(250, 252, 255, .72), rgba(221, 226, 231, .72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58), 0 10px 26px rgba(31, 41, 55, .13), 0 1px 2px rgba(31, 41, 55, .1);
    backdrop-filter: blur(20px) saturate(175%);
    transform: translateX(-50%);
    transition: opacity .18s ease, transform .18s ease;
}

.article-action-bar.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px);
}

.article-actions-hidden-pref .article-action-bar {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px);
}

.article-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 38px;
    height: 33px;
    padding: 0 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #111827;
    font: 400 14px/1 system-ui, -apple-system, Segoe UI, sans-serif;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.article-action-button svg,
.article-action-icon {
    display: block;
    width: 21px;
    height: 21px;
}

.article-action-button svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.article-action-icon {
    flex: 0 0 auto;
    background: currentColor;
    mask: center / contain no-repeat;
    -webkit-mask: center / contain no-repeat;
}

.article-icon-heart {
    mask-image: url("../icons/bhfmLr.svg");
    -webkit-mask-image: url("../icons/bhfmLr.svg");
}

.article-icon-link {
    mask-image: url("../icons/QSDHbUWD.svg");
    -webkit-mask-image: url("../icons/QSDHbUWD.svg");
}

.article-copy-button svg {
    fill: currentColor;
    stroke: none;
    stroke-width: 0;
}

.article-action-button:hover,
.article-action-button:focus-visible {
    background: rgba(255, 255, 255, .72);
    outline: none;
}

.article-action-button:active {
    transform: translateY(1px);
}

.article-like-button.is-liked {
    color: #d1242f;
}

.article-action-button:disabled {
    cursor: default;
    opacity: .78;
}

.article-action-status {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    max-width: 220px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(17, 24, 39, .86);
    color: #fff;
    font-size: 11px;
    line-height: 1.25;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
}

.article-action-status:empty {
    display: none;
}

.article-action-dismiss {
    position: absolute;
    top: -7px;
    right: -7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #7b8794;
    cursor: pointer;
}

.article-action-dismiss svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    stroke-linecap: round;
}

.article-action-dismiss:hover,
.article-action-dismiss:focus-visible {
    color: #4b5563;
    outline: none;
}

@media (max-width: 520px) {
    .article-action-bar {
        bottom: max(10px, env(safe-area-inset-bottom));
        min-height: 43px;
        padding: 5px 5px;
    }

    .article-action-button {
        min-width: 36px;
        height: 32px;
        padding: 0 7px;
        font-size: 13px;
    }

    .article-action-button svg,
    .article-action-icon {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 760px) {
    .image-lightbox {
        padding-left: 0;
        padding-right: 0;
    }

    .image-lightbox img {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
    }
}

.answer-image figcaption {
    margin-top: 6px;
    color: var(--color-fg-muted);
    font-size: 13px;
    text-align: center;
}

.answer-image figcaption:empty {
    display: none;
}

@media (max-width: 640px) {
    main.container {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .question-card,
    .answer-card,
    .question-page,
    .answers-section,
    .panel-card,
    .profile-card,
    .related-question-card {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .question-card,
    .answer-card,
    .panel-card {
        padding: 0;
    }

    .profile-body {
        padding-left: 0;
        padding-right: 0;
    }

    .profile-settings-link {
        top: 10px;
        left: 10px;
        min-height: 36px;
        max-width: calc(100% - 20px);
        padding: 7px 10px;
    }

    .auth-card {
        padding: 0;
        border-radius: 0;
    }

    .answer-editorjs .ce-block__content,
    .answer-editorjs .ce-toolbar__content {
        max-width: calc(100% - 34px);
    }
}

.editorjs-link-block {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--color-border-default);
    border-radius: 12px;
    background: var(--color-canvas-subtle);
}

.editorjs-link-input {
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    background: var(--color-canvas-default);
    color: var(--color-fg-default);
    font: inherit;
}

.editorjs-link-input:focus {
    outline: 2px solid var(--color-accent-muted);
    outline-offset: 1px;
    border-color: var(--color-accent-fg);
}



.images-table {
    min-width: 760px
}.danger-link {
    color: #d1242f;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    padding: 0
}

.answer-editorjs .cdx-quote {
    position: relative;
    padding: 14px 16px 14px 42px;
    border: 1px solid var(--color-border-default);
    background: var(--color-canvas-subtle);
    border-radius: 12px;
}

.answer-editorjs .cdx-quote::before {
    content: "“";
    position: absolute;
    left: 14px;
    top: 4px;
    color: var(--color-accent-fg);
    font-size: 42px;
    line-height: 1;
    font-weight: 700;
    pointer-events: none;
}
.images-table .image-hash {
    max-width: 180px;
}


/* Editor.js block settings menu: keep conversion/settings popovers above cards and visible */
.panel-card,
.answer-editorjs,
.answer-editorjs .codex-editor,
.answer-editorjs .codex-editor__redactor {
    overflow: visible !important;
}

.answer-editorjs .ce-toolbar,
.answer-editorjs .ce-toolbar__content,
.answer-editorjs .ce-toolbar__plus,
.answer-editorjs .ce-toolbar__settings-btn,
.answer-editorjs .ce-inline-toolbar,
.answer-editorjs .ce-conversion-toolbar,
.answer-editorjs .ce-settings,
.answer-editorjs .ce-popover,
.answer-editorjs .ce-popover__container,
.answer-editorjs .ce-popover--opened,
.answer-editorjs .ce-settings--opened {
    z-index: 10050 !important;
}

.answer-editorjs .ce-popover,
.answer-editorjs .ce-conversion-toolbar {
    max-height: min(380px, calc(100vh - 32px));
    overflow-y: auto;
}

.images-table .image-hash {
    font-family: Consolas, 'Courier New', monospace;
    text-transform: uppercase;
    color: #6e7781;
}

.cms-banner-slot {
    display: block;
    margin-top: 14px;
    margin-bottom: 14px;
}

.cms-banner-question_under,
.cms-banner-related_before {
    box-sizing: border-box;
    width: 100%;
    max-width: 810px;
    margin-right: auto;
    margin-left: auto;
}

.answers-section .cms-banner-slot,
.answer-card .cms-banner-slot,
.question-page + .cms-banner-slot {
    padding-left: 0;
    padding-right: 0;
    }

.answer-card .cms-banner-slot {
    margin-top: 12px;
    margin-bottom: 12px;
    }

.cms-banner-answer_after {
    margin-top: 18px;
    margin-bottom: 0;
}

.container .answer-card:not(:last-child) {
    margin-bottom: 10px;
    }

.banner-settings-form {
    gap: 15px;
}

.banner-admin-section {
    display: grid;
    gap: 12px;
    padding: 15px;
    border: 1px solid var(--color-border-default);
    border-radius: 14px;
    background: var(--color-canvas-subtle);
}

.banner-admin-section legend {
    padding: 0 6px;
    font-weight: 700;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.code-textarea {
    font-family: 'Courier New', Courier, monospace;
    resize: vertical;
}


/* Collapsible banner settings */
.banner-admin-section {
    display: block;
}

.banner-admin-section[open] {
    display: block;
}

.banner-zone-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}

.banner-zone-summary::-webkit-details-marker {
    display: none;
}

.banner-zone-summary span:first-child {
    flex: 1;
}

.banner-zone-state {
    color: var(--color-fg-muted);
    font-size: 12px;
    font-weight: 600;
}

.banner-admin-fields {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.code-textarea-compact {
    min-height: 34px;
    height: 34px;
}

.user-name-with-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    vertical-align: middle;
}

.verified-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: #1d9bf0;
    line-height: 1;
    vertical-align: -2px;
}

.verified-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.profile-body h1 .verified-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
}

.profile-body h1 .verified-icon svg {
    width: 22px;
    height: 22px;
}

.search-head {
    display: grid;
    gap: 10px;
}

.search-form {
    width: 100%;
}

.search-inline-form {
    display: block;
    width: 100%;
    max-width: 100%;
}

.search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    /*border: 1px solid var(--border, #d8e0e4);*/
    border-bottom: 3px solid var(--border, #ced6da);
    /*border-radius: 999px;*/
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.search-input-wrap .form-control {
    width: 100%;
    height: 44px;
    min-height: 0;
    border: 0;
    /*border-radius: 999px;*/
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 86px 0 15px;
    color: var(--text, #1f2933);
    font-size: 15px;
    line-height: 44px;
    border: 0;
    /*box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;*/
    font-family: 'Trebuchet MS', Arial, sans-serif;
    }

.search-input-wrap .form-control::placeholder {
    color: #7b8790;
    opacity: 1;
}

.search-input-wrap .form-control:focus {
    border: 0;
    box-shadow: none;
    outline: none;
}

.search-submit-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transform: translateY(-50%);
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    color: #62757e;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    font-family: 'Trebuchet MS', Arial, sans-serif;
}

.search-submit-icon svg {
    display: block;
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}

.search-submit-icon span {
    display: inline-flex;
    align-items: center;
    height: 19px;
    line-height: 19px;
}

.search-summary {
    margin: 0 0 14px;
    color: var(--muted, #6b7280);
    font-size: 14px;
    text-align: center;
}

.search-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.search-head .search-input-wrap {
    border: 0;
    border-bottom: 2px solid #ced6da;
    background: transparent;
}

.search-head .search-input-wrap .form-control {
    padding-left: 0;
}

.search-results .question-card,
.search-head + .blank-state {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

.search-head + .blank-state h2 {
    font-family: sans-serif;
    font-weight: 400;
}

.search-head + .blank-state p {
    font-family: sans-serif;
    font-size: 16px;
}

.search-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
    column-gap: 15px;
}

.search-admin-grid .context-box {
    margin-bottom: 0;
}

@media (min-width: 760px) {
    .search-admin-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .search-admin-grid .context-box {
        grid-column: 1 / -1;
    }
}

.home-search {
    margin: 0px 0 10px;
}

.welcome-line + .home-search {
    margin-top: 8px;
}

/* Site settings action buttons */
.site-settings-actions {
    display: grid;
    grid-template-columns: max-content;
    gap: 10px;
    align-items: start;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
}

.site-settings-actions .btn,
.site-settings-action-form {
    width: max-content;
    max-width: none;
    flex: 0 0 auto;
}

/* Adaptive database service page */
.database-page {
    display: grid;
    gap: 15px;
}

.database-page .flash {
    margin-bottom: 0;
}

.database-page .table-wrap {
    max-width: 100%;
}

.database-page code {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.database-section-title {
    margin: 2px 0 0;
    font-size: 20px;
    line-height: 1.25;
}

.database-info-table,
.database-files-table {
    min-width: 0;
}

@media (max-width: 640px) {
    .database-page {
        gap: 12px;
    }

    .database-page .table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        cursor: default;
    }

    .database-page .data-table {
        display: block;
        width: 100%;
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 14px;
    }

    .database-page .data-table thead {
        display: none;
    }

    .database-page .data-table tbody,
    .database-page .data-table tr,
    .database-page .data-table th,
    .database-page .data-table td {
        display: block;
        width: 100%;
    }

    .database-page .data-table tr {
        margin-bottom: 10px;
        overflow: hidden;
        border: 1px solid var(--color-border-default);
        border-radius: 14px;
        background: #fff;
    }

    .database-page .data-table tr:last-child {
        margin-bottom: 0;
    }

    .database-page .data-table th,
    .database-page .data-table td {
        border-bottom: 0;
        padding: 10px 10px;
    }

    .database-page .database-info-table th {
        padding-bottom: 4px;
        background: var(--color-canvas-subtle);
        color: var(--color-fg-muted);
        font-size: 13px;
        line-height: 1.3;
    }

    .database-page .database-info-table td {
        padding-top: 10px;
        line-height: 1.45;
    }

    .database-page .database-files-table td {
        display: flex;
        flex-direction: column;
        gap: 4px;
        line-height: 1.45;
    }

    .database-page .database-files-table td::before {
        content: attr(data-label);
        color: var(--color-fg-muted);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
    }

    .database-section-title {
        margin-top: 4px;
        font-size: 18px;
    }
}

/* CMS patch: banner settings mobile code scrolling */
.banner-settings-form .code-textarea {
    white-space: pre;
    overflow-x: auto;
    overflow-wrap: normal;
    word-break: normal;
}

@media (max-width: 640px) {
    .banner-admin-section {
        padding: 15px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .banner-zone-summary,
    .banner-admin-fields {
        min-width: 520px;
    }

    .banner-admin-fields label {
        white-space: nowrap;
    }

    .banner-admin-fields .checkbox-line {
        white-space: nowrap;
    }
}


/* Fix sticky header/editor stacking: editor popovers stay inside content, header stays above while scrolling */
.site-header {
    z-index: 20000;
}

.answer-editorjs {
    z-index: 1;
    min-height: 48px;
    padding: 6px 0;
}

.answer-editorjs .codex-editor__redactor {
    padding-bottom: 10px !important;
}

/* Keep active pagination readable on hover */
.page-link.active:hover {
    background: var(--color-accent-emphasis);
    color: #fff;
    border-color: var(--color-accent-emphasis);
}

/* Category descriptions: max 2 lines with ellipsis */
.category-card p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 2;
    line-height: 1.45;
    max-height: 2.9em;
}

/* Search settings buttons: equal height only, no color changes */
.search-action-btn {
    min-height: 40px;
}


/* Search settings cards: uniform internal spacing and aligned action buttons */
.search-action-card {
    display: grid;
    gap: 15px;
    padding: 14px;
    align-items: stretch;
}

.search-action-card label {
    margin: 0;
}

.search-action-card .form-control {
    margin-top: 6px;
}

.search-action-card .search-action-btn {
    margin-top: auto;
}

/* Related questions block */
.related-questions {
    margin-top: 18px;
}

.related-questions h2 {
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -.02em;
}

.related-question-grid {
    display: grid;
    align-items: stretch;
    gap: 10px;
}

.cayano-related-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.cayano-related-grid .related-question-line {
    grid-column: 1 / -1;
}

.related-question-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    padding: 14px;
    border: 1px solid var(--color-border-default);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-small);
}

.related-question-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 400;
}

.related-question-card p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 2;
    margin: 0;
    color: var(--color-fg-muted);
    line-height: 1.45;
    max-height: 2.9em;
    flex: 1 1 auto;
}

.related-question-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: auto;
    padding-top: 10px;
    color: var(--color-fg-muted);
    font-size: 12px;
}

.related-question-line {
    display: block;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.related-question-line a {
    display: block;
    overflow: hidden;
    color: #111827;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

.related-question-line a:hover {
    text-decoration: none;
}

.deleted-author {
    color: var(--color-fg-muted);
}

@media (min-width: 640px) {
    .related-question-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

/* Internal analytics page */
.analytics-page {
    display: grid;
    gap: 15px;
    width: 100%;
}

.analytics-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.analytics-summary-card {
    border: 1px solid var(--color-border-default);
    border-radius: 12px;
    background: var(--color-canvas-subtle);
    padding: 14px;
    display: grid;
    gap: 8px;
}

.analytics-summary-card span {
    color: var(--color-fg-muted);
    font-size: 13px;
    line-height: 1.35;
}

.analytics-summary-card strong {
    font-size: 26px;
    line-height: 1;
}

.analytics-settings-form {
    border: 1px solid var(--color-border-default);
    border-radius: 12px;
    padding: 14px;
    background: var(--color-canvas-default);
}

.analytics-path {
    margin-top: 4px;
    font-size: 12px;
}

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

@media (max-width: 560px) {
    .analytics-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* Statistics dashboard and bot analytics settings */
.analytics-fieldset {
    border: 1px solid var(--color-border-default);
    border-radius: 12px;
    padding: 12px;
    display: grid;
    gap: 10px;
}

.analytics-fieldset legend {
    padding: 0 6px;
    color: var(--color-fg-muted);
    font-size: 13px;
    font-weight: 600;
}

.analytics-top-actions {
    margin-bottom: 0;
}

.analytics-period-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.analytics-period-card {
    border: 1px solid var(--color-border-default);
    border-radius: 14px;
    background: var(--color-canvas-subtle);
    padding: 14px;
    display: grid;
    gap: 12px;
}

.analytics-period-card h2 {
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
}

.analytics-period-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.analytics-period-main span,
.analytics-mini-grid span {
    color: var(--color-fg-muted);
    font-size: 12px;
}

.analytics-period-main strong {
    font-size: 32px;
    line-height: 1;
}

.analytics-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.analytics-mini-grid div {
    border: 1px solid var(--color-border-muted);
    border-radius: 10px;
    background: var(--color-canvas-default);
    padding: 10px;
    display: grid;
    gap: 4px;
}

.analytics-mini-grid strong {
    font-size: 20px;
    line-height: 1;
}


.analytics-chart-card {
    border: 1px solid var(--color-border-default);
    border-radius: 14px;
    background: var(--color-canvas-default);
    padding: 14px;
    display: grid;
    gap: 12px;
}

.analytics-chart-head {
    display: grid;
    gap: 4px;
}

.analytics-chart-head h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
}

.analytics-chart-head p {
    margin: 0;
}

.analytics-chart-wrap {
    position: relative;
    width: 100%;
    min-height: 300px;
}

.analytics-chart-canvas {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 300px;
    min-height: 300px;
}

.analytics-table-details {
    border: 1px solid var(--color-border-default);
    border-radius: 14px;
    background: var(--color-canvas-default);
    padding: 0;
    overflow: hidden;
}

.analytics-table-summary {
    cursor: pointer;
    padding: 13px 14px;
    background: var(--color-canvas-subtle);
    font-weight: 600;
    user-select: none;
    white-space: nowrap;
}

.analytics-table-summary span {
    display: inline-block;
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}


.analytics-details-empty {
    padding: 14px;
    border-top: 1px solid var(--color-border-default);
}

.analytics-table-details .table-wrap {
    border: 0;
    border-top: 1px solid var(--color-border-default);
    border-radius: 0;
}

.analytics-stat-page .data-table th {
    padding: 10px 10px;
}

.analytics-stat-page .table-wrap {
    max-width: 100%;
}

.analytics-pages-table,
.analytics-days-table,
.analytics-db-table {
    min-width: 0;
}

@media (max-width: 760px) {
    .analytics-period-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .analytics-page .table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        cursor: default;
    }

    .analytics-page .analytics-mobile-table {
        display: block;
        width: 100%;
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 14px;
    }

    .analytics-page .analytics-mobile-table thead {
        display: none;
    }

    .analytics-page .analytics-mobile-table tbody,
    .analytics-page .analytics-mobile-table tr,
    .analytics-page .analytics-mobile-table th,
    .analytics-page .analytics-mobile-table td {
        display: block;
        width: 100%;
    }

    .analytics-page .analytics-mobile-table tr {
        margin-bottom: 10px;
        overflow: hidden;
        border: 1px solid var(--color-border-default);
        border-radius: 14px;
        background: #fff;
    }

    .analytics-page .analytics-mobile-table tr:last-child {
        margin-bottom: 0;
    }

    .analytics-page .analytics-mobile-table th,
    .analytics-page .analytics-mobile-table td {
        border-bottom: 0;
        padding: 10px;
        line-height: 1.45;
    }

    .analytics-page .analytics-mobile-table td {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .analytics-page .analytics-mobile-table td::before {
        content: attr(data-label);
        color: var(--color-fg-muted);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
    }

    .analytics-page .analytics-db-table th {
        padding-bottom: 4px;
        background: var(--color-canvas-subtle);
        color: var(--color-fg-muted);
        font-size: 13px;
        line-height: 1.3;
    }

    .analytics-fieldset {
        padding: 10px;
    }
}

/* Statistics tables: keep horizontal scrolling on small screens */
.analytics-scroll-table {
    min-width: 620px;
}

.analytics-pages-table .admin-one-line {
    display: inline-block;
    max-width: 520px;
    vertical-align: bottom;
}

@media (max-width: 640px) {
    .analytics-stat-page .table-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        max-width: 100%;
        border: 1px solid var(--color-border-default);
        border-radius: 12px;
        background: var(--color-canvas-default);
        -webkit-overflow-scrolling: touch;
        cursor: grab;
    }

    .analytics-stat-page .analytics-scroll-table {
        display: table;
        width: 100%;
        min-width: 620px;
        border-collapse: collapse;
        border-spacing: 0;
        font-size: 14px;
    }

    .analytics-stat-page .analytics-scroll-table thead {
        display: table-header-group;
    }

    .analytics-stat-page .analytics-scroll-table tbody {
        display: table-row-group;
    }

    .analytics-stat-page .analytics-scroll-table tr {
        display: table-row;
        margin-bottom: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .analytics-stat-page .analytics-scroll-table th,
    .analytics-stat-page .analytics-scroll-table td {
        display: table-cell;
        width: auto;
        padding: 10px 10px;
        white-space: nowrap;
        line-height: 1.4;
        vertical-align: middle;
    }

    .analytics-stat-page .analytics-scroll-table td::before {
        content: none;
    }

    .analytics-pages-table .admin-one-line {
        max-width: 260px;
    }
}

/* Mobile hardening for statistics pages */
.analytics-page,
.analytics-page > *,
.analytics-chart-card,
.analytics-table-details,
.analytics-settings-form,
.analytics-fieldset {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    justify-self: stretch;
}

.analytics-page .admin-help,
.analytics-page .form-hint,
.analytics-chart-head p,
.analytics-table-summary,
.analytics-page code {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

.analytics-stat-page .analytics-chart-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.analytics-stat-page #analytics-30-days-chart {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 640px) {
    .analytics-page {
        gap: 12px;
    }

    .analytics-chart-card,
    .analytics-settings-form,
    .analytics-fieldset,
    .analytics-table-details {
        border-radius: 12px;
    }

    .analytics-chart-card {
        padding: 12px;
    }

    .analytics-chart-head h2 {
        font-size: 17px;
    }

    .analytics-stat-page .analytics-chart-wrap {
        min-height: 260px;
        padding-bottom: 4px;
    }

    .analytics-stat-page .analytics-chart-canvas {
        width: 620px;
        min-width: 620px;
        height: 260px;
        min-height: 260px;
    }

    .analytics-stat-page .analytics-top-actions,
    .analytics-settings-actions,
    .profile-settings-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 10px;
    }

    .analytics-stat-page .analytics-top-actions .btn,
    .analytics-stat-page .analytics-top-actions .inline-form,
    .analytics-stat-page .analytics-top-actions button,
    .analytics-settings-actions .btn,
    .analytics-settings-actions button,
    .profile-settings-actions .btn,
    .profile-settings-actions button {
        width: 100%;
        justify-content: center;
    }

    .analytics-page .checkbox-line {
        align-items: flex-start;
        line-height: 1.4;
    }

    .analytics-page .form-control,
    .analytics-page textarea {
        max-width: 100%;
    }

    .analytics-table-summary {
        padding: 12px;
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .analytics-table-summary span {
        max-width: calc(100% - 22px);
    }

    .analytics-details-empty {
        padding: 12px;
    }

    .analytics-db-table code {
        white-space: normal;
    }
}

/* Compact pagination for long lists and mobile screens */
.page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 34px;
    color: var(--color-fg-muted);
    font-weight: 600;
}

@media (max-width: 520px) {
    .pagination {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 4px;
        padding-bottom: 2px;
    }

    .pagination::-webkit-scrollbar {
        display: none;
    }

    .page-link {
        min-width: 30px;
        height: 30px;
        border-radius: 7px;
        font-size: 13px;
    }

    .page-ellipsis {
        min-width: 18px;
        height: 30px;
        font-size: 13px;
    }
}

/* Hide visible scrollbars for question tags, keeping horizontal swipe/scroll active */
.question-card > .tag-row,
.question-page > .tag-row {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.question-card > .tag-row::-webkit-scrollbar,
.question-page > .tag-row::-webkit-scrollbar {
    display: none;
}

/* Cayano home and menu imported from Old */
:root {
    --MinShir: 320px;
    --Menu: 55px;
}

.navigator {
    position: sticky;
    top: 0;
    display: grid;
    width: 100%;
    height: var(--Menu);
    align-items: center;
    box-sizing: border-box;
    background: rgba(255,255,255,.9);
    border-bottom: 1px solid rgba(220,220,220,.82);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    z-index: 20000;
}

.Menu {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#Coop {
    background-color: transparent;
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 20001;
    width: 240px;
    height: var(--Menu);
    display: flex;
    align-items: center;
}

#Coop a {
    display: flex;
    align-items: center;
    user-select: none;
}

#Coop button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--Menu);
    height: var(--Menu);
    flex: 0 0 var(--Menu);
    border: 0;
    background-color: transparent;
    cursor: pointer;
    padding: 0;
    color: #232323;
    opacity: 1;
}

#Coop svg {
    display: block;
    width: 24px;
    height: 24px;
    padding: 0;
    fill: #232323;
    opacity: 1;
}

#Coop svg path {
    fill: #232323 !important;
    opacity: 1;
}

#Menu {
    z-index: 20000;
    position: fixed;
    inset: 0 auto auto 0;
    min-width: 240px;
    width: 100vw;
    max-width: 240px;
    height: auto;
    background: rgba(255,255,255,.92);
    border-right: 1px solid rgba(220,220,220,.82);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.2s cubic-bezier(.8,.2,.05,1);
    list-style-type: none;
}

#Menu ul {
    all: unset;
}

#Menu li {
    margin: 15px 0 15px 15px;
}

#MenuOver {
    margin-top: 55px;
    height: calc(100vh - var(--Menu));
    overflow: auto;
}

#menuToggle a {
    text-decoration: none;
    color: #232323;
    transition: color .3s ease;
}

#menuToggle a:hover {
    color: tomato;
}

.cayano-menu-inspiration {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cayano-menu-inspiration > span {
    animation: cayano-menu-inspiration-text-flash 2.6s cubic-bezier(.45, 0, .35, 1) infinite;
}

.cayano-menu-attention-star {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    overflow: visible;
    color: #8c959d;
    fill: transparent;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
    transform-origin: center;
    animation: cayano-menu-star-flash 2.6s cubic-bezier(.45, 0, .35, 1) infinite;
}

@keyframes cayano-menu-star-flash {
    0%, 25%, 100% {
        color: #8c959d;
        filter: drop-shadow(0 0 0 transparent);
        transform: scale(1);
    }

    56% {
        color: #1cc350;
        filter: drop-shadow(0 0 3px rgba(28, 195, 80, .7)) drop-shadow(0 0 7px rgba(28, 195, 80, .42));
        transform: scale(1.08);
    }

    87% {
        color: #8c959d;
        filter: drop-shadow(0 0 0 transparent);
        transform: scale(1);
    }
}

@keyframes cayano-menu-inspiration-text-flash {
    0%, 25%, 87%, 100% {
        color: #232323;
    }

    56% {
        color: #1cc350;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cayano-menu-attention-star,
    .cayano-menu-inspiration > span {
        animation: none;
    }
}

.action-card.is-muted-taxonomy span:first-child {
    color: #8c959f;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.menu-logout {
    color: #d1242f;
}

#menuToggle a:hover .menu-logout {
    color: #b4232d;
}

#GoodJob {
    text-transform: lowercase;
    gap: 4px;
}

#GoodJob img {
    height: 25px;
    pointer-events: none;
}

.imp-button {
    display: inline;
    width: auto;
    max-width: none;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    line-height: inherit;
}

.cont {
    min-width: calc(var(--MinShir) - 32px);
    width: calc(100% - 32px);
    margin: 15px auto 0;
    max-width: 640px;
}

.phrase {
    text-align: center;
    padding: 35px 0;
    user-select: none;
    pointer-events: none;
}

.phrase object {
    max-width: 100%;
}

.transparent {
    visibility: hidden;
}

.himg {
    min-width: calc(var(--MinShir) - 32px);
    width: 100%;
    margin: 0 auto 10px;
    max-width: 810px;
    overflow-x: hidden;
    text-align: center;
    padding: 15px 0;
}

.himg-track {
    position: relative;
    left: 50%;
    display: flex;
    width: max-content;
    gap: 15px;
    transform: translateX(-50%);
}

.himg img {
    width: 245px;
    height: 160px;
    border-radius: 15px;
    object-fit: cover;
    transition: all 300ms cubic-bezier(.5,.85,.25,2);
    transform: rotate(2.5deg);
    pointer-events: none;
    user-select: none;
}

.himg img:nth-child(odd) {
    transform: rotate(-2.5deg);
}

.himg:hover img {
    transform: none;
}

.contour {
    box-shadow: rgba(9,30,66,.10) 0 1px 1px, rgba(9,30,66,.06) 0 0 1px 1px;
}

.cayano-home-phrase {
    width: 100%;
    margin-top: 15px;
}

.cayano-home-images + .welcome-line,
.cayano-home-images + .home-search {
    margin-top: 80px;
}

.cayano-footer .footer-inner {
    color: #7f8793;
    font-size: 14px;
}

@media (min-width: 700px) {
    .phrase {
        min-height: 272.859px;
    }
}

@media (max-width: 760px) {
    .himg {
        overflow-x: hidden;
        padding-left: 15px;
        padding-right: 15px;
        scrollbar-width: none;
    }

    .himg::-webkit-scrollbar {
        display: none;
    }

    .himg img {
        flex: 0 0 245px;
    }
}


/* Compact database maintenance action */
.database-clear-like-form {
    display: flex;
    width: fit-content;
    max-width: 100%;
}

.database-clear-like-btn {
    min-height: 40px;
    white-space: normal;
    text-align: center;
}

.menu-logout-form {
    margin: 0;
}

.menu-logout-form button {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #d1242f;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.menu-logout-form button:hover,
.menu-logout-form button:focus-visible {
    color: #b4232d;
    outline: none;
}

@media (max-width: 640px) {
    .database-clear-like-form,
    .database-clear-like-btn {
        width: 100%;
    }
}

/* Public content sizing */
body {
    font-family: Arial, Helvetica, sans-serif;
}

main.container:not(.panel-container) .page-head,
main.container:not(.panel-container) .question-list,
main.container:not(.panel-container) .question-card,
main.container:not(.panel-container) .question-page,
main.container:not(.panel-container) .answers-section,
main.container:not(.panel-container) .answer-card,
main.container:not(.panel-container) .related-questions,
main.container:not(.panel-container) .pagination {
    width: 100%;
    max-width: 810px;
    margin-left: auto;
    margin-right: auto;
}

main.container:not(.panel-container) .question-page,
main.container:not(.panel-container) .question-body,
main.container:not(.panel-container) .answer-card,
main.container:not(.panel-container) .answer-text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

main.container:not(.panel-container) .question-card {
    font-family: Arial, Helvetica, sans-serif;
}

main.container:not(.panel-container) .question-card p {
    font-size: 16px;
}

main.container:not(.panel-container) .question-card h2,
main.container:not(.panel-container) .question-card h2 a {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
}

main.container:not(.panel-container) .question-page h1 {
    font-family: Arial, Helvetica, sans-serif;
}

main.container:not(.panel-container) .author-name,
main.container:not(.panel-container) .mini-avatar,
main.container:not(.panel-container) .profile-avatar {
    font-weight: 400;
}

main.container:not(.panel-container) .answer-text blockquote {
    padding-left: 42px;
    border: 0;
}

.answer-editorjs .cdx-quote {
    border: 0;
}

main.container:not(.panel-container) .answer-text blockquote::before,
.answer-editorjs .cdx-quote::before {
    content: "\201C";
    display: block;
}

/* Cayano inspiration feed */
.badge-soft {
    background: #eef8f4;
    color: #13794f;
}

.badge-danger {
    background: #fff1f1;
    color: #d1242f;
}

.page-head.cayano-feed-head {
    margin: 0 auto;
    padding: 0 0 30px;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
}

.cayano-feed-head h1 {
    text-align: center;
}

.cayano-category-head p {
    margin: 8px auto 0;
    text-align: center;
}

.cayano-feed {
    display: grid;
    gap: 18px;
    width: 100%;
    max-width: 810px;
    margin: 0 auto;
}

.cayano-feed-ad-slot {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid #d0d7de;
    border-radius: 10px;
}

.cayano-feed-ad-slot > .cms-banner-slot {
    width: 100%;
    height: 100%;
    margin: 0;
}

.cayano-feed-ad-caption {
    margin-top: 8px;
    overflow: hidden;
    color: var(--color-fg-muted);
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cayano-post-card {
    position: relative;
    overflow: hidden;
    padding-bottom: 18px;
    border: 0;
    border-bottom: 1px solid #d8dde5;
    border-radius: 0;
    background: transparent;
}

.cayano-post-card:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.cayano-post-card-related {
    width: 100%;
    padding-bottom: 0;
    border-bottom: 0;
}

.cayano-post-visual {
    position: relative;
}

.cayano-post-image {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0;
    border: 1px solid rgba(223, 228, 232, 1);
    overflow: hidden;
    border-radius: 10px;
}

.cayano-post-image-link {
    cursor: pointer;
}

.cayano-post-edit-link {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .78);
    color: #374151;
    box-shadow: 0 2px 8px rgba(31, 41, 55, .16);
    backdrop-filter: blur(10px);
}

.cayano-post-edit-link:hover,
.cayano-post-edit-link:focus-visible {
    background: rgba(255, 255, 255, .96);
    color: var(--color-accent-fg);
    outline: none;
}

.cayano-post-edit-link svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.cayano-post-image img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 0;
    border-radius: 10px;
}

.cayano-post-footer {
    display: flex;
    min-width: 0;
    min-height: 24px;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: var(--color-fg-muted);
    font-size: 13px;
    line-height: 1;
}

.cayano-feed .cayano-post-footer {
    font-size: 14px;
}

.cayano-post-inline-actions {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}

.cayano-post-inline-actions .article-action-button {
    min-width: 0;
    height: 24px;
    padding: 0;
    font-size: 14px;
}

.cayano-post-inline-actions .article-action-icon {
    width: 18px;
    height: 18px;
}

.cayano-post-inline-actions [data-like-count] {
    font-family: Arial, Helvetica, sans-serif;
}

.cayano-post-footer-alt {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--color-fg-muted);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cayano-related-grid .cayano-post-card {
    min-width: 0;
}

.cayano-post-related-alt {
    margin-top: 8px;
    overflow: hidden;
    color: var(--color-fg-muted);
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cayano-post-related-title,
.cayano-post-original-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--color-accent-fg);
    font-size: 13px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cayano-post-related-title {
    text-align: center;
}

.cayano-post-related-title:hover,
.cayano-post-related-title:focus-visible,
.cayano-post-original-title:hover,
.cayano-post-original-title:focus-visible {
    color: var(--color-accent-fg);
    text-decoration: underline;
}

.cayano-post-original-title {
    flex: 1 1 auto;
    font-size: 14px;
}

.cayano-admin-thumb {
    display: block;
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 10px;
}

.cayano-admin-photo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--color-border-default);
    border-radius: 12px;
    background: var(--color-canvas-subtle);
}

.cayano-admin-photo img {
    width: 112px;
    height: 112px;
    object-fit: cover;
    border-radius: 12px;
}

@media (max-width: 640px) {
    .page-head.cayano-feed-head {
        padding: 0 0 18px;
    }

    .cayano-feed {
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
        gap: 18px;
    }

    .cayano-feed-column {
        display: grid;
        min-width: 0;
        gap: 18px;
    }

    .cayano-feed .cayano-post-card {
        min-width: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .cayano-post-card {
        padding-bottom: 18px;
        border-radius: 0;
    }

    .cayano-post-card-related {
        padding-bottom: 0;
    }

    .profile-answer-date {
        display: none;
    }

    .cayano-admin-photo,
    .cayano-admin-photo .btn {
        width: 100%;
    }

    .cayano-admin-toolbar {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        overflow: visible;
    }

    .cayano-admin-toolbar .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .profile-avatar-settings {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .profile-avatar-delete {
        width: 100%;
    }
}

@media (min-width: 640px) {
    .cayano-feed {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 18px;
    }

    .cayano-feed-column {
        display: grid;
        align-content: start;
        gap: 18px;
    }

    .cayano-feed .cayano-post-card {
        padding-bottom: 0;
        border-bottom: 0;
    }
}

.u-text-bold {
    font-family: sans-serif;
}

.opengraph-default-preview {
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
    box-sizing: border-box;
    border: 1px solid var(--color-border-default);
    border-radius: 12px;
}

.opengraph-image-control {
    display: grid;
    gap: 10px;
}

.opengraph-image-actions {
    align-items: center;
}

.opengraph-image-upload-label.is-disabled {
    opacity: .6;
    pointer-events: none;
}

.opengraph-image-delete[hidden],
.opengraph-image-file[hidden] {
    display: none !important;
}

.opengraph-image-status {
    min-height: 20px;
}

.opengraph-image-status.is-error {
    color: #d1242f;
}

.image-library-upload {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border-default);
}