/* LEBIGOLAND v60 CSS architecture: pages.css */

/* ===== source: donates.css ===== */
.donates-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
}

.donates-header h1{
    margin:0;
    color:var(--text-primary);
}

.donates-header p{
    color:var(--text-muted);
    margin-top:4px;
}

.donate-filters{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:18px;
}

.donate-filter{
    border:1px solid var(--border);
    background:var(--bg-card);
    color:var(--text-secondary);
    padding:8px 13px;
    border-radius:999px;
    cursor:pointer;
    font-weight:800;
}

.donate-filter.active{
    background:var(--accent);
    color:white;
    border-color:var(--accent);
}

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

.donate-card{
    position:relative;
    overflow:hidden;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    transition:.2s;
}

.donate-card:hover{
    transform:translateY(-4px);
    border-color:var(--accent);
    box-shadow:var(--shadow-lg);
}

.donate-muted{
    filter:grayscale(1);
    opacity:.72;
}

.donate-preview-wrap{
    position:relative;
    aspect-ratio:16/9;
    background:#000;
}

.donate-preview{
    width:100%;
    height:100%;
    object-fit:cover;
}

.donate-status{
    position:absolute;
    right:10px;
    bottom:10px;
    padding:5px 9px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:900;
    color:white;
    background:#22c55e;
}

.status-closed{
    background:#64748b!important;
}

.status-completed{
    background:#7c3aed!important;
}

.donate-pin-badge{
    position:absolute;
    top:10px;
    left:10px;
    z-index:5;
    background:rgba(0,0,0,.65);
    color:#facc15;
    padding:5px 9px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:900;
}

.donate-proof-center{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border:none;
    border-radius:999px;
    padding:10px 16px;
    background:rgba(124,58,237,.92);
    color:white;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 0 24px rgba(124,58,237,.45);
}

.donate-body{
    padding:15px;
}

.donate-author{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--text-muted);
    font-size:.85rem;
    margin-bottom:10px;
}

.donate-body h3{
    margin-bottom:8px;
    color:var(--text-primary);
}

.donate-body p{
    color:var(--text-secondary);
}

.donate-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
}

.donate-close-reason{
    margin-top:10px;
    padding:10px;
    border-radius:var(--radius-md);
    background:rgba(239,68,68,.12);
    color:#fecaca;
    font-size:.85rem;
}

.donate-detail-status{
    display:inline-flex;
    margin-bottom:12px;
    padding:6px 10px;
    border-radius:999px;
    color:white;
    font-weight:900;
    background:#22c55e;
}

.donate-detail-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:18px;
}

.proofs-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:16px;
}

.proof-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    color:var(--accent);
    text-decoration:none;
    background:var(--bg-secondary);
    font-weight:800;
}

.donates-empty{
    grid-column:1/-1;
    text-align:center;
    padding:50px 20px;
    color:var(--text-muted);
}

.donates-empty div{
    font-size:3rem;
    margin-bottom:12px;
}

@media(max-width:700px){
    .donates-header{
        flex-direction:column;
        align-items:stretch;
    }
}

.donate-participate-btn{
    position:relative;
    overflow:hidden;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    min-height:38px;
    padding:0 15px;

    border-radius:999px;
    border:none;

    background:linear-gradient(135deg,#22c55e,#16a34a,#84cc16);
    color:white;

    text-decoration:none;
    font-size:.82rem;
    font-weight:900;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.12) inset,
        0 10px 24px rgba(34,197,94,.28);

    transition:.18s ease;
}

.donate-participate-btn::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transform:translateX(-120%);
    transition:.45s ease;
}

.donate-participate-btn:hover{
    transform:translateY(-2px);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.18) inset,
        0 14px 30px rgba(34,197,94,.35);
}

.donate-participate-btn:hover::before{
    transform:translateX(120%);
}

.donate-upload-preview{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:1rem;
    color:var(--text-muted);
}

.donate-preview-preview{
    width:100%;
    max-height:180px;
    object-fit:cover;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
}

.hidden{
    display:none!important;
}

.donate-progress{
    margin-top:14px;
}

.donate-progress-top{
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:.82rem;
    font-weight:800;
    color:var(--text-secondary);
    margin-bottom:7px;
}

.donate-progress-bar{
    height:10px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(148,163,184,.18);
}

.donate-progress-bar div{
    height:100%;
    border-radius:999px;
    background:linear-gradient(135deg,#22c55e,#84cc16);
    box-shadow:0 0 14px rgba(34,197,94,.35);
}

.donate-progress-percent{
    margin-top:6px;
    font-size:.78rem;
    color:var(--text-muted);
}

body.industrial-theme .donates-page,
body.industrial-theme #donatesPage {
    color: #1b1d1e;
}

body.industrial-theme .donates-header,
body.industrial-theme .donate-page-header {
    margin-bottom: 18px;
    padding: 13px 15px;

    background:
        linear-gradient(
            180deg,
            #1c1f22,
            #111315
        );

    border: 1px solid #3e4246;
    border-left: 5px solid var(--accent);

    box-shadow:
        4px 4px 0 rgba(0, 0, 0, 0.17);
}

body.industrial-theme .donates-header h2,
body.industrial-theme .donate-page-header h2 {
    color: #f0eee7;

    font-family: "Russo One", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}

body.industrial-theme .donates-grid,
body.industrial-theme .donate-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(330px, 1fr));

    gap: 15px;
}

body.industrial-theme .donate-card {
    color: #191b1c;
    background:
        linear-gradient(
            180deg,
            #e9e7e0,
            #d9d7d0
        );

    border: 1px solid #8f8e88;
    border-top: 4px solid #2a2d30;

    box-shadow:
        5px 5px 0 rgba(0, 0, 0, 0.15);

    overflow: hidden;

    transition:
        transform 0.14s ease,
        border-color 0.14s ease,
        box-shadow 0.14s ease;
}

body.industrial-theme .donate-card:hover {
    transform: translate(-2px, -2px);

    border-top-color: var(--accent);

    box-shadow:
        8px 8px 0 rgba(0, 0, 0, 0.19);
}

body.industrial-theme .donate-card img,
body.industrial-theme .donate-preview {
    filter:
        saturate(0.84)
        contrast(1.05);

    border-bottom: 2px solid #24272a;
}

body.industrial-theme .donate-card-title {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 900;
}

