/* ============================================================================
   ЛЕБІГОЛЯНДІЯ — PUBLIC UI FINAL
   Replace: css/unified-ui.css

   Purpose:
   - one sharp industrial style for all PUBLIC page controls and blocks;
   - correct alignment on Videos, Feed, Donates, Giveaways and Winners;
   - complete readable light and dark themes;
   - no selectors for #adminModal, #communityToolsModal, #streamerRolesModal,
     #bulkActionsModal or #auditLogModal.
   ============================================================================ */

:root {
    --public-control-h: 38px;
    --public-control-h-small: 32px;
    --public-gap: 8px;
    --public-panel: var(--bg-card);
    --public-panel-soft: var(--bg-secondary);
    --public-panel-deep: var(--bg-primary);
    --public-input: var(--bg-input);
    --public-border: var(--border);
    --public-border-soft: var(--border-soft);
    --public-border-strong: var(--border-strong);
    --public-text: var(--text-primary);
    --public-text-soft: var(--text-secondary);
    --public-text-muted: var(--text-muted);
    --public-shadow: 5px 5px 0 rgba(0, 0, 0, 0.22);
    --public-shadow-hover: 7px 7px 0 rgba(0, 0, 0, 0.26);
    --public-transition: 0.15s ease;
}

body.light {
    --public-panel: #e9e6de;
    --public-panel-soft: #dfdcd4;
    --public-panel-deep: #d6d3cb;
    --public-input: #f4f1e9;
    --public-border: #8d8c86;
    --public-border-soft: #aaa79f;
    --public-border-strong: #666863;
    --public-text: #191b1d;
    --public-text-soft: #44484b;
    --public-text-muted: #686d70;
    --public-shadow: 5px 5px 0 rgba(0, 0, 0, 0.14);
    --public-shadow-hover: 7px 7px 0 rgba(0, 0, 0, 0.17);
}

/* --------------------------------------------------------------------------
   Public page foundation
   -------------------------------------------------------------------------- */

:is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage) {
    min-width: 0;
    color: var(--public-text);
}

:is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage) *,
:is(
    #addModal,
    #editModal,
    #commentsModal,
    #profileModal,
    #historyModal,
    #favoritesModal,
    #statsModal,
    #publicProfileModal,
    #feedComposerModal,
    #feedPostModal,
    #feedDraftsModal,
    #giveawayCreateModal,
    #giveawayCommentsModal,
    #giveawayParticipantsModal,
    #confirmModal
) * {
    border-radius: 0 !important;
}

/* Grids keep every card aligned to the same row height. */
#videosPage :is(#feed, .feed-grid),
#feedPage .feed-stream,
#donatesPage .donates-grid,
#giveawaysPage :is(.giveaways-grid, .giveaways-loading-grid),
#winnersPage .winners-grid {
    align-items: stretch !important;
}

/* --------------------------------------------------------------------------
   Shared card / block language
   -------------------------------------------------------------------------- */

#videosPage .feed-card,
#feedPage .community-post-card,
#donatesPage .donate-card,
#giveawaysPage .giveaway-card,
#winnersPage .winner-history-card {
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--public-text) !important;
    background: var(--public-panel) !important;
    border: 1px solid var(--public-border) !important;
    border-top: 4px solid var(--industrial-steel) !important;
    box-shadow: var(--public-shadow) !important;
    transform: none;
    transition:
        transform var(--public-transition),
        border-color var(--public-transition),
        box-shadow var(--public-transition),
        background var(--public-transition);
}

#videosPage .feed-card:hover,
#feedPage .community-post-card:hover,
#donatesPage .donate-card:hover,
#giveawaysPage .giveaway-card:hover,
#winnersPage .winner-history-card:hover {
    transform: translate(-2px, -2px) !important;
    border-top-color: var(--accent) !important;
    box-shadow: var(--public-shadow-hover) !important;
}

#videosPage .feed-card.is-video-pinned,
#feedPage .community-post-card--pinned,
#donatesPage .donate-card.is-pinned,
#giveawaysPage .giveaway-card.is-pinned {
    border-top-color: var(--accent) !important;
}

#videosPage .feed-card-info,
#feedPage .community-post-body,
#donatesPage :is(.donate-body, .donate-card-body, .donate-card-content),
#giveawaysPage .giveaway-card-body,
#winnersPage .winner-history-body {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    color: var(--public-text) !important;
    background: transparent !important;
}

