:root{
    --bg-1:#f6f8fc;
    --bg-2:#eef4ff;
    --bg-3:#f8f2e6;
    --surface:#ffffff;
    --surface-soft:#fbfcff;
    --line:#e7ebf3;
    --line-strong:#d7deea;
    --text:#0f172a;
    --muted:#667085;
    --muted-2:#98a2b3;

    --gold:#c2a766;
    --gold-dark:#7d6430;
    --gold-soft:#f7edd8;
    --gold-soft-2:#f2e2bc;

    --blue:#1849a9;
    --blue-soft:#eef4ff;
    --blue-soft-2:#dbeafe;

    --green:#027a48;
    --green-soft:#ecfdf3;
    --green-soft-2:#d1fadf;

    --shadow-lg:0 20px 48px rgba(15, 23, 42, 0.08);
    --shadow-md:0 12px 28px rgba(15, 23, 42, 0.06);

    --radius-xl:24px;
    --radius-lg:18px;
    --radius-md:14px;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
}

body{
    font-family:Arial,sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at top left, rgba(194,167,102,0.14), transparent 26%),
        radial-gradient(circle at top right, rgba(24,73,169,0.08), transparent 24%),
        linear-gradient(180deg, #f9fbff 0%, #f6f8fc 52%, #f8f2e8 100%);
}

.wrap{
    max-width:1200px;
    margin:0 auto;
    padding:28px 20px 44px;
}

.hero,
.toolbar,
.agent-card,
.empty{
    background:rgba(255,255,255,0.94);
    border:1px solid var(--line);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-md);
}

.hero{
    padding:28px;
    margin-bottom:18px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(248,242,230,0.88) 52%, rgba(238,244,255,0.82) 100%);
    border-color:#eadfca;
}

h1{
    margin:0 0 12px;
    font-size:clamp(30px,4vw,46px);
    line-height:1.02;
    letter-spacing:-0.03em;
    color:#0b1f44;
}

.sub{
    font-size:16px;
    color:#7c6b47;
    line-height:1.65;
    max-width:760px;
}

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

.stat{
    border-radius:20px;
    padding:18px 18px 16px;
    border:1px solid var(--line);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
}

.stats .stat:nth-child(1){
    background:linear-gradient(180deg, #fffaf0 0%, #f7edd8 100%);
    border-color:#ead6ad;
}

.stats .stat:nth-child(2){
    background:linear-gradient(180deg, #f7faff 0%, #eaf2ff 100%);
    border-color:#d9e5ff;
}

.stats .stat:nth-child(3){
    background:linear-gradient(180deg, #f8fbf7 0%, #edf8ef 100%);
    border-color:#dcefdc;
}

.stat-label{
    font-size:11px;
    color:#6f6a5b;
    text-transform:uppercase;
    letter-spacing:.12em;
    margin-bottom:10px;
    font-weight:700;
}

.stat-value{
    font-size:28px;
    font-weight:800;
    line-height:1.2;
    color:var(--text);
}

.toolbar{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr auto;
    gap:12px;
    margin-bottom:18px;
    align-items:end;
    padding:18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(250,245,235,0.95) 100%);
    border-color:#e6dcc8;
}

.field label{
    display:block;
    margin-bottom:8px;
    font-size:11px;
    color:#6a737f;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:700;
}

.field input,
.field select{
    width:100%;
    height:46px;
    border:1px solid #cfd8e3;
    border-radius:14px;
    padding:0 14px;
    font-size:14px;
    background:#fff;
    color:var(--text);
    outline:none;
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.field input:focus,
.field select:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(194,167,102,0.12);
    background:#fffefb;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:46px;
    padding:0 18px;
    border-radius:14px;
    border:1px solid #d8c49a;
    background:linear-gradient(180deg, #f7edd8 0%, #f0dfb3 100%);
    color:#5d4920;
    font-size:14px;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    box-shadow:0 8px 18px rgba(194,167,102,0.18);
}

.btn:hover{
    transform:translateY(-1px);
    border-color:#c2a766;
    box-shadow:0 12px 22px rgba(194,167,102,0.24);
}

.grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    align-items:start;
}

.agent-card{
    padding:22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(252,248,240,0.96) 100%);
    border:1px solid #e8dcc6;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.agent-card:hover{
    transform:translateY(-3px);
    border-color:#d8c29a;
    box-shadow:var(--shadow-lg);
}

.agent-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    margin-bottom:14px;
}

