.btn{
  font-family:var(--font-sans);
  font-size:var(--text-base);
  border:1px solid var(--ui-border);
  background:var(--ui-surface);
  color:var(--ui-text);
  border-radius:12px;
  padding:7px 12px;
  cursor:pointer;
}
.btn:hover{ background:var(--ui-surface-2); }
.btn:disabled{ opacity:.5; cursor:not-allowed; pointer-events:none; }
.btn.is-loading{ position:relative; color:transparent; }
.btn.is-loading > *{ visibility:hidden; }
.btn.is-loading::after{
  content:''; position:absolute; top:50%; left:50%; width:16px; height:16px; margin:-8px 0 0 -8px;
  border:2px solid currentColor; border-top-color:transparent; border-radius:50%;
  color:var(--md-color-grey-white); animation:btn-spin .7s linear infinite;
}
@keyframes btn-spin{ to{ transform:rotate(360deg); } }
.btn-sm{ padding:5px 10px; font-size:var(--text-md); }
.btn-lg{ height:42px; padding:0 18px; font-size:var(--text-base); }
.btn-block{ width:100%; }

.btn.primary{ background:var(--ui-accent); color:var(--md-color-grey-white); border-color:var(--ui-accent); font-family:var(--font-display); }
.btn.primary:hover{ background:var(--ui-accent-hover); }
.btn.primary:disabled, .btn.primary:disabled:hover{
  background:var(--ui-border); border-color:var(--ui-border); color:var(--ui-muted); opacity:1;
}
.btn.danger{ background:var(--ui-danger); color:var(--md-color-grey-white); border-color:var(--ui-danger); }
.btn.danger:hover{ background:var(--ui-danger-hover); }

.btn-ghost{
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px;
  border:none; background:transparent; border-radius:8px; cursor:pointer;
  font-family:var(--font-sans); font-size:var(--text-base); font-weight:var(--font-weight-semibold);
  color:var(--ui-text); white-space:nowrap;
}
.btn-ghost:hover{ background:var(--ui-surface-2); }
.btn-ghost:disabled{ color:var(--ui-muted); cursor:default; }
.btn-ghost:disabled:hover{ background:none; }
.btn-ghost.btn-sm{
  height:auto; padding:5px 10px; border-radius:6px;
  font-size:var(--text-md); font-weight:var(--font-weight-regular); color:var(--ui-muted);
}
.btn-ghost.btn-sm:hover{ color:var(--ui-text); }

.icon-btn[hidden]{ display:none; }
.icon-btn{
  width:22px; height:22px;
  border-radius:9px;
  border:1px solid var(--ui-border);
  background:var(--ui-surface);
  color:var(--ui-muted);
  font-size:var(--text-base);
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding:0;
}
.icon-btn:hover{ border-color:var(--ui-accent); color:var(--ui-accent); }
.icon-btn:disabled{ opacity:0.4; cursor:default; pointer-events:none; }
.icon-btn-ghost{ width:32px; height:32px; border:none; background:transparent; font-size:var(--text-3xl); }
.icon-btn-ghost svg{ width:18px; height:18px; }
.icon-btn-ghost:hover{ background:var(--ui-surface-2); border-color:transparent; }
.icon-btn.accent{ border:none; background:var(--ui-accent); color:var(--md-color-grey-white); }
.icon-btn.accent:hover{ background:var(--ui-accent-hover); color:var(--md-color-grey-white); }
.icon-btn.accent:disabled, .icon-btn.accent:disabled:hover{ background:var(--ui-border); color:var(--ui-muted); opacity:1; cursor:default; }

.btn-split{ position:relative; display:flex; }
.btn-split .split-main{ border-radius:12px 0 0 12px; }
.btn-split .split-caret{ border-radius:0 12px 12px 0; border-left:1px solid var(--ui-border); padding:7px 8px; font-size:var(--text-xs); }
.btn-split .split-caret.primary{ border-left-color:rgba(255,255,255,0.35); }
.btn-split.caret-left{ flex-direction:row-reverse; }
.btn-split.caret-left .split-main{ border-radius:0 12px 12px 0; }
.btn-split.caret-left .split-caret{ border-radius:12px 0 0 12px; border-left:none; border-right:1px solid var(--ui-border); }