#videosPage .feed-card-info,
#feedPage .community-post-body,
#donatesPage .donate-body,
#giveawaysPage .giveaway-card-body,
#winnersPage .winner-history-body {
    padding: 15px !important;
}

/* Titles and regular copy. */
:is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage)
:is(
    .feed-card-title,
    .feed-card-title a,
    .community-post-title,
    .donate-card-title,
    .donate-body h3,
    .giveaway-title,
    .winner-history-title,
    h1,
    h2,
    h3
) {
    color: var(--public-text) !important;
    -webkit-text-fill-color: var(--public-text) !important;
    text-shadow: none !important;
}

:is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage)
:is(
    .video-card-meta,
    .video-channel-link,
    .video-channel-views,
    .community-post-description,
    .community-post-date-group,
    .donate-body p,
    .donate-card-description,
    .donate-short-description,
    .donate-author,
    .donate-created-at,
    .donate-progress-percent,
    .giveaway-description,
    .giveaway-antifraud-note,
    .winner-history-meta,
    p,
    small
) {
    color: var(--public-text-soft);
}

/* Empty, loading and informational blocks. */
:is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage)
:is(
    .empty-state,
    .feed-empty-state,
    .donates-empty,
    .giveaways-empty-state,
    .winners-empty-state,
    .unified-comments-state
) {
    min-height: 220px;
    padding: clamp(28px, 5vw, 50px) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--public-text-muted) !important;
    background: var(--public-panel-soft) !important;
    border: 1px dashed var(--public-border-strong) !important;
    box-shadow: var(--public-shadow);
    text-align: center;
}

/* --------------------------------------------------------------------------
   Page toolbars and correct centering
   -------------------------------------------------------------------------- */

#videosPage .controls,
#feedPage .feed-page-header,
#donatesPage .donates-header,
#giveawaysPage .giveaways-toolbar,
#winnersPage .winners-toolbar {
    min-height: 58px !important;
    margin: 0 0 18px !important;
    padding: 10px 0 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--public-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--public-border-soft) !important;
    box-shadow: none !important;
}

#videosPage .controls {
    justify-content: space-between !important;
}

#feedPage .feed-page-header,
#donatesPage .donates-header {
    justify-content: flex-end !important;
}

#giveawaysPage .giveaways-toolbar,
#winnersPage .winners-toolbar {
    justify-content: space-between !important;
}

#videosPage :is(.controls-row, .filters),
#donatesPage .donate-filters,
#giveawaysPage .giveaways-filters,
:is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage)
:is(.pagination, .donate-actions, .donate-detail-actions, .giveaway-actions, .confirm-actions, .modal-actions) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--public-gap) !important;
}

#videosPage .controls-row {
    justify-content: space-between;
}

#videosPage .filters {
    justify-content: flex-start;
}

#donatesPage .donate-actions,
#giveawaysPage .giveaway-actions {
    width: 100%;
    margin-top: auto !important;
    padding-top: 12px;
    align-items: stretch;
}

/* --------------------------------------------------------------------------
   One industrial button system
   -------------------------------------------------------------------------- */

/* Base action geometry. Exact classes only: semantic text/card buttons are not
   converted into rectangular controls. */
:is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage)
:is(
    .btn,
    .add-video-btn,
    .filter-btn,
    .donate-filter,
    .donate-participate-btn,
    .giveaway-filter,
    .page-btn,
    .winner-open-button,
    .video-favorite-btn,
    .video-comment-btn,
    .video-card-pin,
    .community-post-stat-button,
    .comment-action-btn,
    .comment-submit-btn,
    .emoji-picker-button,
    .modal-close-btn,
    .comment-inline-cancel
),
:is(
    #addModal,
    #editModal,
    #commentsModal,
    #profileModal,
    #historyModal,
    #favoritesModal,
    #statsModal,
    #publicProfileModal,
    #feedComposerModal,
    #feedPostModal,
    #feedDraftsModal,
    #giveawayCreateModal,
    #giveawayCommentsModal,
    #giveawayParticipantsModal,
    #confirmModal
)
:is(
    .btn,
    .comment-action-btn,
    .comment-submit-btn,
    .emoji-picker-button,
    .modal-close-btn,
    .comment-inline-cancel
) {
    min-height: var(--public-control-h) !important;
    padding: 8px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    color: var(--public-text) !important;
    background: linear-gradient(180deg, var(--public-panel), var(--public-panel-soft)) !important;
    border: 1px solid var(--public-border) !important;
    border-left: 4px solid var(--industrial-steel) !important;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2) !important;
    font-family: "Roboto Condensed", "Inter Tight", sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    white-space: normal;
    cursor: pointer;
    transform: none;
    transition:
        color var(--public-transition),
        background var(--public-transition),
        border-color var(--public-transition),
        box-shadow var(--public-transition),
        transform var(--public-transition) !important;
}

