/* Folha única dos cards de galeria (components/*/*.card.html).
   Espelha os componentes .jsx: mesmos tokens, mesmos tamanhos. Ao mudar
   Button.jsx / Tag.jsx / Switch.jsx, mude aqui também. */
body{margin:0;padding:0;background:var(--color-bg);font-family:var(--font-body);font-size:13.5px}
.pane{padding:18px;background:var(--color-bg);color:var(--color-text)}
.pane + .pane{border-top:var(--border)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:14px}
.cap{font-size:10.5px;color:var(--mut-2);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:var(--control-h,44px);padding:0 18px;border-radius:var(--radius-control,10px);font-family:var(--font-heading);font-weight:800;font-size:14.5px;cursor:pointer;border:1px solid transparent}
.btn-primary{background:var(--accent-strong);color:var(--on-accent)}
.btn-secondary{background:var(--color-surface);color:var(--color-text);border-color:var(--color-divider)}
.btn-ghost{background:transparent;color:var(--color-accent-800)}
.btn-danger{background:transparent;color:var(--color-danger);border-color:var(--color-divider)}
.btn:focus-visible,.fi:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.tag{display:inline-flex;align-items:center;gap:5px;border-radius:var(--radius-pill);padding:4px 10px;font-size:11.5px;font-weight:600;white-space:nowrap;flex:none}
.tag-accent{background:var(--color-accent-100);color:var(--color-accent-800)}
.tag-neutral{background:var(--color-neutral-100);color:var(--mut-1)}
.tag-outline{border:1px solid var(--color-accent);color:var(--color-accent-800)}
.tag-pos{border:1px solid var(--color-pos);color:var(--color-pos)}
.card{background:var(--color-surface);border:var(--border);border-radius:var(--radius-card,16px);box-shadow:var(--shadow-sm);padding:16px}
.fi{display:flex;align-items:center;gap:9px;background:var(--tint-1);border:var(--border);border-radius:var(--radius-control,10px);padding:0 13px;height:var(--control-h,44px);font-size:14.5px;color:var(--mut-2)}
.sw{width:50px;height:29px;border-radius:var(--radius-pill);display:flex;align-items:center;padding:3px;box-sizing:border-box}
.knob{width:23px;height:23px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25)}