.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 17px; border-radius:var(--r-md); font-weight:600; font-size:.88rem;
  background:var(--cream-2); color:var(--ink); border:1px solid var(--line);
  transition:transform .12s, box-shadow .16s, background .16s; min-height:var(--tap); white-space:nowrap;
}
.btn:hover{background:var(--cream-3)}
.btn:active{transform:translateY(1px)}
.btn .ic{width:17px;height:17px;flex:0 0 17px}
.btn-primary{background:var(--navy); color:#fff; border-color:var(--navy); box-shadow:var(--shadow-s)}
.btn-primary:hover{background:var(--navy-deep)}
html[data-theme="dark"] .btn-primary{color:var(--on-accent)}
.btn-rose{background:var(--rose); color:var(--on-accent-ink); border-color:var(--rose); box-shadow:var(--shadow-s)}
.btn-rose:hover{background:var(--rose-deep); color:#fff}
.btn-ghost{background:transparent; border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--cream-2)}
.btn-danger{background:var(--danger-bg); color:var(--danger); border-color:transparent}
.btn-danger:hover{background:var(--danger); color:#fff}
.btn-sm{padding:6px 11px; font-size:.79rem; min-height:34px; border-radius:var(--r-sm)}
.btn-sm .ic{width:14px;height:14px;flex:0 0 14px}
.btn-block{width:100%}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-lg{padding:14px 26px; font-size:.96rem; min-height:52px; border-radius:var(--r-md)}