/* Primary actions. */
:is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage)
:is(
    .btn:not(.outline):not(.danger),
    .add-video-btn,
    .feed-create-post-btn,
    .donate-participate-btn,
    .giveaway-join-btn,
    .filter-btn.active,
    .donate-filter.active,
    .giveaway-filter.active,
    .page-btn.active
),
:is(
    #addModal,
    #editModal,
    #commentsModal,
    #profileModal,
    #historyModal,
    #favoritesModal,
    #statsModal,
    #publicProfileModal,
    #feedComposerModal,
    #feedPostModal,
    #feedDraftsModal,
    #giveawayCreateModal,
    #giveawayCommentsModal,
    #giveawayParticipantsModal,
    #confirmModal
)
:is(.btn:not(.outline):not(.danger), .comment-submit-btn) {
    color: #fff !important;
    background: var(--gradient-primary) !important;
    border-color: #ed4b41 !important;
    border-left-color: var(--accent-dark) !important;
}

/* Positive selected state keeps the same geometry. */
#giveawaysPage .giveaway-join-btn.joined,
#videosPage .my-videos-btn.active {
    color: #fff !important;
    background: linear-gradient(180deg, #45a86f, #246c48) !important;
    border-color: #59b980 !important;
    border-left-color: #174a31 !important;
}

/* Destructive actions. */
:is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage) .btn.danger,
:is(
    #addModal,
    #editModal,
    #commentsModal,
    #profileModal,
    #historyModal,
    #favoritesModal,
    #statsModal,
    #publicProfileModal,
    #feedComposerModal,
    #feedPostModal,
    #feedDraftsModal,
    #giveawayCreateModal,
    #giveawayCommentsModal,
    #giveawayParticipantsModal,
    #confirmModal
) .btn.danger {
    color: #fff !important;
    background: linear-gradient(180deg, #e64a41, #9f1711) !important;
    border-color: #ec6159 !important;
    border-left-color: #71100b !important;
}

/* Hover and press use one movement everywhere. */
:is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage)
:is(
    .btn,
    .add-video-btn,
    .filter-btn,
    .donate-filter,
    .donate-participate-btn,
    .giveaway-filter,
    .page-btn,
    .winner-open-button,
    .video-favorite-btn,
    .video-comment-btn,
    .video-card-pin,
    .community-post-stat-button,
    .comment-action-btn,
    .comment-submit-btn,
    .emoji-picker-button,
    .modal-close-btn,
    .comment-inline-cancel
):not(:disabled):hover,
:is(
    #addModal,
    #editModal,
    #commentsModal,
    #profileModal,
    #historyModal,
    #favoritesModal,
    #statsModal,
    #publicProfileModal,
    #feedComposerModal,
    #feedPostModal,
    #feedDraftsModal,
    #giveawayCreateModal,
    #giveawayCommentsModal,
    #giveawayParticipantsModal,
    #confirmModal
)
:is(.btn, .comment-action-btn, .comment-submit-btn, .emoji-picker-button, .modal-close-btn, .comment-inline-cancel):not(:disabled):hover {
    color: #fff !important;
    background: linear-gradient(180deg, #e44339, #af1811) !important;
    border-color: #f05a50 !important;
    border-left-color: var(--accent-dark) !important;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.23) !important;
    transform: translate(-1px, -1px) !important;
}

:is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage)
:is(
    .btn,
    .add-video-btn,
    .filter-btn,
    .donate-filter,
    .donate-participate-btn,
    .giveaway-filter,
    .page-btn,
    .winner-open-button,
    .video-favorite-btn,
    .video-comment-btn,
    .video-card-pin,
    .community-post-stat-button,
    .comment-action-btn,
    .comment-submit-btn,
    .emoji-picker-button,
    .modal-close-btn,
    .comment-inline-cancel
):not(:disabled):active,
:is(
    #addModal,
    #editModal,
    #commentsModal,
    #profileModal,
    #historyModal,
    #favoritesModal,
    #statsModal,
    #publicProfileModal,
    #feedComposerModal,
    #feedPostModal,
    #feedDraftsModal,
    #giveawayCreateModal,
    #giveawayCommentsModal,
    #giveawayParticipantsModal,
    #confirmModal
)
:is(.btn, .comment-action-btn, .comment-submit-btn, .emoji-picker-button, .modal-close-btn, .comment-inline-cancel):not(:disabled):active {
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2) !important;
    transform: translate(1px, 1px) !important;
}

