*,
*::before,
*::after{
    box-sizing:border-box;
}

.community-page{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 12% 8%, rgba(14,169,100,.14), transparent 28%),
        radial-gradient(circle at 92% 2%, rgba(134,217,87,.16), transparent 25%),
        linear-gradient(135deg,#f5fbf8 0%,#fff 42%,#eefaf4 100%);
    padding:34px 0 60px;
}

.community-page::before{
    content:"";
    position:absolute;
    inset:110px auto auto -120px;
    width:280px;
    height:280px;
    border-radius:50%;
    background:rgba(14,169,100,.08);
    filter:blur(10px);
}

.community-shell{
    width:min(1180px,calc(100% - 32px));
    margin:0 auto;
    display:grid;
    gap:22px;
}

.community-hero,
.community-board,
.community-thread-head,
.community-reply-box,
.community-thread-post,
.community-topic-card,
.community-login-note,
.community-post-box{
    border:1px solid #d9efe4;
    border-radius:28px;
    background:rgba(255,255,255,.94);
    box-shadow:0 18px 44px rgba(15,23,42,.07);
}

.community-hero{
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
    gap:24px;
    align-items:center;
    padding:34px;
    isolation:isolate;
}

.community-hero::after{
    content:"";
    position:absolute;
    right:-70px;
    top:-80px;
    width:260px;
    height:260px;
    border-radius:50%;
    background:linear-gradient(135deg, rgba(14,169,100,.22), rgba(134,217,87,.12));
    z-index:-1;
}

.community-kicker{
    display:inline-flex;
    width:max-content;
    max-width:100%;
    padding:7px 12px;
    border-radius:999px;
    background:#e8f8ef;
    color:#00864d;
    font-size:12px;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.community-hero h1,
.community-thread-head h1{
    margin:14px 0 12px;
    color:#071627;
    font-size:clamp(34px,4vw,58px);
    line-height:1;
    letter-spacing:-.055em;
}

.community-hero p,
.community-thread-head p{
    margin:0;
    color:#42526a;
    font-size:18px;
    line-height:1.65;
}

.community-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
}

.community-hero-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:22px;
}

.community-hero-stats div{
    min-width:0;
    padding:14px;
    border:1px solid rgba(14,169,100,.18);
    border-radius:18px;
    background:rgba(255,255,255,.76);
}

.community-hero-stats strong,
.community-hero-stats span{
    display:block;
}

.community-hero-stats strong{
    color:#071627;
    font-size:18px;
    letter-spacing:-.025em;
}

.community-hero-stats span{
    margin-top:4px;
    color:#52606d;
    font-size:13px;
    font-weight:750;
}

.community-btn,
.community-sort a,
.community-back,
.community-profile-homepage{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto !important;
    min-height:42px;
    padding:10px 16px;
    border:1px solid #0ea964;
    border-radius:999px;
    background:#0ea964;
    color:#fff !important;
    font:inherit;
    font-size:14px;
    font-weight:850;
    line-height:1.15 !important;
    text-decoration:none;
    cursor:pointer;
}

.community-btn--light,
.community-sort a,
.community-back{
    background:#fff;
    color:#0b8f55 !important;
}

.community-btn:hover,
.community-btn:focus,
.community-sort a:hover,
.community-sort a:focus,
.community-sort a.is-active,
.community-back:hover,
.community-back:focus,
.community-profile-homepage:hover,
.community-profile-homepage:focus{
    background:#0b8f55;
    color:#fff !important;
}

.community-hero-card{
    display:grid;
    gap:16px;
    padding:24px;
    border:1px solid rgba(14,169,100,.2);
    border-radius:24px;
    background:rgba(244,251,247,.9);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

.community-hero-card .community-card-label{
    width:max-content;
    padding:7px 10px;
    border-radius:999px;
    background:#fff;
    color:#0b8f55;
    font-size:12px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:0;
    line-height:1.15;
}

.community-topic-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.community-topic-tags span{
    display:inline-flex;
    padding:9px 11px;
    border:1px solid #d9efe4;
    border-radius:999px;
    background:#fff;
    color:#071627;
    font-size:13px;
    font-weight:850;
}

.community-side-note{
    display:grid;
    gap:5px;
    padding:16px;
    border-radius:18px;
    background:#fff;
}

.community-hero-card strong{
    color:#071627;
    font-size:16px;
}

.community-hero-card span{
    margin-bottom:8px;
    color:#52606d;
    font-size:14px;
    line-height:1.45;
}

.community-intro-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.community-intro-grid article{
    min-width:0;
    padding:22px;
    border:1px solid #d9efe4;
    border-radius:24px;
    background:rgba(255,255,255,.92);
    box-shadow:0 14px 34px rgba(15,23,42,.055);
}

.community-intro-grid span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:14px;
    background:#e8f8ef;
    color:#0b8f55;
    font-weight:950;
}

