.community-circle { color:var(--sv-text,#eee); background:var(--sv-surface,#16213e); padding:16px; max-width:760px; box-sizing:border-box; overflow-wrap:anywhere; }
.community-circle h2,.community-circle h3,.community-circle h4 { margin:0 0 10px; }
.community-circle p { line-height:1.5; margin:8px 0; }
.circle-meta { color:var(--sv-text-muted,#aaa); font-size:.9rem; }
.circle-project,.circle-invitation { border:1px solid var(--sv-border,#0f3460); border-radius:10px; padding:14px; margin:12px 0; }
.circle-phase { border-top:1px solid var(--sv-border,#0f3460); padding:14px 0; }
.community-circle progress { width:100%; height:12px; accent-color:var(--sv-accent,#e94560); }
.community-circle summary { min-height:44px; box-sizing:border-box; padding:12px 0; cursor:pointer; }
.community-circle details { margin:8px 0; }
.community-circle button { min-height:44px; max-width:100%; padding:10px 14px; margin:4px 8px 4px 0; border:1px solid var(--sv-border-hi,#1a4a8a); border-radius:7px; color:var(--sv-text,#eee); background:var(--sv-surface-2,#12223e); cursor:pointer; font:inherit; white-space:normal; }
.community-circle button:disabled { opacity:.55; cursor:wait; }
.community-circle :focus-visible { outline:2px solid var(--sv-accent,#e94560); outline-offset:3px; }
.circle-status:empty { display:none; }
.community-circle select { min-height:44px; max-width:100%; padding:8px; color:var(--sv-text); background:var(--sv-surface-2); border:1px solid var(--sv-border-hi); border-radius:7px; font:inherit; }
@media(max-width:480px) { .community-circle { padding:12px; } .circle-project { padding:10px; } }