body.industrial-theme .donate-status {
    color: #fff;
    background: #292c2f;

    border-left: 4px solid var(--accent);

    font-family: "Roboto Condensed", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}

body.industrial-theme .donate-progress-bar {
    height: 10px;

    background: #b9b7b0;

    border: 1px solid #8e8d87;
}

body.industrial-theme .donate-progress-bar > div {
    background:
        repeating-linear-gradient(
            135deg,
            #d92f25 0 8px,
            #a81710 8px 15px
        );
}

body.industrial-theme .donate-participate-btn {
    color: #fff;
    background:
        linear-gradient(
            180deg,
            #dc342a,
            #b31811
        );

    border: 1px solid #ed4c42;
    border-left: 5px solid #79100b;

    font-family: "Roboto Condensed", sans-serif;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    box-shadow:
        3px 3px 0 rgba(0, 0, 0, 0.25);
}

body.industrial-theme .donate-participate-btn:hover {
    transform: translate(-1px, -1px);

    box-shadow:
        5px 5px 0 rgba(0, 0, 0, 0.22);
}

body.industrial-theme .donate-card.is-closed,
body.industrial-theme .donate-card.is-completed {
    filter: grayscale(1);

    opacity: 0.76;
}

body.industrial-theme .donate-close-reason {
    padding: 8px 10px;

    color: #3b2a28;
    background: #d8c5c1;

    border: 1px solid #b9958e;
    border-left: 4px solid var(--accent);
}

body.industrial-theme .donates-grid,
body.industrial-theme .donate-grid {
    align-items: stretch !important;
}

body.industrial-theme .donate-card {
    display: flex;
    flex-direction: column;

    height: 100%;
    min-height: 0;
}

body.industrial-theme .donate-card-body,
body.industrial-theme .donate-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;

    min-height: 0;
}

body.industrial-theme .donate-card-title {
    height: 2.55em;
    min-height: 2.55em;
    max-height: 2.55em;

    display: -webkit-box;
    overflow: hidden;

    line-height: 1.27;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.industrial-theme .donate-card-description,
body.industrial-theme .donate-short-description {
    height: 3em;
    min-height: 3em;
    max-height: 3em;

    display: -webkit-box;
    overflow: hidden;

    line-height: 1.5;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.industrial-theme .donate-tags {
    width: 100%;
    height: 26px;
    min-height: 26px;
    max-height: 26px;

    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;

    overflow: hidden;
}

body.industrial-theme .donate-tags .tag {
    flex: 0 0 auto;

    max-width: 130px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.industrial-theme .donate-actions {
    margin-top: auto;
    padding-top: 10px;
}

body.industrial-theme #donatesPage .donates-header,
body.industrial-theme #donatesPage .donate-page-header,
body.industrial-theme #donatesPage .donates-page-header,
body.industrial-theme #donatesPage .donates-hero,
body.industrial-theme #donatesPage .donates-page-head {
    color: var(--i-text) !important;
    background: var(--i-surface) !important;

    border: 1px solid var(--i-border) !important;
    border-left: 5px solid var(--accent) !important;

    padding: 14px 16px;
}

body.industrial-theme #donatesPage .donates-header h1,
body.industrial-theme #donatesPage .donates-header h2,
body.industrial-theme #donatesPage .donate-page-header h1,
body.industrial-theme #donatesPage .donate-page-header h2,
body.industrial-theme #donatesPage .donates-page-header h1,
body.industrial-theme #donatesPage .donates-page-header h2,
body.industrial-theme #donatesPage .donates-title,
body.industrial-theme #donatesPage .donate-title,
body.industrial-theme #donatesPage .page-title {
    color: var(--i-text) !important;

    margin: 0;

    font-family: "Russo One", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}

body.industrial-theme #donatesPage .donates-header p,
body.industrial-theme #donatesPage .donate-page-header p,
body.industrial-theme #donatesPage .donates-page-header p,
body.industrial-theme #donatesPage .donates-subtitle,
body.industrial-theme #donatesPage .page-subtitle {
    color: var(--i-text-secondary) !important;

    margin-top: 5px;
}

body.industrial-theme #addDonateBtn,
body.industrial-theme #openAddDonateBtn,
body.industrial-theme #openAddDonateModal,
body.industrial-theme .add-donate-btn,
body.industrial-theme .donate-add-btn {
    min-height: 40px;
    padding: 8px 18px !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    color: #ffffff !important;
    background:
        linear-gradient(
            180deg,
            #e33a30 0%,
            #b71912 100%
        ) !important;

    border: 1px solid #f04e44 !important;
    border-left: 5px solid #76100b !important;
    border-radius: 0 !important;

    font-family: "Roboto Condensed", sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.055em;
    text-decoration: none !important;
    text-transform: uppercase;

    box-shadow:
        4px 4px 0 rgba(0, 0, 0, 0.28) !important;

    cursor: pointer;

    transition:
        transform 0.14s ease,
        background 0.14s ease,
        box-shadow 0.14s ease !important;
}

body.industrial-theme #addDonateBtn:hover,
body.industrial-theme #openAddDonateBtn:hover,
body.industrial-theme #openAddDonateModal:hover,
body.industrial-theme .add-donate-btn:hover,
body.industrial-theme .donate-add-btn:hover {
    color: #ffffff !important;
    background:
        linear-gradient(
            180deg,
            #f04a40 0%,
            #c61c14 100%
        ) !important;

    transform: translate(-1px, -1px) !important;

    box-shadow:
        6px 6px 0 rgba(0, 0, 0, 0.24) !important;
}

body.industrial-theme .donate-card {
    color: var(--i-text) !important;
    background: var(--i-card-bg) !important;

    border-color: var(--i-border) !important;
}

body.industrial-theme .donate-card-title {
    color: var(--i-text) !important;
}

body.industrial-theme .donate-card-description,
body.industrial-theme .donate-short-description,
body.industrial-theme .donate-author,
body.industrial-theme .donate-created-at {
    color: var(--i-text-secondary) !important;
}

body.industrial-theme .donate-progress-top,
body.industrial-theme .donate-progress-percent {
    color: var(--i-text-secondary) !important;
}

body.industrial-theme .donate-progress-bar {
    background: var(--i-surface-secondary) !important;

    border-color: var(--i-border) !important;
}

