:root {
    --cc-rsr-bg: #0d0d0d;
    --cc-rsr-panel: #151515;
    --cc-rsr-card: #1e1e1e;
    --cc-rsr-line: rgba(255,255,255,.12);
    --cc-rsr-text: #f5f5f5;
    --cc-rsr-muted: #aaaaaa;
    --cc-rsr-green: #21d69b;
    --cc-rsr-orange: #ff8a3d;
    --cc-rsr-purple: #9d7bff;
}

.cc-rsr-main,
.cc-rsr-module {
    background: var(--cc-rsr-bg);
    color: var(--cc-rsr-text);
}

.cc-rsr-module {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 40px 0;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cc-rsr-hero {
    border: 1px solid var(--cc-rsr-line);
    border-radius: 30px;
    padding: 36px;
    background:
        radial-gradient(circle at 15% 15%, rgba(33,214,155,.22), transparent 32%),
        radial-gradient(circle at 80% 5%, rgba(255,138,61,.18), transparent 28%),
        linear-gradient(135deg, #171717, #0d0d0d);
    box-shadow: 0 22px 70px rgba(0,0,0,.45);
}

.cc-rsr-kicker {
    margin: 0 0 10px;
    color: var(--cc-rsr-green);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-weight: 900;
    font-size: 12px;
}

.cc-rsr-hero h1 {
    margin: 0;
    font-size: clamp(36px, 8vw, 78px);
    line-height: .92;
    letter-spacing: -.055em;
    text-transform: uppercase;
    color: var(--cc-rsr-text);
}

.cc-rsr-hero p {
    max-width: 780px;
    color: var(--cc-rsr-muted);
    font-size: 17px;
}

.cc-rsr-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 18px;
    margin-top: 22px;
}

.cc-rsr-card {
    background: var(--cc-rsr-panel);
    border: 1px solid var(--cc-rsr-line);
    border-radius: 24px;
    overflow: hidden;
}

.cc-rsr-art {
    min-height: 160px;
    background:
        linear-gradient(135deg, rgba(33,214,155,.22), transparent),
        repeating-linear-gradient(45deg, #222 0 11px, #101010 11px 22px);
}

.cc-rsr-art-2 { background: linear-gradient(135deg, rgba(255,138,61,.3), transparent), repeating-linear-gradient(-35deg, #261b12 0 11px, #101010 11px 22px); }
.cc-rsr-art-3 { background: linear-gradient(135deg, rgba(157,123,255,.32), transparent), repeating-linear-gradient(25deg, #1b1728 0 14px, #101010 14px 28px); }
.cc-rsr-art-4 { background: linear-gradient(135deg, rgba(33,214,155,.16), rgba(255,138,61,.18)), radial-gradient(circle, #333 0 8px, #111 8px 22px); }
.cc-rsr-art-5 { background: repeating-linear-gradient(90deg, #2f2f2f 0 7px, #101010 7px 15px); }
.cc-rsr-art-6 { background: linear-gradient(135deg, rgba(255,138,61,.22), rgba(157,123,255,.22)), repeating-radial-gradient(circle, #2a2a2a 0 7px, #101010 7px 15px); }
.cc-rsr-art-7 { background: linear-gradient(135deg, rgba(33,214,155,.3), rgba(157,123,255,.14)), repeating-linear-gradient(120deg, #212820 0 10px, #0d0d0d 10px 20px); }
.cc-rsr-art-8 { background: linear-gradient(135deg, rgba(255,255,255,.12), transparent), repeating-linear-gradient(10deg, #253033 0 10px, #111 10px 22px); }

.cc-rsr-card-body {
    padding: 17px;
}

.cc-rsr-card span {
    display: inline-flex;
    color: var(--cc-rsr-green);
    border: 1px solid rgba(33,214,155,.38);
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 800;
}

.cc-rsr-card h3 {
    color: var(--cc-rsr-text);
    margin: 12px 0 8px;
}

.cc-rsr-card p {
    color: var(--cc-rsr-muted);
}

.cc-rsr-admin-wrap .cc-rsr-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.cc-rsr-admin-card {
    background: #fff;
    border: 1px solid #dcdcde;
    padding: 18px;
    margin-top: 18px;
}

.cc-rsr-admin-card pre {
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    padding: 12px;
    overflow: auto;
    max-height: 420px;
}

@media (max-width: 980px) {
    .cc-rsr-grid,
    .cc-rsr-admin-wrap .cc-rsr-panels {
        grid-template-columns: 1fr;
    }
}
