.circles { color:var(--ink); }
.circles form,.circles .circles-list { display:flex;flex-wrap:wrap;gap:12px;margin:16px 0;align-items:end; }
.circles label { display:grid;gap:8px;flex:1; }
.circles button,.circles input,.circles select { min-height:44px;min-width:44px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-sm,8px);background:var(--surface-2);color:var(--ink);font:inherit; }
.circles button { cursor:pointer; }
.circles button:disabled,.circles input:disabled,.circles select:disabled { opacity:.55;cursor:default; }
.circles article { padding:16px;margin:16px 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card,16px); }
.circles li { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0; }
.circles ul { padding:0;list-style:none; }
.circles [aria-pressed="true"] { border-color:var(--blue); }
.circles button:focus-visible,.circles input:focus-visible,.circles select:focus-visible { outline:2px solid var(--blue);outline-offset:2px; }
.circles > p,.circles article p { color:var(--fog); }
.circles form.ec-card { padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--edge); }
.circles h1,.circles h2,.circles h3 { margin:0 0 12px; }
.circles article { box-shadow:var(--edge); }
.circles .circles-list { align-items:stretch; }
.circles-list button { flex:1;text-align:left;padding:18px;border-radius:var(--r-card); }
.circles button[type="submit"],.circles [data-create] button,.circles [data-add] button,.circles [data-response="accept"] { background:var(--blue);color:var(--ink);font-weight:700; }
.circles [data-delete],.circles [data-remove] { color:var(--alert); }
.circles-invites { margin:20px 0; }
.circles-invites article button + button { margin-left:10px; }
.circles [role="status"]:empty { display:none; }
.circles input,.circles select { width:100%;box-sizing:border-box; }
.circles label { min-width:0; }
@media(max-width:480px) { .circles form { align-items:stretch;flex-direction:column; } }