.donates-header.donates-header-actions-only,
body.industrial-theme #donatesPage .donates-header.donates-header-actions-only {
    min-height: 0;
    margin-bottom: 14px;
    padding: 0 !important;
    justify-content: flex-end;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 700px) {
    .donates-header.donates-header-actions-only {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .donates-header-actions-only #openAddDonateBtn {
        width: 100%;
    }
}

#donatesPage .donates-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr)) !important;
    gap:18px !important;
    align-items:stretch !important;
}
#donatesPage .donate-card,
#donatesPage .donate-card-restored{
    position:relative !important;
    display:block !important;
    overflow:hidden !important;
    min-height:0 !important;
    background:var(--bg-card, var(--pub-surface, #17191b)) !important;
    border:1px solid var(--border, rgba(255,255,255,.14)) !important;
    border-radius:var(--radius-lg, 0) !important;
    box-shadow:none !important;
    transform:none !important;
    isolation:auto !important;
}
#donatesPage .donate-card:hover,
#donatesPage .donate-card-restored:hover{
    transform:translateY(-4px) !important;
    border-color:var(--accent, var(--pub-accent, #d4251d)) !important;
    box-shadow:var(--shadow-lg, 0 18px 42px rgba(0,0,0,.24)) !important;
}
#donatesPage .donate-card::before,
#donatesPage .donate-card::after,
#donatesPage .donate-progress-fill,
#donatesPage .donate-progress-panel{display:none !important; content:none !important;}
#donatesPage .donate-preview-wrap{
    position:relative !important;
    display:block !important;
    width:100% !important;
    aspect-ratio:16/9 !important;
    height:auto !important;
    min-height:0 !important;
    overflow:hidden !important;
    background:#000 !important;
}
#donatesPage .donate-preview{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    object-fit:cover !important;
    border:0 !important;
    border-radius:0 !important;
    opacity:1 !important;
    filter:none !important;
}
#donatesPage .donate-body{
    position:relative !important;
    z-index:1 !important;
    display:block !important;
    padding:15px !important;
    background:transparent !important;
}
#donatesPage .donate-pin-badge{
    position:absolute !important;
    top:10px !important;
    left:10px !important;
    right:auto !important;
    bottom:auto !important;
    z-index:5 !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    width:auto !important;
    max-width:calc(100% - 20px) !important;
    padding:5px 9px !important;
    border:0 !important;
    border-radius:999px !important;
    background:rgba(0,0,0,.65) !important;
    color:#facc15 !important;
    font-size:.75rem !important;
    font-weight:900 !important;
    line-height:1 !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    transform:none !important;
}
#donatesPage .donate-status{
    position:absolute !important;
    right:10px !important;
    bottom:10px !important;
    left:auto !important;
    top:auto !important;
    z-index:5 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-width:0 !important;
    padding:5px 9px !important;
    border:0 !important;
    border-radius:999px !important;
    background:#22c55e !important;
    color:#fff !important;
    font-size:.75rem !important;
    font-weight:900 !important;
    line-height:1 !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    box-shadow:none !important;
}
#donatesPage .donate-status.status-closed{background:#64748b !important;color:#fff !important;}
#donatesPage .donate-status.status-completed{background:#7c3aed !important;color:#fff !important;}
#donatesPage .donate-muted{filter:grayscale(1) !important;opacity:.72 !important;}
#donatesPage .donate-muted:hover{opacity:.82 !important;}
#donatesPage .donate-author{display:flex !important;align-items:center !important;gap:8px !important;margin-bottom:10px !important;color:var(--text-secondary, var(--pub-text-2,#bfc4c9)) !important;font-size:.88rem !important;font-weight:800 !important;}
#donatesPage .donate-body h3{margin:0 0 8px !important;color:var(--text-primary,var(--pub-text,#f2f3f4)) !important;font-size:1.08rem !important;font-weight:900 !important;line-height:1.2 !important;}
#donatesPage .donate-body p{margin:0 0 14px !important;color:var(--text-secondary,var(--pub-text-2,#bfc4c9)) !important;line-height:1.45 !important;}
#donatesPage .donate-actions{display:flex !important;flex-wrap:wrap !important;gap:8px !important;align-items:center !important;margin-top:14px !important;}
#donatesPage .donate-progress-restored,
#donatesPage .donate-progress{position:relative !important;display:block !important;margin-top:14px !important;margin-bottom:0 !important;padding:0 !important;background:transparent !important;border:0 !important;box-shadow:none !important;}
#donatesPage .donate-progress-top{display:flex !important;justify-content:space-between !important;gap:10px !important;margin-bottom:7px !important;color:var(--text-secondary,var(--pub-text-2,#bfc4c9)) !important;font-size:.82rem !important;font-weight:800 !important;}
#donatesPage .donate-progress-bar{display:block !important;width:100% !important;height:10px !important;overflow:hidden !important;border-radius:999px !important;background:rgba(148,163,184,.18) !important;}
#donatesPage .donate-progress-bar div{display:block !important;height:100% !important;border-radius:999px !important;background:linear-gradient(135deg,#22c55e,#84cc16) !important;box-shadow:0 0 14px rgba(34,197,94,.35) !important;}
#donatesPage .donate-progress-percent{margin-top:6px !important;color:var(--text-muted,var(--pub-text-3,#8d949b)) !important;font-size:.78rem !important;}
body.light #donatesPage .donate-card,
body.light #donatesPage .donate-card-restored{background:#fff !important;border-color:#d7d7d7 !important;color:#17191b !important;}
body.light #donatesPage .donate-body h3{color:#17191b !important;}
body.light #donatesPage .donate-body p,
body.light #donatesPage .donate-author{color:#4f5459 !important;}

