/* Reusable UI: cards, buttons, inputs, segmented controls, avatars */
/* ---------- primitives ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pill{padding:6px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);letter-spacing:.04em;text-transform:none;font-weight:500}
.dot{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none}
.dot.live{background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:ping 2s infinite}
.dot.on{background:var(--yes)}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}70%,100%{box-shadow:0 0 0 8px transparent}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;
  border-radius:14px;font-weight:600;font-size:15px;letter-spacing:-.01em;white-space:nowrap;
  transition:transform .2s var(--ease),background .2s,box-shadow .2s,opacity .2s;
}
.btn:active:not(:disabled){transform:scale(.97)}
.btn-primary{background:var(--text);color:var(--bg);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 8px 20px -8px rgba(0,0,0,.4)}
.btn-primary:hover:not(:disabled){transform:translateY(-1px)}
.btn-ghost{background:var(--surface-2);border:1px solid var(--border)}
.btn-ghost:hover:not(:disabled){background:var(--surface-3)}
.btn-accent{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 10px 30px -10px var(--accent)}
.btn-accent:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 14px 34px -10px var(--accent)}
.btn-block{width:100%}
.btn-sm{height:36px;padding:0 14px;border-radius:10px;font-size:13px}
.icon-btn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--muted);border:1px solid transparent;transition:.2s}
.icon-btn:hover{color:var(--text);background:var(--surface-2);border-color:var(--border)}
.icon-btn svg{width:18px;height:18px}

.input{
  width:100%;height:48px;padding:0 16px;border-radius:14px;background:var(--surface-2);
  border:1px solid var(--border);outline:none;transition:border .2s,box-shadow .2s,background .2s;
}
.input::placeholder{color:var(--faint)}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);background:var(--surface)}
label.lbl{display:block;font-size:13px;font-weight:500;color:var(--muted);margin:0 0 8px 2px}

.seg{display:inline-flex;padding:4px;gap:2px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border)}
.seg button{height:32px;padding:0 12px;border-radius:9px;font-size:13px;font-weight:600;color:var(--muted);transition:.2s var(--ease)}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.seg button:not(.on):hover{color:var(--text)}
.seg.readonly button{pointer-events:none}

.av{
  --h:250; width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:12px;font-weight:700;letter-spacing:0;color:hsl(var(--h) 70% 30%);
  background:hsl(var(--h) 80% 90%);
}
:root[data-theme="dark"] .av{color:hsl(var(--h) 90% 82%);background:hsl(var(--h) 40% 20%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .av{color:hsl(var(--h) 90% 82%);background:hsl(var(--h) 40% 20%)}}
.av.sm{width:24px;height:24px;font-size:10px}
.av.lg{width:40px;height:40px;font-size:14px}