/* Compact icon/stat controls retain the same design without becoming huge. */
:is(#videosPage, #feedPage, #giveawaysPage)
:is(
    .video-favorite-btn,
    .video-comment-btn,
    .video-card-pin,
    .community-post-stat-button,
    .giveaway-small-btn,
    .comment-action-btn,
    .emoji-picker-button,
    .modal-close-btn,
    .comment-inline-cancel
),
:is(
    #commentsModal,
    #feedPostModal,
    #giveawayCommentsModal,
    #giveawayParticipantsModal
)
:is(.comment-action-btn, .emoji-picker-button, .modal-close-btn, .comment-inline-cancel) {
    min-width: var(--public-control-h-small) !important;
    min-height: var(--public-control-h-small) !important;
    padding: 6px 9px !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.02em !important;
}

:is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage) button:disabled,
:is(
    #addModal,
    #editModal,
    #commentsModal,
    #profileModal,
    #historyModal,
    #favoritesModal,
    #statsModal,
    #publicProfileModal,
    #feedComposerModal,
    #feedPostModal,
    #feedDraftsModal,
    #giveawayCreateModal,
    #giveawayCommentsModal,
    #giveawayParticipantsModal,
    #confirmModal
) button:disabled {
    opacity: 0.5 !important;
    filter: grayscale(0.35);
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

:is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage)
:is(button, a, [role="button"]):focus-visible,
:is(
    #addModal,
    #editModal,
    #commentsModal,
    #profileModal,
    #historyModal,
    #favoritesModal,
    #statsModal,
    #publicProfileModal,
    #feedComposerModal,
    #feedPostModal,
    #feedDraftsModal,
    #giveawayCreateModal,
    #giveawayCommentsModal,
    #giveawayParticipantsModal,
    #confirmModal
)
:is(button, a, [role="button"]):focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
}

/* Stars are stars, not rectangular buttons. */
#videosPage .rating-star {
    width: 25px !important;
    min-width: 25px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    color: #62676c !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    transform: none !important;
}

#videosPage .rating-star:hover,
#videosPage .rating-star:focus-visible,
#videosPage .rating-star.active {
    color: #f4bd43 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Text/profile buttons stay text links. */
:is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage)
:is(.profile-link, .comment-nick, [data-profile-login]) {
    min-height: auto !important;
    padding: 0 !important;
    color: var(--accent-hover) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font: inherit !important;
    font-weight: 800 !important;
    letter-spacing: normal !important;
    text-align: inherit !important;
    text-transform: none !important;
    transform: none !important;
}

:is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage)
:is(.profile-link, .comment-nick, [data-profile-login]):hover {
    color: var(--accent) !important;
    background: transparent !important;
    text-decoration: underline;
    transform: none !important;
}

/* Content-card buttons should look like content, not toolbar controls. */
#feedPage :is(.community-post-preview, .community-post-title),
#winnersPage :is(.winner-history-title, .winner-history-user),
#giveawaysPage :is(.giveaway-author, .giveaway-participant) {
    box-shadow: none !important;
    text-transform: none !important;
}

#feedPage .community-post-title,
#winnersPage .winner-history-title {
    width: 100%;
    padding: 0 !important;
    color: var(--public-text) !important;
    background: transparent !important;
    border: 0 !important;
    text-align: left !important;
}

#winnersPage .winner-history-user,
#giveawaysPage .giveaway-participant {
    color: var(--public-text) !important;
    background: var(--public-panel-deep) !important;
    border: 1px solid var(--public-border-soft) !important;
}

/* --------------------------------------------------------------------------
   Filters, fields, tags and sub-blocks
   -------------------------------------------------------------------------- */

#videosPage :is(.filter-btn, .cat-btn),
#donatesPage .donate-filter,
#giveawaysPage .giveaway-filter {
    flex: 0 0 auto;
}

#giveawaysPage .giveaway-join-btn {
    flex: 1 1 160px;
}