.pinned-donate-spotlight{
    position:fixed !important;
    right:18px !important;
    bottom:88px !important;
    z-index:1300 !important;
    width:min(340px, calc(100vw - 28px)) !important;
    transform:translateY(0) !important;
}
.pinned-donate-spotlight.hidden{display:none !important;}
.pinned-donate-card,
.pinned-donate-card-restored{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    gap:8px 10px !important;
    width:100% !important;
    padding:10px !important;
    border:2px solid var(--pub-line, rgba(255,255,255,.18)) !important;
    border-radius:0 !important;
    background:var(--pub-surface, #17191b) !important;
    color:var(--pub-text, #f2f3f4) !important;
    box-shadow:6px 6px 0 rgba(0,0,0,.30) !important;
    text-align:left !important;
    cursor:pointer !important;
    overflow:hidden !important;
}
.pinned-donate-card:hover,
.pinned-donate-card-restored:hover{transform:translate(-2px,-2px) !important;border-color:var(--pub-accent,#d4251d) !important;box-shadow:8px 8px 0 rgba(0,0,0,.34) !important;}
.pinned-donate-card:active,
.pinned-donate-card-restored:active{transform:translate(1px,1px) !important;box-shadow:3px 3px 0 rgba(0,0,0,.34) !important;}
.pinned-donate-ribbon{
    grid-column:1 / -1 !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    width:max-content !important;
    max-width:100% !important;
    padding:4px 7px !important;
    border:0 !important;
    border-radius:0 !important;
    background:var(--pub-accent,#d4251d) !important;
    color:#fff !important;
    font-size:.68rem !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    letter-spacing:.06em !important;
}
.pinned-donate-main{display:flex !important;gap:10px !important;min-width:0 !important;align-items:center !important;}
.pinned-donate-preview{display:grid !important;place-items:center !important;width:54px !important;height:54px !important;flex:0 0 54px !important;border:1px solid var(--pub-line,rgba(255,255,255,.18)) !important;background:var(--pub-surface-2,rgba(255,255,255,.06)) !important;overflow:hidden !important;}
.pinned-donate-preview img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;}
.pinned-donate-copy{min-width:0 !important;display:grid !important;gap:3px !important;}
.pinned-donate-copy strong,
.pinned-donate-copy small{overflow:hidden !important;text-overflow:ellipsis !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;white-space:normal !important;}
.pinned-donate-copy strong{-webkit-line-clamp:1 !important;font-weight:900 !important;color:var(--pub-text,#f2f3f4) !important;}
.pinned-donate-copy small{-webkit-line-clamp:2 !important;color:var(--pub-text-2,#bfc4c9) !important;line-height:1.25 !important;}
.pinned-donate-action{align-self:center !important;display:grid !important;place-items:center !important;width:34px !important;height:34px !important;padding:0 !important;border:1px solid var(--pub-line,rgba(255,255,255,.18)) !important;background:transparent !important;color:var(--pub-accent,#d4251d) !important;font-size:0 !important;overflow:hidden !important;}
.pinned-donate-action::before{content:'›' !important;font-size:1.35rem !important;font-weight:900 !important;line-height:1 !important;}
body.light .pinned-donate-card,
body.light .pinned-donate-card-restored{background:#fff !important;color:#17191b !important;border-color:#d7d7d7 !important;box-shadow:6px 6px 0 rgba(0,0,0,.12) !important;}
body.light .pinned-donate-preview,
body.light .pinned-donate-action{border-color:#d7d7d7 !important;background:#f4f4f2 !important;}
body.light .pinned-donate-copy strong{color:#17191b !important;}
body.light .pinned-donate-copy small{color:#555 !important;}

:root{
    --radius:0 !important;
    --radius-xs:0 !important;
    --radius-sm:0 !important;
    --radius-md:0 !important;
    --radius-lg:0 !important;
    --radius-xl:0 !important;
    --radius-2xl:0 !important;
    --pub-radius:0 !important;
    --pub-radius-sm:0 !important;
    --pub-radius-md:0 !important;
    --pub-radius-lg:0 !important;
    --pub-radius-xl:0 !important;
}

:is(
    .controls,.page-control-panel,.controls-row,.filters,.filter-action-group,
    .filter-btn,.sort-pill,.add-video-btn,.btn,button,a.button,
    input,textarea,select,.form-control,.form-group,.input-wrapper,
    .modal,.modal-content,.modal-body,.modal-header,.dialog,.dropdown,.dropdown-menu,
    .video-card,.video-item,.feed-post,.feed-card,.post-card,.giveaway-card,.winner-card,
    .donate-card,.donate-card-restored,.donate-widget,.donates-empty,.giveaways-empty,
    .site-search-panel,.site-search-result,.search-results,.search-result-item,
    .comment,.comment-card,.comment-form,.reply-form,
    .tag,.chip,.badge,.pill,.stat,.metric,.panel,.card,.toolbar,.toast,.notification
){
    border-radius:0 !important;
}

:is(.donate-pin-badge,.donate-status,.pinned-donate-ribbon,.feed-drafts-count,.status-badge,.rating-badge,.user-badge,.control-note-badge){
    border-radius:0 !important;
}

:is(.avatar,.user-avatar,.profile-avatar,.comment-avatar,.author-avatar,.streamer-avatar,.donate-author img,.profile-picture){
    border-radius:50% !important;
}

:is(.filter-btn,.add-video-btn,.btn,button[type="button"],button[type="submit"],.donate-participate-btn){
    min-height:42px;
    border-radius:0 !important;
    text-transform:uppercase;
    letter-spacing:.04em;
}

:is(.controls,.page-control-panel){
    border-radius:0 !important;
}
:is(.controls-row){
    align-items:center !important;
}

#donatesPage .donates-grid{
    align-items:stretch !important;
}
#donatesPage .donate-card,
#donatesPage .donate-card-restored{
    border-radius:0 !important;
    overflow:hidden !important;
}
#donatesPage .donate-preview-wrap,
#donatesPage .donate-preview{
    border-radius:0 !important;
}
#donatesPage .donate-pin-badge,
#donatesPage .donate-status{
    border-radius:0 !important;
}
#donatesPage .donate-progress,
#donatesPage .donate-progress-restored{
    display:block !important;
    margin:16px 0 0 !important;
    padding:10px !important;
    border:1px solid var(--border, rgba(255,255,255,.16)) !important;
    background:rgba(255,255,255,.035) !important;
    box-shadow:inset 4px 0 0 rgba(212,37,29,.55) !important;
    border-radius:0 !important;
}
#donatesPage .donate-progress-top{
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:12px !important;
    margin:0 0 8px !important;
    color:var(--text-secondary,var(--pub-text-2,#bfc4c9)) !important;
    font-size:.78rem !important;
    font-weight:900 !important;
    line-height:1.2 !important;
    text-transform:uppercase !important;
    letter-spacing:.035em !important;
}
#donatesPage .donate-progress-bar{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:18px !important;
    padding:2px !important;
    overflow:hidden !important;
    border:1px solid var(--border, rgba(255,255,255,.18)) !important;
    border-radius:0 !important;
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,.055) 0 7px, transparent 7px 14px),
      rgba(0,0,0,.24) !important;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.28) !important;
}
#donatesPage .donate-progress-bar > div{
    display:block !important;
    height:100% !important;
    min-width:0 !important;
    border-radius:0 !important;
    background:
      linear-gradient(90deg, rgba(255,255,255,.22), transparent 42%),
      linear-gradient(90deg, #8f1712 0%, #d4251d 58%, #ff4b42 100%) !important;
    box-shadow:0 0 14px rgba(212,37,29,.28) !important;
    transition:width .45s ease !important;
}
#donatesPage .donate-progress-percent{
    margin:7px 0 0 !important;
    color:var(--text-muted,var(--pub-text-3,#8d949b)) !important;
    font-size:.76rem !important;
    font-weight:800 !important;
    text-align:right !important;
    text-transform:uppercase !important;
    letter-spacing:.035em !important;
}
body.light #donatesPage .donate-progress,
body.light #donatesPage .donate-progress-restored{
    background:#f4f4f2 !important;
    border-color:#d7d7d7 !important;
    box-shadow:inset 4px 0 0 rgba(212,37,29,.6) !important;
}
body.light #donatesPage .donate-progress-bar{
    background:
      repeating-linear-gradient(45deg, rgba(0,0,0,.045) 0 7px, transparent 7px 14px),
      #e6e6e2 !important;
    border-color:#cdcdc8 !important;
}
body.light #donatesPage .donate-progress-top{color:#3f4448 !important;}
body.light #donatesPage .donate-progress-percent{color:#64686c !important;}

.pinned-donate-spotlight,
.pinned-donate-card,
.pinned-donate-card-restored,
.pinned-donate-preview,
.pinned-donate-action,
.pinned-donate-ribbon{
    border-radius:0 !important;
}

body.light :is(.controls,.page-control-panel,.site-search-panel,.dropdown-menu,.modal-content,.feed-post,.giveaway-card,.donate-card,.donate-card-restored,.video-card){
    color:#17191b;
}

@media (max-width: 720px){
    #donatesPage .donate-progress-top{
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:4px !important;
    }
    #donatesPage .donate-progress-percent{text-align:left !important;}
}

.header {
    overflow: visible !important;
}
.header-inner {
    display: grid !important;
    grid-template-columns: minmax(240px, auto) minmax(0, 1fr) auto !important;
    grid-template-areas:
        "brand . user"
        "search search search"
        "nav nav nav" !important;
    grid-template-rows: auto auto auto !important;
    align-items: center !important;
    gap: 10px 16px !important;
    min-height: 0 !important;
    padding-block: 12px !important;
    overflow: visible !important;
}
.header-brand { grid-area: brand !important; min-width: 0 !important; }
.header-right { grid-area: user !important; justify-self: end !important; min-width: 0 !important; max-width: 100% !important; }
.header-center {
    grid-area: search !important;
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    justify-self: center !important;
    z-index: 2000 !important;
    position: relative !important;
}
.header-nav {
    grid-area: nav !important;
    justify-self: center !important;
    align-self: center !important;
    width: auto !important;
    max-width: 100% !important;
    z-index: 100 !important;
}
.search-section {
    width: 100% !important;
    position: relative !important;
    overflow: visible !important;
}
#userArea, .header-user-panel {
    max-width: 280px !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}
.header-profile, .user-profile-button, .user-menu-button {
    max-width: 280px !important;
    min-width: 0 !important;
}
.header-profile-name, .user-name, .user-display-name {
    max-width: 160px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
@media (max-width: 860px) {
    .header-inner {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "brand"
            "user"
            "search"
            "nav" !important;
    }
    .header-brand, .header-right, .header-center, .header-nav {
        justify-self: stretch !important;
        width: 100% !important;
    }
    .header-right { justify-content: center !important; }
    #userArea, .header-user-panel { justify-content: center !important; max-width: 100% !important; }
}

#globalSearchResults.global-search-results {
    display: block;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-height: min(70vh, 620px) !important;
    overflow: auto !important;
    z-index: 999999 !important;
    border-radius: 0 !important;
    background: var(--pub-surface, #17191b) !important;
    border: 2px solid var(--pub-line, rgba(255,255,255,.18)) !important;
    box-shadow: 8px 8px 0 rgba(0,0,0,.32) !important;
}
#globalSearchResults.global-search-results.hidden { display: none !important; }
.global-search-result, .global-search-head, .global-search-loading, .global-search-empty { border-radius: 0 !important; }
body.light #globalSearchResults.global-search-results {
    background: #f4f1e8 !important;
    color: #17191b !important;
    border-color: #85827b !important;
    box-shadow: 8px 8px 0 rgba(0,0,0,.14) !important;
}

#donatesPage .donates-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
}
#donatesPage .donate-card,
#donatesPage .donate-card-restored {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    min-height: 0 !important;
    isolation: isolate !important;
    border-radius: 0 !important;
    background: var(--bg-card, var(--pub-surface, #17191b)) !important;
    border: 1px solid var(--border, rgba(255,255,255,.14)) !important;
    box-shadow: none !important;
    transform: none !important;
}
#donatesPage .donate-card:hover,
#donatesPage .donate-card-restored:hover {
    transform: translateY(-4px) !important;
    border-color: var(--accent, var(--pub-accent, #d4251d)) !important;
    box-shadow: var(--shadow-lg, 0 18px 42px rgba(0,0,0,.24)) !important;
}
#donatesPage .donate-card::before,
#donatesPage .donate-card::after,
#donatesPage .donate-progress-panel,
#donatesPage .donate-progress-bar {
    display: none !important;
    content: none !important;
}
#donatesPage .donate-widget-fill {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: var(--donate-fill, 0%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
        linear-gradient(180deg, rgba(255, 90, 80, .44), rgba(212, 37, 29, .62) 45%, rgba(124, 19, 15, .76)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 8px, rgba(255,255,255,0) 8px 16px) !important;
    border-top: 1px solid rgba(255,255,255,.25) !important;
    box-shadow: 0 -12px 26px rgba(212, 37, 29, .18) !important;
    transition: height .55s cubic-bezier(.2,.8,.2,1) !important;
}
#donatesPage .donate-preview-wrap {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    overflow: hidden !important;
    background: #000 !important;
}
#donatesPage .donate-preview {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    filter: none !important;
}
#donatesPage .donate-body {
    position: relative !important;
    z-index: 4 !important;
    display: block !important;
    padding: 15px !important;
    background: transparent !important;
}
#donatesPage .donate-pin-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 10 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    max-width: calc(100% - 20px) !important;
    padding: 5px 9px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(0,0,0,.72) !important;
    color: #facc15 !important;
    font-size: .75rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    transform: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
