/* /css/app.components.css — Buttons, Cards, Pills, Toast, Typography */

.muted{ color:var(--muted); font-size:var(--fs-sm); line-height:var(--lh-muted); }

.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.field{ display:flex; flex-direction:column; gap:6px; }

.btn,.btn2,.btnGhost{
  border-radius:14px;
  padding:10px 14px;
  font-weight:var(--fw-semi);
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
  letter-spacing:.15px;
}
.btn{ background:var(--b0); color:#fff; }
.btn2{ background:var(--g); color:#fff; }
.btnGhost{ background:#fff; color:var(--b0); border-color:var(--border); }
.btnTiny{ padding:8px 10px; border-radius:12px; }
button:disabled{ opacity:.45; cursor:not-allowed; }

.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  box-shadow:0 2px 10px rgba(16,24,40,.05);
}
.item{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
}

.pill{
  padding:6px 10px;
  border-radius:999px;
  font-size:var(--fs-xs);
  font-weight:var(--fw-semi);
  background:#f2f4f7;
  color:var(--b0);
  border:1px solid var(--border);
  white-space:nowrap;
}

.hr{ height:1px; background:#eef2f7; margin:12px 0; }

.tTitle{ font-size:var(--fs-xl); font-weight:var(--fw-semi); line-height:var(--lh-tight); color:var(--text); }
.tSubtitle{ font-size:var(--fs-sm); font-weight:var(--fw-med); line-height:var(--lh-muted); color:var(--muted); }
.tKicker{ font-size:var(--fs-xs); font-weight:var(--fw-med); letter-spacing:.35px; color:var(--muted); text-transform:uppercase; }
.tStrong{ font-weight:var(--fw-semi); }
.tName{ font-size:var(--fs-2xl); font-weight:var(--fw-bold); line-height:var(--lh-tight); color:var(--text); }

.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  background:rgba(12,51,77,.95); color:#fff; padding:10px 14px; border-radius:999px;
  font-weight:var(--fw-semi); font-size:var(--fs-sm);
  opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:9999;
}
.toast.show{ opacity:1; }