.community-intro-grid strong{
    display:block;
    margin-top:14px;
    color:#071627;
    font-size:19px;
    letter-spacing:-.025em;
}

.community-intro-grid p{
    margin:8px 0 0;
    color:#52606d;
    font-size:14px;
    line-height:1.55;
}

.community-board{
    padding:26px;
    display:grid;
    gap:18px;
}

.community-board-top{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
}

.community-board-top h2{
    margin:10px 0 0;
    color:#071627;
    font-size:clamp(26px,3vw,38px);
    line-height:1.05;
    letter-spacing:-.04em;
}

.community-sort{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.community-sort--thread{
    justify-content:flex-end;
}

.community-login-note{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 16px;
    padding:16px;
    background:linear-gradient(135deg,#fffaf0,#fff);
    border-color:#f1d89a;
    box-shadow:0 12px 26px rgba(159,109,0,.06);
}

.community-login-note strong{
    color:#111827;
}

.community-login-note span{
    color:#6b5b32;
    font-size:14px;
    line-height:1.4;
}

.community-login-note a{
    margin-left:auto;
    color:#0b8f55;
    font-weight:900;
}

.community-post-box,
.community-reply-box{
    padding:20px;
    display:grid;
    gap:13px;
}

.community-post-box[hidden]{
    display:none;
}

.community-post-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.community-post-head strong{
    color:#071627;
    font-size:20px;
}

.community-post-head button,
.community-profile-close{
    display:grid;
    place-items:center;
    width:38px !important;
    height:38px;
    min-width:38px;
    border:1px solid #d9efe4;
    border-radius:50%;
    background:#fff;
    color:#071627;
    font-size:24px;
    line-height:1 !important;
    cursor:pointer;
}

.community-post-box label{
    display:grid;
    gap:7px;
    color:#52606d;
    font-size:13px;
    font-weight:850;
}

.community-post-box input,
.community-post-box textarea,
.community-reply-box textarea{
    width:100%;
    min-width:0;
    max-width:100%;
    padding:13px 14px;
    border:1px solid #dce3e8;
    border-radius:14px;
    background:#fbfcfd;
    color:#071627;
    font:inherit;
    font-size:15px;
    line-height:1.45;
}

.community-post-box input:focus,
.community-post-box textarea:focus,
.community-reply-box textarea:focus{
    outline:none;
    border-color:#0ea964;
    box-shadow:0 0 0 3px rgba(14,169,100,.13);
}

.community-post-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
}

.community-status{
    color:#64748b;
    font-size:13px;
    font-weight:750;
}

.community-status.is-success{
    color:#0b8f55;
}

.community-status.is-error{
    color:#b42318;
}

.community-topic-list,
.community-thread-list{
    display:grid;
    gap:14px;
}

.community-topic-card{
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(210px,.32fr);
    gap:16px;
    padding:20px;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.community-topic-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:5px;
    background:linear-gradient(180deg,#0ea964,#86d957);
}

.community-topic-card:hover{
    transform:translateY(-2px);
    border-color:rgba(14,169,100,.42);
    box-shadow:0 22px 48px rgba(15,23,42,.095);
}

.community-topic-main{
    min-width:0;
    color:inherit;
    text-decoration:none;
}

.community-topic-main h3{
    margin:8px 0;
    color:#071627;
    font-size:24px;
    line-height:1.15;
    letter-spacing:-.03em;
}

.community-topic-main p{
    margin:0;
    color:#42526a;
    font-size:15px;
    line-height:1.55;
}

.community-topic-meta,
.community-thread-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    color:#64748b;
    font-size:12px;
    font-weight:800;
}

.community-topic-side{
    display:grid;
    align-content:start;
    gap:10px;
    padding:12px;
    border-radius:18px;
    background:#f8fafc;
}

.community-author{
    display:inline-flex;
    width:max-content !important;
    max-width:100%;
    padding:7px 10px;
    border:1px solid #d9efe4;
    border-radius:999px;
    background:#f4fbf7;
    color:#0b8f55;
    font:inherit;
    font-size:13px;
    font-weight:900;
    line-height:1.1 !important;
    cursor:pointer;
}

.community-author:hover,
.community-author:focus{
    border-color:#0ea964;
    background:#e8f8ef;
}

.community-author--static{
    cursor:default;
}

.community-author--static:hover,
.community-author--static:focus{
    border-color:#d9efe4;
    background:#f4fbf7;
}

.community-topic-stats{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.community-topic-stats span{
    padding:8px 10px;
    border-radius:12px;
    background:#fff;
    color:#52606d;
    font-size:12px;
    font-weight:750;
}

.community-topic-stats strong{
    color:#071627;
}

.community-emoji-row,
.community-reactions{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

.community-emoji-row span,
.community-reactions span,
.community-reactions button{
    display:inline-flex;
    align-items:center;
    gap:3px;
    min-height:24px;
    padding:3px 7px;
    border:1px solid #dce3e8;
    border-radius:999px;
    background:#fff;
    color:#071627;
    font:inherit;
    font-size:12px;
    font-weight:800;
    line-height:1 !important;
}

.community-reactions button{
    cursor:pointer;
}

.community-reactions button:hover,
.community-reactions button:focus{
    border-color:#0ea964;
    background:#e8f8ef;
}

.community-thread-head{
    padding:30px;
}

.community-back{
    margin-bottom:18px;
}

.community-thread-post{
    padding:22px;
}

.community-thread-post.is-main{
    border-color:#bfead5;
    background:#fbfffd;
}

.community-thread-post h2{
    margin:12px 0 14px;
    color:#071627;
    font-size:clamp(24px,3vw,36px);
    line-height:1.08;
}

.community-thread-text{
    color:#1f2937;
    font-size:16px;
    line-height:1.72;
    overflow-wrap:anywhere;
}

.community-thread-post .community-reactions{
    margin-top:10px;
}

.community-empty{
    padding:22px;
    border:1px dashed #cbd5e1;
    border-radius:18px;
    background:#fff;
    color:#64748b;
    text-align:center;
    font-weight:800;
}

.community-profile-modal{
    position:fixed;
    inset:0;
    z-index:99999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(245,251,248,.72);
    backdrop-filter:blur(8px);
}

.community-profile-modal[aria-hidden="false"]{
    display:flex;
}

.community-profile-card{
    position:relative;
    width:min(460px,100%);
    max-height:calc(100vh - 36px);
    overflow:auto;
    padding:22px;
    border:1px solid #d9efe4;
    border-radius:24px;
    background:#fff;
    box-shadow:0 28px 70px rgba(15,23,42,.18);
}

.community-profile-close{
    position:absolute;
    right:16px;
    top:16px;
}

.community-profile{
    display:flex;
    align-items:center;
    gap:12px;
    padding-right:46px;
}

.community-profile-avatar{
    display:grid;
    place-items:center;
    width:56px;
    height:56px;
    border-radius:18px;
    background:linear-gradient(135deg,#0ea964,#86d957);
    color:#fff;
    font-size:25px;
    font-weight:950;
}

.community-profile h2{
    margin:6px 0 4px;
    color:#071627;
    font-size:24px;
    line-height:1.05;
}

.community-profile p{
    margin:0;
    color:#64748b;
}

.community-profile-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin:16px 0;
}

.community-profile-stats span{
    padding:11px;
    border-radius:14px;
    background:#f4fbf7;
    color:#52606d;
    font-size:12px;
    font-weight:750;
}

.community-profile-stats strong{
    display:block;
    color:#071627;
    font-size:22px;
}

.community-profile-text{
    padding:14px;
    border-radius:16px;
    background:#f8fafc;
}

.community-profile-text strong{
    color:#071627;
}

.community-profile-text p{
    margin:8px 0 0;
    color:#42526a;
    line-height:1.5;
}

.community-profile-mini{
    display:grid;
    gap:8px;
    margin-top:12px;
    padding:12px;
    border:1px solid #edf2f7;
    border-radius:16px;
    background:#fff;
}

.community-profile-mini div{
    display:flex;
    justify-content:space-between;
    gap:12px;
    color:#52606d;
    font-size:12px;
    font-weight:750;
}

.community-profile-mini strong{
    color:#071627;
    text-align:right;
}

.community-profile-homepage{
    margin-top:16px;
}

.community-profile-error{
    color:#b42318;
    font-weight:850;
}

@media(max-width:880px){
    .community-hero,
    .community-intro-grid,
    .community-topic-card{
        grid-template-columns:1fr;
    }

    .community-board-top{
        align-items:flex-start;
        flex-direction:column;
    }

    .community-login-note a{
        margin-left:0;
    }
}

@media(max-width:560px){
    .community-shell{
        width:min(100% - 20px,1180px);
    }

    .community-hero,
    .community-board,
    .community-thread-head,
    .community-thread-post,
    .community-reply-box{
        border-radius:22px;
        padding:20px;
    }

    .community-profile-stats{
        grid-template-columns:1fr;
    }

    .community-hero-stats{
        grid-template-columns:1fr;
    }

    .community-topic-side{
        padding:10px;
    }
}