#donatesPage .donate-status {
    position: absolute !important;
    right: 10px !important;
    bottom: 10px !important;
    left: auto !important;
    top: auto !important;
    z-index: 10 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 20px) !important;
    padding: 5px 9px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #22c55e !important;
    color: #fff !important;
    font-size: .75rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    transform: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}
#donatesPage .donate-status.status-closed { background: #64748b !important; color: #fff !important; }
#donatesPage .donate-status.status-completed { background: #7c3aed !important; color: #fff !important; }
#donatesPage .donate-progress-restored,
#donatesPage .donate-progress-fill-info,
#donatesPage .donate-progress {
    position: relative !important;
    z-index: 5 !important;
    display: block !important;
    margin: 12px 0 0 !important;
    padding: 9px 10px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 0 !important;
    background: rgba(0,0,0,.22) !important;
    box-shadow: none !important;
}
#donatesPage .donate-progress-top {
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
    text-shadow: 1px 1px 0 rgba(0,0,0,.35) !important;
}
#donatesPage .donate-progress-percent {
    display: block !important;
    margin-top: 5px !important;
    color: rgba(255,255,255,.86) !important;
    font-size: .76rem !important;
    font-weight: 800 !important;
    text-shadow: 1px 1px 0 rgba(0,0,0,.35) !important;
}
#donatesPage .donate-progress-fill-info strong { font-size: inherit !important; line-height: inherit !important; color: inherit !important; text-shadow: none !important; }
#donatesPage .donate-muted { filter: grayscale(1) !important; opacity: .72 !important; }
#donatesPage .donate-muted:hover { opacity: .82 !important; }
body.light #donatesPage .donate-card,
body.light #donatesPage .donate-card-restored { background: #fff !important; border-color: #d7d7d7 !important; color: #17191b !important; }
body.light #donatesPage .donate-widget-fill { background: linear-gradient(180deg, rgba(255, 90, 80, .34), rgba(212,37,29,.52) 50%, rgba(124,19,15,.66)) !important; }
body.light #donatesPage .donate-body h3 { color: #17191b !important; }
body.light #donatesPage .donate-body p,
body.light #donatesPage .donate-author { color: #4f5459 !important; }