#giveawaysPage .giveaway-small-btn {
    flex: 0 0 auto;
}

#donatesPage .donate-actions > :is(.btn, .donate-participate-btn) {
    flex: 1 1 145px;
}

:is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage)
:is(select, input:not([type="checkbox"]):not([type="radio"]), textarea, .input-field, .sort-pill),
:is(
    #addModal,
    #editModal,
    #commentsModal,
    #profileModal,
    #historyModal,
    #favoritesModal,
    #statsModal,
    #publicProfileModal,
    #feedComposerModal,
    #feedPostModal,
    #feedDraftsModal,
    #giveawayCreateModal,
    #giveawayCommentsModal,
    #giveawayParticipantsModal,
    #confirmModal
)
:is(select, input:not([type="checkbox"]):not([type="radio"]), textarea, .input-field) {
    min-height: var(--public-control-h) !important;
    color: var(--public-text) !important;
    background: var(--public-input) !important;
    border: 1px solid var(--public-border) !important;
    border-left: 4px solid var(--industrial-steel) !important;
    box-shadow: none !important;
}

:is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage)
:is(select, input, textarea, .input-field):focus,
:is(
    #addModal,
    #editModal,
    #commentsModal,
    #profileModal,
    #historyModal,
    #favoritesModal,
    #statsModal,
    #publicProfileModal,
    #feedComposerModal,
    #feedPostModal,
    #feedDraftsModal,
    #giveawayCreateModal,
    #giveawayCommentsModal,
    #giveawayParticipantsModal,
    #confirmModal
)
:is(select, input, textarea, .input-field):focus {
    border-color: var(--accent) !important;
    border-left-color: var(--accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(201, 42, 32, 0.2) !important;
}

:is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage)
:is(input::placeholder, textarea::placeholder),
:is(
    #addModal,
    #editModal,
    #commentsModal,
    #profileModal,
    #historyModal,
    #favoritesModal,
    #statsModal,
    #publicProfileModal,
    #feedComposerModal,
    #feedPostModal,
    #feedDraftsModal,
    #giveawayCreateModal,
    #giveawayCommentsModal,
    #giveawayParticipantsModal,
    #confirmModal
)
:is(input::placeholder, textarea::placeholder) {
    color: var(--public-text-muted) !important;
    opacity: 1;
}

:is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage)
:is(
    .tag,
    .community-post-tags span,
    .donate-tags span,
    .giveaway-conditions > span,
    .status-badge,
    .video-card-pin-badge,
    .donate-pin-badge,
    .giveaway-pin-badge,
    .winner-history-badge
) {
    padding: 4px 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--public-text-soft) !important;
    background: var(--public-panel-soft) !important;
    border: 1px solid var(--public-border) !important;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}

:is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage)
:is(.video-card-pin-badge, .donate-pin-badge, .giveaway-pin-badge) {
    color: #fff !important;
    background: rgba(20, 22, 24, 0.92) !important;
    border-left: 4px solid var(--accent) !important;
}

#videosPage :is(.video-pin-meta),
#feedPage :is(.community-post-footer, .feed-post-detail-description),
#donatesPage :is(.donate-close-reason, .proof-item),
#giveawaysPage :is(
    .giveaway-timer,
    .giveaway-transparency,
    .giveaway-check-row,
    .giveaway-security-box,
    .giveaway-participant,
    .giveaway-winner
),
#winnersPage :is(.winner-history-user, .winner-proof) {
    color: var(--public-text-soft) !important;
    background: var(--public-panel-deep) !important;
    border: 1px solid var(--public-border-soft) !important;
}

#feedPage :is(.feed-main-comment-form, .feed-comment-login-note, .feed-comment-item, .feed-inline-reply-form, .feed-comments-empty),
:is(#commentsModal, #feedPostModal, #giveawayCommentsModal)
:is(.comment-item-modern, .comment-composer-card, .comment-login-note, .feed-comment-item, .feed-inline-reply-form, .feed-comments-empty) {
    color: var(--public-text) !important;
    background: var(--public-panel-soft) !important;
    border-color: var(--public-border) !important;
}

/* Media always stays dark so white overlay text remains readable. */
:is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage)
:is(
    .feed-card-preview,
    .community-post-preview,
    .donate-preview-wrap,
    .giveaway-preview,
    .winner-history-preview,
    .feed-post-detail-image
) {
    background: #090b0c !important;
}

