.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600;
  border: none; cursor: pointer;
  transition: all 0.18s; position: relative; overflow: hidden;
}
.btn::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,0); transition:background 0.18s; }
.btn:hover::after { background:rgba(0,0,0,0.06); }
.btn:active { transform: scale(0.97); }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary2)); color: #fff; box-shadow: 0 4px 18px rgba(37,99,200,0.25); }
.btn-primary:hover { box-shadow: 0 4px 24px rgba(75,142,240,0.38); }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-outline:hover { border-color: rgba(75,142,240,0.25); }
.btn-ghost  { background: rgba(37,99,200,0.07); color: var(--text); }
.btn-danger { background: rgba(220,38,38,0.1); color: var(--red); border: 1px solid rgba(220,38,38,0.15); font-size:12px; padding:6px 10px; border-radius:8px; }
.btn-danger:hover { background: rgba(220,38,38,0.2); }

.toggle { width:40px; height:22px; border-radius:11px; background:rgba(0,0,0,0.1); position:relative; cursor:pointer; transition:background 0.25s; flex-shrink:0; }
.toggle.on { background: linear-gradient(135deg, var(--primary), var(--primary2)); }
.toggle-knob { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1); box-shadow:0 1px 4px rgba(0,0,0,0.3); }
.toggle.on .toggle-knob { transform: translateX(18px); }