.pinned-donate-spotlight { right: 18px !important; bottom: 88px !important; z-index: 1300 !important; width: min(340px, calc(100vw - 28px)) !important; }
.pinned-donate-card,
.pinned-donate-card-restored {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px 10px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}
.pinned-donate-main { min-width: 0 !important; }
.pinned-donate-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 78px !important;
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-align: center !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}
.pinned-donate-action::before { content: none !important; display: none !important; }
@media (max-width: 420px) {
    .pinned-donate-action { min-width: 0 !important; }
}

/* ===== source: comments-modern.css ===== */
.unified-comments-shell {
    --comment-surface: color-mix(in srgb, var(--bg-secondary) 90%, #20262b 10%);
    --comment-border: color-mix(in srgb, var(--border-soft) 78%, #77828c 22%);
    --comment-soft: color-mix(in srgb, var(--bg-primary) 86%, #2c343a 14%);
}

.unified-comments-head {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--comment-border);
}

.unified-comments-kicker {
    margin-bottom: 5px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.unified-comments-list,
.comments-list,
.feed-post-comment-list {
    max-height: min(54vh, 620px);
    padding: 2px 4px 4px;
    overflow: auto;
    scrollbar-width: thin;
}

.comment-thread,
.feed-comment-thread {
    position: relative;
}

.comment-item-modern,
.feed-comment-item.comment-item-modern {
    margin: 0 0 10px;
    padding: 13px 14px;
    color: var(--text-primary);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 48%),
        var(--comment-surface);
    border: 1px solid var(--comment-border);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

.comment-item-modern:hover,
.feed-comment-item.comment-item-modern:hover {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--comment-border));
    transform: translateY(-1px);
}

.comment-item-modern .comment-head,
.feed-comment-item.comment-item-modern .feed-comment-head {
    margin-bottom: 9px;
}

.comment-item-modern .comment-user,
.feed-comment-item.comment-item-modern .feed-comment-author {
    min-width: 0;
}

.comment-item-modern .comment-user img,
.feed-comment-item.comment-item-modern .feed-comment-author img {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--industrial-steel) 75%, var(--accent));
    border-radius: 50%;
}

.comment-item-modern .comment-nick,
.feed-comment-item.comment-item-modern .feed-comment-author strong {
    color: var(--text-primary);
    font-weight: 850;
}

.comment-item-modern .comment-meta,
.feed-comment-item.comment-item-modern time {
    color: var(--text-muted);
    font-size: 0.73rem;
}

.comment-item-modern .comment-text,
.feed-comment-item.comment-item-modern .feed-comment-text {
    margin: 0;
    color: color-mix(in srgb, var(--text-primary) 92%, var(--text-muted));
    font-size: 0.94rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.comment-actions,
.feed-comment-actions {
    margin-top: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.comment-action-btn,
.feed-comment-like-static {
    min-height: 32px;
    padding: 6px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
}

button.comment-action-btn {
    cursor: pointer;
}

button.comment-action-btn:hover,
button.comment-action-btn.active {
    color: #fff;
    background: color-mix(in srgb, var(--accent) 22%, var(--comment-soft));
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

button.comment-action-btn.danger-action:hover {
    color: #ffd9d6;
    background: rgba(201, 42, 32, 0.18);
}

.comment-replies,
.feed-comment-replies {
    margin-left: 22px;
    padding-left: 14px;
    border-left: 2px solid color-mix(in srgb, var(--accent) 28%, var(--comment-border));
}

.comment-reply-slot,
.feed-comment-reply-slot {
    margin: 0 0 8px 22px;
}

.comment-composer-card {
    margin-top: 14px;
    padding: 12px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent),
        var(--comment-soft);
    border: 1px solid var(--comment-border);
    border-radius: 9px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.13);
}

.comment-composer-card.is-compact {
    margin-top: 8px;
    padding: 10px;
}

.comment-composer-main,
.mention-input-host {
    position: relative;
}

.comment-composer-textarea,
.comment-composer-card textarea,
.feed-main-comment-form textarea,
.feed-inline-reply-form textarea {
    width: 100%;
    min-height: 86px;
    padding: 12px 13px;
    resize: vertical;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--comment-border);
    border-radius: 8px;
    line-height: 1.45;
    outline: none;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.comment-composer-card.is-compact textarea,
.feed-inline-reply-form textarea {
    min-height: 70px;
}

.comment-composer-textarea:focus,
.comment-composer-card textarea:focus,
.feed-main-comment-form textarea:focus,
.feed-inline-reply-form textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(201, 42, 32, 0.12);
}