/* --------------------------------------------------------------------------
   Public modal surfaces only. Admin/tool modals are intentionally absent.
   -------------------------------------------------------------------------- */

:is(
    #addModal,
    #editModal,
    #commentsModal,
    #profileModal,
    #historyModal,
    #favoritesModal,
    #statsModal,
    #publicProfileModal,
    #feedComposerModal,
    #feedPostModal,
    #feedDraftsModal,
    #giveawayCreateModal,
    #giveawayCommentsModal,
    #giveawayParticipantsModal,
    #confirmModal
) .modal-content {
    color: var(--public-text) !important;
    background: var(--public-panel) !important;
    border: 1px solid var(--public-border-strong) !important;
    border-top: 5px solid var(--accent) !important;
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.3) !important;
}

:is(
    #addModal,
    #editModal,
    #commentsModal,
    #profileModal,
    #historyModal,
    #favoritesModal,
    #statsModal,
    #publicProfileModal,
    #feedComposerModal,
    #feedPostModal,
    #feedDraftsModal,
    #giveawayCreateModal,
    #giveawayCommentsModal,
    #giveawayParticipantsModal,
    #confirmModal
) :is(h1, h2, h3, h4, label, strong) {
    color: var(--public-text) !important;
    -webkit-text-fill-color: var(--public-text) !important;
}

:is(
    #addModal,
    #editModal,
    #commentsModal,
    #profileModal,
    #historyModal,
    #favoritesModal,
    #statsModal,
    #publicProfileModal,
    #feedComposerModal,
    #feedPostModal,
    #feedDraftsModal,
    #giveawayCreateModal,
    #giveawayCommentsModal,
    #giveawayParticipantsModal,
    #confirmModal
) :is(p, small, .muted, time) {
    color: var(--public-text-soft) !important;
}

/* --------------------------------------------------------------------------
   Header public controls: keep original industrial geometry and sharp edges.
   Admin buttons are explicitly excluded.
   -------------------------------------------------------------------------- */

.header :is(.nav-tab, .header-icon-btn, .header-theme-btn, .theme-btn, .twitch-login-btn)
:not(#adminBtn):not(#communityAdminBtn):not(.header-admin-btn):not(.header-admin-tools-btn) {
    border-radius: 0 !important;
}

.header .nav-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Full light-theme readability fixes
   -------------------------------------------------------------------------- */

body.light :is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage) {
    color: #191b1d !important;
}

body.light #videosPage .feed-card,
body.light #feedPage .community-post-card,
body.light #donatesPage .donate-card,
body.light #giveawaysPage .giveaway-card,
body.light #winnersPage .winner-history-card {
    color: #191b1d !important;
    background: #e9e6de !important;
    border-color: #8d8c86 !important;
}

body.light :is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage)
:is(
    .feed-card-title,
    .feed-card-title a,
    .community-post-title,
    .donate-card-title,
    .donate-body h3,
    .giveaway-title,
    .winner-history-title,
    .giveaway-author strong,
    .winner-history-user strong,
    .comment-nick
) {
    color: #191b1d !important;
    -webkit-text-fill-color: #191b1d !important;
}

body.light :is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage)
:is(
    .video-card-meta,
    .community-post-description,
    .community-post-date-group,
    .donate-body p,
    .donate-card-description,
    .donate-short-description,
    .donate-author,
    .donate-created-at,
    .giveaway-description,
    .giveaway-antifraud-note,
    .winner-history-meta,
    .rating-value,
    .giveaway-card-counters
) {
    color: #44484b !important;
    -webkit-text-fill-color: #44484b !important;
}

body.light #giveawaysPage .giveaway-winner {
    color: #3b2c05 !important;
    background: #eee3c2 !important;
    border-color: #a7852f !important;
}

body.light #giveawaysPage .giveaway-winner :is(strong, .giveaway-winner-name) {
    color: #2d2205 !important;
    -webkit-text-fill-color: #2d2205 !important;
}

body.light #giveawaysPage .giveaway-winner :is(span, small) {
    color: #665018 !important;
    -webkit-text-fill-color: #665018 !important;
}

