/* ═══════════════════════════════════════════
   MIUIX CONSOLE — Button Component
   ═══════════════════════════════════════════ */

.mx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 18px;
  border-radius:var(--mx-r-sm);
  font-size:13px;font-weight:600;
  cursor:pointer;
  transition:all var(--mx-d1) var(--mx-ease);
  -webkit-tap-highlight-color:transparent;
  position:relative;overflow:hidden;
  white-space:nowrap;
}
.mx-btn:active{transform:scale(0.95);box-shadow:inset 0 2px 4px rgba(0,0,0,0.2)}

/* Primary */
.mx-btn-primary{
  background:var(--mx-primary);color:#fff;
  box-shadow:0 2px 8px rgba(76,139,245,0.2);
}
.mx-btn-primary:hover{
  background:var(--mx-primary-hover);
  box-shadow:0 4px 14px rgba(76,139,245,0.3);
  transform:translateY(-1px);
}
.mx-btn-primary:active{transform:scale(0.95) translateY(0)}

/* Secondary */
.mx-btn-secondary{
  background:var(--mx-s3);color:var(--mx-text);
  border:1px solid var(--mx-border);
}
.mx-btn-secondary:hover{
  background:var(--mx-s4);
  border-color:var(--mx-t3);
}

/* Ghost */
.mx-btn-ghost{
  background:transparent;color:var(--mx-t2);
}
.mx-btn-ghost:hover{
  background:var(--mx-s-hover);color:var(--mx-text);
}

/* Danger */
.mx-btn-danger{
  background:var(--mx-red);color:#fff;
}
.mx-btn-danger:hover{
  filter:brightness(1.1);
  box-shadow:0 4px 14px rgba(248,113,113,0.25);
}

/* Pill — Miuix style capsule button */
.mx-btn-pill{
  border-radius:var(--mx-r-pill);
  height:32px;padding:0 14px;
  font-size:12px;
}

/* Icon button */
.mx-btn-icon{
  width:36px;height:36px;padding:0;
  border-radius:var(--mx-r-sm);
}

/* Sizes */
.mx-btn-sm{height:30px;padding:0 12px;font-size:12px;border-radius:var(--mx-r-xs)}
.mx-btn-lg{height:42px;padding:0 22px;font-size:14px}

/* Disabled */
.mx-btn[disabled]{
  opacity:0.4;cursor:not-allowed;pointer-events:none;
}

/* Mobile: 加大触控区 */
/* ═══ DARK MODE — button pressed inner shadow ═══ */
[data-theme="dark"] .mx-btn:active{box-shadow:inset 0 2px 4px rgba(0,0,0,0.3)}

@media(max-width:767px){
  .mx-btn{height:40px;padding:0 20px;font-size:14px}
  .mx-btn-sm{height:36px;padding:0 14px;font-size:13px}
  .mx-btn-lg{height:46px;padding:0 24px;font-size:15px}
  .mx-btn-icon{width:40px;height:40px}
  .mx-btn-pill{height:34px;padding:0 16px;font-size:13px}
}