.comment-composer-footer {
    margin-top: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.comment-character-counter {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.comment-character-counter.is-near-limit {
    color: #f0b24e;
}

.comment-submit-btn {
    min-width: 128px;
}

.comment-login-note,
.feed-comment-login-note {
    margin: 12px 0;
    padding: 12px 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-muted);
    background: var(--comment-soft);
    border: 1px solid var(--comment-border);
    border-radius: 8px;
}

.comment-composer-inline,
.comment-reply-composer,
.giveaway-inline-reply {
    margin: 8px 0 12px 22px;
    padding: 10px;
    background: color-mix(in srgb, var(--comment-soft) 92%, var(--accent) 8%);
    border: 1px solid var(--comment-border);
    border-radius: 8px;
}

.comment-reply-label {
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.comment-reply-label strong {
    color: var(--text-primary);
}

.comment-inline-cancel {
    margin-top: 7px;
    padding: 4px 0;
    color: var(--text-muted);
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    text-decoration: underline;
}

.unified-comments-state {
    min-height: 170px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--text-muted);
    background: var(--comment-soft);
    border: 1px dashed var(--comment-border);
    border-radius: 8px;
    text-align: center;
}

.unified-comments-state i {
    color: var(--accent);
    font-size: 1.7rem;
}

.unified-comments-state p {
    margin: 0;
}

.unified-comments-state.is-error {
    color: #ffd8d5;
    border-color: rgba(201, 42, 32, 0.5);
}

.comment-composer-toolbar {
    position: relative;
    margin-top: 8px;
    display: flex;
    align-items: center;
}

.emoji-picker-button {
    min-height: 34px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--comment-border);
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

.emoji-picker-button i {
    color: #efb646;
    font-size: 1rem;
}

.emoji-picker-button:hover,
.emoji-picker-button.active {
    color: #fff;
    background: color-mix(in srgb, var(--accent) 20%, var(--comment-soft));
    border-color: color-mix(in srgb, var(--accent) 50%, var(--comment-border));
}

.emoji-picker-panel {
    position: absolute;
    z-index: 5000;
    left: 0;
    bottom: calc(100% + 8px);
    width: min(320px, calc(100vw - 54px));
    padding: 10px;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-secondary) 96%, #252b30 4%);
    border: 1px solid var(--comment-border);
    border-radius: 10px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.35);
}

.emoji-picker-head {
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.emoji-picker-head strong {
    font-size: 0.86rem;
}

.emoji-picker-head small {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
}

.emoji-picker-item {
    width: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
    font-size: 1.18rem;
    transition:
        transform 0.14s ease,
        background 0.14s ease;
}

.emoji-picker-item:hover {
    background: var(--comment-soft);
    border-color: var(--comment-border);
    transform: scale(1.1);
}

body.light .comment-item-modern,
body.light .feed-comment-item.comment-item-modern,
body.light .comment-composer-card,
body.light .emoji-picker-panel,
body.light .unified-comments-state,
body.light .comment-login-note {
    box-shadow: 0 7px 20px rgba(20, 30, 40, 0.08);
}

@media (max-width: 680px) {
    .comment-replies,
    .feed-comment-replies,
    .comment-composer-inline,
    .comment-reply-composer,
    .giveaway-inline-reply,
    .comment-reply-slot,
    .feed-comment-reply-slot {
        margin-left: 10px;
        padding-left: 9px;
    }

    .comment-composer-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .comment-submit-btn {
        width: 100%;
    }

    .emoji-picker-button span {
        display: none;
    }

    .emoji-picker-button {
        width: 38px;
        padding: 6px;
        justify-content: center;
    }

    .emoji-picker-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* ===== source: giveaways.css ===== */
.giveaways-toolbar {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.giveaways-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.giveaway-filter {
    min-height: 38px;
    padding: 8px 14px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border: 1px solid var(--border-soft);
    border-radius: 5px;
    cursor: pointer;
    font: inherit;
    font-weight: 850;
    text-transform: uppercase;
    transition: 0.18s ease;
}

.giveaway-filter:hover,
.giveaway-filter.active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

.giveaways-grid,
.giveaways-loading-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.giveaway-card {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
        var(--bg-secondary);
    border: 1px solid var(--border-soft);
    border-radius: 7px;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.giveaway-card:hover {
    transform: translateY(-2px);
    border-color: var(--industrial-steel);
}

.giveaway-card.is-pinned {
    border-color: var(--accent);
    box-shadow:
        5px 5px 0 rgba(0, 0, 0, 0.22),
        inset 0 0 0 1px rgba(201, 42, 32, 0.28);
}

.giveaway-card.is-completed {
    opacity: 0.94;
}

.giveaway-preview {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #090b0c;
}

.giveaway-preview > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.giveaway-preview-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.76)),
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.025) 0 2px,
            transparent 2px 9px
        );
}