body.light :is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage)
:is(
    .video-pin-meta,
    .community-post-footer,
    .feed-post-detail-description,
    .donate-close-reason,
    .proof-item,
    .giveaway-timer,
    .giveaway-transparency,
    .giveaway-check-row,
    .giveaway-security-box,
    .giveaway-participant,
    .winner-history-user,
    .winner-proof,
    .feed-main-comment-form,
    .feed-comment-login-note,
    .feed-comment-item,
    .feed-inline-reply-form,
    .feed-comments-empty
) {
    color: #303437 !important;
    background: #dfdcd4 !important;
    border-color: #99968e !important;
}

body.light :is(
    #addModal,
    #editModal,
    #commentsModal,
    #profileModal,
    #historyModal,
    #favoritesModal,
    #statsModal,
    #publicProfileModal,
    #feedComposerModal,
    #feedPostModal,
    #feedDraftsModal,
    #giveawayCreateModal,
    #giveawayCommentsModal,
    #giveawayParticipantsModal,
    #confirmModal
) .modal-content {
    color: #191b1d !important;
    background: #e9e6de !important;
    border-color: #777872 !important;
}

body.light :is(
    #commentsModal,
    #feedPostModal,
    #giveawayCommentsModal
) :is(.comment-item-modern, .comment-composer-card, .comment-login-note, .feed-comment-item, .feed-inline-reply-form, .feed-comments-empty, .emoji-picker-panel) {
    color: #191b1d !important;
    background: #dfdcd4 !important;
    border-color: #99968e !important;
}

body.light :is(
    #commentsModal,
    #feedPostModal,
    #giveawayCommentsModal
) :is(.comment-text, .feed-comment-text, .comment-meta, .comment-date, .comment-time, p, small) {
    color: #44484b !important;
    -webkit-text-fill-color: #44484b !important;
}

/* --------------------------------------------------------------------------
   Dark-theme correction for legacy hard-coded light donate surfaces
   -------------------------------------------------------------------------- */

body:not(.light) #donatesPage .donate-card {
    color: var(--text-primary) !important;
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}

body:not(.light) #donatesPage :is(
    .donate-card-title,
    .donate-body h3
) {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

body:not(.light) #donatesPage :is(
    .donate-card-description,
    .donate-short-description,
    .donate-author,
    .donate-created-at,
    .donate-progress-top,
    .donate-progress-percent,
    .donate-body p
) {
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
}

body:not(.light) #donatesPage .donate-progress-bar {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
}

/* --------------------------------------------------------------------------
   Responsive alignment
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
    #videosPage .controls,
    #feedPage .feed-page-header,
    #donatesPage .donates-header,
    #giveawaysPage .giveaways-toolbar,
    #winnersPage .winners-toolbar {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    #videosPage :is(.controls-row, .filters),
    #donatesPage .donate-filters,
    #giveawaysPage .giveaways-filters {
        width: 100%;
        justify-content: center !important;
    }

    #feedPage .feed-page-header > *,
    #donatesPage .donates-header > *,
    #giveawaysPage #openCreateGiveawayBtn,
    #winnersPage #refreshWinnersBtn {
        width: 100% !important;
    }

    #donatesPage .donate-actions > :is(.btn, .donate-participate-btn),
    #giveawaysPage .giveaway-join-btn {
        width: 100% !important;
        flex-basis: 100% !important;
    }

    :is(
        #addModal,
        #editModal,
        #commentsModal,
        #profileModal,
        #historyModal,
        #favoritesModal,
        #statsModal,
        #publicProfileModal,
        #feedComposerModal,
        #feedPostModal,
        #feedDraftsModal,
        #giveawayCreateModal,
        #giveawayCommentsModal,
        #giveawayParticipantsModal,
        #confirmModal
    ) .modal-actions .btn {
        width: 100%;
    }
}

@media (max-width: 520px) {
    #videosPage .filter-btn,
    #donatesPage .donate-filter,
    #giveawaysPage .giveaway-filter {
        flex: 1 1 calc(50% - 8px);
    }

    #giveawaysPage .giveaway-small-btn {
        flex: 1 1 auto;
    }

    #giveawaysPage .giveaway-small-btn span {
        display: inline !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(#videosPage, #feedPage, #donatesPage, #giveawaysPage, #winnersPage) *,
    :is(
        #addModal,
        #editModal,
        #commentsModal,
        #profileModal,
        #historyModal,
        #favoritesModal,
        #statsModal,
        #publicProfileModal,
        #feedComposerModal,
        #feedPostModal,
        #feedDraftsModal,
        #giveawayCreateModal,
        #giveawayCommentsModal,
        #giveawayParticipantsModal,
        #confirmModal
    ) * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}