.agent-top > div{
    min-width:0;
    flex:1;
}

.agent-name{
    display:inline-block;
    font-size:22px;
    font-weight:800;
    color:#0b1f44;
    text-decoration:none;
    letter-spacing:-0.02em;
}

.agent-name:hover{
    text-decoration:underline;
}

.agent-group{
    font-size:15px;
    color:#7d8798;
    margin-top:6px;
}

.pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    align-self:flex-start;
    min-height:34px;
    max-width:100%;
    padding:8px 12px;
    border-radius:999px;
    background:linear-gradient(180deg, #f7edd8 0%, #f1dfb4 100%);
    color:#7a6432;
    border:1px solid #e2cea1;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.rank-badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}

.rank-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:6px 10px;
    border-radius:999px;
    background:linear-gradient(180deg, #f1f6ff 0%, #e3edff 100%);
    color:var(--blue);
    border:1px solid var(--blue-soft-2);
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

.rank-badge-public{
    background:linear-gradient(180deg, #f0fcf4 0%, #dff7e8 100%);
    color:var(--green);
    border-color:var(--green-soft-2);
}

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

.mini-stat{
    background:
        linear-gradient(180deg, #fffcf6 0%, #f8eedb 100%);
    border:1px solid #ead8b8;
    border-radius:16px;
    padding:13px 12px;
}

.mini-label{
    font-size:11px;
    color:#7c6b47;
    text-transform:uppercase;
    letter-spacing:.1em;
    margin-bottom:6px;
    font-weight:800;
}

.mini-value{
    font-size:22px;
    font-weight:800;
    color:#0f172a;
}

.info{
    display:grid;
    gap:10px;
}

.info-row{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:10px;
    padding-bottom:11px;
    border-bottom:1px solid #ecdfca;
}

.info-row:last-child{
    border-bottom:0;
    padding-bottom:0;
}

.label{
    font-size:11px;
    color:#6d7690;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:800;
}

.value{
    font-size:14px;
    color:#111827;
    line-height:1.65;
}

.empty{
    padding:24px;
    color:var(--muted);
}

@media (max-width:980px){
    .stats{
        grid-template-columns:1fr;
    }

    .toolbar{
        grid-template-columns:1fr;
    }

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

    .mini-stats{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media (max-width:640px){
    .wrap{
        padding:18px 16px 34px;
    }

    h1{
        font-size:30px;
    }

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

    .pill{
        margin-top:6px;
        white-space:normal;
    }

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

    .info-row{
        grid-template-columns:1fr;
        gap:6px;
    }
}

.community-agents-shell{
    max-width:1200px;
    margin:0 auto;
    padding:24px 16px 48px;
}

.community-agents-hero{
    background:linear-gradient(180deg,#f7fff9 0%,#eef9f1 100%);
    border:1px solid rgba(31,183,106,0.14);
    border-radius:28px;
    padding:28px;
    box-shadow:0 18px 42px rgba(26,88,53,0.08);
    margin-bottom:24px;
}

.community-agents-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:32px;
    padding:0 14px;
    border-radius:999px;
    background:#eaf8ef;
    border:1px solid rgba(31,183,106,0.16);
    color:#177346;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.community-agents-title{
    margin:14px 0 10px;
    font-size:40px;
    line-height:1.04;
    letter-spacing:-0.03em;
    color:#163222;
}

.community-agents-sub{
    margin:0;
    max-width:760px;
    color:#587060;
    font-size:16px;
    line-height:1.8;
}

.community-agents-statbar{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-top:22px;
}

.community-agents-statbox{
    background:#fff;
    border:1px solid rgba(31,183,106,0.12);
    border-radius:20px;
    padding:16px;
    box-shadow:0 10px 24px rgba(26,88,53,0.05);
}

.community-agents-statlabel{
    margin:0 0 8px;
    color:#708779;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.community-agents-statvalue{
    margin:0;
    color:#127545;
    font-size:28px;
    line-height:1;
    font-weight:800;
}

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

.community-agent-card{
    display:block;
    text-decoration:none;
    background:linear-gradient(180deg,#ffffff 0%,#f6fcf8 100%);
    border:1px solid rgba(31,183,106,0.12);
    border-radius:24px;
    padding:22px;
    box-shadow:0 12px 28px rgba(26,88,53,0.06);
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.community-agent-card:hover{
    transform:translateY(-3px);
    border-color:rgba(31,183,106,0.24);
    box-shadow:0 18px 34px rgba(31,183,106,0.1);
}

.community-agent-cardtop{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    margin-bottom:14px;
}

.community-agent-name{
    margin:0;
    color:#163222;
    font-size:22px;
    line-height:1.15;
    font-weight:800;
    letter-spacing:-0.02em;
}

.community-agent-group{
    margin:6px 0 0;
    color:#6c8375;
    font-size:13px;
    line-height:1.6;
}

.community-agent-rank{
    min-width:46px;
    height:46px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eaf8ef;
    border:1px solid rgba(31,183,106,0.18);
    color:#177346;
    font-size:14px;
    font-weight:800;
}

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

.community-agent-minibox{
    background:#fff;
    border:1px solid rgba(31,183,106,0.1);
    border-radius:16px;
    padding:12px 10px;
}

.community-agent-minilabel{
    margin:0 0 6px;
    color:#708779;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.community-agent-minivalue{
    margin:0;
    color:#163222;
    font-size:18px;
    font-weight:800;
    line-height:1.15;
}

.community-agent-meta{
    display:grid;
    gap:10px;
    padding-top:14px;
    border-top:1px solid rgba(31,183,106,0.1);
}

.community-agent-metarow{
    color:#5c7263;
    font-size:13px;
    line-height:1.7;
}

.community-agent-metarow strong{
    color:#163222;
}

.community-agent-lasttitle{
    margin:14px 0 0;
    color:#294438;
    font-size:14px;
    line-height:1.7;
}

.community-agent-back{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 16px;
    border-radius:999px;
    text-decoration:none;
    background:#edf8f1;
    border:1px solid rgba(31,183,106,0.14);
    color:#177346;
    font-size:13px;
    font-weight:800;
    margin-bottom:18px;
}

.community-agent-pagegrid{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:20px;
    align-items:start;
}

.community-agent-panel{
    background:linear-gradient(180deg,#ffffff 0%,#f6fcf8 100%);
    border:1px solid rgba(31,183,106,0.12);
    border-radius:24px;
    padding:24px;
    box-shadow:0 12px 28px rgba(26,88,53,0.06);
}

.community-agent-pagehead{
    margin-bottom:18px;
}

.community-agent-pagetitle{
    margin:10px 0 8px;
    color:#163222;
    font-size:34px;
    line-height:1.05;
    letter-spacing:-0.03em;
}

.community-agent-pagesub{
    margin:0;
    color:#61786a;
    font-size:15px;
    line-height:1.75;
}

.community-agent-signal-list{
    display:grid;
    gap:14px;
}

.community-agent-signal{
    display:block;
    text-decoration:none;
    background:#fff;
    border:1px solid rgba(31,183,106,0.1);
    border-radius:20px;
    padding:18px;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.community-agent-signal:hover{
    transform:translateY(-2px);
    border-color:rgba(31,183,106,0.22);
    box-shadow:0 16px 28px rgba(31,183,106,0.08);
}

.community-agent-signaltype{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 12px;
    border-radius:999px;
    background:#edf8f1;
    border:1px solid rgba(31,183,106,0.14);
    color:#177346;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.community-agent-signaltitle{
    margin:12px 0 8px;
    color:#163222;
    font-size:19px;
    line-height:1.45;
    font-weight:800;
    letter-spacing:-0.02em;
}

.community-agent-signalmeta{
    color:#5f7667;
    font-size:13px;
    line-height:1.75;
}

.community-agent-empty{
    color:#708779;
    font-size:15px;
    line-height:1.8;
}

@media (max-width:1080px){
    .community-agents-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .community-agent-pagegrid{
        grid-template-columns:1fr;
    }
}

@media (max-width:760px){
    .community-agents-title{
        font-size:30px;
    }

    .community-agents-statbar{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

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

    .community-agent-mini{
        grid-template-columns:1fr;
    }

    .community-agents-hero,
    .community-agent-panel{
        padding:20px;
        border-radius:20px;
    }

    .community-agent-pagetitle{
        font-size:28px;
    }
}