.giveaway-pin-badge,
.giveaway-status {
    position: absolute;
    z-index: 2;
    top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    color: #fff;
    background: rgba(14, 16, 18, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

.giveaway-pin-badge {
    left: 10px;
    background: rgba(201, 42, 32, 0.94);
}

.giveaway-status {
    right: 10px;
}

.giveaway-status.active .fa-circle {
    color: #4ed17d;
    font-size: 0.55rem;
}

.giveaway-status.completed {
    color: #ffd970;
}

.giveaway-card-body {
    padding: 16px;
}

.giveaway-author-row {
    margin-bottom: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.giveaway-author {
    min-width: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
}

.giveaway-author img,
.giveaway-winner img,
.giveaway-participant img {
    flex: 0 0 auto;
    object-fit: cover;
    border: 2px solid var(--industrial-steel);
    border-radius: 50%;
}

.giveaway-author img {
    width: 34px;
    height: 34px;
}

.giveaway-author > span {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.giveaway-author small,
.giveaway-winner small {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.giveaway-author strong {
    max-width: 180px;
    overflow: hidden;
    color: var(--text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.giveaway-card-counters {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.giveaway-card-counters span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.giveaway-title {
    margin: 0 0 9px;
    color: var(--text-primary);
    font-family: "Roboto Condensed", sans-serif;
    font-size: 1.25rem;
    line-height: 1.15;
}

.giveaway-description {
    min-height: 3.9em;
    margin: 0 0 14px;
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-muted);
    line-height: 1.45;
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.giveaway-timer {
    margin-bottom: 11px;
    padding: 10px 11px;
    color: var(--text-primary);
    background: var(--bg-primary);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    font-size: 0.88rem;
}

.giveaway-timer i {
    margin-right: 6px;
    color: var(--accent);
}

.giveaway-antifraud-note {
    margin-bottom: 11px;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.giveaway-antifraud-note i {
    margin-top: 2px;
    color: #e7b64a;
}

.giveaway-winner {
    margin: 13px 0;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff7d3;
    background:
        linear-gradient(135deg, rgba(164, 113, 14, 0.35), transparent),
        #17140d;
    border: 1px solid rgba(255, 205, 82, 0.45);
    border-radius: 6px;
}

.giveaway-winner > img {
    width: 46px;
    height: 46px;
    border-color: #e7b64a;
}

.giveaway-winner > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.giveaway-winner small {
    color: #e7b64a;
    font-weight: 900;
    text-transform: uppercase;
}

.giveaway-winner-name {
    width: fit-content;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    color: #fff7d3;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.giveaway-winner span {
    color: rgba(255, 247, 211, 0.7);
    font-size: 0.8rem;
}

.giveaway-winner-empty {
    color: var(--text-muted);
    background: var(--bg-primary);
    border-color: var(--border-soft);
}

.giveaway-actions {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 7px;
}

.giveaway-join-btn {
    min-width: 0;
    flex: 1 1 150px;
}

.giveaway-join-btn.joined {
    color: #d9ffe4;
    background: #23663c;
    border-color: #2d8a4e;
}

.giveaway-small-btn {
    flex: 0 0 auto;
    min-width: 42px;
    padding-inline: 11px;
}

.giveaway-small-btn span {
    margin-left: 5px;
}

.giveaways-empty-state {
    grid-column: 1 / -1;
    min-height: 280px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border: 1px dashed var(--border-soft);
    border-radius: 7px;
    text-align: center;
}

.giveaways-empty-state h2,
.giveaways-empty-state p {
    margin: 0;
}

.giveaways-empty-state > i {
    color: var(--accent);
    font-size: 2rem;
}

.giveaways-empty-logo {
    width: 74px;
    height: 74px;
    object-fit: cover;
    border: 3px solid var(--industrial-steel);
    border-radius: 50%;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.25);
}

.giveaways-error-state {
    color: #ffd5d2;
    border-color: rgba(201, 42, 32, 0.55);
}

.giveaway-card-skeleton {
    padding-bottom: 16px;
}

.giveaway-skeleton-preview,
.giveaway-skeleton-line {
    background:
        linear-gradient(
            90deg,
            var(--bg-primary),
            rgba(255, 255, 255, 0.06),
            var(--bg-primary)
        );
    background-size: 200% 100%;
    animation: giveawaySkeleton 1.4s linear infinite;
}

.giveaway-skeleton-preview {
    aspect-ratio: 16 / 9;
}

.giveaway-skeleton-line {
    height: 12px;
    margin: 13px 16px 0;
    border-radius: 2px;
}

.giveaway-skeleton-line.large {
    width: 72%;
    height: 18px;
}

.giveaway-skeleton-line.short {
    width: 42%;
}

.giveaway-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.giveaway-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: var(--text-primary);
    font-weight: 800;
}

.giveaway-form-grid label small {
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.35;
}

.giveaway-form-full {
    grid-column: 1 / -1;
}

.giveaway-description-input {
    min-height: 130px;
    resize: vertical;
}

.giveaway-check-row {
    padding: 13px;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 11px !important;
    background: var(--bg-primary);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
}

.giveaway-check-row input {
    margin-top: 4px;
    flex: 0 0 auto;
}

.giveaway-check-row span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.giveaway-security-box {
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-muted);
    background: rgba(231, 182, 74, 0.08);
    border: 1px solid rgba(231, 182, 74, 0.28);
    border-radius: 6px;
}

.giveaway-security-box i {
    margin-top: 3px;
    color: #e7b64a;
}

.giveaway-security-box p {
    margin: 0;
    line-height: 1.45;
}

.giveaway-participants-list {
    max-height: min(60vh, 620px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.giveaway-participant {
    width: 100%;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 34px 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
}

.giveaway-participant:hover {
    border-color: var(--accent);
}

.giveaway-participant-number {
    color: var(--text-muted);
    font-weight: 900;
    text-align: center;
}

.giveaway-participant img {
    width: 38px;
    height: 38px;
}

.giveaway-participant > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.giveaway-participant strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.giveaway-participant small {
    color: var(--text-muted);
}

@keyframes giveawaySkeleton {
    to { background-position: -200% 0; }
}

@media (max-width: 1100px) {
    .giveaways-grid,
    .giveaways-loading-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .giveaways-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .giveaways-filters {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .giveaway-filter {
        padding-inline: 8px;
        font-size: 0.78rem;
    }

    #openCreateGiveawayBtn {
        width: 100%;
    }

    .giveaways-grid,
    .giveaways-loading-grid {
        grid-template-columns: 1fr;
    }

    .giveaway-form-grid {
        grid-template-columns: 1fr;
    }

    .giveaway-form-full {
        grid-column: auto;
    }

    .giveaway-join-btn {
        width: 100%;
        flex-basis: 100%;
    }
}

@media (max-width: 520px) {
    .giveaway-card-body {
        padding: 13px;
    }

    .giveaway-small-btn span {
        display: none;
    }
}